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

Refactoring Web Interfaces

jina
May 29, 2014

Refactoring Web Interfaces

Talk given at DevConFu, ConvergeSE, CodeMotion Roma, SassConf, Future of Web Design, BlendConf, Distill, Nordic Ruby, CodeMotion Berlin, HTML5 Dev Conf, etc.

jina

May 29, 2014
Tweet

More Decks by jina

Other Decks in Technology

Transcript

  1. Refactoring
    Web Interfaces
    @JINA // DEVCONFU // JŪRMALA // 2014

    View Slide

  2. @jina

    View Slide

  3. Senior Product Designer

    View Slide

  4. — PAUL SAFFO
    “It used to be that designers made an object
    and walked away. Today the emphasis must
    shi to designing the entire life cycle.”

    View Slide

  5. What is
    refactoring?

    View Slide

  6. Refactoring:
    GETTING RID OF CODE SMELLS?

    View Slide

  7. — SOME LIAR
    “I always code perfectly
    the rst time.”

    View Slide

  8. lack of clarity
    䡿 confusion

    View Slide

  9. no maintainability
    䡿 inef ciency

    View Slide

  10. duplication
    䡿 bloat

    View Slide

  11. Refactoring:
    BUSY WORK?

    View Slide

  12. Refactoring:
    CHANGE THE STRUCTURE OF EXISTING CODE WITHOUT
    CHANGING THE BEHAVIOR OF THAT CODE

    View Slide

  13. My rst large
    major CSS refactor:

    View Slide

  14. 2007–2008 // Apple Online Store

    View Slide

  15. old styles // legacy CSS
    new styles // basic font sizes, colors, & fonts
    typography // basic font sizes, colors, & fonts
    layout // grid, borders, backgrounds
    overrides // temporary overrides for old styles
    local styles // localization
    context styles // styles for stores for b2b, education, etc.

    View Slide

  16. Too bad I wasn’t
    using Sass then…

    View Slide

  17. View Slide

  18. 2010–2011 // AppCloud

    View Slide

  19. Nesting
    USE (CAREFULLY) TO AVOID REPETITION

    View Slide

  20. If you’re nesting more than
    3 levels deep, you’re probably
    doing something wrong.

    View Slide

  21. Variables
    STORE COMMON ATTRIBUTES FOR MAINTAINABILITY

    View Slide

  22. Mixins
    STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES

    View Slide

  23. @mixin mod($txt: #ccc) {
    background: #111;
    color: $txt;
    }
    body { @include mod; }
    h1 { @include mod(#888); }
    body {
    background: #111;
    color: #ccc;
    }
    h1 {
    background: #111;
    color: #888888;
    }
    SCSS Output

    View Slide

  24. @extend
    CHAIN SELECTORS TOGETHER

    View Slide

  25. .message {
    padding: 1em;
    a { color: #369; }
    }
    .error {
    @extend .message;
    color: #eee;
    }
    .message, .error {
    padding: 1em;
    }
    .message a, .error a {
    color: #369;
    }
    .error {
    color: #eee;
    }
    SCSS Output

    View Slide

  26. Placeholder
    Selectors
    CREATE SILENT CLASSES FOR @EXTEND

    View Slide

  27. %grid-1 { width: 240px; }
    %grid-2 { width: 480px; }
    .content {
    @extend %grid-1;
    color: #369;
    }
    .main {
    @extend %grid-1;
    background: #eee;
    }
    .content, .main {
    width: 240px;
    }
    .content {
    color: #369;
    }
    .main {
    background: #eee;
    }
    SCSS Output

    View Slide

  28. ZOMG!

    View Slide

  29. Refactoring, Sass,
    & Style Guides are
    awesome together!

    View Slide

  30. Engine Yard App Cloud Style Guide, Early 2011

    View Slide

  31. blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides

    View Slide

  32. 2012–2013 // Web App & Web Site

    View Slide

  33. Make Refactoring
    a regular part of
    your work ow.
    01 //

    View Slide

  34. Don’t try to refactor
    everything at once.
    YOU’LL LIKELY GIVE UP.

    View Slide

  35. Refactor
    going forward.

    View Slide

  36. Making
    something new?
    Document it.

    View Slide

  37. Revising something?
    Refactor it.
    Then document it.

    View Slide

  38. If code style preferences
    are agreed upon,
    document it.

    View Slide

  39. Do you have a
    CSS Gatekeeper?

    View Slide

  40. Document
    your ideal CSS
    Architecture.
    02 //

    View Slide

  41. smacss.com

    View Slide

  42. Do Web App “Deathstar”

    View Slide

  43. Do Website “Kenobi”

    View Slide

  44. deathstar.sass kenobi.sass

    View Slide

  45. deathstar.sass kenobi.sass

    View Slide

  46. deathstar.sass kenobi.sass

    View Slide

  47. deathstar.sass kenobi.sass

    View Slide

  48. deathstar.sass kenobi.sass

    View Slide

  49. vendor // third party libraries

    View Slide

  50. @import compass
    @import susy
    @import breakpoint
    vendor/_shared.sass

    View Slide

  51. compass-style.org

    View Slide

  52. susy.oddbird.net

    View Slide

  53. breakpoint-sass.com

    View Slide

  54. // ------------------------
    // VENDOR
    @import vendor/shared
    @import bootstrap/variables
    @import bootstrap/mixins
    // ------------------------
    // VENDOR
    @import vendor/shared
    deathstar.sass kenobi.sass

    View Slide

  55. vendor
    dependencies // Global variables, mixins, & functions

    View Slide

  56. @import color
    @import type
    @import layout
    dependencies/_shared.sass

    View Slide

  57. // ---------------------------------------
    // DEPENDENCIES
    @import dependencies/shared
    @import dependencies/deathstar/themes
    @import dependencies/deathstar/animations
    // ---------------------------------------
    // DEPENDENCIES
    @import dependencies/shared
    @import dependencies/kenobi/themes
    deathstar.sass kenobi.sass

    View Slide

  58. vendor
    dependencies
    base // Plain old semantic HTML

    View Slide

  59. @include border-box-sizing
    @import vendor/normalize
    @import type
    @import lists
    @import tables
    base/_shared.sass

    View Slide

  60. // -----------------------
    // BASE
    @import base/shared
    // -----------------------
    // BASE
    @import base/shared
    @import base/kenobi/fonts
    deathstar.sass kenobi.sass

    View Slide

  61. vendor
    dependencies
    base
    components // Modular components & states

    View Slide

  62. @import icons
    @import forms
    @import buttons
    @import toggles
    @import messages
    components/_shared.sass

    View Slide

  63. // --------------------------------
    // COMPONENTS
    @import components/shared
    @import components/deathstar/modals
    // --------------------------------
    // COMPONENTS
    @import components/shared
    deathstar.sass kenobi.sass

    View Slide

  64. vendor
    dependencies
    base
    components
    regions // Divided page regions

    View Slide

  65. // ------------------------------------
    // REGIONS
    @import regions/deathstar/banner
    @import regions/deathstar/navigation
    // ------------------------------------
    // REGIONS
    @import regions/kenobi/banner
    @import regions/kenobi/complementary
    @import regions/kenobi/contentinfo
    deathstar.sass kenobi.sass

    View Slide

  66. vendor
    dependencies
    base
    components
    regions
    helpers // Layout helpers

    View Slide

  67. @import layout-float
    @import layout-display-table
    @import visibility
    helpers/_shared.sass

    View Slide

  68. // --------------------------------
    // HELPERS
    @import helpers/shared
    @import helpers/deathstar/sprites
    // --------------------------------
    // HELPERS
    @import helpers/shared
    deathstar.sass kenobi.sass

    View Slide

  69. vendor
    dependencies
    base
    components
    regions
    helpers
    responsive // Adjustments to type & spacing

    View Slide

  70. // --------------------------------
    // RESPONSIVE
    @import responsive/deathstar/mobile
    @import responsive/deathstar/tablet
    @import responsive/deathstar/screen
    @import responsive/deathstar/retina
    @import responsive/print
    // --------------------------------
    // RESPONSIVE
    @import responsive/kenobi/mobile
    @import responsive/kenobi/tablet
    @import responsive/kenobi/screen
    @import responsive/kenobi/retina
    @import responsive/print
    deathstar.sass kenobi.sass

    View Slide

  71. _buttons.sass _screen.sass
    _forms.sass
    _modals.sass

    View Slide

  72. vendor
    dependencies
    base
    components
    regions
    helpers
    responsive
    tools // Visible grids & diagnostics

    View Slide

  73. @import show-grid
    @import diagnostics
    tools/_shared.sass

    View Slide

  74. <% if Rails.env.development? && Settings.show_grids %>
    @import show-grid
    @import diagnostics
    <% end %>
    tools/_shared.sass.erb

    View Slide

  75. vendor/
    dependencies/
    base/
    components/
    regions/
    helpers/
    responsive/
    tools/
    }PUT NEW CSS IN ITS PLACE
    MOVE OLD CSS AS YOU GET TO
    IT IN REVISIONS
    MOVE MORE WHEN YOU
    HAVE TIME TO WORK ON
    TECH DEBT

    View Slide

  76. Refactor when you’re adding something new.
    Refactor when you’re xing an issue.
    Refactor during issues come up in code reviews.

    View Slide

  77. Keep commits
    focused & organized.
    03 //

    View Slide

  78. Bigger commits
    䡿 lazy reviews

    View Slide

  79. If you see something you want to x that is
    not within the scope of the current commit,
    take note, and x it in a new commit.

    View Slide

  80. To debug, inspect at the
    inner-most element
    then work outward.

    View Slide

  81. Find in Project (or GREP)
    to determine if what you’re
    editing is used anywhere else.

    View Slide

  82. Check how your commit
    affects the style guide.

    View Slide

  83. Not in a style guide?
    Put it in one!

    View Slide

  84. Color
    MAINTAINABILITY WITH SASS

    View Slide

  85. Use your Sass Variables to
    generate a living color
    palette in your Style Guide.

    View Slide

  86. Create a simple
    color palette. Use
    Sass to do variations.

    View Slide

  87. $x: #369;
    $y: #fff;
    .a { color: lighten($x, 5%); }
    .b { color: darken($x, 5%); }
    .c { color: saturate($x, 5%); }
    .d { color: grayscale($x ); }
    .e { color: mix($x, $y); }
    Just a few things Sass can do to your colors.

    View Slide

  88. Make Variables for common
    pairings of color & Sass
    functions, and document it.

    View Slide

  89. $black: #000;
    $grey: #eee;
    $white: invert($black);
    $h-bg-color: $black;
    $h-text-color: $grey;
    $h-link-color: $white;
    _colors.scss _header.scss

    View Slide

  90. sassme.arc90.com

    View Slide

  91. Make Mixins for common
    pairings of backgrounds,
    text colors, & shadow colors.

    View Slide

  92. Typography:
    CREATE A SMART SYSTEM & START MOVING TOWARD IT.

    View Slide

  93. Choose a standard
    base unit.
    4 IS A GOOD BASE… IT MULTIPLIES INTO 8, 12, 16, ETC.

    View Slide

  94. Create Mixins for
    common type styles.
    SPACED OUT CAPS, BIG QUOTE STYLES…
    BUT DON’T HAVE TOO MANY. AND DOCUMENT THEM!

    View Slide

  95. Don’t try to refactor
    everything at once.
    YOU’LL LIKELY GIVE UP.

    View Slide

  96. Refactor
    going forward.

    View Slide

  97. — GUSTAVE FLAUBERT
    “Be regular and orderly in your
    life so that you may be violent
    and original in your work.”

    View Slide

  98. sfdc-styleguide.herokuapp.com

    View Slide

  99. @SalesforceUX

    View Slide

  100. dribbble.com/salesforce

    View Slide

  101. sass-lang.com

    View Slide

  102. @TeamSassDesign

    View Slide

  103. dribbble.com/TeamSassDesign

    View Slide

  104. themixinsf.com

    View Slide

  105. susy.oddbird.net

    View Slide

  106. T W I T T E R , D R I B B B L E , I N STAG RA M , & G I T H U B
    @jina

    View Slide