Wiki

Frontend Development Style Guide

General

Use 2 spaces to indent HTML, CSS and JavaScript. You can set up your editor/IDE to use two spaces for tabs automatically or to convert tabs to spaces.

HTML

Whenever possible, always use HTML5 Doctype to ensure that features that we want will react the way that we wan't it to. Without a proper Doctype, the browser will render in quirksmode making features act different in different browsers.

Doctype

<!DOCTYPE html>

Always use an alt attribute for image tags. Use descriptive text for semantically rich images and empty alt tags for decorative images.

Alternate Text

<img alt="" src="bullet.gif">

<img alt="Description of the logo image" src="logo.gif">

<img alt="A girl doing a handstand" src="girl-handstand.jpg">

Tables should only be used for tabular data. Try your best not to use tables for layout.

Tabular Data

<table>
   <caption>Sales Performance</caption>
   <tr>
       <th scope="col">Name</th>
       <th scope="col">Q1 Sales</th>
   </tr>
   <tr>
       <th scope="row">James Dean</th>
       <td>Over 9,000!</td>
   </tr>
</table>

Alphabetize Attributes

Try your best to alphabetize tag attributes to prevent repeating attributes.

<img alt="" class="" height="" id="" src="" width="">

If you want to use the latest browser version go ahead and use HTML5Shiv and make sure that the pages looks good on older browsers. If the target browser is lower than IE9, don't use HTML5 tags that are not part of older version of HTML since HTML5Shiv is very slow.

JavaScript

Basic JavaScript

/*jslint browser: true, unparam: true, windows: true, forin: true, nomen: true, indent: 2 */
/*globals mixpanel */

(function ($, Namespace) {
 'use strict';

 var SubNamespace = (Namespace.SubNamespace = {}),
   privateVariable,
   $selecta = $('.selecta'),
   css = {
     position: 'relative',
     overflow: 'hidden'
   },
   json = {
     "hello": "world",
     "thank": "you"
   };

 SubNamespace.verbNoun = function () {
   $selecta.css(css);
 };

 SubNamespace.adjectiveNoun = function () {
 };

 SubNamespace.isSomething = function () {
 };

 SubNamespace.hasSomething = function () {
 };

}(window.jQuery, window.Namespace));

Always use a closure when creating JavaScript, setting things from global that a particular JavaScript needs as parameters of the closure. This will allow lower rewrite if and when we decide to make our code AMD compliant.

Basic AMD Module

/*jslint browser: true, unparam: true, windows: true, forin: true, nomen: true, indent: 2 */
/*globals define, mixpanel */

(function (factory) {
 'use strict';

 if (typeof define === 'function' && define.amd) {
   define(['jquery', 'namespace'], factory);
 } else {
   (window.Namespace = window.Namespace || {}).SubNamespace = factory(window.jQuery, window.Namespace);
 }
}(function ($, Namespace) {
 'use strict';

 // Insert the code inside the closure on the above example.

 return Namespace.SubNamespace;
}));

Use JSLint to verify both our formatting and syntax while trying not to set any unnecessary overrides to the default JSLint settings other than the above. We're not using JSHint since it's more opinionated than JSLint. In a perfect world we would use the default settings /*jslint */.

Use single quote for strings except for object literals that need to be passed in as strict JSON.

Start Prefixing DOM manipulation object variables with $ eg $selecta so we can differentiate what is and isn't a DOM manipulation object.

PascalCase for namespace and instantiable objects, camelCase for properties and methods, UPPER_CASE for constants, and lower_case for variables.