Node Roundup: Gumroad, Functools, Asyncblock, Geddy, Lemmy

15 Feb 2012 | By Alex Young | Comments | Tags node modules async fibers frameworks

 Gumroad

Gumroad logo

Gumroad is a new payment service aimed at digital goods sales that works in over 190 countries. As someone who builds small web applications with subscription fees, I can honestly say that receiving payments is the least fun part of development. It’s fun getting paid, but dealing with payment provider APIs can be stressful to say the least. So I read with interest when Vadim Demedes sent us his Node Gumroad client (License: MIT, GitHub: vdemedes / node-gumroad, npm: gumroad).

The client is a class that is instantiated with a Gumroad username and password. After calling an authentication method, item links can be created and managed. For more about Gumroad’s links, take a look at How does Gumroad work?

Functools

Functools (License: WTFPL, GitHub: azer / functools, npm: functools) by E. Azer Koçulu has continued to evolve since we featured it last year. Using languages like Clojure and Python for inspiration, Azer has created a small API of familiar flow control functionality. A compose method can be used to call functions in sequence, and asynchronous functions are also supported. There’s also a curry method.

In Avoiding Nested Callbacks in JavaScript, the author discusses Functools, along with more detailed examples than supplied in the README.

Asyncblock

Asyncblock (License: MIT, GitHub: scriby / asyncblock, npm: asyncblock) is another flow control related library that we’ve previously featured on DailyJS. Now version 2.0 has been released, which includes on-the-fly source transformation:

Note that when V8 supports generators, which is currently planned, the source transformation functionality of asyncblock will be able to transform most of the asyncblock code to be based on generators instead of fibers with no change to the original source. This helps reduce risk as it provides a path forward for asyncblock even if support for fibers became impossible in the future.

The examples in the README show how using asyncblock with source transformation can result in very succinct code.

GeddyJS

Meanwhile, Daniel Erickson let us know via Twitter that GeddyJS (License: Apache 2, GitHub: mde / geddy, npm: geddy) 0.3 is out. This Node web framework now has a new Bootstrap website, compete with a detailed tutorial and a list of the major features.

If you’re new to Geddy, it’s a full stack framework. Pretty much everything you need to build a web app is included. If you’ve seen Geddy before, then version 0.3 seems to have changed a lot since the 0.1 days. The only parts of the API that seem to have remained the same are models.

Lemmy

Lemmy is an Express boilerplate generator inspired by Motörhead’s Lemmy. And why not? There was an Amiga Motörhead game in the early 90s, so why not an Express generator? Anyway, it can be used to create a JavaScript or CoffeeScript application with Mocha tests.

Lemmy uses commands to generate lots of useful stubs, like middleware, routes, and models. And the author writes a mean README.

jQuery Roundup: jQuery-Paging, Pomodoro Timer App, SAP HTML5 Toolkit

14 Feb 2012 | By Alex Young | Comments | Tags jquery pagination apps productivity

 jQuery-Paging

We’ve seen a lot of pagination plugins on DailyJS recently, but diversity is good so I’ll keep collecting them until somebody convinces me not to! jQuery-Paging (License: MIT/GPL, GitHub: infusion / jQuery-Paging) by Robert Eisele is another take on client-side pagination. Usage centres around the number of items to paginate:

$(selector).paging(itemCount, options);

The plugin will generate a list of links, and clicking a link will cause the onSelect method to fire, which is one of the plugin’s many options. Formatting is handled in a relatively unique way – a format string and formatting callback are used:

$('#pagination').paging(itemCount, {
  format: '[< ncnnn >]',

  onFormat: function(type) {
    switch (type) {
      case 'block': // n and c
        return '<a>' + this.value + '</a>';
      case 'next': // >
        return '<a>&gt;</a>';
      case 'prev': // <
        return '<a>&lt;</a>';
      case 'first': // [
        return '<a>first</a>';
      case 'last': // ]
        return '<a>last</a>';
    }
  }
});

This is an interesting solution to handling formatting in pagination plugins.

Robert has lots of other jQuery and HTML5 projects listed on his site, here: xarg.org/projects/.

 Pomodoro Timer App

Pomodoro Timer screenshot

Pomodoro Timer (GitHub: oivoodoo / pomodoro-app) by Alexander Korsak is designed to manage time using the Pomodoro Technique. It’s implemented using Backbone.js and jQuery Mobile. It comes with a little wrapper that allows it to run on Heroku.

The Backbone.js code is carefully organised into collections, models, routers, and views. It serves as a good example of a self-contained Backbone.js application, particularly in terms of code organisation.

SAP’s HTML5 UI Toolkit

That’s right, you’re seeing something made by SAP on DailyJS. I was initially sceptical when I saw their new HTML5 UI toolkit, and the tutorials are PDFs, which didn’t help. However, when I saw the jQuery-style API I started to read more:

$(document).ready(function() {
  $('#uiArea').sapui('Button', 'btn', {
     text: 'Hello World!',
     press: function() { $('#btn').fadeOut(); }
  });
});

DailyJS reader Stefan sent this in, and he had a few comments about it that I thought I’d share:

Interesting side note: Their primary target for this is first tablets, then mobile then PCs and they will only support HTML5 (no fallbacks for older IEs).

From what I can gather, SAPUI5 uses jQuery, so it seems like the sapui method in the example is a plugin they’ve implemented for convenience. Unfortunately, downloading the beta requires an account, and even with a hastily created free account I couldn’t get it to download. Regardless, I expect jQuery can now include SAP in their “who’s using jQuery” list.

Mote.js, Resizer, o_O, JLS

13 Feb 2012 | By Alex Young | Comments | Tags libraries templates responsive frameworks

Mote.js

Mote.js (License: MIT, GitHub: satchmorun / mote, npm: mote) by “satchmorun” is a Mustache implementation with some impressive benchmarks. It runs in both Node and browsers, and usage should look familiar to users of existing Mustache engines:

var normal = mote.compile('escaped: ')
  , triple = mote.compile('triple: }')
  , ampersand = mote.compile('ampersand: ')
  , data = {data: '& " < >'};

normal(data);    //=> 'escaped: &amp; &quot; &lt; &gt;'
triple(data);    //=> 'triple: & " < >'
ampersand(data); //=> 'ampersand: & " < >'

Mote passes the Mustache spec, except for the optional lambda functionality:

var keyFn = mote.compile('Hello, .')
  , data = {
      name: 'Arthur Dent',
      lambda: function(fn) {
        return fn() + ' ' + fn().toUpperCase();
      }
    };

keyFn(data); //=> 'Hello, Arthur Dent. HELLO, ARTHUR DENT.'

Resizer

Resizer logo

Resizer (GitHub: egdelwonk / Resizer) by William Golden is a bookmarklet designed to aid responsive design. Popular resolutions for mobile devices are included so it’s easy to switch a page between a tablet view, desktop, and mobile. The current page can also be reloaded or reset.

There’s even a Resizer Chrome Extension, for those of us who prefer buttons to the extra screen real estate added by bookmark bars.

o_O

o_O (License: MIT) by Jonah Fox is a new HTML binding library that draws on the simplicity of Backbone.js’s collections, and the bindings of Ember and Knockout. The main methods provided by the library are property, bind, and collection:

var name = o_O.property('John');
o_O.bind(name, '#person');

// HTML text is now 'John'
name('Bob')

// HTML text is now 'Bob'

It ships with Mocha tests, and has been tested in IE 7,8,9, Chrome 16, Firefox 4 and Safari 5.

JLS Updates

JLS (License: LGPL) is a JavaScript platform that we’ve featured previously on DailyJS in Gestures, Scopeleaks, Wink, JLS, JavaScript Blogs. The authors have been working on it over the last year, and have recently released a whole load of new features:

  • More Web Browser GUI support: button, edit, table, etc.
  • Native image manipulation: subsampling, convolution, EXIF support
  • Simple XML Exchange (SXE) support for native, web browser and PHP
  • SQL support since 0.4 (for MySQL)
  • AMD is now used for defining and loading the framework’s classes

Mystik Map Editor, Outcome.js, TypedJS

10 Feb 2012 | By Alex Young | Comments | Tags games language errors jison parsing

Mystik Map Editor

Mystik Map Editor

So, you want to build the next Ultima in JavaScript? As well as a game engine tools are required. Mystik Map Editor (GitHub: UrbanTwitch / Mystik-Map-Editor) is an open source tile map editor. The client-side code is built with jQuery and jQuery UI. It supports a few drawing operations, like “brush” tile placement and a line tool, and will display if a tile is walkable or not.

Pressing “Create Map” will output a JSON representation of the current map. To see an example of a game built with this tile editor, visit mystikrpg.com. Technically, the tile editor could be forked, hacked, and used for anything, so if you do build the next Ultima with server-side JavaScript, get in touch!

Outcome.js

Outcome.js (npm: outcome) by Craig Condon is a flow control library that focuses on error handling. Any functions with the signature .callback(err, result) can be wrapped, allowing error-related code to be grouped together.

It’s quite hard to visualise the library without looking at Craig’s example in the outcome.js README. Notice that rather than wrapping if statements around the errors returned in callbacks, on.success( is used to control execution.

 TypedJS

TypedJS (License: MIT, GitHub: Proxino / TypedJS) by Ethan Fast allows functions to be annotated with type signatures. The library will then output useful logging during execution, allowing any mismatched types to be detected and potentially fixed.

To do this, comments and tests are used. Given a function with a suitable annotation:

MyObj = {
  //+ MyObj.test_fun :: Number -> Number -> Number
  test_fun:function(num1, num2){
    return num1 + num2;
  }
}

Then the function can be tested using TypedJS.run_tests(). If TypedJS.run_tests(true) is used, TypedJS will wrap functions to actually check for type violations. This is currently aimed at client-side development and requires jQuery, but the author notes that it’s early days for the library, so hopefully it’ll be extended to run elsewhere.

Interestingly, this is built using Jison. For those interested in Jison grammars, check out typedjs_parser.jison.

Unix and Node

09 Feb 2012 | By Alex Young | Comments | Tags node tutorials essay unix

Recently, Node has received a huge amount of development effort to improve its Windows support. However, most of us probably run Node on some flavour of Unix – whether it be a Linux, Mac OS, Solaris, or a non-fruit BSD.

As JavaScript enthusiasts we can do a lot in Unix with just a little bit of Node. This new essay series is a collection of tips and observations I’ve made about Unix and Node. If you’re interested in writing command-line tools or networking daemons, Node is a good choice, and you’ll see why over the next few weeks.

Folklore and Tradition

If you’re a solid programmer but lack fundamental Unix knowledge, I won’t hold it against you. The important thing to realise is learning Unix requires knowledge of traditions and philosophies. As stated by Eric S. Raymond in The Art of UNIX Programming:

If you are not a programmer, or you are a programmer who has had little contact with the Unix world, this may seem strange. But Unix has a culture; it has a distinctive art of programming; and it carries with it a powerful design philosophy. Understanding these traditions will help you build better software, even if you’re developing for a non-Unix platform.

This means learning to write Unix programs that behave the way seasoned Unix users expect isn’t always a case of looking up standards and best practices. One of the most famous comments on the philosophy of Unix is by Doug McIlroy:

Write programs that do one thing and do it well. Write programs to work together. Write programs to handle text streams, because that is a universal interface.

Does that sound familiar? Try changing the word “program” to “module”:

  • Write modules that do one thing and do it well.
  • Write modules that work together.
  • Write modules that handle events and streams.

In The Art of UNIX Programming, Raymond summarises many of these ideas and philosophies into a set of design rules that are readily available on Wikipedia: Unix philosophy.

Rule of Diversity: Distrust all claims for “one true way”.

Coming to Unix development from a web developer’s background requires a change in thinking. When working as a client-side developer, one may regularly refer to W3C specifications. However, when writing Node software for Unix, it’s likely that the philosophy of Unix developers will shape the application more than standards and specifications. To see why we need to take a look at Node’s relationship to POSIX.

POSIX

The family of standards that helps us write portable code is known as POSIX. This covers the C Standard Library, process creation and control, signals, pipes, and a lot more. In addition, the core Node developers have their own philosophy and concerns. For example, Node has to maintain portability with Windows. Certain aspects of POSIX don’t necessarily fit in with Node’s philosophy, hinted at here by Ryan Dahl while discussing the possibility of a Node POSIX library:

dup, dup2, fork are out of the question and will never be added. They do not coincide node’s philosophy. chroot is not useful but is a posix thing. The posix module I suggested was to support random user/permissions stuff like getpwnam(). I’d rather not have that if we can get away with it.

Ryan Dahl on an official POSIX library

This comment by Isaac Schlueter is also interesting:

So far, in any of the cases where we’d thought we’d need to split out a posix library, we’ve been able to find sane approaches for both Windows and Unix. Who knows if that’ll continue, but it’d be nice to not have to do require(“posix”) ever.

Isaac Schlueter on an official POSIX library

How does this affect us as developers interested in writing Unix software? The implications are that Node provides an opaque API layer that sits on top of the operating system, but this isn’t quite true. Differences in Node’s API between Windows and other operating systems are documented in Node’s API documentation. One example is path.join, which will correctly use backslashes in Windows and forward slashes elsewhere.

Design Principles

Extrapolating Raymond’s principles to Node development is an inspirational way to look at Node development. In my experience, writing monolithic applications with Node isn’t a sound architectural approach. I’ve found breaking applications down into small modules and binaries that do one thing well is a good idea. Remember that npm modules don’t have to be publicly released: set that private property to true in your package.json to ensure it isn’t published.

I’d add another rule to Eric’s list:

  • Rule of Sharing: Make supporting documentation, licensing, and tests clear and easy to find. Tests should be easy to run.

To allow people to easily run tests, include a "scripts": { "test": "make test" } so npm test can be used. Also, clearly license Node modules by adding something like this to package.json:

"licenses": [
  {
    "type": "MIT +no-false-attribs",
    "url": "http://github.com/isaacs/npm/raw/master/LICENSE"
  }
]

– From npm’s package.json

The Twelve-Factor App

Unix philosophy reminds me of The Twelve-Factor App by Adam Wiggins. This methodology is inspired by working on Heroku’s platform, which runs hundreds of thousands of applications. Remember how I mentioned POSIX defines signals? Well, knowledge of signals comes in handy when writing applications that behave correctly on a platform like Heroku:

Processes shut down gracefully when they receive a SIGTERM signal from the process manager. For a web process, graceful shutdown is achieved by ceasing to listen on the service port (thereby refusing any new requests), allowing any current requests to finish, and then exiting.

– From Disposability, The Twelve-Factor App

Running software “in the cloud” ultimately means running it on a platform with some level of POSIX compliance.

Conclusion

Unix might have its own culture and principles, but its philosophies can make us better Node developers. Write your next command-line application or daemon with Node, and you might be pleasantly surprised.

Node Roundup: 0.6.10, 0.7.3, Backbone.IO, Notes

08 Feb 2012 | By Alex Young | Comments | Tags node modules fibers backbone.js
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

0.6.10, 0.7.3

Node 0.6.10 was released last week. Of interest to Windows users is the following:

  • Add npm msysgit bash shim to msi installer
  • dgram: Implement udp multicast methods on Windows

Node 0.7.3 has also been released. This reverts support for isolates:

It was decided that the performance benefits that isolates offer (faster spin-up times for worker processes, faster inter-worker communication, possibly a lower memory footprint) are not actual bottlenecks for most people and do not outweigh the potential stability issues and intrusive changes to the code base that first-class support for isolates requires.

Ben Noordhuis finishes the commit message with “Good bye, isolates. We hardly knew ye”. I couldn’t find any discussions about this in the nodejs-dev group, but I noticed David Herron mention it here: Good bye isolates, Node.js hardly knew ye.

Backbone.IO

Backbone.IO (License: MIT, npm: backbone.io) by Scott Nelson is a Backbone.js module that can synchronise multiple clients. When a model is synced, the server-side code will trigger events on collections across multiple clients.

The server-side code uses a Connect-inspired middleware API. Notice the familiar signature:

var backend = backboneio.createBackend();

backend.use(function(req, res, next) {
    console.log(req.backend);
    console.log(req.method);
    console.log(JSON.stringify(req.model));
    next();
});

backend.use(backboneio.middleware.memoryStore());

Scott has included tests as well, which are built using Mocha and Sinon.

Notes

Notes by Oleg Podsechin is an example app built using his Common Node and Mongo Sync libraries. This is an effort to bring traditional declarative synchronous code to Node through node-fibers.

Here’s a taster:

// Get an array of notes
mongo.db('notes').getCollection('notes').find().toArray();

// Save a note
mongo.db('notes').getCollection('notes').save({ name: request.params.name });

jQuery Roundup: 1.7.2, Super Labels, jquery.textntags

07 Feb 2012 | By Alex Young | Comments | Tags jquery plugins forms
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery 1.7.2

jQuery 1.7.2 Beta 1 has been released. There are a lot of bug fixes, and some interesting API tweaks:

  • #5571: Allow chaining when passing undefined to any setter in jQuery
  • #8498: Animate hooks
  • #11119: The curCSS function needs only 2 arguments
  • #10931: Unit tests shouldn’t require Internet access

That last one is particularly useful if you need to run jQuery’s unit tests. Tests shouldn’t need a connection!

jQuery Super Labels

jQuery Super Labels (License: MIT) by Rémy Bach is a form field overlay plugin that hides labels when an input gains focus. It’ll work automatically with most text fields simply by calling $('form').superLabels(). If the label needs to be displayed in a different location, suitable options can be provided with labelLeft and labelTop.

Super Labels has advanced options for controlling animation easing and duration.

Another interesting plugin by the same author is jQuery Slash Search which will focus on a search field when / is typed.

jquery.textntags

textntags screenshot

jquery.textntags (License: MIT, GitHub: daniel-zahariev / jquery-textntags) by Daniel Zahariev is another @name input enhancement tool. A full example of it using Ajax to search looks like this:

$('textarea.tagged_text_ex2').textntags({
  onDataRequest: function(mode, query, triggerChar, callback) {
    $.getJSON('assets/data.json', function(responseData) {
      query = query.toLowerCase();
      responseData = _.filter(responseData, function(item) { return item.name.toLowerCase().indexOf(query) > -1; });
      callback.call(this, responseData);
    });
  }
});

This is an early version of the library, so the author doesn’t make any promises in terms of browser support. However, the documentation is solid and it ships with CSS, so it’s easy to drop into a project.

UIKit, Expect-dom, Patio

06 Feb 2012 | By Alex Young | Comments | Tags node testing jquery

UIKit

UIKit banner

TJ Holowaychuk’s latest project is UIKit (License: MIT, GitHub: visionmedia / uikit, npm: uikit). It’s a small library of decoupled components for creating web interfaces. Simple, structural markup and modular JavaScript is used to create widgets like a “card” that uses 3D transforms, dialogs, notification messages, and more.

UIKit reminded me of Nib, TJ’s library of Stylus mixins, utilities, and components. TJ stresses that UIKit isn’t a CSS framework like Bootstrap, but neither is it written with Stylus and Jade. Instead it functions as a loosely-knit set of components that can be built on.

Expect-dom

Expect-dom (License: MIT) by Kevin Dente is a set of DOM-related assertions for expect.js. Various assertions can be made, including attr, id, and html:

expect($('<div title="some title"></div>')).to.have.attr("title");
expect($(theEl)).to.have.html("<span>content</span>");

The author has adapted code from jasmine-jquery to create this library.

Patio

Patio (License: MIT, GitHub: Pollenware / patio, npm: patio) from Pollenware is an SQL library inspired by Sequel. It supports schema creation, migrations, queries, models, and associations. It even includes handy flow control related methods like then, removing the need to heavily nest certain asynchronous operations:

User.findById(1).then(function(user) {
  // SELECT * FROM user WHERE id = 1 
});

Patio also has some handy JavaScript-friendly utility methods:

User.toHash('id', 'name').then(function(nameIdMap) {
  // SELECT * FROM user 
  //{"1":"Bob Yukon"}
});

Full API documentation is also available: Patio API documentation.

The project still only has 11 GitHub followers, but it’s got an incredible amount of functionality already – check it out and give the authors some feedback!

StackHack, Ducks, Remote-Tilt, Simplify.js

03 Feb 2012 | By Alex Young | Comments | Tags node webgl testing games mobile

StackHack

StackHack screenshot

StackHack by Philip Deschaine and from PubNub is a WebGL demo that uses PubNub to create a massively multiplayer interactive block stacking game. The technical details are discussed in StackHack: A Massively-Multiplayer Mashup of PubNub and Three.js.

Let’s start with the server. I used Node.js with express to serve up our HTML, CSS, JavaScript. When a client connects, we generate a UUID, append some stuff and listen on that channel. Why do it this way? Why not just use a generic PubNub channel? Excellent question I wanted what’s known as an authoritative server.

The article includes more details behind both the client-side and server-side code.

Ducks, a WebGL Demo

Ducks screenshot

Ducks (GitHub: statico / webgl-demos / ducks) by Ian Langworth is a simple game demo that uses WebGL and sound, complete with animated models and reflections. The GLGE WebGL framework has been used, along with models from the COLLADA Basic Samples collection.

The game logic, in ducks / logic.js, is relatively clear and easy to follow, so it works as a great example of a small, manageable example of a WebGL game.

Remote-Tilt

Remote-Tilt (License: MIT, GitHub: remy / remote-tilt) by Remy Sharp can help test motion events without fooling around with a mobile device:

Testing motion events was never going to be easy task. You have two options, both of which suck. That’s where Remote-Tilt comes in. By including a single line of JavaScript you can emulate device motion events in your test page which can either be a regular browser or even a mobile emulator.

By including the Remote-Tilt polyfill on a page a popup will appear that allows motion events to be simulated:

Remote-Tilt motion emulator

Simplify.js

Simplify.js demo screenshot

Simplify.js (License: BSD, GitHub: mourner / simplify-js, npm: simplify-js) by Vladimir Agafonkin is a library for fast 2D/3D polyline simplification:

It is very useful when you deal with lines consisting of many tens of thousands of points, e.g. when you need to quickly render a 50k-points line on the browser (for charts, map routes, etc.).

The demo on the Simplify.js homepage shows how impressive the performance is, easily throwing around 50,000 points like it’s child’s play! The source for this project has been extracted from another of Vladimir’s interesting libraries, Leaflet, which is also worth checking out.

Mastering Console Logging

02 Feb 2012 | By Alex Young | Comments | Tags node modules tutorials

The console object crops up everywhere. But what is it, and what can it do? Most people seem to use it without realising the sheer convenience it can provide. Let’s take a look at where it comes from, and how to use it correctly.

Built-in vs. Host

The console object is what’s known as a host object in ECMAScript. Host objects are supplied by the host environment. Node’s documentation refers to console as a “global object”.

This is different to a native object which is an object in the ECMAScript implementation in question, and defined by the specification rather than the host environment. Built-in objects are similar, but are present when an ECMAScript program starts. In addition, built-in objects inherit from Object or Function whereas host objects might not.

Host objects may also not be available when execution starts. That’s why some browsers treat console differently depending on whether the output is visible or not. Notice that Mozilla’s documentation states that this behaviour has changed:

Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0) , the console object’s methods only work when the Web Console is open. Starting with Gecko 12.0, output is cached until the Web Console is opened, then displayed at that time.

