\$\begingroup\$

Closed. This question needs to be more . This question needs to be more focused . It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 3 years ago. Improve this question

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, <canvas> , <audio> and <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.

Your entry must run in at least one public release of at least one of the 5 major browsers (IE, Firefox, Chrome, Safari, Opera). Only mainline releases (not builds from branches or builds that require patches), with no special configuration settings, plugins, or anything else that does not come with the stock browser are allowed. Nightly builds, betas, and release candidates are fine. Please specify in your entry which browsers you've tested your entry with. There are no limitations on what technologies you may use within those constraints; you may do a pure SVG animation, a pure CSS animation, something in JavaScript using WebGL, or heck, even something that uses XML and XSLT if that strikes your fancy. If you can cram it into a valid data URI, with no external dependencies, and get a browser to run it, it's fair game.

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

JS1k, a contest for 1k JavaScript demos

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 entry data: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.