Spaceship Pilot, CARPE Slider, CasperJS, lazyload

2012-03-30 00:00:00 +0100 by Alex R. Young

Spaceship Pilot

Spaceship Pilot screenshot

Spaceship Pilot from Webdigi is a browser-based game that's controlled by tilting an iOS device. A QR code can be used to easily launch the site that's used to collect accelerometer data -- the Google iOS app is a relatively painless way of doing this (using the image search).

The authors have written a blog post about the client and server-side code -- the server uses Node and Socket.IO.

CARPE Slider

CARPE Slider by Tom Hermansson Snickars is a cross-browser slider widget with no dependencies. It doesn't require any image files, and works well with both the mouse and keyboard.

When used with HTML5, data attributes can be used to configure sliders without extra JavaScript. Multiple sliders can safely coexist on a single page as well.

The project is distributed free for open source or non-commercial projects, otherwise it costs $99 for a license.


CasperJS (GitHub: n1k0 / casperjs, License: MIT) by Nicolas Perriault is a testing tool for PhantomJS.

Using PhantomJS seems like the ideal solution for creating advanced browser-like scripting environments, and CasperJS has an appealing API:

casper.start('http://google.fr/', function() {
  // search for 'casperjs' from google form
  this.fill('form[action="/search"]', { q: 'casperjs' }, true);

casper.then(function() {
  // aggregate results for the 'casperjs' search
  links = this.evaluate(getLinks);
  // now search for 'phantomjs' by filling the form again
  this.fill('form[action="/search"]', { q: 'phantomjs' }, true);

The author has written a tutorial including installation instructions on the CasperJS homepage, and the project includes tests.


lazyload (License: MIT) by Vincent Voyer and St├ęphane Rios is an image loader that uses a temporary base64 image:

  onload="lzld(this)" />

The authors opted to use the inline onload so each image effectively registers itself with the lazy loading system, rather than calling something like getElementsByTagName or querySelectorAll.