The JavaScript blog.


jquery date plugins time text state-machine

jQuery Roundup: Orangevolt Ampere, Succinct, jQuery Age

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

Orangevolt Ampere

Orangevolt Ampere

If you like state machines, then you might find Orangevolt Ampere (GitHub: lgersman / jquery.orangevolt-ampere, License: MIT/GPL2) interesting. Created by Lars Gersmann, it uses AngularJS, jQuery, Boostrap, and Font Awesome and attempts to help you model single page applications by encapsulating data operations and route transitions in state machines. That means your applications get some features for "free", like infinite undo/redo.

The author has made a presentation about Orangevolt Ampere that gently introduces the main concepts, which I recommend looking at before diving into the code.

The wizard example is a good example of how state machines can model something that would ordinarily be awkward to work with.


Succinct (GitHub: micjamking / succinct, License: MIT) by Mike King is a text truncation plugin. It truncates based on the simplest case where you know the number of characters you want to display: $('.truncate').succinct({ size: 80 }) will cut text down to 80 characters and add an ellipsis.

jQuery Age

jQuery Age (GitHub: ksylvest / jquery-age) by Kevin Sylvestre formats and tracks dates and times as human readable text. It allows the text suffixes and grammatical formatting to be overridden, so it could be internationalised as needed.

<time datetime="2010-01-01T12:00:00Z" class="age">January 1, 2010 12:00</time>  
<time datetime="2020-01-01T12:00:00Z" class="age">January 1, 2020 12:00</time>

<script type="text/javascript">  


frameworks libraries date history node modules time keyboard ender responsive

Ender Roundup: tablesort.js, Moment.js, jwerty, SelectNav.js, ender-events, ender-assert, Categorizr.js, Arbiter

Posted on .

You can send in your Ender-related projects for review through our contact form or @dailyjs. Be sure to also update the Ender package list page on the Ender wiki.


tablesort.js (GitHub: tristen/tablesort, npm / Ender: tablesort) by Tristen Brown is a dependency-free sorting library for HTML tables. tablesort.js can be invoked stand-alone via new Tablesort(document.getElementById('table-id')) or $('#table-id').tablesort() method from within Ender.

Olivier Vaillancourt has written a small review of tablesort.js for use in Ender on Twitter Bootstrap tables.


Moment.js (GitHub: timrwood/moment, npm / Ender: moment) by Tim Wood is small, yet very comprehensive date and time handling library.


Moment.js was mentioned last year on DailyJS but it now has a simple Ender bridge allowing you to pack it neatly into Ender builds for use via $.ender(). Plus, it's an absolutely fantastic library for anything date/time related so it's worth mentioning again. Be sure to scan the docs to see just how much this library can do.

$.moment().add('hours', 1).fromNow(); // "1 hour ago"

// manipulate
$.moment().add('days', 7).subtract('months', 1).year(2009).hours(0).minutes(0).seconds(0);

// parse dates in different formats
var day = $.moment("12-25-1995", "MM-DD-YYYY");

var a = $.moment([2010, 1, 14, 15, 25, 50, 125]);  
a.format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"  
a.format("ddd, hA"); // "Sun, 3PM"

// operate on different 'moment' objects
var a = $.moment([2007, 0]);  
var b = $.moment([2008, 5]);  
a.diff(b, 'years'); // 1  
a.diff(b, 'years', true); // 1.5  

The project maintainers also follow a rigorous release methodology, making great use of git branches, something that is not often found on smaller open source libraries.


jwerty (GitHub: keithamus/jwerty, Licence: MIT, npm / Ender: jwerty) by Keith Cirkel is a small keyboard event handling library which can bind, fire and assert key combination strings against elements and events.

$.key('ctrl+shift+P', function () { [...] });
$.key('⌃+⇧+P', function () { [...] });

// specify optional keys
$.key('⌃+⇧+P/⌘+⇧+P', function () { [...] });

// key sequences
$.key('↑,↑,↓,↓,←,→,←,→,B,A,↩', function () { [...] });

// pass in a selector to bind a shortcut local to that element
$.key('⌃+⇧+P/⌘+⇧+P', function () { [...] }, 'input.email', '#myForm');

// use `$.event` as a decorator, to bind events your own way
$('#myinput').bind('keydown', $.keyEvent('⌃+⇧+P/⌘+⇧+P', function () { [...] }));

