Web Development

Highly recommended topics are bolded.

HTML, CSS

• Basics:

  • Mozilla Develop Network (HTML, CSS).
  • Learn about CSS Flexbox, Normalize.css
  • CSS Zen Garden

• Extras

  • Sass is easy to learn and powerful way to write
  • Compass contains a lot of reusable patterns for scss.
  • Twitter Bootstrap and Foundation are popular templates.

Javascript

• Fundamental JavaScript Concepts

  • Mozilla Developer Network
  • JavaScript Garden is a good reference to language quirks and gotchas.

• Debugging:

  • Learn to use the Chrome Inspector (or Firebug if you’re a firefox fan.)

    • Learn useful short keys – the basic one is cmd+shift+I for opening inspector. Then you can learn more by clicking the gear button on the bottom right and see the shortcuts tab
    • Learn to use breakpoint to debug.

  • For unit testing, learn how to connect Visual Studio Code to unit testing tools (e.g., connect Mocha to VSCode).

  • Use a linter to avoid syntactic bugs such as JSHint. (gjslint, jslint are the other two alternatives.)

• To write modular code, consider WebPack or Browserify (or AMD and requirejs).

• More Style Guides

  • JavaScript: The Good Parts is a popular classic but it has also been criticized as a bit too religious!
  • Addy Osmani's list of good JavaScript style guide

• Useful Library

  • Lodash, a utility library, is helpful for writing javascript with functional programming paradigm. However, sometimes d3 helpers are enough. (Note: Lodash is an arguably better fork of underscore)
  • Bacon.js - functional reactive programming library
  • Need an in-memory database for your vis prototype? - try datavore or crossfilter

• Syntax alternatives: TypeScript, CoffeeScript

  • TypeScript is worth considering especially for larger projects since you can leverage static analysis of types to avoid more bugs.

• Build tools - a few options:

  • Simply use npm script (See Vega / [Datalib]](http://www.github.com/vega/datalib).)
  • Use Gulp, a a streaming build system
  • Grunt, which is a config-based build system. (Gulp is easier though)

• Javascript Frameworks - here are a few popular ones:

  • Backbone.js - Simple MVC Backbone
    • Backbone Fundamentals
  • Angular.js - better but takes more time to learn (say 1-2 weeks to really understand concepts)
    • Start with egghead.io and thinkster.io.
    • Angular's official document is a pain. When you look at it, make sure to look at comments so you learn from others' confusion. Hopefully the community is big, so it should get better overtime though.
    • Use yeoman
    • Useful stuff from mg-newsletter
      • Angular for jQuery developer
    • Make sure to have AngularJS Batarang in Chrome so you can debug scope.
  • React.js

Editor

• Beginner? Start with:
  • Visual Studio Code
  • Sublime Text with Emmet and SublimeLinter/JSHint
  • Atom (We do not recommend Atom as it's often too slow for larger projects.)
• Like IDE and willing to pay? Webstorm is a good option.
• Dash for quick documentation look up.