The JavaScript blog.


webkit server dependencies loading games

PhantomJS, load.js, Phantom Limb, OpenOdyssey

Posted on .


PhantomJS by Ariya Hidayat is a WebKit-based JavaScript tool for exploiting the power of WebKit. Let's
say you want to generate a PNG from an SVG file:

if (phantom.state.length === 0) {
  if (phantom.args.length !== 2) {
    console.log('Usage: rasterize.js URL filename');
  } else {
    var address = phantom.args[0];
    phantom.state = 'rasterize';
    phantom.viewportSize = { width: 600, height: 600 };
} else {
  var output = phantom.args[1];

This will produce a PNG when run through phantomjs on the
command line:

phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png

This example is from the PhantomJS

What really interests me about this project is generating nice PDFs from
HTML. WebKit has been ported to quite a few platforms, and PhantomJS
should run on Linux, Windows, and Mac OS X, so it could be a great tool
to have on your server.


load.js by Chris O'Hara is a small lazy-loading and dependency management library:

load('jquery.js').then('jquery-ui.js', 'jquery-ui-theme.js')
  .thenRun(function () {


I like the chained API, which just so happens to be created with
chain.js by the same author.

Phantom Limb

Phantom Limb by Brian Carstensen makes desktop browsers to simulate touchscreen device events:

A mousedown fires a touchstart. A mousemove fires a touchmove if the mouse is down, and a mouseup fires a touchend. These custom events are also assigned a touches array containing a reference to the event, just like a real touch event in a mobile browser.

Brian pointed out that this makes debugging mobile apps easier, because
you're not limited to Mobile Safari's limited debugging tools. There's
also a bookmarklet for activating Phantom Limb, which means you could
use it on any page.

WebGL Model Viewer

Christopher Chedeau sent us a link to
jDataView, a library for reading binary files in browsers. His blog post, Javascript - jDataView: Read

includes some background on the project and a great demo: a World of
Warcraft Model
You'll need a WebGL-enabled browser to view this demo.

Dealing with binary data is inherent to games development, so it's worth
taking a look at jDataView if you're working in that area.


OpenOdyssey by Michal Budzynski for the Mozilla GameOn
is a simple browser-based
game that uses the Mibbu game framework. The basic
gameplay mechanics are fairly solid, so it'll be interesting to see what
Mibbu is like when Michal releases it.


dependencies loading

Script Loading and Dependencies

Posted on .

I've created a few projects that are self-contained HTML/JavaScript
files -- small utilities that are easy to share or stash on a USB stick.
When writing this type of project I like to use a script loader like
Google's AJAX Libraries so I don't need to bundle separate files. Another use case is for very
complex projects: Google's API allows you to easily switch between
different library versions which is great for testing against a new
version of a big library like jQuery.


If you have a place to host code you might still want to use a script
loader. I've recently been looking at
javascript-dominoes which includes script loading, aliasing and dependencies. The dependency
engine in particular allows you to express rules that permit scripts to
be loaded concurrently, which could improve the load times of your

The following examples are from the hands

documentation on the javascript-dominoes site.

Script Loading

Basic usage is like this:

dominoes("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" , function() {
    // jQuery dependant code goes here
} );

If this is called twice dominoes will automatically detect that the
script has already been loaded.


Properties can be defined to shorten configuration:

dominoes.property("mySiteJSPath" , "http://mySite.org/u/kio/67/long/is/long/js");
dominoes("${mySiteJSPath}/script1.js" , function1);


If you have a script that does not depend on jQuery, you can tell
dominoes to concurrently load the scripts:

dominoes("${jQueryURL} ./js/myScript/js" , myFunction);

Dependencies can be expressed using operators:

action1 action2 action1 & action2 are independant
action1 > action2 action2 depends on the completion of action1
action1 >| action2 action2 depends on the completion of action1 and on the DOM being ready for manipulation
{ sub-rule } sub-rule (the completion of this action is determined by the completion of the whole sub-rule)
{{ "{{" }} optional-sub-rule }} optional sub-rule (same as a normal sub-rule but the completion of this action is not needed down the line, i.e. fire & forget)