SlideShare a Scribd company logo
1 of 21
Download to read offline
HAML and SASS
    Shanghai on Rails – 1st edition
Maxime Guilbot – maxime@ekohe.com




                                      1
HAML and SASS
Wikipedia says:
HAML (XHTML Abstraction Markup
Language) is a markup language that is
used to cleanly and simply describe the
XHTML of any web document without
the use of traditional inline coding.


  http://haml.hamptoncatlin.com/

                                          2
What about RHTML?



                    3
<div class=quot;property_item<%= ' sponsored' if property.sponsored %>quot; id=quot;property_<%= property.id %>quot;>
	

   div class=quot;property_titlequot;
	

   	

   span style=quot;float:right;quot;
	

   	

   b%= property_price(property) %/b
% if property.sell? -%
	

   	

   nbsp;%= link_to quot;   #{currency(property)}#{property.payment_per_month.to_i}quot;, finance_path
(:action='mortgage_calculator', :surface=property.surface, :price_per_m2=property.price_per_m2), :target='_blank' %
% end -%
	

   	

   /span
	

   	

   % if (logged_in? and can_edit_property(property)) or (somebody_logged_in? and params[:action]==quot;historyquot;) -%
	

   	

   	

      %= check_box_tag quot;property_#{property.id}quot;, quot;1quot;, false, :class = quot;property_selectorquot; %
	

   	

   % end %
	

   	

	

   	

   a href=quot;%= property_path(property)+(@form ? @form.to_query_string('', :form) : '') %quot; target=quot;_blankquot;b%= h(property.name) %/
b / %= h(property.district.name) %%= h(property.address) % (%= h(property.property_type.name) %)/a
	

   	

   % if logged_in? and can_edit_property(property)%
	

   	

   %= link_to(image_tag(quot;/images/icons/edit.pngquot;), edit_property_path(property), :target = quot;_blankquot;) %
	

   	

   %= link_to(image_tag(quot;/images/icons/destroy.pngquot;), property_path(property)+(@form ? @form.to_query_string('', :form) : ''), :confirm
= '               ', :method = :delete ) %
	

   	

   % end %




                                                 RHTML
	

   	

   % if params[:action]==quot;historyquot; -%
	

   	

   	

   %= link_to_remote quot;   quot;, :url = delete_history_property_path(property), :confirm = quot;            ?quot;, :method = :delete %
	

   	

   % end -%
	

   /div
	

   div class=quot;property_detailsquot;
	

   	

   div class=quot;property_imagequot;
%




                                               can be evil...
     pictures_count=property.property_pictures_count+property.property_floor_maps_count
     if pictures_count==0  property.property_videos_count0 -%
	

     	

   	

   %= video_player(url_for_file_column(property.property_video, :file)) %
% elsif pictures_count0
	

     pictures=property.property_pictures + property.property_floor_maps
-%
	

     	

   	

   %= link_to image_tag(url_for_file_column(pictures.first, :file, 'thumb'), :alt='', :id=quot;property_picture_#
{property.id}quot;, :target = quot;_blankquot;), property_path(property)+(@form ? @form.to_query_string('', :form) : '') %
% if pictures.length1
	

     pictures[0, 3].each do |p| -%
	

     	

   	

   %= link_to image_tag(url_for_file_column(p, :file, 'small'), :alt=''), 'javascript:void
(0)', :onclick=quot;change_property_picture(#{property.id}, '#{url_for_file_column(p, :file, 'thumb')}');quot; %
% end
	

     end -%
% else -%
	

     	

   	

   %= link_to(image_tag('no_photo.png', :alt='       '), property_path(property), :target = quot;_blankquot;) %
% end -%
	

   	

   /div
	

   	

	

   	

   div class=quot;property_infoquot;
	

   	

   	

   span class=quot;agency_logoquot;%= link_to (agency_logo(property.agency, 'small')), agency_path(property.agency) %/span

	

   	

   	

     table
	

   	

   	

     	

   tr
	

   	

   	

     	

   	

    td style=quot;width:80px;quot;   /   /   /td
	

   	

   	

     	

   	

    td%= property_rooms(property) %/td
	

   	

   	

     	

   /tr
	

   	

   	

     	

   tr
	

   	

   	

     	

   	

    td   /td
	

   	

   	

     	

   	

    td%= property.surface %        /td                                                                        4
This in RHTML...




                   5
becomes this in HAML!




2 spaces!


                        6
How to use HAML?

    • Install the plugin
./script/plugin install svn://hamptoncatlin.com/haml/trunk haml




                                                                  7
How to use HAML?

• Rename your views - .rhtml   +.haml




                                        8
