Web Development: metaprogramming to reduce effort and friction

Developing medium and large websites means you should optimize your code, both on the server and on the client. This article will focus on techniques that front-end web developers should use to help reinforce and streamline good practices.

Code to a standard

Code to a standard.  If you develop with others, write that standard (any and all conventions) down.  Wikis are good for this. Create tools to automatically check to ensure code meets that standard.

Syntax Checking and Linting

Syntax checking can be done in real time with many source editors / IDEs.  Syntax checking and LINTing can easily be added to source control (git, SVN) hooks.  This is invaluable.

Comment Defensively

Comments should not be an afterthought.  Comments should be used to quickly instruct developers who have never seen the code before.  Good advice for documentation:

• Use JavaDoc-style commenting (standard blocks of code that can succinctly describe packages, classes, and functions). Parse your library comments with a documentation-creation library.
• Include dependencies in your Doc Blocks.  If a file foo.js depends on bar.js and fizz.js, a comment towards the top of foo.js should include a statement such as
  

  /**
   * This is foo.js.  It does the following stuff:
   * ...
   * @depend bar.js fizz.js
   * @license MIT license: http://www.opensource.org/licenses/mit-license.php
   * @author Carbonphyber <email@address.org>
   * /

  
  The benefit to this is twofold: it describes to other developers what dependencies are assumed. It also allows you to use a script such as Juicer to assemble dependencies.

Let scripts do the lifting

There are lots of repetitive mundane tasks in web development.  Write scripts to do this for you

• Lint + syntax check your code before adding to source control
  Use pre-commit hooks in your source control to prevent obvious (syntax) errors or deviations from your convention (lint).
• Automatically minify + munge your front-end code (CSS & JavaScript) and shrink your images.
  Programs like YAHOO! yui_compressor, Google Closure Compiler, JSMin, and many others are built for this.  They can be combined together with projects like Juicer (a Ruby Gem) and S3up
• Deploy to your server(s): development, staged, and production codebases and data.
  This is usually a multi-step process and deployment tools such as Capistrano (a Ruby Gem) are tailored to do much of this for you.
• Log errors encountered: web server errors, server-side language errors/warnings, invalid markup, JavaScript errors) and average page load (both time and weight; this should be done with web analytics).
• Crawl your site and look for problems.
  Tools like Selenium allows you test flows.  You can also use crawlers like Xenu’s Link Sleuth and Google Webmaster Tools for 404s found on your site.