• Like
  • Save
Haml & Sass presentation
Upcoming SlideShare
Loading in...5
×
 

Haml & Sass presentation

on

  • 2,162 views

Presentation draft for August PhRUG meetup

Presentation draft for August PhRUG meetup

Statistics

Views

Total Views
2,162
Views on SlideShare
2,162
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Haml & Sass presentation Haml & Sass presentation Presentation Transcript

    •  
    • Why code in Ruby / Rails?
    •  
    • I like Java
    • + Sign me up!
    • But I like Ruby better.
    • Brevity.
    • 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; );
    • hash = { 1 => &quot; one &quot; , 2 => &quot; two &quot; , 3 => &quot; three &quot; }
    • Rails is (mostly) concise.
    • $ rails blog $ cd blog $ ruby script/generate scaffold entry subject:string content:text $ rake db:migrate $ ruby script/server
    • class Entry < ActiveRecord :: Base end
    • 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 ...
    • < 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 %>
    • HTML in ERb screws everything up.
    • 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
    • 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 %>
    • Enter Haml
    • % h1 Listing entries Declaring Elements
    • % table % tr % th Subject % th Content Nesting Elements
    • %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
    • % p { :style => &quot; color: green &quot; }= notice Attributes
    • % 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
    • Why stop at ERb?
    • Sass does with CSS what Haml does with HTML .
    • pre background-color : #eee padding : 10px font-size : 11px No braces! No semicolons!
    • # 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!
    • $fore: # 333 $bg: # fff body background-color : $bg color : $fore Constants!
    • @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!
    • Short Demo
    • Thank you for listening! my site: http://www.bryanbibat.net