New tools for web design and development: February 2013

Busy month, this one. Lots of new stuff came out, indicating that winter's long hours of darkness have been put to good use: coding. Some big-hitters have entered the fray too, with Twitter, Adobe and Microsoft all releasing interesting projects. And yes, that means IE10 counts as an interesting project. It doesn't hurt to be (almost) positive once in a while.

Outside the big names, work remains impressive. None more so than Game Closure Devkit, an all-encompassing mobile game development platform. This one spent a long time in development - with a happy side-effect of being a well-rounded set of docs. Point of fact, this month, all the apps have good documentation. That may be a first.

The upshot is that, though many of the releases are 'frameworks', you stand a fighting chance of getting deep enough into them to make an honest appraisal of their potential. That's potential to you, in the real world, rather than just 'yeah, it looks good, but…'. Amen to that.

01. game {closure} devkit

Price: Free

Thinking of producing a game for iPhone or Android? Make sure you add the game{closure} devkit to the list of frameworks you try out. It's been two years in closed beta and that time has not been wasted.

A JavaScript framework which extends the language to cope with a more class-based architecture, devkit compiles code to either iOS or Android targets, optimising as it goes. The docs are excellent, the dependencies (git, node, java, chrome) are easily managed and the API itself is refreshingly concise and intuitive.

First the moles, next the world. Devkit puts mobile game development within reach

02. Twitter Flight

Price: Free

With Flight, Twitter brings its own brand of no-nonsense utility to the web application framework. Lightweight, JavaScript-based and event-driven, Flight gives you enough structure to ensure your apps function well, then lets you make the backend and rendering decisions.

The basic object in Flight is an event, everything is organised around this. There's no model structure placed between DOM and responding logic - components emit events and functions/components listen for particular flavours of event as they bubble up the document.

There's obviously more to it than this, but at it's heart, what Flight does is enforce and facilitate a few sensible design decisions while at the same time leaving you to decide how data is delivered and outcomes are rendered.

Flight - the wind beneath Twitter's wings?

03. DURANDAL 1.1.1

Price: Free

Durandal takes the structure and simplicity that AMD architecture enforces and uses this as a firm foundation for its application scaffolding. The framework is itself a collection of modules and you add to these as your needs dictate, combining them at runtime using the 'composition' system.

Durandal uses Knockout.js data-binding to pull together your views and view models. Built on top of this, the compositing system handles layout, animation and transition rendering. This enables the injection of components to be dynamic and locally customisable. It sounds like it could get messy, but is in fact pretty straightforward once you get the hang of the composition module. Excellent documentation takes the sting out of this task.

Durandal helps you overcome the challenges off the single page app

04. ALLOYUI 2.0

Price: Free

It cannot have escaped your attention by now that there are a large number of JavaScript frameworks out there. The trouble is, they're a very mixed bunch. Some handle templating, others give you MV*, occasionally you get components themselves as with jQueryUI. But few give you everything. Built on top of YUI3, AlloyUI is one of these rare 'all-things-to-all-men' solutions.

Surprisingly, being so comprehensive hasn't bloated AlloyUI to the point of obesity. Loading is modular and components are added quickly and easily. Carousel, audio, toolbar, pagination, it's all there, ready to be dropped into your project. And it all works nicely together because it was built together.

The friendly mascot for one is not a lie. AlloyUI is pretty nice.


Price: Free answers the interesting question: how fast is your connection? And it does so using HTML5. No plug-ins, no virtual machines - just a series of increasingly large, contiguous files to download or upload. It's fast, accurate and, in it's own way, fun.

There's also the added benefit that isn't laden with advertising. So, next time someone in your household says, "What's wrong with the internet?", you know where to go. tells you whether it's worth bothering with that massive download

06. php.js

Price: Free

Rewriting PHP's core functions in JavaScript seems like an odd thing to do. But, if you have some experience of writing PHP, and you find yourself working with JavaScript, there may be times when you think 'oh, I wish I had something as simple as the php function for this'. php.js is for exactly those occasions.

Some people may get a bit upset by such things, but having a function like PHP's htmlentities() on hand is quite reassuring somehow. You're encouraged to take only what you need, so there's no single archive to dl. It's all done on a function by function basis.

php.js. Interesting reading, even if you never use the functions

07. GroundworkCSS Beta

Price: Free

No doubt about it, GroundworkCSS is a handsome piece of kit. A CSS framework that delivers elegant base components ready to be wrangled by a grid system you'll find it hard to top.

There's a growing number of CSS frameworks out there, each with its own take on how to organise an app, how much to do for you, how much customisation is possible … Groundwork (though still in beta) looks to have found a nice balance. Good docs too.

Minimal but not characterless - the GroundworkCSS has been laid

08. Adobe Edge Reflow

Price: Free

When you first look into it, responsive design can seem a little opaque. The idea's clear enough (responding to device parameters) but in action there's a lot to consider. Trying to 'think it out' is tough. However, Edge Reflow lets you do the heavy lifting visually.

Set your choice of columns (up to sixteen). Drop in your panels, resize the window to a break point and move stuff around till you're happy. Repeat. There are basic typography and CSS tools too. But these are there to give you an accurate feel for how your layout is working.

Reflow produces a good framework layout on which you can build

09. RoughDraft.js

Price: Free

Got an idea for some new project and you want some way to quickly throw together a page or two without firing up a database? Enter RoughDraft.js, with a seemingly endless supply of random data, pretend users and picture stand-ins.

RoughDraft generates its content based on an element's data- attribute. Most of the controls are obvious: data-draft-repeat, data-draft-image and so on. There's a choice of lorem generators and fake users can have full names, emails, twitter handles … you name it. The project continues to grow. You may even like to contribute?

RoughDraft.js makes for smooth previews

10. IE10 for Windows 7

Price: Free

It's been available in preview mode for quite a while, but finally, IE10 has made it to a full release. Windows 7 and 8 users will be auto-updated to the shiny new code, bringing super-fast JavaScript, broader support for web standards and a built-in Flash Player to some percentage of Windows users. Hooray!

If you've been away from IE for a while (who could blame you if you had?) then IE10 will come as a pleasant surprise. It's stripped down UI, fast JavaScript engine and steadily improving standards support make for an enjoyable experience. The dev guide is encouraging, if verbose.

IE10 Preview users are to be auto-updated first

Liked this? Read these!