The Code Cure: Small Steps to a More Organized Front-End Codebase

Working with a clean codebase is like stepping into a well-organized space – it makes you feel right at home. But despite our best intentions, our front-end code has a tendency to get a bit...messy. It's ok, it happens to the best of us! Tight deadlines and one-off fixes can turn that tidy codebase into a dusty attic. The good news is, it isn't difficult to start taking back control. In this session we'll look at practical, bite-sized assignments that you can accomplish at whatever pace your workflow allows. And together we can work towards a cleaner, more organized, and useful front-end codebase.

Transcript

1. SMALL STEPS TO A MORE ORGANIZED FRONT-END CODEBASE THE CODE CURE Small Steps to a More Organized Front-End Codebase Slides and handout at mattwondra.com / @mattwondra
2. MATT WONDRA Senior Front-End Web Developer
3. APARTMENT THERAPY THE KITCHN Saving the world, one room at a time Inspiring cooks, nourishing homes
4. APARTMENT THERAPY
 The Eight-Step Home Cure
6. FRONT-END DEVELOPMENT TEAM +
7. MY CODE WAS A MESS
8. WHO ELSE HAS 
 FELT THIS WAY? Be honest! It’s OK!
9. BURN IT DOWN AND START OVER
10. MAXWELL RYAN THE EIGHT-STEP HOME CURE “…the first things that follow us when we move are our own bad habits.”
11. IS THERE ANY CURE?
12. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
13. THE BIG IDEA #CODECURE A high-level description of how this step promotes clean code.
14. ASSIGNMENT #CODECURE A 1- or 2-hour task related to this step, to be completed with your team.
15. THE CODE CURE is an iterative process, not a one-time fix.
16. THE CODE CURE is fully customizable, so go nuts.
17. THE CODE CURE is more about happiness than clean code.
18. MAXWELL RYAN THE EIGHT-STEP HOME CURE “When you get your house in order, 
 other parts of your life just start to follow.”
19. Prepare STEP ZERO
20. ASSIGNMENT #CODECURE Set up a README / developer manual. 0. PREPARE
21. #CODECURE 0. PREPARE Shared by the team Easy to access Easy to update Not too fiddly
22. ASSIGNMENT #CODECURE Plan a Code Cure schedule 
 with your team. 0. PREPARE
23. #CODECURE 0. PREPARE 2 hours each Friday 1 hour daily
24. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
25. Take Inventory STEP ONE
26. THE BIG IDEA #CODECURE We can only solve the problems 
 we know about. 1. TAKE INVENTORY
27. ASSIGNMENT #CODECURE Give someone a guided tour of 
 your codebase. 1. TAKE INVENTORY
28. #CODECURE 1. TAKE INVENTORY
29. ASSIGNMENT #CODECURE Drop comment tags in your code to help you find problems later. 1. TAKE INVENTORY
31. ASSIGNMENT #CODECURE Write down the biggest challenges 
 in your codebase and your goals for The Code Cure. 1. TAKE INVENTORY
32. #CODECURE Conflicts? Confusions? Anxieties? 1. TAKE INVENTORY
33. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
34. Evaluate Tools STEP TWO
36. THE BIG IDEA #CODECURE Our tools can help enforce our habits and make it hard to do the wrong thing. 2. EVALUATE TOOLS
37. ASSIGNMENT #CODECURE Set up asset pre-processing. 2. EVALUATE TOOLS
38. #CODECURE 2. EVALUATE TOOLS
39. #CODECURE Minimum requirement: concatenation 2. EVALUATE TOOLS app.css moduleA.scss moduleB.scss moduleC.scss
40. ASSIGNMENT #CODECURE Install linters on your text editor. 2. EVALUATE TOOLS
43. #CODECURE 2. EVALUATE TOOLS JAVASCRIPT LINTERS CSS LINTERS (YMMV)
44. ASSIGNMENT #CODECURE Document the steps to set up and maintain these tools in your README. 2. EVALUATE TOOLS
45. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
46. Set Naming Conventions STEP THREE
47. PHIL KARLTON “There are only two hard 
 things in Computer Science: 
 cache invalidation and naming things.”
48. THE BIG IDEA #CODECURE Well-formed conventions make naming decisions simpler and more consistent. 3. SET NAMING CONVENTIONS
49. ASSIGNMENT #CODECURE Establish CSS naming conventions. 3. SET NAMING CONVENTIONS
50. #CODECURE - BEM - OOCSS - SMACSS - SUIT CSS - Class naming ideas from Sparkbox 3. SET NAMING CONVENTIONS
51. BEM: Block Element Modifier
52. ASSIGNMENT #CODECURE Establish JavaScript naming conventions. 3. SET NAMING CONVENTIONS
53. #CODECURE - jIO JavaScript Naming Conventions - Variable Naming Conventions in JS 3. SET NAMING CONVENTIONS
56. ASSIGNMENT #CODECURE Create a consistent file structure. 3. SET NAMING CONVENTIONS
58. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
59. Emphasize Clarity STEP FOUR
60. THE BIG IDEA #CODECURE Code is for humans, not just computers, so we should make it as clear as possible. 4. EMPHASIZE CLARITY
61. ASSIGNMENT #CODECURE Give your variable names a 
 clarity of purpose. 4. EMPHASIZE CLARITY
