Kettle.js, Backbone.SuperModel, Mem.js

10 Feb 2014 | By Alex Young | Comments | Tags mvvm mvc backbone

Kettle.js

Kettle.js (GitHub: smelnikov / kettle, License: MIT) by Sergey Melnikov is an alternative approach to Backbone views that uses a declarative syntax to define elements, their bindings, and their associated events.

It supports two-way data binding, sub views, and can be extended to support custom Kettle elements.

Mem.js

Mem.js (GitHub: artyomtrityak / mem.js, License: MIT) by Artyom Trityak is a memory management library for Backbone. It allows you to save, retrieve, and destroy instances of Backbone classes:

var View = Backbone.View({});

// On set returns new stored function instance or object
var headerViewIns = Mem.set('headerView', View, { el: 'body' });

It can remove and recreate instances with Mem.reset, and remove outdated objects with Mem.manage.

Backbone.SuperModel

Backbone.SuperModel (GitHub: laoshanlung/backbone.supermodel, License: MIT, npm: backbone.supermodel) by Tan Nguyen is model class that offers support for nested collections. It supports dot notation for getters and setters, and an updated toJSON that reflects the nested structure. Relationships can be defined between models as well.

var wallet = {
  money: {
    amount: 4000,
    currency: 'euro'
  },
  name: 'Tan Nguyen'
};

var myStuff = new Backbone.Model();
myStuff.set('wallet', wallet);
myStuff.get('wallet').money.amount; // 4000

The project includes tests and benchmarks, and examples can be found in the readme.

HTML5 Game Per Week, Oboe.js

07 Feb 2014 | By Alex Young | Comments | Tags node modules games json

One HTML5 Game Per Week

Princess Quest

Thomas Palef sent in his project to create one HTML5 game a week. He’s created seven games so far, including Princess Quest, a vertical jumping game that uses Phaser.

He’s also posting short blog posts about how he makes the games.

Oboe.js

Oboe.js (GitHub: jimhigson / oboe.js, License: BSD, Bower: oboe, npm: oboe) is a library for handling JSON HTTP responses before the request has finished:

It glues a transport that sits somewhere between streaming and downloading to a JSON parser that sits somewhere between SAX and DOM. It is small enough to be a micro-library, doesn’t have any external dependencies and doesn’t care which other libraries you need it to speak to.

The website has a video and more documentation that explains how it works.

Nordic.js, Octocard

06 Feb 2014 | By Alex Young | Comments | Tags conferences events node modules

Nordic.js

Nordic.js

Nordic.js is a two day conference that takes place in Stockholm in September. They’re accepting proposals for talks, so you might want to bookmark that link if you’re interested in speaking.

Tickets aren’t yet available, but apparently a related meetup in Stockholm is extremely popular, so it’ll sell out quickly.

Octocard

Octocard (GitHub: zmmbreeze / octocard, License: MIT) is a GitHub widget, with a nice, compact design and a cool graph.

It’s used by including a <script> element with data attributes, and you can theme it fairly easily.

There’s also a Node project called octocard-server that can serve data from MongoDB. It uses GitHub authentication, and the octonode GitHub API wrapper.

Node Roundup: bitcoinaddress.js, atry, Node Web Modules

05 Feb 2014 | By Alex Young | Comments | Tags node modules apps bitcoin

bitcoinaddress.js

If you need to take Bitcoin payments on your site, then bitcoinaddress.js (GitHub: miohtama / bitcoinaddress.js, License: MIT, npm: bitcoinaddress) by Mikko Ohtamaa might help. It’s a module for handling Bitcoin payments. It can be run as a client-side script, or as a Node module. It allows Bitcoins to be sent, or specific currency amounts based on “fiat” amounts.

It’s based around bitcoin: URIs, and allows you to display “Pay from wallet” links on your pages. It also displays QR codes so people can easily make payments using mobile Bitcoin apps.

atry

atry (GitHub: CodeCharmLtd / atry, License: MIT, npm: atry) from Code Charm (Damian Kaczmarek) is an alternative to Node’s domain module. The basic idea is to allow exceptions to be caught using an asynchronous API:

atry(function() {
  setTimeout(function() {
    throw new Error('I am Error');
  }, 10);
}).catch(function(err) {
  console.log('Error:', err);
});

It has an intercept method that returns an “exception safe” callback that you can pass as a callback to asynchronous APIs like fs.readFile.

