Mock APIs with APItizer

03 Jun 2014 | By Alex Young | Comments | Tags testing jquery

When I’m developing APIs for desktop and mobile projects, I’ve found some people like to mock up APIs in tools like Apiary first. This allows non-web developers to create API specifications that can generate sample data for actual HTTP requests.

Sometimes when you’re doing client-side development you want something similar. APItizer, by Mihael Konjević lets you mock APIs with a JSON schema, so you can try out requests from libraries like jQuery without having to hassle a server-side developer.

When developing single page apps, it is beneficial to develop frontend and backend in parallel. To achieve that, you need to mock the API. CanJS implements this elegantly with the can.fixture plugin (used by APItizer). can.fixture intercepts Ajax calls and returns response defined by the fixtures.

To mock an API you need three things:

  1. A JSON schema
  2. To register it with APItizer: apitizer.addSchema('user', schema)
  3. Some sample data: apitizer.fixture.resource('/users', apitizer.schemaStore('user', 10))

Schemas just need to define the properties used by your resources:

var schema = {
    type: 'object',
    properties: {
        id: {
            type: 'integer'
        username: {
            type: 'string'
        password: {
            type: 'string'

This will give you some sample users that you can interact with using the standard RESTful CRUD routes.

APItizer also allows you to add custom endpoints and response delays, so you can simulate network latency. Full examples can be found in the project’s readme file.

If you’re working on a UI-heavy Knockout or Angular project, then this might help avoid worrying too much about the server as you try out UI ideas.

Searching npm

02 Jun 2014 | By Alex Young | Comments | Tags npm node

My book is currently going through technical proof reading, so I’ve been getting lots of interesting feedback. One small thing the reviewer noted was that npm search express generates thousands of results, so he asked how to filter the results.

The documentation for npm search shows that queries can use regular expressions. In my shell I have to escape regular expressions with single quotes. That means I can search for packages that start with “express” like this:

npm search '/^express/'

That reduces the output to 623 results. Perhaps, however, the issue was really relevance. Lots of results aren’t so bad if they’re sorted in a reasonable way. I tried npmsearch which you can install with npm install npmsearch, and the results seemed very friendly. You can even control the output with options like --freshness and --aging.

There’s also nipster, which combines npm’s results with GitHub. It feels fast, but it’s actually a pretty simple client-side project.

Another thing to note is npm’s standard search combines various fields (description, keywords, url) to create keywords, so you can’t easily search on a specific field (unless I’m mistaken). I’d like to search for something like name:express, but I can’t do that yet.

If you have any cool npm search-related tricks, please let me know!

Crunch, NodeRT

30 May 2014 | By Alex Young | Comments | Tags node mathematics


Crunch (GitHub: vukicevic / crunch, License: MIT) by Nenad Vukicevic is an arbitrary-precision integer arithmetic library, with a focus on speed. It has no dependencies, and the project includes examples for finding prime-numbers, generating keys for RSA, encryption, and decryption.

The examples also demonstrate using WebWorkers with the library, so you could farm out mathematical operations to multiple workers. Crunch includes unit tests and documentation in the readme file.


NodeRT is a WinRT module generator for Node:

NodeRT automatically exposes Microsoft’s WinRT APIs to Node.js by generating Node modules. This enables Node developers to write code that consumes native Windows capabilities. The generated APIs are (almost) the same as the WinRT APIs listed in MSDN.

This is an example of windows.devices.geolocation:

var geolocation = require('windows.devices.geolocation');
var locator = new geolocation.Geolocator();

locator.getGeopositionAsync(function(err, res) {
  if (err) {
  }'(', res.coordinate.longitude, ',',  res.coordinate.latitude, ')');

The project has fairly detailed documentation in the readme, including the requirements which includes VisualStudio 2013.

Velocity UI Pack

29 May 2014 | By Alex Young | Comments | Tags animations ui jquery

Julian Shapiro has announced the Velocity UI Pack. There’s a screencast that introduces the effects and how to use them.

This is an additional dependency for the Velocity.js library, which is a performance-focused jQuery plugin that improves on $.animate(). With the Velocity UI Pack you can perform animations on sets of elements, which is ideal for drawing attention to content as it’s loaded using Ajax.

It supports a stagger option which adds a delay after each animation. Given a set of elements, you can apply an animation in sequence simply by using $divs.velocity('callout.shake', { stagger: 75 }). If you’re loading an array of records using Ajax, then you can render the resulting elements and display them with .velocity('anim', { stagger: time }).

One thing that I like about this library is the animations don’t result in blurry text. Julian has gone to a lot of trouble to make it easy to use and fast, so it’s worth checking out the demo and the screencast.

Node Roundup: mongo-select, asynctrace

28 May 2014 | By Alex Young | Comments | Tags node modules npm testing mongodb


mongo-select (GitHub: dschenkelman / mongo-select, License: MIT, npm: mongo-select) is a module for creating projections on results from mongodb.

You can specify the fields to include using select.include:

var select = require('mongo-select').select();
var projection = select.include(['name', 'email', '']).make();

console.log(projection); // { 'name': false, 'email': false, '': false };

There are also methods for excluding fields (exclude) and ignoring the _id field (noId). These methods can be chained:

select.noId()._exclude(['name', 'email', '']);

Using it with MongoDB queries looks like this:

var select = require('mongo-select').select();
var mongodb = require('mongodb');

var MongoClient = mongodb.MongoClient;

MongoClient.connect('mongodb://', function(err, db) {
  if (err) throw err;

  var users = db.collection('users');

    select.include(['name', 'email']),
    function(err, result) {
      // code here, access to only result[i]._id, result[i].name and result[i].email


asynctrace (GitHub: Empeeric / asynctrace, License: MIT, npm: asynctrace) from Empeeric is a stack trace API based on AsyncListener. By requiring asynctrace, you’ll get stack traces that include details on asynchronous boundaries.

It’s built using the shimmer module, which is meant to help safely replace functions by wrapping them.

If you use Mocha then you can optionally use it by specifying it on the command line: mocha --require asynctrace. That means you don’t need to modify your code to use the module during testing.

Fluxxor for React

27 May 2014 | By Alex Young | Comments | Tags reactive facebook

Fluxxor (GitHub: BinaryMuse / fluxxor, License: MIT, Bower: fluxxor) by Brandon Tilley is a library designed to work with Facebook’s React. It provides an application architecture that’s based around a dispatcher, stores, and views.

Instantiating a Flux application looks like this:

var flux = new Fluxxor.Flux(stores, actions);

The stores object contains classes that are created with Fluxxor.createStore, and the actions object is a set of methods that invoke that dispatcher:

var actions = {
  addTodo: function(text) {
    this.dispatch("ADD_TODO", {text: text});

  toggleTodo: function(todo) {
    this.dispatch("TOGGLE_TODO", {todo: todo});

  clearTodos: function() {

These examples were taken from the Fluxxor quick start guide, which explains how to write a to-do list with Flux.

Fluxxor provides more tools as well. Fluxxor.FluxMixin can be used to make Flux instances available to React components, and Fluxxor.StoreWatchMixin allows you to watch for change events on Flux stores.

You can use Fluxxor outside of React, and it’s installable with Bower as fluxxor. Brandon, the author of the library, pointed out that Fluxxor is his personal implementation of the Flux pattern which was created by Jing Chen at Facebook.

ngActivityIndicator, angular-cog, dijs

26 May 2014 | By Alex Young | Comments | Tags angularjs di ajax



ngActivityIndicator (GitHub: voronianski / ngActivityIndicator, License: MIT) by Dmitri Voronianski is an Angular provider for loading indicators, which you can use on directives, controllers or services.

Adding an indicator to a controller looks like this:

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

app.controller('MainCtrl', ['$activityIndicator', '$timeout',
  function ($actvityIndicator, $timeout) {
    $timeout(function () {
    }, 3000);

There’s a directive called ng-activity-indicator which can be used to inject the indicator into the DOM automatically.


angular-cog (GitHub: chinmaymk / angular-cog, License: MIT) by Chinmay Kulkarni is a library for writing declarative Ajax requests with Angular.

The full set of directives are as follows:

<div cog-verb="{url}" 

Requesting JSON content should place it in the $data variable, so you can access it in cog-success and then pass it to something bound in $scope.

The documentation includes notes on how to set up a loading indicator – maybe you could try ngActivityIndicator?


dijs (GitHub: cmtt / dijs, License: WTFPL) by Matthias Thoemmes is a dependency injection module for Node and browsers that’s inspired by Angular. There are methods for defining a namespace, describing the modules, and resolving dependencies.

For describing dependencies, it supports function notation and array notation:

// Function notation
var mod = Di();
mod.provide('Pi', Math.PI, true);
mod.provide('2Pi', function(Pi) { return 2*Pi; });

// Array notation
var mod = Di();
mod.provide('Math.Pi', Math.PI, true);
mod.provide('2Pi', ['Math.Pi', function (Pi) {
  return function () {
    return 2*Pi;

There’s a lot more to it than this, and you might find it useful if you’ve got used to DI through Angular but want to use it elsewhere.

Ramda, AniJS ScrollReveal

23 May 2014 | By Alex Young | Comments | Tags functional libraries animation



Ramda (GitHub: CrossEye / ramda, License: MIT, npm: ramda) by Scott Sauyet and Buzz de Cafe is a functional library that is similar to Underscore, but has a very different API style.

In Underscore you might filter arrays like this:

var validUsersNamedBuzz = function(users) {
  return _.filter(users, function(user) { 
    return === 'Buzz' && _.isEmpty(user.errors); 

But in Ramda you can pass the function first and the array last:

var validUsersNamedBuzz = R.filter(R.where({ name: 'Buzz', errors: R.isEmpty }));

All of Ramda’s functions curry automatically, which makes composition easier:

Because the API is function-first, data-last, you can continue composing and composing until you build up the function you need before dropping in the data. (Hugh Jackson published an excellent article describing the advantages of this style.)

These API decisions mean Ramda feels like native JavaScript with less syntax than you might expect.

ScrollReveal Using AniJS

ScrollReveal (GitHub: anijs / examples / scrollreveal) by Dariel Noel Vila Plagado is an AniJS helper function that animates components as they enter the viewport.

The syntax for animating items looks like this:

<div id="item" data-anijs="if: scroll, on: window, do: swing animated, before: scrollReveal">
  Cuba 2022

Node Roundup: webpack, Mitm.js, musicmetadata

22 May 2014 | By Alex Young | Comments | Tags node modules npm build-systems network



Vignesh Anand sent in webpack (GitHub: webpack, License: MIT, npm: webpack) by Tobias Koppers. It’s a bundler for CommonJS and AMD packages, based around asynchronous I/O, and supports preprocessors like CoffeeScript.

With webpack you can load chunks of dependencies on demand, so you can reduce the initial payload. It only supports JavaScript by default, but there are modules for loading resources like CSS (css-loader). To understand how it works, the getting started tutorial provides a high-level overview.

Vignesh pointed out that Instagram uses webpack, and it already has a lot of support on GitHub.

Just wanted to leave a little thank you and share the exciting news that is now building and serving all of its js and css assets with webpack :). @sokra you’ve been an awesome help in getting this all working, and our build step is so much cleaner and quicker because of it.


Mitm (GitHub: moll / node-mitm, License: LAGPL, npm: mitm) by Andri Möll is a module for intercepting and mocking outgoing TCP and HTTP connections. Running Mitm() will enable mocking for sockets, and it returns an object that allows mocking to be disabled:

var Mitm = require('mitm');
var mitm = Mitm();

// Later:

The documentation has more examples, including how to handle HTTP requests during testing.


musicmetadata (GitHub: leetreveil / musicmetadata, npm: musicmetadata) by Lee Treveil is a streaming metadata parser for music files:

var fs = require('fs');
var mm = require('musicmetadata');

// create a new parser from a node ReadStream
var parser = mm(fs.createReadStream('sample.mp3'));

// listen for the metadata event
parser.on('metadata', function(result) {

The project is a fork of node-id3 by António Afonso.

Script-injected Async Scripts Considered Harmful

21 May 2014 | By Alex Young | Comments | Tags async performance

Ilya Grigorik has published a post about how script-injected resource loading could negatively impact performance, in Script-injected “async scripts” considered harmful.

The inline JavaScript solution has a subtle, but very important (and an often overlooked) performance gotcha: inline scripts block on CSSOM before they are executed. Why? The browser does not know what the inline block is planning to do in the script it is about to execute, and because JavaScript can access and manipulate the CSSOM, it blocks and waits until the CSS is downloaded, parsed, and the CSSOM is constructed and available.

The example in the article shows a CSS download blocking script execution, where the scripts are short snippets that inject additional script elements to load real JavaScript files. The delay of execution causes the files to be downloaded later than desired.

If you look at the source to DailyJS you can see Disqus injecting a script that way, and when I look at the network tab in Chrome Developer Tools it seems like count.js executes after the CSS files have downloaded.

The obvious fix is to use async attributes on script tags, as long as you can live with the additional effort to support IE8 and 9. But before you rush off to reformat your sites, the last point by Ilya is interesting:

Wait, should I just move all of my JavaScript above the CSS then? No. You want to keep your <head> lean to allow the browser to discover your CSS and begin parsing the actual page content as soon as possible - i.e. optimize the content you deliver in your first round trip to enable the fastest possible page render.

Optimising for all possible browser behaviours is difficult!

Hammer.js: touch-action fix

20 May 2014 | By Alex Young | Comments | Tags mobile touch

Hammer.js has been updated, and the authors have written a notice about the scrolling behaviour in Chrome 35 and IE10. The touch-action CSS property controls how regions are scrolled with touch events – think panning and zooming.

In older versions of Hammer, this property was set to none, so it blocked scrolling. You can change the default behaviour using the behavior.touchAction property:

<script src="hammer.js"></script>
// enable only vertical scrolling on browsers that support touch-action
// for 1.0.x this is at the stop_default_behavior object
Hammer.defaults.behavior.touchAction = 'pan-y';

// ...your hammer code...etc...
var mc = new Hammer(document.body);

Realising that this would confuse people, the Hammer authors have written How to fix Chrome 35 and IE10 scrolling, so you can update your Hammer-based sites to work correctly in newer browsers.

Async Harmony Tests

19 May 2014 | By Alex Young | Comments | Tags es6 async firefox

Simeon Velichkov sent in async-harmony tests (GitHub: simov / async-harmony, License: MIT), which contains examples of new ES6 features. Each example is based on methods from async, but written using new features like generators, including arrow functions.

It only currently works in Firefox 29, but I thought the examples were quite interesting:

function eachSeries (items, job, done, kill=true) {
  var results = [], errors = [];

  var it = iterator();;

  function* iterator () {
    for (let item of items) {
      yield job(item, (err, result) => {
        if (kill && err) return done(err);
        if (err) errors.push(err);
        setTimeout(() =>, 0);
    done((errors.length ? errors : null), results);

The corresponding usage looks like this:

async.eachSeries([0,1], (item, done) => {
  done(new Error('error'+item));
}, (err, result) => {

Give them a read if you’re interesting in seeing ES6 in action.

Agenda: Lightweight Job Scheduling

16 May 2014 | By Alex Young | Comments | Tags node modules npm

Agenda (GitHub: rschmukler / agenda, License: MIT, npm: agenda) by Ryan Schmukler is a job scheduler for Node that uses MongoDB as the backend. It runs periodically, so you’d need to run it as a background process on something like Heroku or Nodejitsu.

You can control the number of concurrent jobs with the concurrency option, and jobs can be given a priority so higher priority jobs can run first.

Basic usage looks like this:

agenda.define('delete old users', function(job, done) {
  User.remove({lastLogIn: { $lt: twoDaysAgo }}, done);

agenda.every('3 minutes', 'delete old users');

agenda.every('*/3 * * * *', 'delete old users');


The last example looks like cron, so you can use it as a cron replacement if you’re used to that syntax. The agenda.start method kicks off the process so jobs will run.

The MongoDB instance can be specified using the database method, and configuration options can be chained:

var agenda = new Agenda();
  .processEvery('3 minutes')

Agenda was recently featured as an npmawesome post on Nodejitsu’s blog: Schedule regular jobs with agenda.

Trash: Cross-Platform Delete

15 May 2014 | By Alex Young | Comments | Tags node modules npm cli


Trash (GitHub: sindresorhus / trash, License: MIT, npm: trash) is a cross-platform command-line tool for safely deleting files.

Although those of us who are raised on Linux find the indignity of a Trash folder or Recycle Bin annoying, it can be a useful safety net. It has support for Windows, OS X, and Linux:

function win(paths, cb) {
  execFile('./Recycle.exe', ['-f'].concat(paths), {
    cwd: path.join(__dirname, 'vendor', 'cmdutils')
  }, function (err) {

The Linux version has a small script that wraps around trash-cli:

function linux(paths, cb) {
  execFile('./trash-put', paths, {
    cwd: path.join(__dirname, 'vendor')
  }, function (err) {
    if (err && /cannot trash non existent/.test(err.message)) {
      return cb(new Error('Item doesn\'t exist'));


The test is written as an integration test, so it uses Node’s fs module to create and move files:

it('should trash files', function (cb) {
  fs.writeFileSync('fixture', '');
  fs.writeFileSync('fixture2', '');
  fs.writeFileSync('weird\\\\name\\"\'', '');

  ], function (err) {
    assert(!err, err);

Node Roundup: Newman, selenium-test-runner, ncc

14 May 2014 | By Alex Young | Comments | Tags node modules npm chrome http testing


Newman (GitHub: a85 / Newman, License: Apache, npm: newman) by Prakhar Srivastav is a command-line collection runner for Postman, the HTTP client for Chrome.

Newman allows you to easily run a collection, like this:

newman -u -e devenvironment.json

In this example, -e is used to supply a JSON file that has configuration options for Postman’s environment. Newman’s readme has more examples and documentation.


selenium-test-runner (GitHub: tkambler / selenium-runner, License: MIT) by Tim Ambler is a library for writing Selenium tests in a blocking style. It uses node-fibers so you can avoid promises and chained expressions.



ncc, or node-crome-canvas, (GitHub: indus / ncc, License: MIT, npm: ncc) by Stefan Keim, uses the Chrome remote debugging protocol to build a bridge to the native HTMlCanvasElement and its 2d-Context. That means you can send drawing operations from the server to Chrome.

Here’s an example:

var ncc = require('ncc')

var canvas = ncc();

canvas.width = canvas.height = 256;

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'slateGray';
ctx.fillRect(28, 28, 200, 200)();

Wordchain: An AngularJS/Firebase Word Game

13 May 2014 | By Alex Young | Comments | Tags games firebase angular

Wordchain (GitHub: sonnylazuardi / wordchain, License: MIT) by Sonny Lazuardi is a multiplayer word game made with Firebase, AngularJS, the Google Dictionary API, and the Wikitionary API. It allows you to sign in with Facebook, and complete words in a crossword-like manner.

The code is all modular, dependency-injected Angular classes, so it’s fairly easy to see how it fits together. The main game logic is in js/controllers.js. Here’s the dictionary API search:

$ = function() {
  $.get(''+$scope.word, function(data) {
    $scope.definitions =[0].dictionary.definitionData;
  }, 'jsonp');

The readme has some details on running it locally, once you’ve got set up with Firebase.

Share SSH Sessions with Nutty

12 May 2014 | By Alex Young | Comments | Tags ssh meteor apps
The Nutty SSH sharing service.

Nutty (GitHub: krishnasrinivas / nuttyapp, License: GPLv3) by Krishna Srinivas is a Meteor application that allows SSH sessions to be shared via a browser. A host connects to a server which can then be shared with other people. Krishna suggests that this could be useful for pair programming or support.

The Nutty server needs some configuration before you can run it yourself – you can set up Google authentication, and it needs Amazon S3 for uploading recordings to S3. If you want to use WebRTC then you can set up PeerJS as well.

It’s an interesting example of Meteor and HTML5 being used to provide a service that would be traditionally run as a system-level daemon.

WebGL D3 with PathGL

09 May 2014 | By Alex Young | Comments | Tags webgl graphics animation d3
A PathGL particle simulation.

“PatrickJS” sent in PathGL (GitHub: adnan-wahab / pathgl, License: GPL, npm: pathgl) by Adnan Wahab. It’s a library for data visualisation with D3.js that allows you to do cool things with WebGL and particles.

The particle physics example looks like this:

var particles = pathgl.sim.particles(1e5);'canvas').selectAll('circle')
    .attr('r', function (d,i) { return d.z })
    .attr('cx', function (d,i) { return d.x })
    .attr('cy', function (d,i) { return d.y })
    .shader({ stroke: 'texel(pos.xy).xzwy' });'canvas')
  .on('click', particles.reverse);

As you can see, PathGL uses the familiar D3 chained API with an additional shader method that adds texels.

There are other GL-specific methods as well, like uniform, texture, and pipe. These are documented in the API reference.

If you’re already used to D3 but don’t know much about WebGL, then you should take a look at the PathGL documentation for SVG vs. WebGL. It explains how the scenegraph relates to SVG. There’s also a page on GPGPU, a technique for offloading heavy computation to the graphics card.

Declarative Animations with AniJS

08 May 2014 | By Alex Young | Comments | Tags css animation html

AniJS (GitHub: anijs / anijs, License: MIT) by Dariel Noel Vila Plagado is a declarative library for CSS animations. There’s a cool example that illustrates the sentence definition API, where the API calls are broken up into a form with separate fields for “if, on, do, to”:


The actual markup uses data attributes to define the animation behaviour: data-anijs="if: click, on: footer, do: swing".

The generalised format for this is explained using a simple text diagram in the wiki:

Declaration - Sentence 1; ... ; Sentence n
Sentence    - Definition, ... , Definition n
Definition  - if | on | do | to | before | after | helper

You can also create animations in JavaScript with AniJS.createAnimation.

The project’s wiki has lots of documentation already, with details on how to write before and after functions, run animations repeatedly, and write animations entirely with JavaScript. Parts of the documentation are in Spanish, but there’s enough English in the code examples and comments that I was able to understand it.

Node Roundup: 0.10.28, 0.11.13, CSRF Vulnerability in Express, Generators in Node, Wolfpack

07 May 2014 | By Alex Young | Comments | Tags node modules npm generators testing

Node 0.10.28, 0.11.13

Node has been updated to 0.10.28 and 0.11.13.

Version 0.10.28 was a quick update to the earlier 0.10.27 release, which updates C++ dependencies (openssl, libuv) as well as several core modules. One important change was the update of openssl to 1.0.1g.

CSRF Vulnerability in Express

Connect and Express have a vulnerability in the CSRF middleware component that means you can bypass it by making a GET request with a method override parameter:

Connect’s methodOverride middleware allows an HTTP request to override the HTTP verb with the value of the method post parameter or with the x-http-method-override header. As the declaration order of middlewares determines the execution stack in Connect, it is possible to abuse this functionality in order to bypass the standard Connect’s anti-CSRF protection.

Connect’s CSRF middleware does not check CSRF tokens in case of idempotent verbs (GET/HEAD/OPTIONS, see csurf/index.js). As a result, it is possible to bypass the security control by sending a GET request with a POST MethodOverride header or parameter.

Read more at NibbleSecurity.

Generators in Node

Generators in Node.js: Common Misconceptions and Three Good Use Cases is a post by Marc Harter that explains how generators work from a Node developer’s perspective.

Generators are function executions that can be suspended and resumed at a later point; a lightweight coroutine. This behavior happens using special generator functions (noted by function* syntax) and a couple of new keywords (yield and yield*) which are only used in the context of a generator


Wolfpack (GitHub: fdvj / wolfpack, License: MIT, npm: wolfpack) by Fernando De Vega is a SailsJS model testing library that uses SinonJS to mock the database and spy on models. That means you don’t need a real database to run unit tests.

If you have Backbone testing backgrounds, this will be familiar to you. When testing a backbone model or collection, you instantiate it and provide mock data to test the methods. Rarely do you need your model or collection to communicate with the server to provide the results. That’s because you want to test your model or collection, not how or if backbone is doing what it is supposed to do.