JavaScript Beautify
On numerous occasions I’ve found myself with some javascript that’s been compressed or just poorly organized and before I could dig my hands into it I had to spend half an hour putting all the line breaks and tabs in place so I could make sense of it.
Less often is it the case that I am looking at someone else’s work and want to understand the source, but it happens. Enter Javascript Beautify. Ajaxian has a post up on it today and I gotta tell you, I love this stuff. Awesome, awesome, awesome. Now, if only there was a CSS Beautify…
We often talk about the latest scheme for compressing and minimizing our JavaScript. The JavaScript Beautify script aims to do the opposite.
Often, you find a site that is doing something interesting and you want to learn how it works. You check out the source and it is cryptic gibberish. This is where the beautifier comes in to make it a touch more readable.
As a test, I took one of our compressed libraries and dumped it in there and what came out was probably better organized than the source we compressed it from…
CSS Beautifiers/consolidators exist:
http://floele.flyspray.org/csstidy//css_optimiser.php
http://www.lonniebest.com/FormatCSS/
And are handy to use before compressing.
a couple more css beautify tools
CodeBeautifier.com - A CSS code formatter and optimizer, but stresses it is not a validator.
CleanCSS.com - Tool to help you clean up your CSS and optimize it.
If you use TextMate, there are some CSS compress and reformat commands available. They’re not perfect but I think I made them work pretty well.