This month, Mark Penfold's round-up of the best new tools ranges from cutting-edge experiments to down-to-earth utilities. Give them a try: they're all free
This month sees a mix of the boundary-pushing and the practical. The two aren't such strange bedfellows as they might appear, at least when it comes to web development – for the simple reason that just about any attempt to stretch the realms of the possible will cause a few holes to appear in what you've got. And that's where the practicalities come in.
So we've got a 3D CSS3 lighting rig and a PNG image cruncher, a media production suite and a cookie cutter for jQuery. You can't afford to lose sight of the details when you're trying to make changes to the big picture.
What's more, many of the dev community's brightest stars are associated with detail work. Take, for example, the Modernizr project, also updated this month. When it actually comes to building the web, it isn't content that is king: it's utility.
1. Photon
Price: Free
This is a fun project. Photon creates a simple lighting effect for DOM elements rendered in 3D space. This is made possible by the newfangled CSS transform property. Or, as it's more properly known, the '-[vendor prefix]-transform' property.
It's clever stuff, if somewhat tricky to get your head around, and a bit heavy on the old CPU. But Photon's creator, Tom Giannattasio, makes a good case for its use in the form of an origami crane. Fire up a decent browser and take it for a spin.
Tetsubo.org's Ninja is an impressively full-featured 3D-style content production tool. It's capable of producing objects, scenes and even animations, delivering them as HTML5.
Ninja is a Chrome application and as such requires an up-to-date install of Google's browser, inside which it will run. It's not the easiest system in the world to get on with, but given the volume of work being done behind the scenes, this is entirely understandable.
The output code is HTML/CSS3/JS, and it's pretty clean. Ninja works well as a design tool, and with the addition of a code view, it could become just as popular with developers.
Ever wondered how your site is going to work out if someone visits on Opera mobile? Well, wonder no more, because Opera has released a first-rate software emulator. And what's more it can tunnel through to Opera Dragonfly so you can debug the whole thing remotely.
You have to hand it to Opera: they like to do things properly. The app runs smoothly, offers a range of devices to emulate, and works well with the debugger. If they would be good enough to extend this service to cover other browsers and platforms, it would be great.
You've got to love .png files but their size precludes them in all but the most essential situations. (That, and the fact that IE6 will not play ball.) TinyPNG offers a solution to both of these annoying little problems.
The answer is to convert uploaded 24-bit images into indexed 8-bit graphics. This process can have massive space-saving implications but it also has the side effect of working with IE: no workaround required. That's what they call a win-win situation. At any rate, George the panda – TinyPNG's mascot – seems pleased.
XML is such a versatile technology, but getting to grips with some of its more esoteric functionality can be a long and tedious struggle. XMLPlayground does all the hard work for you, leaving the field free for some semantically meaningful shenanigans.
XSL, XPath, XQuery, Schemas, DTDs, RelaxNG: is any of this ringing bells? If it does, but you've let things slide a bit, check out the site: you might just rediscover your love for XSLT. Failing that, upload code and try a few fiddles. It's a great way to learn how tech fits together.
That responsive design thing has a few issues, doesn't it? The most obviously perplexing thing is image delivery. How do you go about serving varying image sources reliably?
jQuery Picture approaches the situation by using either <figure> or <picture> tags, which detail the image sources, and a .picture() append to choose between them. Once the new <picture> and attendant <source> tags are available (they're comparatively new proposals) the plugin will become redundant, but as things stand it's a first-rate stop-gap.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Dealing with cookies wasn't the worst job going, but following recent changes in EU law, it became a lot more bothersome. Luckily, Klaus Hartl has been good enough to write jquery.cookie: a jQuery plugin to take the strain of actually managing cookies.
Usage is as simple as you'd expect from jQuery, passing in the value of your cookie along with its name and an object containing such variables as domain, secure and expires. You read back with a simple call to $.cookie('cookie_name').
If you're thinking of knocking out a couple of HTML5 canvas games over the weekend but aren't totally sure where to start, look no further than Mozilla's fledgling WebGameStub.
Essentially, it's just a very basic HTML5 game set up with CSS, jQuery and canvas, all designed for you to pick apart. Customise as you go along, learning how the game loop works, and how it handles collision detection, sprites, events and so on. Before you know it, you'll have a game of your own ready to rumble.
Leading with improved Geolocation, WebGL and a host of community-contributed detections, the latest update to Modernizr delivers some important new detects for the progressive enhancement cabal to get their teeth into.
Version 2.6 of the popular browser capability detection tool updates a couple of dependencies too, but the largest volume of new detects comes from the community. The list itself makes interesting reading: css-backgroundposition-xy, css-subpixelfont, svg-filters, vibration…
If you're keen to make use of the latest features in a responsible fashion, this is one library you need to keep up to date with.
The headline news for the latest version of Apple's browser is the Web Audio API, which does pretty much what you'd expect: process audio files from HTML5 media elements, create spatial sound effects, and synthesise and process audio directly in JavaScript.
Possibly more interesting is Safari 6's ability to detect private browsing, opening up what Apple describes as 'opportunities' for extensions dealing with privacy. It's a neat thing to be able to do, but does beg the question of what use private browsing actually is.
There's a few other worthwhile additions too: CSS filters, a new Web Inspector and beefed-up JavaScript support. Overall, an interesting release.
Safari 6 made headlines last week when the update appeared for OS X but not for Windows. Developers seemed unfazed: you can read our round-up of reactions in the News section.
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
