Normalising and beautifying Rails templates

I spent a bit of time yesterday and today rationalising and cleaning up some of the HTML templates on the new reevoo.com site. It’s the kind of work that doesn’t have any immediately obvious value to the business, or even produce any apparent effect from a visitor’s point of view, but it’s absolutely necessary in ensuring the quality and maintainability of our code. Of course, I didn’t do it completely at random: it was a response to pain that I’d experienced whilst updating some of the pages.

One of the things that I wanted to do was to reduce the number and complexity of the layout templates in use. These define the overall layout and look of a page, and—in an ideal world—make it easy to work on the content of each page without worrying about what goes on around it. We had a dozen or so layout templates in use. That wasn’t a ridiculous number but, with only a handful of distinct page layouts on the site, it was more than we needed. I wanted to fix that.

I started off by looking for similarities and differences among the templates. To do that, I could use the Unix diff tool. To do that, I needed to normalise the templates with regard to indentation, trailing spaces, blank lines, and hard tabs, so that functionally identical lines would also be literally identical. And for that, I needed a normalising utility that could understand both HTML and embedded Ruby. Tools to do the first exist. Tools that also do the second don’t, to the best of my knowledge.

So I wrote one.

It’s pretty basic, but here’s what it does:

  • Normalises hard tabs to spaces
  • Removes trailing spaces
  • Indents after opening HTML elements
  • Outdents before closing elements
  • Collapses multiple whitespace
  • Indents after block-opening embedded Ruby (if, do etc.)
  • Outdents before closing Ruby blocks
  • Outdents elsif and then indents again
  • Indents the left-hand margin of JavaScript and CSS blocks to match the indentation level of the code

It started off as a single-file utility, but it’s grown a little as I’ve refactored it, added tests for things it couldn’t handle and then fixed them, and made it into a more conventional Ruby library + command-line utility structure.

If you’re interested in trying it out, I’ve set up a Subversion repository on Google Code. Grab it, run ruby setup.rb, and you’ll have a beautify-html command. Set it up as a keyboard shortcut in TextMate or whatever, and feed back any bugs or improvements!

Here is the code.

Incidentally, with the help of this normaliser, I manage to cut the number of layout templates down to six this afternoon. Not a bad result at all.

2007-08-30 21:17 UTC. Comments: 5.

Comments

Skip to the comment form

  1. Gabe da Silveira

    Wrote at 2007-08-30 21:42 UTC using Safari 522.12.1 on Mac OS X:

    I’ve just spent the last 2 hours converting a 50-page, 10-year-old static site into a Rails layout. We’re talking the worst kind of tag soup with a bunch of non-semantic redundant CSS thrown in on an ad-hoc basis (.class1, .class2, .class47, etc).

    Forget about diff for a second, I needed to normalize just to have some semblance of where the 5th level table started and ended. Of course HTML Tidy is worthless for this because it’s destructive—the tag soup in question was in no shape to survive the onslaught. I’m not aware of any TextMate bundles for this, but good ol’ BBEdit had me covered with its Format… command which does a reasonable job of respecting ERb tags.

    You can never have enough of these kind of tools in your box, I’ll be checking it out soon.

  2. Dr Nic

    Wrote at 2007-09-02 17:47 UTC using Firefox 2.0.0.6 on Mac OS X:

    If you want to convert this to a RubyGem, see the patch in your googlecode repo thingymabobby. Just get a rubyforge account and do the initial setup, then run “rake deploy VERSION=x.y.z” and it’ll create and deploy it to rubyforge.

  3. Jason Frankovitz

    Wrote at 2007-10-26 01:43 UTC using Firefox 2.0.0.8 on Mac OS X:

    I’ve been looking for something like this for a long time, so I was excited to install it. It placed a bunch of files in /usr/local/lib/ruby/site_ruby and /usr/local/bin, but I get an error when I try to test it:

    $ cat foo.rhtml | htmlbeautifier

    /usr/local/bin/htmlbeautifier:2:in `require’: no such file to load—htmlbeautifier/beautifier (LoadError) from /usr/local/bin/htmlbeautifier:2

    The line it’s complaining about is:

    require ‘htmlbeautifier/beautifier’

    Any help? I would really love to use this if I could get it sorted. Many thanks!

  4. Paul Battley

    Wrote at 2007-10-27 13:15 UTC using Firefox 2.0.0.8 on Linux:

    Jason, you’re right. It looks like Dr Nic’s patch changed the install task.

    Try using ‘ruby setup.rb’ instead of ‘rake install’. I’ve changed the installation instructions.

  5. Jason Frankovitz

    Wrote at 2007-10-27 20:53 UTC using Safari 419.3 on Mac OS X:

    That was it Paul, now it works like a champ. Thanks!

    One more question: I’ve noticed that closing tags are indented relative to the starting tag. I’d like to have closing tags line up with the same column as the starting tag. Is there a variable I can tweak for that? I played around with the outdent method but got errors.

Leave a comment

Please read the comment guidelines before posting. Comments are Gravatar-enabled. Your email address will not be published.

To prove that you’re human, type human in the Bot check field.

Trying to post some program output or a long code sample? Please use a paste service and link to it instead.