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.
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
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.
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.
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 rvl.io, 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 rvl.io 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.
4. Microsoft WebMatrix 2
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!
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.
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.
8. Processing 2.0 beta
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.
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.
10. Monitor Backlinks
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.
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.
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!