SlideShare a Scribd company logo
1 of 13
Download to read offline
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;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 ...
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'
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
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
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'
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
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
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
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*
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
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!

More Related Content

What's hot

Migration to jQuery 3.5.x
Migration to jQuery 3.5.xMigration to jQuery 3.5.x
Migration to jQuery 3.5.xStanislavIdolov
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchRuss Weakley
 
HTML, CSS, JS & Jquery Introduction
HTML, CSS, JS & Jquery IntroductionHTML, CSS, JS & Jquery Introduction
HTML, CSS, JS & Jquery IntroductionIslam AlZatary
 
Self join in active record association
Self join in active record associationSelf join in active record association
Self join in active record associationRORLAB
 
How to use CSS Selector to identify Web Elements for selenium scripts
How to use CSS Selector to identify Web Elements for selenium scriptsHow to use CSS Selector to identify Web Elements for selenium scripts
How to use CSS Selector to identify Web Elements for selenium scriptsSokunthaneth Chhoy
 
Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)Joao Lucas Santana
 
Bootstrap day4
Bootstrap day4Bootstrap day4
Bootstrap day4Shais. Net
 
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkejElinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkejPertti Paavola
 
Haml, Sass and Compass for Sane Web Development
Haml, Sass and Compass for Sane Web DevelopmentHaml, Sass and Compass for Sane Web Development
Haml, Sass and Compass for Sane Web Developmentjeremyw
 
Form demoinplaywithmysql
Form demoinplaywithmysqlForm demoinplaywithmysql
Form demoinplaywithmysqlKnoldus Inc.
 
Twitter bootstrap
Twitter bootstrapTwitter bootstrap
Twitter bootstrapdennisdc
 
Drupal Development (Part 2)
Drupal Development (Part 2)Drupal Development (Part 2)
Drupal Development (Part 2)Jeff Eaton
 
引き出しとしてのDjango - SoozyCon7
引き出しとしてのDjango - SoozyCon7引き出しとしてのDjango - SoozyCon7
引き出しとしてのDjango - SoozyCon7makoto tsuyuki
 

What's hot (20)

reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 
Migration to jQuery 3.5.x
Migration to jQuery 3.5.xMigration to jQuery 3.5.x
Migration to jQuery 3.5.x
 
Beyond MVC
Beyond MVCBeyond MVC
Beyond MVC
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
 
HTML, CSS, JS & Jquery Introduction
HTML, CSS, JS & Jquery IntroductionHTML, CSS, JS & Jquery Introduction
HTML, CSS, JS & Jquery Introduction
 
Self join in active record association
Self join in active record associationSelf join in active record association
Self join in active record association
 
How to use CSS Selector to identify Web Elements for selenium scripts
How to use CSS Selector to identify Web Elements for selenium scriptsHow to use CSS Selector to identify Web Elements for selenium scripts
How to use CSS Selector to identify Web Elements for selenium scripts
 
iWebkit
iWebkitiWebkit
iWebkit
 
Emmet cheat-sheet
Emmet cheat-sheetEmmet cheat-sheet
Emmet cheat-sheet
 
Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)
 
Bootstrap day4
Bootstrap day4Bootstrap day4
Bootstrap day4
 
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkejElinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
 
Bootstrap 4 ppt
Bootstrap 4 pptBootstrap 4 ppt
Bootstrap 4 ppt
 
Haml, Sass and Compass for Sane Web Development
Haml, Sass and Compass for Sane Web DevelopmentHaml, Sass and Compass for Sane Web Development
Haml, Sass and Compass for Sane Web Development
 
Shell
ShellShell
Shell
 
Form demoinplaywithmysql
Form demoinplaywithmysqlForm demoinplaywithmysql
Form demoinplaywithmysql
 
Codegnitorppt
CodegnitorpptCodegnitorppt
Codegnitorppt
 
Twitter bootstrap
Twitter bootstrapTwitter bootstrap
Twitter bootstrap
 
Drupal Development (Part 2)
Drupal Development (Part 2)Drupal Development (Part 2)
Drupal Development (Part 2)
 
