Node Roundup: express-soap2json, cb, ApiServer

16 May 2012 | By Alex Young | Comments | Tags node modules
You can send in your Node projects for review through our contact form or @dailyjs.


SOAP might not be the most exciting technology to work with, but if you like Node and Express then express-soap2json (License: MIT, npm: express-soap2json) by Tony Sokhon can make it a little bit easier to work with.

By wrapping around a SOAP service, express-soap2json creates a JSON/HTTP proxy. It’s built using the soap module by Vinay Pulim. Tony has included some Mocha tests, and the README has some basic documentation.

An Alternative to Node’s console.time

In A Powerful Alternative to Node’s console.time(), Dmitri Melikyan discusses using his Nodetime profiler in place of console.time and console.timeEnd.

What if you want to know more about what happens in-between, say CPU time or other nested network of file operations in microsecods precision?


cb (License: MIT, npm: cb) by Jeremy Martin is yet another control flow library. Or is it?

Not exactly. There are literally hundreds of libraries available for easing some of the pains associated with the continuation passing style, and most of them do a pretty good job at this.

Rather than compete with these libraries, cb() focuses on a much narrower range of problems, and is intended to be complementary to your control flow library (or lack thereof) of choice.

It features timeout and error handling with a chainable API, so the following is possible:

var cb = require('cb')
  , fs = require('fs');

, 'utf8'
, cb(console.log)


ApiServer (GitHub: kilianc / node-apiserver, License: MIT, npm: apiserver) by Kilian Ciuffolo is a modular framework that’s a bit like Restify, but can also be used to make Express-style web applications. Kilian has written his own comparisons with Express and Restify, and it’s compatible with Express middleware even though it’s not built with Connect.

The routing module, apiserver-router, features a caching system, and applications are built using objects. These objects are known as modules, and each method is an API endpoint. It works with plain objects and prototype classes – classes are ideal if the module has a state (Kilian’s example passes in a database reference).

The author has also included a Mocha test suite, and the documentation is pretty solid too.

jQuery Roundup: Knob, OmniWindow, bPopup, Pageflipper, Tiler

15 May 2012 | By Alex Young | Comments | Tags jquery touchscreen modal games tiling
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery Knob

jQuery Knobs

jQuery Knob (GitHub: aterrien / jQuery-Knob, License: MIT/GPL) by Anthony Terrien is a nice and configurable dial widget.

It can be configured to exhibit a wide range of behaviours, from value range entry to an iPod clicker-style “infinite” wheel. The value that is displayed can be directly manipulated as well, and it works with scroll wheels and touchscreens.


OmniWindow (GitHub: 0x000000 / OmniWindow, License: MIT) by Alexander Rudenko is a fairly small modal window plugin, and the author has attempted to target it at programmers rather than designers.

The documentation is good and covers the main use-cases, and despite stating that the plugin doesn’t support tonnes of options, it includes enough to keep it flexible.

It’s based around events, so it can be used like this:


And it allows class names to be overridden, in case you want to integrate it with an existing project:

  overlay: {
    selector: '.custom-overlay', // don't forget the period symbol! 
    hideClass: 'custom-overlay-closed'
  modal: {
    hideClass: 'custom-modal-closed'


bPopup by Bjørn Klinggaard is another modal plugin that is simply triggered by calling $('element_to_pop_up').bPopup(). By default it’ll reposition the popup when the browser’s size is changed.

For full details on the available downloads and source code, see 21.04.12: New release, bPopup version 0.7.0.


Pageflipper (GitHub: wtw-software / pageflipper, License: MIT) from wtw-software uses CSS3 transitions to creative a native-feeling page sliding effect. It looks like something that would appeal to mobile web developers, but will also work with a mouse.

It can also be controlled programmatically:



Tiler (GitHub: borbit / tiler, License: MIT) by Serge Borbit is a library for working with infinite grids of tiles. This could be used to display map content, but the author has designed it with games in mind.

It feels more like a standard JavaScript library than a jQuery plugin (although jQuery is a dependency), so using it requires creating an instance of a Tiler object:

var tiler = new Tiler($('#viewport'), {
  tileSize: 200,

  sync: function(options, callback) {
    var tosync = options.tosync;

    tosync.forEach(function(tile) {
      var img = new Image();
      var x = tile[0];
      var y = tile[1];

      img.onload = function() {
        callback([[x, y, $('<img/>').attr('src', img.src)]]);

      img.src = 'image_' + x + '_' + y + '.png';

QUnit tests are included.

WebGL Audio, CSS 3D Earth, .Net Classes

14 May 2012 | By Alex Young | Comments | Tags .net libraries webgl graphics audio

WebGL Audio

WebGL Audio with tquery

WebGL experimenter Jerome Etienne has written a short tutorial entitled Sound Visualisation: A Vuemeter in WebGL that demonstrates an impressive, yet simple, WebGL VU meter using the Web Audio API.

To make this work, he’s used his webaudio.js library:

var webaudio = new WebAudio()
  , sound = webaudio.createSound();

sound.load('sound.wav', function(sound) {;

This library can be used alongside tquery.

CSS 3D Earth

CSS 3D Earth

CSS 3D Earth by Edan Kwan uses a JavaScript library called PerspectiveTransform to display an interactive model of the Earth using shading and layers.

The original class is by Israel Pastrana, and the experiment is presented with a nice little dat.GUI interface.

.Net JavaScript Classes

Julius Friedman sent in a project he created called Easy JavaScript Generic List Implementation. Since then he’s expanded the scope and uploaded it to CodePlex: .Net JavaScript Implementations.

The list implementation has an API that looks a lot like LINQ:

function Car(make, model) {
  this.make = make;
  this.model = model;

var myList = new List();
myList.Add(new Car('Honda', 'Civic'));
myList.Add(new Car('Nissan', 'Sentra'));

var selList = myList.Where('make == 'Honda'').OrderByDescending('model').Distinct();

He’s also working on a Reflection class as well as a pseudo type system.

Fluent, Backbone.xmpp, leFunc, Frisby

11 May 2012 | By Alex Young | Comments | Tags conferences events xmpp backbone.js

Fluent Conference


Fluent will be held on May 29-31, in San Francisco. It features several tracks – one covers language issues and includes a session with Brendan Eich. The browser track has talks from employees of social networking favourites Twitter, Facebook, and Twitter, and even Microsoft! There’s also a track for Node sessions, which has speakers from Joyent, Twitter, Groupon, and lots more interesting companies.

“Early price” tickets are on sale until May 15th, and there are several tiers available:

  • All-Access Pass: $1695 (standard price: $1895)
  • Conference Plus Tuesday Workshops: $1295 (standard price: $1495)
  • Conference: $995 (standard price: $1195)
  • Tuesday Workshops: $695 (standard price: $895)

There are discounts for previous O’Reilly conference attendees, company teams, academic staff, non-profits, and students.


Backbone XMPP Pub-Sub Storage (License: MIT) by Yiorgis Gozadinos is an alternative storage layer for Backbone.js that uses XMPP publish-subscribe.

To use it, set a collection’s sync property to Backbone.xmppSync, and assign an instance of PubSubStorage to the collection’s node property:

var MyCollection = Backbone.Collection.extend({
    sync: Backbone.xmppSync
  , model: MyModel

var mycollection = new MyCollection();
mycollection.node = new PubSubStorage('mymodels', connection);

The README has links to full documentation in the form of annotated source.


leFunc (License: MIT, npm: leFunc) by John Fawcett is a library that uses type checking to support function overloading in pure JavaScript:

var getItems = leFunc({
  'string'; function(id) {
    // Do something

  'string,object': function(id, options) {
    // Do something else

  'string,object,function': function(id, options, callback) {
    // Do something different

getItems('123abc'); // Calls the first function
getItems('123abc', { awesome: true }); // Calls the second function
getItems('123abc', { awesome: true }, function(){}); // Calls the third function

At the moment it’ll work with any function signatures that are relatively easy to type check. That means primitive values and objects will work as expected.


If you’re testing a lot of REST-based APIs, then Frisby (GitHub: vlucas / frisby, License: BSD, npm: frisby) by Vance Lucas might be what you’re looking for. It’s a REST API testing framework built using Jasmine.

It has a nice and friendly chainable API:

var frisby = require('frisby');

frisby.create('Get Brightbit Twitter feed')
  .expectHeaderContains('content-type', 'application/json')
  .expectJSON('0', {
    place: function(val) { expect(val).toMatchOrBeNull("Oklahoma City, OK"); }, // Custom matcher callback
    user: {
      verified: false,
      location: "Oklahoma City, OK",
      url: ""

The project itself is also fully tested, and comes with API documentation.

Windows and Node: Windows Performance Monitor

10 May 2012 | By Alex Young | Comments | Tags node tutorials windows windows-and-node

It’s time to take a look at a Windows-oriented Node module to see how it works. Before getting messy with C, C++, and all that native module stuff, let’s keep it simple by looking at something that communicates with Windows programs using Node’s streams.

Windows Performance Monitor

Windows Performance Monitor provides extremely detailed logging, featuring a wide array of counters, event trace data, and configuration information. The command-line tool, typeperf.exe can write some of this data to a command window.

For example, typeperf "\Memory\Available bytes" "\processor(_total)\% processor time" will display processor and memory counters. The output looks like this on my computer:


Why do I mention this? Well, the Node perfmon module is a wrapper around typeperf that provides a ReadableStream-based API. This is an idiomatic module that demonstrates one way of working with an existing program that comes bundled with Windows.

The perfmon Module

To try it out, open a command window and make a directory:

cd Documents\Code\
mkdir perf-example
cd perf-example

Then install perfmon:

npm install perfmon

Once that’s done, create a JavaScript file that uses the perfmon module to gather some data:

var perfmon = require('perfmon');

perfmon('\\processor(_total)\\% processor time', function(err, data) {

Running it should display some logging. Press ctrl-c to stop it.

Child Processes

The author has written this by using spawn from the child_process module. In fact, we can execute any executable using this module. Try the following script:

var exec = require('child_process').exec;

exec('echo %PATH%', function(err, stdout, stderr) {
  console.log('PATH:', stdout);

The output should look similar to the following screenshot, but it may vary depending on what you’ve got installed:


The child_process API is exactly the same in Unix, as we saw in the Unix and Node posts.


Does this mean Node programs are generally portable between Unix and Windows? Well, as you can see in this example, Node’s standard libraries look the same. It’s just the part that touches the operating system that may look different. In this example, the part that reads echo %PATH% would be different in Unix.

We’ll look at other portability issues as this series progresses. For now, your homework is to find more Windows-oriented Node modules and see if you can understand the basic principles at work. The Node documentation will be indispensable for this!

Node Roundup: Video Gallery, Restie, xml-literals, Revised Console

09 May 2012 | By Alex Young | Comments | Tags node modules
You can send in your Node projects for review through our contact form or @dailyjs.

Video Gallery screenshot

Video Gallery (GitHub: meloncholy / node-video-gallery, License: MIT) by Andrew Weeks is a Metro-inspired video gallery written with Express, Jade, and MySQL.

It’s got JSON configuration files, separated routes, and lots of fancy front-end effects. There’s a blog post about it here: Node.js Video Gallery.


Restie (License: MIT, npm: restie) by Vadim Demedes is an ORM that behaves the same in Node and browsers. Models can be declared then manipulated with the familiar CRUD methods, in a similar fashion to Backbone.js.

var Post = Restie.define('Post');

Post.all(function(err, posts) {
  // GET /posts/

Post.find_by_id(1, function(err, post) {
  // DELETE /posts/1
  post.remove(function(err) {
    // Post removed

The author has included tests that run in both browsers and Node.


xml-literals (npm: xml-literals) by Marcel Laverdet adds Node support for E4X-style XML literals:

var anchor = <a href={href}>Hello</a>;

To mix XML and JavaScript this way, the xml-literals module has to register a file extension first, then files that contain XML literals can be loaded. The following example would make subsequent require calls able to load files that include XML literals:


// This file contains XML literals

Revised Console

Revised Console (License: MIT, npm: rconsole) by Thomas Blobaum provides C bindings for syslog and makes the console methods log to syslog. This would log to /var/log/messages (depending on the OS):

console.log('hello world')

The author has included an example of using Express’ express.logger to log to syslog, which strikes me as potentially useful for production web apps.

jQuery Roundup: Jewel, Custom Drag and Drop, TouchTouch, BetterExamples.js

08 May 2012 | By Alex Young | Comments | Tags jquery jqueryui touchscreen templating
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.


Jewel (License: MIT) by Vadim Demedes is an ActiveRecord-inspired DOM query API:

var Post = Jewel.define('#posts', {
  keys: {
    title: 'h1'
  , body: 'p'

  template: function(fields) {
    return '<div class="post"><h1>' + fields.title + '</h1><p>' + fields.body + '</p></div>';

// Get all of the posts
var posts = Post.all;

// Create a new post
var post = new Post();
post.title = 'Latest post';
post.body = 'Latest content';; // Will be prepended to #posts

It actually combines templating and querying, which seems to work quite well. The author has included some Mocha unit tests, and he’s tested it in everything except IE.

Custom Drag and Drop with Mouse

Roll your own drag-and-drop handling, with help from jQuery UI by Jo Liss is a tutorial that explains how to build customised drag-and-drop interfaces using the jQuery UI Mouse widget.

It’s interesting because I’ve struggled to get Draggable to do what I wanted in more complex or unique situations, and building on Mouse seems to offer the flexibility some projects demand.



TouchTouch (GitHub: martinaglv / touchTouch, License: MIT, Demo by Martin Angelov is an image gallery that’s also touchscreen-friendly. It features a responsive interface with CSS3 animations and gestures like swiping.

All it needs is a list of images with links: $('#thumbs a').touchTouch();


BetterExamples.js (GitHub: willemmulder / BetterExamples.js, License: CC BY-SA 3.0) by Willem Mulder is an attempt to make JavaScript code examples more interactive.

It’ll display both logging and errors, next to the code that generated them. This is something that I’d like to succeed because even with great tools like jsFiddle I feel like it’s still difficult to create easy to follow interactive code examples.

JS101: Primitive Values and Objects

07 May 2012 | By Alex Young | Comments | Tags js101 tutorials language beginner

Back to Basics

When people talk to me about DailyJS they often ask for more beginner’s articles. Therefore, we’re starting the JS101 series on DailyJS. These are intended to be short guides on fundamental topics that shouldn’t take more than about 10 minutes to read.

I really believe learning JavaScript comes down to understanding Object, so what better place to start?

Types of Values

In JavaScript, the humble Object underlies many of the language’s strengths. To understand JavaScript objects, let’s consider what types of values we have at our disposal. Take a look at the following example:

var one = 1
  , oneObject = new Number(1);

log(one === oneObject);
log(typeof(one), typeof(oneObject));

I’ve made an interactive version of this example that you can experiment with here:

This uses the strict equals operator to compare the value 1 with the object new Number(1), and false is returned. The reason for this is 1 is a primitive value, and is not an object. The number created with new Number is an object, as shown by the value returned by typeof.

There are other primitive values: Undefined, Null, Boolean, Number, and String. Another interesting point relates to Undefined and how it’s a type whose sole value is undefined.

Creating Objects

When working in JavaScript, we mostly concern ourselves with objects. There’s a reason why JSON is so popular and powerful, and it comes down to the flexibility of objects. The main difference between objects and primitive values is objects are clearly comprised of multiple items:

var javascript = {
  influences: ['C', 'Java', 'Scheme']
, designer: 'Brendan Eich'
, created: new Date(1995, 0, 1)

The ‘items’ in this object – influences, designer, and created – are known as properties. While it’s difficult to imagine breaking down 10 or true into their constituent parts, this object can easily be broken down. Notice how each value can be a different type – both primitive values and objects can be combined together in an object.

Now consider this:

var javascript = new Object({
  influences: ['C', 'Java', 'Scheme']
, designer: 'Brendan Eich'
, created: new Date(1995, 0, 1)

I’ve used new Object to create a new instance. According to the language specification, under Object Initialiser, these forms are equivalent – creating objects with an object literal will return a new object as if new Object() was used. Similarly, the array literal ['C', 'Java', 'Scheme'] will create a new object as if new Array() had been called.

The important thing to notice is the use of a constructor. In this case the constructor is new Object, but there are other built-in constructors. I also sneaked in new Date which creates a Date object.


The previous example looks more like a data record than a reusable piece of code. We can make it more reusable by creating a constructor – a function that knows how to initialise a certain flavour of object.

function Language(designer, created, influences) {
  this.designer = designer;
  this.created = created;
  this.influences = influences;

var javascript = new Language(
  'Brendan Eich'
, new Date(1995, 0, 1)
, ['C', 'Java', 'Scheme']

Now I can make other programming languages:

var c = new Language(
  'Dennis Ritchie'
, new Date(1972, 0, 1)
, ['B', 'ALGOL']

The constructor can be accessed using the constructor property, like this: c.constructor. In this case it’ll return Language. Play around with it here:

In the ES5 specification under Properties of the Object Prototype Object, other properties of objects are mentioned. For example, we also get toString, and some stranger sounding methods like hasOwnProperty.


I’m going to continue this series of back to basics JavaScript each Monday. Think of it as learning JavaScript in bite-sized chunks. Next week I’ll talk about prototypes.

WebGL GTA, 3D Pong, webgl-texture-utils

04 May 2012 | By Alex Young | Comments | Tags webgl graphics libraries games



WebGL GTA (GitHub: niklasvh / WebGL-GTA, Demo) by Niklas von Hertzen is a WebGL interpretation of the original Grand Theft Auto. It parses the game files and builds maps and game objects, all rendered with glorious WebGL.

There are a few glitches, but it’s amazing how much the author has done while keeping the code relatively easy to follow.

3D Pong

In Augmented Reality 3D Pong by Jerome Etienne, a version of Pong is presented that works using a gesture-based interface. There’s a detailed screencast that explains the code here: Augmented Reality 3D Pong Live Coding Screencast. The actual code is here: jeromeetienne / augmentedgesture.js – take a look at the index.html file to see the non-library part of the project.


webgl-texture-utils by Brandon Jones (the author of TojiCode) is a set of WebGL texture libraries that can help with loading compressed formats. The file format is inferred by the file extension, but can also be overridden.

It also includes support for the crunch format:

And yes, it does support DDS. The full list of supported formats is currently JPG, PNG, GIF, BMP, DDS, CRN (Crunch), and some TGAs. I don’t actually advocate using TGAs in your WebGL apps, but I had the code available so why not?

Windows and Node: Getting Started

03 May 2012 | By Alex Young | Comments | Tags node tutorials windows windows-and-node

I enjoyed writing the Unix and Node tutorials over the past few months, and I hope they got people thinking about creating Node programs that behave like first-class Unix citizens.

Since last June, when Microsoft partnered with Joyent to port Node to Windows, Node has gone from strength to strength on Microsoft’s ubiquitous OS. I thought it was only fair to give Windows the same treatment.

In Windows and Node, we’ll take a look at Windows-centric Node development. In the first part, we’ll install Node (which now includes npm), take a look at the basics, then make a little Express web application to prove it’s generally portable with existing Node modules.


My Windows desktop

I’m running a pretty standard installation of Windows 7 Home Professional. I’ve got a few things I like installed (Steam, Putty, Chrome, Vim, Dropbox), but nothing specifically related to development. That means there’s no compilers, Cygwin, or Visual Studio.

Downloading Nodes Windows installer

To download Node, go to, click “Download”, and click “Windows Installer”. This will give you a Windows Installer (MSI) file that will install Node and npm.

Running the Node Windows installer

Running the Windows installer will show a wizard, it’s pretty easy to follow. It’s just like installing any other Windows program – the Node binaries will end up in C:\Program Files (x86)\nodejs\, and will be accessible from cmd.exe.

Running Node

Running Node and npm

To run Node, open a Command Prompt and type node. This will load the standard Node REPL where JavaScript can be evaluated. Here I’ve opened my win.ini using Node’s fs module:

Evaluating JavaScript

If you want to exit the REPL, I noticed that ctrl-d works (just like Unix!)

Similarly, npm can be run. The first time I used it to search for something, it took a few minutes to download the index first:

Using npm

Getting Help

When I’m working in Unix, I often find myself reading npm’s man pages. Windows doesn’t have man, so instead npm will open a browser and display HTML versions of its standard help files.

Getting help

The first time I tried this an error was displayed. However, there’s a bug report where fixes for the problem are discussed, and Isaac Schlueter stated that the problem will be fixed in Node 0.6.17.

Hello World from Express

Now that we’ve got Node and npm working it shouldn’t take too much work to get a little project started. Make a new directory somewhere and open your favourite editor. I’m using Vim, but you can use one of the many freely available editors for Windows.

Create a file called package.json:

  "name": "hello"
, "version": "0.0.1"
, "dependencies": {
    "express": "latest"

Then change directory to the location of your project in Command Prompt, and run npm install to install Express:

cd Documents\Code\hello
npm install

Installing packages with npm

Make a file that contains a simple Express app, I called mine index.js:

var express = require('express')
  , app = express.createServer();

app.get('/', function(req, res) {
  res.send('hello world');


Then run it with node index.js and visit http://localhost:3000/ in a browser.

I got a firewall warning when I did this, but it was fairly self-explanatory:

Windows Security Alert


On a standard consumer-grade version of Windows 7, Node can be installed and programs can be written without installing anything else. Building modules that require C/C++ compilation is a little bit more work, but community-favourite Express can be installed without any hassle.

In the coming weeks I hope to look at more detailed Windows-related issues, and working with Node and Microsoft technologies like Windows Azure. I bought a Windows 7 license specifically to write this series, so I’m going to get my money’s worth!

Node Roundup: 0.6.16, Node WebKit Agent, URLify, crud-bones, frontail

02 May 2012 | By Alex Young | Comments | Tags node modules unix url webkit
You can send in your Node projects for review through our contact form or @dailyjs.

Node 0.6.16

The latest stable release of Node is out: 0.6.16. V8 has been upgraded to, and there are improvements for each platform.

Dave Pacheco also posted about profiling Node with DTrace, but be forewarned that this is probably only useful if you’re able to run code on OpenSolaris-derived illumos systems. I actually use DTrace in Mac OS for debugging things that aren’t related to Node, but Dave notes that this won’t work due to the lack of ustack helpers, and invites readers to contact Apple about this:

OS X supports DTrace, but not ustack helpers. The way to get this changed is to contact your Apple developer liason (if you’re lucky enough to have one) or file a bug report at I’d suggest referencing existing bugs 5273057 and 11206497. More bugs filed (even if closed as dups) show more interest and make it more likely Apple will choose to fix this.

Node WebKit Agent

Node WebKit Agent (npm: webkit-devtools-agent) by Camilo Aguilar is an implementation of the Chrome developer tools protocol. This allows WebKit browsers to debug Node applications, which includes profiling, a console, and network monitoring.

A related project that I’ve used a few times is Node Inspector.


URLify (License: MIT, npm: urlify) by Enno Boland helps convert UTF-8 strings to ASCII that’s safe to use as a readable URL segment. For example:

var urlify = require('urlify').create({
  spaces: '_'
, nonPrintable: '_'
, trim: true

urlify('竹取物語 Taketori Monogatari');
// Taketori_Monogatari


crud-bones (GitHub: alexeypro / crud-bones) by Alexey Prohorenko is a boilerplate for Express-based apps that use MySQL, Mongo, or Redis. He’s also dotCloud and Heroku deployment instructions.



frontail (License: MIT, npm: frontail) by Maciej Winnicki is a WebSocket-based tail-inspired utility for watching logs. Imagine a version of tail that runs a little web server instead of writing to standard IO. It has some command-line options as well – for example, -n <number> will control how many lines are printed when it starts up.

jQuery Roundup: jQuery UI 1.8.20, jq-quickvalidate, Fullscreen Plugin

01 May 2012 | By Alex Young | Comments | Tags jquery jqueryui plugins validation fullscreen
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery UI 1.8.20

jQuery UI 1.8.20 has been released. This release marks the twentieth maintenance release, and includes bug fixes for Draggable, Sortable, and Datepicker.


jq-quickvalidate (License: GPLv2, Demo) by Cedric Ruiz is a form validation plugin. The author has provided CSS and icons, so it’s easy to drop into a site.

There are built-in validators, but custom ones can be added using a regular expression or function. Basic usage looks like this:

  inputs: {
    username: {
      filters: 'required username exclude',
      data: {
        exclude: ['Paul', 'Mike']
    'pass': {
      filters: 'required pass'

Fullscreen Plugin

jQuery Fullscreen Plugin (License: MIT) by Klaus Reimer is a jQuery-friendly API for working with the fullscreen mode present in supporting browsers. Vendor-specific versions are supported for WebKit and Firefox.

It can make an element or the entire document fullscreen:


It can also exit fullscreen, or check if fullscreen is currently active. A related plugin is jquery.fullscreen.js, which provides handling for various fullscreen-related events.

quotefm-node, Pin, Boots

30 Apr 2012 | By Alex Young | Comments | Tags node modules


quotefm-node (License: MIT, npm: quotefm) by Enno Boland is a module for working with the API. It can be used to get recommendations, articles, and user information back from the service.

The module includes some good documentation, and the API documentation is also easy to follow as well.


Pin (License: MIT, npm: pin) by Veselin Todorov is a small module for uptime monitoring:

  .interval(10000) // in ms
  .up(function(response) {
  .down(function(error, response) {
    console.log(error, response);

The chainable API also allows HTTP headers to be set.


Boots (GitHub: jgallen23 / boots, npm: boots) by Greg Allen is a command-line utility for building custom Bootstrap asset files.

If .less files are passed to it then a CSS file will be generated:

boots --js bootstrap-modal.js,bootstrap-tooltip.js --css modals.less,tooltip.less -o public/bootstrap

PinClusterer, Backbone.Routes, Rice, Fiddle.js

27 Apr 2012 | By Alex Young | Comments | Tags node geo maps backbone.js databases



PinClusterer (GitHub: rtsinani / PinClusterer) by Arti Sinani is a library for clustering pins on Bing maps. Pins are grouped together based on a grid size setting:

var pinClusterer = new PinClusterer(map, {
  gridSize: 40

pinCluster.setOptions({ gridSize: 30 });

The pin settings are all configured the same way as a standard Microsoft.Maps.Pushpin. The author has included a stylesheet that will create circular icons with a shadow and gradient.


Backbone.Routes (License: MIT) by Teng Siong Ong is an alternative API for routing in Backbone.js. It helps centralise routes, and can trigger multiple routes for a given URL.

It seems more like the way Rails routing works, and the author indicates he’s been influenced by Rails in the project’s source code. Here’s an example:

Backbone.Routes.prefix = YourApp.Routers
    'NavbarRouter': 'index'
    'HomeRouter': 'index'


Rice (License: MIT) by Yuri Neves is a database library that uses the Web SQL Database API. Although Firefox supports Indexed DB instead, this API can be used with PhoneGap.

Usage looks like this:

  .select({ from: 'People', where: { age: 21 } }, function(result) {
    result.each(function(row) {

The source is available here:


Fiddle.js (License: MIT, npm: fiddle) by Craig Condon is a MongoDB-inspired object manipulation library. Operators like $inc, $set, $unset, and more are supported.

The fiddle method itself accepts a modifier object, and then filters and targets. The targets represent the data to modify:

// Increment age by one
var fiddled = fiddle({ $inc: { age:1 } }, null, { name: 'Craig', age: 21 });

The results returned by fiddle can be filtered and otherwise iterated over.

Unix and Node: IPC

26 Apr 2012 | By Alex Young | Comments | Tags node tutorials unix ipc

This tutorial explores the world of inter-process communication (IPC) in Unix, and solutions for Node developers. IPC actually covers a broad swathe of methods, including POSIX signals and pipes, which we’ve already covered in this series. Here I’m only going to cover IPC methods that are based on sockets or Unix domain sockets.


IPC enables structured data to be shared between processes. In terms of architecture, scaling software by creating smaller programs that communicate with each other using simple data formats fits in with the Unix philosophies mentioned previously in this series. Additionally, it may be desirable to use established Unix-based IPC systems from within Node.

Beyond modularity and performance, IPC can also be used to restrict privileged access to certain resources. For example, a Node web application could run on a registered port (above 1023) which is generally accessible by ordinary user accounts. Then another program with additional privileges to access port 80 could proxy requests to it, thereby limiting access and potentially improving security.

It’s likely that contemporary developers that don’t come from a Unix background will already use IPC and RPC. Message queues in particular are very popular now – ZeroMQ can be configured to communicate locally using its IPC transport that’s based on Unix domain sockets


D-Bus supports many POSIX operating systems. It’s most closely associated with KDE, but can be installed on Mac OS, and there’s even a Windows port. It can use Unix or IP sockets.

D-Bus generally runs as a system-level daemon, and also as a session daemon:

A GNOME environment normally runs two kinds of buses: a single system bus for miscellaneous system-wide communication, e.g. notifications when a new piece of hardware is hooked up; and a session bus used by a single user’s ongoing GNOME session.

The two most popular Node implementations are node-dbus (License: MIT, npm: dbus) by Shouqun Liu, and node-dbus (License: BSD, npm: node-dbus) from Motorola Mobility. They’re both built using C++ extensions that wrap around the libdbus APIs.

It’s unlikely that D-Bus is (or will be) a popular solution for IPC with Node developers, but it does allow us to integrate more tightly with desktop environments. For example, if I use a GNOME music player that exposes services through D-Bus, I could write Node scripts that monitor what I’m listening to and post the data to Linux Journal has a general article on this topic that serves as a basic introduction: Control Your Linux Desktop with D-Bus.

Homegrown IPC and RPC

There are dozens of modules that provide IPC and RPC solutions that are aimed at Node developers without integrating with existing high-level Unix daemons.

DNode by James Halliday is one such example that works with Unix domain sockets, TCP streams, or WebSocket. It’s an RPC implementation that uses a newline-terminated JSON protocol which is documented in the dnode-protocol module.

There’s also thintalk (License: MIT, npm: thintalk) by Andreas Madsen that implements a lightweight RPC layer. It’s aimed at pure Node environments, unlike DNode which can be called from different programming languages and browsers.

Easy IPC (License: MIT, npm: easy-ipc) by Oliver Leics is an event-based IPC implementation. It supports newline-terminated JSON streams, but can work with plain text as well.

Message Queuing

The ØMQ messaging library is lightweight, high-performance, and asynchronous. The zmq (License: MIT, npm: zmq) module by Justin Tulloss is a popular solution, with an idiomatic Node API.

ØMQ runs on Linux, Windows, and Mac OS, and specifically targets fast performance. In contemporary discussions on IPC, it’s often cited as a suitable alternative to legacy message brokers.


IPC is an incredibly broad term that covers using files for communication, signals, sockets, message queues, pipes, shared memory, and pretty much everything else. I’m still searching for a quantum-entanglement IPC solution for Unix.

It’s therefore difficult to keep this discussion focused on Unix, particularly as modern systems like ØMQ will run just about anywhere. However, I hope that by mentioning D-Bus, Node hackers who run desktop systems like KDE or GNOME might be inspired to rewire their desktops in all kinds of creative ways.

Node Roundup: node-webcl, node-webgl, node-glfw

25 Apr 2012 | By Mikael Bourges-Sevenier | Comments | Tags node modules webgl webcl
You can send in your Node projects for review through our contact form or @dailyjs.

Mikael Bourges-Sevenier has sent in three WebGL and WebCL modules that he’s written for Node. We’ll resume our regularly scheduled Node Roundup posts next week!


node-webcl (GitHub: Motorola-Mobility / node-webcl, License: BSD, npm: node-webcl) from Motorola Mobility is an implementation of the Khronos WebCL working draft using Node. It has been tested on Mac OS X 10.7 and Linux. It should also work on Windows 7. Its only dependency is node-webgl, another Node module that implements the WebGL standard.

The module contains various tests and sample applications to help developers leverage multiple CPU and GPU cores. It is also used as a tool to develop experimental features that may or may not be in the WebCL standard.

Installing node-webcl with npm will fetch node-webgl and node-glfw. Since they rely on native libraries, make sure they’re available:

There are more details in the project’s readme. Intel’s OpenCL SDK can also be installed as a pure WebCL implementation, and be sure to check you’ve got the latest drivers installed for your graphics card.


node-webgl (GitHub: mikeseven / node-webgl, License: BSD, npm: node-webgl) is an implementation of the Khronos WebGL specification. This is a fork of Tim Caswell’s WebGL project that started life as Blue GPU Lava at Node Knockout.

This module allows WebGL applications originally created for browsers to run using Node on the desktop without modification. It provides support for DOM methods commonly used to create WebGL content.

Like node-webcl, this module has been tested with Mac OS X and Linux. It relies on GLEW, GLFW, and AntTweakBar. Lots of samples have been included – some show how to use AntTweakBar to create a compelling GUI.


Finally, node-glfw (GitHub: mikeseven / node-glfw, License: BSD, npm: node-glfw) is a JavaScript wrapper around GLFW. This provides implementations, where possible, of WebGL methods on top of desktop OpenGL as well as a browser compliant event model.

Although this module will run on Node 0.6, at least 0.7.5 is recommended for the typed array support. This module is intended as a platform-level binding – node-webgl should be used to create OpenGL applications.

jQuery Roundup: SelectBoxIt, jQuery Hooks, jQuery contextMenu

24 Apr 2012 | By Alex Young | Comments | Tags jquery jqueryui plugins menus
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.


SelectBoxIt screenshot

SelectBoxIt (GitHub: gfranko / jQuery.selectBoxIt.js, License: MIT) by Greg Franko is a select box replacement that uses progressive enhancement and has some notable features:

  • Works with jQueryUI ThemeRoller
  • Supports jQuery and jQueryUI’s animations
  • ARIA support

It also includes Jasmine tests: SelectBoxIt tests.

The author has written a detailed post documenting SelectBoxIt, and the GitHub repository contains suitable CSS and images if you want to duplicate the style used in Greg’s examples.

jQuery Hooks

In jQuery Hooks, Rodney Rehm discusses jQuery’s hooks feature. The jQuery.cssHooks documentation covers adding hooks to CSS getters and setters, but there are other hooks in jQuery’s code, for .val(), .attr(), and .prop().

jQuery contextMenu

jQuery contextMenu (GitHub: medialize / jQuery-contextMenu, License: MIT and GPL3) from Medialize GbR (and also by Rodney Rehm) helps create menus that appear when an element is right-clicked.

The authors have written lots of examples showing the flexibility of the plugin, including using input elements, dynamically adding new triggers, and access keys.

Krasota.js, Drink, Limit.js

23 Apr 2012 | By Alex Young | Comments | Tags libraries cli node


Krasota.js (GitHub: veged / krasota.js, npm: krasota) by Sergey Berezhnoy is a modular source beautifier that uses grammars written with a fork of OMeta. It can force semicolons, join or split var statements, or even remove trailing whitespace.

It can be used as a Node module, or as a command-line utility:

$ krasota -i tests/join-vars.js -b krasota/lib/beautifiers/trailing-whitespaces -b krasota/lib/beautifiers/join-vars

Custom beautifiers can also be called from the command-line by using the -b switch with a file name.


Drink (GitHub: Nijikokun / drink, License: AOL/MIT, npm: drink) by Nijiko Yonskai is a wrapper around process that helps write periodic console utilities. The API is themed around “coffee” – not CoffeeScript, but the brewed bean beverage, which is confusing because the author’s examples are written in CoffeeScript.

A session is started and potentially kept alive by passing drink a process object. Calling sip will pass data to stir without line breaks. Listeners for single character input can be added by calling onTap. The author suggests this could be used to keep any kind of session from dying, so it could be used with something like an IRC client.


Limit.js (GitHub: m-gagne / limit.js, License: MIT) by Marc Gagne is a reusable event debouncer. I’ve written similar code myself to sensibly handle certain client-side UI elements, and events like window resizing.

Marc’s implementation works by extending Function.prototype. There’s an example on jsFiddle that illustrates the usage: Limit.js demo.

$(document).bind('mousemove', function(e) {
}.debounce(150)); // debounce with a 150 millisecond limit

$(document).bind('mousemove', function(e) {
}.throttle(150)); // throttle with a 150 millisecond limit

Reznik, JSQA, Riloadr

20 Apr 2012 | By Alex Young | Comments | Tags node amd images responsive


Reznik (License: MIT, npm: reznik) by Alex Lawrence is a code analysis tool for AMD projects. Given a set of AMD modules, Reznik’s server-side component can resolve individual module dependencies on demand. It builds a module list, and then checks the code for circular or missing dependencies.

The author notes that Reznik was developed in Node, but also works in PhantomJS. There’s a command-line tool that can run under either of these environments and output module lists using various formats, including HTML and JSON.


JSQA from PaquitoSoft uses JSHint to statically analyse your code using an Express/Bootstrap-powered web application. It uses Socket.IO and or fs.watchFile so changes to source files are updated dynamically.

The lib/config.js file must be edited to include a path to a suitable JavaScript project.


Riloadr (License: MIT) by Túbal Martín is a cross-browser, framework-independent responsive image loader. The library supports quite a few options, but basic usage involves specifying “breakpoints” for loading the right images based on the viewport’s size:

var group1 = new Riloadr({
  breakpoints: [
    { name: '320px', maxWidth: 320 }, // iPhone 3
    { name: '640px', maxWidth: 320, minDevicePixelRatio: 2 }, // iPhone 4 Retina display
    { name: '640px', minWidth: 321, maxWidth: 640 },
    { name: '1024px', minWidth: 641 }

As this example demonstrates, Riloadr is a useful library for supporting high-density displays.

When Riloadr parses your breakpoints it mimics CSS behavior: Riloadr computes the browser’s viewport width in CSS pixels, then traverses your breakpoints to find out the appropiate image size to load and makes use of your breakpoint names to get the correct src (image URL) to load the image.

JavaScript and Semicolons

19 Apr 2012 | By Rod Vagg | Comments | Tags language ECMAScript ASI


In syntax terms, JavaScript is in the broad C-family of languages. The C-family is diverse and includes languages such as C (obviously), C++, Objective-C, Perl, Java, C# and the newer Go from Google and Rust from Mozilla. Common themes in these languages include:

  • The use of curly braces to surround blocks.
  • The general insignificance of white space (spaces, tabs, new lines) except in very limited cases. Indentation is optional and is therefore a matter of style and preference, plus programs can be written on as few or as many lines as you want.
  • The use of semicolons to end statements, expressions and other constructs. Semicolons become the delimiter that the new line character is in white-space-significant languages.

JavaScript’s rules for curly braces, white space and semicolons are consistent with the C-family and its formal specification, known as the ECMAScript Language Specification makes this clear:

Certain ECMAScript statements (empty statement, variable statement, expression statement, do-while statement, continue statement, break statement, return statement, and throw statement) must be terminated with semicolons.

But it doesn’t end there–JavaScript introduces what’s known as Automatic Semicolon Insertion (ASI). The specification continues:

Such semicolons may always appear explicitly in the source text. For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.

The general C-family rules for semicolons can be found in most teaching material for JavaScript and has been advocated by most of the prominent JavaScript personalities since 1995. In a recent post, JavaScript’s inventor, Brendan Eich, described ASI as “a syntactic error correction procedure”, (as in “parsing error”, rather than “user error”).

Recent Developments

There has been a growing trend in the last few years toward the omission semicolons, in some cases totally avoiding them. Perhaps largely inspired by the likes of CoffeeScript and Ruby where semicolons are used only if you want to chain multiple statements on a single line. This view of semicolons could perhaps be summarised as: the semicolon character is optional in most situations and therefore introduces unnecessary syntactic noise–unnecessary syntax can (and maybe should) be avoided.

Unfortunately the division between the semicolon and semicolon-free crowd has become very pronounced and is leading to some angry exchanges. A recent lightning rod for semicolon-related controversy is the most watched project on GitHub, Twitter’s Bootstrap and the author of its JavaScript code, Jacob Thornton who is a convert to the semicolon-free camp.

A short exchange this weekend on GitHub between Thornton and a cranky Douglas Crockford (author of perhaps the most-read JavaScript book, JavaScript: The Good Parts) erupted, on GitHub, Twitter and across the Internet.

The initial issue was a request for the addition of a semicolon in order to assist Crockford’s JavaScript minifier tool, JSMin, to properly compress the code. Like Crockford’s other popular JavaScript tool, JSLint, JSMin follows his rigid view of what the best parts of JavaScript are and reject the other, bad, parts, including treating semicolons as optional.

Crockford, after reviewing the code in question stated:

That is insanely stupid code. I am not going to dumb down JSMin for this case.

Learn to use semicolons properly. ! is not intended to be a statement separator. ; is.

To which Thornton replied:

i have learned to use them, that’s why there isn’t one present.

Rather than continue the debate, perhaps it’s best to review the rules surrounding semicolons in JavaScript so we can make informed decisions about our own coding style preference and we can learn to contend with code produced by programmers who have other preferences.

As an aside, it should be noted that both Bootstrap and JSMin have been patched to resolve the relevant issues in both.

Rules of ASI

The ECMAScript Language Specification deals with ASI in section 7.8 of editions 1 (PDF) and 2 (PDF) and section 7.9 of editions 3 (PDF), 5 (PDF) and the current drafts of edition 6. The text has stayed roughly the same through the different editions except for the inclusion of continue, break and throw statements in special cases that previously just applied to return. More on this below.

Simply put, the first basic rule of ASI is:

  • If the parser encounters a new line or curly brace, and it is used to break up tokens that otherwise don’t belong together, then it will insert a semicolon.

The new line character is the one most commonly used in taking advantage of ASI so we’ll restrict ourselves mainly to this case. The most common situation where you’ll see curly brace ASI occurring is in code such as: if (foo) { bar++ }. It should be noted, however, that you could surround all your statements, expressions, etc. in curly braces if you wanted to avoid semicolons, i.e. place everything in its own block; although this offers limited help in achieving the kinds of goals that the semicolon-free crowd advocate.

So, as a beginning example, the code:

a = b + c

has ASI applied because stringing the tokens together without the new line doesn’t help. Otherwise, it would be interpreted as c foo() which isn’t correct. The parser makes it look like this internally:

a = b + c;

// or

a = b + c; foo()

But here we find the most important alleged problems with taking advantage of ASI in your coding style. The important part of the first rule of ASI is that it will only apply if the parser needs to do so in order to make sense of the code in question. Consider the following code:

// example 1
a = b + c

// example 2
a = b + c
(options || {}).foo ? bar() : baz()

In both of these cases, the parser doesn’t need to apply ASI in order to have properly formed code. In the first example, it can ignore the new line and treat the [ as applying to c, likewise in the second example, the ( can apply to c. So we would end up running something quite different than we might be trying to achieve:

// example 1
a = b + c[1].push(a)
// i.e. fetch the first element of 'c' and execute the 'push' function on what it finds

// example 2
a = b + c(options || {}).foo ? bar() : baz()
// i.e. execute 'c' as a function and check for the existence of the property 'foo' on the returned object

Moving on in the language specification, there are a few of special cases:

  • ASI is never performed if it would result in an “empty statement”.

Empty statements ordinarily look like this (note the semicolons, there’s a statement there, it’s just “empty”):

for (counter = 0; counter < something(); counter++);
// or
if (condition);
else {

This is perfectly legal JavaScript and may even be useful in certain situations. However, ASI will never help you achieve this so if you have constructs that would lead to empty statements (if there were semicolons) then you’ll simply get an error:

if (condition)
else {
  • ASI is not performed within the head of a for loop, where semicolons are an integral part of the construct.

So no ASI is applied in cases such as:

for (var i = 0;
  i < a.length
// may as well be written as:
for (var i = 0; i < a.length; i++) ...
  • ASI is performed if the parser reaches the end of a file and a semicolon will help the code make sense. In other words, even if you don’t have a new line at the end of your file, it will perform ASI in the same way as if there was one.

There is one final rule in the language specification regarding ASI. This rule overrides the first rule in some special cases, called “restricted productions”. I’ll split this rule into two to separate out an uncommon case with a much more common case.

  • ASI is always performed on code where a new line character comes before a -- or a ++, even where removing the new line character would still make a valid construct.

This rule is arguably not so important to understand or remember because it doesn’t affect code that the majority of programmers would write. Consider the following program where each section contains identical sequence of ‘tokens’ except for the semicolons and white space characters. Try to predict the output for yourself:

var a, b, c;

// 1) plain
a = b = c = 1; a++; b--; c; console.log('1)', a, b, c)

// 2) extra spaces
a = b = c = 1; a ++ ; b -- ; c; console.log('2)', a, b, c)

// 3) new lines v1
a = b = c = 1
a ++
b --
console.log('3)', a, b, c)

// 4) new lines v2
a = b = c = 1
++ b
-- c
console.log('4)', a, b, c)

// 5) new lines v3
a = b = c = 1
console.log('5)', a, b, c)

As per our ASI rule, even though the new line character doesn’t interrupt a valid code construct (a ++ would be the same as a\n++ in most C-family languages), the parser will always insert a semicolon when it encounters a ++ or -- after a new line character. So instead of being postfix operators as in a++ and b--, they become prefix operators on the next variables in the token stream: ++b and --c.

The output from the above program is:

1) 2 0 1
2) 2 0 1
3) 2 0 1
4) 1 2 0
5) 1 2 0

The simple moral here is to follow standard C-family coding practice and keep your postfix and prefix operators attached to the variables they are applied to.

The second part of the final rule is more relevant as it can conflict with what you might encounter in standard C-family programs:

  • ASI is always performed where new line characters follow directly after any of the following statements: continue, break, return and throw.

While not common, both continue and break can be followed by a label, indicating where to jump to (labels with these two statements are the less ‘evil’ cousins of the much maligned goto found in many other languages). If you intend for the program to jump to a label then you must not separate the label from the continue or break by a new line character:

// not the same as:
continue foo;
// actually interpreted as:

// not the same as:
break foo;
// actually interpreted as:

The return and throw rules are much more interesting because, like the first rule of ASI, it can lead to non-obvious problems in common code. Generally, a stand-alone throw statement will lead to parse errors, so you should find out fairly quickly that this code is no good because you’ll get some kind of parse error:

  new Error('Aieee!')
// interpreted as:
new Error('Aieee!');

If you have a long line of code containing a throw statement and you wanted to improve readability by using new line characters. You cannot insert the new line straight after the throw or you’ll end up with invalid code, i.e. a throw that doesn’t have anything to throw. You’ll have to rewrite your code or find a different place to introduce the new line character that fits your coding style. For example:

throw new Error(

The most commonly used of the four statements we are considering is return. It is quite common to try and append a complex series of tokens to a return statement or even use return as an ‘early return’ from a function, sometimes leading to long lines that we may be tempted to break up with new lines. Consider:

// a common Node construct, an 'early return' after a callback upon receiving an error:
if (err) {
   callback('Error while processing something that takes a lot of words to describe: ' + err)

As per the ASI rule, the new line character directly following the return leads to the insertion of a semicolon so we actually end up with our ‘early return’ being a bit too early and our function call becomes dead code. The above code is interpreted as something that is clearly not intended:

if (err) {
 callback('Error while processing something that takes a lot of words to describe: ' + err);

The impact of ASI on this type of code is particularly sinister because it can be difficult to pick up. We were not intending to use return to actually return a value, but to halt execution of the current block. We’re not going to be needing or perhaps even using a return value from the containing function–discovering the error will need somethingElseHere() to have obvious side-effects, which is not always the case.

The same ASI procedure occurs when we try to fit too much into our return value and are tempted to break it up with new lines:

if (foo) {
    (something + complex()) - (enough[1] / to) << tempt + us(to - linebreak)

It’s clear here that we’re intending to return a value calculated by the long code string and we’ve attempted to improve readability by breaking it up with new line characters, or perhaps you have a vertical line in your editor that tempts you to do this kind of breaking.

We end up with an empty return and some dead code:

if (foo) {
  (something + complex()) - (enough[1] / to) << tempt + us(to - linebreak);

It’s important to remember that if you need to have long lines of code beginning with a return then you can’t start with a new line straight after the return, you’re going to have to find somewhere else to break if you really must break–or even better, avoid long return lines completely.

Gentle Advice

It should be clear, particularly from the last rule outlined above, that we don’t need to be following a semicolon-free coding style to fall foul of JavaScript’s ASI feature. Perfectly innocent line breaking can lead to semicolons being inserted into our token stream without our permissions so it’s important to be aware of the kinds of situations where this can happen. Much of the recent debate about semicolons misses this point. Additionally, love or hate ASI, it’s with us and is not going away so perhaps it would be more productive to embrace it as a feature and use it where it suits us and work around it where it doesn’t.

Regardless of your preference, ASI and other obscure rules in non-trivial languages such as JavaScript mean that our build tools should involve some kind of syntax checking mechanism. Strongly-typed languages such as Java have sophisticated editors that can understand the intent of your code and provide real-time feedback as you type. It’s a little more complex in JavaScript but we do have excellent tools that can analyse our code and point out potential problems or code style that may lead to common hazards.

JSLint by Douglas Crockford is perhaps the best known syntax checking tool available for JavaScript. It will encourage you to follow Crockford’s personal coding style, which he believes leads to fewer syntax-related errors.

JSHint was developed as a much-less-opinionated alternative to JSLint. It has many options that let you tailor it to your personal preferences while still steering you away from potential errors, ASI-related and other.

These tools can be run across source files at build time (via a Makefile or as part of your test runner for example), or embedded directly in the text editors most commonly used by JavaScript programmers. Vim, TextMate and SublimeText all have ways of running JSLint or JSHint as you edit, providing quick feedback on any potential code problems. Even the most experienced JavaScript developers can bump into occasional ASI-related problems, having build tools that can point us in the right direction is just common sense.

Semicolon-free Best Practice

If you lean towards a semicolon-free style, there are some well-established conventions that can help produce less error-prone code. One of the largest JavaScript projects following a semicolon-free style is npm by Isaac Schlueter who is now lead developer of the NodeJS project. npm is Node’s package manager and the code has a very particular coding style that is followed by many who advocate semicolon-free. Aside from minimal use of semicolons, this style is also characterised by comma-first, putting the emphasis on putting necessary syntax at the beginning of lines rather than at the end, where they can be easily overlooked.

To alleviate problems caused by ASI, Isaac advocates inserting a leading semicolon on lines that begin with syntax that could be interpreted as following on from the previous line. In particular the [ and ( characters. Our examples above involving these two characters can be rewritten as:

// example 1
a = b + c

// example 2
a = b + c
;(options || {}).foo ? bar() : baz()

By placing semicolons and commas at the beginning of the line, we elevate their importance in the token stream and potentially assist our own brains in identifying problems. Isaac has a great post dealing with this and other ASI issues.

Lastly, let’s try and keep things in perspective. The JavaScript community has generated a lot of heat over a single, humble, character. There are bigger mountains to climb and we would be better off expending all that energy on building awesome things!