The JavaScript blog.


jquery plugins history bootstrap jquery-ui datepicker

jQuery Roundup: Sco.js, Datepicker Skins, LocationHandler

Posted on .

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


Sco.js (GitHub: terebentina / sco.js, License: Apache 2.0) by Dan Caragea is a collection of Bootstrap components. They can be dropped into an existing Bootstrap project, or used separately as well.

Some of the plugins are replacements of the Bootstrap equivalents, but prefixed with $.scojs_. There are also a few plugins that are unique to Sco.js, like $.scojs_valid for validating forms, and $.scojs_countdown for displaying a stopwatch-style timer.

In cases where Sco.js replaces Bootstrap plugins, the author has been motivated by simplifying the underlying markup and reducing the reliance on IDs.

Dan has included tests, and full documentation for each plugin.

jQuery Datepicker Skins

jQuery datepicker skins

Artan Sinani sent in these jQuery datepicker skins (GitHub: rtsinani / jquery-datepicker-skins). They're tested with jQuery UI v1.10.1 and jQuery 1.9.1, so they should work with new projects quite nicely.


LocationHandler (GitHub: slv / LocationHandler) by Michele Salvini is a plugin for managing pushState and onpopstate. It emits events for various stages of the history change life cycle. Each supported state is documented in the readme, but the basic usage looks like this:

