verb: A CAD Library for the Web

26 Sep 2014 | By Alex Young | Comments | Tags webgl graphics libraries modules

Peter Boyer shared two modules related to 3D graphics: Flood, a visual programming language, and verb, a library for working with NURBS surfaces.

Flood (GitHub: pboyer / flood, License: MIT) behaves a bit like a 3D modelling application. It uses a Scheme interpreter that’s written with JavaScript, with immutable data and first order functions.

The beta application allows you to sign in with a Flood account, Google+, or Facebook. You can add nodes that perform arithmetical operations, shapes, and even functions.


It’s built with Grunt and Bower, and uses libraries like three.js and Bootstrap.

Peter’s other project is verb (GitHub: pboyer / verb, License: MIT), a library for creating and manipulating NURBS surfaces. It works with browsers and Node and supports advanced tools like derivative evaluation, adaptive tessellation, and intersection.

The examples include things like arcs, Béziers curves, and various extrusions. You can rotate the examples if you click and drag.

NURBS are used in CAD, I don’t think they’re particularly popular for game graphics, so presumably Peter intends to use this with the Flood project.

PrototypeJungle, Slick, Cash

25 Sep 2014 | By Alex Young | Comments | Tags modules libraries browser svg


PrototypeJungle (GitHub: chrisGoad / prototypejungle, License: MIT) by Chris Goad is a tree-based object model and inspector. The inspector makes all of the underlying data structures visible, so you can explore and manipulate it.


For example, this is a bar chart, displayed with SVG. You can drill down into each bar and edit things like the bar height, colour, stroke, and so on.

Elements of the model can be serialized and saved in files, and represent things of various complexities, from simple infographic marks such as bars or bubbles, to axes or legends, to complete charts.

Often, an element serves as a prototype (in the general sense). For example, consider a prototypical bubble or bar which is instantiated once for each data point. When an instance of an element is wanted, a special variety of deep copy is made which inherits as appropriate from the original using JavaScript’s prototype formalism. Subsequent adjustments to the original will be inherited by all of the instances, at least in those aspects that have not been overriden.

Chris says it’s at an early stage, but I think it’s a pragmatic look at data visualisation that readers might find interesting.

Slick, Cash

Ken Wheeler sent in some client-side projects that he’s been working on. One is Slick (GitHub: kenwheeler / slick, License: MIT), a carousel that supports a huge amount of things: CSS3 animations when available, touch and mouse gestures, infinite loop, autoplay, adaptive height, lazy loading, fade effects, and it’s responsive as well.

It has an API so you can dynamically add and remove slides. It depends on jQuery 1.7+.

Ken’s other project is cash, a jQuery alternative. It supports lots of methods from jQuery’s API, and is written using separate modules so the source is quite easy to follow. The build system is Gulp. You might find it interesting if you like using or writing small libraries that don’t depend on jQuery and want to see how DOM stuff works without legacy cruft.

Node Roundup: npm 2.0, nvm for Windows, xtpl

24 Sep 2014 | By Alex Young | Comments | Tags modules libraries node npm windows templating

npm 2.0

npm 2.0 has been released, and the announcement post has lots of details on the fixes it includes and the project’s evolving release process. One major change is run-script now accepts arguments:

In npm@2.0.0, Ben changed npm run-script to allow you to pass arguments into scripts. That’s a breaking change. It’s as simple as that. Think of npm 2 as a step on the road towards getting npm right with semver. (There will be more. npm 3 will be out before the end of the year.)

The npm blog also has a post about multi-stage installs:

Multi-stage installs will touch and improve all of the actions npm takes relating to dependencies and mutating your node_modules directory. This affects install, uninstall, dedupe, shrinkwrap and, obviously, dependencies (including optionalDependencies, peerDependencies, bundledDependencies and devDependencies).

This post mentions that npm should be getting progress bars soon, and changes that bring it closer to supporting transactional installation.

nvm for Windows