Node Web Modules

Node Web Modules (GitHub: caio-ribeiro-pereira / node-web-modules, License: MIT) by Caio Ribeiro Pereira is a Node web application that shows a list of popular web frameworks for Node. If you select one of the modules it shows a screenshot and some statistics.

The project is powered by Express and Redis, and it uses the GitHub API. The module list it displays on http://nodewebmodules.com/ is useful for beginners, but you might also like to take a look at the source to see how it works.

Spectra, GizmoJS, EdisonJS

04 Feb 2014 | By Alex Young | Comments | Tags jquery design

Spectra

Spectra (GitHub: aakpat6 / spectra, License: MIT, npm: spectra) by Aakash Patel is a library for working with colours. It’s a function that accepts various colour formats: RGB, HSL, hex, and CSS colour names.

It can also convert formats, so calling colour.hex() will return a hex value. Colours can even be compared with the .equals method. There are additional methods for processing colours, including harmony, which can generate harmonies for analogous, triad, complementary, square, and rectangle colours.

The Spectra API documentation has examples for each method, and the author has included unit tests.

EdisonJS

EdisonJS (GitHub: tkambler / edison.js, License: MIT) by Tim Ambler is a router for single page applications based on hierarchical relationships. The idea is to define sections and routes. Sections contain routes, and routes map to URLs. That means visiting a URL will cause a section’s callback to fire.

The API is based around instances of sections that you define with edison.createSection. There’s also a edison.extendCleanup method that fires when people navigate away from routes.

GizmoJS

Tim Ambler also sent in GizmoJS (GitHub: tkambler / gizmo, License: MIT, Bower: gizmo). GizmoJS is a component library, similar to jQuery UI’s widget factory. It doesn’t depend on jQuery, but does need RequireJS, because the components are based on AMD. It has an event API and inheritance helper.

Vue.js, beautify-with-words

03 Feb 2014 | By Alex Young | Comments | Tags node modules mvvm mvc

Vue.js

Vue.js

Vue.js (GitHub: yyx990803 / vue, License: MIT) by Evan You is a MVVM library. It’s based around instances of the Vue constructor, essentially view model objects, that provide bindings between DOM objects and data models.

It has an event-based API with key/value observing, HTML directives (like AngularJS), and text filters. There’s a TodoMVC example that showcases some of the features. Most of the code is passed in as options to the Vue constructor, so it feels a little bit like Backbone.js views in that respect.

Vue.js is an interesting combination of features from Backbone.js, KnockoutJS, and AngularJS. Evan seems confident about its performance and features, but I think it’ll be hard to convince people to seriously try it out given how popular Backbone and AngularJS have become.

beautify-with-words

beautify-with-words (GitHub: zertosh / beautify-with-words, License: MIT, npm: beautify-with-words) by Andres Suarez is a module based on UglifyJS that replaces variable names with words.

You can pass -b to beautify the output, which essentially means you can turn minified, obfuscated code into something not quite readable, but much easier to search and grep for patterns.

Conference: mloc.js, Bootstrap 3.1

31 Jan 2014 | By Alex Young | Comments | Tags conferences events bootstrap

Conference: mloc.js

mloc.js

mloc.js is a conference in Budapest, taking place on February 13th. Tickets start at $260, but there are only 24 left!

With projects like asm.js and Emscripten, Mozilla is beginning to see JavaScript as a virtual machine and compiler target. Will it change how we think about and how we use JavaScript? How compiling C++ code to really fast JavaScript code will transform the web? At mloc.js we are bringing together representatives of major browser vendors, industrial users with large web projects, and authors of compile-to-JS projects with the goal of moving the web forward. Together we will discuss what will be possible with the web platform in the next 10 years.

There are some great speakers from PayPal, Google, Mozilla, Intel, and more.

Bootstrap 3.1

It looks like Bootstrap 3.1 is out. There’s an inconsequential and pointless discussion about it on Hacker News, so it’s probably best to ignore that and read the changelog for yourself.

One of the nice things about this release is it includes some new templates: Blog, Cover, and Dashboard. Even though I like to code these by hand, it’s great for people who want to get started quickly. The blog template doesn’t use the article element, but they do target IE 8 so that might be why.

The Art of Error

30 Jan 2014 | By Alex Young | Comments | Tags node errors
Error was originally a character in the hit video game, "Zelda".