Methods

Since console isn’t yet formally covered by a specification, implementations vary. In Node it’s closely tied to standard input output, referred to as “stdio” by the documentation. This gives rise to error and log methods that will be printed to the appropriate output stream.

Most implementations give us convenient ways of separating output for debugging messages, errors, and warnings:

console.log('This is merely an informational debug message');
console.warn('This is a warning');
console.error('This is an error');

These messages will be handled differently depending on the environment. Firefox 10’s built-in developer console will display an “X” next to the error, whereas Node will print to stderr.

Redirection

Console redirection example

When writing Node scripts, it’s a good idea to use console.error when displaying errors. It means that errors can be redirected in the shell – sometimes I don’t want to see standard output, but I do care about errors, so I’ll redirect the errors into a log file.

I/O redirection generally works like this: 1> will redirect to stdout, and 2> redirects stderror. Given this example:

console.log('This is just noisy debug stuff');
console.error('This means Alex broke something again');

Then running node test.js 1> debug.log 2> errors.log will redirect the debug and error messages to separate files. Using 1> will truncate the file to a length of zero, so to append messages 1>> and 2>> can be used instead.

 Inspection and Concatenation

In most browsers and Node, objects will be automatically printed in a readable format when using console.log. That means printing variables is possible without any extra effort:

