The JavaScript blog.


JSON html5 node modules polyfills

picturePolyfill, Interfake

Posted on .


picturePolyfill (GitHub: verlok / picturePolyfill, License: MIT/GPL2) by Andrea Verlicchi allows you to use picture elements with srcset support so you can include high-DPI images. Here's an example with media queries:

<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif">  
  <source src="img/480x480.gif"/>
  <source src="img/768x768.gif"   media="(min-width: 481px)"/>
  <source src="img/1440x1440.gif" media="(min-width: 1025px)"/>
  <source src="img/1920x1920.gif" media="(min-width: 1441px)"/>
    <img src="img/768x768.gif" alt="A beautiful responsive image"/>

It doesn't make multiple HTTP requests, so only the required images are fetched. It also takes into account browser event handling, so it won't run while the browser is being resized.


Interfake (GitHub: basicallydan / interfake, License: MIT, npm: interfake) by Daniel Hough is a module designed for client-side developers that makes it easy to create JSON APIs. You can create APIs using the command-line interface by making JSON files that define endpoints:

  "request": {
    "url": "/whattimeisit",
    "method": "get"
  "response": {
    "code": 200,
    "body": {
      "theTime": "Adventure Time!",
      "starring": [
      "location": "ooo"

It supports JSONP, and you can use it programmatically in Node. The documentation has some use-case ideas, like using it for a test API for a mobile application, automated testing, and static APIs.


canvas browser polyfills

HiDPI Canvas Polyfill, formatter.js

Posted on .

HiDPI Canvas Polyfill

Don't you just hate it when a cool canvas animation suddenly goes blurry? HiDPI Canvas Polyfill by Jonathan Johnson scales the canvas so the PPI is right, avoiding unsightly blurring. Jonathan notes that Safari is currently the only browser that does this properly.

I don't know if the author was inspired by How do I fix blurry text in my HTML5 canvas? on Stack Overflow, but the solution looks similar to MyNameIsKo's answer.

Jonathan has gone further by including tests, and he's included a Grunt build script as well.

Jonathan also sent in BubbleChart (GitHub: jondavidjohn / bubblechart, License: Apache 2.0, npm: bubblechart) which is an interactive visualisation for two dimensional data.


formatter.js (GitHub: firstopinion / formatter.js, License: MIT) by Jarid Margolin helps you to define custom form fields. The examples given are a credit card form and a telephone number entry. The script can insert text as the user types, so the credit card form inserts hypens, and the telephone number uses the US-style format with brackets and a single hyphen.

The API looks like this, but there's a jQuery wrapper as well:

new Formatter(document.getElementById('credit-input'), {  
  pattern: '{{9999}}-{{9999}}-{{9999}}-{{9999}}'

The project includes tests that can be run with npm, and there are examples here: formatter.js demos.


libraries jquery testing mobile node accessibility polyfills

Validatr, pointeraccuracy.js, Testacular Updates

Posted on .


Validatr logo

Validatr (GitHub: jaymorrow / validatr, License: MIT, jquery: validatr) by Jay Morrow is a cross-browser HTML5 form validation library. That means it provides validators for the new native widgets, like color and date. The Validatr fields documentation lists all of the supported inputs and also features demos.

The library requires jQuery, and usage looks like this:

$('form').validatr('addTest', 'example', function(element) {});

Jay has also included QUnit tests for Validatr.


pointeraccuracy.js (GitHub: n-fuse / pointeraccuracy.js, License: MIT) by Thomas Hoppe is a polyfill for the media query level 4 property "pointer". This API heuristically determines the pointer accuracy, returning coarse or fine depending on the input device's accuracy:

This media feature does not indicate that the user will never be able to click accurately, only that it is inconvenient for him to do so. Authors are expected to react to a value of coarse by designing pages that do not rely on accurate clicking to be operated.

Testacular Updates

Testacular, used by the AngularJS team, has been updated. The new version includes code coverage, Growl and TeamCity reporters, and an adapter for QUnit.

Vojta Jína posts about the project to his Google+ account: +Vojta Jína.