I like to define a lot of objects that inherit from Error. I find it helps me to track down issues – post-mortem – but also to clearly handle expected errors. Sometimes writing error handling code feels like a chore, but it shouldn’t be an afterthought. Well-designed and well-tested errors will help you maintain projects, but also help users figure out what to do when things go wrong.

When it comes to using Error, I’ve found two bad practices that should be avoided:

  1. new Error is used instead of a subclass.
  2. Error is avoided altogether because “exceptions are bad”.

Let’s look at how to avoid these issues and use errors properly.

Subclassing Error

Subclassing errors is easy with Object.create or util.inherits (in Node). Here’s how you do it in Node:

var assert = require('assert');
var util = require('util');

function NotFound(message) {
  Error.call(this);
  this.message = message;
}

util.inherits(NotFound, Error);

var error = new NotFound('/bitcoin-wallet not found');

assert(error.message);
assert(error instanceof NotFound);
assert(error instanceof Error);
assert.equal(error instanceof RangeError, false);

The assertions check that the expected property was set (message), and error is an instance of NotFound, Error, but not RangeError.

If you were using this with Express, you could set other properties to make the error more useful. This is great when passing errors to next() in routes. When dealing with errors at the HTTP layer, I like to include a status code:

function NotFound(message) {
  Error.call(this);
  this.message = message;
  this.statusCode = 404;
}

Now you could have error handling middleware that handles errors in a more DRY fashion:

app.use(function(err, req, res, next) {
  console.error(err.stack);

  if (!err.statusCode || err.statusCode === 500) {
    emails.error({ err: err, req: req });
  }

  res.send(err.statusCode || 500, err.message);
});

This will send the HTTP status code to the browser, if available. It also only emails errors when the statusCode is 500 or not set. I took this from production code that generates emails when unusual things happen, and I don’t want to get notified about general errors like 401, 403, and 404.

The line that reads console.error(err.stack) won’t actually work as expected. In V8 platforms like Node and Chrome you can use Error.captureStackTrace(this, arguments.callee) in the error’s constructor to get the stack trace.

function NotFound(message) {
  Error.call(this);
  Error.captureStackTrace(this, arguments.callee);
  this.message = message;
  this.statusCode = 404;
}

When I was researching this article I noticed there’s a lot of confusion about inheriting from Error and capturing the stack. It’s hard to do it properly in every browser. If you want to read more, there’s a good Stack Overflow post about it here: What’s a good way to extend Error in JavaScript?.

Throwing and Catching Errors

You might have noticed I’ve been quiet about throw, and that’s because we hardly ever use it anymore. It’s more common to see errors passed as the first argument to a callback, or emitted as an 'error' event’s first argument.

If you’re using an API like this, you’ll probably use something like if (err) return handleError(err) at the top of your callback. You can also use if (err instanceof SpecificError) to add your own context specific error handling code.

Node developers usually avoid raising exceptions, but if you really think it’s necessary you can use throw new Error('I am Error') and then assert.throws in your tests. I find I hardly ever need to use throw.

Designing Error Objects

Once you start subclassing Error and adding your own properties, you can cause new problems by breaking the SOLID principles. To keep your errors clean, ensure an error class only has one responsibility – don’t make Swiss Army knife error objects, or trigger complex behaviours inside their constructors.

You should also create errors in logical places. If you’ve written a database layer, don’t raise the previous NotFound error from something that loads data from the database. In this case it would be better to have a Database.NotFound error object, or maybe just return undefined and then raise NotFound at the view layer.

Following the Liskov substitution principle also helps create maintainable error handling code. If you replace the previous NotFound error with a new class that has more context-specific information, then the existing code should still work. You’d break this rule if you somehow changed what notFound.statusCode did.

Conclusion

I create a lot of Error classes in my projects, but I rarely use throw and catch. You should set useful properties in error objects, but use such properties consistently. And, don’t cross the streams: HTTP errors have no place in your database code. Or for browser developers, Ajax errors have a place in code that talks to the server, but not code that processes Mustache templates.

Node Roundup: Node 0.11.11, Nightwatch.js, Hackify

29 Jan 2014 | By Alex Young | Comments | Tags node modules

Node 0.11.11

Node 0.11.11 was released today, and it’s quite a big update so I think they’re catching up after the holiday slowdown. The main binary dependencies have been updated (v8, HTTP parser, openssl, uv). There’s a huge amount of fixes for the core modules, including crypto, http, tls, and util.

