I am right now in the US for my first week in Mozilla (back to back meetings and lots of discussions and interviews of awesome going on here) and when I got back to the hotel USA had all the Indiana Jones movies playing. Now, I always loved the travel sequences with the moving red line and map and the video of the plane on top (and its copy in Rocket Ranger on C64). As I had my trusty MBA on me I thought I give it a go to re-create the effect in HTML5 - and I did:

You can See the demo online and read the details on the Mozilla hacks blog: Syncing HTML5 video with Google Maps. The source is of course available on GitHub.

I was pretty amazed how easy it is to achieve the effect. Most of playing with HTML5 is simply letting yourself go and have a run for it rather than thinking of how hard it might be.

Things that made me happy this morning:

• Apparently I am the third most influental GitHub user in London – more importantly, ex-colleages Steve Marshall and Yoan Blanc lead England and Switzerland!
• SimpleGeo has released two new Geo free APIs that give almost the same data density as Yahoo GeoPlanet
• A Star Wars alphabet of win
• Github have a really cool new tree interface using the HTML5 History API
• The new HTML5 interface of NYT looks quite nice
• Make your iPhone look like a nice snack
• Genius copy protection by Ubisoft Vuvuzelas Blare on Pirated Copies of Michael Jackson
• Understanding Pac-Man Ghost Behaviour explains all the internals of Pac Man
• Getting to work with new web technologies is a cool introduction to the topic
• If Web Browsers Were Celebrities is a cute little infographic
• Minimalist Muppets are good fun
• Now there is a Opera Mobile emulator for desktop
• head.js lazy-loads scripts in order and has some CSS3 and HTML5 detection methods.
• A full-length Star Trek fan fiction movie in 3D renderings
• Did you know you can use Google Translate as a beatbox
• Flickr Hack Makes 3D Model of Any City in a Day
• TweetSentiments now has a new API.
• Good tutorial on Stack Overflow on starting with Git
• Social Steganography: Learning to Hide in Plain Sight is an interesting take on Facebook privacy
• A service to clean up your PSD files into organised folders
• Ars Technica’s explanation of how they build der iPad app with HTML5
• Carina Reindl hat eine deutsche version meines “images” Artikels fuer OWSC
• Eric Karjaluoto has some interesting tips on delivering presentations
• MIT Labs create hack to browse Chrome with body movements using a Kinect controller

For years I have been advocating the benefits of progressive enhancement as a safeguard to deliver working code to the world. In this – my final public talk as a full-time Yahoo employee – I talk about the why and how of progressive enhancement. I take a look at examples from the real world and point out dangers of repeating mistakes from the past for the sake of showing cool technnology.

There is also a copious amount of swearing if I remember correctly. Enjoy.

The Slides

Understanding progressive enhancement – yuiconf2010

Audio recording of the talk

The audio recording is available on archive.org

I just got back from Frontend 2010 in Oslo, Norway. Two days of excessive drinkinggreat information about designing and building the web of tomorrow.. I was invited as a speaker alongside a lot of great people and my task was to give the last presentation of the conference to sum up a bit what we had heard about and what to do with it when we get back home. And this is what I did. Here are the slides. More to come later when the video is out and I am not using my almost empty Nexus as a hotspot as the British Airways wireless is FAIL again.

One of the things that gets me excited about the new features of browsers is the “HTML5” Web Storage module. I like it mostly because of its simplicity.

The Web Storage idea is to simplify storing of information for the user. I always hated using cookies because of all the domain issues. It was also a mess to check for them and then fall back to other things. Most of all people are paranoid about them and I know a lot of corporate computer users who have all cookies disabled.

Web Storage on the other hand is a simple object in the browser. You can set localStorage.foo to ‘bar’ and when you read out localStorage.foo next time you load the document it will be ‘bar’. That’s how easy it is. You can store 5MB of textual data which could be integers or strings. With JSON.stringify() you can easily store more complex information.

So I was wondering what you could use that for to get the most out of it and I realised that in a lot of cases I render simple HTML in PHP and then do some clever stuff in JavaScript to make it a different interface. If I wanted to retain the state of that interface I’d have to somehow store it in a DB so next time the user comes to the site, I re-render the last state of affairs.

With localStorage you could do that by simply caching the innerHTML of the main app (if you build it progressively):

You can check the source of the trick in this Gist on GitHub:

If you don’t get what I am doing here, check this quick screencast:

I’ll be using that a lot – it is terribly simple and yet powerful.