• HTML and CSS Best Practices
• Principles of Writing Consistent JavaScript
• Importance of JSLint
• Commenting made easy - JSDocs
• Tools for improving Development

• Never mix white spaces and tabs
• Check for indentation
• No extra spaces / tabs at the end of line / file
• Use SublimeText to convert between spaces and tabs
• The file .jshintrc does all the work. Just use it correctly.

if(condition) doSomething();

while(condition) iterating++;

for(var i=0;i<100;i++) someIterativeFn();

 // Use whitespace to promote readability

if ( condition ) {
  // statements
}

while ( condition ) {
  // statements
}

for ( var i = 0; i < 100; i++ ) {
  // statements
}var prop;

for ( prop in object ) {
  // statements
}

if ( true ) {
  // statements
} else {
  // statements
}

 // Bad
var foo = "";
var bar = "";
var qux;

// Good
var foo = "",
  bar = "",
  quux;
One Scope -> One var

 // Named Function Declaration
function foo( arg1, argN ) {

}

// Usage
foo( arg1, argN );

// Function Expression
var square = function( number ) {
  // Return something valuable and relevant
  return number * number;
};// Constructor Declaration
function FooBar( options ) {

  this.options = options;
}

// Usage
var fooBar = new FooBar({ a: "alpha" });

fooBar.options;

 // Functions with callbacks
foo(function() {
  // Note there is no extra space between the first paren
  // of the executing function call and the word "function"
});

// Function accepting an array, no space
foo([ "alpha", "beta" ]);
// Function accepting an object, no space
foo({
  a: "alpha",
  b: "beta"
});

// Single argument string literal, no space
foo("bar");

// Inner grouping parens, no space
if ( !("foo" in obj) ) {

}

 if (condition) {
  // statements
}

while (condition) {
  // statements
}

for (var i = 0; i < 100; i++) {
  // statements
}

if (true) {
  // statements
} else {
  // statements
}

• Single or Double - Doesn't matter
• ABSOLUTELY MUST BE CONSISTENT
• NEVER MIX QUOTES IN THE PROJECT

String:
typeof variable === "string"

Number:
typeof variable === "number"

Boolean:
typeof variable === "boolean"

Object:
typeof variable === "object"
Array:
Array.isArray( arrayLikeObject )
(wherever possible)

var number = 1,
  string = "1",
  bool = true;

string === number;

string === number + "";

+string === number;

bool === number;

+bool === number;

bool === string;

bool === !!string;

 // When only evaluating that an array has length,
// instead of this:
if ( array.length > 0 ) ...

// ...evaluate truthiness, like this:
if ( array.length ) ...



// When only evaluating that an array is empty,
// instead of this:
if ( array.length === 0 ) ...

// ...evaluate truthiness, like this:
if ( !array.length ) ...

// When only evaluating that a string is not empty,
// instead of this:
if ( string !== "" ) ...
// ...evaluate truthiness, like this:
if ( string ) ...
// When only evaluating that a string _is_ empty,
// instead of this:
if ( string === "" ) ...
// ...evaluate falsy-ness, like this:
if ( !string ) ...

// When only evaluating that a reference is true,
// instead of this:
if ( foo === true ) ...

// ...evaluate like you mean it, take advantage of built in capabilities:
if ( foo ) ...

// When evaluating that a reference is false,
// instead of this:
if ( foo === false ) ...
// ...use negation to coerce a true evaluation
if ( !foo ) ...
// ...Be careful, this will also match: 0, "", null, undefined, NaN
// If you _MUST_ test for a boolean false, then use
if ( foo === false ) ...

 // When only evaluating a ref that might be null or undefined, but NOT false, "" or 0,
// instead of this:
if ( foo === null || foo === undefined ) ...
// ...take advantage of == type coercion, like this:
if ( foo == null ) ...
// Remember, using == will match a `null` to BOTH `null` and `undefined`
// but not `false`, "" or 0
null == undefined

• You are not computer / compiler
• Don't save space by using short variable names
• Use meaningful variable names

 // Same code with improved names

function query( selector ) {
  return document.querySelectorAll( selector );
}

var idx = 0,
  elements = [],
  matches = query("#foo"),
  length = matches.length;

for ( ; idx < length; idx++ ) {
  elements.push( matches[ idx ] );
}

 // Naming strings

`dog` is a string

// Naming arrays

`dogs` is an array of `dog` strings// Naming functions, objects, instances, etc

camelCase; function and var declarations

// Naming pseudo-classes, constructors, prototypes, etc.

PascalCase; constructor function

// Naming regular expressions

rDesc = //;

functionNamesLikeThis;
variableNamesLikeThis;
ConstructorNamesLikeThis;
EnumNamesLikeThis;
methodNamesLikeThis;
SYMBOLIC_CONSTANTS_LIKE_THIS;

 function Device( opts ) {
  this.value = null;  // open an async stream,
  // this will be called continuously
  stream.read( opts.path, function( data ) {
    // Update this instance's current value
    // with the most recent value from the
    // data stream
    this.value = data;
  }.bind(this) );
  // Throttle the frequency of events emitted from
  // this Device instance
  setInterval(function() {
    // Emit a throttled event
    this.emit("event");
  }.bind(this), opts.freq || 100 );
}

 // underscore, _.bind()
function Device( opts ) {

  this.value = null;

  stream.read( opts.path, _.bind(function( data ) {

    this.value = data;

  }, this) );

  setInterval(_.bind(function() {

    this.emit("event");

  }, this), opts.freq || 100 );
}

 function Device( opts ) {
  var self = this;

  this.value = null;

  stream.read( opts.path, function( data ) {

    self.value = data;

  });

  setInterval(function() {

    self.emit("event");
  }, opts.freq || 100 );
}

var obj;

obj = { f: "foo", b: "bar", q: "qux" };

Object.keys( obj ).forEach(function( key ) {

  // |this| now refers to `obj`

  console.log( this[ key ] );

}, obj ); // <-- the last arg is `thisArg`

// Prints...
// "foo"
// "bar"
// "qux"

 // Bad:
function returnLate( foo ) {
  var ret;

  if ( foo ) {
    ret = "foo";
  } else {
    ret = "quux";
  }
  return ret;
}
// Good:

function returnEarly( foo ) {

  if ( foo ) {
    return "foo";
  }
  return "quux";
}

• Single lines above the code -> Subject
• Multiline commenting -> Very Good
• End of line commenting -> Prohibited

 var foo = function() {
  return true;
};  // semicolon here.


function foo() {
  return true;
}  // no semicolon here.

 if (x) {
  function foo() {}
}

//NO TO THIS var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is\
                just gravy.  Have a nice day.';
//USE CONCATENATION INSTEADvar myString = 'A rather long string of English text, an error message ' +
    'actually that just keeps going and going -- an error ' +
    'message to make the Energizer bunny blush (right through ' +
    'those Schwarzenegger shades)! Where was I? Oh yes, ' +
    'you\'ve got an error and all the extraneous whitespace is ' +
    'just gravy.  Have a nice day.';

//BAD // Length is 3.
var a1 = new Array(x1, x2, x3);
// Length is 2.
var a2 = new Array(x1, x2);
//GOODvar a = [x1, x2, x3];var a2 = [x1, x2];

//BADvar o = new Object();

var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;o2['strange key'] = 3;

//GOODvar o = {};

var o2 = {
  a: 0,
  b: 1,
  c: 2,
  'strange key': 3
};

Boolean('0') == true
'0' != true
0 != null
0 == []
0 == falseBoolean(null) == false
null != true
null != falseBoolean(undefined) == false
undefined != true
undefined != falseBoolean([]) == true
[] != true
[] == false
Boolean({}) == true
{} != true
{} != false

• SublimeLinter-jshint
  
• SublimeLinter-json
  
• SublimeLinter-phplint
  
• SublimeLinter-csslint
  
• SublimeLinter-html-tidy
  

 /**
 * Illustrates line wrapping for long param/return descriptions.
 * @param {string} foo This is a param with a description too long to fit in
 *     one line.
 * @return {number} This returns something that has a description too long to
 *     fit in one line.
 */
project.MyClass.prototype.method = function(foo) {
  return 5;
};