Refactoring Web Interfaces

67bb0a8cd6c1993dba0bfe302852f729?s=47 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.

67bb0a8cd6c1993dba0bfe302852f729?s=128

jina

May 29, 2014
Tweet

Transcript

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

  2. @jina

  3. Senior Product Designer

  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.”
  5. What is refactoring?

  6. Refactoring: GETTING RID OF CODE SMELLS?

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

  8. lack of clarity 䡿 confusion

  9. no maintainability 䡿 inef ciency

  10. duplication 䡿 bloat

  11. Refactoring: BUSY WORK?

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

    BEHAVIOR OF THAT CODE
  13. My rst large major CSS refactor:

  14. 2007–2008 // Apple Online Store

  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.
  16. Too bad I wasn’t using Sass then…

  17. None
  18. 2010–2011 // AppCloud

  19. Nesting USE (CAREFULLY) TO AVOID REPETITION

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

    doing something wrong.
  21. Variables STORE COMMON ATTRIBUTES FOR MAINTAINABILITY

  22. Mixins STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES

  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
  24. @extend CHAIN SELECTORS TOGETHER

  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
  26. Placeholder Selectors CREATE SILENT CLASSES FOR @EXTEND

  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
  28. ZOMG!

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

  30. Engine Yard App Cloud Style Guide, Early 2011

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

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

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

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

    UP.
  35. Refactor going forward.

  36. Making something new? Document it.

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

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

  39. Do you have a CSS Gatekeeper?

  40. Document your ideal CSS Architecture. 02 //

  41. smacss.com

  42. Do Web App “Deathstar”

  43. Do Website “Kenobi”

  44. deathstar.sass kenobi.sass

  45. deathstar.sass kenobi.sass

  46. deathstar.sass kenobi.sass

  47. deathstar.sass kenobi.sass

  48. deathstar.sass kenobi.sass

  49. vendor // third party libraries

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

  51. compass-style.org

  52. susy.oddbird.net

  53. breakpoint-sass.com

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

    // ------------------------ // VENDOR @import vendor/shared deathstar.sass kenobi.sass
  55. vendor dependencies // Global variables, mixins, & functions

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

  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
  58. vendor dependencies base // Plain old semantic HTML

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

    base/_shared.sass
  60. // ----------------------- // BASE @import base/shared // ----------------------- // BASE

    @import base/shared @import base/kenobi/fonts deathstar.sass kenobi.sass
  61. vendor dependencies base components // Modular components & states

  62. @import icons @import forms @import buttons @import toggles @import messages

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

    // COMPONENTS @import components/shared deathstar.sass kenobi.sass
  64. vendor dependencies base components regions // Divided page regions

  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
  66. vendor dependencies base components regions helpers // Layout helpers

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

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

    // HELPERS @import helpers/shared deathstar.sass kenobi.sass
  69. vendor dependencies base components regions helpers responsive // Adjustments to

    type & spacing
  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
  71. _buttons.sass _screen.sass _forms.sass _modals.sass

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

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

  74. <% if Rails.env.development? && Settings.show_grids %> @import show-grid @import diagnostics

    <% end %> tools/_shared.sass.erb
  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
  76. Refactor when you’re adding something new. Refactor when you’re xing

    an issue. Refactor during issues come up in code reviews.
  77. Keep commits focused & organized. 03 //

  78. Bigger commits 䡿 lazy reviews

  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.
  80. To debug, inspect at the inner-most element then work outward.

  81. Find in Project (or GREP) to determine if what you’re

    editing is used anywhere else.
  82. Check how your commit affects the style guide.

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

  84. Color MAINTAINABILITY WITH SASS

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

    in your Style Guide.
  86. Create a simple color palette. Use Sass to do variations.

  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.
  88. Make Variables for common pairings of color & Sass functions,

    and document it.
  89. $black: #000; $grey: #eee; $white: invert($black); $h-bg-color: $black; $h-text-color: $grey;

    $h-link-color: $white; _colors.scss _header.scss
  90. sassme.arc90.com

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

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

  93. Choose a standard base unit. 4 IS A GOOD BASE…

    IT MULTIPLIES INTO 8, 12, 16, ETC.
  94. Create Mixins for common type styles. SPACED OUT CAPS, BIG

    QUOTE STYLES… BUT DON’T HAVE TOO MANY. AND DOCUMENT THEM!
  95. Don’t try to refactor everything at once. YOU’LL LIKELY GIVE

    UP.
  96. Refactor going forward.

  97. — GUSTAVE FLAUBERT “Be regular and orderly in your life

    so that you may be violent and original in your work.”
  98. sfdc-styleguide.herokuapp.com

  99. @SalesforceUX

  100. dribbble.com/salesforce

  101. sass-lang.com

  102. @TeamSassDesign

  103. dribbble.com/TeamSassDesign

  104. themixinsf.com

  105. susy.oddbird.net

  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