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

The Rails View: The Junk Drawer Grows Up (Trian...

The Rails View: The Junk Drawer Grows Up (Triangle.rb version)

John Athayde

January 08, 2013
Tweet

More Decks by John Athayde

Other Decks in Programming

Transcript

  1. THE RAILS VIEW: THE JUNK DRAWER GROWS UP JOHN ATHAYDE,

    LivingSocial TRIANGLE.RB 08 JAN 2013 Tuesday, January 8, 13
  2. <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, January 8, 13
  3. ROUNDED CORNERS <div class=”box-to-be-rounded”> <%= content %> </div> .box-to-be-rounded {

    border: 1px solid #ccc; -webkit-border-radius: 5px; /* Safari, Chrome */ -moz-border-radius: 5px; /* Firefox */ border-radius: 5px; /* IE9, Opera 10.5, else */ } CSS3 To The Rescue! Tuesday, January 8, 13
  4. if elsif elsif elsif elsif elsif elsif elsif elsif elsif

    elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif elsif else end Tuesday, January 8, 13
  5. RULE # Our markup should have meaning. We write templates

    using semantic HTML. 1 Tuesday, January 8, 13
  6. <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, January 8, 13
  7. <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, January 8, 13
  8. Start <article> <aside> <figure> <div> <section> Appropriate element e.g. in

    a feed reader Sidebar, comments section, pullquote, glossary, advertising, footnote etc that’s tangentially related to the page or content… → html5doctor.com/aside One or more images, graphics, code samples etc, plus optional <figcaption>… → html5doctor.com/figure A section of the page, or chapter of an <article>, with a heading… → html5doctor.com/section Probably <p>, but possibly <address>, <blockquote>, <pre>… → html5doctor.com/semantics News article, weblog or forum post, comment on an article, sidebar widget etc, with a heading… → html5doctor.com/article Flow content with no additional semantics, e.g. for CSS hooks… → html5doctor.com/div A block of flow content (not inline phrasing content) By @riddle & @boblet www.html5doctor.com <nav> Site or in-page navigation (anything you’d use a “skip to nav” link for) → html5doctor.com/nav HTML5 Element Flowchart Sectioning content elements and friends 2011-07-22 v1.5 For more information: www.html5doctor.com/semantics Does it make sense on its own? Is it required to understand the current content? Could you move it to an appendix? Is it logical to add a heading? Does it have any semantics? Is it a major navigation block? * * * * * Sectioning content element These four elements (and their headings) are used by HTML5’s outlining algorithm to make the document’s outline → html5doctor.com/outline Yes Yes Yes Yes No Yes No Tuesday, January 8, 13
  9. START SMALL Cover the basics all the time. WAI Level

    1 Checklist: www.w3.org/TR/WCAG10/full-checklist.html Tuesday, January 8, 13
  10. Our style sheets should handle presentation. We don’t use markup

    to style or use images when CSS will do. RULE #2 Tuesday, January 8, 13
  11. header { nav { color: #fff; ul { list-style-type: none;

    margin: 0; padding: 0; li { list-style-type: none; margin: 0; padding: 0; a { padding: 2px 10px; &.active { background-color: white; } &:hover { background-color: red; } } } } } } Tuesday, January 8, 13
  12. header { } header nav { color: #fff; } header

    nav ul { list-style-type: none; margin: 0; padding: 0; } header nav ul li { list-style-type: none; margin: 0; padding: 0; } header nav ul li a { padding: 2px 10px; } header nav ul li a.active { background-color: white; } header nav ul li a:hover { background-color: red; } Tuesday, January 8, 13
  13. $type: bar; p { @if $type == restaurant { color:

    blue; } @else if $type == bar { color: red; } @else if $type == qsr { color: green; } @else { color: black; } } Tuesday, January 8, 13
  14. p { width: 2em * 3em; } p { width:

    6em; } Tuesday, January 8, 13
  15. p { color: #109479 + #489579; } p { color:

    #58fff2; } Tuesday, January 8, 13
  16. li, div, tr { @each $vertical in local, adventures, amazon,

    at-home, citywide, deals, escapes, families, gourmet, nationwide, toad { &.#{$vertical}, &.#{$vertical} td { @include verticalLoop($vertical); } // &.#{$vertical} } // @each $vertical in... } // li, div, tr li.local, li.local td {...} div.local, div.local td {...} tr.local, tr.local td {...} li.adventures, li.adventures td {...} div.adventures, div.adventures td {...} tr.adventures, tr.adventures td {...} li.amazon, li.amazon td {...} div.amazon, div.amazon td {...} tr.amazon, td.amazon td {...} li.at-home, li.at-home td {...} div.at-home, div.at-home td {...} tr.at-home, tr.at-home td {...} etc., etc., etc. Tuesday, January 8, 13
  17. li, div { @each $tool in launchpad, misson-control, monkey, moriarty,

    pipeline, q, photomanager, rearview, samplr, stratego, threesixtyfive, wilde { &.#{$tool} { background-image: url("#{$image-path-content}/icons/tools/#{$tool}.svg"); } // &.#{$tool} } // @each $tool in ... } // li, div APP ICONS Used globally and on login pages Tuesday, January 8, 13
  18. @mixin verticalLoop($vertical) { $vertical-image-path: "#{$image-path-content}/icons/verticals/"; @each $color in color-black, color-white,

    color-honeycomb, color-clementine, color-slushie, color-frosting, color-aloe, color-berry, color-wasabi, color-grape, color-spice, color-wine, color-whale, color-honeycombLight, color-clementineLight, color-slushieLight, color-frostingLight, color-teaLight, color-berryLight, color-grapeLight, color-grayLightest, color-grayLighter, color-grayLight, color-gray, color-grayDark, color-grayDarker, color-grayDarkest { &.vertical-icon { background-image: url("#{$vertical-image-path}/#{$vertical}-color-black.svg") ! important; &.vertical-icon-#{$color} { background-image: url("#{$vertical-image-path}/#{$vertical}-#{$color}.svg") ! important; } // &.concept-icon-#{$color} } // &.concept-icon } // @each $color in ... } li, div, tr { @each $vertical in local, adventures, amazon, at-home, citywide, deals, escapes, families, gourmet, nationwide, toad { &.#{$vertical}, &.#{$vertical} td { @include verticalLoop($vertical); } // &.#{$vertical} } // @each $vertical in... } // li, div, tr Tuesday, January 8, 13
  19. // For image replacement .ir { background-color: transparent; border: 0;

    display: inline-block; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; &:before { content: ""; display: block; width: 0; height: 100%; } } .my-class { @extends .ir; border: 1px solid red; } EXTEND includes another class in your place Tuesday, January 8, 13
  20. #header a%error { color: red; font-weight: bold; font-size: 2em; }

    .notice { @extend %error; } #header a.notice { color: red; font-weight: bold; font-size: 2em; } SILENT EXTEND won’t print the original to your css Tuesday, January 8, 13
  21. @mixin button ($style: simple, $base-color: #4294f0) { @if type-of($style) ==

    color { $base-color: $style; $style: simple; } @if $style == simple { @include simple($base-color); } @else if $style == shiny { @include shiny($base-color); } @else if $style == pill { @include pill($base-color); } } Tuesday, January 8, 13
  22. @mixin simple ($base-color) { $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);

    $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); $color: hsl(0, 0, 100%); $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); @if lightness($base-color) > 70% { $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } border: 1px solid $border; border-radius: 3px; box-shadow: inset 0 1px 0 0 $inset-shadow; color: $color; display: inline; font-size: 11px; font-weight: bold; @include linear-gradient ($base-color, $stop-gradient); padding: 6px 18px 7px; text-shadow: 0 1px 0 $text-shadow; -webkit-background-clip: padding-box; &:hover { $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); box-shadow: inset 0 1px 0 0 $inset-shadow-hover; cursor: pointer; @include linear-gradient ($base-color-hover, $stop-gradient-hover); } &:active { $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); border: 1px solid $border-active; box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 $grayLightest; } } Tuesday, January 8, 13
  23. @mixin buttonBackground($startColor, $endColor) { // gradientBar will set the background

    to a pleasing blend of these, to support IE<=9 @include gradientBar($startColor, $endColor); // 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); } } // 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); } ~ ul.dropdown-menu li a:hover { // gradientBar will set the background to a pleasing blend of these, to support IE<=9 @include gradientBar($startColor, $endColor); // 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); } } // 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, January 8, 13
  24. @mixin gradient-vertical($startColor: #555, $endColor: #333) { background-color: $endColor; background-image: -khtml-gradient(linear,

    left top, left bottom, from($startColor), to($endColor)); // Konqueror background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color- stop(100%, $endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 //background-image: linear-gradient(top left, $startColor, $endColor); // The standard background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down } Tuesday, January 8, 13
  25. // Width of Deal Span - How Many Does Does

    it Span $dayCount: 1; @while $dayCount < 60 { &.deal-span-#{$dayCount} { background-size: (($daySize * $dayCount) - 2px) 80px; // Subtract 2 on each side for Border Spacing width: ($dayCount*$daySize) - 8px; } $dayCount: $dayCount +1; } // @while Tuesday, January 8, 13
  26. @mixin calendar-deal-visual($color) { $light-mix: mix($color , $white, 30%); $dark-mix: mix($color

    , $white, 70%); background-color: $light-mix; border-color: $dark-mix; &.is-published-in-pipeline { @include linear-gradient(bottom, $dark-mix, $light-mix); border-style: solid; opacity: 1 !important; } &:hover { border: 2px solid $color !important; opacity: 1; } } // @mixin calendar-deal-visual($color) Tuesday, January 8, 13
  27. &.merchants-matching { font-size: 10px; left: $concept-placement; padding: 0; top: 35px;

    &:after { border-right: 1px solid $grayLight; content: "match"; line-height: 11px; padding: 0 5px; } } &.requests { font-size: 10px; left: $concept-placement + 65px; padding: 0; top: 35px; &:after { border-right: 1px solid $grayLight; content: "request"; line-height: 11px; padding: 0 5px; } } &.being-worked { font-size: 10px; left: $concept-placement + 125px; padding: 0; top: 35px; &:after { content: "being worked"; line-height: 11px; padding: 0 5px; } } Tuesday, January 8, 13
  28. $category-col-width: 56px; $concept-info-col-width: 220px; $last-run-col-width: 90px; $tier-col-width: 50px; $aging-col-width: 60px;

    $run-col-width: 105px; $hold-col-width: 95px; $rating-col-width: 90px; $deal-count-col-width: 110px; $target-col-width: 90px; $vertical-col-width: 135px; $functions-col-width: 199px; $cell-margin: 5px !default; $concept-placement: $category-col-width + 10px; $last-run-date-placement: $concept-placement + $concept-info-col-width + $cell-margin; $tier-placement: $last-run-date-placement + $last-run-col-width + $cell-margin; $aging-placement: $tier-placement + $tier-col-width + $cell-margin; $run-placement: $aging-placement + $aging-col-width + $cell-margin; $hold-placement: $run-placement + $run-col-width + $cell-margin; $rating-placement: $hold-placement + $hold-col-width + $cell-margin; $deal-count-placement: $rating-placement + $rating-col-width + $cell-margin; $target-placement: $deal-count-placement + $deal-count-col-width + $cell-margin; $vertical-placement: $target-placement + $target-col-width + $cell-margin; $functions-placement: $vertical-placement + $vertical-col-width + $cell-margin; @import "mp_table"; Tuesday, January 8, 13
  29. table.table { background: none; position: relative; margin-bottom: 10px; width: 100%;

    thead { border-bottom: 5px solid $white; th { @include inline-block; border-radius: 0; font-size: 10px; margin-right: 5px; text-align: left; &.category, &.cat { text-align: center; width: $category-col-width; } &.concept-info { width: $concept-info-col-width; } &.last-run { width: $last-run-col-width; } &.tier { width: $tier-col-width; } &.aging { width: $aging-col-width; } &.run { width: $run-col-width; } &.hold { width: $hold-col-width; } &.status, &.rating { Tuesday, January 8, 13
  30. @-moz-document url-prefix() { $category-col-width: 56px; $concept-info-col-width: 220px; $last-run-col-width: 90px; $tier-col-width:

    50px; $aging-col-width: 60px; $run-col-width: 105px; $hold-col-width: 95px; $rating-col-width: 90px; $deal-count-col-width: 110px; $target-col-width: 90px; $vertical-col-width: 135px; $functions-col-width: 200px; $cell-margin: 10px; $concept-placement: $category-col-width + 10px; $last-run-date-placement: $concept-placement + $concept-info-col-width + $cell-margin; $tier-placement: $last-run-date-placement + $last-run-col-width + $cell-margin; $aging-placement: $tier-placement + $tier-col-width + $cell-margin; $run-placement: $aging-placement + $aging-col-width + $cell-margin; $hold-placement: $run-placement + $run-col-width + $cell-margin; $rating-placement: $hold-placement + $hold-col-width + $cell-margin; $deal-count-placement: $rating-placement + $rating-col-width + $cell-margin; $target-placement: $deal-count-placement + $deal-count-col-width + $cell-margin; $vertical-placement: $target-placement + $target-col-width + $cell-margin; $functions-placement: $vertical-placement + $vertical-col-width + $cell-margin; body div#main section#content { @import "mp_table"; } th.functions { width: 150px; } } Tuesday, January 8, 13
  31. @function!strip'units($number)!{ !!$unit:!unit($number); !!$one:!1px; !!@if!$unit!==!em!{ !!!!$one:!1em; !!}!@else!if!$unit!==!px!{ !!!!$one:!1px; !!} !!@return!$number/$one; }

    @function!to'px($em){ !!@return!strip'units($em)!*!$base'size; } @function!to'em($px,$context:1em){ !!@if!unit($context)!==!em!{ !!!!@return!$px!/!to'px($context)!*!1em; !!}!@else!if!unit($context)!==!px!{ !!!!@return!$px!/!$context!*!1em; !!} } Tuesday, January 8, 13
  32. @import!"../functions"; @import!"../../lib/matchers"; $base'size:!10px; strip'units!{ !!remove'from'em!{ !!!!expect:!to8equal(strip8units(1em),!1); !!} } to'px!{ !!basic'conversion!{

    !!!!expect:!to8equal(to8px(1em),!10px); !!} } to'em!{ !!basic'conversion!{ !!!!expect:!to8equal(to8em(10px),!1em); !!} !!convert'with'em'context!{ !!!!expect:!to8equal(to8em(10px,!2em),!.5em); !!} !!convert'with'em'context'messy!{ !!!!expect:!to8almost8equal(to8em(14px,!3em),!.46667em); !!} !!convert'with'px'context!{ !!!!expect:!to8equal(to8em(10px,!20px),!.5em); !!} } Tuesday, January 8, 13
  33. Our templates should be free of client-side code. We unobtrusively

    attach behavior from our JavaScript files RULE #3 Tuesday, January 8, 13
  34. READ rails.js WE’D SAY DO IT NOW, BUT WE’RE ON

    A SCHEDULE Tuesday, January 8, 13
  35. 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. RULE #4 Tuesday, January 8, 13
  36. <td> <%= link_to client.name, client_path, :class => “client login”, :target

    => “_blank” %> </td> BETTER. Tuesday, January 8, 13
  37. INLINE PARTIAL HELPER HELPER CALLING PARTIAL PRESENTER/ DECORATOR TOO MUCH

    MARKUP TOO MUCH LOGIC IT GENERATES TOO MUCH MARKUP IT’S TOO HARD TO RENDER IT’S TOO MANY MOVING PARTS Tuesday, January 8, 13
  38. DEFINE. class PersonPresenter def initialize(person) @person = person end def

    signup_info info = “#{@person.signup_source} signup” if @person.referrer info << “, referred by #{@person.referrer.name}” end info end # ... end Tuesday, January 8, 13
  39. INSTANTIATE. def person_presenter @person_presenter ||= PersonPresenter.new(@person) end def person_presenter(person =

    @person) PersonPresenter.new(person) end def person_presenter(person = @person, &block) PersonPresenter.new(person).tap do |presenter| yield presenter if block_given? end end Tuesday, January 8, 13
  40. ENABLE. class PersonPresenter def initialize(view, person) @v = view @person

    = person end # ... end def person_presenter(person = @person, &block) PersonPresenter.new(self, person) end Tuesday, January 8, 13
  41. GENERATE. class PersonPresenter # ... def link @v.link_to @person.full_name, @person

    end def to_s @v.render @person end end <%= person_presenter.link %> <%= person_presenter %> Tuesday, January 8, 13
  42. AGGREGATE. class RankingPresenter def initialize(view, *people) @v = view @people

    = people end def with_grades(since = 1.month.ago, &block) # calculate scores, yield, generate, etc end end Tuesday, January 8, 13
  43. <p> <% if location.present? %> Located in <%= @client.location %>

    <% else %> <span class="none">Location Unknown</span> <% end %> </p> Tuesday, January 8, 13
  44. 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). RULE #5 Tuesday, January 8, 13
  45. Our markup should be easy for the entire team to

    modify. We prefer rendering partials over generating markup from Ruby code. RULE #6 Tuesday, January 8, 13
  46. Our technology choices should help, not hinder, the team. We

    use the templating language and tools that work best for all of us. RULE #7 Tuesday, January 8, 13
  47. #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, January 8, 13
  48. #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, January 8, 13
  49. %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, January 8, 13
  50. SOLUTION: Maybe the templating language isn’t the problem. Maybe you

    are. Refactor your views. Tuesday, January 8, 13
  51. 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. RULE #8 Tuesday, January 8, 13
  52. <!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, January 8, 13
  53. .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, January 8, 13
  54. 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. RULE #9 Tuesday, January 8, 13
  55. SOLUTION: Tables are not for layout unless it’s tabular data

    or unless you’re doing HTML emails, and then all sins are forgiven. Tuesday, January 8, 13
  56. 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. RULE #10 Tuesday, January 8, 13
  57. UNUSED SELECTORS Gem: Deadweight # lib/tasks/deadweight.rake require 'deadweight' Deadweight::RakeTask.new do

    |dw| dw.mechanize = true dw.root = 'http://staging.example.com' dw.stylesheets = %w( /stylesheets/style.css ) dw.pages = %w( / /page/1 /about ) dw.pages << proc { fetch('/login') form = agent.page.forms.first form.username = 'username' form.password = 'password' agent.submit(form) fetch('/secret-page') } dw.ignore_selectors = /hover|lightbox|superimposed_kittens/ end www.github.com/aanand/deadweight Tuesday, January 8, 13
  58. THANK You @therailsview TWITTER www.therailsview.com WEB AthaydeWilliamsRailsView BOOK CODE FOR

    25% OFF AT www.pragprog.com/titles/warv: @boboroshi [email protected] EMAIL Tuesday, January 8, 13