The JavaScript blog.


server programming node realtime

Juggernaut Tutorial

Posted on .

This article is by [Alex MacCaw](http://www.eribium.org/). He's a JavaScript and Ruby developer and his blog is [Lead Thinking](http://leadthinking.com/). Follow him on Twitter here: [@maccman](https://twitter.com/maccman).

Juggernaut gives you a realtime connection between your servers and client browsers. This lets you do
awesome things like multiplayer gaming, chat, group collaboration and
more. What's more, Juggernaut is built on top of
node.js so you can take advantage of its incredible speed and scalability.

Example code is worth a thousand words, so here's a simple group chat
implementation using Juggernaut:

   var jug = new Juggernaut;
   jug.subscribe("/chats", function(data){
     $("#chats").append($("<li />").text(data));

That's it, the browser will set up a streaming connection to
Juggernaut's node server. Any messages pushed to the channel "/chats"
will be sent to the client. For example, we can push data from a Ruby

require "juggernaut"
Juggernaut.publish("/chats", "Hello World!");

That's all the code you need - all clients connected will see the

Juggernaut's features include:

  • node.js server
  • Ruby client
  • Supports the following protocols:
    • WebSocket
    • Comet
    • Adobe Flash Socket
  • Reconnection support
  • Massive horizontal scaling


So you want to try it out? We need to install some dependencies first:

# Install node.js

Right, now we need to start "Redis":http://code.google.com/p/redis/ ("install":http://code.google.com/p/redis/wiki/QuickStart it if you don't have it already). Juggernaut uses Redis for PUBSUB:

./redis-server redis.conf

Download Juggernaut, and start the Juggernaut server:

git clone git://github.com/maccman/juggernaut.git
cd juggernaut
node server.js

That's it! Open http://localhost:8080 and you'll see Juggernaut in


Now we've got our client running, let's publish to it. We need to
install the Ruby gem to do so (don't forget the --pre option!):

sudo gem install juggernaut --pre

And now in irb:

require "juggernaut"
Juggernaut.publish("channel1", "Yo yo yo")

You can also publish to multiple channels:

Juggernaut.publish(["channel1", "chan2"], "yo yo, my good fellow")

And send objects:

Juggernaut.publish("channel1", {:where => "is my yo yo?"})


So, that's a brief introduction to Juggernaut. You can check out more
use cases in the README. Now go
and build something awesome!


server programming node

Node Roundup 4

Posted on .

Welcome to the Node Roundup. Send your apps in for review through our
contact form or @dailyjs.


Bounce by Jonah Fox is a wrapper around a Node process that will watch for JavaScript file changes and
restart the Node process. You can run it like this:

bounce lib/server.js

The author has also included tests (!). At the moment it recursively
watches the file system, rather than using kernel-based notifications,
but it's still great for those of us that are used to automatic
reloading on other development platforms/frameworks.


node-supervisor is a similar project by Isaac Z. Schlueter; it can also relaunch programs when they
crash. Supervisor also uses a recursive file system approach to watch
for file changes.


On a related topic... Nodules is a
URL-based CommonJS module loader for Node. That means it has automatic
dependency resolution, so modules will be downloaded as required. It's
part of Persevere, which is a Dojo Foundation

Node Knockout

Node Knockout voting is still open:

All voting will take place at the same time: between 03:00 GMT on Monday, August 30 and 0:00 GMT on Friday, September 3.

I've had a lot of fun playing with the
entries, check them out if you haven't already!


programming opensource

Distribution Checklist

Posted on .

As you might know, I review a lot of jQuery, Node, and CommonJS plugins
and libraries. This isn't always as easy as it seems, because these
projects come in all kinds of different states of preparedness.

If you're planning on releasing a jQuery plugin, or another open source
JavaScript project, here's a few things that you might like to consider.
This is from my perspective as a journalist writing about your work.


The README should include:

  • At least one sentence explaining what the project does
  • The license
  • The author
  • Relevant URLs: author's URL, company, documentation
  • Dependencies
  • Examples on how to quickly test out the project
  • Your preferred method to communication for suggestions, bug reports

Please make it clear what your project's license is. This might not
matter to you, but it does to companies who want to build on your work,
or to contributors who want to improve it.

I estimate that 70% of the jQuery plugins I review don't make the
author's name clear. Can you believe that? Are people embarrassed about
their work? The only way I can usually find the author's name is through
the GitHub/Google Code/etc. profile that their project links to. And
this doesn't always include their actual name.


If something is on GitHub, I'm likely to write about it. Google Code is
like a foreign land to me, but it's OK too.

If your project is on another system that most journalists aren't
familiar with, make sure the README is prominent or you have a clear
site for the project.

If you expect to simply link to a compressed archive of your project...
I'm likely to only write about it if I'm short of material (and it
doesn't suck).

I know jQuery's site has listings for projects, but this isn't
sufficient for a well-rounded plugin. Have some pride in your work! Go
all out with blog posts, READMEs, the works.


We recently linked to a post about writing jQuery plugins
When reviewing a project I can't always go over the code to check it's
well-written. I take a casual look, with more detail if it's short, but
it's not always easy to gauge the quality.

One thing I do believe is you should write unit tests. We might be
deploying to a particular version of jQuery, so we'd like an easy way of
testing your plugin before inserting it into our app and doing
functional testing. Or... I might just need a way of checking the plugin
actually works before posting here (I've found some stinkers).

Whatever the reason, consider distributing your work with unit tests
that other people can run. Include instructions for running them. Even
if your plugin isn't the best quality code, tests can only help.


programming tricks localization

Language Detection

Posted on .

My company's blog gets translated into Japanese, and when we launched
the blog I put a link to it in the site's navigation. A few weeks later
I noticed a lot of Windows computers displayed the navigation text as a
bunch of squares, which was annoying to say the least. I suppose it's
only natural that not all computers will have all languages and fonts,
but I preferred using text to an image.

JavaScript Solution

I reasoned that most people interested in reading Japanese would have
the capability to do so, which meant I needed to conditionally display
English or Japanese based on the browser's capabilities. But how do you
detect whether or not the fonts display properly?

After researching the problem I found it's possible to detect font sizes
using half and full width katakana. When typing Japanese you can usually
select half or full width katakana: ア vs. ア. If a browser can't display
these properly, they'll be the same invalid character and therefore the
same size.

I wrote a function like this:

function japaneseFontsAvailable() {
  var halfWidth = document.createElement('span');
  var fullWidth = document.createElement('span');

  document.body.insertBefore(halfWidth, document.body.firstChild);
  document.body.insertBefore(fullWidth, document.body.firstChild);
  var havejapanesefont = halfWidth.offsetWidth != fullWidth.offsetWidth;


  return havejapanesefont;

I can't remember where I originally discovered this concept, but there's
a stackoverflow thread on the subject: Is it possible to detect East
Asian language

Have you written any similar localization hacks?


programming tricks

Express Function

Posted on .

In express yourself: rapid function
Angus Croll discusses a function that uses apply and
eval to generate functions from concise string definitions:

Function.prototype.express = function(expr) {
    var __method = this;
    return function() {
        var r = __method.apply(this, arguments);
        return eval(expr);

String.prototype.indexAfter = String.prototype.indexOf.express('r + 1');

It's a little bit like the string lambda functions in the
functional-javascript library.

Tricks like this demonstrate JavaScript's functional legacy. And, if the
eval seems a bit cheap to you, try combining the technique
with the author's previous article, Compose: functions as building

If you've been following our framework series, you've probably noticed
that jQuery, Prototype, Underscore and other libraries all define simple
functional methods early in the framework for internal use. JavaScript
1.8 makes even more techniques possible, like simplified array

Number.prototype.__iterator__ = function(){ for (let i = 0; i < this; i++) yield i }
var s = [2 * i for (i in 100) if (i * i > 3)]

And expression closures:

// JavaScript 1.7
function(x) { return x * x; }

// JavaScript 1.8
function(x) x * x