How to use HAML?
• Enjoy the delete key!




                          9
HAML is...
• sexy
• well-indented
• clear
• fast to write
• the next step in generating views in your
  Rails application


                                              10
Concept
                               Slower
Abstract   Fast Development
                              Execution




                                Faster
Concrete   Slow Development
                              Execution

                                          11
Costs
Cost




           Time


       Slower to Develop
       Faster to Develop

                           12
HAML adds more abstraction,
 so it should be slower on
         execution...

 How much does that cost?


                              13
“Haml 1.7 is now only
1.3x slower than ERB”

   from HAML release notes


                             14
Let’s measure that!



                      15
Httperf
•   httperf --port 8001 --server 127.0.0.1
                        --num-conns 300 --uri /



•   We got:

•   rhtml 16 ms / req

•   haml 21 ms / req

•    HAML is 24 % slower than ERB in our example




                                                    16
SASS



       17
#main
    :background-color #f00
    :width 98%


 #main {
   background-color: #f00;
   width: 98% }




                             18
SASS
!main_color = #00ff00

 #main
   :color = !main_color
   :p
      :background-color = !main_color
      :color #000000




                                        19
Rails 2.0

.format.provider:
     .html.haml
      .html.erb

                    20
maxime@ekohe.com




                   21

More Related Content

What's hot

Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designErin M. Kidwell
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesAndy Wallace
 
Joomla! Day UK 2009 Menus Presentation
Joomla! Day UK 2009 Menus PresentationJoomla! Day UK 2009 Menus Presentation
Joomla! Day UK 2009 Menus PresentationAndy Wallace
 
Statische Websites in Rails 3.1
Statische Websites in Rails 3.1Statische Websites in Rails 3.1
Statische Websites in Rails 3.1RobinBrouwer
 
DDD on example of Symfony (Webcamp Odessa 2014)
DDD on example of Symfony (Webcamp Odessa 2014)DDD on example of Symfony (Webcamp Odessa 2014)
DDD on example of Symfony (Webcamp Odessa 2014)Oleg Zinchenko
 
Class 3 create an absolute layout with css abs position (aptana)
Class 3  create an absolute layout with css abs position (aptana)Class 3  create an absolute layout with css abs position (aptana)
Class 3 create an absolute layout with css abs position (aptana)Erin M. Kidwell
 
Componentization css angular
Componentization css angularComponentization css angular
Componentization css angularDavid Amend
 
DRY up your views
DRY up your viewsDRY up your views
DRY up your viewslachie
 
Custom post-framworks
Custom post-framworksCustom post-framworks
Custom post-framworksKiera Howe
 
Resnick webconversion2
Resnick webconversion2Resnick webconversion2
Resnick webconversion2comedyjant
 
Web技術勉強会 第19回
Web技術勉強会 第19回Web技術勉強会 第19回
Web技術勉強会 第19回龍一 田中
 
Send, pass, get variables with php, form, html & java script code
Send, pass, get variables with php, form, html & java script codeSend, pass, get variables with php, form, html & java script code
Send, pass, get variables with php, form, html & java script codeNoushadur Shoukhin
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingMyles Braithwaite
 

What's hot (19)

Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic Templates
 
Joomla! Day UK 2009 Menus Presentation
Joomla! Day UK 2009 Menus PresentationJoomla! Day UK 2009 Menus Presentation
Joomla! Day UK 2009 Menus Presentation
 
Statische Websites in Rails 3.1
Statische Websites in Rails 3.1Statische Websites in Rails 3.1
Statische Websites in Rails 3.1
 
DDD on example of Symfony (Webcamp Odessa 2014)
DDD on example of Symfony (Webcamp Odessa 2014)DDD on example of Symfony (Webcamp Odessa 2014)
DDD on example of Symfony (Webcamp Odessa 2014)
 
Class 3 create an absolute layout with css abs position (aptana)
Class 3  create an absolute layout with css abs position (aptana)Class 3  create an absolute layout with css abs position (aptana)
Class 3 create an absolute layout with css abs position (aptana)
 
Componentization css angular
Componentization css angularComponentization css angular
Componentization css angular
 
Profit statement 00
Profit statement 00Profit statement 00
Profit statement 00
 
DRY up your views
DRY up your viewsDRY up your views
DRY up your views
 
9. lower in Symfony 4
9. lower in Symfony 49. lower in Symfony 4
9. lower in Symfony 4
 
Custom post-framworks
Custom post-framworksCustom post-framworks
Custom post-framworks
 
HOTSPOT
HOTSPOTHOTSPOT
HOTSPOT
 
Resnick webconversion2
Resnick webconversion2Resnick webconversion2
Resnick webconversion2
 
