Translate your InDesign comps into functioning web pages, try a new HTML5 game engine and check out the new version of Firebug. All this and more in Mark Penfold's latest round-up
Considering the often frantic nature of the run-up to Christmas, December's releases have a surprising degree of substance about them. And not only that, variety: security, animation, gaming and debugging have all been getting updates worthy of serious attention.
There's a creative flavour too, some of it with a distinctly speculative edge – Webchemy being the most obvious example. This is good news, because there's a tendency towards homogeneity on the web that presents itself as the 'right way' to do things. New tools, which encourage a bit of independent thinking, help to balance this out.
Similarly, apps such as Hashcat and TraceKit give you another window onto the mechanics that drive the web, and may perhaps deliver some insight that makes your next project stand out.
But it's developing the confidence to make mistakes – and learn from them – that comes first. And in doing that it helps to keep tools on hand which ensure your underlying code is sound. The final days of 2012 provided something for both parts of this equation.
1. Hashcat
Price: Free
If you were wondering how secure your password was, there's a simple way to find out: Hashcat. Running on the GPU rather than the CPU means Hashcat's processes can be extended almost indefinitely, giving it some serious brute force.
Attacks – or recovery methods, depending on how you look at it – cover Markov, through brute force and Mask attacks. The first and last of these essentially finesse the brute force by restricting the base from which the hashes are generated.
Is it any good? Suffice to say that a good portion of the LinkedIn password database was reportedly 'recovered' in short order earlier this year, using Hashcat. Plus, this version can handle up to 128 GPUs and covers a very wide range of hashing algorithms, from MD5 to OS X and sha1.
Large, complex JavaScript applications come with a special class of problem: they run on multiple platforms, each with their own 'quirks'. Sadly, none of these does a fantastic job of feeding back to the developer exactly how things are going and, taken as a whole, the situation is messy to say the least.
TraceKit does its level best to help out by providing a reliable stack trace on your un-handled JS errors, regardless of the originating platform.
The level of detail given depends on which browser you're using – IE and Safari both cause problems – but if you're faced with the proverbial needle/haystack, and are fairly certain the problem isn't browser-specific, then TraceKit might be able help.
Here's TraceKit reporting a recursion error in Chrome:
And in Safari:
3. Quintus
Price: Free
As the HTML5 rollercoaster continues to gain momentum, its appeal as a gaming platform is really starting to show – so much so that the main obstacle to its immediate expansion is the availability of an easy to learn yet flexible game engine. Quintus hits that target between the eyes.
The syntax is easy to read, the docs are first rate and the examples fully functional. Once you've finished hacking about the supplied platformer's code base (which is surprisingly small), you'll be ready to implement your own 2D gaming revolution. And the time has never been riper...
If you're a graphic designer, capable of scissoring together nice looking comps using InDesign, it's probably a bit annoying that there's no tool which allows you to do the same thing for web sites. Well, rest easy because now there is. Kinda…
The central problem for InDesign to HTML5 is that, basically, InDesign is not a web design tool. Given this limitation however, In5 does a good job of accurately translating compositions into functioning web pages.
Long-term, however, this is unlikely to provide the kind of flexibility (in layout as well as production) that both designers and clients require.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
How much time does it take every day logging in to your Gmail, checking your calendar, assessing your Twitter situation. Or more seriously, seeing who's talking about you on Facebook? Is this time you wish you could have back? If it is, Glance could have something for you.
The service attempts to cut down on repetitive tasks by pulling all your activity feeds into a single browser window, each one billeted to its own utilitarian-style card readout. They cover the big services for now: Twitter, Facebook, Google, WordPress and are working on more.
Really though, it comes down to whether you find the no-frills interface enough of a draw to overcome the natural fear of handing out password access to all your online activity streams.
Even simple animation can be a tricky thing to get right. Frame rates, ratios, image formats and video players can all contribute to the hassle they intend to reduce.
jQuery Sequence tackles the problem with a 'back to basics' approach, ensuring there's a minimum of moving parts to worry about. All you have to do is provide a sequence of PNG files.
There's the obvious dependence on jQuery to consider, but other than that Sequence is about as straightforward as you can imagine. Just load in an array of image files, tell the plug-in your frame rate and a couple of other settings, and that's it. Sequence might be particularly useful for animation portfolio sites.
Should you, for any reason, be looking for a few PNGs to animate, Webchemy is worth taking a look at. Mirroring your brushstrokes either vertically or horizontally, it's a sketching tool with a very particular approach. When you might 'need' such a tool, it's hard to say, but there's a lot of fun to be had just sketching away with it.
The project is also hosted on GitHub – so if you'd like to fork a version that enables you to import your own brush shapes, that would be smashing.
How can you not love Firebug? If it were the only development tool available, you'd still be in a pretty good position. This update, though it doesn't have a big number attached to it, brings some great new features. Headlining we have SPDY support, but the performance visualiser/timer is great, and improved CSS selection is a bonus.
The performance timer may not be the easiest thing in the world to find, however. With console open you need to use the performance.timing command. This will break down page load speeds, DOM handling, waiting times … all that stuff. Very handy, but easy to overlook.
There was a time when it would have been inconceivable, but it now has to be admitted: Flash is dead. Long live the new king, HTML5!
However, during the handover period there's still quite a lot of stuff hanging around in SWF format that could do with being HTML5. Enter Swiffy, both service and Flash plug-in for translating SWF into HTML5 animations.
Swiffy builds a JSON-based representation of the file's data, which is then played using the Swiffy runtime JS library. Most of the visuals are converted into SVG format. It's clever, fast and does a bang-up job of reproducing even intricate animation work. It's functionality is also pretty widely supported by recent browsers, even IE.
There's a lot of extraneous information that comes along with HTML5. All sorts of libraries and patterns, boilerplates and frameworks. Though there's doubtless plenty to be happy about, all these additions can muddy the water – so Ian Devlin has very thoughtfully produced Bones, a page template that provides the absolute minimum you'll need get to get started with HTML5.
Very little in the way of JavaScript is used – there's no Modernizr, jQuery and so on. The CSS is normalised and some of the WAI-ARIA roles have been included, but other than that you're on your own (except for a few useful comments in the code). If nothing else, Bones tells you how much you've been relying on the set-ups of other frameworking solutions.
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!
Thank you for reading 5 articles this month* Join now for unlimited access
