How One Code Review Changed My Life


The Presentation inside:

Slide 0

CODE REVIEWS 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 Stacy Kvernmo @stacykvernmo


Slide 1

# AW WARD K Picture: “I should have known better….” patries71, Flickr


Slide 2

EVERYONE PROVIDES DESIGN FEEDBACK


Slide 3

BACK-END DEVELOPERS Picture: Genesis Theme for WordPress


Slide 4

DISCOVER BUGS Picture: Hasan Baglar/Sony World Photography Awards 2014


Slide 5

INCREASE FAMILIARITY Picture: Screenshot from The Simpsons, Matt Groening


Slide 6

If you can't explain it, S I M P LY you don't UNDERSTAND it well enough


Slide 7

FORMAL Picture: “President Obama does the Hour of Code” CODE.org, YouTube


Slide 8

PRE COMMIT (pre-merge) Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr


Slide 9

POST COMMIT (post-merge)


Slide 10

REVIEW YOUR OWN DARN CODE (please) Picture: “I totally gave up!” Jay, Flickr


Slide 11

Any Text Editor … and so many more


Slide 12

GROW YOUR NETWORK C O D E R E T R E AT Picture: “Network”, Ivan Emelianov, Flickr


Slide 13

CONTRIBUTE TO OPEN SOURCE


Slide 14

PREPARATION TIME Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr


Slide 15

STAY POSITIVE “ THIS IS


Slide 16

AVOID ABSOLUTES M U ST A LWAY S NE V ER


Slide 17

AVOID ABSOLUTES M U ST A LWAY S NE V ER


Slide 18

Why didn’t you JUST do X,


Slide 19

Why didn’t you JUST do X, IDIOT


Slide 20

ASK QUESTIONS ?


Slide 21

DOCUMENT ISSUES


Slide 22

DOCUMENT YOUR CODE


Slide 23

PROVIDE CONTEXT C O D E P E N . I O / S TA C Y


Slide 24

PROVIDE CONTEXT CODEPEN.IO/STACY


Slide 25

BE PREPARED to discuss what you wrote &


Slide 26

IT’S NOT YOU … IT’S YOUR CODE


Slide 27

FOLLOW STANDARDS


Slide 28

CONSISTENT FORMATTING


Slide 29

RULE .page { … … … .header { … … …


Slide 30

ul { … … … RULE &.dropdown { … … … li.nav-item { a { color: white; } }


Slide 31

RULE .page .header .container .nav ul.dropdown color: white; }


Slide 32

RULE .page .header .container .nav ul.dropdown color: white; } .store.page .header .container .nav ul.dr color: green; }


Slide 33

RULE .page .header .container .nav ul.dropdown color: white; } .store.page .header .container .nav ul.dr color: green; ;!important; }


Slide 34

.nav { li { margin-right: 1rem; NEST WITH INTENTION } } a { } &:last-child { margin-right: 0; } color: orange; &:hover { color: salmon; }


Slide 35

UNNECESSARY ABSTRACTION


Slide 36

C H E C K F O R M I S TA K E S ACCESSIBILITY *:focus { outline: none; }


Slide 37

B L O AT E D OUTPUT .element { @include span-columns(12); }


Slide 38

B L O AT E D OUTPUT COMPILES TO: .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; }


Slide 39

B L O AT E D OUTPUT .element { @include fill-parent; }


Slide 40

B L O AT E D OUTPUT COMPILES TO: .element { width: 100%; }


Slide 41

B L O AT E D OUTPUT VS . .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; } .element { width: 100%; }


Slide 42

VENDOR PREFIXES .example { -webkit-box-sizing: -moz-box-sizing: -ms-box-sizing: -o-box-sizing: box-sizing: } border-box; border-box; border-box; border-box; border-box;


Slide 43

UNUSED CSS .example { /* Unnecessary vendor prefixes } -webkit-box-sizing: -moz-box-sizing: -ms-box-sizing: -o-box-sizing: box-sizing: border-box; border-box; border-box; border-box; border-box; */


Slide 44

UNUSED CSS GIVE UNCSS A TRY


Slide 45

/* ABOVE ALL */ SCALABILITY SMACSS OOCSS BEM


Slide 46

CODE REVIEWS FTW! Quality Before Code Review After Code Review


Slide 47

CODE REVIEWS 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 Stacy Kvernmo @stacykvernmo


Slide 48


×

HTML:





Ссылка: