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.

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