Bounty is over, thephpdeveloper wins with Conway's Game of Life
The web platform today is advancing at a rapid rate. Features like CSS3 animations, transforms, drop shadows and gradients,
<video> tags, SVG, WebGL, and many more mean that you can do far more in the browser, and in far less code, than ever before. Of course, many developers don't get to use those new features, because the sites and applications they work on need to be backwards compatible with ancient, moth-eaten browsers like IE6.
So, what happens if you take the harness off? Allow yourself to use any and all new features that you like? Live a little, go crazy, use weird bleeding edge features that only 1% of your users will be able to take advantage of?
Of course, with unlimited resources and the ability to talk to a server, you can do all manner of things—load megabytes of code and libraries and videos, and so on—but challenges aren't very interesting without constraints. The major constraint for this contest is: what can you do in a single, self-contained, 4k
data: URI? Self-contained means it must not refer to any external resources, connect to any servers using WebSockets or XHR, or anything of the sort. If you want to embed resources like PNGs or MP3s, feel free to include data URIs within your data URI, or come up with some other clever way of embedding sub-resources. 4k means 4096 bytes, properly URI-encoded, ASCII text (you may use a base64 encoded data URI if you choose, to avoid URI encoding, but usually URI encoded text will be smaller than base64 for plain text).
To provide inspiration, the theme of the contest is StackOverflow memes. Create a unicorn-jousting game, a Jon Skeet fact generator, a freehand-circle based drawing program, or anything to do with one of the popular StackOverflow & meta.so memes.
I would encourage entries that are interactive in some way; not just a simple animation or static image, they should respond to user input, whether through events, CSS hover, scrolling, browser window resizing, or any other way you can think of. This is not a hard requirement, though; great demos that are not interactive will be considered, though interactivity would be preferred.
To add to the competition here, on Monday, March 21, I will open a bounty on this question. How can I afford a bounty when I have only 101 rep? Well, all rep I gain from upvotes to this question between now and Monday will go into the bounty (up to the limit of 500 allowed for a single bounty; it would be pretty hard for me to hit that limit, though, given the rep cap). Entries will be accepted for 6 days after that; all entries must be in at least 24 hours before the bounty expires, to give me time to check them all out and evaluate them. At that point, I will accept the highest voted answer, and give the bounty to my favorite answer (which may or may not be the same as the highest voted). My criteria for awarding the bounty will include beauty, fun, clever technique, interesting use of new features, interactivity, and size. People should vote based on any criteria they want, as long as the entries meet the rules.
Here are some sources of inspiration, to get you started:
- Chrome Experiments, a collection of demonstrations of the modern web platform
- Mozilla Hacks, a blog about the modern web platform with many demos of new features in Firefox 4
- 10k Apart, a webapp in 10k contest
- gl64k, a demo contest currently running for 64k WebGL demos
- Shader Toy, a set of demos of what you can do with WebGL shaders
Format for entries:
Name of entrydata:text/html,Your%20data%20URI
Works in Firefox 4 RC, Chrome 10, and Opera 11
Description of your entry; what it does, why it's neat, what clever techniques you used.
<script> // code in expanded form to more easily see how it works </script>
Any credits for inspirations, any code you might have borrowed from, etc.
(StackExchange appears not to accept data URIs in links, so you'll need to embed it directly in a