Apparently, most Node version managers for Windows use batch files, so Corey Butler decided to try a different approach:

This version of nvm has no dependency on node. It’s written in Go, which is a much more structured approach than hacking around a limited .bat file. It does not rely on having an existing node installation. Plus, should the need arise, Go offers potential for creating a Mac/Linux version on the same code base with a substantially easier migration path than converting a bunch of batch to shell logic.

You can get the source from GitHub at coreybutler / nvm, and he’s got binary releases as well.

Corey also sent something called Fenix Web Server (GitHub: coreybutler / fenix, License: GPL), which is a static desktop web server powered by node-webkit:

You can quickly fire up/kill web servers through a GUI or the command line. It has push-button sharing capabilities (localtunnel). There’s also a visual webhook receiver for viewing incoming requests, which also leverages localtunnel.

I like the idea of being able to easily create a static server and then share content with a tunnel.


Yiming He sent in xtpl (GitHub: kissyteam / xtpl, License: MIT, npm: xtpl), an Express/Koa wrapper for eXtensible Template Engine. This template language is similar to others like ejs, but also allows you to add your own synchronous or asynchronous commands.

You can actually add commands to the template language, and they can be inline, block, and asynchronous. Here’s an example:

XTemplate.addCommand('xInline', function(scope, option, buffer) {
  buffer = buffer.async(function(newBuffer) {
    setTimeout(function() {
      newBuffer.write(option.params[0] + 1).end();

  return buffer;

The API documentation has more examples, and xtpl’s readme has some Koa samples as well.

Automatically Start Development Servers with Katon

23 Sep 2014 | By Alex Young | Comments | Tags modules libraries node

Katon (GitHub: typicode / katon, License: MIT, npm: katon) by Typicode is a tool for managing development servers. You can use it with client-side projects, Node applications, and even other server-side technologies.

To use it, npm install -g katon and then run sudo katon install && katon start. This sets up the daemon that will monitor your development servers.

Then all you need to do is navigate to one of your projects and tell Katon how it starts. For example, katon add 'npm start', or katon add 'grunt server'.

The project is inspired by Pow and actually started life as a third-party tool for Pow.

Once you’ve set up a project you can get to it using a .ka subdomain. Pow uses .dev, but the author of Katon switched to .ka because .dev is a proposed TLD.

Here’s Katon running with Express:

Katon, Express

And Typicode sent a screenshot of Rails as well:

Katon, Express

Katon will appeal to those of you that switch between projects regularly. It’s also useful if you run web applications that depend on several microservices that you want to run locally.

On a related note, I often use localtunnel for sharing in-development work with people who are outside my network.

fake-identity, Leaflet.FreeDraw

22 Sep 2014 | By Alex Young | Comments | Tags modules libraries testing graphics maps


fake-identity (GitHub: travishorn / fake-identity, License: MIT, npm: fake-identity) by Travis Horn is a library for generating fake identities. You can use Identity.generate to create a single fake object, or Identity.generate(n) to get an array of n objects.

Here’s an example of the output:

  firstName: "Amelia",
  lastName: "Wright",
  emailAddress: "",
  phoneNumber: "(555) 555-0155",
  street: "7327 Central Avenue",
  city: "Oxford",
  state: "TX",
  zipCode: "75045",
  dateOfBirth: Fri Jul 20 1962 00:00:00,
  sex: "female",
  company: "Contoso Pharmaceuticals",
  department: "Legal"

I find I have to do this quite often for testing. I usually use Faker to make users – in fact, I had to do this very task today! I think fake-identity would have made my job easier in this case, because the schema I’m using is similar.



Leaflet.FreeDraw (GitHub: Wildhoney / Leaflet.FreeDraw, License: MIT) by Adam Timberlake is a library for Leaflet that adds support for creating polygons.

Use Leaflet.draw for drawing pre-defined polygons and linear shapes – Leaflet.FreeDraw’s selling point is that it allows you to freely draw a polygon like Zoopla. Hulls are also supported to normalise polygons when users draw an insane polygon – currently Leaflet.FreeDraw supports Brian Barnett’s Graham Scan module and my adaptation of the concave hull algorithm.

The readme is pretty solid, and explains how to handle polygon mutation, intersection, and elbow creation. The demo allows you to draw and edit polygons, with planes flying over the map.

I actually saw a similar polygon drawing UI widget on Ikea’s solar panel quote page today. You can draw a polygon over your house so it can use the shape to estimate how well solar panels should work for your property.

SVG Circus, Cheers

18 Sep 2014 | By Alex Young | Comments | Tags svg animation scraping dom

SVG Circus

SVG Circus

SVG Circus by Alex Kaul is a site for generating SVG animations. You can use it to make spinners for loading indicators, or other animations if you get creative.

It’s built with AngularJS and Bootstrap, and the Bootstrap customisation looks pretty cool. Animations can be exported as XML with embedded JavaScript for animation.


Yesterday I mentioned ineed, a scraper API based around a streaming tokenizer. Most of my Node scraping work has been written with Cheerio, which is a small jQuery-inspired API for Node. Cheers (GitHub: fallanic / cheers, License: MIT, npm: cheers) by Fabien Allanic is a Cheerio-based scraper library:

The motivation behind this package is to provide a simple cheerio-based scraping tool, able to divide a website into blocks, and transform each block into a JSON object using CSS selectors.

It works by using configuration objects that describe metadata based on CSS selectors, so it may help you to be more pragmatic about how you scrape documents.

Hello.js, ineed

18 Sep 2014 | By Alex Young | Comments | Tags libraries apis parsing


Andrew Dodson sent in hello.js (GitHub: MrSwitch / hello.js, License: MIT, npm: hellojs), a client-side API wrapper for OAuth2-based REST APIs. It presents a unified API that normalizes paths and responses for Google Data Services, Facebook Graph and Windows Live Connect.

One of the advantages of hello.js is it’s modular. There are hello.js modules for Dropbox, LinkedIn, SoundCloud, and Yahoo.

The module API allows you to define things like jsonp functions, so it should be flexible enough to handle a lot of modern services.

HelloJS has been on Hacker News, with a discussion on security, and endorsements from users:

HelloJS is great. I’ve used it in my last project. It just works. It’s well tested, and well documented. There’s very little option twiddling required. It just worked seamlessly when I was trying to setup Twitter, Google, LinkedIn and Facebook OAuth logins.


Ivan Nikulin wrote in to say parse5 has a new SAX-style HTML parser which powers the ineed project:

ineed allows you collect useful data from web pages using simple and nice API. Let’s collect images, hyperlinks, scripts and stylesheets from

var ineed = require('ineed');

  function (err, response, result) {

Internally, ineed uses streams of HTML tokens so it doesn’t have to spend time building and traversing a DOM tree. It seems like an ideal way to handle lots of otherwise awkward scraping tasks.

JavaScript for Automation in Yosemite

17 Sep 2014 | By Alex Young | Comments | Tags apple scripting

I seem to remember that I once wrote on DailyJS about how Apple should start using JavaScript instead of AppleScript, and the possibility of cross-platform scripting with JavaScript. It looks like this is finally happening in Yosemite, highlighted in Apple’s JavaScript for Automation documentation (and HN).

What does it look like? Here’s a sample for Mail:

var Mail = Application('Mail');

var message = Mail.OutgoingMessage({
  subject: 'Hello world',
  visible: true


It goes further, though, with the Objective-C bridge:

JavaScript for Automation has a built-in Objective-C bridge that offers powerful utility such as accessing the file system and building Cocoa applications.

The primary access points for the Objective-C bridge are the global properties ObjC and $.

There are mappings for Objective-C methods and data types, and you can load frameworks that are built with bridge support using ObjC.import.

This bridge layer should make it possible to build native Cocoa applications that are partly drive by JavaScript, allowing you to potentially centralise some business logic into JavaScript that can run in Apple’s environment or the equivalent for .NET.

This is made possible thanks to the design of the Open Scripting Architecture, and JavaScript is the second language after AppleScript that has been added.

On the commercial project I work on our Mac team recently tested JavaScript support for our scripting API. It’s definitely going to make it easier for me to automate things!

Tutorial: Build a Game with Phaser

16 Sep 2014 | By Thomas Palef | Comments | Tags games tutorials phaser
This is a guest post written by Thomas Palef, the author of Discover Phaser and the 12 Games in 12 Weeks challenge.


In this tutorial I will show you how to use Phaser to build a really simple retro breakout clone. Phaser is a simple yet powerful JavaScript framework for making HTML5 games.

Game screenshot

You can play the finished game we are going to make here.

Set Up

You should download this empty template that I made for this tutorial. In it you will find:

  • phaser.min.js, the Phaser framework v2.0.5
  • index.html, where the game will be displayed
  • main.js, a file where we will write all our code
  • assets/, a directory with 3 images (ball.png, paddle.png and brick.png)

You should also download the code editor Brackets, that will make it easier for starting a web server during development.

Empty Game

Let’s start by creating an empty Phaser project. Add this code inside the main.js file:

// Define our main state
var main = {
  preload: function() {
    // This function will be executed at the beginning     
        // That's where we load the game's assets  

  create: function() { 
    // This function is called after the preload function     
        // Here we set up the game, display sprites, etc. 

  update: function() {
    // This function is called 60 times per second    
        // It contains the game's logic     

// Initialize Phaser, and start our 'main' state 
var game = new Phaser.Game(400, 450, Phaser.AUTO, 'gameDiv');
game.state.add('main', main);

This will create a 400x300 black rectangle on the screen. All we have left to do is to fill the preload, create, and update functions to build our breakout clone.

Add the Paddle

Let’s focus on creating the paddle first. We load it in the preload function, initialize it in the create function, and make it move in the update function:

preload: function() {
  // Load the paddle image
  game.load.image('paddle', 'assets/paddle.png');

create: function() { 
  // Initialize the physics system of the game

  // Create a variable to handle the arrow keys
  this.cursor = game.input.keyboard.createCursorKeys();

  // Create the paddle at the bottom of the screen
  this.paddle = game.add.sprite(200, 400, 'paddle');

  // Enable the physics system for the paddle

  // Make sure the paddle won't move when hit by the ball
  this.paddle.body.immovable = true;

update: function() {
  // If the right arrow is pressed, move the paddle to the right
  if (this.cursor.right.isDown) 
    this.paddle.body.velocity.x = 350;

  // If the left arrow if pressed, move left
  else if (this.cursor.left.isDown) 
    this.paddle.body.velocity.x = -350;

  // If no arrow is pressed, stop moving
    this.paddle.body.velocity.x = 0;  

Test the Game

Now it’s time to test our game. Open the whole directory in the Brackets editor, select the index.html file, and click on the small bolt icon in the top right corner. It will launch a live preview of the game, where you should have a paddle that you can move with the arrow keys.

If you don’t want to use Brackets, then you’ll have to use a local web server to test the game.

Add the Bricks

Now let’s add a dozen bricks to the game.

Start by adding this to the preload function:

// Load the brick sprite
game.load.image('brick', 'assets/brick.png');

Then add this to the create function:

// Create a group that will contain all the bricks
this.bricks =;
this.bricks.enableBody = true;

// Create the 16 bricks
for (var i = 0; i < 5; i++)
  for (var j = 0; j < 5; j++)
    game.add.sprite(55+i*60, 55+j*35, 'brick', 0, this.bricks);

// Make sure that the bricks won't move
this.bricks.setAll('body.immovable', true);

Add the Ball

Now that we have a paddle and some bricks, it’s time to add the ball.

Add this in the preload function:

// Load the ball sprite
game.load.image('ball', 'assets/ball.png');

And add this in the create function to initialize the ball:

// Create the ball with physics
this.ball = game.add.sprite(200, 300, 'ball');

// Add velocity to the ball
this.ball.body.velocity.x = 200; 
this.ball.body.velocity.y = 200;

// Make the ball bouncy 
this.ball.body.collideWorldBounds = true;
this.ball.body.bounce.x = 1; 
this.ball.body.bounce.y = 1;

Handle Collisions

The only thing left to do is handle collisions. And it turns out this is super simple with Phaser – just add these 2 lines of code to the update function:

// Make the paddle and the ball collide
game.physics.arcade.collide(this.paddle, this.ball);

// Call the 'hit' function when the ball hit a brick
game.physics.arcade.collide(this.ball, this.bricks, this.hit, null, this);

Next, create the new hit function, just below the update function:

hit: function(ball, brick) {
  // When the ball hits a brick, kill the brick

And we are done! you can now play a really simple breakout clone made in less than 50 lines of JavaScript.


The game is working, but it’s a little bit boring. With Phaser it’s really simple to add sounds effects, animations, transitions, and so on to make a game better.

If you want to learn more about Phaser, I can recommend you to check out the first and only Phaser ebook currently available: Discover Phaser.

Phaser cover

Melchior.js, ng-admin

15 Sep 2014 | By Alex Young | Comments | Tags libraries modules angularjs ui


Melchior.js (GitHub: voronianski / melchior.js, License: MIT, npm: melchiorjs) by Dmitri Voronianski is an implementation of the Chainable Module Definition concept introduced by John Wu.

The idea behind chainable modules solves several nasty AMD patterns like long lines of declaring dependencies and provides simplicity and readability with its’ visual-friendly and clean syntax.

As CommonJS is more good for non-browser environments, chaining modules with requires fit perfectly for in-browser use cases.

Here’s an example of the API:

// create module

// define dependencies
.require('dependencyDuo', 'duo')

// define module body
.body(function () {
  // `dependencyUno` is available here!

  // aliased `dependencyDuo` is available as `duo`!

  // return methods for other modules
  return {
    method: function () { ... },
    anotherMethod: function () { ... }

The readme has more examples including one for AngularJS. This API does seem more idiomatic than most module loaders, so it’ll be interesting to see if it catches on.


François Zaninotto sent in ng-admin (GitHub: marmelab / ng-admin, License: MIT), a cool project that adds an administration interface to RESTful CRUD APIs.

There’s a demo on Amazon and documentation that shows how to configure ng-admin to use your application’s entities. It copes with field mappings, and references. References can be 1-N, N-1, and many to many.

François suggests that ng-admin is useful because if you’re creating a lot of projects with different backends (MongoDB, MySQL, Node, Python) you can still add a platform-agnostic administration UI.

The same authors also made gremlins.js.

Party Mode, Bézier Clock

12 Sep 2014 | By Alex Young | Comments | Tags d3 audio

Party Mode

Party Mode

Party Mode (GitHub: preziotte / party-mode, License: MIT) by Mathew Preziotte is a music visualiser with a slick UI and lots options. If you press m it’ll show a menu for each visual effect, and there’s also a keyboard icon near the bottom of the screen that documents each shortcut.

The author built it with d3.js and the Web Audio API.

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There’s a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I’m updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I’m using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently – it was mostly trial and error to get some stuff I liked looking at.

Bézier Clock

Jack Frigaard sent in his Bézier Clock, which got lots of attention on Hacker News this week. It’s made with Processing.js, which is loads of fun to play with, and you can click it to visualise the curve splines and poitns.

There are keyboard options as well:

  • space: Toggle continual animation
  • s: Show intermediate figures and the standard ones
  • a: Cycle through linear, quadratic, cubic and sinusoidal easing

BiMap, jQuery breakpoint

11 Sep 2014 | By Alex Young | Comments | Tags jquery responsive data modules libraries node


BiMap (GitHub: alethes / bimap, License: MIT, npm: bimap) by James Daab is a bidirectional map implementation. This is a data structure that allows you to query for values by keys and keys by values:

  a: {
    b: 1,
    c: {
      d: 2
bimap.key('a.b'); // => 1
bimap.val(2); // => "a.c.d"

jQuery breakpoint

jQuery breakpoint (GitHub: joshbambrick / breakpoint, License: MIT) by Joshua Bambrick is a plugin for tracking page resizes, and is ideal for when you need JavaScript to trigger in a responsive design.

You can attach listeners with $.breakpoint.on, and an array is accepted so you can respond to different preset device sizes. There’s also $ for removing listeners, and $.breakpoint.changeBreakpoints for changing the globally recognised device sizes.

Node Roundup:, copromise, Apper

10 Sep 2014 | By Alex Young | Comments | Tags modules node libraries express frameworks promises async (GitHub: krillr /, License: Apache 2.0, npm: by Aaron Krill is an RPC module that uses promises. You can create a server like this:

var server = new PromiseIO({
  someFunc: function(input) {
    return 'I got: ' + input;


Then the client can call someFunc by connecting to the server:

var client = new PromiseIO();

client.connect('http://localhost:3000').then(function(remote) {
  return remote.someFunc('my variable!');
}).then(function(returnVal) {
  return console.log(returnVal);
}).catch(function(err) {
  return console.log(err);

Internally, q is used for the promise implementation.


copromise (GitHub: deanlandolt / copromise, License: MIT, npm: copromise) by Dean Landolt is a bit like co, but it automatically lifts values that aren’t promises, so you can yield anything.

A copromise represents the eventual value of a coroutine. A coroutine is a generator function where the yield keyword is used to suspend execution to wait on a future value, allowing linear control flow logic for asynchronous code.

Dean announced it on the nodejs list, including some examples and a comparison with the co module.


Apper (GitHub: asyncanup / apper, License: MIT, npm: apper) by Anup Bishnoi is a real-time framework for single page applications. The idea behind it is to have strong conventions for practices that suit single page apps, including transparent minification and bundling.

It wraps around Express, so route definitions look like a typical Express project, but Apper also has specific places for things like middleware and application settings.

If you’re new to Express then you might like working with the conventions Apper uses, and it will at least push you away from putting everything in a monolithic app.js file.

Shout: An IRC Client for the Web

09 Sep 2014 | By Alex Young | Comments | Tags irc apps node

Shout IRC

Shout (GitHub: erming / shout, License: MIT, npm: shout) by Mattias Erming is a web-based IRC client. The UI is very impressive, it feels lightweight and fast, but still familiar to die-hard IRC users like me.

I still use an IRC client on a server with tmux, and I probably always will, but there are times when I get forced into using web-based chat services. This is usually for work, and I pretty much never like them. The thing that’s good about Shout is you can run it on your own server, so you could install an IRC daemon on a server somewhere then set it up to connect to it automatically.

This means your colleagues that hate console software can use a friendly web interface, while you can hang out in the shell like a civilized person. There are commercial services that offer IRC backends and friendly web frontends (Gitter and Grove are good examples), but you may like to host your own or hack Shout in some way.

Shout is built using a simple server based on Connect and Socket.IO that maps the client UI to a real IRC server. It has a Grunt build script, and treats IRC commands like plugins so it should be easy to add new ones.

The client-side code uses Handlebars for the templates, and the CSS looks easy to modify. There’s a folder called themes but the example CSS file is currently empty, so I’m not sure how the authors intend that to be used.

The underlying IRC client implementation is slate-irc, which I seem to remember TJ Holowaychuk wrote for a cool Node desktop app. Mattias Erming is now a maintainer, and he’s been committing work to the slate-irc project on GitHub.

Overall Shout looks like it has a lot of potential, and I’ve been impressed by what I’ve seen so far.

From AngularJS to React, Math.js 1.0

08 Sep 2014 | By Alex Young | Comments | Tags angularjs maths react

From AngularJS to React: The Isomorphic Way

Gergely Nemeth sent in From AngularJS to React: the isomorphic way, which outlines how his company used React, Flux, and Koa to reuse code in the browser and on the server. The server-side code is capable of generating a Flux-React application instance and then rendering views.

The browser loads the same code (built with Browserify/Webpack) and bootstraps the application from the shared state. (shared by the server and injected into the global/window scope). This means that our application can continue from the point where the server has finished.

It seems like a lot of people struggle to share code this way, so it’s interesting to see how the author’s Angular experiences compared with React.

Math.js 1.0

Jos de Jong sent us an email to say Math.js has been updated to version 1.0. The project now has more tests and BigNumber support.

There are more examples so you can see cool features like chained operators and function transforms.

You can create BigNumbers with strings, like this:

  number: 'bignumber',
  precision: 20 // Number of significant digits for BigNumbers

math.bignumber('1.2e+500');  // BigNumber, 1.2e+500

Jos is working on some new features, including derived units (like km/h, kg*m/s^2), and performance improvements. He also wanted to thank the JavaScript community for helping with the project:

I want to thank the community for all valuable and constructive feedback and discussions. Without them, I don’t think we would have had an API so elegant and consistent as it is now. I’m looking forward to the coming period, implementing more great features, making math.js better and better.

Cross-Storage: Share Local Data Across Domains

05 Sep 2014 | By Alex Young | Comments | Tags localStorage es6


The localStorage API has some limitations, which you may need to work around for larger applications. The new cross-storage (License: Apache 2.0, npm: cross-storage, Bower: cross-storage) library from Daniel St. Jules at Zendesk adds support for cross-domain localStorage with permissions. It even has an ES6 Promise API.

It uses two components: hubs and clients. Hubs can set permissions based on on domain, and this is enforced using the same-origin policy. The available types of access are read, write, and delete (get, set, del).

  { origin: /\$/, allow: ['get'] },
  { origin: /:(www\.)?$/, allow: ['get', 'set', 'del'] }

Clients can then access the hub like this:

var storage = new CrossStorageClient('');

storage.onConnect().then(function() {
  // Set a key with a TTL of 90 seconds
  return storage.set('newKey', 'foobar', 90000);
}).then(function() {
  return storage.get('existingKey', 'newKey');
}).then(function(res) {
  console.log(res.length); // 2
}).catch(function(err) {
  // Handle error

Notice that the onConnect method returns a promise which is fulfilled when a connection has been established with the hub. You could also call storage.close to end the connection, which is actually implemented with an iframe.

Daniel recommends using the es6-promise polyfill for older browsers.

The project uses Gulp to build the client-side code, and comes with tests that use zuul.

React Components

04 Sep 2014 | By Alex Young | Comments | Tags modules node libraries

React Components

In the Node community, frontend package managers are regarded with suspicion. I’ve worked on projects that manage client-side dependencies with both Bower and npm, and although Bower does an admirable job I often feel like I should be using npm instead. That’s mainly because I always have to add a step where client-side files are preprocessed and moved from where Bower downloads them, so it’s not really much different to accessing the same files in node_modules.

React Components (GitHub: vaffel / react-components, License: MIT) from VaffelNinja is a database of React components based on data on npm. It works by assuming React modules are tagged with react-component.

It has a few UI touches that makes it friendly and useful:

  • Searching is real time
  • The URL is dynamically updated with the search term
  • You can copy and paste the URL with the search term
  • Modules render the readme and the most useful links (GitHub, homepage)

This project is a great example of how npm can be completely appropriate for client-side modules, and also highlights how many interesting React components are being created right now.

Node Roundup: DataCollection.js, supererror, Readability

03 Sep 2014 | By Alex Young | Comments | Tags modules node libraries


DataCollection.js (GitHub: thestorefront / DataCollection.js, License: MIT, npm: data-collection) from Storefront is a library for querying data. You can use it in browsers or Node. The example in the documentation uses an array of objects, then filters them based on key/values, and some sql-like operators including max and distinct.

The authors claim it’s fast, and although I can’t confirm this it does include a feature for defining indexes for specific keys. It’s well documented and has 95.5% test coverage.


If you’ve got a project where you’re logging errors with console.error, but want to get more data like line numbers without modifying code, then you could try supererror (GitHub: nebulade/supererror, License: MIT, npm: supererror) by Johannes Zellner.

It changes console.error to include colours, line number, and stacks for Error objects.


Readability (GitHub: luin / node-readability, License: Apache 2.0, npm: node-readability) by Zihua Li turns pages into simplified Arc90-style HTML. It uses jsdom, supports more character encodings like GB2312, and converts relative URLs so images still work.

I seem to remember having issues with encodings and relative images with other Readability-derived projects, so this seems ideal.

Backbone setMatch, Smalleditor

02 Sep 2014 | By Alex Young | Comments | Tags components ui libraries angularjs

Backbone setMatch

Backbone setMatch (GitHub: joshbambrick / setMatch, License: MIT) by Joshua Bambrick allows you to match models in a collection based on attributes other than the id. This is applied whenever set is called on a collection, both explicitly and internally by Backbone.

The setMatch property can be used with arrays, so you can pass a set of names to match. If you pass it an object you can set options, including the id option which controls what happens when set is called. When it’s set to inherit and incoming models have an id, then match models in the collection will inherit that id, but using retain will keep the original value instead.


Smalleditor (GitHub: jdkanani / smalleditor, License: MIT, Bower: smalleditor) by Jaynti Kanani is a WYSIWYG editor inspired by Medium. It requires AngularJS, and features revision tracking.

Deltas can be applied to revisions to get the next revision:

angular.module('smalleditorDemo', ['ngRoute', 'smalleditor'])
.controller('EditorController', ['$scope', function($scope) {
  $scope.$watch('editorApi', function(editor) {
    // Get current data model
    var baseDataModel = editor.dataModel();

    // After editing for a while get new data model
    var currentDataModel = editor.dataModel();

    // Compute delta between baseDataModel and currentDataModel
    var delta = editor.computeDelta(baseDataModel, currentDataModel);

    // Apply that delta to any revision to get next revision
    editor.applyDelta(nRevision, nDelta);

The author cites MediumEditor, which is a similar project that is more focused on the UI and less on the revision tracking aspect.

Yet another alternative is the Pen Editor – the nice thing about Pen is it supports Markdown.

Linked Lists with Symbols

01 Sep 2014 | By Alex Young | Comments | Tags node symbol es6

LiLL (GitHub: BlackDice / lill, License: MIT, npm: lill) is a linked list implementation that uses the ECMAScript 6 Symbol API. Because Symbol isn’t widely implemented, the author has used es6-symbol.

The motivation behind using Symbol is to provide a stateless public API with a low memory footprint. The ES6 wiki describes one of the use cases for Symbol as lightweight information hiding, so a linked list seems like a good example. In LiLL, information about neighbours is stored on the actual items, so you can hop from item to item without creating an entirely new data structure.

LiLL is attached to an owner object using Lill.attach, then you can call Lill.getNext(owner, item) or getPrevious. There are also methods for getting the head and tail.

To build and iterate over a list, you could do this:

var Lill = require('lill');
var scores = {};
Lill.add(scores, { name: 'AAA', score: 1000 });
Lill.add(scores, { name: 'ZZZ', score: 900 });

var item = Lill.getHead(scores);

while (item) {
  console.log('High score:',, item.score);
  item = Lill.getNext(scores, item);

If you run this in Node’s REPL you’ll see entries with @@lill related data added to the owner object (scores), which describe the linked list. When Symbol is available without a shim then this will become symbols instead.