Sometimes less really is more. That was the premise of the recently concluded 10K Apart, a contest for web developers to see how far their imagination could go using modern web technologies and only 10 thousand bytes of code. To help you visualize just how meager 10 KB is, here are some comparisons:

  • The size of the Internet Explorer logo on the top-left of this page is 24 KB.
  • The uncompressed version of jQuery, a popular JavaScript library, weighs in at a whopping 179 KB.

The contest was the brainchild of An Event Apart, the standards-focused web design conference that co-sponsored the contest in partnership with MIX Online. Eric Meyer, a longtime standards evangelist and co-founder of An Event Apart, was unfazed at the prospect that the limitations of the contest might hamper the ability of the developers to create amazing experiences:

It's been said that limitations foster creativity, and the incredible creativity shown by developers in the 10K Apart absolutely proved that dictum true.”

A quick perusal of the 367 submissions makes a strong case for the ability of developers, despite constraints, to create some amazing applications. The grand prize winner of the contest was an addictive game called Sinuous which was developed by Hakim El Hattab. To understand exactly how a web developer thinks about cramming an entire game into a very limited space, we reached-out to Hakim for a little Q&A:

clip_image002

Microsoft: Hey Hakim! For everyone reading this post, where do you currently live and what do you do for a living?
Hakim: I live in Stockholm and work at Fi, an interactive web agency, as a Senior Interactive Developer. From day to day, my job mainly involves building the front end of our more interactive HTML projects.

Microsoft: As a front-end developer, roughly what percentage of your time do you spend writing different markup (HTML/JS/CSS) to support different browsers?
Hakim: On average, I spend about 20% of the project time on fighting cross browser inconsistencies and building fallbacks.

Microsoft: How did you hear about the 10k contest?
Hakim: Someone mentioned it on Twitter and it immediately caught my attention. Once I had read more about the contest it didn't take long until I knew I was going to be submitting something.

Microsoft: Why did you decide to enter?
Hakim: At the time, I was working very frequently on my HTML5 canvas experiments so when the contest launched it felt like perfect timing try and do something new. Sinuous is the first game I've built in HTML5 and luckily the size limit was not really an issue since my preferred style is simple procedural graphics.

Microsoft: How did you come up with the idea for Sinuous?
Hakim: The final gameplay of Sinuous is not what I had in mind when I started building the game. I sat down with one idea and jumped straight into code but at the end of the night I surfaced with something else entirely, that's how Sinuous was born.

Microsoft: What features of IE9 and other modern browsers made Sinuous possible?
Hakim: The most important feature used to build Sinuous is the canvas element which is used to generate the visuals of the game. The fast JavaScript engines of modern browsers are also an important factor, without which the game would not have been able to perform smoothly enough to be enjoyable.

Microsoft: Did you have to do anything special to make Sinuous run across the major modern browsers?
Hakim: All modern browsers could draw the game very well so that was never really a problem. When I added a high score list however, I started noticing how users on slow computers (low FPS) had a big advantage over fast computers. To solve this, and make the game more balanced, I made the score scale to what speed the game runs at.

Microsoft: How important to you is being able to write the Same Markup? Would you have coded a fallback for Sinuous for browsers that couldn’t render Canvas?
Hakim: It's important to be efficient and that isn't really possible if I have to construct too many fallback solutions. If the quality of what I'm building is put in jeopardy because of the time invested in a fallback - I'd just build it in the fallback technology from the start.


You can imagine that if Hakim had to include an extra 20% code for fallbacks for different browsers, he might not have been able to enter the competition in the first place. Or perhaps the effort of including all those exceptions and extra code would have eaten up time that could have been better spent making the game even more fun. That is why we are working so hard to drive same mark-up through our engineering process and our participation with standards bodies: to move the web forward and help developer get back that 20%.