DSLs for Front End Rails

WELCOME! Monday, November 2, 2009

WHO AM I? Monday, November 2, 2009

ME: JUSTIN HALSALL Monday, November 2, 2009

FRONT END DEV http://www.ﬂickr.com/photos/nathaninsandiego/3687500937/ Monday, November 2, 2009

FRONT END RAILS DEV http://www.ﬂickr.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 developer working in his views A DEVELOPER http://www.ﬂickr.com/photos/nathonline/918128338 Monday, November 2, 2009

a developer working in his views A DEVELOPER http://www.ﬂickr.com/photos/nathonline/918128338 http://www.ﬂickr.com/photos/pipeapple/2190051229 Monday, November 2, 2009

create sexy vertical tabs displayed with javascript VERTICAL TABS http://www.ﬂickr.com/photos/denn/5291024/ 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

<h1> <ul> All pages have a couple things in common Monday, November 2, 2009

<h1> <ul> All pages have a couple things in common <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> Monday, November 2, 2009

<div class='clearfix lead'> <h1>...</h1> o ts L f <p>...</p> </div> <div id='add_connection' class='add_connection'> o L <div id='tabs' class='rounded_container'> <ul> <li><a href='#tabs-step1'>1. ...</a></li> M <li><a href='#tabs-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</a></li> T <li><a href='#tabs-sync'>4. ...</a></li> <li><a href='#tabs-done'>Finished</a></li> </ul> H <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> o ts L f <p>...</p> </div> <div id='add_connection' class='add_connection'> o L <div id='tabs' class='rounded_container'> <ul> <li><a href='#tabs-step1'>1. ...</a></li> M <li><a href='#tabs-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</a></li> T <li><a href='#tabs-sync'>4. ...</a></li> <li><a href='#tabs-done'>Finished</a></li> </ul> H <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'> Du <h2>3. ...</h2> ... <a href='#tabs-step2' class='previous'>previous</a> pli <a href='#tabs-sync' class='next'>next</a> </div> <div id='tabs-sync' class='setup_box'> <h2>4. ...</h2> ca <h3>Status</h3> <p id='status_message'>Checking sync status...</p> tio <a href='#tabs-step3' class='previous'>previous</a> <a href='#tabs-done' class='next'>next</a> </div> n <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

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

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 GOD GAVE US HELPERS http://www.ﬂickr.com/photos/zippy/2429678961/ Monday, November 2, 2009

And on the 8th day I created methods to awesomify with your views. Kill JAVA! 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 GOD GAVE US HELPERS http://www.ﬂickr.com/photos/zippy/2429678961/ 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.ﬂickr.com/photos/bodoggirl/3598561539 http://www.ﬂickr.com/photos/juice10/3501376901 Monday, November 2, 2009

x y! Se http://www.ﬂickr.com/photos/bodoggirl/3598561539 http://www.ﬂickr.com/photos/juice10/3501376901 Monday, November 2, 2009

LOOKING GOOD HURTS http://www.ﬂickr.com/photos/thenovys/3791884189 Monday, November 2, 2009

HOW TO TAKE THE HURT OUT OF LOOKING BEAUTIFUL (ehow.com) 1) Freeze t weezers before t weezing eyebrows, it'll numb the area being t weezed 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 bla 4) 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 bet ween 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_HELPER http://github.com/markevans/block_helpers Dax briefly talked about it yesterday Monday, November 2, 2009

wor ks b stick etter y tap than e on stick your ing toes BLOCK_HELPER http://github.com/markevans/block_helpers Dax briefly talked about it yesterday Monday, November 2, 2009

THE MEAT http://www.ﬂickr.com/photos/splorp/12200621 Monday, November 2, 2009

# config/environment.rb config.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

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.ﬂickr.com/photos/sbluerock/415736417 Monday, November 2, 2009

NO! SHUT UP OR NO MORE TV! http://www.ﬂickr.com/photos/chubbychandru/2273272995 Monday, November 2, 2009

FIRST THINGS FIRST # view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> ... <% end %> # application_helper.rb module ApplicationHelper class SymptomTabsFor < BlockHelpers::Base # symptom_tabs_for code end end 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.rb module ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) end def symptom(name, &block) end end end Monday, November 2, 2009

# view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> ... <% end %> # application_helper.rb module 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 end end Monday, November 2, 2009

# view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> ... <% end %> # application_helper.rb module 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 end end # browser <h1>Symptoms of Apple addiction</h1> <div id="symptoms"> <div class="panes"> </div> </div> Monday, November 2, 2009

# application_helper.rb module 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 end end Monday, November 2, 2009

# application_helper.rb module 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 end end Monday, November 2, 2009

CONCAT concat "hello" # the equivalent of <%= "hello" %> Monday, November 2, 2009

CAPTURE <% @greeting = capture do %> Welcome to my shiny new web page! The date and time is <%= Time.now %> <% end %> def myblockheader(&block) content = capture(&block) concat(content_tag('h1', content)) end <% myblockheader do %> Welcome to my shiny new web page! <% 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 end end 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

DSLs for Front End Rails

by Justin Halsall on Nov 02, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

DSLs for Front End Rails — Presentation Transcript