The JavaScript blog.


libraries animation JSON forms

Tweene, JSON Forms

Posted on .


Tweene (GitHub: SkidX/tweene, License: Artistic License 2.0, npm: tweene, Bower: tweene) by Federico OrrĂ¹ is an API that wraps around popular animation libraries so you can switch implementation more easily. Rather than having to worry about whether you need to use translateX or just x, you can use Tweene's API instead.

These are the supported libraries right now:

To create animations, you have to make tween instances using Tweene, and then call methods that set the duration and easing. It actually has several API styles based on GASP, jQuery, and Velocity, but I prefer the fluent API:

  .to({ opacity: 0, left: '+=50px' })
  .on('complete', completeCallback)

The documentation for Tweene is detailed, and there are some examples on CodePen.

jQuery JSON HTML Forms

Cezary Wojtkowski sent in jquery-html-json-forms, a project that aims to support the W3C HTML JSON form submission specification:

This specification defines a new form encoding algorithm that enables the transmission of form data as JSON. Instead of capturing form data as essentially an array of key-value pairs which is the bread and butter of existing form encodings, it relies on a simple name attribute syntax that makes it possible to capture rich data structures as JSON directly.

This basically means you can use an enctype attribute of application/json in forms. This makes it a lot easier to create forms that send data to JSON APIs, rather than using the standard form encoding.

Cezary's project allows you to use enctype='application/json' and then get JSON out with $(formElement).JSONencode(). You can also enable and disable the plugin.

The HTML JSON form specification is new to me, but it seems really cool for those of us who create lots of JSON APIs.


jquery plugins forms calendars time widgets

jQuery Roundup: persistState, CLNDR.js

Posted on .

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


persistState (GitHub: togakangaroo / persistState, License: MIT) by George Mauer saves the state of UI widgets. It can be applied to a selector, so you can save the state of a specific set of widgets rather than all of them.

I like the idea of using this to save the state of form controls, particularly in a multi-stage form that's handled client-side. Values are saved to localStorage, and the API of persistState allows you to swap in your own serialisation handler.

Saving the state of form controls looks like this:

