The JavaScript blog.


libraries testing node browser dates

Blanket.js, xsdurationjs, attr

Posted on .


Blanket and QUnit

Blanket.js (GitHub: Migrii / blanket, License: MIT, npm: blanket) by Alex Seville is a code coverage library tailored for Mocha and QUnit, although it should work elsewhere. Blanket wraps around code that requires coverage, and this can be done by applying a data-cover attribute to script tags, or by passing it a path, regular expression, or array of paths in Node.

It actually parses and instruments code using uglify-js, and portions of Esprima and James Halliday's falafel library.

The author has prepared an example test suite that you can run in a browser: backbone-koans-qunit. Check the "Enable coverage" box, and it will run through the test suite using Blanket.js.


xsdurationjs (License: MIT, npm: xsdurationjs) by Pedro Narciso GarcĂ­a Revington is an implementation of Adding durations to dateTimes from the W3C Recommendation XML Schema Part 2. By passing it a duration and a date, it will return a new date by evaluating the duration expression.

The duration expressions are ISO 8601 durations -- these can be quite short like P5M, or contain year, month, day, and time:

For example, "P3Y6M4DT12H30M5S" represents a duration of "three years, six months, four days, twelve hours, thirty minutes, and five seconds".

The project includes Vows tests that include coverage for the W3C functions (fQuotient and modulo).


attr (License: MIT) by Jonah Fox is a component for "evented attributes with automatic dependencies." Once an attribute has been created with attr('name'), it will emit events when the value changes. Convenience methods are also available for toggling boolean values and getting the last value.

It's designed to be used in browsers, and comes with Mocha tests.


animation jquery plugins dates

jQuery Roundup: jQuery 1.7 Beta 1, Sensible DateTime, Slim Milo Animation

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

jQuery 1.7 Beta 1

jQuery 1.7 beta 1 has
been released, and this version looks significant with a new events API
and major underlying event code changes to improve Internet Explorer

The new events API is pretty simple on the surface: \$.on
and \$.off have been added, which attach or remove events.
However, the intention behind this is to effectively combine the
existing APIs for .bind, .live. and
.delegate. The rationale behind this is to remove some
"surprising interactions" caused when mixing bind and live events. This is fully explained on the jQuery blog's
1.7 announcement.

Sensible DateTime

Sensible DateTime
(GitHub: crossbreeze / jquery-sensible-datetime,
License: MIT) by Jaewoong Kim is a plugin for formatting ISO times.
Formatting strings are supported, as well as natural language relative
times -- for example, "2 minutes ago" rather than a date and time.

To use it, call \$('.datetime').sensible() on an element
with either a datetime or title attribute, and
make sure it contains a ISO8601
datetime string.

The last time I solved this problem I'm fairly sure I used an ancient
scrap of code by John Resig. This library looks neatly written and has
some fixes to support older browsers like IE6, so I'm going to use it
the next time I'm dealing with client-side dates.

The Slim Milo Affair

The Slim Milo Affair
is a tutorial with jQuery source that details the creation of a Pablo
Ferro-inspired animation. The author wanted to employ a similar effect
to Ferro's animation used by the Thomas Crown Affair title

The basic concept of the library is that you have a single DOM element that you want to animate with various "stages". Each stage consists of a main image shown in full, a set of horizontal and vertical bars, and a set of sub images put into the "slots" defined by the bars.

It's interesting to read through the reasoning behind this type of
animation design, because we often use animation libraries without much
thought to how they actually work.