You are reading a MIX Online Opinion. In which we speak our minds. Nishant Kothary Meet Nishant Arrow


21Comment Retweet

Is Your HTML5 10K Apart?

Jul 29, 2010 In News By Nishant Kothary

It’s time to get back to the basics—back to optimizing every little byte like your life depends on it. Announcing 10K Apart, a contest for people who make web sites

A List Apart: For People Who Make Websites Ten years ago, a little community for people who make web sites introduced the 5k Awards in an article titled Much Ado About 5K:

It was unassuming little web page that posed a singular challenge: could you build a complete website using less than 5 kilobytes?

5K? Was contest creator Stewart Butterfield nuts? The rules of the 5K Awards, in their entirety, read as follows: “All HTML, script, image, style, and any other associated files must collectively total less than 5 kilobytes in size and be entirely self-contained (employing no server-side processing).” Great. All he left out was the part about not using a monitor or keyboard. And the flagellation, of course.

Flagellation, indeed, Mr. Zeldman. But, as he knows all too well,it’s hardly far from reality. Frugality of file size has always been a core tenet of great web development,and still is. That’s why the 5K spirit matters as much today as it did a decade ago.

So, what better time than now—the year of HTML5—to resurrect the 5K Awards? Albeit with a slight facelift and adjusted for inflation.

Without further ado, we are excited to introduce the next chapter in the 5K Awards—10K Apart—in association with our friends at An Event Apart.

10K Apart

The Skinny

The premise is intact: Could you build a complete web application using less than 10 kilobytes? But, as mentioned earlier, we’ve taken inflation into account. We’re letting you use jQuery, Prototype and Typekit without it counting toward the 10K (sorry, no back-end, though; client-side only). And we’re giving you 5K more to play with, for those of you who already did the math. A whole 5K. 10240 bytes. Twice as much as your forefathers got!

10K in Prizes

As if the glory and pleasure of optimizing every byte like your life depended on it weren’t enough, we’re also emptying our pockets on this one. We’re giving away prizes that amount to 10,000 bones to 13 winners in all. The grand prize winner will walk away with a $3000 Visa gift card, registration to his or her choice of an AEA event within the next year and a copy of the brilliant book by Jeremy Keith, HTML5 for Web Designers. OMFG is right.

Just One—OK, Five—Catches

10K Apart Judges

Their names may you have heard. Jeffrey Zeldman. Eric Meyer. Nicole Sullivan. Whitney Hess. Jeremy Keith. These are the five people sitting between you and your prizes. Err… good luck?

4 Weeks & Counting

10K Apart Judges

There you have it—one contest, thirteen prizes, five judges, four weeks. Surely you can do way better than the pandering Weimaraner sample application (we’re looking at you Mr. Doob).

Well, what are you waiting for? Go forth and build an app (or two, or three) that stands 10K Apart from the rest.

Follow the Conversation

21 comments so far. You should leave one, too.

Chris Wallace Chris Wallace said on Jul 29, 2010

Holy mother of -- YES. I CAN DO THIS.

Carlos A. Cabrera Carlos A. Cabrera said on Jul 29, 2010

Can people use jSON data from third parties APIs?

Nishant Nishant said on Jul 29, 2010

@Chris—We await your entry!

@Carlos—Absolutely. Just don''t have the data return urls to image slices to construct the UI of your app :-)

Jason said on Jul 30, 2010

A quick thing: you said we could use jSON data from 3rd party APIs. Doesn''t that mean that someone could just have their app make a lot of requests to their own API which would be doing all the hard calculations (that would normally push them over the 10k limit)?

Andrei said on Jul 30, 2010

The question about API is an issue. I think you should formulate the rules about it more strictly. As Jason said it is possible to move all logic out of 10K then.

Xrymz Xrymz said on Jul 30, 2010

Question about the generation of page ... If I have JavaScript on the 5k, but it will generate a page on 20k ... it will be by the rules?

Txb said on Jul 30, 2010

I think it would be a more interesting challenge to build something truly stand-alone that works even when off the interwebs.

hehe said on Jul 30, 2010

Speak your mind, but please--be kind1

Mourner Mourner said on Jul 30, 2010

@Nishant - do images that are part of the content and not the UI count? E.g. can I use some external API to fetch photos and make a gallery out of them?

James James said on Jul 30, 2010

What Jason mentioned is definitely important. Maybe add a rule like: "All application logic must be contained within the 10k zip..."

compplace said on Jul 30, 2010

And what kind of sites it must be?

Xrymz Xrymz said on Jul 30, 2010

if I did matimatiku at 10k I can still use the pictures on the 5k?
but I can use matikamiku on 15k without pictures, if the entire schedule will generate at javascript?

and another question, can I use Minify Javascript or Javascript Packer

VA said on Jul 30, 2010


What Jason said not just important - it''s crucial. If you can put all the logic of your app in a pack which 10K itself (i.e. what is actually uploaded at contest page) but if this app is able to use some existent web-service to talk to - then it''s definitely just different scenario.

It''s (very, VERY) interesting too cause then it is a matter of writing a "client app" that is 10K-minimalistic.

The only question if it is allowed or not.

Actually, being able to tell some webservices will be great and IMO it won''t break any rules - it''s just a matter of idea - some apps need to talk to somewhere and some not - they''re different but they still all are in the same conditions - 10K-client-app.

Nishant, plz confirm if it''s okay or not.

Joshua Allen Joshua Allen said on Jul 30, 2010

We just posted a draft FAQs page at that should clarify some of these issues.

@Jason, James, VA, Andrei: Good questions; I think it''s covered in the FAQ now. Basically, the size of the code on disk, unzipped, needs to be less than 10k; but you can pull as much data as you want from the Web. Pulling project-specific code/images from a 3rd-party Web service would be cheating, though, and would disqualify the entry.

@Mourner: Sure thing; you can make calls to Flickr or wherever to do image galleries.

@Xrymz: It''s code size on disk. If your code is <10k on disk, but creates a 20MB DOM when loaded, that''s OK. And yes, you can use minify. I don''t understand your question about 5k and 15k, though.

Jason said on Jul 31, 2010

@Joshua: A few questions:
1. Are we allowed to include the jQuery UI using the Google CDN?
2. There are still some HTML5 elements that aren''t supported by all of the required browsers. An example of this being the slider bar in Firefox. Is there any possibility of adding a rule saying that we can include a plugin to mimic this functionality if the browser does not support it? (without it counting towards our 10k of course)

Nishant Nishant said on Jul 31, 2010

@Jason—Both great questions, but unfortunately it''s a nay for both :-( You''re welcome to use jQuery UI, but it''ll count against the 10k (I just checked, and even a very minimal custom version that''s minified seems to put you over 10K). As for plugins, we''re not allowing any.

p.s. we now have both questions in the "FAQs":

Al Al said on Aug 3, 2010

To clarify... are you allowing other jQuery plugins other than jQueryUI? I''m specifically interested in jquery.timers and jquery.jsonp

j j said on Aug 8, 2010


James James said on Aug 8, 2010

Sorry for the previous post "s". I went too fast.
Thank you, your website is very interesting

Marto Marto said on Sep 9, 2010

When are the winners announced? it''s very vague in the legalese.

Nishant Nishant said on Sep 9, 2010

@Marto—Sometime early next week. Judges are deliberating this week. We''ll announce via twitter once the results are online.