The JavaScript blog.


node modules translation sproutcore

Jed, messageformat.js, Blossom

Posted on .


Jed (GitHub: SlexAxton / Jed, License: WTFPL/Dojo CLA, npm: jed) by Alex Sexton is a JavaScript implementation of gettext. Plural forms are parsed using a Jison grammar (in plurals.jison)), and it has a chainable API:

var n = 5;

  .translate("%d key doesn't exist")
  .ifPlural(n, "%d keys don't exist")

This can be used in both browsers and Node, and the author also demonstrates using it in the AMD style. As a bonus, Jed includes a useful sprintf implementation.


messageformat.js (License: WTFPL/Dojo CLA, npm: messageformat) also by Alex Sexton handles both pluralization and gender in translations. Despite sounding similar to Jed, this is a different approach to gettext:

Gettext can generally go only one level deep without hitting some serious roadblocks. For example, two plural elements in a sentence, or the combination of gender and plurals.

Basic interpolation looks like this:

var mf = new MessageFormat('en')  
  , message = mf.compile('His name is {NAME}.');

message({ 'NAME' : 'Jed' });  
// "His name is Jed."

More complex replacements can use SelectFormat and PluralFormat:

var message = mf.compile('{GENDER, select, male{He} female{She} other{They}} liked this.');  
message({ 'GENDER' : 'male' });  
// "He liked this."

message({ 'GENDER' : 'female' });  
// "She liked this."


Blossom (GitHub: fohr / blossom, License: GPLv3 for non-commercial projects, npm: blossom) is an early beta of what Erich Ocean hopes represents the future of SproutCore:

Blossom is a serious attempt to advance SproutCore 1.x forward after the failure of SproutCore 2. I put forward the rational behind Blossom in early December, 2011 and also demo'd early work I had done on Blossom at the SproutCore User Group in Washington D.C. late January, 2012. [...] Blossom is designed to become the future of SproutCore, but it also stands on its own.

Blossom has a Node-based build system, and it can be installed with npm install blossom. It includes the latest datastore and statechart code from SproutCore 1.8, and Node-based unit tests for foundation and datastore.

Currently, the SproutCore documentation should suffice for working with parts of Blossom. The Blossom developers are currently working towards their first release candidate on April 1st. The current code on GitHub is 1.0.0-beta.1.

Despite its SproutCore heritage, it's important to understand where Blossom is different:

instead of simulating a web browser, Blossom's native runtime has high-performance, platform-native implementations of the various Blossom and SproutCore classes, such as SC.Request (for networking), SC.Layer (for animation), as well as the various JavaScript runtime objects such as CanvasRenderingContext2D, Float32Array and ArrayBuffer that are exposed to Blossom developers.


node modules translation

Node Roundup: i18next, Sift.js, Comb

Posted on .

You can send in your Node projects for review through our contact form or @dailyjs.


i18next (GitHub: jamuhl / i18next-node, License: MIT, npm: i18next) by Jan Mühlemann is a library for supporting multiple languages in Node applications. I previously posted about i18next in the jQuery Roundup.

i18next supports the expected set of translation tools, like pluralized strings, variables, and nesting. This Node port adds much-welcomed features like Express middleware and template support.

To add the required helpers to an Express app, call i18next.registerAppHelper(app), then use a familiar t() function to access translations in templates. The author provides a Jade example, so fans of the authentic TJ Holowaychuk Express/Jade/Stylus stack should be happy.


sift.js (npm: sift) by Craig Condon is a MongoDB-inspired array filtering library. It's a bit like an alternative to Underscore for people who love MongoDB. Sift.js supports operators like $in and $gt, but can also filter arrays based on functions and even works with deeply-nested objects in arrays.

Craig has provided a few examples that should look familiar to Mongo users:

var sift = require('sift');

sift({ $in: ['hello','world'] }, ['hello','sifted','array!']);  
// ['hello']

Full documentation is included, covering all of the supported operators and deep searching.


Comb (License: MIT, npm: comb) by Doug Martin is a framework for Node that includes "frequently needed utilities", like logging tools, string and date formatting, flow control, and various collection algorithm implementations such as BinaryTree and PriorityQueue.

Every class provided by Comb has documentation at pollenware.github.com/comb. One of the interesting things I noticed about this project is the author claims 99% test coverage, so that fellow who filled out our JavaScript survey with "I code everything perfect on the first try" might want to check out the source.


jquery ui plugins music amd translation

jQuery Roundup: AMD-Utils, jquery.mentionsInput, Echo Nest API Plugin, i18next

Posted on .

Note: You can send your plugins and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/dailyjs).


AMD-Utils (GitHub: millermedeiros / amd-utils, License:
MIT) by Miller Medeiros is a set of modular utilities written using the AMD API.

All code is library agnostic and consist mostly of helper methods that aren't directly related with the DOM, the purpose of this library isn't to replace Dojo, jQuery, YUI, Mootools, etc, but to provide modular solutions for common problems that aren't solved by most of them.

The modules written so far include some of the things covered on my
Let's Make a Framework tutorial series, like a functional style Array module, and other
commonly required number and string utility functions often added by
large frameworks.


jquery.mentionsInput (GitHub: podio / jquery-mentions-input,
License: MIT) by Kenneth Auchenberg and the Podio Dev Team is a UI
component for handling @mentions. It'll display an autocomplete list
for matching names and allow one to be selected. Once a name is
selected, it'll change colour in the text box, as shown above.

The authors have packaged it with CSS, so it's easy to get started right
away. It does expect some data, rather than automatically searching an
API like Twitter's, so the expected format looks like this:

  onDataRequest:function (mode, query, callback) {
    var data = [
      { id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }

    data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

    callback.call(this, data);

Echo Nest API Plugin

Echonest-jQuery-Plugin by Samuel Richardson is a plugin for The Echo
which is a real-time API for accessing
music data. Song data and audio fingerprinting are just some of the cool
things that this API provides.

Let's say I needed to get a set of album images. All I'd have to do is

var echonest = new EchoNest('YOUR_API_KEY');
echonest.artist('Radiohead').images(function(imageCollection) {

Combined with a templating system, this makes working with music data
extremely convenient. The only issue with this approach is the API key
is exposed. Echo Nest uses the API key for enforcing rate limits, so
it's not safe to expose it publicly. As it stands, I'd probably use
client-side Echo Nest API code as a way of rapidly prototyping a music
service built on this platform, then create my own server-side bridge to
obscure the API key.


i18next (GitHub: jamuhl / i18next, License: MIT) by Jan
Mühlemann is a client-side translation plugin with lots of features,
including: plurals, localStorage, namespaces, and
variables. JSON resource files can be used to store translations, and
then i18next will load them as required.

Given a suitable file at /locales/en-US/translation.json:

  "app": {
    "name": "i18n"
  "creator": {
    "firstname": "Jan",
    "lastname": "Mühlemann"

Then \$.i18n.init can be used to load the resource and
access translations:

$.i18n.init({}, function(t) { // will init i18n with default settings and set language from navigator
  var appName = t('app.name'); // -> i18n
  var creator = t('creator.firstname') + ' ' + t('creator.lastname'); // -> Jan Mühlemann

The i18next documentation contains
more examples and shows how to change languages, organise translations
with nesting, and use variables.