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.

14,031 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
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I have a good website that I can recommend; I ordered a dissertation proposal from Digitalessay.net. The work was done very quickly and everything was formatted correctly. Very happy with the result! Definitely check them out.
       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

×