$(document).ready(function() {
  var locationHandler = new LocationHandler({
    locationWillChange: function(change) {
    locationDidChange: function(change) {

The change object has properties for the from/to URLs, and page titles as well.


jquery html5 plugins history pjax tables

jQuery Roundup: Joconut, jQuery Table Sort, jQuery.pushevent

Posted on .

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


Joconut (License: MIT) by Vadim Demedes is an alternative implementation of Chris Wanstrath's pjax plugin. Joconut is about 1K smaller (I compared them both gzipped and minified myself), and it also loads JavaScript and CSS automatically.

Adding Joconut to a page will cause requests to the current host to load using $.ajax. To maintain history, it uses history.pushState, and degrades to onhashchange. Several internal events can be bound to, which is useful for things like error handling:

$.joconut.on('error', function() {
  alert('Error while loading new page!');

Stupid jQuery Table Sort

Stupid jQuery Table Sort (GitHub: joequery / Stupid-Table-Plugin, License: MIT) by Joseph McCullough is a simple table sorting plugin based around Array.prototype.sort:

As long as you understand basic JavaScript sorting, you can make this plugin do as much or as little as you want.

Callbacks can be supplied for custom sorting based on type. In Joseph's example, he's set a th class of type-date, then passed in a date callback:

  'date': function(a,b) {


jQuery.pushevent (License: GPL) by "yeikos" helps manage the order events will be fired. This example causes the order of the events to be swapped:

$('button').on('click.first', function() {
}).on('click.second', function() {

The author also sent in two more plugins:


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.


language history hoj

History of JavaScript: Part 8

Posted on .

This article is part 8 of our History of JavaScript series. Last week I
covered the features in ECMAScript 5. These are the core language
features that have partly appeared in browsers and interpreters. The
other piece of the puzzle is the complimentary web APIs that we can
expect to see now or in the near future.

Although many of these APIs are published by the W3C, the WHATWG
community played an important role in the development of HTML5.


WHATWG was founded by people from Apple, the Mozilla Foundation, and
Opera Software in 2004. The group was founded partly as a reaction
against the direction the W3C were taking HTML through XHTML.

It might be some time before HTML5 is recommended for production use,
but with initiatives like this we already have access to some of these
APIs in recent browsers.

Web Workers

The idea behind Web Workers is to allow developers to spawn background
workers running in parallel to the main page's thread. Demonstrations
have already been created that run in modern browsers (we've talked
about the API on this blog before).

File API

The File API allows
programmatic manipulation of files. It addresses the limitations of
current browser file handling to allow us to handle multiple files,
binary data, file metadata, and error handling.

Read more in HTML5 File


Canvas makes programmatic drawing easier. This is another W3C specification,
currently at the working draft stage.

Other APIs


WHATWG played an important role in the direction of the web's future.
The desire for more "application-like" features are useful if you're an
application developer. If you're a designer it means you'll have richer
tools for creating more reliable and intuitive user experiences.

Many UI issues can be overcome without specific API support -- drag and
drop support would be nice but we've been doing it for years. And even
though there are good techniques for overcoming the single origin
policy, better messaging would be nice, especially for real-time

Combining the File API with more modern messaging and offline
capabilities will make web apps suddenly feel more like desktop apps in
a way they haven't before (without Java or Flash). Pure HTML and
JavaScript manipulating local binary data is really the last piece of
the puzzle, and some browsers already support it.

If you want to read more about HTML5 APIs, if you use the WHATWG
there are
annotations with information about browser support, tests, and links to


language history hoj ecmascript5

History of JavaScript: Part 7

Posted on .

This article is part 7 of our History of JavaScript series. Last week I
covered the history of JavaScript animation. This week I'll take a look
at ECMAScript 5.

JavaScript 2

If you recall part 3, JavaScript
2 died as the community fought over the direction of the language's
future. ECMA-262 5th edition was approved in
The original press release states:

Work on future ECMAScript editions continues as part of the previously announced ECMAScript Harmony project.

ECMAScript 5th Edition

ECMAScript 5th Edition isn't as radical as JavaScript 2 was supposed to
be. It's a very different beast. The main changes are relatively

  • Array methods: indexOf, lastIndexOf, forEach, filter, every, map, some
  • String.trim: remove whitespace from the start and end of a string
  • Native JSON
  • Date: now, toISOString, parse

There are also some more fundamental language changes:

  • Function.prototype.bind
  • Updated object model
  • Strict mode
  • Constants
  • Getters and setters

Updated Object Model

Object gets a lot of new methods: Object.create, Object.getPrototypeOf,
Object.keys, Object.getOwnPropertyNames, object descriptors,
Object.seal, Object.freeze.

I don't want to write about all of these new Object methods, but
basically: we now have a way of freezing objects, and safely enumerating
over methods that want to be enumerated over.

There's coverage in Enhanced Scripting in IE9: ECMAScript 5 Support and


These methods will give more control to API authors and a greater sense
of control over objects.

Strict mode

use strict; will instruct the interpreter to run with
strict mode. This is a useful way of ensuring that code only uses
ECMAScript features, rather than a dialect:

The strict variant of ECMAScript is commonly referred to as the strict mode of the language. Strict mode selection and use of the strict mode syntax and semantics of ECMAScript is explicitly made at the level of individual ECMAScript code units.


Constants aren't actually in ECMAScript 5, const is marked
as a future reserved word. Some interpreters support it already,
although I wouldn't rely on the behaviour the exhibit being totally

Getters and Setters

The keywords get and set are used to decorate
functions that are getters or setters:

user = {
  first_name: 'Alex',
  last_name: 'Young',

  get full_name() { return this.first_name + ' ' + this.last_name; },

  set full_name(name) {
    name = name.split(' ');
    this.first_name = name[0];
    this.last_name = name[1];

// returns: Alex Young
user.full_name = 'Alex Smith'
// returns: Alex Smith

You can already use this in Rhino and Firefox, as well as V8 and
probably lots of other interpreters.

This is being used out there in the wild, so it's worth getting used to
the syntax.


ECMAScript 5 adds enough syntax sugar to keep developers happy for the
foreseeable future. It also addresses some areas in the object model
that we were left to code for ourselves. The Array and
String changes also add things we've previously had to
patch ourselves. More importantly, these changes combined with use
help in areas where JavaScript interpreters had diverged,
which means hopefully future browsers (and our code) should be more