'

How One Code Review Changed My Life

Понравилась презентация – покажи это...





Слайд 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


Слайд 1

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


Слайд 2

EVERYONE PROVIDES DESIGN FEEDBACK


Слайд 3

BACK-END DEVELOPERS Picture: Genesis Theme for WordPress


Слайд 4

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


Слайд 5

INCREASE FAMILIARITY Picture: Screenshot from The Simpsons, Matt Groening


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

POST COMMIT (post-merge)


Слайд 10

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


Слайд 11

Any Text Editor … and so many more


Слайд 12

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


Слайд 13

CONTRIBUTE TO OPEN SOURCE


Слайд 14

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


Слайд 15

STAY POSITIVE “ THIS IS


Слайд 16

AVOID ABSOLUTES M U ST A LWAY S NE V ER


Слайд 17

AVOID ABSOLUTES M U ST A LWAY S NE V ER


Слайд 18

Why didn’t you JUST do X,


Слайд 19

Why didn’t you JUST do X, IDIOT


Слайд 20

ASK QUESTIONS ?


Слайд 21

DOCUMENT ISSUES


Слайд 22

DOCUMENT YOUR CODE


Слайд 23

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


Слайд 24

PROVIDE CONTEXT CODEPEN.IO/STACY


Слайд 25

BE PREPARED to discuss what you wrote &


Слайд 26

IT’S NOT YOU … IT’S YOUR CODE


Слайд 27

FOLLOW STANDARDS


Слайд 28

CONSISTENT FORMATTING


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33

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


Слайд 34

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


Слайд 35

UNNECESSARY ABSTRACTION


Слайд 36

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


Слайд 37

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


Слайд 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; }


Слайд 39

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


Слайд 40

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


Слайд 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%; }


Слайд 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;


Слайд 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; */


Слайд 44

UNUSED CSS GIVE UNCSS A TRY


Слайд 45

/* ABOVE ALL */ SCALABILITY SMACSS OOCSS BEM


Слайд 46

CODE REVIEWS FTW! Quality Before Code Review After Code Review


Слайд 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


Слайд 48


×

HTML:





Ссылка: