Haml: form && function

What is Haml? you ask. To the extent I’ve been using it, it’s a way to write out HTML and Ruby’s ERB, in a much more concise manner. The folks who created it define it as a “HTML abstraction markup language,” and it certainly did feel abstract my first go around with it, though not so abstract as to create any barriers to stop me from fully adopting it.

Haml is indentation sensitive. That is to say, all those tabs affect what your output will render. This may throw you a bit at first, but if you’re already formatting your code properly, then the spacing requirements that Haml enforces on you are moot.

Proper formatting of code is highly praised because it allows for a quicker and easier way to identify errors and discrepancies. Your code feels unbalanced if there’s a missing closing tag or if a colon is amiss from a run of symbols. If you’re putting the effort into such a practice, you may as well reap the rewards for all those non home row tab key strokes you’re making anyhow. Haml has essentially stolen the inherent functionality of elements like closing tags and given it to the tab key instead. A key we’re using religiously regardless of the fact that it doesn’t have a real effect on our codebase. It’s kinda like getting paid extra for doing some something you were already doing.

Your basic Bootstrap jumbotron body, with the three info boxes being dynamically generated though Rails, written in Haml.

So closing tags are gone. Opening tags are down to just a `%` sign. Classes are now called with just a `.` and in many cases stand alone and almost entirely eliminate the need for div tags altogether. The div tag, a tag that once littered my HTML files and is now on some sort of code based endangered species list. It’s gotten quite enjoyable to pull over snippets of HTML code from here and there and just start stripping them down. It’s also great practice for figuring out the semantics of Haml’s markup. Sure there are times when it’ll throw you for a loop, but at the very worst you just write it out in standard HTML and drop it in a Haml converter to see where you were off base.

Aside from its functionality, it produces a much more attractive screen of code. If you’re having a hard time seeing the forest for the trees in your HTML files, give Haml a try.

Great tutorial for getting stated with Haml.

Haml documentation for a bit more in depth reading.

I am currently a student of gSchool in Boulder. Feel free to reach out to me on Twitter to chat more about Haml: @MrJadaml