引き出しとしてのDjango - SoozyCon7
引き出しとしてのDjango - SoozyCon7引き出しとしてのDjango - SoozyCon7
引き出しとしてのDjango - SoozyCon7
 

Viewers also liked

Virtual Reality Applications in Career Consulting - Potential & Restictions
Virtual Reality Applications in Career Consulting  - Potential & RestictionsVirtual Reality Applications in Career Consulting  - Potential & Restictions
Virtual Reality Applications in Career Consulting - Potential & RestictionsDr Stylianos Mystakidis
 
Playful Blended Digital Storytelling in 3D Immersive eLearning Environments f...
Playful Blended Digital Storytelling in 3D Immersive eLearning Environments f...Playful Blended Digital Storytelling in 3D Immersive eLearning Environments f...
Playful Blended Digital Storytelling in 3D Immersive eLearning Environments f...Dr Stylianos Mystakidis
 
Denk- en discussiedag sept 2010: digitale collectie
Denk- en discussiedag sept 2010: digitale collectieDenk- en discussiedag sept 2010: digitale collectie
Denk- en discussiedag sept 2010: digitale collectieJohan Mijs
 
Εκπαίδευση Web 2.0 στο Δημόσιο
Εκπαίδευση Web 2.0 στο ΔημόσιοΕκπαίδευση Web 2.0 στο Δημόσιο
Εκπαίδευση Web 2.0 στο ΔημόσιοDr Stylianos Mystakidis
 
Mojo Facets – so, you have data and browser?
Mojo Facets – so, you have data and browser?Mojo Facets – so, you have data and browser?
Mojo Facets – so, you have data and browser?Dobrica Pavlinušić
 
The Great Highland Bagpipe
The  Great  Highland  BagpipeThe  Great  Highland  Bagpipe
The Great Highland Bagpipe1LifelongLearner
 
Operation Payback (...is a bitch): Hacktivism at the Dawn of Copyright Contro...
Operation Payback (...is a bitch): Hacktivism at the Dawn of Copyright Contro...Operation Payback (...is a bitch): Hacktivism at the Dawn of Copyright Contro...
Operation Payback (...is a bitch): Hacktivism at the Dawn of Copyright Contro...PaleFire
 
Information Literacy and Smart Life-Long Learning: Knowledge Antidotes in the...
Information Literacy and Smart Life-Long Learning: Knowledge Antidotes in the...Information Literacy and Smart Life-Long Learning: Knowledge Antidotes in the...
Information Literacy and Smart Life-Long Learning: Knowledge Antidotes in the...Dr Stylianos Mystakidis
 
Towards an Instructional Design Motivational Framework to Address the Retenti...
Towards an Instructional Design Motivational Framework to Address the Retenti...Towards an Instructional Design Motivational Framework to Address the Retenti...
Towards an Instructional Design Motivational Framework to Address the Retenti...Dr Stylianos Mystakidis
 
Pubic Diplomacy and Web 2.0
Pubic Diplomacy and Web 2.0Pubic Diplomacy and Web 2.0
Pubic Diplomacy and Web 2.0stefan.geens
 
Social Media & Web 2.0 Services for Choirs
Social Media & Web 2.0 Services for ChoirsSocial Media & Web 2.0 Services for Choirs
Social Media & Web 2.0 Services for ChoirsDr Stylianos Mystakidis
 
Hacktivism in Virtual Worlds
Hacktivism in Virtual WorldsHacktivism in Virtual Worlds
Hacktivism in Virtual WorldsPaleFire
 

Viewers also liked (20)

Open Education in Virtual Worlds
Open Education in Virtual WorldsOpen Education in Virtual Worlds
Open Education in Virtual Worlds
 
Virtual Reality Applications in Career Consulting - Potential & Restictions
Virtual Reality Applications in Career Consulting  - Potential & RestictionsVirtual Reality Applications in Career Consulting  - Potential & Restictions
Virtual Reality Applications in Career Consulting - Potential & Restictions
 
Playful Blended Digital Storytelling in 3D Immersive eLearning Environments f...
Playful Blended Digital Storytelling in 3D Immersive eLearning Environments f...Playful Blended Digital Storytelling in 3D Immersive eLearning Environments f...
Playful Blended Digital Storytelling in 3D Immersive eLearning Environments f...
 
