9. a developer
working in
his views
A DEVELOPER
http://www.flickr.com/photos/nathonline/918128338
Monday, November 2, 2009
10. 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
11. create sexy vertical
tabs
displayed with
javascript
VERTICAL TABS
http://www.flickr.com/photos/denn/5291024/
Monday, November 2, 2009
19. <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
20. <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
21. Imagine having to
do this 8 times and
changing things
around
Awefull
Monday, November 2, 2009
22. HOW COULD
THIS BE BETTER?
Monday, November 2, 2009
23. 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
24. 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
25. 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
26. <% 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
28. x y!
Se
http://www.flickr.com/photos/bodoggirl/3598561539 http://www.flickr.com/photos/juice10/3501376901
Monday, November 2, 2009
29. LOOKING GOOD HURTS
http://www.flickr.com/photos/thenovys/3791884189
Monday, November 2, 2009
30. 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
31. BLOCK_HELPER
http://github.com/markevans/block_helpers
Dax briefly talked about
it yesterday
Monday, November 2, 2009
32. 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
33. THE MEAT
http://www.flickr.com/photos/splorp/12200621
Monday, November 2, 2009
35. 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
36. 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
37. 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
38. ARE WE THERE YET?
http://www.flickr.com/photos/sbluerock/415736417
Monday, November 2, 2009
39. NO! SHUT UP OR NO MORE TV!
http://www.flickr.com/photos/chubbychandru/2273272995
Monday, November 2, 2009
40. 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
41. # 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
42. # 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
43. # 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
44. # 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
45. # 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
46. # 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
47. # 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
48. # 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
49. # 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
50. # 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
51. CONCAT
concat "hello"
# the equivalent of <%= "hello" %>
Monday, November 2, 2009
52. 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
53. 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
54. 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
55. 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
56. 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
57. COMMUNITY PLUG
dev-groups.org
rubyists.eu
http://amsterdam-rb.org/
http://groups.google.com/group/utrecht-rb
Monday, November 2, 2009