0
HAML
or, how to get <arrowheads> out of your face

          Presented by Clifford Heath
Is THIS YOU?
when you see...
<div id=quot;column1quot; class= quot;robustquot;>
 <div class=quot;sidebaritemquot;>
  <div class=quot;sb...
With HAML...
#column1.robust
 .sidebaritem
   .sbihead
     %h1 Status Watch
   .sbicontent
      = render :partial => 'la...
What’s Changed?
All <arrowheads> are gone

Tags and code both self-close by indentation

id=”xyz” and class=”abc” are just...
Visual Simplicity

The RHTML version has 261 lexical tokens

 counting each word in strings and syntactic white-space

The...
Read it again...
#column1.robust
 .sidebaritem
   .sbihead
     %h1 Status Watch
   .sbicontent
      = render :partial =>...
Extra benefits

Need care to close tags correctly in RHTML

In HAML, generated code is indented properly

 including after ...
Other niceties
Attribute values are Ruby code:
  %label{:for=>@field.name}= @field.description+’:’

Ruby blocks are automati...
Other niceties... 2
ID and class attributes can come from an object:
  %div[@mother]
  uses @mother.class and @mother.id t...
Other niceties... 3
Automatic generation of DOCTYPE tags:
 !!! and !!! XML become
  <?xml version=quot;1.0quot; encoding=q...
Tools


Syntax highlighting modules available
 JEdit, Eclipse + RadRails, TextMate, (G)Vim, Komodo, Emacs

or simple VIM s...
How to install
./script/plugin install
          http://svn.hamptoncatlin.com/haml/tags/stable

Also available as a GEM fo...
Upcoming SlideShare
Loading in...5
×

Intro to Haml

5,574

Published on

Presentation on HAML given by Clifford Heath at the Melbourne Ruby group 2007/08/30.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,574
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to Haml"

  1. 1. HAML or, how to get <arrowheads> out of your face Presented by Clifford Heath
  2. 2. Is THIS YOU?
  3. 3. when you see... <div id=quot;column1quot; class= quot;robustquot;> <div class=quot;sidebaritemquot;> <div class=quot;sbiheadquot;> <h1>Status Watch</h1> </div> <div class=quot;sbicontentquot;> <%= render :partial => 'layouts/sidebar', :locals => { :value =>@mvalue } %> </div> </div> <div class=quot;sidebaritemquot;> <div class=quot;sbiheadquot;> <h1>Your Account</h1> </div> <div class=quot;sbilinksquot;> <ul> <% if session[:user_id] %> <li><%= link_to 'Log Out', :controller => 'authenticate', :action => 'logout' %></li> <% if @user && @user[:is_admin] -%> <li><%= link_to quot;Administrationquot;, :controller => 'admin', :action => 'index' %></li> </etc></etc></etc> the right number of times ...
  4. 4. With HAML... #column1.robust .sidebaritem .sbihead %h1 Status Watch .sbicontent = render :partial => 'layouts/sidebar', :locals => { :value =>@mvalue } .sidebaritem .sbihead %h1 Your Account .sbilinks %ul - if @user %li= link_to 'Log Out', :controller => 'authenticate', :action => 'logout' - if @user[:is_admin] %li= link_to quot;Administrationquot;, :controller => 'admin', :action => 'index'
  5. 5. What’s Changed? All <arrowheads> are gone Tags and code both self-close by indentation id=”xyz” and class=”abc” are just #xyz and .abc <div> is the default tag - for others, use %tag <%= some code %> is now just = some code Same for <% some code -%>, use - some code
  6. 6. Visual Simplicity The RHTML version has 261 lexical tokens counting each word in strings and syntactic white-space The HAML version has 117 tokens That makes it easier on the eyes and the fingers! Markup Haiku
  7. 7. Read it again... #column1.robust .sidebaritem .sbihead %h1 Status Watch .sbicontent = render :partial => 'layouts/sidebar', :locals => { :value =>@mvalue } .sidebaritem .sbihead %h1 Your Account .sbilinks %ul - if @user %li= link_to 'Log Out', :controller => 'authenticate', :action => 'logout' - if @user[:is_admin] %li= link_to quot;Administrationquot;, :controller => 'admin', :action => 'index'
  8. 8. Extra benefits Need care to close tags correctly in RHTML In HAML, generated code is indented properly including after nesting layouts and partials! valid XHTML with no extra effort DIVs almost always get a class or an ID or both Plays well with RHTML during conversion
  9. 9. Other niceties Attribute values are Ruby code: %label{:for=>@field.name}= @field.description+’:’ Ruby blocks are automatically closed: %table - @people.each do |person| %tr %td= person.name %p.footer You can declare multiple classes, etc: %td.person.alignleft#husband= @husband.name
  10. 10. Other niceties... 2 ID and class attributes can come from an object: %div[@mother] uses @mother.class and @mother.id to become: <div class=”person” id=”person_5724”> Most self-closing tags are recognised others may be declared self-closed: %br/ Comments start with a single / and are output! Even multi-line; a comment wraps indented content
  11. 11. Other niceties... 3 Automatic generation of DOCTYPE tags: !!! and !!! XML become <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> Continue a long line using a trailing | :filter passes the content to the filter: %p :markdown Textile ======= Hello, *World*
  12. 12. Tools Syntax highlighting modules available JEdit, Eclipse + RadRails, TextMate, (G)Vim, Komodo, Emacs or simple VIM setup (in your ~/.vimrc): au BufRead,BufNewFile *.haml set sw=2 sts=2 et
  13. 13. How to install ./script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable Also available as a GEM for use outside Rails Website: http://haml.hamptoncatlin.com/ See also SASS - similar approach for stylesheets Developer discussion: http://groups.google.com/group/haml Thanks to Hampton Catlin and his contributors!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×