What Is Powerpoint
What Is PowerpointWhat Is Powerpoint
What Is Powerpoint
 
Denk- en discussiedag sept 2010: digitale collectie
Denk- en discussiedag sept 2010: digitale collectieDenk- en discussiedag sept 2010: digitale collectie
Denk- en discussiedag sept 2010: digitale collectie
 
Εκπαίδευση Web 2.0 στο Δημόσιο
Εκπαίδευση Web 2.0 στο ΔημόσιοΕκπαίδευση Web 2.0 στο Δημόσιο
Εκπαίδευση Web 2.0 στο Δημόσιο
 
Mojo Facets – so, you have data and browser?
Mojo Facets – so, you have data and browser?Mojo Facets – so, you have data and browser?
Mojo Facets – so, you have data and browser?
 
Cow2
Cow2Cow2
Cow2
 
The Great Highland Bagpipe
The  Great  Highland  BagpipeThe  Great  Highland  Bagpipe
The Great Highland Bagpipe
 
Operation Payback (...is a bitch): Hacktivism at the Dawn of Copyright Contro...
Operation Payback (...is a bitch): Hacktivism at the Dawn of Copyright Contro...Operation Payback (...is a bitch): Hacktivism at the Dawn of Copyright Contro...
Operation Payback (...is a bitch): Hacktivism at the Dawn of Copyright Contro...
 
Oslobodimo Hardware
Oslobodimo HardwareOslobodimo Hardware
Oslobodimo Hardware
 
Open Workshop on Information Literacy
Open Workshop on Information LiteracyOpen Workshop on Information Literacy
Open Workshop on Information Literacy
 
Information Literacy and Smart Life-Long Learning: Knowledge Antidotes in the...
Information Literacy and Smart Life-Long Learning: Knowledge Antidotes in the...Information Literacy and Smart Life-Long Learning: Knowledge Antidotes in the...
Information Literacy and Smart Life-Long Learning: Knowledge Antidotes in the...
 
Test
TestTest
Test
 
Towards an Instructional Design Motivational Framework to Address the Retenti...
Towards an Instructional Design Motivational Framework to Address the Retenti...Towards an Instructional Design Motivational Framework to Address the Retenti...
Towards an Instructional Design Motivational Framework to Address the Retenti...
 
The Attack of the Learning Clones
The Attack of the Learning ClonesThe Attack of the Learning Clones
The Attack of the Learning Clones
 
Cisco Board 18
Cisco Board 18Cisco Board 18
Cisco Board 18
 
Pubic Diplomacy and Web 2.0
Pubic Diplomacy and Web 2.0Pubic Diplomacy and Web 2.0
Pubic Diplomacy and Web 2.0
 
Social Media & Web 2.0 Services for Choirs
Social Media & Web 2.0 Services for ChoirsSocial Media & Web 2.0 Services for Choirs
Social Media & Web 2.0 Services for Choirs
 
Hacktivism in Virtual Worlds
Hacktivism in Virtual WorldsHacktivism in Virtual Worlds
Hacktivism in Virtual Worlds
 

Similar to Intro to Haml

OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialYi-Ting Cheng
 
Boston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsBoston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsJohn Brunswick
 
Engines: Team Development on Rails (2005)
Engines: Team Development on Rails (2005)Engines: Team Development on Rails (2005)
Engines: Team Development on Rails (2005)lazyatom
 
Haml. New HTML? (RU)
Haml. New HTML? (RU)Haml. New HTML? (RU)
Haml. New HTML? (RU)Kirill Zonov
 
What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?brynary
 
Cache Money Talk: Practical Application
Cache Money Talk: Practical ApplicationCache Money Talk: Practical Application
Cache Money Talk: Practical ApplicationWolfram Arnold
 
AEM Sightly Template Language
AEM Sightly Template LanguageAEM Sightly Template Language
AEM Sightly Template LanguageGabriel Walt
 
More to RoC weibo
More to RoC weiboMore to RoC weibo
More to RoC weiboshaokun
 
