Embed Size (px)
Citation preview
A W K W A 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 feedbackEVERYONE
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'tS 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
JUSTdo 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
JUSTdo 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 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 { … … &.dropdown {
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
.header { … … .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.dropdown li.nav-item a { 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.dropdown li.nav-item a { 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.dropdown li.nav-item a { 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 .nav ul.dropdown li.nav-item a { 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 R Y 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 EA 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
OOCSSBEM
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
