Web Development Resources

Table of contents

In the second half of the class, we wil create Web-based visualizations. Thus, it is important that you familiarize yourself with common Web tools and languages, such as HTML, CSS and JavaScript (JS). JS is especially important since we will be using D3, a data-driven JS library that will enable you to create advanced charts and graphs.

MIT courses

DesignFTW: Spring course on web development & UI design

  • Targeting CS sophomores with some programming experience, this course teaches web technologies and usability principles in tandem.
  • While the course is not currently offered, you can still access its content.

web.lab: IAP Crash course by MIT students

  • Formerly known as 6.148, web.lab is a web programming class and competition that takes place over IAP every January.
  • From their website: web.lab lays the foundations for understanding complicated web techologies using the fundamental building blocks of HTML, CSS, and JavaScript. In addition to learning how to build a website, students enrolled in web.lab may also take part in a competition to win prize money and glory. (You should check it out next year!)
  • Even though web.lab already took place this year, you can still access their content & videos
  • We also share some of the most relevant lectures below (from YouTube).

Web-based resources

There is a wealth of resources on the Web about the Web platform, but a much smaller subset are up to date and high quality. The Web Platform has improved tremendously in the last few years, so following outdated tutorials can end up making things harder than they need to be.

Unlike other platforms, “new” does not mean “advanced”. Often things are added to the platform to make things easy that were previously hard.

Reference material & tutorials

For most things, try MDN first. It includes both reference material and tutorials for all skill levels. There are two reasons MDN tends to be very high quality:

  1. It’s funded directly by browser vendors (Google, Mozilla, Microsoft, Apple) to ensure it is up to date and high quality and has several professional technical writers working full time on it.
  2. It’s also a wiki which means anybody can submit corrections.

Adding mdn to your Google searches is a good way to prioritize MDN results.

Other good sources include Khan Academy, Code Academy. LinkedIn Learning also includes several web development courses.

Avoid W3Schools, which can sometimes be the top result for many searches. While it has improved in recent years, it is often inaccurate and outdated. Do not confuse it with W3C, which is the standards body that defines most Web platform technologies.

We will include links to specific resources at the end of each lab (and as needed in individual sections).

Web Development tools

Stack Overflow and ChatGPT

When reading Stack Overflow answers, be sure to check the date. Treat anything over 3-4 years old with suspicion and check it exhaustively before using it.

Same with AI: GPTs are often trained on outdated data and will give you outdated answers. It often helps to make it part of your prompt that you only care about modern browsers.

Debugging

  • Every browser includes developer tools that help us inspect the current state of any web page including current DOM tree, what CSS applies where, JS errors etc. The more familiar you become with them, the less time you’ll be spending debugging.
  • Use ESLint to avoid syntactic bugs
  • CodePen: quickly experiment with HTML, CSS, JS without having to set up any scaffolding
  • HTML Validator: Catch many HTML mistakes early and short-circuit debugging
  • Can I Use: Check browser support for various Web platform features

Abstractions (libraries, frameworks, etc.)

  • TypeScript is a strongly typed superset of JS that compiles to plain JS. It can be a good way to catch errors early and make your code more maintainable and is very widely used.
  • Lodash (and its predecessor underscore) are JS utility libraries. Make sure to use them only if needed. Sometimes d3 helpers are enough.
  • Need an in-memory database for your vis prototype? - try datavore or crossfilter
  • We will use Svelte in this class, but there are many other popular JS frameworks:
    • Vue.js
    • React
    • Angular
    • Vue.js and Svelte have a shallower learning curve than React or Angular, and are likely more than sufficient for the assignments and final project in this class.
    • egghead.io has a fantastic set of video tutorials about a variety of JavaScript frameworks.

Web Development Tools

  • We recommend using Visual Studio Code as your code editor. See Lab 0 about setting it up
  • If you have a Mac, Dash is great for quick documentation lookup.

Git & GitHub

Git Tutorials

GitHub

GUI

  • Using git with the command line is generally fast but we recommend GitHub Desktop for better visibility of status.
  • There are also other options, such as SourceTree.
  • Visual Studio Code also has a built-in Git interface along with useful extensions such as Git Graph and Git Lens.

More Tips

  • Atomic Commit is a good practice.
  • Stash is useful when you have unfinished messy things and need to switch branches to work on something else.