Adding Haml
- What's Haml?
- Who's Responsible?
- HTML to Haml
- Filters & Server-Side Integration
- The Good
- The Bad
- The Install
The three chief virtues of a
programmer are: Laziness,
Impatience and Hubris.
Larry Wall, co-author Programming Perl
What
is Haml?
HTML
Abstraction
Markup
Language
Function & Features
- Replacement for templating systems like ERB, PHP, and ASP
- Follows DRY principles
- Strict indenting and whitespace-sensitive
The First Level
!!! 5
%html(lang="en")
%head
%title A Real Human Being
%body
#content.group
%h1.headline And a Real Hero
All of Hashrocket's new projects are done in Haml, and we've now decided to transition everything else in our portfolio over to Haml as soon as possible.
Obie Fernandez, co-founder Hashrocket, author The Rails Way
Who's Responsible
- Original implementation created by Hampton Catlin (also responsible for Sass) in 2006
- Originally packaged with Sass
- Current implementation and maintenance by Nathan Weizenbaum
- MIT licensed, source (and ability to contribute) at github.com/nex3/haml
cleaner and DRY-er
write HTML haiku
templating fun. Scraunched*
(Don't worry, this'll be the only haiku.)
Won't
Someone
Think
of the
Designers?
A Quick Note on the Examples
- Sinatra + deck.js (Big thanks to @eallam)
- Output is live generated by the Haml engine
- Application and source will be available after the presentation
Basic Tags
%h1 But You're Still the Same
Basic Tags
- Content can be nested, but the output source will reflect the extra whitespace
%p Good.
%p
You're just sayin' that?
Illegal Nesting
- Content may not be inline and nested, however
%h3 A Real Hero
%b EP
Doctypes
- A sampling of Haml's doctype shortcuts
!!! 5
+
!!! Transitional
+
!!! XML
Attributes
- Attributes can be added via Ruby hash
- Alternatively, normal attribute assignment works inside parentheses
%p{rel: 'lb', title: 'A Link'}
What do you do?
%p(rel="lb" title="A Link")
I drive, for movies.
IDs & Classes
- Classes and IDs may also be added this way
- More commonly, though, they're denoted with a CSS selector-like shorthand
%p(id="header" class="group")
Is that dangerous?
%p#footer.group
It's only part time.
Divs Aplenty
- div tags can be denoted like other tags
- If you only include a class or ID, the engine will assume you want a div
- Attributes can still be passed to the shorthand version
%div.group
Sorry about the noise.
.group
I was gonna call the cops.
.group(rel="lb")
I wish you would.
Nesting
- Like content, use spaces or tabs to nest tags within other tags
%header
%h1 Hey Kid
%h2 You want a toothpick?
%nav
%a(href="#" title="A Link")
Toothpick Emporium
Nesting
- Haml will throw an error if you are not consistent with spacing
%header
%h1 Hey Kid
%h2 You want a toothpick?
Comments (HTML)
- HTML comments are created with a /
Comments (Conditional)
- IE conditional comments utilize their normal syntax, and tags/content can be nested within
%h1 Congratulations!
Comments (Haml)
- Haml comments, denoted with -#, and elements nested within are not part of the output
%p
%em First!
Self-Closing Tags
- Tags that should self-close can be denoted with a trailing /
- Haml has a default set of tags, however, that are automatically self-closed
%br/
%br
Haml Filters
- Allow for blocks of code/content to be filtered outside of Haml then added to Haml's output
- Examples include :javascript, :markdown, :css, :escaped
JavaScript Filter
- Rather than embedding JavaScript on your page via <script> tags, it can be placed within Haml's :javascript filter
:javascript
var x = 42;
alert(x);
Embedding Ruby
- A line beginning with - will be executed as normal Ruby (think <% %> in ERB or <? ?> in PHP)
- A line with = will output the evaluated result (think <%= %> in ERB or <?= ?> in PHP)
- color = "green"
= color
Embedding Ruby
- Constructs like if and each can be used. Note that these blocks do not need a manual end in Haml
- color = "green"
- if color == "green"
= color
So, Haml's Kinda Great
- Reduces repetition
- Reduces effort
- Easier to scan and maintain
Universal Selectors
-
Haml
.class
-
CSS
.class { width: 200px; }
-
jQuery
$('.class').fadeIn();
Uniformity
Reduces Instances of This:
<div>
<h1>A Title</h1>
<form>
<p>
<label>A Label</label>
<input type="text" id="input" />
</p>
</form>
</div>
(They'll Probably See This at Some Point)
Haml is Not for Content Formatting
Content Formatting
- Attempting to use inline tags inside long blocks of content proves troublesome
%p
Call me Ishmael.
%span Some years ago —
never mind how long
%em precisely
Content Formatting
- One possible solution is to use standard HTML
%p
Call me <em>Ishmael</em>. Some years ago …
Solution: Markdown
:markdown
## Heading 2
1. List Item 1
2. List *Item 2*
[A Link](http://haml-lang.org)
Multiline
- Use of | causes multiple lines to be evaluated as one
%p
noiseless nautilus,
light prows
%p
noiseless nautilus, |
light prows |
Whitespace (Inside)
- Use of < removes whitespace within a tag
%h1
%span The Pacific
%h1<
%span The Symphony
Whitespace (Outside)
- Use of > removes whitespace outside of a tag
%h1
%b The
%em> Chase
First
Whitespace (Both)
- Both may be used to remove whitespace inside and out
.class
%h1><
%span Title
The Ugly Option
- If Haml's :ugly option is set to true, Haml won't indent/format its output
- Default in production mode of Rails
!!! 5
%html(lang="en")
%head
%title A Real Human Being
%body
#id.class
%h1.class And a Real Hero
So, You're On Board
- Tinkerbin (tinkerbin.com) is a browser-based tool similar to jsFiddle that includes Haml support.
Static Site Usage
- A number of tools exist that allow easy use of preprocessor languages like Haml, Sass, and CoffeeScript
- CodeKit (incident57.com/codekit)
- LiveReload (livereload.com)
- Require some setup
Rails
- Most common usage
-
Add to Your Gemfile
gem "haml-rails"
- After running bundler (or other preferred gem management technique), you can use the .html.haml extension on view files
What About
My Favorite
Language?
Syntax Highlighting
- Visit the Haml Editor Support page (haml-lang.com/editors.html) for links to popular bundles to editors like TextMate, Coda, Vim and Emacs.