Nightwatch.js

Nightwatch.js

Nightwatch.js (GitHub: beatfactor / nightwatch, License: MIT, npm: nightwatch) is a test framework that uses Selenium WebDriver. Tests are written as modules, so the exported functions are run as test cases. The first parameter is a client object, that has a chainable API for scripting access to webpages.

It includes JUnit XML support, so you can use it with a CI server like TeamCity. Both CSS selectors and XPath can be used.

If you’ve never used Selenium before, then take a look at the Nightwatch guide. It explains how it manages the Selenium server and browser instances.

Hackify

Hackify (GitHub: hackify, License: MIT, npm: hackify), by Michael Dausmann, is a collaborative code editor that features a permission system, and chat. It feels like Google Drive for programming.

The server uses Express, Socket.IO, and Redis. It’s written like a fairly typical Express application, with route separation and ejs templates.

jQuery 1.11 and 2.1, Backbone.global

28 Jan 2014 | By Alex Young | Comments | Tags jquery backbone

jQuery 1.11 and 2.1 Released

jQuery 1.11 and 2.1 have been released:

both the 1.x and 2.x branches of jQuery support all recent modern browsers and have the same API. The 1.x branch, this time 1.11.0, adds support for the older versions of Internet Explorer (IE6, 7, and 8). The 2.x branch, today played by 2.1.0, adds support for non-traditional web environments like node.js and browser plugins for Chrome and Firefox.

Another interesting point from the release notes was this paragraph about source map problems:

This release does not contain the sourcemap comment in the minified file. Sourcemaps have proven to be a very problematic and puzzling thing to developers, spawning hundreds of confused developers on forums like StackOverflow and causing some to think jQuery itself was broken.

I’ve noticed source maps confuse CoffeeScript developers as well, so this isn’t surprising. The tools seem solid – Chrome’s implementation has worked for me in the past, but the concept itself isn’t entirely intuitive.

The Node/browserify support is handy – that particular change was ticket 14677.

Backbone.global

Backbone.global (GitHub: DarrylD / Backbone.global, License: MIT) allows you to listen to global events in a Backbone.js application. It changes Backbone.View.prototype.delegateEvents to emit events on a global event bus, which makes it easier to hook into events for things like testing or logging.

v8js, Angular Foundation

27 Jan 2014 | By Alex Young | Comments | Tags php angular ui

v8js

On Friday I wrote about Uniter, which converts PHP to JavaScript. But what about running JavaScript in PHP? C. Scott Ananian sent in v8js (GitHub: preillyme / v8js, License: MIT), a PHP extension that lets you run JavaScript inside a PHP application.

It has both PHP and JavaScript APIs, so you can do things like var_dump in JavaScript. In the PHP side, you can evaluate JavaScript with $v8->executeString().

This project actually uses V8, and you can restrict JavaScript based on time and memory usage.

Angular Foundation

Angular Foundation

Angular Foundation (GitHub: madmimi / angular-foundation, License: MIT) is a Foundation port of the AngularUI bootstrap project.

We are aiming at providing a set of AngularJS directives based on Foundation’s markup and CSS. The goal is to provide native AngularJS directives without any dependency on jQuery or Foundation’s JavaScript. It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the orginal JavaScript code size and better integrated into the AngularJS ecosystem.

The documentation explains what Foundation components are supported, and shows how to use them as AngularJS directives. The authors created it after they noticed people on Stack Overflow asking about AngularJS directives for Foundation, and finding the existing solutions less complete.

Uniter, Chai Webdriver, Gamedev.js Weekly

24 Jan 2014 | By Alex Young | Comments | Tags php testing games

Uniter

When we run our yearly survey, I’ve noticed PHP is popular with our readers. So here’s something that you might either love, or consider arcane blasphemy: Uniter (GitHub: asmblah / uniter, License: MIT), a JavaScript to PHP source-to-source compiler:

Uniter allows you to execute PHP in the browser or in Node.js. As an on-the-fly recompiling interpreter (or transpiler) it results in the closest possible translation from PHP to native JavaScript code.

It includes Mocha unit tests and should run in IE 9 or above. It currently supports most of PHP’s keywords, and even has basic class support. The demo is interactive, so you can try editing the PHP source to see what happens.

Chai Webdriver

Chai Webdriver (GitHub: goodeggs / chai-webdriver, License: MIT, npm: chai-webdriver) by Max Edmands is a Chai plugin for making markup-based assertions when using webdriver. For example:

