The JavaScript blog.


HTML cookies angularjs dm

ngKookies, preCode.js

Posted on .


ngKookies (GitHub: voronianski/ngKookies, License: MIT, npm: ngkookies) by Dmitri Voronianski is a replacement for the Angular $cookieStore provider. It's a port of jquery-cookie that helps work around angular.js issue 950.

After loading it, you can set cookies with $kookies.set('name', 'value') and read them with $kookies.get. You can also delete cookies with $kookies.remove.

Each method accepts an options object that can include the path and expires arguments. You can also store JSON objects as cookies with $kookiesProvider.config.json = true.


Have you ever written a blog engine or CMS that has to display source code? If so you've probably run into the issue where human-readable HTML doesn't work well with pre elements if initial indentation is included.

preCode.js (License: MIT) Leon Sorokin is a small script that finds <pre><code> blocks and strips the leading and proceeding whitespace, so syntax highlighters should be able to display code properly.

It's written using the standard DOM API, so it shouldn't need any dependencies. It'll also fix whitespace in textarea as well.


libraries HTML angularjs mvvm

HTMLjs, Building an Angular List

Posted on .


HTMLjs (GitHub: nhanaswigs / htmljs, License: MIT) by Nhan Nguyen is a data-binding and template rendering library. It supports browsers back to IE7. Rather than using declarative HTML, it's more JavaScript-driven. For example, given a simple input field, you could bind a validation handler to it like this:

var username = html.data('')  
  .required('Username is required.')
  .maxLength(15, 'Max length for username is 15 characters.');


I don't think declarative templates are a bad thing, but the detail most people consistently get wrong with Knockout is incorrectly binding prototype methods or values. This API circumvents that by relying on simpler markup. The author has provided lots of examples so you can get a feel for how it works without downloading it.

Building an Angular List: Using ng-repeat

Building an Angular List: Using ng-repeat is a tutorial by David Posin about how to use ng-repeat. It's a simple introductory tutorial, and David includes a screencast so you can see exactly how it works.

I noticed David uses the web-based Cloud9 IDE, so you can even follow along without installing anything if you're really new to Angular.


animation HTML css

Declarative Animations with AniJS

Posted on .


AniJS (GitHub: anijs / anijs, License: MIT) by Dariel Noel Vila Plagado is a declarative library for CSS animations. There's a cool example that illustrates the sentence definition API, where the API calls are broken up into a form with separate fields for "if, on, do, to":


The actual markup uses data attributes to define the animation behaviour: data-anijs="if: click, on: footer, do: swing".

The generalised format for this is explained using a simple text diagram in the wiki:

Declaration - Sentence 1; ... ; Sentence n  
Sentence    - Definition, ... , Definition n  
Definition  - if | on | do | to | before | after | helper  

You can also create animations in JavaScript with AniJS.createAnimation.

The project's wiki has lots of documentation already, with details on how to write before and after functions, run animations repeatedly, and write animations entirely with JavaScript. Parts of the documentation are in Spanish, but there's enough English in the code examples and comments that I was able to understand it.


HTML redis node modules statistics parsing curl

Node Roundup: parse5, redis-timeseries, request-as-curl

Posted on .


parse5 (GitHub: inikulin / parse5, License: MIT, npm: parse5) by Ivan Nikulin is a new HTML5 parser, based on the WhatWG HTML5 standard. It was built for a commercial project called TestCafé, when the authors found other HTML5 parsers to be too slow or inaccurate.

It's used like this:

var Parser = require('parse5').Parser;  
var parser = new Parser();  
var document = parser.parse('<!DOCTYPE html><html><head></head><body>Hi there!</body></html>')  
var fragment = parser.parseFragment('<title>Parse5 is &#102;&#117;&#99;&#107;ing awesome!</title><h1>42</h1>');  

I had a look at the source, and it doesn't look like it was made with a parser generator. It has a preprocessor, tokenizer, and special UTF-8 handling. There are no dependencies, other than nodeunit for testing. The tests were derived from html5lib, and include over 8000 test cases.

If you wanted to use it, you'll probably need to write a "tree adapter". Ivan has included an example tree adapter, which reminds me of writing SAX parser callbacks.

Ivan also sent in mods, which is a module system designed to need less boilerplate than AMD-style libraries.

Redis Time Series

Tony Sokhon sent in redis-timeseries (GitHub: tonyskn / node-redis-timeseries, License: MIT, npm: redis-timeseries), a project for managing time series data. I've used Redis a few times as a data sink for projects that need realtime statistics, and I always found it worked well for the modest amounts of data my projects generated. This project gives things a bit more structure -- you can create instances of time series and then record hits, then query them later.

A time series has a granularity, so you can store statistics at whatever resolution you require: ts.getHits('your_stats_key', '1second', ts.minutes(3), callback). This module is used by Tony's dashboard project, which can be used to make a realtime dashboard.


request-as-curl (GitHub: azproduction / node-request-as-curl, License: BSD, npm: request-as-curl) by Mikhail Davydov serialises options for http.ClientRequest into an equivalent curl command. It also works for Express.

// http.ClientRequest:
var req = request('http://google.com/', {method: 'POST', json: data}, function (error, response, expected) {  
  curlify(req.req, data);
  // curl 'http://google.com' -H 'accept: application/json' -H 'content-type: application/json' -H 'connection: keep-alive' --data '{"data":"data"}' --compressed

// Express:

app.get('/', function (req) {  
  // curl 'http://localhost/pewpew' -H 'x-real-ip:' -H etc...

I imagine Mikhail has been using this so he can replicate requests based on logs to aid in debugging.


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 });