We are in the situation where we had quite a lot of branches (around 30) that we wanted to maintain, and many of these included commits to the main repository and the directory that we were splitting off. We’ve discovered a few things along the way.

• Make sure you’ve done as much merging as you can, and minimise the number of branches you want to move across.
• Take this as blocking project, and assume other work can’t really continue until this change has made it to master.
• Apply this change to all active unmerged branches asap.
• Where branches have commits across the new submodule boundary, you may need to create and apply patches since ‘git merge’ won’t work across the boundary, but ‘diff’ and ‘patch’ can.

minit sets up projects for you, utilising native generators where available (e.g. `jasmine init`). It can also initialize cvs repositories for your project on github, bitbucket or google code; create packages on npm or jquery-plugins.

Project types include:

• cli
• html5
• js-jquery-plugin
• js-lib
• node-express
• node-module
• node-cli
• php-silex
• python-flask
• ruby-sinatra

Options for all projects include:

• –jasmine: add jasmine support
• –local: don’t create any repositories or packages
• –latest: try and get the development version of dependencies (like silex)

minit can be configured by editing the ~/.minit file. Configuration options include repository host user details, and global options for “jasmine”, “local”, etc.

Why not Grunt / Make / Rake / Jake / etc?

Minit will *only ever generate the setup*, and then defers to the best tool for the job. It’s similar to `grunt init`, but less specific to JS. It’s clear focus is to ease the process of setting up projects, not to manage them.

If you read through comments on the Guardian’s piece, you’ll see comments ranging from desperation to have the technology and also “I would not want to live in such a world.”

I find the latter kind of comment particularly amusing – the author seems not to appreciate that engaging in a computer-mediated global discussion is exactly the kind of thing they seem to be against.

Augmented reality is something that has, in truth, been around a long time.  I happen to know a little bit about flying, and about the “instrument  rating” – the qualification that allows a pilot to fly at night or in bad weather.  When you are flying at night or in cloud, you can’t see the horizon and your senses can deceive you as to which way is up and what direction you are moving.  The reason that pilots don’t fly straight into the ground or mountains is that they use their instruments as an extra layer of understanding on the situation around them.  This is a fairly clear form “augmenting reality.” If you’re overly obsessed by the specifics of having such information planted right there in front of your face, rather than having to look at a dashboard, then picture the kind of HUDs (heads up displays) that have been in use in military aircraft for many years.

The expansion of these technologies both in scope and use, should hardly be surprising or even taken as some kind of revelatory experience.   Really an overlay on reality is a new and slick interface, and will have all sorts of uses, but the *real* revelation is having a smartphone in your pocket that (aside from the visual overlay) can more or less do everything the video demonstrates – contact people all round the world, video conference, set reminders, search localised information, and so on.

All that being said, I’d quite like one :)

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 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.

A great workaround is to use ‘tmux’ (think GNU Screen for grown ups). It instantly offers you multiple-users attached to the same session.

[Update 2012-04-14] Even better – use wemux!

You might, if you care about such things, want to do a bit of setup first. Assuming you’re using a *nix-based operating system (not too unlikely if tmux is an option for you) I recommend the following:

* Setup a single user account on a machine to be used for code reviews
* Log in as that user and start tmux.
* Open up a few windows and files relating to the review ready to go
* Bonus points for some panes containing command line invocations; log tails; load monitors
* I recommend that you use a chat mechanism out of this window, preferably with voice + typing capabilities (Skype, Google+ Hangout, whatever)
* Extra bonus points if window 0 in your tmux session has a review agenda

This is fine as long as you only ever install software using apt-get, aptitude or the a software manager GUI. With software that isn’t in any of the repositories though, you’re a little stuck – for example with Sublime Text 2.

There is an unofficial repository for ST2, but I have had some bad experiences with these so try and avoid them. I manually installed ST2 into /opt/sublimetext2 and added the following as /usr/share/applications/sublime_text.desktop:

[Desktop Entry]
Type=Application
Terminal=false
Name=Sublime Text 2
StartupNotify=true
GenericName=Text Editor
Comment=Edit text files
Exec=/opt/sublimetext-2/sublime_text %U
Icon=/opt/sublimetext-2/Icon/128x128/sublime_text.png
MimeType=text/plain;text/x-chdr;text/x-csrc;text/x-c++hdr;text/x-c++src;text/x-java;text/x-dsrc;text/x-pascal;text/x-perl;text/x-python;application/x-php;application/x-httpd-php3;application/x-httpd-php4;application/x-httpd-php5;application/xml;text/html;text/css;text/x-sql;text/x-diff;x-directory/normal;inode/directory;
Categories=GNOME;GTK;Utility;TextEditor;Application;Development;
Name[en_US]=Sublime Text 2
X-Ayatana-Desktop-Shortcuts=NewWindow;

[NewWindow Shortcut Group]
Name=New Editor Window
Exec=/opt/sublimetext-2/sublime_text --new-window
TargetEnvironment=Unity

An exception to this rule seems to be if you get a bundle of not only mobile phone provision, but also broadband. One of the best in terms of price when you do get a bundle seems to be O2 Broadband. I also like the idea of just getting one bill. Unfortunately for me, we don’t have the BT wiring in our house so can’t get that deal.

Virgin, who I get my broadband from, don’t seem to be nearly so competitive – at least in the brackets of broadband and mobile usage that I’m interested in.

So I’m looking at unlocked providers like Clove to buy the phone and a truly budget service provider like Talk Mobile.

If you’re interested, I’m particularly looking at a “tough phone” like the Motorola Defy, or even better the Xperia Play. I currently have an iPhone and while I’ve been very happy with it, I think I’ll be able to make the jump to Android, especially since you can now use a Google Apps account as the main one, rather than only a Gmail account. I’m also very keen to try in Mozilla’s Boot to Gecko project when that reaches some level of maturity (I was very keen on HPs WebOS too, but that never took off).

You might guess that my requirements are a) cost and b) durability. That’s right: I’m a father.

Here’s an example:

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.

https://gist.github.com/1139797

Next step … running the tests in parallel!

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.

<ul>
  <li>
    <input id="r1" name="something" type="radio" value="basic" />
    <label for="r1">Basic</label>
  </li>
  <li>
    <input id="r2" name="something" type="radio" value="standard" />
    <label for="r2">Standard</label>
  </li>
  <li>
    <input id="r3" name="something" type="radio" value="advanced" />
    <label for="r3">Advanced</label>
  </li>
</ul>

<script>
$("input[name='inputName']").change(function(ev) {

});
</script>

Opera RTL Scrolly Text Indent Bug.

If your content is RTL and you are using the large text-indent CSS property on an input tag (so that you can use a background image, while keeping the text invisible to most users but still available to screen readers) you get a couple of odd behaviours in Opera:

1. The text is not indented. Well ok, that’s at least a “normal” kind of bug.
2. If you right-click on the button, and leave the menu open for a few seconds, the text magically starts scrolling out of the way.

I’ve submitted a bug report to Opera. I’d be interested if anyone else is seeing the same behaviour, or any related RTL weirdness.

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

This is really useful, since so many displays are widescreen these days, and it also means you can create a reasonable dashboard with screen. The patch has worked without a hitch for me so far.

Thanks Evan!

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.

These are both fine for most cases, but what about a situation where you have a hard dependency on the css for the javascript to work correctly? You could take a best-guess at a wait time for the CSS to load, or even set the XHR to be synchronous – however both of these are very poor for both actual and perceived performance of your page (and the former may simply fail).

When might this be the case? Let’s say you have some asynchronously loaded javascript that is intended to create a widget on the page, something like this (which assumes you are using jQuery as your dom library):

