Welcome to JavaScript Programming for Planners & Designers!
- Course: CPLN-692/MUSA-611, University of Pennsylvania
- Location: Meyerson Hall B2 and online
- Schedule: 1:45-4:45PM, Mondays
- Instructor:
- Mjumbe Poe, [email protected]
- TA:
- Jingyi Li, [email protected]
- Office Hours:
- Mjumbe:
- Monday 4PM-5PM online
- Wednesday 12AM-1PM TBD
- Thursday 4PM-5PM online
- Book a time
- Jingyi:
- For now, Friday mornings
- Book a time
- Mjumbe:
- Need help?
- Slack organization
- Stack Overflow is your friend!
This course is the first part of a 2-part track on building systems that display, analyze, and in some cases generate new geospatial data. The emphasis is on building systems. In this course you will build interactive interfaces to work with data, primarily in CSV and JSON format, in the web browser. In the second course (Geospatial Cloud Computing & Visualization) students will build scheduled, automated, cloud-based processes to clean, transform, and otherwise prepare data for analysis and visualization.
The courses are best together, but this first course can stand alone.
- Code Editors
- Terminals
- Git Clients
- Node.js
- Mozilla Developer Network - A highly authoritative body of documentation on Javascript and many other web development topics.
- Introduction to Web Mapping - A web-based text book specifically for JavaScript-based mapping. A good portion of this class will overlap with the material in this book.
- 30 Days of JavaScript - A step-by-step guide to learn JavaScript programming language in as few as 30 days.
- You Don't Know JS - A set of free online books which start from scratch and go, in-depth, into javascript concepts and best practices.
- Eloquent Javascript - This is a free book with some advanced content. As you think about the application you might like to build for your final, the chapters on HTML forms, drawing with javascript, building a game, and constructing your own painting application will push further than we can in class.
- Map-based Web Application Examples
There are additional resources on topics covered in the class in the resources/ folder.
- Gain familiarity and comfort with the JavaScript language (and, as necessary, HTML and CSS)
- Gain familiarity with "tools of the trade", such as code editors, git and GitHub, and practices such as testing and linting code
- Understand the structure of client-side web applications built in JavaScript, especially:
- How web browsers load resources from the web
- How web browsers respond to user interaction
- Know how to use mapping libraries like Leaflet, along with some of its various plugins
- Know how to work with data in JavaScript, including understanding the limits of client-side data processing
Throughout this 15 week course, you'll be learning to program applications using HTML, CSS, and Javascript. In addition to programming skills, we will stress the "tools of the trade": you will use a text editor designed for programming; your code will be turned in with git and managed through github. You will be programming in the same way and with some of the same tools as software developers in the industry.
We'd like to keep the course somewhat freeform — there are basic skills which must be touched on, but your interests will help shape the direction to a large extent. Most of your practice will come through building three projects in JavaScript, in addition to a self-directed final project that can take any topic you find interesting (so long as you use tools from our class).
This syllabus is a living document. As the course progresses, greater detail will be added to reflect the content of each week.
- Assessment Method / Grading Criteria:
- Participation and exercises: 40%
- Projects: 40%
- Growth: 20%
- You’ll have SHORT exercises to do in almost every class, at least for the first half of the semester
- Exercises will be submitted for credit via pull request on GitHub
- Most exercises will be checked automatically when you submit; you can always tweak until it works (i.e., the exercise due dates are flexible, but please don't wait until the end of the semester 🙏🏾)
There will be three structured projects that everyone will take part in:
- The Class Dossier -- This "mini-project" will help you get familiar with the structure of some of the types of data files we'll be working with in this class -- specifically JSON and HTML files.
- Philadelphia School Data Explorer -- Build an interface for sorting and filtering through school data, and visualizing the results.
- Voter Canvassing Helper -- Use Pennsylvania voter roll data to build an application for organizing a voter outreach effort.
Your final assignment for the class will be decided through a project proposal negotiated with me. Final projects will be done in groups or independently — criteria for success will be hammered out in the final project proposal and group projects (if we have any) will be expected to engage with a wider scope and greater difficulty than individual projects. Group projects will also leverage the power of GitHub to make collaboration simpler and more transparent for grading purposes (this will make more sense once you're familiar with GitHub).
Subject to change as necessary!
| Week | Date | Topic | Project |
|---|---|---|---|
| 1 | 31 Aug | Getting started | Class Dossier |
| 2 | 07 Sep | Working with data | ┴ |
| 3 | 14 Sep | Designing systems | School Explorer |
| 4 | 21 Sep | Asynchronous behavior #1 (Events) | │ |
| 5 | 28 Sep | DOM Manipulation | │ |
| 6 | 05 Oct | Styles and Layouts | │ |
| 7 | 12 Oct | Asynchronous behavior #2 (Requests) | ┴ |
| 8 | 19 Oct | Browser APIs | Voter Canvassing |
| 9 | 26 Oct | 3rd-party APIs | │ |
| 10 | 02 Nov | A11y, I18n, & L10n | │ |
| 11 | 09 Nov | ┴ | |
| 12 | 16 Nov | Final Project | |
| │ | |||
| 13 | 30 Nov | │ | |
| 14 | 07 Dec | Project presentations | ┴ |
| 14 Dec | Overflow presentations (if necessary) |
- Git and Github
- Code editing
- First steps with Javascript/HTML/CSS (playing in the console)
- JavaSCript data types
- JSON
- GeoJSON
- Functions
- User stories and project management
- The Document Object Model (DOM)
- CSS selectors & the DOM
- Responding to interactive events
- The Document Object Model (DOM)
- CSS selectors & the DOM
- CSS units
- Common CSS layout patterns
- Map tiles
- The JavaScript event loop
- Dynamically fetching data
- CSV data
- Fetch (redux)
- Geolocation
- Local Storage
- APIs (using Mapbox and Firestore)
- Accessibility
- Internationalization
- Localization
- Where to find spatial data
- Client-side geospatial analysis (Turf.js)
- D3
- Deck.gl
- Bootstrap
- Using the command line
- Server-side JavaScript (node.js)
- Advanced debugging
- Vector tiles
In compliance with Penn's Code of Academic Integrity, blatantly and egregiously copying another student's work will not be tolerated. However, because this course is designed to help prepare students for work in professional programming environments, copying and pasting is not universally prohibited: we encourage students to work together and to freely use the internet as a resource for finding solutions to vexing problems. Citing every copied and pasted line of code is not necessary. Large patterns or multiple lines of code taken from external sources should, however, be noted with in-code comments. If an instance is unclear, you should feel free to speak with the instructors.