// Start with a webdriver instance:
var sw = require('selenium-webdriver');
var driver = new sw.Builder()
  .withCapabilities(sw.Capabilities.chrome())
  .build()

// And then...
var chai = require('chai');
var chaiWebdriver = require('chai-webdriver');
chai.use chaiWebdriver(driver);

// And you're good to go!
driver.get('http://github.com');
chai.expect('#site-container h1.heading').dom.to.not.contain.text("I'm a kitty!");

It works with Selenium, chromedriver, PhantomJS, and SauceLabs.

Gamedev.js Weekly

Gamedev.js Weekly is a weekly newsletter of JavaScript game-related news. There’s an archive so you can preview it before signing up.

JellyReader: Dropbox/Google Drive Feed Reader

23 Jan 2014 | By Alex Young | Comments | Tags angularjs jquery apps services

Ray Wang sent in JellyReader (GitHub: NimbusBase / jellyreader, License: MIT), an entirely client-side feed reader that is powered by Google Drive and Dropbox. NimbusBase has been used to unify access to Google Drive and Dropbox, so the data is ultimately stored as flat files.

JellyReader itself is implemented with jQuery and AngularJS. It allows you to add feeds, view entries, toggle the read state, and you can also star your favourite items. I tried it out with my Dropbox account, and Dropbox states that the application only has access to an “app” folder:

Dropbox

I added DailyJS to it:

Jelly add feed

And the stories are rendered as you might expect:

Jelly feed view

After playing around with the web interface for a while, I wondered what the files on Dropbox looked like. Each data collection is serialised in a directory, and there is a file per item. So feeds have a directory, and stories do as well. UUIDs are used to ensure the filenames don’t clash.

Dropbox

Presumably NimbusBase data has the same structure on Google Drive.

The JellyReader source uses lots of third party components, including jFeed which I haven’t seen for a few years. I actually like the flat file approach for personal, self-hosted applications like this, although it would be interesting to see a comparison with a Dropbox Datastore implementation.

Node Roundup: Nodemon 1.0, Prana, termcoin, node-bitwise-xor

22 Jan 2014 | By Alex Young | Comments | Tags node modules bitcoin mongodb

Nodemon 1.0

Nodemon

I noticed Nodemon 1.0 was released this week (GitHub: remy / nodemon, License: MIT, npm: nodemon). This update includes local and global configuration files, execMap for mapping file extensions to programs, and some changes to the overall architecture of the project. You can now require Nodemon, and tests have been added.

Prana

Prana (GitHub: recidive / prana, License: MIT, npm: prana) by Henrique Recidive is a small framework for Node applications. Prana application objects are EventEmitters, and Prana “types” emit events as well.

It combines an ODM system with a plugin system, and currently persists data to memory or MongoDB. The author has included some examples which you can find in prana/examples, and one of them uses Express. The module’s code itself has detailed comments, and the readme is solid too.

termcoin

termcoin (GitHub: chjj / termcoin, License: MIT, npm: termcoin) by Christopher Jeffrey is a terminal Bitcoin client with a command-line interface based on blessed. It requires bitcoind to work, and looks really cool in the screenshots.

node-bitwise-xor

Stanislas Marion sent in node-bitwise-xor (GitHub: czzarr / node-bitwise-xor, License: MIT, npm: bitwise-xor), a module for performing a bitwise XOR on two buffers or strings. It iterates over each element with ^, taking into account the length to ensure each item is changed.

Contra, jquery.onoff, jQuery 1.11.0 RC1 and 2.1.0 RC1

21 Jan 2014 | By Alex Young | Comments | Tags jquery plugins ui flow-control async

Contra

Contra

Contra (GitHub: bevacqua / contra, License: MIT, npm: contra, Bower: contra) by Nicolas Bevacqua is a flow control library, similar to async, but more suited to client-side development.

It has three sets of methods: flow control, functional, and uncategorized. The flow control methods are for executing groups of functions, like λ.waterfall(tasks, done). The functional methods are a subset of what you might expect to find in Underscore.js – λ.each and λ.filter for example. I noticed that λ.each can handle both arrays and objects, so it’s different to forEach.

Each method can be exported separately, so you could just pull in a single method if you wanted to. It has Mocha tests, and can be installed with Bower.

jquery.onoff

