'

No Pain, No Gain. CSS Code Reviews FTW.

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





Слайд 0

N O PA I N NO GAIN Stacy Kvernmo @funstacy


Слайд 1

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


Слайд 2

#NoPain DESIGN CRITIQUES EVERYONE provides design feedback


Слайд 3

#NoPain BACK-END DEVELOPERS Picture: Genesis Theme for WordPress


Слайд 4

#NoPain | BENEFITS DISCOVER BUGS Picture: Hasan Baglar/Sony World Photography Awards 2014


Слайд 5

#NoPain | BENEFITS I N C R E A S E FA M I L I A R I T Y Picture: Screenshot from The Simpsons, Matt Groening


Слайд 6

#NoPain | BENEFITS E D U C AT I O N If you can't explain it, S I M P LY you don't UNDERSTAND it well enough.


Слайд 7

#NoPain | WHEN FORMAL PROCESS Picture: “President Obama does the Hour of Code” CODE.org, YouTube


Слайд 8

#NoPain | WHEN PRE-COMMIT Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr


Слайд 9

#NoPain | WHEN P O S T- C O M M I T


Слайд 10

#NoPain | WHEN SELF REVIEW Picture: “I totally gave up!” Jay, Flickr


Слайд 11

#NoPain | RESOURCES GROW YOUR NETWORK C O D E R E T R E AT Picture: @CSSDevConf, Twitter


Слайд 12

#NoPain | RESOURCES OPEN SOURCE


Слайд 13

#NoPain | REVIEWER TIPS P R E PA R AT I O N T I M E Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr


Слайд 14

#NoPain | REVIEWER TIPS S TAY P O S I T I V E “ THIS IS


Слайд 15

#NoPain | REVIEWER TIPS AV O I D A B S O L U T E S MUST ALWAYS NEVER


Слайд 16

#NoPain | REVIEWER TIPS JUST Why didn’t you JUST do X,


Слайд 17

#NoPain | REVIEWER TIPS JUST Why didn’t you JUST do X, IDIOT


Слайд 18

#NoPain | REVIEWER TIPS ? ASK QUESTIONS ? ? ?


Слайд 19

#NoPain | REVIEWER TIPS DOCUMENT ISSUES


Слайд 20

#NoPain | AUTHOR TIPS D O C U M E N TAT I O N


Слайд 21

#NoPain | AUTHOR TIPS PROVIDE CONTEXT


Слайд 22

#NoPain | AUTHOR TIPS PROVIDE CONTEXT CODEPEN.IO/STACY


Слайд 23

#NoPain | AUTHOR TIPS B E P R E PA R E D Discuss what you wrote &


Слайд 24

#NoPain | AUTHOR TIPS BE OPEN It’s not you … IT’S YOUR CODE


Слайд 25

# N o P a i n | W H AT T O R E V I E W F O L L O W S TA N D A R D S


Слайд 26

# 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


Слайд 27

# 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


Слайд 28

# N o P a i n | W H AT T O R E V I E W INCEPTION RULE .page { … … .header { … … .container { … … .nav { … … ul { … …


Слайд 29

… … # 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; } } } } INCEPTION RULE


Слайд 30

# N o P a i n | W H AT T O R E V I E W INCEPTION RULE COMPILES TO: .page .header .container .nav ul. color: white; }


Слайд 31

# N o P a i n | W H AT T O R E V I E W INCEPTION RULE COMPILES TO: .page .header .container .nav ul. color: white; }


Слайд 32

# N o P a i n | W H AT T O R E V I E W INCEPTION RULE COMPILES TO: .page .header .container .nav ul. color: white; } body .page .header .container .na color: violet !important; }


Слайд 33

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


Слайд 34

# N o P a i n | W H AT T O R E V I E W @EXTEND %base { color: violet; } .foo { @extend %base; color: orange; } .bar { color: yellow; @extend %base; } COMPILES TO: .foo, .bar { color: violet; } .foo { color: orange; } .bar { color: yellow; }


Слайд 35

# N o P a i n | W H AT T O R E V I E W UNNECESSARY ABSTRACTION


Слайд 36

# 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; }


Слайд 37

# N o P a i n | W H AT T O R E V I E W ACCESSIBILITY *:focus { outline: none; }


Слайд 38

# 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 .element { @include span-columns(12); }


Слайд 39

# 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 COMPILES TO: .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; }


Слайд 40

# 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 .element { @include fill-parent; }


Слайд 41

# 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 .element { width: 100%; }


Слайд 42

# 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 VS . .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; } .element { width: 100%; }


Слайд 43

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


Слайд 44

# N o P a i n | W H AT T O R E V I E W UNUSED CODE .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; } */


Слайд 45

# N o P a i n | W H AT T O R E V I E W UNUSED CODE ADD UnCSS TO YOUR BUILD PROCESS


Слайд 46

# N o P a i n | W H AT T O R E V I E W SCALABILITY OOCSS BEM SMACSS


Слайд 47

#NoPain | TOOLS REVIEW YOUR OWN CODE Any Text Editor … and so many more


Слайд 48

#NoPain | TOOLS WORKFLOW


Слайд 49

#NoPain | TOOLS CODE REVIEW Upsource Rietveld Gerrit Code Review Review Board


Слайд 50

#NoPain | KNOWLEDGE IS POWER C O D E R E V I E W, F T W ! Before After 100 75 50 Quality 25 0 Time


Слайд 51

N O PA I N NO GAIN Stacy Kvernmo @funstacy


Слайд 52


×

HTML:





Ссылка: