SlideShare ist ein Scribd-Unternehmen logo

Hows Haml?

•
•
Viget Labs
Viget Labs

Patrick Reagan gives a quick intro on how to use Haml in a Rails application (lightning talk)

Technologie
1 von 23
Downloaden Sie, um offline zu lesen
How’s Haml? Patrick Reagan
What is Haml? • Templating language for creating XHTML • Alternative to ERB in Rails • Principle: “Markup should be beautiful”
What is Beauty?
What is Beauty?
Installation $ sudo gem install --no-ri haml Successfully installed haml-1.8.0 1 gem installed Installing RDoc documentation for haml-1.8.0... $ haml --rails ./my_rails_app Haml plugin added to ./my_rails_app
Using Haml Rename views and layouts app/views/posts: index.html.erb => index.html.haml app/views/layouts: application.html.erb => application.haml Start deleting!
ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Yet Another Rails Blog</title> </head> <body> <div id='container'> <div id='navigation'> <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Yet Another Rails Blog</title> </head> <body> <div id='container'> <div id='navigation'> <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> %head <head> %title Yet Another Rails Blog <title>Yet Another Rails Blog</title> %body </head> <body> <div id='container'> <div id='navigation'> <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> %head <head> %title Yet Another Rails Blog <title>Yet Another Rails Blog</title> %body </head> <body> #container <div id='container'> #navigation <div id='navigation'> = link_to('Home', root_path) <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
Hamlified! <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> %head <head> %title Yet Another Rails Blog <title>Yet Another Rails Blog</title> %body </head> <body> #container <div id='container'> #navigation <div id='navigation'> = link_to('Home', root_path) <%= link_to 'Home', root_path %> </div> #content <div id='content'> <%@posts.each do |post| -%> - @posts.each do |post| .post <div class='post'> <h3><%=h(post.title) %></h3> %h3= h post.title <strong>by:quot;by: post.author %></strong> %strong= <%= #{h(post.author)}quot; <p><%=post.body %></p> %p= post.body </div> <% end %> </div> </div> </body> </html>
Haml Deconstructed !!! XML !!! Strict %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
Haml Deconstructed XHTML document type !!! XML !!! Strict %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
Haml Deconstructed XHTML document type !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog DIV tag with ID %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog DIV tag with ID %body #container #navigation = link_to('Home', root_path) Execute Ruby code #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog DIV tag with ID %body #container #navigation = link_to('Home', root_path) Execute Ruby code #content - @posts.each do |post| .post %h3= h(post.title) XHTML tag with %strong= quot;by: #{h(post.author)}quot; %p= post.body dynamic content
XHTML Output <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Yet Another Rails Blog</title> </head> <body> <div id='container'> <div id='navigation'> <a href=quot;/quot;>Home</a> </div> <div id='content'> <div class='post'> <h3>January Refresh Recap</h3> <strong>by: Patrick</strong> <p>It was awesome!</p> </div> ... </div> </div> </body> </html>
Off the Rails? $ irb >> require 'rubygems' => true >> require 'haml' => true >> Haml::Engine.new('%p Hello, World').render => quot;<p>Hello, World</p>nquot;
Why Use It? • Creates well-formatted markup • Automatic closing of tags • Less “noise”
Why Not? • Buildout must happen inside Rails • XHTML is a widespread standard • Performance
Resources Other templating systems • Erubis • Markaby • pHAML Tutorial & Documentation • http://haml.hamptoncatlin.com/tutorial/ • http://haml.hamptoncatlin.com/docs/ TextMate Bundle (via SVN) • http://macromates.com/svn/Bundles/trunk

Empfohlen

ePUB 3 and Publishing e-books
ePUB 3 and Publishing e-booksePUB 3 and Publishing e-books
ePUB 3 and Publishing e-books
Kerem Karatal
 
Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2
RORLAB
 
Ruby gems
Ruby gemsRuby gems
Ruby gems
Papp Laszlo
 
JSP Part 2
JSP Part 2JSP Part 2
JSP Part 2
DeeptiJava
 
Rails 4.0
Rails 4.0Rails 4.0
Rails 4.0
Robert Gogolok
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
Peter
 
Statische Websites in Rails 3.1
Statische Websites in Rails 3.1Statische Websites in Rails 3.1
Statische Websites in Rails 3.1
RobinBrouwer
 
11 page-directive
11 page-directive11 page-directive
11 page-directive
snopteck
 

Empfohlen

ePUB 3 and Publishing e-books
ePUB 3 and Publishing e-booksePUB 3 and Publishing e-books
ePUB 3 and Publishing e-books
Kerem Karatal
 
Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2
RORLAB
 
