dsls for front end rails
DESCRIPTION
Video of this presentation: http://vimeo.com/7643491TRANSCRIPT
WELCOME!
Monday, November 2, 2009
WHO AM I?
Monday, November 2, 2009
ME:JUSTIN HALSALL
Monday, November 2, 2009
FRONT END DEVhttp://www.flickr.com/photos/nathaninsandiego/3687500937/
Monday, November 2, 2009
FRONT END RAILS DEVhttp://www.flickr.com/photos/nathaninsandiego/3687500937/
Monday, November 2, 2009
DSLS FOR FRONT END RAILS
Monday, November 2, 2009
DSLS FOR FRONT END RAILS
~OR~
HOW TO USE BLOCKS IN YOUR VIEWS FOR
MAXIMUM AMOUNTS OF AWESOMENESS
Monday, November 2, 2009
~BACKSTORY~
Monday, November 2, 2009
A DEVELOPERhttp://www.flickr.com/photos/nathonline/918128338
a developer working in his views
Monday, November 2, 2009
A DEVELOPERhttp://www.flickr.com/photos/nathonline/918128338
a developer working in his views
http://www.flickr.com/photos/pipeapple/2190051229
Monday, November 2, 2009
VERTICAL TABShttp://www.flickr.com/photos/denn/5291024/
create sexy vertical tabsdisplayed with javascript
Monday, November 2, 2009
Monday, November 2, 2009
All pages have a couple things in common
Monday, November 2, 2009
<h1>
All pages have a couple things in common
Monday, November 2, 2009
<ul>
<h1>
All pages have a couple things in common
Monday, November 2, 2009
<ul>
<h1>
<div>
All pages have a couple things in common
Monday, November 2, 2009
<div class='clearfix lead'> <h1>...</h1> <p>...</p></div><div id='add_connection' class='add_connection'> <div id='tabs' class='rounded_container'> <ul> <li><a href='#tabs-step1'>1. ...</a></li> <li><a href='#tabs-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</a></li> <li><a href='#tabs-sync'>4. ...</a></li> <li><a href='#tabs-done'>Finished</a></li> </ul> <div id='tabs-step1' class='setup_box'> <h2>1. ...</h2> ... <a href='#tabs-step2' class='next'>next</a> </div> <div id='tabs-step2' class='setup_box'> <h2>2. ...</h2> ... <a href='#tabs-step1' class='previous'>previous</a> <a href='#tabs-step3' class='next'>next</a> </div> <div id='tabs-step3' class='setup_box'> <h2>3. ...</h2> ... <a href='#tabs-step2' class='previous'>previous</a> <a href='#tabs-sync' class='next'>next</a> </div> <div id='tabs-sync' class='setup_box'> <h2>4. ...</h2> <h3>Status</h3> <p id='status_message'>Checking sync status...</p> <a href='#tabs-step3' class='previous'>previous</a> <a href='#tabs-done' class='next'>next</a> </div> <div id='tabs-done' class='setup_box'> <h2>Finished - Well done!</h2> <img src='/images/giant_success_tick.png' class='success' alt='Success!'> <a href='/connections' class='continue add_more' title='back'><img src='/images/add_connection_btn.png' alt='Go to Contacts' /></a> <a href='/contacts' title='Go to Contacts' class='continue'><img src='/images/gotocontacts_btn.png' alt='Go to Contacts' /></a> <a href='#tabs-sync' class='previous'>previous</a> </div> </div></div>
Monday, November 2, 2009
<div class='clearfix lead'> <h1>...</h1> <p>...</p></div><div id='add_connection' class='add_connection'> <div id='tabs' class='rounded_container'> <ul> <li><a href='#tabs-step1'>1. ...</a></li> <li><a href='#tabs-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</a></li> <li><a href='#tabs-sync'>4. ...</a></li> <li><a href='#tabs-done'>Finished</a></li> </ul> <div id='tabs-step1' class='setup_box'> <h2>1. ...</h2> ... <a href='#tabs-step2' class='next'>next</a> </div> <div id='tabs-step2' class='setup_box'> <h2>2. ...</h2> ... <a href='#tabs-step1' class='previous'>previous</a> <a href='#tabs-step3' class='next'>next</a> </div> <div id='tabs-step3' class='setup_box'> <h2>3. ...</h2> ... <a href='#tabs-step2' class='previous'>previous</a> <a href='#tabs-sync' class='next'>next</a> </div> <div id='tabs-sync' class='setup_box'> <h2>4. ...</h2> <h3>Status</h3> <p id='status_message'>Checking sync status...</p> <a href='#tabs-step3' class='previous'>previous</a> <a href='#tabs-done' class='next'>next</a> </div> <div id='tabs-done' class='setup_box'> <h2>Finished - Well done!</h2> <img src='/images/giant_success_tick.png' class='success' alt='Success!'> <a href='/connections' class='continue add_more' title='back'><img src='/images/add_connection_btn.png' alt='Go to Contacts' /></a> <a href='/contacts' title='Go to Contacts' class='continue'><img src='/images/gotocontacts_btn.png' alt='Go to Contacts' /></a> <a href='#tabs-sync' class='previous'>previous</a> </div> </div></div>
Lots
of
HTML
Monday, November 2, 2009
<div class='clearfix lead'> <h1>...</h1> <p>...</p></div><div id='add_connection' class='add_connection'> <div id='tabs' class='rounded_container'> <ul> <li><a href='#tabs-step1'>1. ...</a></li> <li><a href='#tabs-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</a></li> <li><a href='#tabs-sync'>4. ...</a></li> <li><a href='#tabs-done'>Finished</a></li> </ul> <div id='tabs-step1' class='setup_box'> <h2>1. ...</h2> ... <a href='#tabs-step2' class='next'>next</a> </div> <div id='tabs-step2' class='setup_box'> <h2>2. ...</h2> ... <a href='#tabs-step1' class='previous'>previous</a> <a href='#tabs-step3' class='next'>next</a> </div> <div id='tabs-step3' class='setup_box'> <h2>3. ...</h2> ... <a href='#tabs-step2' class='previous'>previous</a> <a href='#tabs-sync' class='next'>next</a> </div> <div id='tabs-sync' class='setup_box'> <h2>4. ...</h2> <h3>Status</h3> <p id='status_message'>Checking sync status...</p> <a href='#tabs-step3' class='previous'>previous</a> <a href='#tabs-done' class='next'>next</a> </div> <div id='tabs-done' class='setup_box'> <h2>Finished - Well done!</h2> <img src='/images/giant_success_tick.png' class='success' alt='Success!'> <a href='/connections' class='continue add_more' title='back'><img src='/images/add_connection_btn.png' alt='Go to Contacts' /></a> <a href='/contacts' title='Go to Contacts' class='continue'><img src='/images/gotocontacts_btn.png' alt='Go to Contacts' /></a> <a href='#tabs-sync' class='previous'>previous</a> </div> </div></div>
Lots
of
HTML
Duplication
Monday, November 2, 2009
<div class='clearfix lead'> <h1>...</h1> <p>...</p></div><div id='add_connection' class='add_connection'> <div id='tabs' class='rounded_container'> <ul> <li><a href='#tabs-step1'>1. ...</a></li> <li><a href='#tabs-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</a></li> <li><a href='#tabs-sync'>4. ...</a></li> <li><a href='#tabs-done'>Finished</a></li> </ul> <div id='tabs-step1' class='setup_box'> <h2>1. ...</h2> ... <a href='#tabs-step2' class='next'>next</a> </div> <div id='tabs-step2' class='setup_box'> <h2>2. ...</h2> ... <a href='#tabs-step1' class='previous'>previous</a> <a href='#tabs-step3' class='next'>next</a> </div> <div id='tabs-step3' class='setup_box'> <h2>3. ...</h2> ... <a href='#tabs-step2' class='previous'>previous</a> <a href='#tabs-sync' class='next'>next</a> </div> <div id='tabs-sync' class='setup_box'> <h2>4. ...</h2> <h3>Status</h3> <p id='status_message'>Checking sync status...</p> <a href='#tabs-step3' class='previous'>previous</a> <a href='#tabs-done' class='next'>next</a> </div> <div id='tabs-done' class='setup_box'> <h2>Finished - Well done!</h2> <img src='/images/giant_success_tick.png' class='success' alt='Success!'> <a href='/connections' class='continue add_more' title='back'><img src='/images/add_connection_btn.png' alt='Go to Contacts' /></a> <a href='/contacts' title='Go to Contacts' class='continue'><img src='/images/gotocontacts_btn.png' alt='Go to Contacts' /></a> <a href='#tabs-sync' class='previous'>previous</a> </div> </div></div>
Lots
of
HTML
Duplication
Monday, November 2, 2009
Imagine having to do this 8 times and changing things around
Awefull
Monday, November 2, 2009
HOW COULD THIS BE BETTER?
Monday, November 2, 2009
GOD GAVE US HELPERShttp://www.flickr.com/photos/zippy/2429678961/
And on the 8th day I created methods to awesomify with your views.
You shall refer to these as helpers.
if we where evil we could misuse rails helpers with blocks to create a nice little DSL we can use everywhere
Monday, November 2, 2009
GOD GAVE US HELPERShttp://www.flickr.com/photos/zippy/2429678961/
And on the 8th day I created methods to awesomify with your views.
You shall refer to these as helpers.
if we where evil we could misuse rails helpers with blocks to create a nice little DSL we can use everywhere
Monday, November 2, 2009
GOD GAVE US HELPERShttp://www.flickr.com/photos/zippy/2429678961/
And on the 8th day I created methods to awesomify with your views.
You shall refer to these as helpers.
if we where evil we could misuse rails helpers with blocks to create a nice little DSL we can use everywhere
Kill JAVA!
Monday, November 2, 2009
<% add_connection_tabs(:for => "...", :subtitle => "...") do |tab| %>
<% tab.step "..." do %> ... <% end %>
<% tab.step "..." do %> ... <% end %>
<% tab.step "..." do %> ... <% end %>
<% tab.sync %>
<% tab.done %>
<% end %>
Monday, November 2, 2009
http://www.flickr.com/photos/bodoggirl/3598561539 http://www.flickr.com/photos/juice10/3501376901
Monday, November 2, 2009
http://www.flickr.com/photos/bodoggirl/3598561539
Sexy!
http://www.flickr.com/photos/juice10/3501376901
Monday, November 2, 2009
LOOKING GOOD HURTShttp://www.flickr.com/photos/thenovys/3791884189
Monday, November 2, 2009
HOW TO TAKE THE HURT OUT OF
LOOKING BEAUTIFUL(ehow.com)1) Freeze tweezers before tweezing eyebrows, it'll numb the area being tweezed at its touch.
2) Carry those oversized designer purses and totes on different shoulders everyday to avoid straining your arms and shoulder muscles.3) Make sure to thoroughly stretch your muscles before exercising to increase.. bla bla bla4) Choose the best fitted high heel or stiletto possible to reduce pain and pressure on your toes (translated – don’t choose a heel that’ll make your foot slide leaving a gap between the shoe and back of your foot).5) Something about sticking tape on your toes so that your sandals don't eat your feet
Monday, November 2, 2009
BLOCK_HELPERhttp://github.com/markevans/block_helpers
Dax briefly talked about it yesterday
Monday, November 2, 2009
BLOCK_HELPERhttp://github.com/markevans/block_helpers
Dax briefly talked about it yesterday
works better than sticking
sticky tape on your toes
Monday, November 2, 2009
THE MEAThttp://www.flickr.com/photos/splorp/12200621
Monday, November 2, 2009
# config/environment.rbconfig.gem "block_helpers", :lib => "block_helpers", :source => "http://gemcutter.org"
$ rake gems:install
Monday, November 2, 2009
THE PAGE WE ARE GOING TO DRYUP
<h1>Symptoms of Apple addiction</h1><div id='symptoms'> <ul class="tabs"> <li><a href="#praying_panel">Praying</a></li> <li><a href="#happiness_panel">Happiness</a></li> <li><a href="#microsoft_panel">Microsoft</a></li> </ul>
<div class="panes"> <div id="praying_panel"> <h2>Praying to Steve Jobs</h2> <p>It is not uncommon for an Apple addict to pray to his Steveness.</p> </div> <div id="happiness_panel"> <h2>Happiness and iPhone battery level equal</h2> <p>Addict gets the shakes from low battery power</p> </div> <div id="microsoft_panel"> <h2>Microsoft powered nervous break downs</h2> <p>Addict gets the shakes from non-Apple devices</p> </div> </div></div>
Monday, November 2, 2009
THE PAGE WE ARE GOING TO DRYUP
<h1>Symptoms of Apple addiction</h1><div id='symptoms'> <ul class="tabs"> <li><a href="#praying_panel">Praying</a></li> <li><a href="#happiness_panel">Happiness</a></li> <li><a href="#microsoft_panel">Microsoft</a></li> </ul>
<div class="panes"> <div id="praying_panel"> <h2>Praying to Steve Jobs</h2> <p>It is not uncommon for an Apple addict to pray to his Steveness.</p> </div> <div id="happiness_panel"> <h2>Happiness and iPhone battery level equal</h2> <p>Addict gets the shakes from low battery power</p> </div> <div id="microsoft_panel"> <h2>Microsoft powered nervous break downs</h2> <p>Addict gets the shakes from non-Apple devices</p> </div> </div></div>
Monday, November 2, 2009
NO MORE TOWELS NEEDED
<% symptom_tabs_for "Apple addiction" do |tabs| %>
<% tabs.symptom "Praying to Steve Jobs" do %> <p>It is not uncommon for an Apple addict to pray to his Steveness.</p> <% end %>
<% tabs.symptom "Happiness and iPhone energy level equal" do %> <p>Addict gets the shakes from low battery power</p> <% end %>
<% tabs.symptom "Microsoft powered nervous break downs" do %> <p>Addict gets the shakes from non-Apple devices</p> <% end %>
<% end %>
Monday, November 2, 2009
ARE WE THERE YET?http://www.flickr.com/photos/sbluerock/415736417
Monday, November 2, 2009
NO! SHUT UP OR NO MORE TV!http://www.flickr.com/photos/chubbychandru/2273272995
Monday, November 2, 2009
FIRST THINGS FIRST
# view.html.erb<% symptom_tabs_for "Apple addiction" do |tabs| %> ...<% end %>
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base # symptom_tabs_for code endend
Monday, November 2, 2009
# view.html.erb<% symptom_tabs_for "Apple addiction" do |tabs| %> <% tabs.symptom "Praying to Steve Jobs" do %> ... <% end %> ...<% end %>
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) end
def symptom(name, &block) end endend
Monday, November 2, 2009
# view.html.erb<% symptom_tabs_for "Apple addiction" do |tabs| %> ...<% end %>
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
endend
Monday, November 2, 2009
# view.html.erb<% symptom_tabs_for "Apple addiction" do |tabs| %> ...<% end %>
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
endend
Monday, November 2, 2009
# view.html.erb<% symptom_tabs_for "Apple addiction" do |tabs| %> ...<% end %>
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
endend
Monday, November 2, 2009
# view.html.erb<% symptom_tabs_for "Apple addiction" do |tabs| %> ...<% end %>
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
endend
Monday, November 2, 2009
# view.html.erb<% symptom_tabs_for "Apple addiction" do |tabs| %> ...<% end %>
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
endend
# browser<h1>Symptoms of Apple addiction</h1><div id="symptoms"> <div class="panes"> </div></div>
Monday, November 2, 2009
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
def sypmtom(name, &block) @short = name.split.first @content = capture &block concat content_tag('div', ( content_tag( 'h2', name) + @content), :id => "#{@short.downcase}_panel") end endend
Monday, November 2, 2009
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
def sypmtom(name, &block) @short = name.split.first @content = capture(&block) concat content_tag('div', ( content_tag( 'h2', name) + @content), :id => "#{@short.downcase}_panel") end endend
Monday, November 2, 2009
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
def sypmtom(name, &block) @short = name.split.first @content = capture(&block) concat content_tag('div', ( content_tag( 'h2', name) + @content), :id => "#{@short.downcase}_panel") end endend
Monday, November 2, 2009
# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
def sypmtom(name, &block) @short = name.split.first @content = capture(&block) concat content_tag('div', ( content_tag( 'h2', name) + @content), :id => "#{@short.downcase}_panel") end endend
Monday, November 2, 2009
concat "hello"# the equivalent of <%= "hello" %>
CONCAT
Monday, November 2, 2009
<% @greeting = capture do %> Welcome to my shiny new web page! The date and time is <%= Time.now %><% end %>
CAPTURE
<% myblockheader do %> Welcome to my shiny new web page!<% end %>
def myblockheader(&block) content = capture(&block) concat(content_tag('h1', content))end
Monday, November 2, 2009
module ApplicationHelper class SymptomTabsFor < BlockHelpers::Base
def initialize(title) @title = title @tabs = [] end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('ul', @tabs.collect{|t| content_tag('li', t)}, :class => 'tabs') + content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
def symptom(name, &block) @short = name.split.first @tabs << content_tag('a', @short, :href => "##{@short.downcase}_panel") @content = capture &block concat content_tag('div', ( content_tag( 'h2', name) + @content), :id => "#{@short.downcase}_panel") end
endend
Monday, November 2, 2009
module ApplicationHelper class SymptomTabsFor < BlockHelpers::Base
def initialize(title) @title = title @tabs = [] end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('ul', @tabs.collect{|t| content_tag('li', t)}, :class => 'tabs') + content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
def symptom(name, &block) @short = name.split.first @tabs << content_tag('a', @short, :href => "##{@short.downcase}_panel") @content = capture &block concat content_tag('div', ( content_tag( 'h2', name) + @content), :id => "#{@short.downcase}_panel") end
endend
Monday, November 2, 2009
module ApplicationHelper class SymptomTabsFor < BlockHelpers::Base
def initialize(title) @title = title @tabs = [] end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('ul', @tabs.collect{|t| content_tag('li', t)}, :class => 'tabs') + content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
def symptom(name, &block) @short = name.split.first @tabs << content_tag('a', @short, :href => "##{@short.downcase}_panel") @content = capture &block concat content_tag('div', ( content_tag( 'h2', name) + @content), :id => "#{@short.downcase}_panel") end
endend
Monday, November 2, 2009
module ApplicationHelper class SymptomTabsFor < BlockHelpers::Base
def initialize(title) @title = title @tabs = [] end
def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('ul', @tabs.collect{|t| content_tag('li', t)}, :class => 'tabs') + content_tag('div', body, :class => 'panes')), :id => 'symptoms') end
def symptom(name, &block) @short = name.split.first @tabs << content_tag('a', @short, :href => "##{@short.downcase}_panel") @content = capture &block concat content_tag('div', ( content_tag( 'h2', name) + @content), :id => "#{@short.downcase}_panel") end
endend
Monday, November 2, 2009
COMMUNITY PLUG
dev-groups.org
rubyists.eu
http://amsterdam-rb.org/
http://groups.google.com/group/utrecht-rb
Monday, November 2, 2009
FIN...
Monday, November 2, 2009
JUSTIN HALSALL
blog: juice10.com
pet project: tvnotify.com
twitter.com/juice10
wakoopa.com/juice10
github.com/Juice10
Monday, November 2, 2009