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 user.name === '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 instagram.com 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(() => it.next(), 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 https://www.getpostman.com/collections/cb208e7e64056f5294e5 -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:

$scope.search = function() {
  $.get('https://www.googleapis.com/scribe/v1/research?key=AIzaSyDqVYORLCUXxSv7zneerIgC2UYMnxvPeqQ&dataset=dictionary&dictionaryLanguage=en&query='+$scope.word, function(data) {
    $scope.definitions = data.data[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);

    .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' });

  .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.

Browser Audio Encoding, Atom Open Source

06 May 2014 | By Alex Young | Comments | Tags audio encoding mp3 ogg editors atom


Joe Sullivan sent in vorbis.js (GitHub: itsjoesullivan/libvorbis.js, License: MIT), a project based on several others that produces Ogg Vorbis from PCM data. It uses Emscripten, and has an event-based API. There’s a full example in the readme, which demonstrates how to configure the necessary memory buffers and encoding options.

Joe has also made a project called iago that can stream Ogg using web workers.

If licensing issues don’t put you off, take a look at libmp3lame.js by Andreas Krennmair. Again, this project makes use of Emscripten to port parts of lame to JavaScript.

Atom is Open Source

Atom is now free and open source. The announcement includes the minor revelation that there are now over 800 Atom packages.

I’ve seen people on Twitter running the Linux version, but people are still dubious about Atom’s performance and the 2 MB file limit. Making it open source seems like a solid first step to creating sustained interest, but it has a Google Wave feel about it.

Private Bower

05 May 2014 | By Alex Young | Comments | Tags bower build-tools

Private bower

If you’ve ever wanted to set up a private Bower repository, private-bower (GitHub: Hacklone/private-bower, License: MIT, npm: private-bower) by Barna Tóth might be what you’re looking for.

You can install it with npm install -g private-bower, and then run it with private-bower. It accepts some command-line options to change what port it listens on, but all you really need to do is add some lines to your .bowerrc file:

{ "registry": "http://localhost:5678" }

That changes the repository Bower will use. Now whenever Bower attempts to fetch a package, it will check your private server.

private-bower itself will serve packages if they’ve been downloaded, otherwise it will fall over to the public repository. It’s built using Express, and the author has put the API methods in the readme so you can see how it works.

Cammy and n3-charts

02 May 2014 | By Alex Young | Comments | Tags animations angular d3
Cammy's demo.

Cammy (GitHub: lorem–ipsum / cammy, License: MIT) by Sébastien Fragnaud (“lorem–ipsum”) is an orthogonal projection camera built on AngularJS and D3.js. The demo is completely gorgeous, so I was compelled to waste a good 15 minutes playing with it. If you look at the source you can see how the Angular directives are used to hook up the UI controls with the renderer.

Sébastien also wrote n3-charts (GitHub: n3-charts / line-chart):

$scope.options = {
  axes: {
    x: {
      key: 'x',
      labelFunction: function(value) { return value; },
      type: 'linear',
      tooltipFormatter: function(x) { return x; }
    y: { type: 'linear' },
    y2: { type: 'linear' }
  series: [{
    y: 'value',
    color: 'steelblue',
    thickness: '2px',
    type: 'area',
    striped: true,
    label: 'Pouet'
  }, {
    y: 'otherValue',
    axis: 'y2',
    color: 'lightsteelblue'
  lineMode: 'linear',
  tension: 0.7


01 May 2014 | By Alex Young | Comments | Tags animations jquery
From the Velocity Playground teaser.

Julian Shapiro sent in Velocity.js (GitHub: julianshapiro / velocity, License: MIT), a performance-focused animation library that is an alternative to jQuery’s $.animate method. If you’re struggling with CSS animations and would prefer to use JavaScript, then Velocity may help. Judging by the project’s Playground teaser, it seems like it’s more ambitious than just supporting basic animations, however.

Basic animation works as you’d expect if you’ve used $.animate:

$('div').velocity({ top: 50 });

You can supply additional arguments:

$('div').velocity({ opacity: 1 }, { duration: 1000 });

Easing and queues are also supported:

  borderBottomWidth: ['2px', 'spring' ],
  width: '100px',
  height: '100px'
}, {
  easing: 'easeInSine'

The documentation has more examples. The source has some useful comments about how the project works, and why it’s fast:

JavaScript and jQuery are falsely conflated. JavaScript animation, which Velocity uses, is fast; it’s jQuery that’s slow. Although Velocity is a jQuery plugin, it uses its own animation stack that delivers its performance through two underlying design principles: 1) synchronize the DOM → tween stack to minimize layout thrashing, and 2) cache values to minimize the occurrence of DOM querying.

There’s also a post about Velocity on the David Walsh Blog, and the author is promising more features and tests by May 5th.

Node Roundup: Who's Hiring, Melkor, Isosurface

30 Apr 2014 | By Alex Young | Comments | Tags node modules npm jobs graphics es6 generators

npm: Who’s Hiring?

I noticed npm’s blog had a post about who’s hiring in the Node community. There’s a new Who’s Hiring page on npmjs.org, that lists Voxer, The Financial Times, Branding Brand, and Dash.


More people are getting interested in Koa.js now, so it’s good to start collecting example applications that use it. Ramesh Nair sent in Melkor (License: MIT), a wiki that uses Waigo which is built on Koa.js, and Git as the storage system.

You can see generators used right away in index.js:

exports.init = function*(folder, options) {
  debug('Folder: ' + folder);

  yield* waigo.init({
    appFolder: path.join(__dirname, 'src')

  var App = waigo.load('application');

  yield* App.start({
    postConfig: function(config) {

      config.middleware.push({ id: 'methodOverride' });

      debug('Port: ' + config.port);
      config.port = options.port;
      config.baseURL = 'http://localhost:' + config.port;

      config.staticResources.folder = '../public/build';

      config.wikiTitle = options.title;
      config.wikiFolder = folder;

  return App;

The controllers also make heavy use of yield, so things like form validation and template rendering have a synchronous feel.



Isosurface (GitHub: mikolalysenko / isosurface, License: MIT, npm: isosurface) by Mikola Lysenko is a set of isosurface polygonizer algorithms.

Here’s an example:

var isosurface = require('isosurface');

var mesh = isosurface.surfaceNets([64,64,64], function(x,y,z) {
  return x*x + y*y + z*z - 100;
}, [[-11,-11,-11], [11,11,11]]);

I found this module (and the impressive demo) while looking through Mikola’s graphics related modules on npmjs.org/~mikolalysenko.

Using jQuery UI with AMD

29 Apr 2014 | By Alex Young | Comments | Tags jqueryui jquery libraries amd

As of version 1.11 you can use AMD with jQuery UI. RequireJS will work, or any other AMD compatible loader.

That means you can do this:

require(['jquery-ui/autocomplete'], function(autocomplete) {
  autocomplete({ source: ['One', 'Two', 'Three'] }, '<input>')

Doesn’t that look a lot better than what we had before (script tags, monolithic $)? The old Autocomplete style would have used $(selector).autocomplete, which is low on syntax but high in coupling. Even though Autocomplete’s API is always going to be coupled to jQuery, I prefer the idea of being able to load it in a modular way, and to potentially be able to inject a different dependency.

The jQuery/jQuery UI stack is still more monolithic than some of the newer MVVM or component-based solutions, but this may help you use some AMD-based techniques with your existing jQuery UI projects.

Also, I know there’s always someone who wants to point out how great Dojo is, so here’s Dojo’s AMD post from 2011.


28 Apr 2014 | By Alex Young | Comments | Tags mobile libraries


GestureKit (GitHub: RoamTouch / gesturekit.js, License: Apache 2.0) by Guille Paz and RoamTouch is an SDK for creating and recognising gestures in mobile interfaces. There’s an open source client-side library that has an event-based API for responding to gestures.

Gestures can be recorded on a mobile device and then used on different platforms. The project’s homepage has examples for Android, iOS, and JavaScript.

GestureKit is backed by a service for storing metrics on gestures. Applications can work offline though, the underlying data is cached on startup.

Right now it seems like the server part of the project is closed source, but the FAQ states that part of the API will be opened, and they’re looking for contributors:

GestureKit has a Github repos for community pushes that you will be able to contribute. We are planning to open a part of the API, specially the actions performed with the gestures and a plugin interface to integrate new stuff to the service.

The thing I like about this project is the idea that you can draw shapes to trigger specific functionality. The example is a music app that uses two arrows to mean skip forward or back.