Tools:

Browserify [1]. You have all the npm packages available, and your modules are compatible with Node. This allows you to easily test your modules, or reuse some of your modules in the browser, the CLI and a webserver for example.

Stylus [2] is great. Compared to Sass, I think it’s easier, more or equally powerful, and more future-proof. It’s basically a programming language on top of CSS, while Sass looks more like another language that produces CSS. It’s also written in JS, so you can easily write your own plugins (as npm modules).

Browserify and Stylus are also quite nice if your code is component-oriented.

This is how you import a component in Browserify:

  require('my-component')

And in Stylus:

  @require 'my-component'

For the build step, I always use Make because it’s everywhere except Windows, and I switch on gulp [3] if things get complicated or if I need Windows compatibility.

I’m using tape [4] and testling [5] (locally) for tests. Simple.

jspage [6] (I’m the author) is a simple tool I often use to transform some JS into a page. Useful for quick tests if you work in the CLI.

Services:

Cloudup [7] is nice for quick screenshot sharing. On OS X, I just use the built-in tool to make a screenshot, and an URL is immediately copied to the clipboard, I just have to paste it to someone. The delay between the moment when you take the screenshot and the moment when the other person loads the page is usually enough for the screenshot to be uploaded and displayed.

scri.ch [8] (I wrote this tool) is a simple drawing tool I’m using to share visual ideas, especially in GitHub issues (just add .png to an URL to get the image). I also use it to make quick interface elements that I can integrate into a web mockup.

  [1] http://browserify.org/
  [2] http://learnboost.github.io/stylus/
  [3] http://gulpjs.com/
  [4] https://github.com/substack/tape
  [5] https://ci.testling.com/
  [6] https://github.com/bpierre/jspage
  [7] https://cloudup.com/
  [8] http://scri.ch/