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 game

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.


Webpage with a note taking box overlayed.

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.


Graph10K app

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.

10K L-Systems

L-System drawing

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.

Racer 10K

Race car on a track

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.

The Smallest 3D Maker

3D model

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.


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 http://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 (11)

  1. KS says:

    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.

  2. Parrotlover77 says:

    "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?

  3. yellowstone says:

    .wdp File, .jxr File(JPEG XR) SUPPORT(.wdp, .hdp, jxr etc Support…)!!!

    I speak little English.   ^_^;;

    Thank you.

  4. Cavalary says:

    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?

  5. Yikes says:

    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?

  6. Ian says:

    When are we getting css3 transitions/animations?

  7. Great contest says:

    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.

  8. a says:

    IE9 Feedback: not good at flash supporting—-it may fail and the page may be damaged.

  9. someone says:

    Hey IE team, I have a little request/question for you. Since XP?, suppose if I build a BHO for IE, I can prevent Explorer.exe from loading it by adding a "NoExplorer" value so only IE loads it. Can the reverse be done? If I build a shell extension that requires a BHO for Explorer.exe, can I add "NoIExplore" to make only Explorer.exe load it? This functionality if added to IE9 will greatly ease the loading speed of IE9 tabs as Explorer addons like Groove slow down IE unnecessarily. In such cases, disabling the BHO entirely is not the optimum solution for disabling it only for IE would be ideal.

  10. Richard L Walker says:

    Games win; math and engineering loses.  Seems about right.

  11. Furryface says:

    This reminds me of the days of real computing. We ran CPU's that were built on circuit boards. The microprocessor had not been invented yet. The first IBM PC was years away. We ran programs using memory core boards of which the largest was 4X32K or 128K or memory. Yes thats right, 128 Kilobytes of memory. We used 2 Meg hard drives and later on moved up to a giant 29 Meg and then 80 Meg hard drives that used disk packs that you had to insert and remove with a cover similar to a see through cake cover. We manufactured mini-computers for data entry work. Our best system could have 48 terminals all going at once. Backs ups to tape drive had to be done every noon hour because the hard disk would get full. Printers were giant (by todays standards) line printers. Everything was either on wheels or rack mounted. Now THAT was real computing. 😉 Programmers had to be real tight with their code because there was not a lot of memory to hold the program. There had to be somewhere to hold the data. The programs were often loaded from tape or card reader or later on from the disk drives as they got a little bigger (a screaming 80 megs worth). Then along came the first  IBM PC. We laughed at it because it didn't even have a hard disk, all it had was one or maybe two floppy disks and they were asking how many thousands of dollars for it!! Wow.  We have come a long way baby in just 30 years.