N O G A I
N N O PA I N Stacy Kvernmo @funstacy

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

D E S I G
N C R I T I Q U E S # N o P a i n provides design feedback EVERYONE

B A C K -
E N D D E V E L O P E R S # N o P a i n Picture: Genesis Theme for WordPress

D I S C O
V E R B U G S Picture: Hasan Baglar/Sony World Photography Awards 2014 # N o P a i n | B E N E F I T S

I N C R E
A S E FA M I L I A R I T Y # N o P a i n | B E N E F I T S Picture: Screenshot from The Simpsons, Matt Groening

UNDERSTAND it well enough. you
don't S I M P LY If you can't explain it, # N o P a i n | B E N E F I T S E D U C AT I O N

F O R M A
L P R O C E S S # N o P a i n | W H E N Picture: “President Obama does the Hour of Code” CODE.org, YouTube

P R E - C
O M M I T Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr # N o P a i n | W H E N

P O S T- C
O M M I T # N o P a i n | W H E N

S E L F R
E V I E W # N o P a i n | W H E N Picture: “I totally gave up!” Jay, Flickr

C O D E R
E T R E AT Picture: @CSSDevConf, Twitter G R O W Y O U R N E T W O R KG R O W Y O U R N E T W O R K # N o P a i n | R E S O U R C E S

O P E N S
O U R C E # N o P a i n | R E S O U R C E S

P R E PA R
AT I O N T I M E # N o P a i n | R E V I E W E R T I P S Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr

S TAY P O S
I T I V E “THIS IS # N o P a i n | R E V I E W E R T I P S 💩

AV O I D A
B S O L U T E S MUST ALWAYS NEVER # N o P a i n | R E V I E W E R T I P S

J U S T Why
didn’t you JUST do X, # N o P a i n | R E V I E W E R T I P S

J U S T Why
didn’t you JUST do X, IDIOT # N o P a i n | R E V I E W E R T I P S

? A S K Q
U E S T I O N S ??? ? # N o P a i n | R E V I E W E R T I P S

D O C U M
E N T I S S U E S # N o P a i n | R E V I E W E R T I P S

D O C U M
E N TAT I O N # N o P a i n | A U T H O R T I P S

P R O V I
D E C O N T E X T # N o P a i n | A U T H O R T I P S

P R O V I
D E C O N T E X T # N o P a i n | A U T H O R T I P S CODEPEN.IO/STACY

B E P R E
PA R E D Discuss what you wrote & # N o P a i n | A U T H O R T I P S

B E O P E
N # N o P a i n | A U T H O R T I P S It’s not you … IT’S YOUR CODE

F O L L O
W S TA N D A R D S # 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 # 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 # N o P a i n | W H AT T O R E V I E W

.page { … … .header
{ … … .container { … … .nav { … … ul { … … I N C E P T I O N R U L E # 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; } } } } I N C E P T I O N R U L E # N o P a i n | W H AT T O R E V I E W

I N C E P
T I O N R U L E .page .header .container .nav ul. color: white; } C O M P I L E S T O : # N o P a i n | W H AT T O R E V I E W

I N C E P
T I O N R U L E .page .header .container .nav ul. color: white; } C O M P I L E S T O : # N o P a i n | W H AT T O R E V I E W

I N C E P
T I O N R U L E .page .header .container .nav ul. color: white; } C O M P I L E S T O : # N o P a i n | W H AT T O R E V I E W body .page .header .container .na color: violet !important; }

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

%base { color: violet; }
.foo { @extend %base; color: orange; } .bar { color: yellow; @extend %base; } .foo, .bar { color: violet; } .foo { color: orange; } .bar { color: yellow; } C O M P I L E S T O : @ E X T E N D # N o P a i n | W H AT T O R E V I E W

U N N E C
E S S A RY A B S T R A C T I O N # 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; } # N o P a i n | W H AT T O R E V I E W

A C C E S
S I B I L I T Y *:focus { outline: none; } # N o P a i n | W H AT T O R E V I E W

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

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

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

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

V E N D O
R P R E F I X E S .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; } # N o P a i n | W H AT T O R E V I E W

U N U S E
D C O D E .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; } # N o P a i n | W H AT T O R E V I E W

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

S C A L A
B I L I T Y OOCSS BEM SMACSS # N o P a i n | W H AT T O R E V I E W

R E V I E
W Y O U R O W N C O D E # N o P a i n | T O O L S Any Text Editor … and so many more

W O R K F
L O W # N o P a i n | T O O L S

C O D E R
E V I E W Gerrit Code Review Upsource Review BoardRietveld # N o P a i n | T O O L S

C O D E R
E V I E W, F T W ! # N o P a i n | K N O W L E D G E I S P O W E R Time After 0 25 50 75 100 Before Quality

N O G A I
N N O PA I N Stacy Kvernmo @funstacy