Web技術勉強会 第19回
Web技術勉強会 第19回Web技術勉強会 第19回
Web技術勉強会 第19回
 
Send, pass, get variables with php, form, html & java script code
Send, pass, get variables with php, form, html & java script codeSend, pass, get variables with php, form, html & java script code
Send, pass, get variables with php, form, html & java script code
 
Drupal8 simplepage v2
Drupal8 simplepage v2Drupal8 simplepage v2
Drupal8 simplepage v2
 
Handout6 html frames
Handout6 html framesHandout6 html frames
Handout6 html frames
 
Tmx9
Tmx9Tmx9
Tmx9
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
 

Similar to Haml And Sass

When To Use Ruby On Rails
When To Use Ruby On RailsWhen To Use Ruby On Rails
When To Use Ruby On Railsdosire
 
Haml. New HTML? (RU)
Haml. New HTML? (RU)Haml. New HTML? (RU)
Haml. New HTML? (RU)Kirill Zonov
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
RoR 101: Session 2
RoR 101: Session 2RoR 101: Session 2
RoR 101: Session 2Rory Gianni
 
Html basics 8 frame
Html basics 8 frameHtml basics 8 frame
Html basics 8 frameH K
 
Streamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web FrameworksStreamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web Frameworksguestf7bc30
 
Nanoformats
NanoformatsNanoformats
Nanoformatsrozario
 
Ruby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingBozhidar Batsov
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
Client Side Measurement & Performance With Rails
Client Side Measurement & Performance With RailsClient Side Measurement & Performance With Rails
Client Side Measurement & Performance With RailsEric Falcao
 
Haml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a dietHaml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a dietdavidsidlinger
 
Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On RailsWen-Tien Chang
 
Integrating Flex And Rails With Ruby Amf
Integrating Flex And Rails With Ruby AmfIntegrating Flex And Rails With Ruby Amf
Integrating Flex And Rails With Ruby Amfrailsconf
 
Introduction To Ruby On Rails
Introduction To Ruby On RailsIntroduction To Ruby On Rails
Introduction To Ruby On RailsSteve Keener
 
Building a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profitBuilding a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profitBen Limmer
 
Your own (little) gem: building an online business with Ruby
Your own (little) gem: building an online business with RubyYour own (little) gem: building an online business with Ruby
Your own (little) gem: building an online business with RubyLindsay Holmwood
 
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Jamie Matthews
 
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
 
More Secrets of JavaScript Libraries
More Secrets of JavaScript LibrariesMore Secrets of JavaScript Libraries
More Secrets of JavaScript Librariesjeresig
 

Similar to Haml And Sass (20)

When To Use Ruby On Rails
When To Use Ruby On RailsWhen To Use Ruby On Rails
When To Use Ruby On Rails
 
Haml. New HTML? (RU)
Haml. New HTML? (RU)Haml. New HTML? (RU)
Haml. New HTML? (RU)
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
 
RoR 101: Session 2
RoR 101: Session 2RoR 101: Session 2
RoR 101: Session 2
 
Html basics 8 frame
Html basics 8 frameHtml basics 8 frame
Html basics 8 frame
 
Streamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web FrameworksStreamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web Frameworks
 
Nanoformats
NanoformatsNanoformats
Nanoformats
 
Ruby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programing
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
Client Side Measurement & Performance With Rails
Client Side Measurement & Performance With RailsClient Side Measurement & Performance With Rails
Client Side Measurement & Performance With Rails
 
Haml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a dietHaml And Sass: Put your markup on a diet
Haml And Sass: Put your markup on a diet
 
Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On Rails
 
Integrating Flex And Rails With Ruby Amf
Integrating Flex And Rails With Ruby AmfIntegrating Flex And Rails With Ruby Amf
Integrating Flex And Rails With Ruby Amf
 
Flex With Rubyamf
Flex With RubyamfFlex With Rubyamf
Flex With Rubyamf
 
Introduction To Ruby On Rails
Introduction To Ruby On RailsIntroduction To Ruby On Rails
Introduction To Ruby On Rails
 
Building a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profitBuilding a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profit
 
Your own (little) gem: building an online business with Ruby
Your own (little) gem: building an online business with RubyYour own (little) gem: building an online business with Ruby
Your own (little) gem: building an online business with Ruby
 
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
 
What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?
 
More Secrets of JavaScript Libraries
More Secrets of JavaScript LibrariesMore Secrets of JavaScript Libraries
More Secrets of JavaScript Libraries
 

