/

Clean Code

Writing clean code has fundamental benefits and keeps everyone sane. We all know how the timeline crunch can get the best of our workflows. It’s tough to plan time for code reviews, scope changes, QA, and those fantastic Internet Explorer “gotcha!” bugs during a final sprint. The end of a project nears and it comes time to delegate work to teammates to meet that above-and-beyond timeline that will really set the client up for success. The last thing a team needs to deal with is tracking down unclosed tags and browser console errors.

Google “clean code.” You’ll get pages and pages of information, opinions, and contradictory ways to achieve it. Brunch is a fast-paced web design and development environment where we take pride in delivering on time and above expectations. We follow a few simple practices to drive consistency on the backend, and help us hit that delivery schedule:

  1. Implementing a file system and naming convention.
  2. Use tabs over spaces. 
  3. Comment your code and then comment some more.
  4. Cleanup, aisle legacy code. 

Folders, Files and Naming things

Reading someone else’s code and file structure is a lot like deciphering an alien language. That you don’t know the alphabet for. And uses conditional grammar. As a rosetta stone, our team has set up a standard development template system that helps us jumpstart our projects. It’s a living plan that grows as we learn, but the roots of it stay consistent. By default we use a tried and true framework, Bootstrap (with SASS), and a Gulp task runner. We’re focusing on implementing a BEM naming convention that works for us. All of this is wrapped up into a clean bare bones project package so that any developer on our team can spin a new project up and the rest of the team will be familiar with where all the code lives.

Tabs vs Spaces

I’m a tabber, hands down. I like to know when a div is closed. My code editor is even set to show tabs and spaces in red so I keep all my spacing nice and neat. Doing this allows me to collapse code blocks and separate chunks of a template out. This is extremely helpful when handing front-end code off to a CMS integration team and also helps to ensure you’re closing all tags properly. Spaces don’t do this well enough for my liking (and let’s not get into that debate today).

“My code editor is even set to show tabs and spaces in red”

Visible Tabs

Commenting

This is the last thing most developers want to do while in the zone turning 0’s and 1’s to magic, but it’s crucial. Take those few extra minutes to write out what each main code chunk is meant to do. Note major opening and closing containers as much as possible. Not only will you avoid making simple mistakes because you’ll catch them right away, but it will also help you take a step back to think about whether or not you’re coding cleanly. Teammates will also be able to jump in much quicker to review and resolve any potential issues, because they’ll actually know what they’re looking at (see also: alien language).

Cleanup

It’s the end of the day. You want to close the laptop and head to the hills, but not before going back and reviewing everything you’ve written and tidying up a bit. Remove any code that you’re not going to use or at least comment around it with a status so it doesn’t get lost and forgotten. We’re all guilty of leaving unnecessary blocks of code but if you don’t clean up your mess no one else will.

I must admit that I am the type of person who needs an orderly desk, everything in its correct place, and a plan that will carry my team and I to the end of the project. For me in web development, it all starts with the items listed above and all collaborators committed to sticking to them. Time, budget, resources, skill levels will all have an effect on how deliverables will come together but defining these standards from the start of any project will help ensure a smoother process and less frustrations.