Are You Pondering What I'm Pondering?

I had the chance to implement an easter egg on the Photojojo Store’s mobile site. If you visit the site on a mobile device and shake the device, some confetti (or maybe more like lucky charms) will fall across the page. Here’s a simulation if you’re not on a mobile device.

Drew suggested the idea of using confetti with this cool example: confetti cover. It’s much fancier than what I put together, but it uses canvas, so it would be hard to have it overlay the store content and I was a bit worried about how it would perform on slower devices.

A bit of searching brought me to a confetti example by Pamela Fox using CSS animations. It’s pretty straight forward: each piece of confetti is a unicode character with 3 CSS animations. [Edit: Huh, looks like the triangle unicode character I used isn’t on Android Chrome.] 1 animation causes the confetti to fall, one causes it to fade out, and one animation causes it to spin. I made some minor modifications to the code to have the confetti spin 3D and clean up after itself, but otherwise it’s basically the same.

The final trick was to hook it up to a mobile device shake (this idea was suggested by Darby), which I was able to find an example of on stack overflow. Unfortunately, the DeviceOrientation Event Spec isn’t fully implemented in Android Chrome, even though it is supported by the Android Browser. What this means is that you can’t see the easter egg on Android in Chrome, but if your phone has the built in browser (not found in newer Google Experience phones like the Nexus 4), it will work.

As I was testing in different browsers, I noticed that in Safari, when you scroll the page, the confetti stops moving. I suspect this has something to do with how the hardware acceleration was implemented to make scrolling fast/smooth. I don’t see this the desktop Chrome or Android browser, but maybe that means the animation isn’t being hardware accelerated? I don’t know.

I wrote a Chrome extension for loading revelation password files in a browser action popup. It’s called revelation helper and is probably of no interest to anyone other than me.

I ended up using lots of new web technologies including:

• A content script with cross-origin XHR to load my password file from Dropbox.
• XHR with an arraybuffer response to get the binary password file.
• localStorage holds a copy of the password file.
• A native client module decrypts and unzips the password file. tomcrypt and zlib were found in naclports.
• New flexbox is used for the UI layout.

Aside from a couple small NaCl related hiccups that I was able to resolve with some web searches, everything worked pretty easily and the documentation was pretty good.

Elliot just landed support for buttons on the top left corner. If you’re running Ubuntu 10.4 Lucid with a gnome theme with buttons on the left, you should see this the next time Chromium updates.

Over the winter break, my brother and step-sister were playing a the iPhone game Drop7[1] a lot. Since I own an Android phone, I wasn’t able to play the game on my phone.

So I decided to write the game myself. It’s just a webpage, so you can play if from Safari, Mobile Safari, Chrome, Firefox, or the Android browser. I call it Drop Factor. The game play is based on the hardcore mode of Drop 7.

It’s build using Javascript and canvas (the platform of the future, I’m told). You can grab the source on github.

[1] I think it’s based on the flash game chain factor.

Here are the slides from my talk. I gave the presentation in Chrome, so the slides may not work in all browsers (the svg syntax may be webkit only).

I think a video will be posted in a few days.

I had a good time at the conference. Thanks to the UIUC ACM chapter for inviting me to talk!

I’ll be at my alma mater to speak at the ACM Reflections|Projections Conference.

I’m going to be telling some stories about Google Chome and how the multiprocess architecture and sandbox lead to some interesting technical problems.

The schedule hasn’t been posted yet, but the conference runs from the evening of Oct 16 to Oct 18. If you’re around, swing by and say hi.