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

Wow! I don’t even remember anymore how I managed before this new awesome boilerstrap. http://t.co/bWzwqVf2

3 days ago

If you like coding and competing and want to see Stockholm at its best; Checkout Escape from /dev/null – DICE edition. http://t.co/0SapzZxz

5 days ago

Going where none has gone before and pushing the boundaries of what has been called done. Mine, @soe, @tussetor #SthlmStartupHack app ≈Done