Josh (the blog)

Hey there. I’m Josh, a SydneyCanberra-based maker of Internets. I don’t update this very often.


@joahua

A solution to Auspost’s unhelpful suburb/postcode license

Australia Post provide a nice convenient CSV of all of their postcode data, and then proceed to make the license quite prohibitive.

Commercial use? No. Open source modification? No. Redistribution? Nope.

This is really annoying, but thankfully there’s another option. For your bookmarking pleasure, enter https://github.com/joahua/AusPostcode. It’s a CC-BY licensed version of suburb/postcode data in both CSV and JSON formats (feel free to fork and submit a pull request if you’ve got others) based on Australian census data that’s much more permissively licensed.

Happy free/open-source postcoding!

WebGL ready for primetime

A particularly timely email went around the office this morning about WebGL and 3D animation.

All in all, it’s pretty depressing for us – but we’re on 2.5-3 year old hardware in some cases so the next generation won’t have the same issues. In fact, today’s mobile devices would probably demolish the desktops of yesteryear.

From: Sam
Sent: Thursday, 10 November 2011 9:02 AM
To: Web Developers Frontend-DL
Subject: Three.js – 3D Animation in jQuery

The Web GL examples may not work if you have an older computer. I tried them at home – pretty cool. http://mrdoob.github.com/three.js/

This one is particularly cool
http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html

Sam

From: Fiona
Sent: Thursday, 10 November 2011 9:09 AM
To: Sam; Web Developers Frontend-DL
Subject: RE: Three.js – 3D Animation in jQuery

:(

Browser support - your graphics card doesn't work

From: Josh Street
Sent: Thursday, 10 November 2011 9:14 AM
To: Fiona; Sam; Web Developers Frontend-DL
Subject: RE: Three.js – 3D Animation in jQuery

Doh.

VPU recover prompt

From: Sam
Sent: Thursday, 10 November 2011 9:18 AM
To: Web Developers Frontend-DL; Anton; Darian
Subject: Three.js – 3D Animation in jQuery

Safe to assume it’s not ready to go mainstream just yet.

Imagine IE6 trying to deal with it…

IE6 is probably not relevant anymore, but the real issue is IE7-9. On the basis of something that’s mostly software related – whether at a level of browser support for different graphics cards, or a user’s access to a particular browser at all – we’re inhibited from deploying particularly cool/useful technologies.

This is an old story. Users take too long to upgrade.

The difference here is that, post Windows XP, upgrades aren’t being held back by hardware or platform anymore. Performance has plateaued across desktops as integrated graphics are “good enough” for many applications (see system-on-a-chip mobile solutions where CPU and GPU are tightly – and beneficially- integrated) and discrete graphics are blazingly quick.

I was surprised to discover that the much-hyped Skyrim would purportedly run at high detail on my 18-24ish month old desktop. Caveat – I’m a bit of a hardware geek and probably over-specced (in terms of gaming) when it was built, but it cost under $1000 once you exclude all the hard drives (video editing box… before I switched to OS X). It’s still (apparently) getting incredible performance by today’s standards. This doesn’t speak to a lack of innovation – though it probably says something about the self-cannibalising properties of that industry.

“Oops, my PC is too fast” probably remains an uncommon complaint. Still, I’d contend that for many users, perceived speed will become less of an issue over the next upgrade cycle. Form factor (Macbook Air), low latency (SSDs) and portability (tablets) are the key competitive fronts today and will continue to be. For web technology, this means that we can innovate with confidence where performance is concerned.

The blocker is software.

For now, the trend appears to be targetting applications at particular select user agents to the exclusion of others. WebGL is a great example of this insofar as it doesn’t have a neat fallback option as tools like Raphaël do with VML. Fundamentally, this may be no different to nested video embedding that differs on the basis of browser capabilities. In practice, few will seek to implement equivalent functionality or design 2D experiences to match rich WebGL ones – it’s just too complex.

The real winner in all this is mobile, which has a reasonably broad support for hardware accelerated web experiences.

How to install Android Debug Bridge (ADB)

The latest Android SDK doesn’t ship with Android Debug Bridge (ADB) included.

Instead, you need to add it by installing the “Android SDK Platform-tools” package via the Android SDK Manager.

Once you’ve done this, it will be available under {path to Android}/android-sdk/platform-tools/ instead of its old location under android-sdk/tools/

Simple!

8 bit PNGs with alpha transparency

To some developers, the title of this post might well read “Unicorns exist! News at 11!”. Exciting stuff, but not widely known in my experience. Not that unicorns exist in my experience. I digress.

The colours below are the palette generated with indexed transparency (left) vs. true alpha transparency (right) in a 256 colour 8 bit PNG by a lovely piece of software called Fireworks. Let me explain.

I’ve joined a new UI development team this past week that require pretty broad-based browser support for a bunch of sites (i.e. IE6 experience needs to not suck) and their process includes a PNG quantization step before hitting a live environment. This is cool, but the IE6 support necessitates not using alpha. Or so I’m told.

This prompted me to look up something that I discovered probably around a year ago but never got around to writing it up, nor particularly practicing!

I can’t remember where, exactly, though suspect Dave Shea might’ve had a pointer or an article that presumed knowledge of the technique. In the process of writing this article, I’ve also rediscovered a SitePoint article on the issue that’s quite helpful.

The bottom line is PNG-24 is great but impractical in older browsers for a host of reasons. While 8 bit PNG is not without its limitations (c’mon, 256 colours ought to be enough for anyone!), it’s clear that for graceful degradation and marginal improvements in file size it’s stil worth considering.

In terms of creating images there are a few challenges. First and foremost, everyone uses Photoshop but Photoshop sucks at save-for-web’ing 8 bit PNGs: you just don’t get the options you need. Fireworks hands you this in spades. I’m no Fireworks pro insofar as workflows and just getting designs done goes, so typically I’ll save for web to a 24bit PNG from Photoshop and then open that in Fireworks to export the alpha 8 bit image.

The Sitepoint article linked above suggests that [some] quantizers will give you the chance to do the same thing, but the issue is if you’re exporting an 8 bit PNG in the first place you’ve already lost the chance to create an image with alpha. Most front end devs will want to preview things like dithers, colour banding, etc., so handing control over to a CLI tool just isn’t going to fly. I’d contend that Fireworks is really the only viable solution in that it balances image optimisation and control. Of course, you’re welcome to run the PNG Fireworks outputs through a quantiser: it’s already 8 bit so your palette is locked in, and the quantiser is unlikely to mess with the alpha if it purports to support this.

The reasons are broader than just browser support: in my (limited) testing, PNG24 files could easily weigh in at twice the size of their RGBA 8 bit alternatives. On a 500x500px test that generated the paletts shown above, file sizes were as follows:

  • 8 bit PNG indexed: 7KB
  • 8 bit PNG transparency: 7.5KB
  • 24 bit PNG: 15KB

I’m going to make sure I actually take advantage of this feature in the future, as there are clear filesize benefits to be had as well as support for crappy, dwindling browsers. Sorry, IE6.

Quicktime X into Final Cut Pro errors

If you’ve made a screen recording using Quicktime X, you’ll likely have difficulty importing it into Final Cut Pro 7 because of its variable framerate.

The easiest way to resolve this is to take the file through Compressor first – ProRes 422 Progressive will be great. Frustrating, but whatever.