Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KonMariCSS

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

 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
230

Other Decks in Programming

See All in Programming
347a1b64f3a6e38981bc99b53919e2b1?s=48 azdaroth
0
180
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
560
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
0
1.6k
Eae7b6aeee72d3081b01d09a2d675f9a?s=48 akkeylab
0
370
1c2b62114ede7d8cb897bf19b999d233?s=48 muttsu_623
0
550
3742ae4f74e584aed4f41c405232c3bb?s=48 yaamaa
0
450
9eca6d3a5658ef22998083a3d8e7ec44?s=48 shigeruoda
0
490
285cc95c4c9fe056b03afca581533266?s=48 fkubota
1
400
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
1
280
3331499a8c17bf14833f22b9173223f1?s=48 hanakla
2
3.1k
D12a80cab206033a820ccff8319f957b?s=48 s_uryu
0
230
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
4
620

Featured

See All Featured
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
1.9k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
229
18k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
13
650
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
127
20k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
106
14k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
27
930
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
200k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
480
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
272
16k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.6k
11c84dff30266b907714802088852677?s=48 jasonvnalue
82
8.1k

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