CSS3

New tools for web design and development: July 2012

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.

The output is a bit heavy on your CPU, but CSS3 lighting engine Photon is fun, clever stuff
The output is a bit heavy on your CPU, but CSS3 lighting engine Photon is fun, clever stuff
2. Ninja 0.7.0

Price: Free

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.

Tetsubo.org's Ninja is a visual tool for authoring advanced HTML5 content
Tetsubo.org's Ninja is a visual tool for authoring advanced HTML5 content
3. Opera Mobile Emulator

Price: Free

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.

Opera Mobile Emulator is a first-rate emulation tool, and can be connected to Opera Dragonfly for debugging work
Opera Mobile Emulator is a first-rate emulation tool, and can be connected to Opera Dragonfly for debugging work
4. TinyPNG

Price: Free

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.

TinyPNG offers smart lossy compression of PNGs, also making them play happily with IE6. Bonus!
TinyPNG offers smart lossy compression of PNGs, also making them play happily with IE6. Bonus!
5. XMLPlayground

Price: Free

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.

Lost your XML mojo? Try XMLPlayground, and you might just rediscover your love for XSLT
Lost your XML mojo? Try XMLPlayground, and you might just rediscover your love for XSLT
6. jQuery Picture

Price: Free

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.

Need to serve images to responsive sites? jQuery Picture offers an excellent stop-gap while you're waiting for the new <picture> and <source> tags to be approved
Need to serve images to responsive sites? jQuery Picture offers an excellent stop-gap while you're waiting for the new <picture> and <source> tags to be approved
7. jquery.cookie

Price: Free

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').

Cookie-handling became bothersome following the recent change in EU law. Klaus Hartl's jquery.cookie makes it easy again
Cookie-handling became bothersome following the recent change in EU law. Klaus Hartl's jquery.cookie makes it easy again
8. WebGameStub

Price: Free

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.

Pick apart Mozilla's WebGameStub and learn to build HTML5 canvas games as you do
Pick apart Mozilla's WebGameStub and learn to build HTML5 canvas games as you do
9. Modernizr 2.6

Price: Free

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.

You can read our recent interview with Modernizr developer Paul Irish in the News section.

Helping you support older browsers in your sites, Modernizr is a vital library to keep abreast of
Helping you support older browsers in your sites, Modernizr is a vital library to keep abreast of
10. Safari 6

Price: Free

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.

The latest version of Safari offers the new Web Audio API, and some... er, interesting opportunities regarding private browsing
The latest version of Safari offers the new Web Audio API, and some... er, interesting opportunities regarding private browsing

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!

Subscription offer

Log in with your Creative Bloq account

site stat collection