Otaqui.Com » javascript

Sheaf – a little library for serial Promise management

pete — Sat, 24 Mar 2012 08:56:24 +0000

I’ve released sheaf, a library for looping over promises in a non-concurrent fashion. It helps you treat async operations as though they were synchronous instead (but doesn’t “block”).

This is useful if you want to use a series of asynchronous functions on a list of initial items, but want one series to complete before the next one starts.

The use case I had which prompted writing the library was loading results from a database, generating a jsdom page from each result, and taking a screenshot of each one. With 8000 results, I really didn’t want to try running them all concurrently, but since jsdom in asynchronous, I actually wanted to wait for each item to resolve before moving on to the next.

Sheaf is available via npm, and also works fine in browsers. It depends on bond to provide it’s returned promise.

The API looks like this:


var aList = ['/one.json', '/two.json']
var fn1Async = function() { /* return a promise */ }
var fn2Async = function() { /* return a promise */ }
var fn3Sync = function() { /* return a value */ }
var fn4Async = function() { /* return a promise */ }

sheaf( aList, fn1Async, fn2Async, fn3Sync, fn4Async );

The first argument to sheaf is the list of things you want to loop over. Subsequent arguments are functions that either return promises or values. The first such function is given each items from the array as sole argument, each function after that is given the return value (or promise resolution arguments) from the previous function as parameters.

Each complete cycle of the functions is run through before started again on the next member of the initial array.

A diagram might help:

Sheaf itself returns a promise, which will notify on each iteration and resolve when all iterations are complete, e.g.


