Tuesday 20 September 2016

Anirudh

10k Apart Contest 2016: Build a website under 10KB

There is a very interesting web design contest going on online, called 10k Apart. It puts emphasis on creating a website, "optimizing every little byte like your life depends on it and ensuring your site can work, no matter what". The challenge is to build such an optimized site that your pages load under 10 KB size limit.
You can enter the contest till September 30th. (Visit their website for more information.)

I have also participated in the contest, and my entry is just as "random" as it gets - it is about randomness! It is a minimal site made with HTML5, CSS3 and some JavaScript and shows that a pretty site can be built with pretty simple code! It's got some optimization hacks too, like the optimized URLs, and using character entities as icons etc. Minimal amount of JS is used with fallback options. Total cost: 7.02 KB :)


Some noteworthy optimizations:

1. URLs
  • Used <a href=""> for current page/directory link instead of the complete <a href= "http://anirudhkhanna.github.io/10k-apart-2016">
  • Omitted the protocol name for external sites. For example, //github.com instead of the complete URL http://github.com
  • Used ../ instead of giving a full URL to the previous directory (i.e. anirudhkhanna.github.io).
  • URL shorteners were not used because although they could reduce the number of characters, they are not always considered safe.
2. Code Formatting
  • The formatting is a bit compact.
  • Especially in CSS, where the code format is like this:
    nav ul {margin:5px 0 0 0;}
    nav ul li {display:inline; padding-right:50px;}
    ...
    
3. No superfluous tags
  • It was tried that unnecessary tags were cut down. For example,
    <span id="titlelink">
      <a>...</a>
    </span>
    
    becomes:
    <a id="titlelink">...</a>
    
4. Minimum and optimized images
  • Images were avoided mostly. The images used (like the favicon) were really small and optimized.
5. Character entities for symbols
  • Only character entities (like , etc.) were used as icons on the site wherever required.
6. Minimal JS used, with fallback options

7. Indentation with 2 spaces, not 4

Anirudh

About the author →

Anirudh Khanna is a Computer Science student and a geek who firmly believes in the awesomeness of technology! He is a programmer and web designer, also keenly interested in the research of new and innovative ideas in Computer Science.

Subscribe to Geek Factorial via email :