haml & sass 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 hash = new HashMap();
hash.put(1, "one");
hash.put(2, "two");
hash.put(3, "three");
hash = { 1 => "one", 2 => "two", 3 => "three" }
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::Baseend
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
...
Listing entries
Subject Content
'Are you sure?', :method => :delete %>
HTML in ERb screws everything up.
import java.util.Map;
import java.util.HashMap;
...
Map hash = new HashMap();
hash.put(1, "one");
hash.put(2, "two");
hash.put(3, "three");
Ruby does away with redundant code
What if we could do it here too?
Listing entries
Subject
Content
'Are you sure?', :method => :delete %>
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 => "color: green" }= notice
Attributes
%div{ :class => "error", :id => "some_id" } Some Text
can be shortened to
.class#some_id Some Text
divs, classes, and id
Why stop at ERb?
Sass does with CSSwhat 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