Coding: important + invisible

The unseen best practices in coding and why they matter.

web development process

Design is all about the stuff you can see – the clean flow of information, the pretty pictures, the right choice of colors to inspire your audience. No way. Give me Times New Roman and #000 (black)/#fff (white) any day.

So, this is probably why I never made the design team.

Instead, I work on the structure that supports those designs, and helps them respond to different devices and load in your browser window – whichever one you choose to use. Any code I write needs to be written for flexibility, so you’re not boxed in later on in your site’s lifespan. It must be updateable, efficient, and able to respond to a myriad of user possibilities with relative grace.

The most important coding efforts are the ones you can’t see. So today, I want to highlight a few best practices that I use when coding here at The Simons Group, and why they matter to your project.

Version Control

What It Is:

Version control allows us to take snapshots of the project code so we can see exactly what’s changing over time. It also makes it very easy for me to share my code and work on it collaboratively with other developers.

Why It Matters:

We’re always looking for ways to be more efficient while we’re on the clock. Having sound version control practices in place dramatically reduces troubleshooting time by illuminating precise changes and creating several points in history we can easily roll back to as needed. It can also help to quickly recover in the case of a new update causing a compatibility issue.

DRY Coding

What it is:

DRY stands for Don’t Repeat Yourself. DRY coding means you’ve taken time to think about what you’re going to do with the code, and organized things into a clean bundle. For example, if you have a single primary color in the site, you’ve stored that as a variable (using a language like SASS) so that you call it once instead of writing it out everywhere.

Why it matters:

Again – efficiency is key. Say in two years, your company goes through a rebrand and changes its color from #273758 (medium blue) to # 010825 (dark blue). Think of how simple and seamless this change is if you only need to make it in one place.

It matters to browsers, too. Speed matters, down to milliseconds, whether you’re going for search engine ranking or user experience. Sites with WET (write everything twice) or CRY (constantly repeating yourself) coding create redundancy, which leads to larger page sizes and longer loading times.

Development Tools

What they are:

Sometimes the magic lies in good runtime libraries and package managers (like Node.js, Bower) that help developers quickly add in new features, code snippets, and extensions that can be used in the site immediately.

Sometimes it’s in the setup – using a fast local development environment like Vagrant, or a tool like Browser Sync to improve coding efficiency. Or the right text editor to code (my favorite is Atom) and sync flawlessly with your version control program.

Why they matter:

Coding is like woodworking – part skill and part tools. Having the right suite of development tools at hand, and being versed in using them appropriately, is the hallmark of an experienced developer. Tools might enable functionality, or just make development time more meaningful.

The beauty in efficient coding lies beneath the surface.

So don’t ask me to help you understand which colors work well together. Instead, call me when you need a coding ninja, silent, swift and dangerous with a pair of {brackets}.

How do you use coding to support web design? Tell us about it in the comments?

Leave a Reply

Your email address will not be published. Required fields are marked *