Sass Code Reviews - How one code review changed my life #SassConf2015
48
Stacy Kvernmo @stacykvernmo TURN HUMILIATION INTO GREATNESS CODE REVIEWS
-
Upload
stacy-kvernmo -
Category
Software
-
view
400.045 -
download
5
Transcript of Sass Code Reviews - How one code review changed my life #SassConf2015
Stacy Kvernmo @stacykvernmo
T U R N H U M I L I AT I O N I N T O G R E AT N E S S
CODE REVIEWS
Picture: “I should have known better….” patries71, Flickr
AW WK# ARD
PROVIDES DESIGN FEEDBACKEVERYONE
Picture: Genesis Theme for WordPress
DEVELOPERSBACK-END
BUGS
Picture: Hasan Baglar/Sony World Photography Awards 2014
D I S C O V E R
Picture: Screenshot from The Simpsons, Matt Groening
INCREASEFAMILIARITY
UNDERSTAND it well enough
you don'tS I M P LY
If you can't explain it,
Picture: “President Obama does the Hour of Code” CODE.org, YouTube
FORMAL
Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr
COMMITPRE(pre-merge)
COMMITPOST(post-merge)
YOUR OWN DARN CODE
REVIEW(please)
Picture: “I totally gave up!” Jay, Flickr
Any Text Editor
… and so many more
C O D E R E T R E AT
NETWORKGROW YOUR
Picture: “Network”, Ivan Emelianov, Flickr
OPEN SOURCECONTRIBUTE TO
Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr
TIMEPREPARATION
STAY
“THIS IS 💩POSITIVE
MUSTAVOIDABSOLUTES ALWAYS
NEVER
MUSTAVOIDABSOLUTES ALWAYS
NEVER
Why didn’t you
JUSTdo X,
Why didn’t you
JUSTdo X,
IDIOT
?QUESTIONSASK
DOCUMENTISSUES
YOUR CODEDOCUMENT
C O D E P E N . I O / S TA C Y
PROVIDE CONTEXT
BE PREPAREDto discuss what
you wrote &
IT’S NOT YOU …
IT’S YOUR CODE
R U L E
.page { … … … .header { … … … .container {
R U L E
… ul { … … … &.dropdown { … … …
li.nav-item { a { color: white; } } } }
R U L E
.page .header .container .nav ul.dropdown li.nav-item a { color: white; }
R U L E
.page .header .container .nav ul.dropdown li.nav-item a { color: white; }
.store.page .header .container .nav ul.dropdown li.nav-item a { color: green; }
R U L E
.page .header .container .nav ul.dropdown li.nav-item a { color: white; }
.store.page .header .container .nav ul.dropdown li.nav-item a { color: green; }
;!important;
.nav { li {
margin-right: 1rem;
&:last-child { margin-right: 0;
} }
a { color: orange;
&:hover { color: salmon;
} }
}
INTENTIONNEST WITH
UNNECESSARY ABSTRACTION
*:focus { outline: none;
}
ACCESSIBILITYC H E C K F O R M I S TA K E S
.element { @include span-columns(12); }
OUTPUTB L O AT E D
.element { float: left; display: left; margin-right: 2.35765%; width: 100%;
}
.element:last-child { margin-right: 0;
}
C O M P I L E S T O :B L O AT E D
OUTPUT
.element { @include fill-parent; }
OUTPUTB L O AT E D
.element { width: 100%; }
C O M P I L E S T O :
OUTPUTB L O AT E D
.element { width: 100%;
}
.element { float: left; display: left; margin-right: 2.35765%; width: 100%;
}
.element:last-child { margin-right: 0;
}
VS.OUTPUTB L O AT E D
.example { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
V E N D O R
PREFIXES
.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; }
U N U S E D
CSS
OOCSS BEMSMACSS
/* ABOVE ALL */
SCALABILITY
After Code ReviewBefore Code Review
FTW!CODE REVIEWS
Quality
Stacy Kvernmo @stacykvernmo
T U R N H U M I L I AT I O N I N T O G R E AT N E S S
CODE REVIEWS
