New tools for web design and development: September 2012


So many good things appeared in September that Mark Penfold couldn’t bear to cut the list down to the traditional 10. Here are 11 top utilities for building on the web

It’s a real mixed bag this month. IDEs, prototyping tools, visual effects, slide shows … there doesn’t seem to be any obvious connection. But the tendency for tools to incorporate some degree of playing-field levelling remains evident.

For example, a mobile framework that enables you to ‘code once’ – and in JavaScript, no less. Prototyping tools with components for multiple platforms, IDEs that facilitate rather than getting in the way of fluid development. An important goal for each of these projects is to iron out some of the web’s wrinkles so you can focus on solving real problems not re-inventing the wheel.

Stand-out performance though, has to go to Microsoft for WebMatrix 2. Not just because it’s a strong piece of kit but because it puts so much of the PC giant’s other output into sharp relief. And yes, IE, that still means you.

1. Adobe Edge Tools

Price: Free-£57/month+VAT

Flash-like animation tools for HTML, a tasty new code editor and a super-useful mobile testing environment. The plan behind Adobe’s ongoing beta program becomes clear at last with the release of Edge Tools as part of the software firm’s new Creative Cloud proposition.

Though Edge code is still a little rough around the edges, it does have one winning addition in the shape of Edge fonts – an interface to Adobe’s free selection of web fonts. Accessed via your CSS code, hinting this is well worth checking out, it makes typography for the web seem almost natural.

The Creative Cloud itself is Adobe’s new subscription model for all its software. From the Creative Suite to its development and publishing tools, everything is on tap so your kitbag can morph with the projects you’re working on. Nice idea – and the web tools are available on the free plan, as it stands.

Edge Code gives you the most natural interface for web typography

2. tiltShift.js

Price: Free

If you’ve been watching television lately, you’ll have noticed there’s this strange obsession with depth of field going on. And in particular an effect called ’tilt shift’, which gives the picture a kind of miniaturised feel.

The original treatment requires some expensive camera equipment but now you can achieve a similar effect with nothing more than a bit of fancy CSS.

Admittedly it only works on Chrome and Safari 6, but tiltShift.js hits the spot if you’re looking to give your images an expensive ‘on location’ feel. It’s a jQuery plug-in though, so you’ll need to be running that particular library for this to work at all.

tiltShift.js. Are they tiny or just far away?


Price: Free

The fine art of slide show presentation is in danger of falling into disrepute. It can take a while to create something nice, even with the power of Microsoft or Apple behind you. But, an online interface to reveal.js, makes the process an absolute doddle. Whether your holiday snaps are thrilling enough to keep the party going is another matter.

If you want to take your slideshow with you, you’ll need to have a local copy of reveal.js and do a bit of copy/paste work but once that’s done you’re free to export to PDF and edit with markdown. You could alternatively just publish and make a link available.

Export that show and take it on the road with

4. Microsoft WebMatrix 2

Price: Free

It’s easy to use, yet has a monstrous amount of functionality crammed into its nicely unified UI and manages to provide plenty of help (almost) without becoming intrusive. As a web development all-rounder WebMatrix 2 is little short of a triumph.

Since beta release MS has been busy building in support for the kind of technology that the kids are crazy about these days. Consequently, WebMatrix 2 is one of the nicest places to play around with Node.js, it has a massive warehouse full of off-the-shelf projects such as Joomla, DotNetNuke and so on, and supplies all the necessaries for a simple .NET project, should that be your cup of tea.

This being a Microsoft scheme, it would have to have a few quirks of use, for instance a slightly over-zealous code hinting system – but overall it’s excellent. And it’s free!

WebMatrix has a bewildering library of off-the-shelf projects ready to go

5. Moscrif

Price: Free

Moscrif is an impressive piece of kit. Using a hybridised JavaScript you can code up your game or app once within the system’s IDE, and then deploy to just about every mobile device going: iOS, Android, Windows Mobile, Bada …

The hybridising of JavaScript is actually quite sensible – providing the language with constructs such as real class declarations makes object-oriented development that much simpler. And probably also makes translating the resulting code into Objective-C, Java and so on considerably easier.

There’s still a learning curve involved, but everything is in place for that: tutorials, docs, forum and so on. If you’re thinking about getting into mobile development and have a reasonable grasp of JavaScript and object-oriented programming it’s worth checking out. Shame there’s not a more challenging proof of concept in the app store though.

Moscrif aims to abstract away the platform leaving you free to create once for mobile devices

6. Moqups

Price: Free

There are plenty of wireframing apps out there, and moqups is up there with the best of them. It’s not super-advanced, but that’s why it works. Putting together a few ideas takes minutes.

There’s no real set-up to speak of, just load the site and you’re off! Drag and drop your components, adding detail as you go. Then when you have something worth sharing, either fire off an email with the URL or download as PDF/PNG.

Plans are afoot for a paid version of the app, but functionality as it stands will remain free.

Moqups is just champing at the bit to get your prototype up and running

7. FluidUI

Price: Free-$129/month

Fluid UI gives you a very broad set of brushes for creating your mobile mockups. You can keep them generic, or switch over to one of the device-specific component libraries to give your projects an element of ‘in the field’ realism.

Creating screens is accomplished by drag and drop, with a settings toolbar that follows you around as you edit components and views. Screens can then be linked via hotspots to give a semblance of interactivity.

There’s an in-browser preview, but the coolest thing is an iPhone/Android app for previewing screens on-device. FluidUI is free if you just want to develop a single limited project.

FluidUI has component libraries for most of the major device platforms

8. Processing 2.0 beta

Price: Free

Processing’s 2.0 release maintains the arts-oriented coding ambitions of the original project but makes a few important technical changes – most notably a shift towards OpenGL as a graphics solution and Processing.js as a web-based interface.

Processing has been around for more than a decade now. Long enough to develop a loyal following and a good selection of tutorials, documentation and expansion libraries.

So, for those with an interest in data visualisation, this is perfect time to pick up Processing for the first time: the educational materials are there; the web is beginning to come into focus now that applets are being abandoned and systems’ underlying architecture is no longer on a divergent track.

Noodling raised to the level of art: Processing is still going strong after a decade

9. StatusCake

Price: Free

Site maintenance or server disruption, there could be any number of reasons why a site might be down. But unless you hear about it there’s nothing you can do to fix the situation. And there’s nothing worse than hearing things have gone south from clients and their unhappy users.

Enter StatusCake, a simple system that monitors sites continuously at intervals as frequent as every five minutes, notifying you either by mail, SMS (if you have credits) or via a Chrome extension when something goes wrong. You can also hook up the monitor to either Boxcar or Pushover apps for the iPhone.

Accounts come with an API key too, so if you want to do something exciting with the collected service data, you can.

StatusCake: Making sure you are first on the scene when a site goes down

10. Monitor Backlinks

Price: Free

The backlink, one of the foundation stones of search engine rankings and consequently something you’ll want to keep an eye on if your clients are anything other than extremely laissez faire. Thankfully, Monitor Backlinks has got your back in this respect.

Free accounts monitor only 10 backlinks, while the pay plans start at a much more sensible 100. Whatever you decide to go for, the simple backlink search is enough to get you thinking. There are frequently some glaring omissions, which you can get on the case remedying.

Keeping tabs on the quid pro quo

11. Sweet.js

Price: Free

Not everyone gets on super-well with JavaScript, particularly those who come from other programming styles – notably object oriented ones such as Java. JS has it’s own way of going about things – and yes, you probably should learn to work idiomatically – but sometimes you just miss being able to declare a class with a call to ‘class’. Sweet.js enables you to do this and other nifty hacks.

Sweet is a Node module, so you’ll need Node and npm installed to get the system working. Create your macros by calling macro then defining, for example, a new way to declare functions. Once you’ve got your macro, use it throughout your code and call the SJS binary from the Terminal to compile this into regular JS.

Even if you don’t choose to customise the syntax, Sweet could provide a nice way to write much more readable code.

One simple macro and you can write OO code like in the good old days …

If you have come across any cool tools recently that haven’t made our list, but you think they should have, please let us know in the comments. Equally, if you’ve created a tool that you’d like us to feature in the next roundup, shoot us an email!