That was the caption of the 10K coding challenge hosted by An Event Apart, in association with MIX Online. The challenge is to build a web app in less than 10 KiloBytes. The rules are:
- Total file size, including images, scripts & markup, can’t be over 10K.
- Apps should work equally well in IE9 Dev preview, Firefox and webkit browsers. HTML5 can be used.
- jQuery/Prototype/Typekit can be used and they won't be counted against 10K.
It is really amazing to see excellent hacks written under just 10K. One of my favorite geeks from Yahoo, Christian Heilman wrote a World Info hack using free services under 4.83 KB!! It fetches list of all countries in the world & on selection it will fetch the country's map, wikipedia info n stuff. Interesting..isnt it? There are around 400 of interesting ideas/hacks submitted, which are a source of great learning. Most of the prize winners are smart coders of JS based games.
My 10K Hack:
I have submitted a quick, dirty hack - 10K Start page. The idea is fairly simple, to have an ajax start page like iGoogle, PageFlakes, NetVibes but under 10K. Though it is not possible to add all the modules and beautify like the big guys did, I tried to have maximum possible features under 10K. I have used jQuery, HTML5, Yahoo Query Language (YQL), CSS3 to build the app. The app has 4 widgets- Twitter search, Yahoo weather search widget, sticky notes widget and a generic RSS reader widget. New widgets can be added, removed, dragged & dropped.
YQL queries: Thanks to Yahoo! For sure, I cannot think of a way other than YQL to build a mashup so quickly. I used JSON format so that parsing on JS would be optimal and easier. Here are the YQL queries which I used:
Twitter search widget: Click here
Yahoo weather widget: Click here
RSS widget: Click here
So, for the above 3 widgets, all my JS codes involves fetching data from these YQL services in JSON format, parsing them and displaying in corresponding divs using jQuery.
HTML5 features:
ContentEditable: For sticky notes widget, I just placed a div tag like this: '<div contenteditable="true" class="sticky">Edit this sticky notes...</div>' The "contenteditable" attribute is a new attribute defined in HTML5 specs, which makes a div editable on click and readonly on mouse out.
LocalStorage: It is a client side key value database, which can be used to store data in user's browser. I'm using this to save the layout on "window.onbeforeunload" event and restore the layout on pageload.
Adding/Removing/Draging widgets: All these operations are simple jQuery based DOM manipulations. For drag & drop, I'm using jQuery's jqDnR plugin.
Participating in such events is real fun, as we don't often try to think in terms of minimalistic code.At the last minute, I had to even do the optimizations like renaming "jQuery.js" to "j.js", just to reduce 5 bytes!!
Have any suggestions/comments? Please let me know.