Strange Symphonies The best way to predict the future is to invent it

Experimenting with Haml

HAML has made a bit of noise in the Rails scene with its approach to templating. Just have a look further down.

Embedded Ruby Code (.rhtml):
<h1> Hello World </h1>

Haml (.haml):
%h1 Hello World

From the HAML site:

Haml is based on one primary principal. Markup should be beautiful.

Now beautiful is subjective, and it takes a while to get used to HAML actually. Took me a while to get used to Ruby code as well.

Sass is also bundled with Haml. While Haml is the counterpart for the templating, Sass is the counterpart for stylesheets.

I understood why both Haml and Sass were created, and now I wouldn't recommend them per se but its nice to have options. I am replacing pieces of my embedded ruby code to Haml, but I haven' t moved a project 100% over. (I wonder if its even possible?). Its nice in that it removes alot of redundancy from your templates, and it sort of beautifies the code by removing all the sharp angly brackets, so you can't cut yourself writing (X)HTML!

Now I won't cover Sass as well, I don't really use it. Faster development? Well my stylesheets haven't had a need for the problems that Sass was created to solve. Constants in CSS, nexted rules, arithmetic, dynamic colors.

Installing Haml and Sass

Now the installation suggests to install you do it via the normal:
[block:terminal]./script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable[/block]

But that ain't cool! It creates a folder called stable in my plugins directory that:

1. could clash with other plugins because of its vague name
2. doesn't give me an idea of what the plugin is for

So I cheated and pulled via subversion:
[block:terminal]svn co http://svn.hamptoncatlin.com/haml/tags/stable ./vendor/plugins/haml[/block]

Vim Support

So it appears that there is Haml syntax support for Vim, which is a major plus for me, else I might opt not to use it. Syntax highlighting is very important to me, as it makes life a whole lot easier.

Some things are broken though, the regex to select the class or id after the element doesn't accept underscores or dashes (-). Just pull up the syntax file:
Lines 37 and 38:

syn region  hamlCssClass    start="\.[\-_a-zA-Z0-9]*[=~]" end="$" contains=@rubyTop,hamlRubyCode,hamlRubyHash
syn match   hamlCssClass    "\.[\-_a-zA-Z0-9]*"

Lines 40 and 41:

syn region  hamlCssClass    start="\.[\-_a-zA-Z0-9]*[=~]" end="$" contains=@rubyTop,hamlRubyCode,hamlRubyHash
syn match   hamlCssClass    "\.[\-_a-zA-Z0-9]*"

Easy html2haml Conversion

Actually when you install Haml via the Ruby Gem (gem install haml [image16x16:terminal]) it installs a script called html2haml, which can nicely convert your html to haml . Beware though when using .rhtml it leaves the <% %> in place, and some other things, but its a good start. Plus you don't have to do all the work in converting.

Notes

Now the Haml site does have examples, but it doesn't cover everything.

Embedded Ruby Code:
<h1>Users</h1>
<ul id="users">
<%= @users.each do |user| %>
<li id="<%= "user#{user.id}" %>" class="<%= "row#{odd_or_even}" >
<h2 class="textCenter" > <%= user.name %> </h2>
<p class="description" > <%= user.description %> </p>
<div class="joined" > joined <%= distance_of_time_in_word(user.created_at, Time.now) %> </p>
</li>
<% end %>
</ul>

Equivalent Haml Code:
%h1 Users
%ul#users
- @users.each do |user|
%li{:id => "user#{user.id}", :class => "row#{odd_or_even}" }
%h2.textCenter= user.name
%p.description= user.description
.joined
joined
= distance_of_time_in_word(user.created_at, Time.now)

- reset_odd_or_even

[block:important]Important Notes:
Here are the ones that you may not notice instantly.

• a minus/dash at the start of the line represses the output of that line. (Line 3, 11)
• Iterating through lists is still possible, but do note that you do not need to specify end. (Line 3). All blocks work this way, including the form_tag.
• For dynamic ids and classes the arguments to a tag actually accepts a hash, and the values are interpreted. In Line 4 I use the user id and a odd_or_even method. You do not need to quote them in strings. I only quoted them because I wanted the strings 'user' and 'row' to be present.

[/block]

[block:important]General Notes: Here are the things which are expected to happen, but just noted.

• The indentation is very important, it indicates how the code should be nested.
• HTML tags are now reduced to %tag. (Lines 1, 2, 4, 5)
• Only when the text you want displayed is not nested with other elements you can place it after that tag. (Line 1, 5, 6)
• When nested you have to place it on the next line (Line 8 )
• Instance variables are still accessible. (Line 3)
• Similar to CSS, to specify ids and classes you append to the tag either a hash followed by the id (Line 2) or a period followed by the class name(Line 5, 6). Multiple classes can be joined together by appending the classes, ie: %ul.textCenter.horizontalList
• To output the value of a variable you use the equals operator (=) at the start of a line, a tags id and class declarations (Line 5, 6). It can also be used on its own, it does not create a div (Line 9)
• Due to the prevalence of the div tag, you can omit it directly (ie: %div) and just specify either an id or a class. (Line 7) to easily divide up my list items.
• When the equals operator (=) is used on its own, it does not create a div (Line 9)
• Helper methods are still available and made public to the view. (Line 9, 11)

[/block]