theme selector

light blue screenshot grey screenshot navy screenshot dark green screenshot red and black screenshot

by Tony Chang

All opinions on this site are my own and do not represent those of my employer.

Creative Commons Attribution License

Confetti Easter Egg

Jun 29, 2013, 06:20pm EDT



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.

revelation helper Chrome extension

Oct 15, 2012, 02:22am EDT



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:

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.

Chromium with buttons on the left

May 14, 2010, 12:42am EDT



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.

drop factor (aka drop 7)

Jan 02, 2010, 09:28pm EST



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.

slides from R|P talk

Oct 17, 2009, 10:42pm EDT



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!

Speaking at Reflections|Projections 2009

Sep 12, 2009, 09:42pm EDT



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.

older entires »

Technorati Profile