WELCOME!
Monday, November 2, 2009

WHO AM I?
Monday, November 2, 2009

ME:
JUSTIN HALSALL
Monday, November 2, 2009

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

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

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

create sexy vertical
tabs
displayed with
javascript
VERTICAL TABS
http://www.flickr.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

<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.flickr.com/photos/zippy/2429678961/
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.flickr.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.flickr.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.flickr.com/photos/bodoggirl/3598561539 http://www.flickr.com/photos/juice10/3501376901
Monday, November 2, 2009

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

LOOKING GOOD HURTS
http://www.flickr.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.flickr.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

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.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
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
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

# 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

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

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

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