The 3 'C's of Quality Coding

Somewhere between a "complete website overhaul" and "minor development updates" lies the sweet land of continual improvement. It’s filled with cool graphics that span from desktop to mobile with ease, and fill the viewer with a sense of graphical wonder. But what happens when the maestro behind these works of wonder goes on sabbatical and another is put upon the pedestal to carry on his work?

Believe it or not, developers are like snowflakes. Each has their own unique style and preferences. (Oh, and we also need unlimited access to caffeine so we don’t crash. I’m pretty sure it’s a law).

So it is that when a new champion shall arise and waltz into a new, beautiful and strange quagmire of code, he will immediately begin to see and feel just how strong his predecessor was at these 3 'C's of quality code.

The 3 'C's

Clean Code

One of the best qualities about us coders is that, as a whole, we’re lazy.

I think I’m in good company with this opinion since Agatha Christie and Bill Gates seem to agree. And giving their same reason, this is mostly because our laziness drives us to achieve the most we possibly can, through the least amount of effort.

So while a go-getter might spend 1 hour to dive in and write 100 lines of code to compress images on a site and speed up loading times, a lazy coder might:

• Spend 15 minutes daydreaming ("I wonder whats on TV tonight? Do we have coffee at home?")
• Spend another 15 minutes googling to find out if someone already has a code snippet that achieves the same thing (Honestly, 5 of that was probably looking at funny cat videos.)
• Spend 15 minutes more slapping together 10 lines of code and repurposing it from the codepen he found
• Retire from his exhausting effort to take a 10 minute power nap under his desk
• Use his next five minutes to repeatedly poke the go-getter just for funsies (or to beg him to go fetch more coffee).

Less effort, better results.

Lazy is better.

Comments

The next key to quality code is commenting. Comments look like " /* this for css */ " and " <!-- For html --> " and are almost purely for other developers to understand what certain parts of your code are for. This is also called documenting.

For instance, if I were to use a variable (something that holds onto a value) called 'date'. Another developer might have to dig through my code looking at how I use 'date' to figure out what it is. Or, I can just save him the time and comment "<!-- date used as current date in the navigation bar -->". Now he doesn't have to waste his time figuring it out (which he can use to go get me more coffee).

But commenting has fallen by the wayside in recent years for a lot of developers. This is most likely due to speed being prized over readability among developers. The challenge to keep comments so simple that Tod your Junior Dev’s brains don’t explode at the sight only tends to intensify the problem. But comments are key to ensuring that future coders are able to reap the benefits of your efforts.

Consistency

One last attribute of that dream-quality code is consistency. Consistency in this instance simply refers to using the same format each time you add a new line of code. Being familiar with standard web practice is important. And where there are no standards, it is doubly important to make sure your code is easily navigable and consistently formatted.

For example, when it comes to nesting loops or divs, it is usually best practice to tab or add three spaces to an inner element, but vertical spacing is irrelevant. However, let’s say you run into this little bad boy:



Suddenly it might be a much better idea care care about vertical spacing to clarify what’s happening and increase legibility like the following:

As you can see, this code is much more readable. Even if you’re not fully sure what this code is doing, the layout and comments give you a fair idea of its purpose. It’s simply printing out the third level items in a list, such as a dropdown menu.

Conclusion

I’m going to take a note from clean section here and keep this brief.

I.    Lazy coding is better coding (simplify).
II.  Other coders, while still superheroes, are not mind-readers. Comment your code.
III. Be consistent, people dig actually knowing what's going on.

Now go forth and code!