Your SlideShare is downloading. ×
0
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Haml & Sass presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Haml & Sass presentation

1,749

Published on

Presentation draft for August PhRUG meetup

Presentation draft for August PhRUG meetup

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,749
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.  
  • 2. Why code in Ruby / Rails?
  • 3.  
  • 4. I like Java
  • 5. + Sign me up!
  • 6. But I like Ruby better.
  • 7. Brevity.
  • 8. import java.util.Map; import java.util.HashMap; ... Map<Integer, String> hash = new HashMap<Integer, String>(); hash.put(1, &quot;one&quot; ); hash.put(2, &quot;two&quot; ); hash.put(3, &quot;three&quot; );
  • 9. hash = { 1 => &quot; one &quot; , 2 => &quot; two &quot; , 3 => &quot; three &quot; }
  • 10. Rails is (mostly) concise.
  • 11. $ rails blog $ cd blog $ ruby script/generate scaffold entry subject:string content:text $ rake db:migrate $ ruby script/server
  • 12. class Entry < ActiveRecord :: Base end
  • 13. class EntriesController < ApplicationController # GET /entries # GET /entries.xml def index @entries = Entry .all respond_to do | format | format.html # index.html.erb format.xml { render :xml => @entries } end end ...
  • 14. < h1 > Listing entries </ h1 > < table > < tr > < th > Subject </ th > < th > Content </ th > </ tr > <% @entries .each do | entry | %> < tr > < td > <%= h entry.subject %> </ td > < td > <%= h entry.content %> </ td > < td > <%= link_to ' Show ', entry %> </ td > < td > <%= link_to ' Edit ', edit_entry_path(entry) %> </ td > < td > <%= link_to ' Destroy ', entry, :confirm => ' Are you sure? ' , :method => :delete %> </ td > </ tr > <% end %> </ table > < br /> <%= link_to ' New entry ', new_entry_path %>
  • 15. HTML in ERb screws everything up.
  • 16. import java.util.Map; import java.util.HashMap; ... Map<Integer, String> hash = new HashMap<Integer, String>(); hash.put( 1, &quot;one&quot; ); hash.put( 2, &quot;two&quot; ); hash.put( 3, &quot;three&quot; ); Ruby does away with redundant code
  • 17. What if we could do it here too? < h1 > Listing entries </h1> < table > < tr > < th > Subject </th> < th > Content </th> </tr> <% @entries.each do |entry| %> < tr > < td ><% =h entry.subject %></td> < td ><% =h entry.content %></td> < td ><% = link_to 'Show', entry %></td> < td ><% = link_to 'Edit', edit_entry_path(entry) %></td> < td ><% = link_to 'Destroy', entry, :confirm => 'Are you sure?', :method => :delete %></td> </tr> <% end %> </table> < br /> <% = link_to 'New entry', new_entry_path %>
  • 18. Enter Haml
  • 19. % h1 Listing entries Declaring Elements
  • 20. % table % tr % th Subject % th Content Nesting Elements
  • 21. %table %tr %th Subject %th Content - @entries .each do | entry | %tr % td &= entry.subject % td &= entry.content % td = link_to ' Show ' , entry % td = link_to ' Edit ' , edit_entry_path(entry) Ruby Code
  • 22. % p { :style => &quot; color: green &quot; }= notice Attributes
  • 23. % div { :class => &quot; error &quot; , :id => &quot; some_id &quot; } Some Text can be shortened to . class # some_id Some Text divs, classes, and id
  • 24. Why stop at ERb?
  • 25. Sass does with CSS what Haml does with HTML .
  • 26. pre background-color : #eee padding : 10px font-size : 11px No braces! No semicolons!
  • 27. # errorExplanation width: 400px border: 2px solid red padding: 7px padding-bottom: 12px margin-bottom: 20px background-color: #f0f0f0 h2 text-align: left font-weight: bold ... Nested Selectors!
  • 28. $fore: # 333 $bg: # fff body background-color : $bg color : $fore Constants!
  • 29. @mixin rounded($radius: 10px) border-radius: $radius -moz-border-radius: $radius -webkit-border-radius: $radius . fieldWithErrors @include rounded(5px) ... # errorExplanation @include rounded ... Method-like structures!
  • 30. Short Demo
  • 31. Thank you for listening! my site: http://www.bryanbibat.net

×