jquery.onoff (GitHub: timmywil / jquery.onoff, License: MIT) by Timmy Willison is a toggle switch that uses checkboxes. It supports IE 9 and above, and can be loaded with an AMD loader.

Although it’s a relatively simple project, Timmy has included tests, and a Grunt build script.

jQuery 1.11.0 RC1 and 2.1.0 RC1

jQuery 1.11.0 RC1 and 2.1.0 RC1 have been released. These releases are maintenance releases, so there aren’t any API changes.

The announcement notes that these releases should work properly with Browserify, and can be installed using npm.

A Node Interpreter for iOS

20 Jan 2014 | By Alex Young | Comments | Tags node apps iOS
Nodeapp: Node for JavaScriptCore.

Back in December I wrote about Nodelike, which aims to bring Node to iOS 7 and Mac OS X through JavaScriptCore. The iOS app has now been released as Node - JavaScript Interpreter, which you can download from the App Store. You can also view the source at node-app / Interpreter.

The app itself is currently quite simple. You can load most of the core modules, like assert, events, and net, but executing code removes it from the editor. It’s literally an interpreter – a GUI REPL, rather than a way to write Node on the go.

It includes browsable documentation, so you could use it to verify ideas, or more importantly to help you learn Node. It has a lot of potential as a learning tool – combined with an eBook it would be a great way to execute examples on an iOS device, particularly as you could tweak the code to figure it out.

Interpreters in iOS. Now I've seen everything.

This would also let people take back those wasted commuter hours. Rather than playing Candy Crush Saga you could boost your Node skills!

Cerebro, Snowmen War, Cube Game

17 Jan 2014 | By Alex Young | Comments | Tags webgl games google

Cerebro

Cerebro

Cerebro is a WebGL visualisation of Google Analytics data, created by Vetrenko Maxim. You can use the author’s Google Analytics data, or your own – the project isn’t open source, so I decided to use the sample data.

It supports Leap Motion input, and uses three.js, sparks.js, and dancer.js for audio. I couldn’t get it working in Firefox, but it worked in Chrome.

Snowmen War

Snowmen War

Snowmen War (License: CC BY-NC 3.0) by Tanguy Sauvin and Claire Thibault is a WebGL game with some pretty extreme text. When the game starts, you’re warned that “THEY WILL KILL YOU”, and if you’re hit too many times the game over screen simply states “YOU’RE DEAD.” It’s blunt, which is amusing next to the slightly surreal snowmen in outer space visuals.

If you view the project’s source you can see the game engine, which uses Cannon.js, and plenty of Mr.doob’s libraries.

Cube Game

Cube Game

Mark Vasilkov wanted to make something with Goo Engine, so he came up with Cube Game. His advice is to mash the spacebar repeatedly until you win, but I found it was more playable when I realised it’s possible to slide under some of tile-like blocks.

Declarative Graphics

16 Jan 2014 | By Alex Young | Comments | Tags graphics animations reactive svg

Whenever I hear the term ‘reactive’, I immediately think about data-driven forms and widgets. Markup isn’t just used for HTML forms and widgets, however: SVG is a markup language, so why not use reactive programming techniques to generate data-driven graphics?

That’s the goal of Paths.js (GitHub: andreaferretti / paths-js, License: Apache 2.0, bower: paths-js), by Andrea Ferretti. It features a chainable API for generating SVG paths:

var path = Path()
  .moveto(10, 20)
  .lineto(30, 50)
  .lineto(25, 28)
  .qcurveto(27, 30, 32, 27)
  .closepath();

Calling path.print() returns the relevant markup. This can then be used with a templating language like Handlebars or mustache.js: templates/line.html.

This example is from the Paths.js demo (GitHub: andreaferretti / paths-js-demo). The demo uses Ractive.js to bind JSON data to UI controls and charts. It has several graphs with animations, and uses instances of Ractive together with instances of Path to create a clean, interactive data-driven UI.

Reactive Pokémon stats.

I like the combination of modern templating languages, SVG, and Ractive.js in Andrea’s demo. The Paths.js API makes generating SVG less tedious than it could be, and various charts are included that you can use to get started quickly.

If you like the sound of Ractive.js, then take a look at the Ractive.js demos, which include some SVG examples.

Node Roundup: TJ Fontaine Takes Over, Conductance, Easymongo, Schema-Inspector

15 Jan 2014 | By Alex Young | Comments | Tags node modules frameworks mongodb schema

