Unwrongest

Hello, my name is Jan Jarfalk and I'm an interaction designer and interface developer. This, my lab, is where I learn and evolve.

How to decompress javascript

The online beautifier is a javascript decompression tool. It takes a compressed javascript and inserts indents, new lines and makes it readable. You find the online beautifier at http://elfz.laacz.lv/beautify/.

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.

  1. (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.

  1. (function($) {
  2.   $.fn.extend({
  3.     accordion: function() {
  4.       return this.each(function() {
  5.         if ($(this).data('accordiated')) return false;
  6.         $.each($(this).find('ul, li>div'),
  7.         function() {
  8.           $(this).data('accordiated', true);
  9.           $(this).hide()
  10.         });
  11.         $.each($(this).find('a'),
  12.         function() {
  13.           $(this).click(function(e) {
  14.             $(e.target).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
  15.             $(e.target).siblings('ul, div').slideToggle('fast');
  16.             return void(0)
  17.           })
  18.         })
  19.       })
  20.     }
  21.   })
  22. })(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/.

3 days ago

Twitter Bootstrap 2.0 is here. By nerds, for nerds. Cross everything. http://t.co/J4cFxGlb A neat looking front-end toolkit.

9 days ago

Looking for a solid way to do application versioning? Look no further. http://t.co/OMYJ2xzF Semantic Versioning guidelines are nifty!

15 days ago

On Amazon: Bad reviews are better for product sales than no reviews. (via @ronnestam )

15 days ago

There are only 180k Twitter users in Sweden, but ~75% of Sweden’s journalists use Twitter. (via @ronnestam )