Is Your HTML5 10K Apart?
Jul 29, 2010 In News By Nishant KotharyIt’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
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.
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
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
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.
Holy mother of -- YES. I CAN DO THIS.
Can people use jSON data from third parties APIs?
@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 :-)
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)?
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.
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?
I think it would be a more interesting challenge to build something truly stand-alone that works even when off the interwebs.
Speak your mind, but please--be kind1
@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?
What Jason mentioned is definitely important. Maybe add a rule like: "All application logic must be contained within the 10k zip..."
And what kind of sites it must be?
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
@James,
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.
We just posted a draft FAQs page at http://10k.aneventapart.com/Faqs/ 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.
@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)
@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":http://10k.aneventapart.com/faqs
To clarify... are you allowing other jQuery plugins other than jQueryUI? I''m specifically interested in jquery.timers and jquery.jsonp
s
Sorry for the previous post "s". I went too fast.
Thank you, your website is very interesting
When are the winners announced? it''s very vague in the legalese.
@Marto—Sometime early next week. Judges are deliberating this week. We''ll announce via twitter once the results are online.