Recently uploaded

Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
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
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
[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
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 

Recently uploaded (20)

Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
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
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
[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
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 

Haml And Sass

  • 1. HAML and SASS Shanghai on Rails – 1st edition Maxime Guilbot – maxime@ekohe.com 1
  • 2. HAML and SASS Wikipedia says: HAML (XHTML Abstraction Markup Language) is a markup language that is used to cleanly and simply describe the XHTML of any web document without the use of traditional inline coding. http://haml.hamptoncatlin.com/ 2
  • 4. <div class=quot;property_item<%= ' sponsored' if property.sponsored %>quot; id=quot;property_<%= property.id %>quot;> div class=quot;property_titlequot; span style=quot;float:right;quot; b%= property_price(property) %/b % if property.sell? -% nbsp;%= link_to quot; #{currency(property)}#{property.payment_per_month.to_i}quot;, finance_path (:action='mortgage_calculator', :surface=property.surface, :price_per_m2=property.price_per_m2), :target='_blank' % % end -% /span % if (logged_in? and can_edit_property(property)) or (somebody_logged_in? and params[:action]==quot;historyquot;) -% %= check_box_tag quot;property_#{property.id}quot;, quot;1quot;, false, :class = quot;property_selectorquot; % % end % a href=quot;%= property_path(property)+(@form ? @form.to_query_string('', :form) : '') %quot; target=quot;_blankquot;b%= h(property.name) %/ b / %= h(property.district.name) %%= h(property.address) % (%= h(property.property_type.name) %)/a % if logged_in? and can_edit_property(property)% %= link_to(image_tag(quot;/images/icons/edit.pngquot;), edit_property_path(property), :target = quot;_blankquot;) % %= link_to(image_tag(quot;/images/icons/destroy.pngquot;), property_path(property)+(@form ? @form.to_query_string('', :form) : ''), :confirm = ' ', :method = :delete ) % % end % RHTML % if params[:action]==quot;historyquot; -% %= link_to_remote quot; quot;, :url = delete_history_property_path(property), :confirm = quot; ?quot;, :method = :delete % % end -% /div div class=quot;property_detailsquot; div class=quot;property_imagequot; % can be evil... pictures_count=property.property_pictures_count+property.property_floor_maps_count if pictures_count==0 property.property_videos_count0 -% %= video_player(url_for_file_column(property.property_video, :file)) % % elsif pictures_count0 pictures=property.property_pictures + property.property_floor_maps -% %= link_to image_tag(url_for_file_column(pictures.first, :file, 'thumb'), :alt='', :id=quot;property_picture_# {property.id}quot;, :target = quot;_blankquot;), property_path(property)+(@form ? @form.to_query_string('', :form) : '') % % if pictures.length1 pictures[0, 3].each do |p| -% %= link_to image_tag(url_for_file_column(p, :file, 'small'), :alt=''), 'javascript:void (0)', :onclick=quot;change_property_picture(#{property.id}, '#{url_for_file_column(p, :file, 'thumb')}');quot; % % end end -% % else -% %= link_to(image_tag('no_photo.png', :alt=' '), property_path(property), :target = quot;_blankquot;) % % end -% /div div class=quot;property_infoquot; span class=quot;agency_logoquot;%= link_to (agency_logo(property.agency, 'small')), agency_path(property.agency) %/span table tr td style=quot;width:80px;quot; / / /td td%= property_rooms(property) %/td /tr tr td /td td%= property.surface % /td 4
  • 6. becomes this in HAML! 2 spaces! 6
  • 7. How to use HAML? • Install the plugin ./script/plugin install svn://hamptoncatlin.com/haml/trunk haml 7
  • 8. How to use HAML? • Rename your views - .rhtml +.haml 8
  • 9. How to use HAML? • Enjoy the delete key! 9
  • 10. HAML is... • sexy • well-indented • clear • fast to write • the next step in generating views in your Rails application 10
  • 11. Concept Slower Abstract Fast Development Execution Faster Concrete Slow Development Execution 11
  • 12. Costs Cost Time Slower to Develop Faster to Develop 12
  • 13. HAML adds more abstraction, so it should be slower on execution... How much does that cost? 13
  • 14. “Haml 1.7 is now only 1.3x slower than ERB” from HAML release notes 14
  • 16. Httperf • httperf --port 8001 --server 127.0.0.1 --num-conns 300 --uri / • We got: • rhtml 16 ms / req • haml 21 ms / req • HAML is 24 % slower than ERB in our example 16
  • 17. SASS 17
  • 18. #main :background-color #f00 :width 98% #main { background-color: #f00; width: 98% } 18
  • 19. SASS !main_color = #00ff00 #main :color = !main_color :p :background-color = !main_color :color #000000 19
  • 20. Rails 2.0 .format.provider: .html.haml .html.erb 20