Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Rails View: The Junk Drawer Grows Up

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.

John Athayde

March 26, 2012
Tweet

More Decks by John Athayde

Other Decks in Programming

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. “HTML5” and related technologies GRAPHICS, 3D & EFFECTS CONNECTIVITY CSS3

    STYLING DEVICE ACCESS MUTLIMEDA OFFLINE STORAGE PERFORMANCE/ INTEGRATION SEMANTICS Tuesday, March 27, 12
  4. Other Friends .--. / \ ## a a ( '._)

    |'-- | _.\___/_ ___pjax___ ."\> \Y/|<'. '._.-' / \ \_\/ / '-' / | --'\_/|/ | _/ |___.-' | |`'` | | | | / './ /__./` | | \ | | \ | | ; | | / | | jgs |___\_.\_ `-"--'---' Tuesday, March 27, 12
  5. <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
  6. 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
  7. <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
  8. <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
  9. START SMALL Cover the basics all the time. WAI Level

    1 Checklist: www.w3.org/TR/WCAG10/full-checklist.html Tuesday, March 27, 12
  10. #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
  11. #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
  12. (don’t use this) unless you know what you’re doing ^

    STATEMENT REVISED Tuesday, March 27, 12
  13. %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
  14. 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
  15. 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
  16. // 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
  17. // 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
  18. 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
  19. <!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
  20. .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
  21. RULE #1 Our markup should have meaning. We write templates

    using semantic HTML. Tuesday, March 27, 12
  22. 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
  23. RULE #3 Our templates should be free of client-side code.

    We unobtrusively attach behavior from our JavaScript files Tuesday, March 27, 12
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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