Sass Code Reviews - How one code review changed my life #SassConf2015

  • CategorySoftware

  • View400042

Report
of 48
Description
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 http://www.twitter.com/stacykvernmo Picture: âI should have known betterâ¦.â…
Transcript
  • 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 http://www.twitter.com/stacykvernmo
  • Picture: âI should have known betterâ¦.â patries71, Flickr AW WK# ARD
  • PROVIDES DESIGN FEEDBACK EVERYONE
  • Picture: Genesis Theme for WordPress DEVELOPERS BACK-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 INCREASE FAMILIARITY
  • UNDERSTAND it well enough you don't S 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 COMMIT PRE (pre-merge)
  • COMMIT POST (post-merge)
  • YOUR OWN DARN CODE REVIEW (please) Picture: âI totally gave up!â Jay, Flickr
  • Any Text Editor ⦠and so many more http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/
  • C O D E R E T R E AT NETWORK GROW YOUR Picture: âNetworkâ, Ivan Emelianov, Flickr http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.coderetreat.org https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/
  • OPEN SOURCE CONTRIBUTE TO https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/
  • Picture: âThe Passage of Timeâ, Toni Verdú Carbó, Flickr TIME PREPARATION
  • STAY âTHIS IS ð©POSITIVE
  • MUSTAVOID ABSOLUTES ALWAYS NEVER
  • MUSTAVOID ABSOLUTES ALWAYS NEVER
  • Why didnât you JUST do X,
  • Why didnât you JUST do X, IDIOT
  • ?QUESTIONSASK
  • DOCUMENT ISSUES
  • YOUR CODE DOCUMENT
  • C O D E P E N . I O / S TA C Y PROVIDE CONTEXT
  • PROVIDE CONTEXT CODEPEN.IO/STACY http://codepen.io/stacy
  • BE PREPARED to discuss what you wrote &
  • ITâS NOT YOU ⦠ITâS YOUR CODE
  • STANDARDS FOLLOW http://sass-guidelin.es/
  • FORMATTING CONSISTENT https://www.npmjs.com/package/grunt-scss-lint
  • R U L E .page { ⦠⦠⦠.header { ⦠⦠⦠.container { http://thesassway.com/beginner/the-inception-rule
  • R U L E ⦠ul { ⦠⦠⦠&.dropdown { ⦠⦠⦠li.nav-item { a { color: white; } } } } http://thesassway.com/beginner/the-inception-rule
  • 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; } } } INTENTION NEST WITH
  • UNNECESSARY ABSTRACTION
  • *:focus { outline: none; } ACCESSIBILITY C H E C K F O R M I S TA K E S
  • .element { @include span-columns(12); } OUTPUT B 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; } OUTPUT B L O AT E D
  • .element { width: 100%; } C O M P I L E S T O : OUTPUT B 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.OUTPUT B 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
  • G I V E U N C S S A T R Y U N U S E D CSS http://addyosmani.com/blog/removing-unused-css/
  • OOCSS BEMSMACSS /* ABOVE ALL */ SCALABILITY https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://github.com/stubbornella/oocss/tree/master/oocss https://en.bem.info/ https://en.bem.info/ https://smacss.com/
  • 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 http://www.twitter.com/stacykvernmo