Is Koa the Future of Node Frameworks?

09 Jan 2014 | By Alex Young | Comments | Tags node modules es6

Are you tired of callback wrangling for web middleware? Koa (GitHub: koajs / koa, License: MIT, npm: koa) is a new web framework by TJ Holowaychuk, Jonathan Ong, and Julian Gruber that embraces ES6 generators down to the core. Gone is the next parameter in Express, replaced by yield next which can be called in a synchronous style.

With generators we can achieve “true” middleware. Contrasting Connect’s implementation which simply passes control through series of functions until one returns, Koa yields “downstream”, then control flows back “upstream”.

You’ll need Node 0.11.9 or above to use Koa, and the node command must be invoked with the --harmony flag. The use of generators is partly enhanced by TJ’s Co module, so if you’re not intimately familiar with ES6 promises be aware that Co is used.

Here’s an example: the app.callback method returns a handler that is compatible with Node’s http.createServer method, and uses co:

app.callback = function(){
  var mw = [respond].concat(this.middleware);
  var gen = compose(mw);
  var fn = co(gen);
  var self = this;

  return function(req, res){
    var ctx = self.createContext(req, res);
    onSocketError(ctx, ctx.onerror);, ctx.onerror);

This example is from Koa’s source, and allows the following to work:

var koa = require('koa');
var app = koa();

// Equivalent: http.createServer(app.callback()).listen(3000);

The Request Response Pattern

The key to making solid Node web applications is to realise and exploit the fact Node speaks HTTP. Contrast this to PHP or ASP, where “pages” execute and generate output. Those req and res objects are there for a reason: Express and similar frameworks are built on Node’s http core module, and the http module’s API is based around these request and response objects.

I like thinking in terms of HTTP requests and responses – it gives me the sense that I’m dealing with HTTP “functions” that take input and transform somehow. That makes it easier for me to test my web apps, and I’ve been comfortable working this way since I discovered Express.

In Koa things are slightly different:

A Koa Context encapsulates node’s request and response objects into a single object which provides many helpful methods for writing web applications and APIs.

While it’s true that Express decorates the request and response objects, Koa goes further by abstracting them. You can still get at the request and response, and there’s also a Koa request and response as well:

app.use(function *(){
  this; // is the Context
  this.request; // is a koa Request
  this.response; // is a koa Response
  this.req; // Node's request
  this.res; // Node's response

Notice that this is significant – you may have seen something similar in jQuery callbacks. I think it was clever of Koa’s authors to execute middleware from within a “context”, because it makes sense semantically. The current context has aliases to commonly accessed request and response properties, so the average Koa middleware has less indirection and looks lean and clean.

Understanding Yield

I realise that the advantages of generators in middleware might not be obvious at first. The best example I can think of from Koa’s documentation is measuring response time. This example yields early, allowing the response time to be measured:

// x-response-time

app.use(function *(next){
  var start = new Date;
  yield next;
  var ms = new Date - start;
  this.set('X-Response-Time', ms + 'ms');

The start time is recorded, then execution is deferred to the next item of middleware in the stack with yield next. This all “unwinds” at the end of the request, so as long as the x-response-time was the first item, execution will continue after yield next. That means var ms = new Date - start; will correctly measure the elapsed time.

I think many of us have struggled to stack middleware in meaningful ways, and this could make our code more readable. Think about it like this: a single function can encapsulate the entire intent of the middleware.


It might be that the dependence on Node 0.11 and our investment in existing frameworks will hold back Koa’s adoption. However, remember that you can mount entire applications as middleware in Connect, so what’s to stop you from mounting a Koa app inside your existing Express apps, once generators are standard in your production version of Node?

Even if you don’t switch to Koa, you should start thinking about how to use generators, and I think middleware is a sensible place to explore their implications.

Node Roundup: Faucet, Node Compiler, Tumblr

08 Jan 2014 | By Alex Young | Comments | Tags node modules testing tap


Faucet (GitHub: substack / faucet, License: MIT, npm: faucet) by Substack is a human-readable TAP summariser. You can pipe TAP text into the faucet command-line script, and it’ll generate prettier yet concise output.

If you type faucet, JavaScript files in test/ will be executed using tape and then automatically piped through faucet.

Substack has created some nice animated gifs that show what the results look like under various conditions. One of them even shows Mocha using tap through the -R tap command-line option.

Node Compiler

Node Compiler

Sonny Lazuardi sent in Node Compiler (GitHub: sonnylazuardi / node-compiler, License: MIT), a web-based tool for building C++. It uses g++ with execSync, wrapped up with an Express-based API.

The web interface uses the Ace editor, which supports traditional editor features like syntax highlighting. I think it’s quite an audacious idea, but it might be a little dangerous to leave on public servers.


node-tumblr (GitHub: meritt / node-tumblr, npm: tumblr) by Alexey Simonenko is a Tumblr API wrapper for Node. It supports OAuth, and allows you to query posts, links, answers, and the other resources Tumblr provides.

Gulp, bLazy, grunt-bowercopy

07 Jan 2014 | By Alex Young | Comments | Tags bower grunt build images node modules



Last night I was reading a post about Gulp by Martin Genev. Martin traces the appearance of Gulp into the JavaScript community, through GitHub comments and Tweets.

Apparently Gulp is a new build system made by Fractal, a Node consultancy with several popular Node modules under their collective belts.

Gulp is built around streams, so it feels more like idiomatic Node. You can pipe files through processors, so if you had a set of LESS files you could convert them into CSS with something like gulp.src('less/*.less').pipe(less()).pipe(minify()).pipe(gulp.dest('styles/screen.css')). It supports tasks as a unit of work, and tasks can have names and dependencies.

The project has 13 contributors already – most of the work is by Eric Schoffstall who you’ll see all over Fractal’s other projects. It has tests written with Mocha, and some decent documentation already.


bLazy (GitHub: dinbror / blazy) by Bjoern Klinggaard is a lazy loading image script. It doesn’t have any dependencies, and supports callbacks for loading failures:

var bLazy = new Blazy({
  success: function(ele) {
  error: function(ele, msg) {
    if (msg === 'missing') {
      // Data-src is missing
    } else if (msg === 'invalid') {
      // Data-src is invalid

There’s a blog post about bLazy that documents the full API.


I seem to waste a lot of time detangling Bower dependencies to make my client-side builds more efficient. Timmy Willison may have solved this with grunt-bowercopy (GitHub: timmywil / grunt-bowercopy, License: MIT). It allows you to specify where dependencies should go, and can reduce the amount of duplication when creating builds.

It looks like it works the way I expect Bower dependency management to work in Grunt, so I’m going to go back and look at my Grunt/Bower projects to see if I can clean then up with this.

Lukis, Backbone.Controller, lrDragNDrop

06 Jan 2014 | By Alex Young | Comments | Tags node modules testing types


Lukis (GitHub: keripix / lukis, License: MIT) by Keripix is an experimental image editor, built with Twitter’s Flight and Fabric.js.

It’s event driven, so each main drawing component is nicely decoupled. This is based on Flight’s API, where behavior is mapped to DOM nodes.


Backbone.Controller (GitHub: artyomtrityak / backbone.controller, License: MIT) by Artyom Trityak is a Backbone controller that supports declarative routes. It makes Backbone feel more like traditional MVC, which may appeal to you if you’re brainwashed by other MVC frameworks.

Artyom has included some documentation showing how to bind routes using Backbone.Controller.extend, and there’s also a RequireJS AMD snippet so you can get started quickly.


lrDragNDrop (GitHub: lorenzofox3 / lrDragNDrop, License: MIT) by Laurent Renard is an AngularJS module for managing collections of items using drag and drop.

You can use it as a directive, and load it with angular.module('myApp',['lrDragNdrop']). Items can be dragged from one collection to another, copied, and sorted.

Orbit Viewer, Earhorn

03 Jan 2014 | By Alex Young | Comments | Tags webgl space instrumentation debugging

Orbit Viewer

Orbit Viewer

Orbit Viewer is a Chrome Experiment by Kevin Gill that helps visualise the orbits of comets and satellites. You can watch the famous comet Shoemaker–Levy 9, or see the current position of the International Space Station. It should work with most WebGL capable browsers.

A sort of “Where are they now” for spacecraft and comets: Check out realtime positions, along with historical and projected flight paths of our solar system’s trailblazing spacecraft and comets. All in a zoomable/rotatable 3D interface. Using historical and real-time trajectory information for NASA’s JPL Horizons system, and in-browser WebGL and Three.js rendering.


Earhorn (GitHub: omphalos / earhorn, License: MIT) by “omphalos” is a library for instrumenting JavaScript. You pass earhorn$ a label and a function, and then you can view the function as the values change.

The mouse example shows how this works: the source for a jQuery mousemove listener is displayed, and whenever you move the mouse the integer values for the current coordinates will be reflected in real time.

An iframe is used that loads the earhorn/index.html page which knows how to display an instrumented version of the function. Internally, Earhorn uses Esprima to generate an abstract syntax tree that is manipulated to allow the code to be observed.

It reminds me a little bit of the Watches feature in Light Table, and some of the recent improvements to WebKit Inspector.

Recipe for Express Configuration Files

02 Jan 2014 | By Alex Young | Comments | Tags node express configuration recipes

Express has a few helper methods that support configuration. There are three pairs of methods: get and set for setting values, enable and disable for toggling boolean options, and enabled and disabled for testing boolean options. Options can be set based on the current environment by using the configure method.

Here’s an example of these methods:

var express = require('express');
var app = express();
var assert = require('assert');

app.set('title', 'DailyJS');
assert.equal(app.get('title'), 'DailyJS');

app.configure('production', 'staging', function() {
  // 'emails' is an internal setting I've made up
  // It could be used to only send emails from certain environments

app.configure('test', function() {

The configure method is based on process.env.NODE_ENV, which is available in app.get('env'). If you access it through app.get you’ll see a default of 'development' rather than undefined. When you deploy your application you’ll want to make sure the NODE_ENV environmental variable is set to staging or production. How this is done is based on operating system or cloud provider – with Heroku it would be heroku config:add NODE_ENV=production.

These methods are useful, but sometimes you want to store settings in configuration files. It depends on the type of project you’re working on, but most of the commercial projects I’ve worked on required configuration files.

I use JSON as the format for these files because it’s easy to write and parse in Node projects. You don’t even need to use JSON.parse, you can just use require. I like to use a configuration file for each environment, so I usually end up with a directory like this:


You can load one of these files with require('config/development.json'), but you can go a step further by using an index.js file:

module.exports = {
  development: require('./development.json'),
  production: require('./production.json'),
  test: require('./test.json')

Now you can use var config = require('./config') elsewhere in your project. However, because process.env.NODE_ENV gets set, we can simplify that index.js file even further:

module.exports = require('./' + (process.env.NODE_ENV || 'development') + '.json');

Now require('./config') will return an object that contains the configuration for the current environment. I use this to do things like turn off AWS emails in my unit tests, but leave them on for the production system. By exploiting the design of Node’s module system you basically get configuration files for free.

This might not be the best solution for every project. The config module by Loren West supports YAML files, and nconf from flatiron is hierarchical – settings can be passed in as command-line options, from the environment, or from a file, and used based on precedence. It can also store settings in databases like Redis.

How do you configure your Express projects?

Node Roundup: 0.11.10, Ducky, Test-driving a Node.JS API

01 Jan 2014 | By Alex Young | Comments | Tags node modules testing types

Node 0.11.10

Node 0.11 is now pushing double figures. The three main dependencies have been updated (http_parser, uv, v8), and the core modules have a lot of fixes.


Ducky (GitHub: rse / ducky, License: MIT, npm: ducky) by Ralf S. Engelschall is a library for querying and validating objects.

The method accepts an object and a “path” – this path is based on dot notation. The ducky.validate method accepts an object and a string representation of its types. The validation syntax is based on JSON with some regular expression hints.

Ralf has included tests based on Chai, and you can also use this module in client-side projects.

Test-driving a Node.JS API

Test-driving a Node.JS API by Joris Ooms is a blog post about setting up a test-driven project based on Express, SuperTest, and Mocha.

At the end he says:

Often, routes are locked behind authentication (with, for example, PassportJS). We can test these just as easily with supertest, through its lower-level module superagent. I will cover this in a future blog post.

I think he’s going to talk about the technique I use for testing my web applications, where authentication is handled with SuperAgent and cookies. It’s a bit awkward to set up, so it’ll be interesting to see what he says.

AngularJS Roundup: ngDialog.js, ocLazyLoad, angular-validation

31 Dec 2013 | By Alex Young | Comments | Tags angularjs validation CoffeeScript modal ui

People keep sending me AngularJS scripts to write about, so I’ve collected a few together to start a probably infrequent AngularJS Roundup. This week we’ve got three scripts to talk about, and the first is ngDialog.js.


ngDialog.js (GitHub: likeastore / ngDialog, License: MIT) by Dmitri Voronianski is a modal dialog and popover provider. You can load it and display a dialog like this:

var app = angular.module('exampleApp', ['ngDialog']);

app.controller('MainCtrl', function($scope, ngDialog) {
  $scope.clickToOpen = function () {{ template: 'popupTmpl.html' });

The markup for the dialog can be a string, or loaded from a template:

<script type="text/ng-template" id="templateId">
  <h1>Template heading</h1>
  <p>Content goes here</p>

You can even use the ng-dialog directive. The project comes with two default themes, and you can use one of those to get started creating your own. The default theme has CSS animations and media queries.


ocLazyLoad (GitHub: ocombe / ocLazyLoad) by Olivier Combe is a module for lazy loading dependencies in AngularJS. It’s a service provider that allows you to load files with promises, like this:

  name: 'TestModule',
  files: ['testModule.js']
}).then(function() {

The blog post explains how the whole thing works, with detailed examples and explanations of how AngularJS loads modules.

Since the modules can only be loaded on startup and the application can only be launched using the ng-app directive, if we can find the app module, we can get the complete list of all loaded modules and dependencies.

Angular Validation

Angular Validation (GitHub: huei90 / angular-validation) by Huei Tan is a set of form validation directives. It supports various validation methods – watch, blur, or submit, so you can show errors when it makes sense for your application.

It has some built in validation types, but you can add your own in JavaScript by loading the validation provider, and then adding new validation “expressions”. Expressions are loaded based on the validator attribute. The readme has an example of how to do this, with the huei validator.

AngularJS with CoffeeScript

Finally, Elad Ossadon sent in an article about making AngularJS classes work better with CoffeeScript: Angular.js CoffeeScript Controller Base Class.

It’s a fairly short post with a base class snippet and an example controller module.

Mean, Survey Visualisations

30 Dec 2013 | By Alex Young | Comments | Tags express node mean survey


You want to build a web application, and you need a database. You can write JavaScript, but you’re not yet completely comfortable with Node. What do you do?

I wrote about Getting MEAN recently, a book about building web applications with MongoDB and Express. If you’re interested in this approach, a quick way to get started is Mean (GitHub: linnovate / mean, License: MIT), a module that collects everything you need together. It even includes AngularJS and Bootstrap, so you get a solid interface out of the box.

If you already understand the MVC pattern, and use AngularJS, then this is definitely a quick way to get started. It’s also a handy way of getting experiments up and running quickly, which is a great way to learn.

Survey Visualisations

Survey Visualisations

Konrad Dzwinel sent in these visualisations of the DailyJS survey. It allows you to see how answers to one question map to another. This is cool because I wanted to compare “What type of JavaScript do you write?” to “Where do you use JavaScript?” – I was expecting to see a lot of people writing side projects for the server at home, but the split is pretty even.

The visualisations are powered by D3.js, and Bootstrap has been used as well.

JavaScript MESS and the Internet Archive

27 Dec 2013 | By Alex Young | Comments | Tags games emulators emscripten

Atari 2600

if you program and want any longevity to your work, make a game. all else recycles, but people rewrite architectures to keep games alive. – Why the Lucky Stiff has a section dedicated to software. Inside you’ll find The Internet Archive Console Living Room, which has details on some major games consoles from the late 70s and 1980s, including the Atari 2600 and the ColecoVision.

The great thing about this project is they’re trying to keep old software alive. You can browse through titles and play them in a browser. This is powered by jsmess (GitHub: jsmess / jsmess), an Emscripten-based emulator derived from MESS:

The JAVASCRIPT MESS project is a porting of the MESS emulator, a program that emulates hundreds of machine types, into the JavaScript language. The MESS program can emulate (or begin to emulate) a majority of home computers, and continues to be improved frequently. By porting this program into the standardized and cross-platform JavaScript language, it will be possible to turn computer history and experience into the same embeddable object as movies, documents, and audio.

Running a game binary requires a suitable BIOS, but the groundwork for lots of systems has been added to MESS:

MESS and MAME were started over a decade ago to provide ubiquitous, universal emulation of arcade/gaming machines (MAME) and general computer hardware (MESS). While specific emulation implementations exist that do specific machines better than MAME/MESS, no other project has the comprehensiveness and modularity. Modifications are consistently coming in, and emulation breadth and quality increases over time. In the case of MAME, pages exist listing machines it does not emulate.

Over the last two years there’s been a flood of new browser-based emulators, supporting everything from the Amiga to the Game Boy Advance. Part of what makes these project possible is recent technologies like Canvas, WebGL, WebAudio, and FileReader. But even seemingly less buzzwordy APIs like typed arrays can help get old games running smoothly.

Node Roundup: 0.10.24, irc-message-stream, 100% Uptime

26 Dec 2013 | By Alex Young | Comments | Tags node modules security talks slides irc

Node 0.10.24 Released

Node 0.10.24 was released soon after 0.10.23. It updates uv and npm, but presumably this release was due to CVE-2013-6639 and CVE-2013-6640. These are security related patches for V8:

… allows remote attackers to cause a denial of service (out-of-bounds read) via JavaScript code that sets a variable to the value of an array element with a crafted index

If you run this example in Node 0.10.22 you should see a segfault.

var size = 0x20000;
var a = new Float64Array(size);
var training = new Float64Array(10);

function store(a, index) {
  var offset = 0x20000000;
  for (var i = 0; i < 1; i++) {
    a[index + offset] = 0xcc;

store(training, -0x20000000);
store(training, -0x20000000 + 1);
store(training, -0x20000000);
store(training, -0x20000000 + 1);

for (var i = -0x20000000; i < -0x20000000 + size; i++) {
  store(a, i);


irc-message (GitHub: expr / irc-message, License: BSD 2-Clause, npm: irc-message) by Fionn Kelleher is a small parser that outputs objects based on RFC1459. The author has used it to create irc-message-stream, which is a transform stream.

That means you can take a socket connection to an IRC server and pipe it through your own stream handlers:

var net = require('net');
var MessageStream = require('irc-message-stream');
var messageStream = new MessageStream();

messageStream.on('line', function(line) {
  console.log('Raw line:', line);

messageStream.on('data', function(message) {
  console.log('Parsed message:', JSON.stringify(message));

var socket = net.connect(6667, '');

I think this is a great way to handle IRC in Node – taking advantage of the newer streams API seems a lot more idiomatic than other approaches that I’ve seen (and made!).

Towards 100% Uptime with Node

William sent in his slides for a talk called Towards 100% Uptime with Node. The slides cover the difficulties of handling uncaught exceptions in a cluster of Node processes, and ensuring that every request has a response, even if it’s to report an error.

One of the tips he mentions is to be able to generate errors on demand for development and staging. I do this in my tests – if critical paths are expected to throw exceptions, emit 'error' events, or return error objects to callbacks, then all of these eventualities should be hit as part of automated testing.

The Node applications I work on for my day job are hosted on Heroku, and I’ve found you have to be extremely careful with code that throws errors and causes the process to stop. Sometimes Heroku gets confused about the state of a process and won’t gracefully restart it, so a worker just hangs for an undefined amount of time. The way I stopped this was to fix all the bugs, which sounds like an obvious thing to say, but it took lots of log file archaeology. Coincidentally, Heroku’s default logging is inadequate, so you have to send logs to a syslog daemon somewhere, or a service like Loggly (which I preferred to Splunk).

2013 Recap

25 Dec 2013 | By Alex Young | Comments | Tags node

This year we saw Node 0.10 released, Bootstrap 3, and jQuery 2.0. People are getting increasingly excited about WebGL gaming, and client-side frameworks like AngularJS and Backbone.js are maturing and growing in popularity.

The highlight of 2013 for me was speaking at the Great British Node Conference. I’d been researching Node’s internals for the book I’m working on, so it felt like all that work culminated in a talk that got people thinking more about Node’s JavaScript and C++.

Over the next year I expect ECMAScript 6 to become more widely used. If you want to keep track of this standard, I find @esdiscuss to be the most digestible way to keep track of things.


Happy holidays to everyone who reads DailyJS, and I look forward to writing more over the next year!

Switchery, circles

24 Dec 2013 | By Alex Young | Comments | Tags browser ui iOS graphs



Switchery (GitHub: abpetkov / switchery, License: MIT, bower: switchery) by Alexander Petkov is a checkbox replacement, inspired by iOS 7, complete with animations.

The basic usage is new Switchery(elem). You can pass extra options for the disabled state, the colour, and the animation speed.

Switchery is written using CommonJS modules, but Alexander builds a standalone version that doesn’t need require.



Circles (GitHub: lugolabs / circles, License: MIT) by Artan Sinani is a small script for creating circular graphs. It doesn’t have any dependencies, and can be used like this:

  id:         'circles-1',
  percentage: 43,
  radius:     60,
  width:      10,
  text:       7.13,
  colors:     ['#D3B6C6', '#4B253A']

Read Only References, Getting MEAN

23 Dec 2013 | By Alex Young | Comments | Tags node books harmony es6

Creating Read-Only References

I was working on an API where the desktop developers were worried I could break their code if my server had a typo in one of the API responses. The server was returning JSON objects, and some of the properties were important, so if they were spelled incorrectly it could be dangerous.

I wrote unit tests to ensure the API responses were the ones they expected, and used Object.defineProperty to make the API response properties read only. But what if you wanted some objects to have read/write access to an object, and others to be set as read only?

Sergey Bolshchikov sent in his post about this topic, called Creating Read-Only References. He suggests using Object.observe, so certain objets can subscribe to changes.

Object.observe is basically the future standard way to do databinding. Sergey mentions some polyfills for it, so you can use it in browsers.

Getting MEAN with Mongo, Express, Angular, and Node

Simon Holmes is writing a book about Mongo, Express, Angular, and Node. I’ve used exactly this cocktail of technologies for some of my commercial work over the last two years, but I’d never thought of the acronym MEAN before. The marketing spin is it’s the new LAMP.

You can download the first chapter free, but the book is currently being written. If you buy it early you can contribute to its development by providing the author with feedback. The publisher calls this process MEAP (Manning Early Access Program).

Metawidget, Mozilla Holiday Gaming Competition

20 Dec 2013 | By Alex Young | Comments | Tags mozilla games webgl libraries ui


Richard Kennard sent in Metawidget:

Metawidget is a smart widget that populates itself, either statically or at runtime, with UI components to match the properties of your business objects.

I originally replied to him and said that something that talks about “business objects” and Java Struts might not be the type of thing I usually write about on DailyJS. He responded in good spirits with this:

Metawidget is a lightweight UI generator that can turn a JSON object into a UI widget in one line of code:

Or three lines if not using AngularJS:

Also supports JQuery UI and JQuery Mobile:

If you come from a C# or Java background, the style of this project might appeal to you. The introductory tutorial explains the idea of transforming data into UI elements based on types (which reminds me of my XSLT days).

Mozilla Holiday Gaming Competition

Kevin Attfield sent in a competition being run by Mozilla and Goo Technologies with $45,000 worth of prizes up for grabs.

To create your games, you will be using the Goo platform consisting of Goo Engine - a 3D JavaScript gaming engine entirely built on WebGL/HTML5 - and Goo Create - a visual editing tool running on top of the engine. For inspiration, check out this video tutorial on how to create an interactive scene in Goo Create.

Kevin works for Goo Technologies, and said they’re also looking for developers.

Choosing an MVC Framework, lrNotifier

19 Dec 2013 | By Alex Young | Comments | Tags mvc angularjs

Choosing a JavaScript MVC Framework

Deciding on a client-side MVC framework can be tough – you don’t want to invest too much time on something that isn’t the right fit for your project. Craig McKeachie sent in his article, Choosing a JavaScript MVC Framework, which reviews the most popular libraries like AngularJS and Backbone.js. He takes into account things like the community following, maturity, and code size:

How many real-world production apps are using these frameworks and how many users do these apps have? How good is the documentation and how many examples/tutorials are available? Are the examples up to date? How stable is the API? Do other developers know or are getting to know this technology?

He notes that these frameworks actually fall into subcategories, so it’s hard to directly compare each of them.

After looking at the projects by features it became clear to me that I wasn’t really comparing “apples to apples.” A more fair comparison might be to compare full frameworks like AngularJS and EmberJS with stacks that include great but less broad libraries like Backbone and KnockoutJS.

The article also introduces the main concepts used by these libraries, so if you’re confused about data binding or models then this should get you started.


lrNotifier (GitHub: lorenzofox3 / lr-notifier, License: MIT) by Laurent Renard is an AngularJS directive for showing notifications. Notifications can be split into channels, allowing you to control where info, debug, or error messages will be displayed.

app.controller('myCtrl', ['lrNotifier', function(notifier) {
  var channel=notifier('channelName');

  channel.pushNotification({ message: 'hello channel', otherProp: 'other' });'a great message');
  channel.warn('a great message');
  channel.error('a great message');

Node Roundup: 0.10.23, 2013, Bull

18 Dec 2013 | By Alex Young | Comments | Tags node modules queue redis

Node 0.10.23 Released

Node v0.10.23 is out. This release upgrades uv, npm, and has patches for several core modules. I particularly liked “events: avoid calling once functions twice”. This would happen when emitting an event from inside the event hander. The fix involves using a boolean to track if the event has fired, so it’s not too drastic.

Node in 2013

If I think back over 2013, all I can remember is being punched in the face a lot by my son. He’s a year old, so I’m hoping this sort of thing stops before he gets much bigger. For those of you who still have brain cells, Gergely Nemeth sent in a timeline of Node in 2013. This includes news like Ghost getting funded,’s release, and the ScaleNPM funding drive.

Bull Job Manager

Manuel Astudillo sent in Bull Job Manager (npm: bull, License: BSD). It’s a job queue manager that uses Redis and has an API inspired by LearnBoost’s Kue.

Manuel says it’s designed with atomicity in mind. Looking at the source, it uses atomic increments and blocking operations (BRPOPLPUSH), so it should be as atomic as Redis is.

Dynatable, nanoGallery, jQuery Audit

17 Dec 2013 | By Alex Young | Comments | Tags jquery tables ui galleries chrome



Dynatable (GitHub: JangoSteve / jquery-dynatable, License: AGPL or commercial) by Steve Schwartz is a library for displaying JSON data as friendly and efficient HTML tables. It provides a framework for searching, sorting, and filtering data. It uses jQuery, and can be invoked with $.dynatableSetup.

Dynatable can convert plain HTML tables into JSON. The properties for the JSON can be camelCase, but other styles are supported, including dashed and underscore. This is set with the table.defaultColumnIdStyle option.

JSON can also be fetched from a server. In this case you can use the dataset option:

  dataset: {
    ajax: true,
    ajaxUrl: '/dynatable-ajax.json',
    ajaxOnLoad: true,
    records: []

It expects a corresponding skeleton table node, with thead and tbody.

The documentation is thorough and includes examples for each of these things, and the other features provided by the library.


Nobody’s sent me a jQuery gallery for a while. nanoGALLERY (GitHub: Kris-B / nanoGALLERY, License: CC BY-NC 3.0) by Christophe Brisbois supports Flickr and Google+, and supports responsive layouts. You can get a gallery going with a Google account like this:

  kind: 'picasa',
  userID: ''

It comes with CSS, but you can theme it. It displays a gallery navigator using folders, so it could scale up quite well to a large collection.

Documentation for the main options and expected markup can be found in the project’s readme file.

jQuery Audit

jQuery Audit (GitHub: zertosh / jquery-audit, License: MIT) by Andres Suarez is a Chrome Developer Tools extension for auditing jQuery. It adds a sidebar (under Elements) that includes details of delegated events and internal data.

The documentation has explanations of the main features, and instructions on how to use the extension properly. For example, you can dig into bound functions for event handlers which can be bound differently based on the library.

UIkit 2.0, bitcoinprices.js

16 Dec 2013 | By Alex Young | Comments | Tags ui libraries bitcoin


UIKit 2.0

UIKit 2.0 (GitHub: uikit / uikit, License: MIT) is a frontend framework that provides components for layout, navigation, and more complex UI widgets like dropdown replacements. It uses jQuery and FontAwesome. Version 2 has just been released, which has some new features including a Markdown editor that supports syntax highlighting and an extensible toolbar.

There’s extensive documentation and a theme tool, so you can have a look at the main features quite easily.


bitcoinprices.js (GitHub: miohtama / bitcoin-prices, License: MIT) by Mikko Ohtamaa is a client-side library for fetching Bitcoin prices. It supports currency selection, and uses BitcoinAverage as the price API.

BitcoinAverage itself is an open source Python project that monitors multiple exchanges for prices:

Price is a weighted average. Meaning that for every exchange the last trade price and last 24h trading volume is taken, each exchange contributes to the final price only to the extent of it’s current trading volume. For a more detailed arithmetics explanation check here.

It’s got a nice and simple Bootstrap-based website with graphs and tables.


13 Dec 2013 | By Alex Young | Comments | Tags vim emscripten editors
Surely the very reason Emscripten was created?

Finally, my worlds have collided! In case you didn’t know, I regularly write a Vim blog. It’s surprisingly easy to find things to say about this 22 year old text editor, and it’s been my main tool for writing code and articles for a long time. Vim.js (GitHub: coolwanglu / vim.js) by Lu Wang is an Emscripten port of Vim, allowing you to use Vim in a browser.

It runs pretty well on my computer – it seems fast, and the commands I typically use work. It’s not like these Vim layers for IDEs and other editors that miss certain motions, registers, and so on: it’s basically Vim. Split windows and tabs work, but the help files aren’t available (or I can’t find them). The way it works in the browser is to use a <span> for each terminal character, which means for the 43x115 example window there are 4945 spans!

From a JavaScript point of view, I found the Sync to Async Transformation document interesting. The author is trying to figure out how to deal with JavaScript’s asynchronous nature, given that Vim expects to have a non-busy synchronous sleep() function:

Most works are automatically done by web/transform.js, read the comments inside for more detail. But there are a few left, mainly function pointers, which cannot be automatically identified. Whenever vim.js crashes and you see callback function is not specified! in the browser console, congratulations, you have found one more async function at large.

I wonder if there are any Node developers or ES6 experts that can help with this? If you’re interested in the project, there’s a TODO which has some Emscripten issues and client-side work that needs doing.