No Pain, No Gain. CSS Code Reviews FTW.


The Presentation inside:

Slide 0

N O PA I N NO GAIN Stacy Kvernmo @funstacy


Slide 1

# N o P a i n | M Y S T O RY AWKWARD Picture: “I should have known better….” patries71, Flickr


Slide 2

#NoPain DESIGN CRITIQUES EVERYONE provides design feedback


Slide 3

#NoPain BACK-END DEVELOPERS Picture: Genesis Theme for WordPress


Slide 4

#NoPain | BENEFITS DISCOVER BUGS Picture: Hasan Baglar/Sony World Photography Awards 2014


Slide 5

#NoPain | BENEFITS I N C R E A S E FA M I L I A R I T Y Picture: Screenshot from The Simpsons, Matt Groening


Slide 6

#NoPain | BENEFITS E D U C AT I O N If you can't explain it, S I M P LY you don't UNDERSTAND it well enough.


Slide 7

#NoPain | WHEN FORMAL PROCESS Picture: “President Obama does the Hour of Code” CODE.org, YouTube


Slide 8

#NoPain | WHEN PRE-COMMIT Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr


Slide 9

#NoPain | WHEN P O S T- C O M M I T


Slide 10

#NoPain | WHEN SELF REVIEW Picture: “I totally gave up!” Jay, Flickr


Slide 11

#NoPain | RESOURCES GROW YOUR NETWORK C O D E R E T R E AT Picture: @CSSDevConf, Twitter


Slide 12

#NoPain | RESOURCES OPEN SOURCE


Slide 13

#NoPain | REVIEWER TIPS P R E PA R AT I O N T I M E Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr


Slide 14

#NoPain | REVIEWER TIPS S TAY P O S I T I V E “ THIS IS


Slide 15

#NoPain | REVIEWER TIPS AV O I D A B S O L U T E S MUST ALWAYS NEVER


Slide 16

#NoPain | REVIEWER TIPS JUST Why didn’t you JUST do X,


Slide 17

#NoPain | REVIEWER TIPS JUST Why didn’t you JUST do X, IDIOT


Slide 18

#NoPain | REVIEWER TIPS ? ASK QUESTIONS ? ? ?


Slide 19

#NoPain | REVIEWER TIPS DOCUMENT ISSUES


Slide 20

#NoPain | AUTHOR TIPS D O C U M E N TAT I O N


Slide 21

#NoPain | AUTHOR TIPS PROVIDE CONTEXT


Slide 22

#NoPain | AUTHOR TIPS PROVIDE CONTEXT CODEPEN.IO/STACY


Slide 23

#NoPain | AUTHOR TIPS B E P R E PA R E D Discuss what you wrote &


Slide 24

#NoPain | AUTHOR TIPS BE OPEN It’s not you … IT’S YOUR CODE


Slide 25

# N o P a i n | W H AT T O R E V I E W F O L L O W S TA N D A R D S


Slide 26

# N o P a i n | W H AT T O R E V I E W F O R M AT T I N G


Slide 27

# N o P a i n | W H AT T O R E V I E W E A S Y T O U N D E R S TA N D


Slide 28

# N o P a i n | W H AT T O R E V I E W INCEPTION RULE .page { … … .header { … … .container { … … .nav { … … ul { … …


Slide 29

… … # N o P a i n | W H AT T O R E V I E W .container { … … .nav { … … ul { … … &.dropdown { … … li.nav-item { a { color: white; } } } } INCEPTION RULE


Slide 30

# N o P a i n | W H AT T O R E V I E W INCEPTION RULE COMPILES TO: .page .header .container .nav ul. color: white; }


Slide 31

# N o P a i n | W H AT T O R E V I E W INCEPTION RULE COMPILES TO: .page .header .container .nav ul. color: white; }


Slide 32

# N o P a i n | W H AT T O R E V I E W INCEPTION RULE COMPILES TO: .page .header .container .nav ul. color: white; } body .page .header .container .na color: violet !important; }


Slide 33

# N o P a i n | W H AT T O R E V I E W INCEPTION RULE .nav { li { margin-right: 1rem; } a { } } &:last-child { margin-right: 0; } color: orange; &:hover { color: salmon; }


Slide 34

# N o P a i n | W H AT T O R E V I E W @EXTEND %base { color: violet; } .foo { @extend %base; color: orange; } .bar { color: yellow; @extend %base; } COMPILES TO: .foo, .bar { color: violet; } .foo { color: orange; } .bar { color: yellow; }


Slide 35

# N o P a i n | W H AT T O R E V I E W UNNECESSARY ABSTRACTION


Slide 36

# N o P a i n | W H AT T O R E V I E W F I X E D VA L U E S .element { font-size: 27px; height: 37px; line-height: 44px; margin-top: 19px; width: 264px; }


Slide 37

# N o P a i n | W H AT T O R E V I E W ACCESSIBILITY *:focus { outline: none; }


Slide 38

# N o P a i n | W H AT T O R E V I E W B L O AT E D O U T P U T .element { @include span-columns(12); }


Slide 39

# N o P a i n | W H AT T O R E V I E W B L O AT E D O U T P U T COMPILES TO: .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; }


Slide 40

# N o P a i n | W H AT T O R E V I E W B L O AT E D O U T P U T .element { @include fill-parent; }


Slide 41

# N o P a i n | W H AT T O R E V I E W B L O AT E D O U T P U T .element { width: 100%; }


Slide 42

# N o P a i n | W H AT T O R E V I E W B L O AT E D O U T P U T VS . .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; } .element { width: 100%; }


Slide 43

# N o P a i n | W H AT T O R E V I E W VENDOR PREFIXES .example { -webkit-box-sizing: -moz-box-sizing: -ms-box-sizing: -o-box-sizing: box-sizing: } border-box; border-box; border-box; border-box; border-box;


Slide 44

# N o P a i n | W H AT T O R E V I E W UNUSED CODE .example { /* Unnecessary vendor prefixes -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } */


Slide 45

# N o P a i n | W H AT T O R E V I E W UNUSED CODE ADD UnCSS TO YOUR BUILD PROCESS


Slide 46

# N o P a i n | W H AT T O R E V I E W SCALABILITY OOCSS BEM SMACSS


Slide 47

#NoPain | TOOLS REVIEW YOUR OWN CODE Any Text Editor … and so many more


Slide 48

#NoPain | TOOLS WORKFLOW


Slide 49

#NoPain | TOOLS CODE REVIEW Upsource Rietveld Gerrit Code Review Review Board


Slide 50

#NoPain | KNOWLEDGE IS POWER C O D E R E V I E W, F T W ! Before After 100 75 50 Quality 25 0 Time


Slide 51

N O PA I N NO GAIN Stacy Kvernmo @funstacy


Slide 52


×

HTML:





Ссылка: