The last week I’ve seen a dozens of blog posts related to Facebook’s, Jquery’s and many others hidden implementation of the ‘Konami code’ and how to implement one yourself.

One of the things I noticed was that people tend to write very verbose code, meaning, they tend to write a lot more code then they need too. Take a look at Abhi’s 30-rows implementation or Trevor’s Cheat Code Jquery plugin(!).

There are numbers of valid explanations to why people write verbose code; to be overly clear for educational purposes is one. But if you do that, I think you should also teach people that they shouldn’t make a habit out of it, especially when it comes to something so small that it fits inside a Twitter tweet.

// Tweetable Konami code
var k=[];addEventListener("keyup",function(e){ k.push(e.keyCode);if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0)cheat()},true);

The code above will fire the function cheat() when you enter the Konami Code (up,up,down,down,left,right,left,right,b,a). The code might be a bit too concies, but I was mainly trying to make a point.

Haven’t seen the Konami Code in action?

Go to www.facebook.com and login. Click once anywhere on your home page and type the following sequence using your keyboard: Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter Key. Click again or scroll the page.

According to Yahoos article “Best Practices for Speeding Up Your Web Site” about 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page.

One way of reducing the number of HTTP requests while still support rich page designs is to use a server side script that combines all your javascripts and styles into single files. A php script that does exactly that is Rakaz’s combine.php.

When the script is configured and ready to use all you need to change are the urls to your scripts and styles. You will go from doing, in this case, four requests to only one.

	
	<script src="jquery-1.3.2.js" type="text/javascript"></script>
	<script src="jquery.valid8-1.1.1.js" type="text/javascript"></script>
	<script src="jquery.defaultvalue-1.0.js" type="text/javascript"></script>
	<script src="global.js" type="text/javascript"></script>

	
	<script src="jquery-1.3.2.js,jquery.valid8-1.1.1.js,jquery.defaultvalue-1.0.js,global.js" type="text/javascript">

Rakaz’s script will also compress and cache your combined files to reduce loading times even more. You can find a complete installation guide and more information about the script over at rakaz.nl

Real world example

I just uploaded and configured combine.php for http://chat.unwrongest.com. Before the script was added you needed to download 10 javascript files that weighed 232 kb in total. On average this took about 3 seconds to download. After installing the combine.php script you now need to download only a single file of 68 kb which only takes around 1 second to download. The total loading time of chat.unwrongest.com is now, for me, around 2 seconds instead of just above 4 seconds.

When I am finished with a javascript component, like Elastic, Tabify or Accordion, I always create a compressed version of the source code using a javascript compressor like YUI Compressor or Dean Edwards Packer. The compressor shortens long internal variable names and removes unnecessary white spaces making the code lighter.

Developers often only provide these compressed versions of the code, which makes the code hard to read, understand and modify. The online beautifier is a javascript decompressor. It doesn’t get back the original variable names but it does create indentations and new lines. Below is an example of what the online beautifier does with the compressed code of my Jquery plugin Accordion.

This is the compressed and minified version of the jquery plugin Accordion. The whole source code is on one line and all white spaces are removed.

(function($){$.fn.extend({accordion:function(){return this.each(function(){if($(this).data('accordiated'))return false;$.each($(this).find('ul, li>div'),function(){$(this).data('accordiated',true);$(this).hide()});$.each($(this).find('a'),function(){$(this).click(function(e){$(e.target).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');$(e.target).siblings('ul, div').slideToggle('fast');return void(0)})})})}})})(jQuery);

This is exactly the same code after the online beautifier is done with it. The tabs and new lines it has inserted has made the code a lot more readable.

(function($) {
  $.fn.extend({
    accordion: function() {
      return this.each(function() {
        if ($(this).data('accordiated')) return false;
        $.each($(this).find('ul, li>div'),
        function() {
          $(this).data('accordiated', true);
          $(this).hide()
        });
        $.each($(this).find('a'),
        function() {
          $(this).click(function(e) {
            $(e.target).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
            $(e.target).siblings('ul, div').slideToggle('fast');
            return void(0)
          })
        })
      })
    }
  })
})(jQuery);

The tool is not perfect, and it can’t decompress everything, e.g. it can’t decompress a file which have been Base62 encoded – But I like it and think you should give it a go at http://elfz.laacz.lv/beautify/.