The Next Phase of Node.js

In The Next Phase of Node.js, Isaac Z. Schlueter has announced that TJ Fontaine is now the Node project lead:

Anyone who’s been close to the core project knows that he’s been effectively leading the project for a while now, so we’re making it official. Effective immediately, TJ Fontaine is the Node.js project lead. I will remain a Node core committer, and expect to continue to contribute to the project in that role. My primary focus, however, will be npm.

Isaac also said he’s founding npm, Inc., to allow him to focus on npm and develop related products:

I’ll be sharing many more details soon about exactly how this is going to work, and what we’ll be offering. For now, suffice it to say that everything currently free will remain free, and everything currently flaky will get less flaky. Pursuing new revenue is how we can keep providing the npm registry service in a long-term sustainable way, and it has to be done very carefully so that we don’t damage what we’ve all built together.

Recently, there was an initiative by Nodejitsu to drive support and funding for npm, resulting in over $300,000 being raised. It’ll be interesting to see how this all ties together over the next year.

Congratulations and good luck to TJ Fontaine!

Conductance

Conductance

Conductance (GitHub: onilabs / conductance, License: GPL, npm: conductance) from Oni Labs is a web application server with a UI toolkit and a module system that’s compatible with client-side code.

It’s built on Stratified JavaScript, by the same company, which adds new language primitives for block lambdas, destructuring data, arrow function syntax, and more.

Conductance already has a detailed tutorial, and there’s an API guide as well.

Easymongo

Easymongo (GitHub: meritt / easymongo, License: MIT, npm: easymongo) by Alexey Simonenko is a wrapper around the native Node MongoDB driver. It has a clean, idiomatic API, and relies on plain old objects instead of models.

It has Mocha tests, and the API is documented in the readme. Basic use looks like this:

var options = {
  dbname: 'test'
};

var mongo = new require('easymongo')(options);
var users = mongo.collection('users');

var data = { name: 'Alexey', surname: 'Simonenko', url: 'http://simonenko.su' };
users.save(data, function(error, results) {
  // Returns a new document (array).
  console.log(results);
});

users.find({ name: 'Alexey' }, { limit: 1 }, function(error, results) {
  // Always return array of documents.
  console.log(results);
});

Schema-Inspector

What do you do when you’re using simple objects without an ORM layer? You use schemas to validate your user input! Schema-Inspector (GitHub: Atinux / schema-inspector, License: MIT, npm: schema-inspector, Bower: schema-inspector) by Sebastien Chopin is a JavaScript object validator that works in browsers and Node.

Given a suitable schema, you can validate objects like this: inspector.validate(schema, candidate). It can also be called asynchronously, which allows you to report issues with this.report inside functions in the schema.

It has tests written with Mocha, and a healthy amount of API documentation in the readme.

The State of jQuery, jQuery.whenLive, jTableScroll

14 Jan 2014 | By Alex Young | Comments | Tags jquery plugins

The State of jQuery 2014

The State of jQuery 2014 was posted to the jQuery blog yesterday by Dave Methvin. It basically covers jQuery’s growth through 2013, and includes a comment about how jQuery shouldn’t just be used for routing around broken DOM APIs:

People should be continuing to use jQuery because it’s a powerful way to implement designs and provides a vibrant ecosystem of useful plugins, not because the native DOM APIs are broken, verbose, or inconsistent. That’s why we participate in the standards process through bodies such as the W3C and ECMA.

jQuery.whenLive

jQuery.whenLive (GitHub: tkambler / whenLive, License: MIT, Bower: tkambler/whenLive) by Tim Ambler allows you to track when elements are inserted into the DOM tree, with a focus on performance:

When supported, $.whenLive leverages the browser’s MutationObserver notification system. In the event that Mutation Observers are unavailable, $.whenLive leverages the relatively new requestAnimationFrame function.

This seems like a clever way of deferring behaviour until potentially complex components are ready.

jTableScroll

jTableScroll (GitHub: mike-allison / jTableScroll, License: MIT) by Mike Allison is a plugin for adding scrollbars to tables, and it retains static headers and footers.

It calculates the width and height then wraps parts of the table in divs, applying the necessary overflow styles based on size options: $('#tableToScroll').jTableScroll({ width: 300, height: 300 }).

The header and footer are cloned and moved by looking for the thead and tbody elements, so you’ll need a well-structured table. It can be installed with nuget.