sheaf( aList, fn1Async, fn2Async, fn3Sync, fn4Async )
  .progress(function() {console.log('one loop completed', arguments})
  .done(function(newList) {console.log('all loops completed', newList)});

Since sheaf and bond are designed to work with multiple arguments, the “newList” with which the promise is resolved will be an array of arrays (one per item in the initial aList);

Sheaf can be useful if you want to perform even a single async function over and over again but wait for completion each time before running again. It’s main purpose though is to loop over asynchronous chains in a non-concurrent way. You can imagine that trying to load 8000 URLs, create 8000 DOMs pages in memory and take 8000 screenshots all at once is not a very good idea!

However, you probably don’t want to use this if you are responding to HTTP calls, since you never know how long these operations will take. It would make more sense to fire off a worker process, and then return much faster.

As I have the time I’ll be trying to write up some more examples for sheaf, so stay tuned.

Bond – a simple Promises library, available with npm

pete — Sat, 24 Mar 2012 06:39:45 +0000

I’ve released bond – a simple Promises/A implementation. The only reasons to use this library rather than something like node-promise are that it can be used in a browser as well as nodejs, it supports multiple arguments for promise callbacks (this is actually why I wrote it) and it has a cool name.

Bond installation is extremely easy with npm by adding it to your package.json file and executing “npm install”.

It provides two equivalent options for usage “new bond.Deferred()” or “bond.defer()”. This returns a deferred object with the usual methods:

my_deferred.resolve(arg1, …, argN)
my_deferred.reject(arg1, …, argN)
my_deferred.notify(arg1, …, argN)
my_promise = my_deferred.promise() *
my_promise.then(successFn, failureFn, progressFn)
my_promise.done(successFn)
my_promise.fail(failureFn)
my_promise.progress(progressFn)

* nb – providing “promise()” as a method rather than a property violates the CommonJS Promises/A spec, but I’ve seen it elsewhere and prefer it.

Simple Javascript Validator Library – Validator.js

pete — Sun, 14 Aug 2011 05:58:36 +0000

I had a need to do some data validation in javascript, and all the libraries I looked at seemed quite opinionated about *what* you were going to validate – i.e. form data – let alone the increase in server-side javascript in the last couple of years. My data wasn’t directly tied to a form, so it didn’t quite seem worthwhile trying to shoe horn my needs into what the libraries expected, and I could also see a need for a validation library that could be adapted for Node.

Enter Validator.js.

Validator’s only dependency is on underscore.js from Document Cloud.

Validator has two usage forms: the first for very quick and simple one-off cases:

// Simple use:
var result
result = Validator.isEmail('not_an_email');
console.log(result); // false
result = Validator.isEmail('joe@example.com');
console.log(result); // true

I found this on its own quite a lot more flexible than most of the form-driven libraries out there. However, I also wanted to be able to create more complex sets of validations to run on a piece of data. For that case, you create an instance of Validator and use it’s add() method:

var result,
    myValidator

myValidator = new Validator();

myValidator.add('unique');
myValidator.add('minLength', 6);

result = myValidator.validate( [1, 2, 3, 4, 5, 6, 6] );
console.log(result); // false, the array is long enough but contains non-unique members

This got me a fair bit closer to what I wanted, but you don’t know which part failed, so it’s harder to give reasonable feedback. I added a set of error messages to validator instances which gets populated after a call to validate():

var result,
    myValidator

myValidator = new Validator();

myValidator.add('unique');
myValidator.add('minLength', 6);
myValidator.add('maxLength', 8);

result = myValidator.validate( [1, 2, 3, 4, 5, 6, 6, 8, 9, 10] );
console.log(result); // false, the array is long enough but contains non-unique members
console.log(myValidator.errors);
/*
myValidator.errors == [
    'The list must be made up of unique items',
    'The list is too long'
]
*/

Again, this is pretty good but even though Validator supports adding messages in any language you want and falling back (by default) to English (see the source code), default error messages still aren’t always what you need. I also added the ability to set a custom error message per “validation”.

var result,
    myValidator

myValidator = new Validator();

myValidator.add('unique').message('You are repeating yourself');
myValidator.add('minLength', 6).message('Too tiny!');
myValidator.add('maxLength', 8).message('Too bloated!');

result = myValidator.validate( [1, 2, 3, 4, 5, 6, 6, 8, 9, 10] );
console.log(result); // false, the array is long enough but contains non-unique members
console.log(myValidator.errors);
/*
myValidator.errors == [
    'You are repeating yourself',
    'Too bloated!'
]
*/

You can also chain calls to add() and message():

var result,
    myValidator

myValidator = new Validator();

myValidator.add('unique').message('You are repeating yourself')
    .add('minLength', 6).message('Too tiny!')
    .add('maxLength', 8).message('Too bloated!');

I’ve added some code which should make it easy to use this as a CommonJS AMD javascript module. In it’s default form you can just include it with a script tag.

If you’re interested in developing Validator itself, the project is tested with Jasmine and documented with JSDoc. Both of these can be run with Rake, and the easiest way to get setup is to use Bundler. Once you’ve got the dependencies you get three rake tasks:

# Start the jasmine server, and open http://localhost:8888/ to run the test suite:
$ rake jasmine
# Start the jasmine server and also run a browser through the tests automatically:
$ rake jasmine:ci
# Generate the docs
$ rake jsdoc

If you fork the project and add any more validations, please also add tests and docs.

Testing remote (PHP) websites with Capybara, Cucumber, Mechanize, Selenium 2 Webdriver … and SauceLabs

pete — Thu, 11 Aug 2011 14:40:16 +0000

This is more or less the perfect setup for me, and it lets us run our tests against our PHP web application using the very fast mechanize driver where possible, and for tests that require javascript we can use either the “normal” selenium driver in capybara, or send the tests off to your local grid,... Read more »

Building Conway’s Game of Life in Javascript

pete — Tue, 02 Aug 2011 12:00:06 +0000

As part of an interesting exercise at work, I built an implementation of Conway’s Game Of Life in Javascript. If you haven’t come across the Game Of Life, it’s really quite interesting and worth looking at. My colleagues also made variations, including canvas-based and Web GL 3 dimensional (there was even discussion about n-dimensional, with sliders to view the 4th, 5th and further dimensions). My particular take was to make the game space “infinite” rather than a fixed grid.

It’s not really infinite of course, I haven’t made any attempt to have a position greater than Number.MAX_VALUE. The real point is that it is possible to have a huge playing area, and only the living & possibly-living-next-round cells are taken into account.

I avoided using any ready-made frameworks, in part so that it could be transported to the server-side on top of something like NodeJS – I was imagining a multi-player game where each user could “paint” cells onto the canvas, and maybe even that next-generation cells would take an identifier from their parents, letting people “fight”. I haven’t really got the time for that at the moment, but it seemed a nice idea.

Getting a reference to an unselected radiobutton (using jQuery)

pete — Tue, 02 Aug 2011 11:59:09 +0000

The “change” event on a radiobutton input only fires when it becomes selected. If you want to trigger some behaviour on an unselected radiobutton, then you have to bind to the change event of the radiogroup, which you can do like so:


  
    
    Basic
  
  
    
    Standard
  
  
    
    Advanced

Javascript EventEmitter Redux, now on github

pete — Tue, 11 Jan 2011 14:37:00 +0000

I’ve added some more features to the EventEmitter mixin (like actually working listener removal) and posted it to github:

EventEmitter on github

It’s fairly simple to use … something like this:

var MyKlass = function() {};
EventEmitter.augment(MyKlass.prototype);

/**
 * Show me
 *
 * @fires shown
 */
MyKlass.prototype.showMe = function() {
  this.trigger('shown', {'visible':true});
}

var myInstance = new MyKlass();
myInstance.on('shown', function(e) {
  console.log(e.visible);
}
myInstance.showMe();

Started work on jQuery UI Modal widget

pete — Wed, 13 Oct 2010 14:26:49 +0000

I’ve started working a jQuery UI Modal widget, for use in a project built on top of the widget library.

We have very high accessibility standards, and the current “{modal:true}” option for the dialog widget unfortunately wasn’t as good as we needed. Seeing that the team had identified the need for a standalone Modal widget, the team thought we could try and get the ball rolling.

You can see the work in progress here in the modal widget in my fork of jquery ui.

I’ve also been having a discssion about the modal widget with Scott Gonzalez of the jQuery UI team.

CSSP: Loading CSS with Javascript – and getting an onload callback.

pete — Tue, 28 Sep 2010 14:16:18 +0000

It seems fairly straightforward to require CSS with Javascript. The most obvious method that I thought of was creating a tag and appending it to the head of the document. An alternative would be to load the text of the css file with an ajax XHR call, and then inject that into a