Ruby gems
Ruby gemsRuby gems
Ruby gems
Papp Laszlo
 
JSP Part 2
JSP Part 2JSP Part 2
JSP Part 2
DeeptiJava
 
Rails 4.0
Rails 4.0Rails 4.0
Rails 4.0
Robert Gogolok
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
Peter
 
Statische Websites in Rails 3.1
Statische Websites in Rails 3.1Statische Websites in Rails 3.1
Statische Websites in Rails 3.1
RobinBrouwer
 
11 page-directive
11 page-directive11 page-directive
11 page-directive
snopteck
 
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
kiphampton
 
Ruby conf 2011, Create your own rails framework
Ruby conf 2011, Create your own rails frameworkRuby conf 2011, Create your own rails framework
Ruby conf 2011, Create your own rails framework
Pankaj Bhageria
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
husnara mohammad
 
Introduction à Ruby
Introduction à RubyIntroduction à Ruby
Introduction à Ruby
Microsoft
 
Amp and higher computing science
Amp and higher computing scienceAmp and higher computing science
Amp and higher computing science
Charlie Love
 
Workshop 6: Designer tools
Workshop 6: Designer toolsWorkshop 6: Designer tools
Workshop 6: Designer tools
Visual Engineering
 
Layouts and Rendering in Rails, Season 2
Layouts and Rendering in Rails, Season 2Layouts and Rendering in Rails, Season 2
Layouts and Rendering in Rails, Season 2
RORLAB
 
Introduction to Rails - presented by Arman Ortega
Introduction to Rails - presented by Arman OrtegaIntroduction to Rails - presented by Arman Ortega
Introduction to Rails - presented by Arman Ortega
arman o
 
RubyConf Bangladesh 2017 - Elixir for Rubyists
RubyConf Bangladesh 2017 - Elixir for RubyistsRubyConf Bangladesh 2017 - Elixir for Rubyists
RubyConf Bangladesh 2017 - Elixir for Rubyists
Ruby Bangladesh
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
Marc Grabanski
 
T5 Oli Aro
T5 Oli AroT5 Oli Aro
T5 Oli Aro
Javier Toledo
 
Using Amazon Simple Db With Rails
Using Amazon Simple Db With RailsUsing Amazon Simple Db With Rails
Using Amazon Simple Db With Rails
Akhil Bansal
 
BDD with cucumber
BDD with cucumberBDD with cucumber
BDD with cucumber
Kerry Buckley
 
Rails3 changesets
Rails3 changesetsRails3 changesets
Rails3 changesets
Wen-Tien Chang
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
Hernan Mammana
 
JSON REST API for WordPress
JSON REST API for WordPressJSON REST API for WordPress
JSON REST API for WordPress
Taylor Lovett
 
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
Benjamin Vandgrift
 
JavaScript
JavaScriptJavaScript
JavaScript
Ivano Malavolta
 
Hows Haml?
Hows Haml?Hows Haml?
Hows Haml?
Patrick Reagan
 
DRYing Up Rails Views and Controllers
DRYing Up Rails Views and ControllersDRYing Up Rails Views and Controllers
DRYing Up Rails Views and Controllers
James Gray
 
Haml
HamlHaml
Haml
Ciaran Lee
 

Weitere ähnliche Inhalte

Was ist angesagt?

Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
kiphampton
 
Ruby conf 2011, Create your own rails framework
Ruby conf 2011, Create your own rails frameworkRuby conf 2011, Create your own rails framework
Ruby conf 2011, Create your own rails framework
Pankaj Bhageria
 
Layouts and Rendering in Rails, Season 2
Layouts and Rendering in Rails, Season 2Layouts and Rendering in Rails, Season 2
Layouts and Rendering in Rails, Season 2
RORLAB
 
Using Amazon Simple Db With Rails
Using Amazon Simple Db With RailsUsing Amazon Simple Db With Rails
Using Amazon Simple Db With Rails
Akhil Bansal
 
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
Benjamin Vandgrift
 

Was ist angesagt? (19)

Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
 
Ruby conf 2011, Create your own rails framework
Ruby conf 2011, Create your own rails frameworkRuby conf 2011, Create your own rails framework
Ruby conf 2011, Create your own rails framework
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
 
Introduction à Ruby
Introduction à RubyIntroduction à Ruby
Introduction à Ruby
 
Amp and higher computing science
Amp and higher computing scienceAmp and higher computing science
Amp and higher computing science
 
Workshop 6: Designer tools
Workshop 6: Designer toolsWorkshop 6: Designer tools
Workshop 6: Designer tools
 
