KonMariCSS

5c4d712a068b58cd07e8650838cb647e?s=47 Vince
November 26, 2017

 KonMariCSS

How to Tidy Your Space and Change Your Life

5c4d712a068b58cd07e8650838cb647e?s=128

Vince

November 26, 2017
Tweet

Transcript

  1. KonMari CSS How to Tidy Your Space and Change Your

    Life*
  2. Vincent Nalupta Senior Software Engineer @snailbites

  3. HUNGRY + ANGRY = HANGRY

  4. First, some context...

  5. None
  6. None
  7. None
  8. None
  9. ¯\_(ツ)_/¯

  10. The KonMari Cleaning Method

  11. KonMari CSS How to Tidy Your Space and Change Your

    Life*
  12. ANALYZE PLAN REFACTOR OPTIMIZE

  13. ANALYZE PLAN REFACTOR OPTIMIZE

  14. “Place every piece of clothing in the house on the

    floor.”
  15. File size Selector count Maintainability Load times

  16. cssstats.com

  17. None
  18. 360 KB (76KB minified gzipped)

  19. "Before you start, visualize the destination"

  20. ANALYZE PLAN REFACTOR OPTIMIZE

  21. Identify your goals

  22. 1 month 3 months 1 year

  23. What problems are you trying to solve?

  24. Settle on a naming convention

  25. .parent <section class=”parent”> </section> -child <div class=”parent-child”> </div> -gchild <p

    class=”parent-child-gchild”> ... </p>
  26. .box--delivery .box--pickup

  27. None
  28. UI Testing

  29. https://github.com/webdriverio/webdrivercss

  30. "The moment you start, you reset your life."

  31. ANALYZE PLAN REFACTOR OPTIMIZE

  32. Refactor a single file “Code as Craft”

  33. None
  34. None
  35. Break

  36. File size Selector count Maintainability Load times

  37. ANALYZE PLAN REFACTOR OPTIMIZE

  38. Style guide driven development

  39. None
  40. Demo

  41. None
  42. Find the outliers

  43. http://bit.ly/2evMYuw

  44. End Game

  45. None
  46. Build some bridges!

  47. None
  48. @snailbites http://snailbites.com/blog/

  49. (504) 229-6828 #KonMariCSS