KonMariCSS

5c4d712a068b58cd07e8650838cb647e?s=47 Vince
November 26, 2017
Programming
0
45

 KonMariCSS

How to Tidy Your Space and Change Your Life

5c4d712a068b58cd07e8650838cb647e?s=128

Vince

November 26, 2017
Tweet

More Decks by Vince

See All by Vince
5c4d712a068b58cd07e8650838cb647e?s=48 snailbites
1
220

Other Decks in Programming

See All in Programming
Acb6390b6c4b5192f40e10601b63dafc?s=48 twkiiim
0
230
51f4d2341131b6b9bfa996bdb9b8dfa8?s=48 showmant
3
720
Ffc500baeba9a1024e2c8273203c9f90?s=48 raulh82vlc
3
1.5k
81bf9a5ec95c07c4884b334456025095?s=48 coodoo
1
1.2k
4861686276b2f990387eaef28b099db0?s=48 niyarin
1
370
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
130
9eed44f137609e6ce3b6f1e14f80b9e1?s=48 izumin5210
6
3k
A513bc1fa519d2fcf5e4e0d9b5500101?s=48 psibi
1
130
3cfad86677c5966ecfe9b81955fa3489?s=48 youkan2002
0
280
B54b5a57a1bfc0dfe592d61d2425a7e1?s=48 yuji_developer
0
120
44f37c1fe3a6a56376bb41a338741355?s=48 ahiru
3
320
49df09ab2eadd025342b9b3387936eb9?s=48 stefafafan
0
380

Featured

See All Featured
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
336
16k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
142
19k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
236
23k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
54
6k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.3k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
60k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
205
6.7k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
91
2.8k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
7
470
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
5
540
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
37
2.2k

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