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/.

Right now Bespin isn’t much. It includes support for basic editing features, such as syntax highlighting, undo/redo, previewing files in the browser, etc. It is not Textmate, it’s not even good enough for basic development (it’s an alpha version of a work in progress), but the execution of what there is, is really nice.

The idea of an online editor is not new, but this is the first one I see potential in, since it actually got the speed of a desktop application. Further the team behind it has a few interesting ideas such as a community for javascript based plugins and integrated collaboration. Just click play on the embedded Bespin introduction video for more thoughts and information from the developers.

I for one would be more than happy if Bespin turned out to be something I could use instead of Textmate. It’s not that Textmate is bad, Textmate is the opposite of bad, it’s the best tool out there for a web interface developer. But an online tool with the features of Textmate, and a Google Gears implementation so I can use if offline, would just be a bit more… awesome.

You can find further reading about Bespin at labs.mozilla.com and try it out at bespin.mozilla.com.