Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

No pain, no gain. CSS Code Reviews FTW.

15,819 views

Published on

CSS is often overlooked as something that would require a code review. The test for good CSS has been "Does everything look good?"

With the complexity and scale of our projects these days, "looks good" is simple not enough. This presentation dives into what it takes to create or progress a positive and beneficial code review process for yourself or your team.

Published in: Software, Technology
  • Like to know how to take easy surveys and get huge checks - then you need to visit us now! Having so many paid surveys available to you all the time let you live the kind of life you want. learn more...■■■ https://tinyurl.com/realmoneystreams2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I'll tell you right now (and I've got proof), that anyone who tells you "size doesn't matter to women" is flat out lying to your face and trying to make you feel better... Heck, just recently I asked a focus group of women via an anonymous online survey if size matters, and again and again they said "Oh my god, I HATE IT when it's SMALL." For a long time I didn't know what to tell the guys who'd write in to me and ask how to get "bigger." I'd say something lame like "Women actually like guys who are smaller... you just have to get good with your hands." Then I found "THE BIBLE of Penis Enlargement" by this guy named John Collins ♥♥♥ https://tinyurl.com/yaygh4xh
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • And if you've ever taken a girl home, gotten hot and heavy and then felt embarrassment and PANIC when you take off your pants and see the look of DISAPPOINTMENT on her face, you need to go check this out right now. ●●● https://tinyurl.com/yaygh4xh
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This program is a must read for anyone suffering from Candida or ones like me who has ever taken antibiotics and is now experiencing any of the many problems that go along with intestinal flora imbalance. I must also add that several people in my church have been following this book and are doing great! ★★★ https://tinyurl.com/y4uu6uch
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

No pain, no gain. CSS Code Reviews FTW.

  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

×