Refactoring Web Interfaces

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@jina

Slide 3

Slide 3 text

Senior Product Designer

Slide 4

Slide 4 text

— 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.”

Slide 5

Slide 5 text

What is refactoring?

Slide 6

Slide 6 text

Refactoring: GETTING RID OF CODE SMELLS?

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

lack of clarity 䡿 confusion

Slide 9

Slide 9 text

no maintainability 䡿 inef ciency

Slide 10

Slide 10 text

duplication 䡿 bloat

Slide 11

Slide 11 text

Refactoring: BUSY WORK?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

My rst large major CSS refactor:

Slide 14

Slide 14 text

2007–2008 // Apple Online Store

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

Too bad I wasn’t using Sass then…

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

2010–2011 // AppCloud

Slide 19

Slide 19 text

Nesting USE (CAREFULLY) TO AVOID REPETITION

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Variables STORE COMMON ATTRIBUTES FOR MAINTAINABILITY

Slide 22

Slide 22 text

Mixins STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES

Slide 23

Slide 23 text

@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

Slide 24

Slide 24 text

@extend CHAIN SELECTORS TOGETHER

Slide 25

Slide 25 text

.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

Slide 26

Slide 26 text

Placeholder Selectors CREATE SILENT CLASSES FOR @EXTEND

Slide 27

Slide 27 text

%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

Slide 28

Slide 28 text

ZOMG!

Slide 29

Slide 29 text

Refactoring, Sass, & Style Guides are awesome together!

Slide 30

Slide 30 text

Engine Yard App Cloud Style Guide, Early 2011

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

2012–2013 // Web App & Web Site

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Refactor going forward.

Slide 36

Slide 36 text

Making something new? Document it.

Slide 37

Slide 37 text

Revising something? Refactor it. Then document it.

Slide 38

Slide 38 text

If code style preferences are agreed upon, document it.

Slide 39

Slide 39 text

Do you have a CSS Gatekeeper?

Slide 40

Slide 40 text

Document your ideal CSS Architecture. 02 //

Slide 41

Slide 41 text

smacss.com

Slide 42

Slide 42 text

Do Web App “Deathstar”

Slide 43

Slide 43 text

Do Website “Kenobi”

Slide 44

Slide 44 text

deathstar.sass kenobi.sass

Slide 45

Slide 45 text

deathstar.sass kenobi.sass

Slide 46

Slide 46 text

deathstar.sass kenobi.sass

Slide 47

Slide 47 text

deathstar.sass kenobi.sass

Slide 48

Slide 48 text

deathstar.sass kenobi.sass

Slide 49

Slide 49 text

vendor // third party libraries

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

compass-style.org

Slide 52

Slide 52 text

susy.oddbird.net

Slide 53

Slide 53 text

breakpoint-sass.com

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

vendor dependencies // Global variables, mixins, & functions

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

vendor dependencies base // Plain old semantic HTML

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

vendor dependencies base components // Modular components & states

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

vendor dependencies base components regions // Divided page regions

Slide 65

Slide 65 text

// ------------------------------------ // 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

Slide 66

Slide 66 text

vendor dependencies base components regions helpers // Layout helpers

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

// -------------------------------- // 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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Keep commits focused & organized. 03 //

Slide 78

Slide 78 text

Bigger commits 䡿 lazy reviews

Slide 79

Slide 79 text

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.

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Check how your commit affects the style guide.

Slide 83

Slide 83 text

Not in a style guide? Put it in one!

Slide 84

Slide 84 text

Color MAINTAINABILITY WITH SASS

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

$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.

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

sassme.arc90.com

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

Refactor going forward.

Slide 97

Slide 97 text

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