$.ow.persistState.elementPersistence['textarea,input:not(:checkbox),select'] = {
  saveState: function($el) {
    return { val: $el.val() };

  restoreState: function($el, state) {
    if (!state) return;
    if ($el.val() !== state.val)


CLNDR.js (GitHub: kylestetz / CLNDR, License: MIT) by Kyle Stetz is a calendar plugin:

There are wonderful and feature-rich calendar modules out there and they all suffer the same problem: they give you markup (and often a good heap of JS) that you have to work with and style. This leads to a lot of hacking, pushing, pulling, and annoying why-can't-it-do-what-I-want scenarios.

CLNDR doesn't generate markup (well, it has some reasonable defaults, but that's an aside). Instead, CLNDR asks you to create a template and in return it supplies your template with a great set of objects that will get you up and running in a few lines.

CLNDR requires Moment.js, which is OK because I don't leave home without it!


jquery plugins ajax forms backbone.js images widgets

jQuery Roundup: Queuing Ajax Requests, imagefill.js, Feedback Me

Posted on .

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

Queuing Ajax Requests

In Queuing Ajax Requests in JS Web Apps, Alex MacCaw talks about how to queue requests with jQuery.ajax and safely retain the sequence of operations generated by Backbone and Spine applications.

We still have a problem if a particular request fails, as the interface will now be out of sync with the database. I usually recommend treating this as an exceptional circumstance, and prompt the user to reload the page. Incidentally, this is exactly how Facebook and Twitter solve the problem.

The plugin can be used like this: jQuery.ajax({type: 'POST', queue: true}), and is available as a Gist at maccman / jquery.ajax.queue.coffee.

He's also recently published Memory Management in JS Web Apps, which discusses how to properly clean up Backbone and Spine controllers when DOM elements are removed using jQuery's special events.


imagefill.js (GitHub: johnpolacek / imagefill.js, License: MIT/GPL) by John Polacek is a jQuery plugin for making images fill their containers. It can be configured to run once, or throttle the frequency at which container sizes are checked. The author suggests this plugin could be useful for creating responsive sites.

Feedback Me

Feedback Me (GitHub: vedmack / feedbackme, License: _MIT, jQuery: feedback_me) by Daniel Reznick is a UI widget that shows a feedback form that appears from the side of a page. It is designed to work out of the box with jQuery UI and Bootstrap, and includes allows each label in the feedback form to be configured.


HTML testing forms node modules middleware sessions connect

Node Roundup: 0.11.3, Busboy, connect-mongostore, Chance

Posted on .

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

Node 0.11.3

Node 0.11.3 was released last week, which was a fairly large update: libuv, c-ares, and v8 were all updated. The debugger now breaks on uncaught exceptions, and there were changes to enable dtrace for libuv's probes (if enabled). The underlying implementation for buffers has undergone major changes as well -- I've picked out a few commits here that discuss the updates:

It looks like these changes should make the buffer implementation more robust. I've checked out Node 0.11.x and 0.10.x on my local machine and run make bench-buffer against both, so far 0.11 doesn't look conclusively faster, but I haven't been particularly scientific about the process yet.


Busboy (GitHub: mscdex / busboy, License: MIT, npm: busboy) by Brian White is a streaming HTML form data parser. It uses the Dicer module to parse multipart fields, and also uses a stream parser for urlencoded fields.

The busboy API allows limits to be placed on the incoming data. The Busboy constructor accepts an options object which may include a limits property. Limits can include fieldNameSize, fieldSize, files, and more -- see the readme for full documentation. These options mostly default to Infinity, apart from fieldNameSize which is 100 bytes.

Tests are included, and it should be possible to use it as Express middleware fairly easily.


How do you decide which session middleware to use? Use cookies during early development then quickly search npm for something that uses your database? Me too! But there are better options out there and it's worth taking a bit of time to research them. Ilya Shaisultanov sent in connect-mongostore (GitHub: diversario / connect-mongostore, License: MIT) which is an attempt to write a cleaner session store that takes advantages of features like replica sets, and has test coverage.



Chance (GitHub: victorquinn / chancejs, License: MIT, npm: chance) by Victor Quinn is a library for generating random stings, numbers, and even things that are useful for test data like address elements and names.

It works in browsers and Node, and has a simple constructor-based API:

var Chance = require('chance');  
var chance = new Chance();  
chance.name({ middle: true });  


JSON jquery plugins forms icons

jQuery Roundup: jQuery.IO, Animated Table Sorter, jQuery-ui-pic

Posted on .

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


jQuery.IO (GitHub: sporto / jqueryio.js, License: _MIT) by Sebastian Porto can be used to convert between form data, query strings, and JSON strings. It uses JSON.parse, and comes with tests and a Grunt build script.

Converting a form to a JavaScript object is just $.io.form($('form')).object(), and the output has form names as keys rather than the array results .serializeArray returns.

Animated Table Sorter

Animated Table Sorter (GitHub: matanhershberg / animatedtablesorter, License: MIT, jquery: AnimatedTableSorter) by Matan Hershberg is a table sorting plugin that moves rows using .animate when they're reordered.

All you need to do is call .tableSort() on a table. CSS and images have been provided for styling the selected column and sort direction.


jQuery-ui-pic (GitHub: rtsinani / jQuery-ui-pic) by Artan Sinani provides an extracted version of the icons from Bootstrap and the image sprites from jQuery UI.

In this version the CSS classes are all prefixed with pic-, so you can use them like this: <i class="pic-trash"></i>. This might prove useful if you're looking for a quick way to reuse jQuery UI's icons without using the rest of jQuery UI. I licensed Glyphicons Pro myself because I find myself using them so much.