A 5 minute lightening presentation on the basics of HAML and why I love it

1. HAML SUCKS
by Steve Butterworth (@stevewillbe)

2. WHAT IS HAML
HTML Abstraction Markup Language
For HTML what CoffeeScript is for
JavaScript and SASS is for CSS

3. WHAT IS HAML
ERB:
<div id=”content” class=”key”></div>
HAML:
#content.key

4. HAML SUCKS
...up your superfluous characters
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
<div id="address"><%=
current_user.address %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email
%></div>
<div id="bio"><%= current_user.bio %></
div>
</div>
</div>

5. HAML SUCKS
...up your superfluous characters
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio

6. HAML SUCKS
...up badly indented html
<div id="profile"><div class="left column">
<div id="address">23 The road</div>
</div>
<div class="right column">
<div id="email">steve@flumes.com</div>
</div>
</div>

7. HAML SUCKS
...up badly indented html
#profile
.left.column
#address= ’23 The Road’
.right.column
#email= ‘steve@flumes.com

8. HAML SUCKS
...up badly indented html
<div id="profile">
<div class="left column">
<div id="address">23 The road</div>
</div>
<div class="right column">
<div id="email">steve@flumes.com</div>
</div>
</div>

9. HAML SUCKS
...ugly attribute syntax
<div id="profile">
<div class="left column">
<div id="address” class=“<%= important_color
%>”/></div>
</div>
</div>

10. HAML SUCKS
...up ugly attribute syntax
.profile
.left.column
#address{:class => important_color }/></div>
</div>
</div>

11. HAML SUCKS
...up excess ruby in your views
<div id="profile">
<div class="left column">
<div id="address"><%
help = docs.help
title = help[:title]
%>
<%= title %></div>
</div>
<div class="right column">
<div id="email">steve@flumes.com</div>
</div>
</div>

12. HAML SUCKS
...up excess ruby in your views
#profile
.left.column
#address= lovely_helper
.right.column
#email= ‘steve@flumes.com’

13. HAML SUCKS
...up missing end tags
No missing missing end tags, ever.
No debugging partials within
partials, within partials, within
partials, within partials to find
where we broke the nesting

14. HAML SUCKS
...me and my front end guy closer together

15. HAML SUCKS
... because significant whitespace upsets me

16. IPHUG
Introducing the Ipswich HAML User Group

17. DHH
...doesn’t like it
this fact keeps me awake at night

18. DHH
h + erb = herb