JavaScript

2011 February 20, last update 2014 August 27

Overview

Rough and ready JS structure

Resource Collections

Make Code Smaller

General Libraries

Selector Engines

Quality Assurance

Server-Side Funkiness

User Interface Framework Libraries

Progressive Enhancement Frameworks

Data Visualisation and SVG

  • D3.js D3 = Data-Driven Documents. D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS
  • Raphaël (raphaeljs.com) A small JavaScript library that should simplify your work with vector graphics on the web

Canvas and WebGL

HTTP Status Detection

Link Drop

Notes

String.split() with a RegExp separator

This one caught me out with its cross-browser crazy-bandit style, see JavaScript split Bugs: Fixed! (2007 stevenlevithan.com)

String.split() with a Limit

When a limit is used the last element of the returned array does not contain the rest of the string. Seems strange to me but there is a work around, which was provided by Nick Craver on in reply to the question Split string once in javascript? (stackoverflow.com)

var split = string.split('|');
split = [split.shift(), split.join('|')];

For limits greater than 1 then array.splice could be used.

Variables Named Class in IE

var class; causes IE to raise an error.

Repeated RegExp.test Calls on Same RegExp with a Global Flag

Another one that caught me out. RegExp.test returned true the first time, but didn't the second because it was no longer searching from the beginning of the string.

"... As with exec (or in combination with it), test called multiple times on the same global regular expression instance will advance past the previous match."

Mozilla JavaScript Docs 2011 March 20

Solution was to use RegExp.lastIndex = 0 after each use of RegExp.test.

RegExp.test (mozilla.org), RegExp.lastIndex (mozilla.org)

String.match() gotcha

When doing a RegExp match a g flag causes the capture parenthesis to no longer capture. Just do the match without the g flag.

When Using console.log

Avoid raising errors without Firebug by using the following before using console.log:

window['console'] = window['console'] || {log:function(){}};