The Rails View: The Junk Drawer Grows Up

RubyNation 2012 Presentation: Rails 3.1 introduced us to the asset pipeline. Learn the power of SCSS and how to clean up your views with the proper use of helpers, semantic markup, presenters, and just good old fashioned ERB and HTML. We'll touch on a broad variety of topics and not attack too many sacred cows.

Transcript

1. *THE RAILS VIEW: THE JUNK DRAWER GROWS UP JOHN ATHAYDE, LivingSocial RUBY NATION 23 MAR 2012 Tuesday, March 27, 12
2. —OR— Dear Lord, what have I uncovered? MY WHAT A WONDERFUL SMELL YOU’VE DISCOVERED! Tuesday, March 27, 12
3. http://www.flickr.com/photos/marirn/6131270109/ Tuesday, March 27, 12
4. Tuesday, March 27, 12
5. Background THE DUDE ABIDES Tuesday, March 27, 12
6. http://www.flickr.com/photos/michael-seljos/2073146716/ Tuesday, March 27, 12
7. METICULOUS DESIGN WEB TALENT 3D VISUAL FX FILM Tuesday, March 27, 12
8. Tuesday, March 27, 12
9. Tuesday, March 27, 12
10. Tuesday, March 27, 12
11. Tuesday, March 27, 12
12. Tuesday, March 27, 12
13. http://www.flickr.com/photos/marirn/6131270109/ Tuesday, March 27, 12
14. http://www.flickr.com/photos/marirn/6131270109/ Tuesday, March 27, 12
15. Tuesday, March 27, 12
16. *1. WHERE WE ARE THE STATE OF THE JUNK DRAWER Tuesday, March 27, 12
17. “HTML5” and related technologies GRAPHICS, 3D & EFFECTS CONNECTIVITY CSS3 STYLING DEVICE ACCESS MUTLIMEDA OFFLINE STORAGE PERFORMANCE/ INTEGRATION SEMANTICS Tuesday, March 27, 12
18. Other Friends .--. / \ ## a a ( '._) |'-- | _.\___/_ ___pjax___ ."\> \Y/|<'. '._.-' / \ \_\/ / '-' / | --'\_/|/ | _/ |___.-' | |`'` | | | | / './ /__./` | | \ | | \ | | ; | | / | | jgs |___\_.\_ `-"--'---' Tuesday, March 27, 12
19. http://www.flickr.com/photos/marirn/6131270109/ Tuesday, March 27, 12
20. http://www.flickr.com/photos/marirn/6131270109/ Tuesday, March 27, 12
21. http://www.unclutterer.com Erin Rooney Doland Tuesday, March 27, 12
22. http://www.unclutterer.com Tuesday, March 27, 12
23. http://www.unclutterer.com Tuesday, March 27, 12
24. http://www.flickr.com/photos/marirn/6131270109/ Tuesday, March 27, 12
25. THE PROBLEM THERE’S ONLY ONE? Tuesday, March 27, 12
26. *2. VIEW ARCHAEOLOGY FINDING THE GEMS IN THE JUNK Tuesday, March 27, 12
27. THE ASSET PIPELINE (SAY IT LIKE DON LAFONTAINE WITH REVERB) Tuesday, March 27, 12
28. Tuesday, March 27, 12
29. LAZY GENERATION SCAFFOLD WHAT? Tuesday, March 27, 12
30. bash$ rails g scaffold fightingwords index show kickcoder OH NO, NOT AGAIN Tuesday, March 27, 12
31. http://www.flickr.com/photos/97629199@N00/4610544557/ Tuesday, March 27, 12
32. Tuesday, March 27, 12
33. Broken gets fixed; Crappy [code] lasts forever. Tuesday, March 27, 12
34. LEGACY CODE WE STARTED THIS IN RAILS 0.9 Tuesday, March 27, 12
35. <div class="b"> <div class="l"> <div class="r"> <div class="bl"> <div class="br"> <div class="tl"> <div class="tr box"> <%= content %> </div> </div> </div> </div> </div> </div> </div> ROUNDED CORNERS http://frst.in/~lX Vintage. Tuesday, March 27, 12
36. ROUNDED CORNERS <div class=”box-to-be-rounded”> <%= content %> </div> .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
37. if elsif elsif elsif end Tuesday, March 27, 12
38. WHERE IS THAT PARTIAL?!? Tuesday, March 27, 12
39. Tuesday, March 27, 12
40. render @client.projects Tuesday, March 27, 12
41. Clean Code Tuesday, March 27, 12
42. READABILTY YES. YOU WANT THIS. BADLY. Tuesday, March 27, 12
43. Writing HTML Tuesday, March 27, 12
44. <td> <%= link_to client.name, client_path, :class => “client login”, :target => “_blank” %> </td> Tuesday, March 27, 12
45. Tuesday, March 27, 12
46. HIERARCHY WHERE IT’S AT. Tuesday, March 27, 12
47. <div class="headline">This is a page headline.</div> <div class="subhead">This is a section head</div> <div class="body">This is body text and it goes on for miles and miles. I like cheese.</div> <div class="list">This is going to be a list of items:<br /> - Item 1<br /> - Item 2<br /> - Item 3<br /> </div> NO HIERARCHY Not semantic, everything is the same. Tuesday, March 27, 12
48. NO HIERARCHY Not semantic, everything is the same. Tuesday, March 27, 12
49. <h1>This is a page headline.</h1> <h2>This is a section head</h2> <p>This is body text and it goes on for miles and miles. I like cheese.</p> <p>This is going to be a list of items:</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> SEMANTIC HTML Tags used for meaning. Tuesday, March 27, 12
50. SEMANTIC HTML Tags used for meaning. Tuesday, March 27, 12
51. VALIDATE! Valid code makes everyone happy. ONLINE: validator.w3.org Tuesday, March 27, 12
52. Tuesday, March 27, 12
53. §508 www.section508.gov Tuesday, March 27, 12
54. Google is a blind user. http://www.flickr.com/photos/scooter811/1475730494/ Tuesday, March 27, 12
55. START SMALL Cover the basics all the time. WAI Level 1 Checklist: www.w3.org/TR/WCAG10/full-checklist.html Tuesday, March 27, 12
56. (don’t use this) Tuesday, March 27, 12
57. #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio <div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"> <%= current_user.address %></div> </div> <div class="right column"> <div id="email"> <%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div> BAKE OFF <%= ERB %> Tuesday, March 27, 12
58. #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio <div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"> <%= current_user.address %></div> </div> <div class="right column"> <div id="email"> <%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div> <%= ERB %> BAKE OFF Tuesday, March 27, 12
59. Tuesday, March 27, 12
60. DIV Tuesday, March 27, 12
61. DIV DIV Tuesday, March 27, 12
62. DIV DIV DIV Tuesday, March 27, 12
63. DIV DIV DIV DIV Tuesday, March 27, 12
64. DIV DIV DIV DIV DI Tuesday, March 27, 12
65. DIV DIV DIV DIV DI Tuesday, March 27, 12
66. DIV DIV DIV DIV IV DI Tuesday, March 27, 12
67. DIV DIV DIV DIV IV DI Tuesday, March 27, 12
68. DIV DIV DIV DIV IV DI Tuesday, March 27, 12
69. DIV DIV DIV DIV IV DI DI Tuesday, March 27, 12
70. DIV DIV DIV DIV IV DI DI Tuesday, March 27, 12
71. DIV DIV DIV DIV IV DI (OMG.) DI Tuesday, March 27, 12
72. (don’t use this) unless you know what you’re doing ^ STATEMENT REVISED Tuesday, March 27, 12
73. %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 <section id="profile"> <div class="left column"> <p id="date"><%= print_date %></p> <p id="address"> <%= current_user.address %></p> </div> <div class="right column"> <p id="email"> <%= current_user.email %></p> <p id="bio"><%= current_user.bio %></p> </div> </section> HAVE YOUR CAKE AND... <%= ERB %> Tuesday, March 27, 12
74. 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
75. TABLES SUCK TELL ’EM RAY Tuesday, March 27, 12
76. EXCEPT FOR EMAIL http://www.flickr.com/photos/gregoryjordan/6118863684/ Tuesday, March 27, 12
77. Tuesday, March 27, 12
78. 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
79. SCSS/Sass Tuesday, March 27, 12
80. // 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
81. // 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
82. *3. ADVANCED DIGGING HOW FAR DOWN THE RABBIT HOLE DO WE GO? Tuesday, March 27, 12
83. VIEW LOGIC GONE WRONG IF ELSE WHAT? Tuesday, March 27, 12
84. Presenters Tuesday, March 27, 12
85. ESPECIALLY DECORATORS Tuesday, March 27, 12
86. Tuesday, March 27, 12
87. https://github.com/jcasimir/draper Tuesday, March 27, 12
88. gem ‘draper’ $rails g draper:install $rails g draper:decorator Client Tuesday, March 27, 12
89. Tuesday, March 27, 12
90. Tuesday, March 27, 12
91. Tuesday, March 27, 12
92. Tuesday, March 27, 12
93. def full_name(person) “<p class=”name”>#{@person.first_name} #{@person.last_name}</p>” end Tuesday, March 27, 12
94. def full_name(person) “<p class=”name”>#{@person.first_name} #{@person.last_name}</p>” end Tuesday, March 27, 12
95. def full_name(person) “<p class=”name”>#{@person.first_name} #{@person.last_name}</p>” end def full_name “#{@person.first_name} #{@person.last_name}” end Tuesday, March 27, 12
96. 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
97. SO MANY DEVICES (and browsers) 320px != 2650px Tuesday, March 27, 12
98. <!DOCTYPE html> <!--[if lt IE 7]> <html class="ie ie6 lang="en"> <![endif]--> <!--[if IE 7]> <html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8]> <html class="ie ie8" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--> .profile { color: #ccc; margin: 20px; padding: 5px 10px; width: 300px; } .ie6 .profile { margin: 18px; } Tuesday, March 27, 12
99. Tuesday, March 27, 12
100. Media Queries Tuesday, March 27, 12
101. .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
102. http://www.mediaqueri.es Tuesday, March 27, 12
103. http://www.abookapart.com Tuesday, March 27, 12
104. http://www.abookapart.com Tuesday, March 27, 12
105. *4. WHAT WE LEARNED RULES AND ACTIONS TO TAKE Tuesday, March 27, 12
106. THE RAILS VIEW RULES LEARN THEM LIVE THEM LOVE THEM Tuesday, March 27, 12
107. RULE #1 Our markup should have meaning. We write templates using semantic HTML. Tuesday, March 27, 12
108. 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
109. RULE #3 Our templates should be free of client-side code. We unobtrusively attach behavior from our JavaScript files Tuesday, March 27, 12
110. 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
111. 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
112. 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
113. 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
114. 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
115. 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
116. 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
117. Tuesday, March 27, 12
118. GET THEM ALL! http://www.therailsview.com/rules.pdf Tuesday, March 27, 12
119. UNCLUTTER YOUR CODE IT WILL TAKE MORE THAN ONE ITERATION Tuesday, March 27, 12
120. SETUP & STANDARDIZE Tuesday, March 27, 12
121. ORGANIZE & MAINTAIN Tuesday, March 27, 12
122. A GOOD FILING SYSTEM Tuesday, March 27, 12
123. CLEAN IT AS YOU SEE IT Tuesday, March 27, 12
124. STOP PROCRASTINATING Tuesday, March 27, 12
125. KEEP IT ON A SCHEDULE Tuesday, March 27, 12
126. RubyNation_Athayde12 Tuesday, March 27, 12
127. Q&A PLEASE, KEEP CALM AND CARRY ON Tuesday, March 27, 12
128. * THANKYou john@therailsview.com EMAIL @therailsview TWITTER www.therailsview.com WEB RubyNation_Athayde12 BOOK CODE: Tuesday, March 27, 12