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

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

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

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

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

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

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

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

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

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

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

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

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

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

15. 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
💩

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

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

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

19. ?
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

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

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

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

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

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

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

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

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

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

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

30. …
…
.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

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

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

33. 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;
}

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

35. %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

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

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

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

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

40. 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 :

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

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

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

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

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

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

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

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

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

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

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

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