Media Query Mario

A couple of weeks ago at WDC2012, I watched a talk by Syd Lawrence empowering developers to just get out there and hack stuff together. Taking this a little bit literally, I got home and saw a tweet about the October Mozilla Dev Derby and thought it could be as good a place as any to start.

The result of this logical thinking is Media Query Mario, a mashup of Media Queries, CSS3 animations and HTML5 audio, which I posted up to the competition last night (leaving it close to the deadline as ever!). It runs smooth as silk in Firefox, but is a little rough around the edges in Webkit due to strange implementation of some CSS3 animation properties. The main aim for me with this was to really push CSS3 animations in a different way and see how much we can actually do with them right now and I'd like to think it's achieved that. If anyone is interested in the code, it‘s available to view on CodePen.

To say I'm happy with the feedback so far would be an understatement - after posting it to Hacker News, it hit no. 3 for most of the afternoon and is still lingering on the front page as I write this.

I'd love it if people posted feedback, positive or negative, in the comments here or to me on Twitter - I'm planning on writing up how it was put together when I get chance too, so if anyone wants to know anything specific, just let me know and I'll try and include it in that.

Also, if you do like the demo, please 'like' it on the Mozilla demo studio - it might push it to glory in the dev derby with a bit of luck!

Article posted on the 1st November 2012