console.log({ alex: "some dude" });

In Node, util.format is applied to the arguments, which runs util.inspect. Therefore, there’s no need to run console.log(util.inspect(value)) in Node!

Most implementations will automatically concatenate values:

var name = 'Alex';
console.log('Name:', name);
// Name: Alex

Notice how a space is automatically added? There’s no need to manually concatenate a value using console.log('Message: ' + value). In fact, doing this will mean the value won’t be automatically inspected.

Node’s format method uses Array.prototype.join to do this: lib/util.js.

Formatting

Recent implementations also provide nascent string substitution support:

console.log('Name: %s, Intergalactic Credits: %d.', 'Alex', -100).

Support for substitution strings isn’t exactly printf yet, and with supporting between environments varying somewhat.

Extras

Both Node and Mozilla provide console.dir: Node runs util.inspect on the supplied argument and prints the output to stderr. Conversely, Firefox will display an interactive version of the object, with disclosure triangles if necessary.

Need to quickly benchmark a slow operation? The console.time and console.timeEnd methods can also be used in both environments. The time method accepts a parameter which allows the timer to be named:

console.time('100-elements');
for (var i = 0; i < 100; i++) {
  ;
}
console.timeEnd('100-elements');

Stack traces can be displayed with console.trace(). Again, in Firefox this will be interactive, and in Node it’ll be redirected to stderr.

Conclusion

The console object provides a surprisingly useful amount of functionality. If you’re writing lightweight Node programs, or want to debug something in a relatively modern browser (or browser with suitable developer tools), then try to take advantage of it rather than relying on unnecessary libraries.

In general, when logging with console:

  • Use the correct logging method so redirection works as expected
  • Quickly append variables to messages using console.log('Message:', value)
  • Use console to automatically inspect variables

References

Node Roundup: Ryan Dahl Steps Down, Thimble, Mongo Model, Banking.js, Navcodec

01 Feb 2012 | By Alex Young | Comments | Tags node modules banking frameworks mongo
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

Ryan Dahl Steps Down

Ryan Dahl announced that he’s stepping down as “gatekeeper” and Isaac Schlueter will now take the lead. Many messages of gratitude were posted to the nodejs group in response.

Our energy will now be largely focused over the next few months on improving the third party module system experience including a website for browsing modules, a new addon build system, and binary installations from npm.

The thing that’s fascinated me most about Ryan and Node over the last three years is the creation and development of libuv. Ryan made a great screencast about libuv, and something about his attitude came across as relatively humble and reserved, which impressed me given the success of Node.

If you’ve followed Isaac’s blog you’ll know he has a different personality – I think it’s fair to say he’s got some strong opinions about software development, but argues them in a well-tempered manner. Time will tell how these different personalities will impact on Node’s overall development and community.

Meanwhile, Node 0.6.9 was released which brings back some missing dgram functionality, and includes bug fixes.

Thimble

Thimble (License: MIT, GitHub: MatthewMueller / thimble, npm: thimble) by Matthew Mueller is a new way of working with Express. It inserts two middleware layers that manipulates requests and assets to provide a more integrated way of working with client-side code. Thimble’s functionality is provided through plugins, which include:

  • Flatten: Introduces the include tag to HTML templates
  • Embed: Allows script tags to compile templates into functions
  • Package: Compiles an application

Matthew has created two examples of Thimble projects, available here: thimble / examples.

Mongo Model

Mongo Model (GitHub: alexeypetrushin / mongo-model, License: MIT, npm: mongo-model) by Alexey Petrushin is a new MongoDB library that can optionally work with fibers.

I had trouble running the library without CoffeeScript, so I installed it and ran the examples with coffee and they seemed to work. The mongo-model documentation is all CoffeeScript as well, so you may struggle to use it if you want to use it with JavaScript.

Banking.js

Banking.js (License: MIT, GitHub: euforic / banking.js, npm: banking) by Christian Sullivan is a unified API for North American banks. Rather than logging into a clunky web interface banking.getStatement can be used to get statement details.

Imagine scripting some Arduino hardware with a suitable Node Arduino package to disable your current debt in an amusing way!

Node libavcodec bindings

These Node libavcodec bindings (License: MIT, npm: navcodec) developed by Optimal Bits offer a new way to work with libavcodec in Node. The authors have aimed to create a new JavaScript API that works how JavaScript developers would expect:

navcodec = require('navcodec');