Intro to Rails ActiveRecord
Intro to Rails ActiveRecordIntro to Rails ActiveRecord
Intro to Rails ActiveRecordMark Menard
 
Clearance: Simple, complete Ruby web app authentication.
Clearance: Simple, complete Ruby web app authentication.Clearance: Simple, complete Ruby web app authentication.
Clearance: Simple, complete Ruby web app authentication.Jason Morrison
 
Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel Engine Yard
 
Working Effectively With Legacy Code
Working Effectively With Legacy CodeWorking Effectively With Legacy Code
Working Effectively With Legacy Codescidept
 
Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on RailsDiki Andeas
 
Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On RailsWen-Tien Chang
 
Survey of Front End Topics in Rails
Survey of Front End Topics in RailsSurvey of Front End Topics in Rails
Survey of Front End Topics in RailsBenjamin Vandgrift
 
Ruby on Rails Security Updated (Rails 3) at RailsWayCon
Ruby on Rails Security Updated (Rails 3) at RailsWayConRuby on Rails Security Updated (Rails 3) at RailsWayCon
Ruby on Rails Security Updated (Rails 3) at RailsWayConheikowebers
 
Page Caching Resurrected
Page Caching ResurrectedPage Caching Resurrected
Page Caching ResurrectedBen Scofield
 
RSpec User Stories
RSpec User StoriesRSpec User Stories
RSpec User Storiesrahoulb
 
WebcampZG - Rails 4
WebcampZG - Rails 4WebcampZG - Rails 4
WebcampZG - Rails 4shnikola
 

Similar to Intro to Haml (20)

OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails Turtorial
 
Boston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsBoston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on Rails
 
Engines: Team Development on Rails (2005)
Engines: Team Development on Rails (2005)Engines: Team Development on Rails (2005)
Engines: Team Development on Rails (2005)
 
Haml. New HTML? (RU)
Haml. New HTML? (RU)Haml. New HTML? (RU)
Haml. New HTML? (RU)
 
What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?
 
Cache Money Talk: Practical Application
Cache Money Talk: Practical ApplicationCache Money Talk: Practical Application
Cache Money Talk: Practical Application
 
AEM Sightly Template Language
AEM Sightly Template LanguageAEM Sightly Template Language
AEM Sightly Template Language
 
More to RoC weibo
More to RoC weiboMore to RoC weibo
More to RoC weibo
 
Intro to Rails ActiveRecord
Intro to Rails ActiveRecordIntro to Rails ActiveRecord
Intro to Rails ActiveRecord
 
Clearance: Simple, complete Ruby web app authentication.
Clearance: Simple, complete Ruby web app authentication.Clearance: Simple, complete Ruby web app authentication.
Clearance: Simple, complete Ruby web app authentication.
 
Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel Rails Antipatterns | Open Session with Chad Pytel
Rails Antipatterns | Open Session with Chad Pytel
 
Working Effectively With Legacy Code
Working Effectively With Legacy CodeWorking Effectively With Legacy Code
Working Effectively With Legacy Code
 
Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on Rails
 
Ruby For Startups
Ruby For StartupsRuby For Startups
Ruby For Startups
 
Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On Rails
 
Survey of Front End Topics in Rails
Survey of Front End Topics in RailsSurvey of Front End Topics in Rails
Survey of Front End Topics in Rails
 
Ruby on Rails Security Updated (Rails 3) at RailsWayCon
Ruby on Rails Security Updated (Rails 3) at RailsWayConRuby on Rails Security Updated (Rails 3) at RailsWayCon
Ruby on Rails Security Updated (Rails 3) at RailsWayCon
 
Page Caching Resurrected
Page Caching ResurrectedPage Caching Resurrected
Page Caching Resurrected
 
RSpec User Stories
RSpec User StoriesRSpec User Stories
RSpec User Stories
 
WebcampZG - Rails 4
WebcampZG - Rails 4WebcampZG - Rails 4
WebcampZG - Rails 4
 

Recently uploaded

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 

Recently uploaded (20)

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 

Intro to Haml

  • 1. HAML or, how to get <arrowheads> out of your face Presented by Clifford Heath
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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!