Share
Embed
Slide 1
Slide 1 text
*THE RAILS VIEW:
THE JUNK DRAWER
GROWS UP
JOHN ATHAYDE, LivingSocial
RUBY NATION 23 MAR 2012
Tuesday, March 27, 12
Slide 2
Slide 2 text
—OR—
Dear Lord,
what have I uncovered?
MY WHAT A WONDERFUL SMELL YOU’VE DISCOVERED!
Tuesday, March 27, 12
Slide 3
Slide 3 text
http://www.flickr.com/photos/marirn/6131270109/
Tuesday, March 27, 12
Slide 4
Slide 4 text
Tuesday, March 27, 12
Slide 5
Slide 5 text
Background
THE DUDE ABIDES
Tuesday, March 27, 12
Slide 6
Slide 6 text
http://www.flickr.com/photos/michael-seljos/2073146716/
Tuesday, March 27, 12
Slide 7
Slide 7 text
METICULOUS
DESIGN WEB TALENT 3D VISUAL FX FILM
Tuesday, March 27, 12
Slide 8
Slide 8 text
Tuesday, March 27, 12
Slide 9
Slide 9 text
Tuesday, March 27, 12
Slide 10
Slide 10 text
Tuesday, March 27, 12
Slide 11
Slide 11 text
Tuesday, March 27, 12
Slide 12
Slide 12 text
Tuesday, March 27, 12
Slide 13
Slide 13 text
http://www.flickr.com/photos/marirn/6131270109/
Tuesday, March 27, 12
Slide 14
Slide 14 text
http://www.flickr.com/photos/marirn/6131270109/
Tuesday, March 27, 12
Slide 15
Slide 15 text
Tuesday, March 27, 12
Slide 16
Slide 16 text
*1.
WHERE WE ARE
THE STATE OF THE JUNK DRAWER
Tuesday, March 27, 12
Slide 17
Slide 17 text
“HTML5” and related technologies
GRAPHICS,
3D & EFFECTS
CONNECTIVITY CSS3 STYLING DEVICE ACCESS
MUTLIMEDA OFFLINE STORAGE
PERFORMANCE/
INTEGRATION
SEMANTICS
Tuesday, March 27, 12
Slide 18
Slide 18 text
Other Friends
.--.
/ \
## a a
( '._)
|'-- |
_.\___/_ ___pjax___
."\> \Y/|<'. '._.-'
/ \ \_\/ / '-' /
| --'\_/|/ | _/
|___.-' | |`'`
| | |
| / './
/__./` | |
\ | |
\ | |
; | |
/ | |
jgs |___\_.\_
`-"--'---'
Tuesday, March 27, 12
Slide 19
Slide 19 text
http://www.flickr.com/photos/marirn/6131270109/
Tuesday, March 27, 12
Slide 20
Slide 20 text
http://www.flickr.com/photos/marirn/6131270109/
Tuesday, March 27, 12
Slide 21
Slide 21 text
http://www.unclutterer.com
Erin Rooney Doland
Tuesday, March 27, 12
Slide 22
Slide 22 text
http://www.unclutterer.com
Tuesday, March 27, 12
Slide 23
Slide 23 text
http://www.unclutterer.com
Tuesday, March 27, 12
Slide 24
Slide 24 text
http://www.flickr.com/photos/marirn/6131270109/
Tuesday, March 27, 12
Slide 25
Slide 25 text
THE PROBLEM
THERE’S ONLY ONE?
Tuesday, March 27, 12
Slide 26
Slide 26 text
*2.
VIEW
ARCHAEOLOGY
FINDING THE GEMS IN THE JUNK
Tuesday, March 27, 12
Slide 27
Slide 27 text
THE
ASSET
PIPELINE
(SAY IT LIKE DON LAFONTAINE WITH REVERB)
Tuesday, March 27, 12
Slide 28
Slide 28 text
Tuesday, March 27, 12
Slide 29
Slide 29 text
LAZY
GENERATION
SCAFFOLD WHAT?
Tuesday, March 27, 12
Slide 30
Slide 30 text
bash$ rails g scaffold fightingwords index show kickcoder
OH NO, NOT AGAIN
Tuesday, March 27, 12
Slide 31
Slide 31 text
http://www.flickr.com/photos/97629199@N00/4610544557/
Tuesday, March 27, 12
Slide 32
Slide 32 text
Tuesday, March 27, 12
Slide 33
Slide 33 text
Broken gets fixed;
Crappy [code] lasts forever.
Tuesday, March 27, 12
Slide 34
Slide 34 text
LEGACY
CODE
WE STARTED THIS IN RAILS 0.9
Tuesday, March 27, 12
Slide 35
Slide 35 text
<%= content %>
Slide 36
Slide 36 text
ROUNDED CORNERS
<%= content %>
.box-to-be-rounded {
border: 1px solid #ccc;
border-radius: 5px; /* IE9, Opera 10.5 */
-webkit-border-radius: 5px; /* Safari, Chrome */
-moz-border-radius: 5px; /* Firefox */
}
CSS3 To The Rescue!
Tuesday, March 27, 12
Slide 37
Slide 37 text
if elsif elsif elsif end
Tuesday, March 27, 12
Slide 38
Slide 38 text
WHERE IS THAT PARTIAL?!?
Tuesday, March 27, 12
Slide 39
Slide 39 text
Tuesday, March 27, 12
Slide 40
Slide 40 text
render @client.projects
Tuesday, March 27, 12
Slide 41
Slide 41 text
Clean Code
Tuesday, March 27, 12
Slide 42
Slide 42 text
READABILTY
YES. YOU WANT THIS. BADLY.
Tuesday, March 27, 12
Slide 43
Slide 43 text
Writing
HTML
Tuesday, March 27, 12
Slide 44
Slide 44 text
<%= link_to client.name,
client_path,
:class => “client login”,
:target => “_blank” %>
Tuesday, March 27, 12
Slide 45
Slide 45 text
Tuesday, March 27, 12
Slide 46
Slide 46 text
HIERARCHY
WHERE IT’S AT.
Tuesday, March 27, 12
Slide 47
Slide 47 text
This is a page headline.
This is a section head
This is body text and it goes on for
miles and miles. I like cheese.
This is going to be a list of items:
- Item 1
- Item 2
- Item 3
NO HIERARCHY
Not semantic, everything is the same.
Tuesday, March 27, 12
- Item 1
- Item 2
- Item 3
Slide 48
Slide 48 text
NO HIERARCHY
Not semantic, everything is the same.
Tuesday, March 27, 12
Slide 49
Slide 49 text
This is a page headline.
This is a section head
This is body text and it goes on for miles and miles. I like cheese.
This is going to be a list of items:
- Item 1
- Item 2
- Item 3
Slide 50
Slide 50 text
SEMANTIC
HTML Tags used for meaning.
Tuesday, March 27, 12
Slide 51
Slide 51 text
VALIDATE!
Valid code makes everyone happy.
ONLINE:
validator.w3.org
Tuesday, March 27, 12
Slide 52
Slide 52 text
Tuesday, March 27, 12
Slide 53
Slide 53 text
§508
www.section508.gov
Tuesday, March 27, 12
Slide 54
Slide 54 text
Google is a blind user.
http://www.flickr.com/photos/scooter811/1475730494/
Tuesday, March 27, 12
Slide 55
Slide 55 text
START SMALL
Cover the basics all the time.
WAI Level 1 Checklist:
www.w3.org/TR/WCAG10/full-checklist.html
Tuesday, March 27, 12
Slide 56
Slide 56 text
(don’t use this)
Tuesday, March 27, 12
Slide 57
Slide 57 text
#profile
.left.column
#date= print_date
#address=
current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
BAKE OFF
<%= ERB %>
Tuesday, March 27, 12
<%= print_date %>
<%= current_user.address %>
<%= current_user.email %>
<%= current_user.bio %>
Slide 58
Slide 58 text
#profile
.left.column
#date= print_date
#address=
current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
<%= ERB %>
BAKE OFF
Tuesday, March 27, 12
<%= print_date %>
<%= current_user.address %>
<%= current_user.email %>
<%= current_user.bio %>
Slide 59
Slide 59 text
Tuesday, March 27, 12
Slide 60
Slide 60 text
DIV
Tuesday, March 27, 12
Slide 61
Slide 61 text
DIV
DIV
Tuesday, March 27, 12
Slide 62
Slide 62 text
DIV
DIV
DIV
Tuesday, March 27, 12
Slide 63
Slide 63 text
DIV
DIV
DIV
DIV
Tuesday, March 27, 12
Slide 64
Slide 64 text
DIV
DIV
DIV
DIV
DI
Tuesday, March 27, 12
Slide 65
Slide 65 text
DIV
DIV
DIV
DIV
DI
Tuesday, March 27, 12
Slide 66
Slide 66 text
DIV
DIV
DIV
DIV
IV
DI
Tuesday, March 27, 12
Slide 67
Slide 67 text
DIV
DIV
DIV
DIV
IV
DI
Tuesday, March 27, 12
Slide 68
Slide 68 text
DIV
DIV
DIV
DIV
IV
DI
Tuesday, March 27, 12
Slide 69
Slide 69 text
DIV
DIV
DIV
DIV
IV
DI
DI
Tuesday, March 27, 12
Slide 70
Slide 70 text
DIV
DIV
DIV
DIV
IV
DI
DI
Tuesday, March 27, 12
Slide 71
Slide 71 text
DIV
DIV
DIV
DIV
IV
DI
(OMG.)
DI
Tuesday, March 27, 12
Slide 72
Slide 72 text
(don’t use this)
unless you know what you’re doing
^
STATEMENT REVISED
Tuesday, March 27, 12
Slide 73
Slide 73 text
%section #profile
.left.column
%p #date= print_date
%p #address=
current_user.address
.right.column
%p #email= current_user.email
%p #bio= current_user.bio
HAVE YOUR CAKE AND...
<%= ERB %>
Tuesday, March 27, 12
<%= print_date %>
<%= current_user.address %>
<%= current_user.email %>
<%= current_user.bio %>
Slide 74
Slide 74 text
SOLUTION:
Formatting markup and code is paramount
to good coding practices. Decide on what
you’re doing as a team and stick with it.
Know your tools and don’t make it too hard.
Tuesday, March 27, 12
Slide 75
Slide 75 text
TABLES SUCK
TELL ’EM RAY
Tuesday, March 27, 12
Slide 76
Slide 76 text
EXCEPT FOR EMAIL
http://www.flickr.com/photos/gregoryjordan/6118863684/
Tuesday, March 27, 12
Slide 77
Slide 77 text
Tuesday, March 27, 12
Slide 78
Slide 78 text
SOLUTION:
Tables are not for layout unless it’s tabular
data. Unless you’re doing HTML emails, and
then all sins are forgiven.
Tuesday, March 27, 12
Slide 79
Slide 79 text
SCSS/Sass
Tuesday, March 27, 12
Slide 80
Slide 80 text
// Mixin w/ Color Maths
// ------------------------------------------------------------------
@mixin buttonBackground($startColor, $endColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
@include gradientBar($startColor, $endColor);
@include reset-filter();
// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active {
background-color: $endColor;
}
&.disabled, &[disabled] {
&:hover {
@include gradientBar($startColor, $endColor);
@include reset-filter();
}
}
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
&:active,
&.active {
background-color: darken($endColor, 10%) #{"\9"};
@include gradientBar($endColor, $startColor);
}
}
Tuesday, March 27, 12
Slide 81
Slide 81 text
// Nesting
// ------------------------------------------------------------------
button, input[type="button"], input[type="submit"], input[type="reset"], .btn {
display: inline-block;
padding: 4px 10px 4px;
font-family: $buttonFontFamily;
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $grayDarker !important;
text-align: center;
text-decoration: none !important;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
@include gradient-vertical-three-colors($white, $white, 25%, darken($white, 10%));
// Don't use .gradientbar() here since it does a three-color gradient
border: 1px solid $grayLighter;
border-bottom-color: $grayLight;
@include border-radius(4px);
$shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
@include box-shadow($shadow);
cursor: pointer;
// Hover state
&:hover {
@include transition(background-position .1s linear);
color: $grayDarker;
text-decoration: none;
background-color: darken($white, 10%);
background-position: 0 -15px;
}
&.warning {
@include buttonBackground(lighten($orange, 15%), $orange);
~ ul.dropdown-menu li a:hover {
@include buttonBackground(lighten($orange, 15%), $orange);
}
}
}
Tuesday, March 27, 12
Slide 82
Slide 82 text
*3.
ADVANCED
DIGGING
HOW FAR DOWN THE RABBIT HOLE DO WE GO?
Tuesday, March 27, 12
Slide 83
Slide 83 text
VIEW LOGIC
GONE WRONG
IF ELSE WHAT?
Tuesday, March 27, 12
Slide 84
Slide 84 text
Presenters
Tuesday, March 27, 12
Slide 85
Slide 85 text
ESPECIALLY DECORATORS
Tuesday, March 27, 12
Slide 86
Slide 86 text
Tuesday, March 27, 12
Slide 87
Slide 87 text
https://github.com/jcasimir/draper
Tuesday, March 27, 12
Slide 88
Slide 88 text
gem ‘draper’
$rails g draper:install
$rails g draper:decorator Client
Tuesday, March 27, 12
Slide 89
Slide 89 text
Tuesday, March 27, 12
Slide 90
Slide 90 text
Tuesday, March 27, 12
Slide 91
Slide 91 text
Tuesday, March 27, 12
Slide 92
Slide 92 text
Tuesday, March 27, 12
Slide 93
Slide 93 text
def full_name(person)
“
#{@person.first_name} #{@person.last_name}
” end Tuesday, March 27, 12Slide 94
Slide 94 text
def full_name(person)
“
#{@person.first_name} #{@person.last_name}
” end Tuesday, March 27, 12Slide 95
Slide 95 text
def full_name(person)
“
#{@person.first_name} #{@person.last_name}
” end def full_name “#{@person.first_name} #{@person.last_name}” end Tuesday, March 27, 12Slide 96
Slide 96 text
def referrer_for(account)
if account.referrer
referral = “Referred_by #{account.referrer.name}”
if account.web_contact?
“#{referral} via Web registration”
else
referral
end
else
“Web registration”
end
end
Tuesday, March 27, 12
Slide 97
Slide 97 text
SO MANY
DEVICES (and browsers)
320px != 2650px
Tuesday, March 27, 12
Slide 98
Slide 98 text
.profile {
color: #ccc;
margin: 20px;
padding: 5px 10px;
width: 300px;
}
.ie6 .profile {
margin: 18px;
}
Tuesday, March 27, 12
Slide 99
Slide 99 text
Tuesday, March 27, 12
Slide 100
Slide 100 text
Media
Queries
Tuesday, March 27, 12
Slide 101
Slide 101 text
.profile {
color: #ccc;
margin: 20px;
padding: 5px 10px;
width: 300px;
}
.ie6 .profile {
margin: 18px;
}
@media screen and (device-width: 1024px) and (orientation:landscape) {
body { font-size: 70%; }
.profile { width: 50%; }
}
Tuesday, March 27, 12
Slide 102
Slide 102 text
http://www.mediaqueri.es
Tuesday, March 27, 12
Slide 103
Slide 103 text
http://www.abookapart.com
Tuesday, March 27, 12
Slide 104
Slide 104 text
http://www.abookapart.com
Tuesday, March 27, 12
Slide 105
Slide 105 text
*4.
WHAT WE
LEARNED
RULES AND ACTIONS TO TAKE
Tuesday, March 27, 12
Slide 106
Slide 106 text
THE RAILS VIEW
RULES
LEARN THEM LIVE THEM LOVE THEM
Tuesday, March 27, 12
Slide 107
Slide 107 text
RULE #1
Our markup should have
meaning. We write templates
using semantic HTML.
Tuesday, March 27, 12
Slide 108
Slide 108 text
RULE #2
Our style sheets should handle
presentation. We don’t use
markup to style or use images
when CSS will do.
Tuesday, March 27, 12
Slide 109
Slide 109 text
RULE #3
Our templates should be free of
client-side code. We unobtrusively
attach behavior from our
JavaScript files
Tuesday, March 27, 12
Slide 110
Slide 110 text
RULE #4
Our templates should be easy to
read. We consistently indent
correctly using spaces instead of
tabs, type lines no longer than
80 characters, and extract complex
logic to helpers and presenters.
Tuesday, March 27, 12
Slide 111
Slide 111 text
RULE #5
Our templates should be easy to
find. We use standard naming
conventions and place them in
the directory for the related
resource (or the layout).
Tuesday, March 27, 12
Slide 112
Slide 112 text
RULE #6
Our markup should be easy for the
entire team to modify. We prefer
rendering partials over generating
markup from Ruby code.
Tuesday, March 27, 12
Slide 113
Slide 113 text
RULE #7
Our technology choices should help,
not hinder, the team. We use the
templating language and tools
that work best for all of us.
Tuesday, March 27, 12
Slide 114
Slide 114 text
RULE #8
Our designs for the Web should
work on a variety of devices and
browsers. We build for the simplest
interactions first and support
progressive enhancement.
Tuesday, March 27, 12
Slide 115
Slide 115 text
RULE #9
Our designs for email must work
for a wide range of providers. We
use HTML tables and images as
necessary and always provide a
plain-text alternative.
Tuesday, March 27, 12
Slide 116
Slide 116 text
RULE #10
Our application should perform as
well as it needs to, when it needs to.
We implement the most elegant
approach first, then we optimize
when necessary.
Tuesday, March 27, 12
Slide 117
Slide 117 text
Tuesday, March 27, 12
Slide 118
Slide 118 text
GET THEM ALL!
http://www.therailsview.com/rules.pdf
Tuesday, March 27, 12
Slide 119
Slide 119 text
UNCLUTTER
YOUR CODE
IT WILL TAKE MORE THAN ONE ITERATION
Tuesday, March 27, 12
Slide 120
Slide 120 text
SETUP & STANDARDIZE
Tuesday, March 27, 12
Slide 121
Slide 121 text
ORGANIZE & MAINTAIN
Tuesday, March 27, 12
Slide 122
Slide 122 text
A GOOD FILING SYSTEM
Tuesday, March 27, 12
Slide 123
Slide 123 text
CLEAN IT AS YOU SEE IT
Tuesday, March 27, 12
Slide 124
Slide 124 text
STOP PROCRASTINATING
Tuesday, March 27, 12
Slide 125
Slide 125 text
KEEP IT ON A SCHEDULE
Tuesday, March 27, 12
Slide 126
Slide 126 text
RubyNation_Athayde12
Tuesday, March 27, 12
Slide 127
Slide 127 text
Q&A
PLEASE, KEEP CALM AND CARRY ON
Tuesday, March 27, 12
Slide 128
Slide 128 text
*
THANKYou
[email protected]
EMAIL
@therailsview
TWITTER
www.therailsview.com
WEB
RubyNation_Athayde12
BOOK CODE:
Tuesday, March 27, 12