64. ASSIGNMENT #CODECURE Hunt down unfocused CSS selectors 
 and give them clearer intent. 4. EMPHASIZE CLARITY
65. #CODECURE 4. EMPHASIZE CLARITY http://csswizardry.com/2012/07/shoot-to-kill-css-selector-intent/
69. #CODECURE RULE OF THUMB If you need to look at the HTML to understand what a CSS selector is targeting, you should make the selector clearer. 4. EMPHASIZE CLARITY
70. ASSIGNMENT #CODECURE Get rid of your too-clever code. 4. EMPHASIZE CLARITY
73. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
74. Modularize STEP FIVE
75. THE BIG IDEA #CODECURE Our code is easier to write, read, and manage if every chunk only has 
 a single job. 5. MODULARIZE
76. YOU ONLY HAD ONE JOB
77. ASSIGNMENT #CODECURE Break large chunks of unrelated code into separate modules. 5. MODULARIZE
78. #CODECURE 5. MODULARIZE components.js comments dropdowns galleries components.css comments dropdowns galleries
79. #CODECURE 5. MODULARIZE comments.js dropdowns.js galleries.js comments.css dropdowns.css galleries.css
80. ASSIGNMENT #CODECURE Find modules that still feel too big 
 and write down all the jobs each 
 one is trying to do. 5. MODULARIZE
81. #CODECURE Fetch comments from API Show a list of comments Let users write new comments 5. MODULARIZE asdasd a s aslkjl asdlk jlkasj dlkjla as a lsk dlkl klk. lkj wd oij2oij jdjlk dx as asd poqw p12mpm ask kwdm amwdpkmpam alksjdl dkjkwj d asd asd d 3 qk. 9a8uy98 891 98d 9820 2knlkasldkm a d2kjq w wqkjijoiwqjd ioqwjd d aklsj sadas d asd. SUBMIT COMMENT
82. ASSIGNMENT #CODECURE Break each job into its own module. 5. MODULARIZE
83. #CODECURE 5. MODULARIZE CommentData Reads and writes 
 comments to the API CommentList Gets comments from CommentData and renders them in a list CommentForm Displays a form. 
 On submit, sends the 
 data to CommentData.
84. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
85. Set Stylistic Conventions STEP SIX
86. THE BIG IDEA #CODECURE Our code is much more readable when it’s stylistically consistent throughout. 6. SET STYLISTIC CONVENTIONS
87. #CODECURE 6. SET STYLISTIC CONVENTIONS
88. ASSIGNMENT #CODECURE Establish JavaScript stylistic conventions. 6. SET STYLISTIC CONVENTIONS
89. #CODECURE - Douglas Crockford’s Code Conventions - Airbnb JavaScript Style Guide - jQuery JavaScript Style Guide 6. SET STYLISTIC CONVENTIONS
93. UPDATE YOUR LINTER
94. ASSIGNMENT #CODECURE Establish CSS stylistic conventions. 6. SET STYLISTIC CONVENTIONS
95. #CODECURE - CSS Guidelines - Code Guide by @mdo - Wordpress CSS Coding Standards 6. SET STYLISTIC CONVENTIONS
99. ASSIGNMENT #CODECURE Establish HTML stylistic conventions. 6. SET STYLISTIC CONVENTIONS
100. #CODECURE - Code Guide by @mdo - Google HTML/CSS Style Guide - w3schools HTML(5) Style Guide 6. SET STYLISTIC CONVENTIONS
104. ALWAYS GIVE A REASON
105. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
106. Invest in Documentation STEP SEVEN
108. THE BIG IDEA #CODECURE The right documentation can clarify how our code is organized and works. 7. INVEST IN DOCUMENTATION
110. ASSIGNMENT #CODECURE Spruce up helpful comments 
 and delete useless ones. 7. INVEST IN DOCUMENTATION
114. DON’T SAY WHAT SAY WHY
116. ASSIGNMENT #CODECURE Standardize your documentation system. 7. INVEST IN DOCUMENTATION
117. KSS: Knyle Style Sheets
118. JSDoc
119. ASSIGNMENT #CODECURE Spend some time organizing 
 your README. 7. INVEST IN DOCUMENTATION
120. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
121. Publish & Party STEP EIGHT
122. BLOG POST PARTY
123. THE BIG IDEA #CODECURE You’ve learned a lot! Share that with the world and give yourself a pat on the back! 8. PUBLISH & PARTY
124. ASSIGNMENT #CODECURE Write a retrospective blog post on the work you’ve done. 8. PUBLISH & PARTY
125. ASSIGNMENT #CODECURE Share your blog post internally 
 and publicly. 8. PUBLISH & PARTY
126. THE CODE CURE 1. Take Inventory 2. Evaluate Tools 3. Naming Conventions 4. Emphasize Clarity 5. Modularize 6. Stylistic Conventions 7. Documentation 8. Publish & Party
127. NOW GET GOING! Assignment list available at mattwondra.com / @mattwondra THANKS!