Layouts and Rendering in Rails, Season 2
Layouts and Rendering in Rails, Season 2Layouts and Rendering in Rails, Season 2
Layouts and Rendering in Rails, Season 2
 
Introduction to Rails - presented by Arman Ortega
Introduction to Rails - presented by Arman OrtegaIntroduction to Rails - presented by Arman Ortega
Introduction to Rails - presented by Arman Ortega
 
RubyConf Bangladesh 2017 - Elixir for Rubyists
RubyConf Bangladesh 2017 - Elixir for RubyistsRubyConf Bangladesh 2017 - Elixir for Rubyists
RubyConf Bangladesh 2017 - Elixir for Rubyists
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
T5 Oli Aro
T5 Oli AroT5 Oli Aro
T5 Oli Aro
 
Using Amazon Simple Db With Rails
Using Amazon Simple Db With RailsUsing Amazon Simple Db With Rails
Using Amazon Simple Db With Rails
 
BDD with cucumber
BDD with cucumberBDD with cucumber
BDD with cucumber
 
Rails3 changesets
Rails3 changesetsRails3 changesets
Rails3 changesets
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
JSON REST API for WordPress
JSON REST API for WordPressJSON REST API for WordPress
JSON REST API for WordPress
 
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
 
JavaScript
JavaScriptJavaScript
JavaScript
 

Ähnlich wie Hows Haml?

How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
vathur
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheet
goldenveizer
 
Noticias Ducez
Noticias DucezNoticias Ducez
Noticias Ducez
matheus
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
Dhairya Joshi
 
WDIM268 Week 6 (Summer 2010)
WDIM268 Week 6 (Summer 2010)WDIM268 Week 6 (Summer 2010)
WDIM268 Week 6 (Summer 2010)
Tyler Sticka
 

Ähnlich wie Hows Haml? (20)

Hows Haml?
Hows Haml?Hows Haml?
Hows Haml?
 
DRYing Up Rails Views and Controllers
DRYing Up Rails Views and ControllersDRYing Up Rails Views and Controllers
DRYing Up Rails Views and Controllers
 
Haml
HamlHaml
Haml
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheet
 
Simple Markdown with Ecto and Protocols
Simple Markdown with Ecto and ProtocolsSimple Markdown with Ecto and Protocols
Simple Markdown with Ecto and Protocols
 
Lecture1and2
Lecture1and2Lecture1and2
Lecture1and2
 
Noticias Ducez
Noticias DucezNoticias Ducez
Noticias Ducez
 
Django Templates
Django TemplatesDjango Templates
Django Templates
 
AttributesL3.pptx
AttributesL3.pptxAttributesL3.pptx
AttributesL3.pptx
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Html.docx
Html.docxHtml.docx
Html.docx
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 
Deliverance talk at plone meetup
Deliverance talk at plone meetupDeliverance talk at plone meetup
Deliverance talk at plone meetup
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
 
Frfrfrf
FrfrfrfFrfrfrf
Frfrfrf
 
Getting to know perch — and perch runway!
Getting to know perch — and perch runway!Getting to know perch — and perch runway!
Getting to know perch — and perch runway!
 
Html advance
Html advanceHtml advance
Html advance
 
HTML-Advance.pptx
HTML-Advance.pptxHTML-Advance.pptx
HTML-Advance.pptx
 
WDIM268 Week 6 (Summer 2010)
WDIM268 Week 6 (Summer 2010)WDIM268 Week 6 (Summer 2010)
WDIM268 Week 6 (Summer 2010)
 

Mehr von Viget Labs

Women In Technology
Women In TechnologyWomen In Technology
Women In Technology
Viget Labs
 

Mehr von Viget Labs (11)

Building a Brand as Consumers Take Control
Building a Brand as Consumers Take ControlBuilding a Brand as Consumers Take Control
Building a Brand as Consumers Take Control
 
Branded Utility By Josh Chambers
Branded Utility By Josh ChambersBranded Utility By Josh Chambers
Branded Utility By Josh Chambers
 
Make Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance TestingMake Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance Testing
 
Women In Technology
Women In TechnologyWomen In Technology
Women In Technology
 
9 Tips to Profitability: How Squidoo Did It
9 Tips to Profitability: How Squidoo Did It9 Tips to Profitability: How Squidoo Did It
9 Tips to Profitability: How Squidoo Did It
 
Advanced RESTful Rails
Advanced RESTful RailsAdvanced RESTful Rails
Advanced RESTful Rails
 
Cleanliness is Next to Domain-Specificity
Cleanliness is Next to Domain-SpecificityCleanliness is Next to Domain-Specificity
Cleanliness is Next to Domain-Specificity
 
