Code Reviews and the Art of Website Maintenance

Red Hospital Cross Inside Code BracketsEvery time someone visits your website they are presented with the HTML, CSS and JavaScript that make up the page. This is the client side code that is interpreted by a user’s browser to render the page. In previous posts I have talked about coding conventions and improving page speed. In this post I’ll talking more about the importance of reviewing and optimizing this code.

Review

When working on a site it is important to review the code as often as possible. Frequently as websites age and more developers have a chance to work on them, a websites code can become outdated and disorganized.

This is where a code review, preferably from a peer, can help by comparing techniques, eliminating redundancies and adding documentation. Here are some tips for reviewing a site’s HTML, CSS and JS to keep it current, clean and easy to update.

HTML

The site’s HTML code creates the page structure and presents the content. It is important to make sure this code is up to date as it not only impacts presentation but page speed and SEO as well. Make sure the code uses the proper tags and follows the standards laid out by W3C. Following current standards will ensure that both browsers and crawlers understand the content within your HTML.

When reviewing HTML, running the page through a validator is a great place to start. This will point out errors and make suggestions on how to improve your code. However, it’s not enough just to make sure the site’s HTML is valid. It is also important to make sure that it’s efficient. This means eliminating deprecated elements and attributes tags where possible. It’s a good rule of thumb to try and use as little HTML as possible, while still achieving the layout you want. Less is more.

CSS

A site’s CSS is what adds the look and feel to a site. Like HTML, CSS should adhere to W3C standards and the code should be run through a validator. Often, while a site may be using valid CSS, there can still be redundancies as styles are repeated with only slight differences. Using a well defined styles guide allows developers to know what they have to work with. This along with a coding convention such as OOCSSSMACSS or BEM will help keep the thing organized. Going through a code review as often as possible helps keep it up to date with current standards and eliminate unnecessary code bloat.

JS

As more and more sites rely heavily on JavaScript to collect and manipulate data, it’s increasingly important to make sure that it all works together properly. Similar to CSS, using coding conventions helps keep your code more organized and legible.

Organizing the script into small external files following a consistent naming convention allows only what is needed to be loaded on a page and helps make reviewing and debugging simpler. As with the other code reviews, this should be done as often as possible and using services like JSLint or JSHint can help streamline the process.

Compress

Once all the code is ready for production it’s important to compress it. This is usually done in three parts:

  1. Concatenating Files – This is the process in which all the individual files that make up the page, such as all the JS files, are combined into one single file to be loaded with the page. This allows the browser to make fewer file requests and saves on load time.
  2. Eliminating White Space or “Minifying” – Removing all the blank spaces, while making the file hard to work with, reduces the file size and allows it to be parsed faster.
  3. Compressing Files – This can help feather reduce the size of the files. Usually done at the caching stage GZIP compression is most commonly used and will help improve load time.

These 3 steps are usually handled at the server level allowing you to work with well formatted and organized files, while serving compressed versions to users.

Repeat

Technology is always improving. What was a normal practice yesterday maybe out of date by tomorrow. That’s why it is important to always review and refine a website. It often helps to look at a website as a piece of digital property. Just like a physical building every once in a while something will need to be maintained, fixed or replaced. If you don’t update your site, it’ll eventually turn to digital dust.