The JavaScript blog.


libraries graphics webgl translations japanese jpeg

Z3d, is-progressive, Japanese Translations, textlint

Posted on .



Z3d (GitHub: NathanEpstein/Z3d, License: MIT, Bower: z3d) by Nathan Epstein is a library that generates 3D plots. It gives you a Three.js scene, so you can further manipulate the graph with the Three.js API.

One of the useful things about Z3d is it has sensible built-in defaults, so you can throw data at it and get something cool out. The basic example is just plot3d(x, y, z), where the arguments are arrays of numbers to plot in 3D space.

The plot3d function also accepts a configuration argument, which allows things like colours and labels to be defined.


If you're running through a checklist of website performance improvements and see image optimisation, then you might want some automated tools to do the job for you. Sindre Sorhus suggests using progressive JPEG images, and sent in a tool that can check if a JPEG is progressive or not.

It's called is-progressive (GitHub: is-progressive, License: MIT, npm: is-progressive), and can be used as a Node module or on the command-line. The command-line use is either is-progressive filename or you can redirect data into it.

The Node module supports streams and has a synchronous API. That means you can do isProgressive.fileSync, or pipe HTTP requests through it with res.pipe(isProgressive.stream(callback)).

DailyJS Japanese Translation and textlint

Hideharu Sakai wrote in to say he's been translating DailyJS into Japanese, here: panda.node.ws/?cat=19.

He also mentioned a nice project for linting text: textlint (License: MIT, npm: textlint). You can use it to check plain text and Markdown files for various rules which are customisable. The example ensures to-do lists are written a certain way.

You can use textlint as a command-line tool or a Node module, so you could put it into a build script to validate your project's documentation.

Many thanks to Hideharu!


libraries community dom mvc translations

Ractive.js, Japanese DailyJS Translations

Posted on .


Ryan McDonough sent in Ractive.js (GitHub: Rich-Harris/Ractive, License: MIT, Bower: ractive), a new alternative to libraries like AngularJS, created by developers at The Guardian. Are we still calling these libraries MVC, MV*, or something else?

Ractive.js is different. It solves some of the biggest headaches in web development - data binding, efficient DOM updates, event handling - and does so with almost no learning curve.

There's a nice and short example in the documentation. Given the following HTML fragment:

<p>Hello {{user}}! You have  
    <strong>{{messages.unread}} new messages</strong>.

Then the Ractive constructor can be used to populate data:

var ractive = new Ractive({  
  el: result,
  template: html,
  data: {
    user: 'Dave',
    messages: { total: 11, unread: 4 }

ractive.set('messages.unread', 5);  


Ractive.js constructs a parallel DOM representation which is aware of its dependencies on the values of user and messages.unread. When those values change, it knows exactly which parts of the real DOM need to be updated.

This could be the data-binding library with an idiomatic JavaScript API that we've been looking for. By focusing on the "data model" problem the project seems immediately easier to understand than some larger libraries, and the early adoption of Bower and Grunt means it should be straightforward to slot into your projects.

Japanese DailyJS Translations

Hideharu Sakai sent in his translation of my recent "Getting started with Nodebots" article: Nodebot を始めよう(著者:アレックス・ヤング). He said there's a lot of interest in Node and DailyJS from the Japanese developer community, so thanks for that!