Changing Your Mindset: Getting Started With Test-Driven Development
Changing Your Mindset: Getting Started With Test-Driven DevelopmentChanging Your Mindset: Getting Started With Test-Driven Development
Changing Your Mindset: Getting Started With Test-Driven Development
 
Dealing With Legacy PHP Applications
Dealing With Legacy PHP ApplicationsDealing With Legacy PHP Applications
Dealing With Legacy PHP Applications
 
Mockfight! FlexMock vs. Mocha
Mockfight! FlexMock vs. MochaMockfight! FlexMock vs. Mocha
Mockfight! FlexMock vs. Mocha
 
Building and Working With Static Sites in Ruby on Rails
Building and Working With Static Sites in Ruby on RailsBuilding and Working With Static Sites in Ruby on Rails
Building and Working With Static Sites in Ruby on Rails
 

Kürzlich hochgeladen

Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
Syngulon
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
UXDXConf
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureECS 2024 Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
Femke de Vroome
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
ScyllaDB
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
UXDXConf
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
UXDXConf
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
UXDXConf
 

Kürzlich hochgeladen (20)

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreelTHE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureECS 2024 Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 

Hows Haml?

  • 2. What is Haml? • Templating language for creating XHTML • Alternative to ERB in Rails • Principle: “Markup should be beautiful”
  • 5. Installation $ sudo gem install --no-ri haml Successfully installed haml-1.8.0 1 gem installed Installing RDoc documentation for haml-1.8.0... $ haml --rails ./my_rails_app Haml plugin added to ./my_rails_app
  • 6. Using Haml Rename views and layouts app/views/posts: index.html.erb => index.html.haml app/views/layouts: application.html.erb => application.haml Start deleting!
  • 7. ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Yet Another Rails Blog</title> </head> <body> <div id='container'> <div id='navigation'> <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
  • 8. ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Yet Another Rails Blog</title> </head> <body> <div id='container'> <div id='navigation'> <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
  • 9. ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> %head <head> %title Yet Another Rails Blog <title>Yet Another Rails Blog</title> %body </head> <body> <div id='container'> <div id='navigation'> <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
  • 10. ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> %head <head> %title Yet Another Rails Blog <title>Yet Another Rails Blog</title> %body </head> <body> #container <div id='container'> #navigation <div id='navigation'> = link_to('Home', root_path) <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
  • 11. Hamlified! <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> %head <head> %title Yet Another Rails Blog <title>Yet Another Rails Blog</title> %body </head> <body> #container <div id='container'> #navigation <div id='navigation'> = link_to('Home', root_path) <%= link_to 'Home', root_path %> </div> #content <div id='content'> <%@posts.each do |post| -%> - @posts.each do |post| .post <div class='post'> <h3><%=h(post.title) %></h3> %h3= h post.title <strong>by:quot;by: post.author %></strong> %strong= <%= #{h(post.author)}quot; <p><%=post.body %></p> %p= post.body </div> <% end %> </div> </div> </body> </html>
  • 12. Haml Deconstructed !!! XML !!! Strict %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  • 13. Haml Deconstructed XHTML document type !!! XML !!! Strict %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  • 14. Haml Deconstructed XHTML document type !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  • 15. Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  • 16. Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog DIV tag with ID %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  • 17. Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog DIV tag with ID %body #container #navigation = link_to('Home', root_path) Execute Ruby code #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  • 18. Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog DIV tag with ID %body #container #navigation = link_to('Home', root_path) Execute Ruby code #content - @posts.each do |post| .post %h3= h(post.title) XHTML tag with %strong= quot;by: #{h(post.author)}quot; %p= post.body dynamic content
  • 19. XHTML Output <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Yet Another Rails Blog</title> </head> <body> <div id='container'> <div id='navigation'> <a href=quot;/quot;>Home</a> </div> <div id='content'> <div class='post'> <h3>January Refresh Recap</h3> <strong>by: Patrick</strong> <p>It was awesome!</p> </div> ... </div> </div> </body> </html>
  • 20. Off the Rails? $ irb >> require 'rubygems' => true >> require 'haml' => true >> Haml::Engine.new('%p Hello, World').render => quot;<p>Hello, World</p>nquot;
  • 21. Why Use It? • Creates well-formatted markup • Automatic closing of tags • Less “noise”
  • 22. Why Not? • Buildout must happen inside Rails • XHTML is a widespread standard • Performance
  • 23. Resources Other templating systems • Erubis • Markaby • pHAML Tutorial & Documentation • http://haml.hamptoncatlin.com/tutorial/ • http://haml.hamptoncatlin.com/docs/ TextMate Bundle (via SVN) • http://macromates.com/svn/Bundles/trunk