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
Slide 2
Slide 2 text
MATT WONDRA
Senior Front-End
Web Developer
Slide 3
Slide 3 text
APARTMENT THERAPY THE KITCHN
Saving the world, one room at a time Inspiring cooks, nourishing homes
Slide 4
Slide 4 text
APARTMENT THERAPY
The Eight-Step Home Cure
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
FRONT-END DEVELOPMENT TEAM
+
Slide 7
Slide 7 text
MY CODE WAS A
MESS
Slide 8
Slide 8 text
WHO ELSE HAS
FELT THIS WAY?
Be honest! It’s OK!
Slide 9
Slide 9 text
BURN IT DOWN AND
START OVER
Slide 10
Slide 10 text
MAXWELL RYAN
THE EIGHT-STEP HOME CURE
“…the first things that follow us when we
move are our own bad habits.”
Slide 11
Slide 11 text
IS THERE ANY
CURE?
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
THE BIG IDEA
#CODECURE
A high-level description of how this step
promotes clean code.
Slide 14
Slide 14 text
ASSIGNMENT
#CODECURE
A 1- or 2-hour task related to this step,
to be completed with your team.
Slide 15
Slide 15 text
THE CODE CURE
is an iterative process,
not a one-time fix.
Slide 16
Slide 16 text
THE CODE CURE
is fully customizable,
so go nuts.
Slide 17
Slide 17 text
THE CODE CURE
is more about happiness
than clean code.
Slide 18
Slide 18 text
MAXWELL RYAN
THE EIGHT-STEP HOME CURE
“When you get your house in order,
other parts of your life just start to follow.”
Slide 19
Slide 19 text
Prepare
STEP ZERO
Slide 20
Slide 20 text
ASSIGNMENT
#CODECURE
Set up a README / developer manual.
0. PREPARE
Slide 21
Slide 21 text
#CODECURE
0. PREPARE
Shared by the team
Easy to access
Easy to update
Not too fiddly
Slide 22
Slide 22 text
ASSIGNMENT
#CODECURE
Plan a Code Cure schedule
with your team.
0. PREPARE
Slide 23
Slide 23 text
#CODECURE
0. PREPARE
2 hours each Friday 1 hour daily
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
Take Inventory
STEP ONE
Slide 26
Slide 26 text
THE BIG IDEA
#CODECURE
We can only solve the problems
we know about.
1. TAKE INVENTORY
Slide 27
Slide 27 text
ASSIGNMENT
#CODECURE
Give someone a guided tour of
your codebase.
1. TAKE INVENTORY
Slide 28
Slide 28 text
#CODECURE
1. TAKE INVENTORY
Slide 29
Slide 29 text
ASSIGNMENT
#CODECURE
Drop comment tags in your code to
help you find problems later.
1. TAKE INVENTORY
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
ASSIGNMENT
#CODECURE
Write down the biggest challenges
in your codebase and your goals for
The Code Cure.
1. TAKE INVENTORY
Slide 32
Slide 32 text
#CODECURE
Conflicts?
Confusions?
Anxieties?
1. TAKE INVENTORY
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
Evaluate Tools
STEP TWO
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
THE BIG IDEA
#CODECURE
Our tools can help enforce our habits and
make it hard to do the wrong thing.
2. EVALUATE TOOLS
Slide 37
Slide 37 text
ASSIGNMENT
#CODECURE
Set up asset pre-processing.
2. EVALUATE TOOLS
#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
Slide 70
Slide 70 text
ASSIGNMENT
#CODECURE
Get rid of your too-clever code.
4. EMPHASIZE CLARITY
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
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
Slide 74
Slide 74 text
Modularize
STEP FIVE
Slide 75
Slide 75 text
THE BIG IDEA
#CODECURE
Our code is easier to write, read, and
manage if every chunk only has
a single job.
5. MODULARIZE
Slide 76
Slide 76 text
YOU ONLY HAD
ONE JOB
Slide 77
Slide 77 text
ASSIGNMENT
#CODECURE
Break large chunks of unrelated code
into separate modules.
5. MODULARIZE
ASSIGNMENT
#CODECURE
Find modules that still feel too big
and write down all the jobs each
one is trying to do.
5. MODULARIZE
Slide 81
Slide 81 text
#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
Slide 82
Slide 82 text
ASSIGNMENT
#CODECURE
Break each job into its own module.
5. MODULARIZE
Slide 83
Slide 83 text
#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.
Slide 84
Slide 84 text
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
Slide 85
Slide 85 text
Set Stylistic
Conventions
STEP SIX
Slide 86
Slide 86 text
THE BIG IDEA
#CODECURE
Our code is much more readable when
it’s stylistically consistent throughout.
6. SET STYLISTIC CONVENTIONS
Slide 87
Slide 87 text
#CODECURE
6. SET STYLISTIC CONVENTIONS
Slide 88
Slide 88 text
ASSIGNMENT
#CODECURE
Establish JavaScript stylistic conventions.
6. SET STYLISTIC CONVENTIONS
Slide 89
Slide 89 text
#CODECURE
- Douglas Crockford’s Code Conventions
- Airbnb JavaScript Style Guide
- jQuery JavaScript Style Guide
6. SET STYLISTIC CONVENTIONS
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
UPDATE YOUR
LINTER
Slide 94
Slide 94 text
ASSIGNMENT
#CODECURE
Establish CSS stylistic conventions.
6. SET STYLISTIC CONVENTIONS
Slide 95
Slide 95 text
#CODECURE
- CSS Guidelines
- Code Guide by @mdo
- Wordpress CSS Coding Standards
6. SET STYLISTIC CONVENTIONS
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
ASSIGNMENT
#CODECURE
Establish HTML stylistic conventions.
6. SET STYLISTIC CONVENTIONS
Slide 100
Slide 100 text
#CODECURE
- Code Guide by @mdo
- Google HTML/CSS Style Guide
- w3schools HTML(5) Style Guide
6. SET STYLISTIC CONVENTIONS
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
ALWAYS GIVE A
REASON
Slide 105
Slide 105 text
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
Slide 106
Slide 106 text
Invest in
Documentation
STEP SEVEN
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
THE BIG IDEA
#CODECURE
The right documentation can clarify how
our code is organized and works.
7. INVEST IN DOCUMENTATION
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
ASSIGNMENT
#CODECURE
Spruce up helpful comments
and delete useless ones.
7. INVEST IN DOCUMENTATION
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
DON’T SAY WHAT
SAY WHY
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
ASSIGNMENT
#CODECURE
Standardize your documentation system.
7. INVEST IN DOCUMENTATION
Slide 117
Slide 117 text
KSS: Knyle Style Sheets
Slide 118
Slide 118 text
JSDoc
Slide 119
Slide 119 text
ASSIGNMENT
#CODECURE
Spend some time organizing
your README.
7. INVEST IN DOCUMENTATION
Slide 120
Slide 120 text
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
Slide 121
Slide 121 text
Publish & Party
STEP EIGHT
Slide 122
Slide 122 text
BLOG POST
PARTY
Slide 123
Slide 123 text
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
Slide 124
Slide 124 text
ASSIGNMENT
#CODECURE
Write a retrospective blog post on the
work you’ve done.
8. PUBLISH & PARTY
Slide 125
Slide 125 text
ASSIGNMENT
#CODECURE
Share your blog post internally
and publicly.
8. PUBLISH & PARTY
Slide 126
Slide 126 text
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
Slide 127
Slide 127 text
NOW GET GOING!
Assignment list available at
mattwondra.com / @mattwondra
THANKS!