navcodec.open('myinput.mov', function(err, media) {
  if (media){
    media.addOutput('myoutput.mp4', {
      width: 640,
      height: 480,
      audioBitrate: 128000,
      videoBitrate: 500000
    });

    media.transcode(function(err, progress, time) {
      console.log(progress);
      if (progress === 100){
        console.log('Total transcoding time:' + time);
      }
    }
  }
});

This seems like an incredibly useful library for those that work with media. In particular, metadata extraction and thumbnail generation all become possible with navcodec.

jQuery Roundup: jPages, youRhere, jquery.lazyLoader, Deferred and Promise in jQuery

31 Jan 2012 | By Alex Young | Comments | Tags jquery plugins lazyloading pagination promises
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jPages

jPages (License: MIT, GitHub: luis-almeida / jPages) by Luis Almeida is a client-side pagination plugin that can page through a set of elements in an unordered list. Given some suitable HTML, perhaps containing a list of images:

<!-- Future navigation panel -->
<div class="holder"></div>

<!-- Item container (doesn't need to be an UL) -->
<ul id="itemContainer">
    <!-- Items -->
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Then to get pagination controls the only JavaScript we need to use is $('div.holder').jPages({ containerID : 'itemContainer' });.

The author has written lots of demos, applying the plugin to lazy loading images, or even using titles as links to create sub-navigation for a page.

youRhere

You Are Here

youRhere (License: MIT or GPL, GitHub: fastrd / youRhere) by Daniel Sternlicht transforms pages of text to allow the reader’s progress to be saved. The current mouse position is displayed with an arrow, and clicking on a line will highlight it. This can persist by using localStorage.

Basic usage is just $('#content').yourhere();.

jquery.lazyLoader

jquery.lazyLoader (License: MIT, GitHub: davetayls / jquery.lazyLoader by Dave Taylor aims to make image loading more responsive by loading images based on the browser viewport size. With carefully named images it can work pretty much automatically:

$('a').lazyLoader({
  img: function(url, windowWidth) {
    if (windowWidth >= 768){
      return url.replace(/.(jpg|gif|png)$/i, '-mega.$1'); 
    } else {
      return url;
    }
  }
});

jQuery plugin authors take note! Dave has raised the bar! He’s not only included tests, but he’s also running them through a CI server (davetayls/jquery.lazyLoader)! I’m not saying he’s the first person to do this, but given the amount of plugins we receive at DailyJS with no tests I found it a pleasant surprise.

Deferred and Promise in jQuery

Deferred and promise in jQuery by Edwin Martin is an introduction to the tools jQuery provides for working with these functional concepts.

So what is a deferred and what is the difference with a promise? As you have seen above, a promise is an object that is returned from an asynchronous function. You need a deferred when you write such a function yourself.

Edwin aims to explain how to use promises and $.Deferred, and also explain how they’re different.

HelsinkiJS February, Todo, Testing Backbone.js

30 Jan 2012 | By Alex Young | Comments | Tags libraries testing node browser events backbone.js

HelsinkiJS February

HelsinkiJS February has been announced, and will take place on the 16th of February at Codento. Two speakers are attending so far: Jarno Keskikangas and @polarblau.

If you want me to include your JavaScript event on DailyJS, just @dailyjs or use our contact form to get in touch!

Todo

Todo screenshot

Todo (License: MIT, npm: todo) by Veselin Todorov is a small todo list application for the command-line interface, written with Node. I like seeing clever Unix utilities and command-line applications made with Node, and this one seems cool with its coloured UI and UTF-8 characters.

The interesting thing about this tool is it’s built using Flatiron. Flatiron is designed to be adaptable, and although it’s aimed at web development, anything can (and will) be built with it.

If you’re a fellow command-line hacker and have mastered pretty colours and option parsing, then another useful thing is to include a man page. This is supported by npm: check out npm help json and scroll down to the “man” section.

Testing Backbone.js Best Practices

Testing Backbone.js Best Practices by Jonathan Eatherly includes some useful tips. I’ve often felt like testing Backbone.js is a little bit hard to visualise, but Jonathan makes a few confusing aspects much clearer:

By default a Backbone view will create an in-memory jQuery object containing a single DIV element … This means we don’t have to see the ugly injecting and removing of content on the page as the tests run, there is no need to clean up the DOM after each test iteration, and our test suite will run much faster.

His examples use the Jasmine test framework, but much of this advice can be applied to any test framework.

Resumable.js, Open Source Android WebGL Implementation, Coderbyte

27 Jan 2012 | By Alex Young | Comments | Tags node modules webgl html5

Resumable.js

Resumable.js (GitHub: 23 / resumable.js, License: MIT) from 23 is a library for managing concurrent and resumable uploads using the HTML5 File API:

The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes. This allows uploads to automatically resume uploading after a network connection is lost either locally or to the server.

Since the File API has limited support, the author’s example should degrade:

var r = new Resumable({
  target: '/api/photo/redeem-upload-token',
  query: { upload_token:'my_token' }
});
// Resumable.js isn't supported, fall back on a different method
if (!r.support) location.href = '/old-uploader';

Resumable.js’s API is event based, and events include fileAdded, fileSuccess, and fileError.

To implement the server-side part of this, the state of uploaded chunks should be managed. The documentation notes that on unstable networks the same chunk may be uploaded more than once, so appropriate HTTP status codes should be returned as chunks are received.

 Open Source Android WebGL Implementation

Sony Ericsson announced WebGL support for Android 4.0 and published the source on GitHub at sonyericssondev / WebGL:

It is based on ics-mr1, and requires that webkit is built with USE_ACCELERATED_COMPOSITING and that the browser application is built with hardwareAccelerated=true.

This is the code that will be used on forthcoming Xperia phones running Ice Cream Sandwich.

Coderbyte

Coderbyte is a service designed to “practice and perfect” programming skills. At the moment it includes challenges for client-side JavaScript, and there are some guest challenges that you can try out here: Coderbyte Coding Area.

With the right community tools I think Coderbyte could be a little bit like Stack Overflow in reverse.

Using Node Modules Effectively

26 Jan 2012 | By Alex Young | Comments | Tags node modules tutorials

Node’s module system is deceptively clever. On the surface it seems like it provides just enough functionality to get by, but it can go a long way towards helping to structure an application elegantly. Node’s official documentation covers all of the major features, yet many modules sent in for review at DailyJS don’t use these techniques where they could.

For this article I’ll be using Express applications as an example, but these techniques can be applied to any Node application, whether it’s a command-line tool or TCP service.

Splitting up Large Files

Most Express tutorials and examples have a monolithic file that does everything, but Node’s module system gives us some tools to split the file up without much effort. Express routes are a good target for reorganisation.

Given a set of routes:

app.get('/', function() {});

app.get('/users', function() {});
app.get('/users/:id', function() {});

Then we can reorganise them by creating a folder called routes/, and creating files with the following structure:

routes/
├── index.js
├── main.js
└── users.js

Express developers often use main.js as the convention for things that aren’t easily split into RESTful groups. In this example I’d put the '/' route in there. The extra file, index.js would look like this:

require('./main');
require('./users');

Now our app.js file that loads Express and instantiates an app object can have all of the routes removed and replaced with require('./routes');.

Two things make this example work: Node will automatically look inside a folder for index.js, and app is a global.

In Node, defining app using var will restrict its scope to the current module. By purposefully not defining app with var it’s accessible inside the routes files. Otherwise we’d have to pass it to each routes module somehow. I see modules structured like this a lot:

module.exports = function(app) {
  app.get('/thing', function() {});
};

Speaking of coupling, using globals can quickly lead to tightly coupled code that makes reuse harder. Making app global in an Express application can help cut down a little bit of boilerplate. I generally keep my routes lightweight so the core functionality is less coupled to Express. In addition, I’ll often create new modules for functionality that seems generic, so I can reuse it in other Express apps.

Configurable Folders as Modules

Node can also be told where to look when loading modules by using a package.json file. This allows the module’s main file to have a different name:

{ "name" : "sub-module"
, "main" : "./path/main.js" }

This seems to be used a lot less than the index.js convention, but it may help you fit it to your application’s internal naming scheme.

Tracking require

Node sets require.main to its module when run directly, but doesn’t when loaded using require. I’ve also used module.parent to achieve this in the past.

These values are often used to determine if an Express application should call app.listen() or not, because not all tests want the same behaviour so conditionally listening based on environment isn’t always the best approach.

For example:

if (!module.parent) {
  app.listen();
}

Private Modules

Using package.json to manage dependencies and other metadata is great, even for private, closed source projects. However, there’s always the nagging feeling that someone could accidentally publish a package when working on commercially sensitive projects. Fortunately, setting "private": true will prevent npm from publishing the package.

AMD

If you’re primarily a client-side developer and have been writing libraries using AMD, using it in Node may appeal to you. However, the nodejs-dev group has had several “mile-high threads” on the subject, and support has moved to userland.

RequireJS provides a Node implementation for AMD. The amdefine module implements define.

I’d be tempted to load define as a global in a main module using define = (require('amdefine'))(module);. This allows modules to be structured with a leading define( call, so they could be shared between the browser and server without any boilerplate.

Node Roundup: 0.6.8 and 0.7.1, Summit Coverage, Connect Router, Mongolian DeadBeef, AWS

25 Jan 2012 | By Alex Young | Comments | Tags node modules express middleware mongo amazon
You can send in your Node projects for review through our contact form or @dailyjs.

Node 0.6.8 and 0.7.1

Node 0.6.8 is out. V8 and npm are both updated in this release, and there are also numerous bug fixes including one for the cluster module and another for fs.stat in Windows.

Meanwhile, the unstable branch has been updated to Node 0.7.1. I noticed that this brings V8 up to 3.8.8 which is the latest version in the V8 Changelog.

Node Summit Coverage

This week is the Node Summit, and David Herron has been writing up some detailed coverage at nodejs.davidherron.com/. This includes talks from Microsoft, Yahoo, VMWare, and Heroku, so it’s interesting stuff for anyone interested in Node, the cloud, and the near future of Node development.

Node is a great fit for some applications, a terrible fit for others. There’s a danger in the Node excitement to try and use Node to solve every problem. Hence, PAAS needs to be polyglot.

From Node.js Summit: Platform as a Service.

 Connect Router

Connect Router syntax diagram

Connect Router (License: MIT, npm: connect-router) by Craig Condon is a unique take on routing in Express by using strings to express relationships between routes, HTTP methods, and middleware. Routes can be loaded from a file or directory, making splitting up applications into logical groupings extremely easy.

The basic API looks like this:

app.use(connectRouter(function(router) {
  router.on('parseBody', express.bodyParser());

  router.on('user/exists', function(req, res, next) {
    if (userExists(req.query.username)) {
      res.send('That username already exists');
      return;
    }
    next();
  });

  router.on('-method=POST parseBody -> user/exists -> signup', function(req, res, next) {
    res.send('Successfuly signed up ');
  });
}));

Notice that existing Express middleware can be applied to a router – in this case bodyParser has been used.

Rather than using an API based around HTTP verbs, Craig’s routers look like EventEmitter objects, and use a DSL to define what HTTP verbs should be applied. Middleware can be triggered by listing it like this: 'user/exists -> signup'. Middleware can also be greedy, which is a convenient way of applying permissions to sets of routes.

Mongolian DeadBeef

Have you always wanted a Node MongoDB driver that has the same API as MongoDB’s shell? It seems so obvious, yet it’s tantalizingly hard to find such a module. Oleg Podsechin said he’s been using Mongolian DeadBeef (License: zlib, npm: mongolian) by Marcello Bastéa-Forte and it looks like it does the job admirably. It even includes GridFS support using streams.

Collections can be accessed using db.collection(), and then records can be found and inserted with familiar methods like collection.insert(), collection.findOne(), and collection.find. It allows queries to be built up using chains, like this: collection.find().limit(5).sort({ created: 1 }).

Amazon Web Services Node Library

It seems like Amazon are hell-bent on creating a service for everything in the universe. How can a Node hacker take advantage of this? Well, aws-lib (License: MIT, npm: aws-lib) by Mirko Kiefer is an Amazon Web Services library that provides clients for EC2, Product Advertising API, SimpleDB, SQS, SNS, SES, and ELB.

The project is dubbed as “simple” but already seems fairly extensive. Thanks to some recent Hacker News coverage it currently has 260 followers on GitHub.

jQuery Roundup: Publish Subscribe, Transparency, slabText

24 Jan 2012 | By Alex Young | Comments | Tags jquery plugins graphics text events templating
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

Publish Subscribe Plugin

Joseph Zimmerman’s Publish Subscribe Plugin (License: GPL) is an implementation of the aforementioned messaging pattern aimed at browser-based JavaScript:

var handle = $.subscribe('foo', function(topic, data) {
  console.log(data, topic);
});

$.publish('foo bar', 'This is some data');

$.unsubscribe(handle);

The author has implemented it with core jQuery methods like $.type and $.each so the source is readily understandable.

Transparency

Transparency (GitHub: leonidas / transparency, License: MIT) by Jarno Keskikangas is a template engine for jQuery that maps JSON to DOM elements using a $.render method:

var hello = {
  hello:   'Hello',
  goodbye: 'Goodbye!'
};

$('.container').render(hello);

This example would write the values to tags matching the selectors .hello and .goodbye:

Transparency relies on convention over configuration and requires you to have 1:1 match between CSS classes and JSON objects. The idea is to minimize the cognitive noise you have to deal with. Just call $('.container').render(data) and move on.

There’s a detailed blog post about Transparency here: Implementing Semantic Anti-Templating With jQuery.

slabText

slabText example

slabText (GitHub: freqdec / slabText, License: MIT/GPLv2) by Brian McAllister splits headlines into rows, and resizes them to fill the available space. This works as the browser viewport changes.

Brian notes that this is based on Erik Loyer’s slabtype algorithm, which is interesting reading for those inspired by FitText.

Gbone.js, Writing Browser Extensions, Font.js

23 Jan 2012 | By Alex Young | Comments | Tags backbone.js extensions plugins fonts

Gbone.js

Gbone.js (License: MIT) by Gobhi Theivendran is a framework built on top of Backbone.js for building mobile applications, inspired by Spine Mobile. It contains several classes that extend Backbone’s classes to make it easier to build mobile applications. For example, Gbone.Stage contains multiple Gbone.Panels, and the panels are managed internally by a panel manager. They have a default skeleton like this:

<div class="container">
  <header></header>
  <article></article>
</div>

Panels can be activated and deactivated, animated using a transition. Only one stage and panel can be active at one time, so the end result is similar to native Android and iOS interfaces.

There’s a Gbone.js demo app, which is a rewrite of currency.io. Gbone.js works with both jQuery and Zepto.

Writing Browser Extensions - Comparing Firefox, Chrome and Opera

Writing Browser Extensions - Comparing Firefox, Chrome and Opera by Parashuram Narasimhan explores writing a browser extension for multiple browsers. The author covers a lot of topics, including manifest files, background processes, message passing, and debugging.

This tutorial is based on Parashuram’s experiences writing the MediaPlus, so some of the coverage is specific to that, but it’s general enough to get a good overview of how difficult it is to support all of the major browsers with a single extension.

Font.js

Font.js (GitHub: Pomax / Font.js, License: MIT) by Mike Kamermans is a font API for client-side JavaScript. Fonts can be loaded on demand, and an onload callback will run once the font has been loaded:

var font = new Font();

font.onload = function() {
  // The new font has loaded
};

font.src = 'http://example.com/font.ttf';

Metrics for a font can be accessed. For example, font.metrics.leading will give the line height.

Flavors of JavaScript, 3D Events, LowKick

20 Jan 2012 | By Alex Young | Comments | Tags webgl graphics language ECMAScript testing

Different Flavors of JavaScript

In Different flavors of JavaScript by Lakshan Perera, ECMAScript, ES3, ES5, and ES.Next (Harmony) are explained. Lakshan gives helpful links in context, like es5.github.com, and gives hits on what browser support is available.

For related reading, I touched on some of these areas before in the History of JavaScript series.

DOM Events in 3D Space

DOM Events in 3D Space is a tutorial by Jerome Etienne that demonstrates how to use threex.domevent.js. The 3D DOM event demo shows how this works – click on each teapot and different animations will be triggered. THREE.Ray is used, in particular the intersectScene method, to determine if an event intersects an object.

Jerome has also recently published Boilerplate Builder for Three.js which allows a customised set of HTML, JavaScript, and CSS to be generated that includes everything needed to get started with three.js.

LowKick

LowKick by E. Azer Koçulu simplifies running tests in multiple JavaScript environments. For example:

./bin/lowkick command ie6 test/config.json

This example, given suitable tools, will run tests in IE using VirtualBox. Headless testing is documented in the project’s readme, but it’ll need a little bit of effort to get it working.

Other drivers can be used, or added through configuration files. For example, LowKick comes with a Node driver, VirtualBox, and “virtualbox-ie”.

Semicolons, Objectively

19 Jan 2012 | By Alex Young | Comments | Tags node style language

Last week in Programming Styles in the Node Community I discussed the styles of three prominent developers in the Node community. The ensuing debate mainly focused on semicolons. Rather than telling you my opinion on the topic, I’d like to explore it objectively so you can make your own decision on whether to use them or not.

Style and semantics aside: how are semicolons handled by minimizers? Is it safe to write a client-side library without semicolons?

Let’s look at the two most popular minimizers according to JavaScript Developer Survey 2011 Results.

YUI Compressor

YUI Compressor can be downloaded as a zip file and includes a jar file in the build/ directory that can be used like this:

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

This basic usage will insert semicolons. If you write a file without semicolons, it’ll remove newlines and insert them for you. It’ll also add semicolons to the end of a file, so concatenating multiple files is safe.

Closure Compiler

Closure Compiler is also a Java application, and there’s a web interface for it at closure-compiler.appspot.com. By default semicolons are also inserted, and a semicolon will again be appended to the end of the file to aid concatenation.

In cases where usage is ambiguous, Closure Compiler will raise JSC_SUSPICIOUS_SEMICOLON. Try this in the web interface:

if (true);
else alert('no');

The Closure Error and Warning Reference documentation explains this warning, which can be turned off:

The compiler assumes that this is a mistake, and that you meant to have a statement between if (true) and the semi-colon.

Both of these libraries will also strip unnecessary semicolons. For example, given this simple example:

function hello(longName) {
  alert('Hello, ' + longName);
}
hello('New User');

The semicolon after alert will be removed.

Standards

Standard ECMA-262 and previous versions of ECMAScript include “Automatic Semicolon Insertion”:

Certain ECMAScript statements (empty statement, variable statement, expression statement, do-while statement, continue statement, break statement, return statement, and throw statement) must be terminated with semicolons. […] For convenience, however, such semicolons may be omitted from the source text in certain situations.

Prior to this edition of ECMAScript, deprecating or removing this feature was discussed by Brendan Eich and Douglas Crockford in es3.1:semicolon_insertion. Crockford said:

Strong language in a spec is not likely to work. A carrot of better features that induce rewriting works better, but nothing is predictable.

This “carrot” approach comes up frequently in the discussion of ECMAScript’s development, and it can be seen under the list of Themes in the index to the Harmony namespace at the ECMAScript Wiki: harmony:harmony.

Conclusion

When deciding on JavaScript style, the debate on whether to use semicolons will never end. Objectively we can say that:

  • The tools to write client-side code without semicolons exist and are widely used
  • The specification explains how semicolon insertion works, and even includes concrete examples
  • Semicolons are going to stay around for a while

Other languages have optional semicolons. Take Ruby for example: the community at large embraced writing code without semicolons. However, many JavaScript developers learned the language without the benefit of newer tools that help work safely without semicolons. Others are working with server-side JavaScript, running code on one platform rather than multiple browsers and meddling HTTP proxies. They’re able to embrace styles that were previously deemed “unsafe”.

The nature of the language is changing, so expect to see less semicolons in the future.

However, if you like the “machine”-like look of semicolons, and feel more comfortable expressing your intent by using them judiciously, then by all means use them!

Keep your style consistent, and enjoy writing JavaScript.