10K Apart
Today we feature a post by Nishant Kothary & Joshua Allen, web standards evangelists at MIX Online who work closely with the web community to listen, learn and help them make the most of the Microsoft platform.
The recurring theme for IE9 is about putting sites in the center—from enabling hardware-accelerated HTML5, to the simplified browser UI building on the familiar experiences of Windows and the power of whole PC. In fact, the public launch of the IE9 beta on beautyoftheweb.com centered on inspired designers and developers pushing the boundaries of HTML5.
Another such effort backed by IE9 was the 10K Apart Challenge.
Quick Background
The 10K Apart Challenge had a simple premise: Could you build a complete web application using less than 10 kilobytes? That we may trace the predecessor of the 10K Apart—the 5K Awards—to a time almost exactly a decade ago is sheer coincidence. What isn’t coincidence, however, is its backing by a pioneering web community fronted by Jeffrey Zeldman, A List Apart. As Zeldman wrote in 2000, “It was an unassuming little web page that posed a singular challenge: could you build a complete website using less than 5 kilobytes? ”
As you may have guessed from the title 10K Apart, not only was Mr. Zeldman involved this time around, but so was his honorable partner, world-renowned CSS pioneer, and one of the original web standards champions, Eric Meyer. A joint effort between An Event Apart and MIX Online, the 10K Apart reaped 367 web applications in 28 days—everything from casual games to RIAs—that demonstrate, even with their tiny footprints, what is truly possible with modern standards.
From Web Sites to Web Applications
Perhaps the most striking thing you notice when browsing the entries, is how many of them don’t look like Web pages. Using modern Web technologies like Canvas, SVG, CSS3, and fast JavaScript, contestants were able to create Web apps that could easily be mistaken for native applications, Flash apps, or iPhone apps. Several people have remarked that the creativity and energy shown by the developers reminded them of the heady days of the Demoscene, when crews competed to make the coolest demos for Amiga or Commodore 64. Rather than targeting a specific platform, though, these apps work cross-platform and cross-browser.
Some of the contestants went to extraordinary lengths to fit into the size limit. Several people came in within a few bytes of the limit, and we were especially impressed with Alex Le’s script used to bundle JavaScript code into a PNG. We even got some pretty amazing entries that were less than half the size limit.
Let’s take a peek at a few:
Sinuous was the grand prize winner, a creative little casual game. It’s built on Canvas, and runs great in all modern browsers. It’s even designed to work properly in touch-enabled mobile phone browsers.
TinyBounce was awarded honorable mention. It doesn’t do any advanced graphics, but is a very useful utility. In less than a minute, you can load up a Web page, overlay some notes, and share your notes with a friend. We’ve been using it internally to share design critiques, since it’s so painless.
The competition was so strong that this app didn’t place in the top 10. But it’s a great example of the appification of the Web. Try some of the sample graphs, or type your own equations by hand. Also be sure to check out Graphr, another clever graphing app.
Yet another brilliant application that didn’t place in the top 10, and also a great example of the appification of the Web. As you may have guessed, you can plug in an L-system, and watch the application paint it on a never-ending canvas.
Taking us back the early days of V.R. and Mario Kart, it’d be unfair to not give Racer 10K a shout-out. This one has a goody at the end that is clearly from our time, though.
As the title implies, this little app lets you draw a Bézier, extrude it into a 3D object and then spin it. Play with it long enough, and it becomes a rather addictive game to create the most complicated 3D object with a single curve.
Finally
Online contests are generally transient experiences—they are gone almost as soon as they come. But if twitter is any indicator, the 10K is here to stay. So if you haven’t already, go delight and inspire yourself by checking out the creativity up on display at https://10k.aneventapart.com.
In closing, Zeldman sums it up best—
“10K Apart showed that creativity and innovation, far from being relics of our medium's wild early days, are very much alive on the Web; that constraints inspire great design; and that open web standards, combined with browsers that support them, afford a deep and wide platform for the Web's continued growth.”
Nishant Kothary & Joshua Allen
Standards Evangelists, MIX Online
Comments
Anonymous
November 03, 2010
As a sidenote, it also shows how ridiculous some of the aspects of social/web 2.0 applications are. Went to 10k.aneventapart.com/.../91 and it downloaded 1811 comments as well. What a waste.Anonymous
November 03, 2010
"The recurring theme for IE9 is about putting sites in the center" - That's a great theme and web developers are glad MS is listening. That said, I don't think the wishes of the web developer should ever override the wishes of the end user. In that vein, can we please have more customizability on the UI? Separate tab bar, page titles in the window title (super useful for AHK scripts), IE8-level of information in the status bar (it's so useless now). Please?Anonymous
November 04, 2010
.wdp File, .jxr File(JPEG XR) SUPPORT(.wdp, .hdp, jxr etc Support...)!!! I speak little English. ^_^;; Thank you.Anonymous
November 04, 2010
Off topic (but on the IE9 topic), annoying issue that I just had pop up: I was opening an HTML file on my computer (but with base set to a location on my site, and grabbing the CSS from there as well) and it froze. Nothing was displaying at all, so I just closed it, only to notice that I had a "Notepad" text stuck in the middle of my screen (obviously left over from when I clicked to open said file with notepad while IE was frozen, to see if it was generated correctly, as it was generated by a little program I wrote). Tried again after making sure the file was just as it should be and still freeze. Then opened the file with FF to make sure it works and rebooted to get rid of the stuck text. After reboot, try to open IE again and... freeze, as in not displaying the recent tabs screen that's set as homepage and if I clicked the tools icon only file and zoom were available, the rest greyed out. Close and see "Internet Options" stuck on screen (tried clicking it despite it being greyed out). Try to reopen, still frozen. Close again, open task manager and see 5 IE processes running (this being after IE was closed, mind you). Take them one by one and try to close them, but only one of them works (and when I close it the stuck text also vanishes), the other 4 just wouldn't close (if I tried there was a momentary spike in CPU usage from them, then everything was as before). At a 3rd attempt of opening IE it finally started properly, but I still have those 4 processes running. So any idea what happened to it and how to make it no longer act up like this?Anonymous
November 04, 2010
Has any one else had problems with 10k.aneventapart.com/.../40 on IE9? It works just fine in webkit browsers. Also ... for some reason 10k.aneventapart.com/.../392 ran terribly slowly on my Thinkpad T61 with H/A. When I forced IE9 to render it in software mode it was smooth as butter. Why?Anonymous
November 04, 2010
When are we getting css3 transitions/animations?Anonymous
November 04, 2010
The contest and all the submissions were great! - Its too bad that most of them won't even run or render in Microsoft's currently shipping browser... yet they almost all work in every other browser. Oh well.Anonymous
November 04, 2010
The comment has been removedAnonymous
November 04, 2010
The comment has been removedAnonymous
November 04, 2010
Games win; math and engineering loses. Seems about right.Anonymous
November 05, 2010
The comment has been removed