What is this list

If you write software, you spend a lot of time working with tools. Some of them are faithful companions that have been with you for years – in my case, Vim, Visual Studio, Unix tools via Cygwin. Others I have acquired over time as I get the chance to try them and find out that they are useful, such as Pandoc and Jekyll.

But there’s a huge array of tools and frameworks that I hear about – from Twitter or from reading blog posts – that sound useful but which I haven’t got time to try in depth. The purpose of this post is to gather a high-level description of some of these as a form of bookmarking for future reference.

In short, this is a list of ALL THE SHINY THINGS.

Build tools

These are general-purpose tools for building and deploying websites.

Grunt

Grunt is a JavaScript task runner that runs on NodeJS. It processes the tasks specified a Gruntfile. Here is an example Gruntfile from the website:

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

Gulp

Gulp is like Grunt, but it uses streams instead of temporary files: there’s a stream of source file coming in, and it processes these into a stream of production-ready files going out.

Again, it runs on NodeJS. The configuration file is runnable code.

Gradle

Gradle is TODO

Webpack

Webpack is a module bundler; it takes modules (.js, .jade, .coffee, .less, etc.) with inter-dependencies (synchronous and asynchronous) and generates static assets (e.g. .js files and images) that represent those modules.

Package management

Bower

Bower is a package manager for the web created at Twitter and released as open source.

Bower manages front-end components (e.g. CSS, HTML, JavaScript).

npm

The Node Package Manager (npm) manages JavaScript packages used by NodeJS, although its flexibility means it’s starting to be used for other resources too.

JavaScript libraries

Moment.js

Moment.js is focused on working with dates in JavaScript.

JavaScript frameworks

Angular.js

Backbone

TODO

Ember

TODO

Knockout

TODO

Meteor

Meteor is a JavaScript app platform which transparently pushes around data changes, updating client HTML when the server-side data changes.

(See also SignalR for ASP.NET, which is also about “real-time web” functionality.

Modernizr

Modernizr detects HTML5 and CSS3 features in the user’s browser and adds classes to the HTML element for the CSS to be keyed on.

RequireJS

RequireJS is a file and module loader primarily for in-browser use. You specify which files your code is actually using and the framework handles combining and optimising them.

Underscore.js

Underscore.js provides functions to extend JavaScript without extending the existing object types. Its GitHub page describes it as JavaScript’s _ utility belt, which looks about right.

It has LINQ-like functions for processing collections (including functional things like map and reduce) and all manner of other simple and useful tools for getting things done.

See also Lo-Dash, which is the same but different.

Yeoman

Yeoman claims to be the web’s scaffolding tool for modern webapps. It’s a generator ecosystem and workflow for kickstarting projects. It has generators for Angular, Backbone, Ember and lots of others.

It provides a framework for generating the scaffolding of a new project, and then makes it easy to subsequently build the project and manage its dependencies.

React

React is a JavaScript library for building user interfaces, created as a collaboration between Facebook and Instagram. It uses a virtual DOM for performance. It uses one-way reactive data flow instead of traditional data binding.

Showdown

Showdown is a markdown-to-HTML converter written in JavaScript.

Testing frameworks

NUnit

TODO

XUnit

TODO

QUnit

TODO

Mocha

Mocha is a JavaScript test framework running on Node.js.

It allows you to choose the assertion library you want to work with: should.js (the default used in their documentation), chai, expect.js or better-assert.

Databases

MongoDB

TODO

CSS pre-processors

Sass

Sass describes itself as CSS with superpowers.

This is the CSS pre-processor benchmark against which all others are judged.

It supports two syntaxes: Sassy CSS (SCSS), which is a CSS3 extension, and Sass, which is older. Tools are provided for translating between the two.

Less

Less is a CSS pre-processor that runs in Node.js.

An example from the website:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) } }

compiles to:

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

Stylus

Stylus is a concise, simplified CSS syntax and pre-processor.

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body a
  font: 12px/1.4 "Lucida Grande", Arial, sans-serif
  background: black
  color: #ccc

form input
  padding: 5px
  border: 1px solid border-radius: 5px

compiles to:

body a {
  font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
  background: #000;
  color: #ccc;
}
form input {
  padding: 5px;
  border: 1px solid;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

Autoprefixer

Autoprefixer converts clean CSS code written according to the latest CSS specifications, such as this:

a {
    display: flex;
}

to code with all the nobbly bits needed to support older browsers, like this:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
}

HTML pre-processor

Haml

Haml is a concise markup language for representing HTML templates with indentation instead of tags.

For example, using this:

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column = render :partial => "sidebar"

instead of this:

<div id='content'>
  <div class='left column'>
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div> </div>

Other tools

Chocolatey

TODO

Bower

TODO