function moveLargePanels() {
    // make a panel container for large panels
    $('<div id="largePanelContainer"></div>')
        .appendTo('body');
    $('.panel').each( function(i, panel) {
        if ( panel.outerWidth() > 300 ) {
            panel.appendTo('#largePanelContainer');
        }
    }
}

And some corresponding CSS:

.panel {
    border:1px solid #000;
    padding: 20px;
}

The idea here is that, since there is some interaction between the logic in the javascript (a test for the “outerWidth”) and the styling in the CSS (setting the padding) that the javascript can only work correctly once the CSS has been loaded and applied.

This should be fine right? Start the javascript and the css loading, and have events attached to the load of each letting you know when everything is ready and it’s safe to fire “moveLargePanels()”. Wrong, or at least tricky, and essentially impossible if the CSS is loaded from a different domain to the hosting webpage.

You can get James Burke’s excellent description of this problem here:
http://requirejs.org/docs/faq-advanced.html#css
And a first pass at solving this (in some browsers) here:
http://bugs.dojotoolkit.org/ticket/5402

Burke mentions a using a “well known” style rule to test whether the style is loaded. I suggest a standard pattern for the rule, and also a mechanism for dynamically setting it.

Enter CSSP

You may have heard of JsonP – a way of serving dynamically generated JSON which is padded with a method call (the method name is supplied in the query string of the URL), which allows for cross domain loading of javascript. The idea behind CSSP is similar – it defines a pattern for loading css cross domain. Instead of wrapping in a callback though, we can use the URL query string mechanism to supply the special “test rule” that we use.

Dynamic Rule Pattern

Given this url:

http://someserver.com/stylefile.css?cssp=123456

.panel { ... }
.largePanelsContainer { .. }

/* and the special rule: */
cssp { zIndex:123456; }

So, in whatever loader we want to build, we can add something like this (n.b. this isn’t tested code):

var cssp_counter = 0;
function loadCss(url, callback, className, zIndex) {
    // create a counter for special class names, so they are unique
    className = className || 'cssp' + (cssp_counter++);
    zIndex = zIndex || 123456;
    url = url + '?' + className + '=' + zIndex;
    $('<link>')
        .attr({
            rel: "stylesheet",
            type: "text/css",
            href: url
        .appendTo('head');
    // append a dummy div to the body for the test
    var div = $('<div></div>')
        .addClass(className)
        .appendTo('body');
    // now poll for the z-index value:
    var cssp_interval = setInterval( function() {
        // if the zIndex is applied, we know the css has loaded
        if ( div.css('zIndex') == zIndex ) {
            div.remove();
            // callback:
            callback();
            clearInterval( cssp_interval );
        }
    }, 100);

}

The code above to do the loading and fire a callback is very naive. It would be much better to have an event that can have listeners added, and to have some tests and some failure management like a maximum timeout.

Default Rule Pattern

This obviously presupposes that the CSS is dynamically generated to some degree, even just by adding the special rule to an otherwise static file. I think that an alternative to the performance-conscious would be a “default” special rule, based on the css filename. This needs some thought, and could well be tied to a build-step in your deployment process (you do have one, right?). The pattern comes in two parts:

• There is a standard zIndex that is always used.
• The filename includes the “special class name” that is used within.

For example:

Given the file: styles.fhddgso9j.css

.someclass { ... }
.otherclass { ... }

/* and the special rule */
.fhddgso9j { z-index: 123456; }

The javascript to go alone with this might look something like:

var cssp_counter = 0;
function loadCss(url, callback) {
    // create a counter for special class names, so they are unique
    className = getSpecialClassName(url);
    zIndex = 123456;
    $('<link>')
        .attr({
            rel: "stylesheet",
            type: "text/css",
            href: url
        .appendTo('head');
    // append a dummy div to the body for the test
    var div = $('<div></div>')
        .addClass(className)
        .appendTo('body');
    // now poll for the z-index value:
    var cssp_interval = setInterval( function() {
        // if the zIndex is applied, we know the css has loaded
        if ( div.css('zIndex') == zIndex ) {
            div.remove();
            // callback:
            callback();
            clearInterval( cssp_interval );
        }
    }, 100);
}
function getSpecialClassName(url) {
  // get just the filename, e.g. "styles.9ufosdfij.css"
  var filename = url.substring( url.lastIndexOf('/')+1, url.length);
  // split on the "." marks
  var parts = filename.split('.');
  // assume it will be the second-to-last part (since the last should be "css")
  var className = parts[ parts.length-2 ];
  return className;
}

As noted above, this naive, untested code.

Wrapping Up

Ideally I’d like any “css loader” to use actual browser events (or properties) where possible, and to fallback on this setup as a last resort.

If I get time I’ll implement this and put the code on github. Please do get in touch if you’d like to pair on this!