// use `$.isKey` to check a key combo against a keyboard event
function (event) {  
    if ( $.isKey('⌃+⇧+P', event) ) { [...] }

// use `$.fireKey` to send keyboard events to other places
$.fireKey('enter', 'input:first-child', '#myForm');


SelectNav.js (GitHub: lukaszfiszer/selectnav.js, npm / Ender: selectnav.js) by Lukasz Fiszer is a small library that will convert your website's navigation into a <select> menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices. SelectNav.js is inspired by TinyNav.js for jQuery.

ender-events and ender-assert

ender-events (GitHub: amccollum/ender-events, Licence: MIT, npm / Ender: ender-events) and ender-assert (GitHub: amccollum/ender-assert, Licence: MIT, npm / Ender: ender-assert) are two packages by Andrew McCollum, previously bundled in his node-compat library. ender-events gives you an implementation of the NodeJS EventEmitter class in your browser, while ender-assert gives you a browser version of the NodeJS assert module.

Andrew also has a tiny extension to Bonzo, the DOM utility included in Ender's starter pack (The Jeesh), named ender-remove that simply triggers a 'remove' event when nodes are removed from the DOM. Which can be helpful for performing clean-up actions.


Categorizr.js (GitHub: Skookum/categorizr.js, Licence: MIT, npm / Ender: categorizr) by Dustan Kasten is a JavaScript port of the Categorizr PHP script by Brett Jankord.

Categorizr gives you $.isDesktop() $.isTablet() $.isTV() $.isMobile() methods to determine the current device.


Arbiter (GitHub: iamdustan/arbiter, Licence: MIT, npm / Ender: arbiter) also by Dustan Kasten is a tiny library for managing the HTML5 history interface via pushState(), using AJAX requests to load new content upon request.


graphics date node modules

Node Roundup: 0.7, Cromag, Servitude, Magician

Posted on .

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

Node 0.7

Node 0.7.0 was announced on the Node blog, which marks the first release of the new unstable series:

Almost all users will want to remain using the stable v0.6 releases

This version includes experimental isolates support. There's a lot of discussion on this in the Node v0.7.0 nodejs group thread. Ben Noordhuis gave a brief overview:

Isolates are (will be) API-compatible with child processes. So you call child_process.fork({thread:true}) and it will spawn a new isolate instead a new process.

Isolates are something that will crop up a lot more as Node heads towards 0.8, so it's worth being aware of what they are and how they work.


Cromag (License: MIT, npm: cromag) by Jerry Sievert is named after the fact it doesn't use monkey patching, unlike a lot of date libraries. We've recently seen some extremely solid date libraries, including XDate, and Cromag is another offering with a different API.

Cromag currently offers a slew of methods to manipulate dates and times, which are documented in the Cromag readme. The author has also included tests written with Vows, so it should be fairly easy to hack and patch it.


Servitude (GitHub: JerrySievert / servitude, License: MIT/X11, npm: servitude) also by Jerry Sievert, helps inject CSS and JavaScript into the DOM to cut down on requests. It can also optionally cache requests and mangle them with Uglify.

Jerry's examples demonstrate Servitude being used with Bricks which is his Node web framework. Servitude's plugin signature looks similar to Connect middleware, but I don't think Bricks uses the same API for the request and response objects.


Magician (License: MIT, npm: magician) by Vadim Demedes is an ImageMagick library. The command-line ImageMagick libraries are required, but once they're installed lots of image manipulation tools are possible from within your Node applications.


libraries date screencasts time maths backbone.js

Backbone.js Screencasts, XDate, JavaScript BigInteger Library

Posted on .

Backbone.js Screencasts

Backbone.js Screencasts is a commercial set of
Backbone.js tutorials from 30 Cubits that costs \$9 (until November 9th, then \$18 thereafter) for 106 minutes of videos. The videos cover the
core Backbone.js functionality like views, routers, events, models,
collections, and also how to use other JavaScript techniques alongside
your Backbone.js code.

There's a preview of the content on Vimeo here: Backbone.js Quickly -


XDate (GitHub: arshaw / xdate, License: dual MIT and GPL)
by Adam Shaw is a wrapper around Date that provides
improved date parsing, formatting, and manipulation. XDate format
really help with
formatting dates, which I find myself doing a lot lately in Node or
single page applications.

Here's an example of XDate's formatting method:

new XDate(2011, 0, 1, 6, 0).toString('d/M/yy h(:mm)TT');

Another useful feature of this library is the set of XDate diffing
. They provide a friendly API
around date subtraction.

Most of XDate's methods return an XDate, so it's chainable

d1 = new XDate();
d2 = d1.clone()

JavaScript BigInteger Library

The JavaScript BigInteger Library
(GitHub: silentmatt / javascript-biginteger,
License: MIT) by Matthew Crumley is a BigInteger library for
JavaScript. The author has written detailed blog posts on how the
library works and the algorithms behind it:

If you look at the source, you'll probably notice that I'm actually using base 10000000, not base 10. I'm using decimal in these examples because it makes things clearer but everything works pretty much exactly the same way in any base. Using a larger base just makes things more efficient because you get 7 digits in each array entry.

Matthew created this library to support his Google Chrome Scientific


jquery events date plugins

jQuery Roundup: Timeago, glDatePicker, Boston Conference

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).


Timeago (GitHub: rmm5t / jquery-timeago, License:
MIT) by Ryan McGeary generates fuzzy timestamps (like "less than a minute ago") from ISO 8601 formatted dates and times:


It even has i18n support!

This plugin takes advantage of the Datetime Design



glDatePicker (GitHub: glad / glDatePicker) by Gautam Lad is a
lightweight date picker, featuring:

  • Forward/backward navigation
  • Current date highlight
  • Various date selection and navigation restriction options
  • Styles per-date picker

The most basic usage is just \$('#date1').glDatePicker(),
and there are lots of examples on the project's homepage.

jQuery Conference: Boston

The jQuery Boston conference will be on the October 1-2, 2011, at the Royal
. Speakers include:

  • Ben Alman
  • Yehuda Katz
  • Rick Waldron
  • Adam Sontag
  • Jörn Zaefferer
  • John Resig

Registration is open and costs \$299.00 for the two day conference.