Frontend Best Practices

bootstrap.md

Bootstrap Best Practices

General

• Only style what you need. Create classes or IDs to allow targeting of specific elements.

Containers

• Use container to create padding and margins that center based on screen width.
• Use container-fluid to allow for expansion to the whole screen width while keeping a natural padding.

Grids

• Make use of xs, sm, md, lg for responsive layout depending on screen sizes
  • xs: phones
  • sm: tablets
  • md: laptops
  • lg: bigger screens
• Make use of hidden-sm, hidden-md, ... to hide things and visible-sm, visible-md, ... to display things based on screen sizes.

Typography

• Use .lead to emphasize text (larger font, more padding)
• .text-* applies to all text in the HTML tag. Examples include .text-justify, .text-right, .text-center, .text-nowrap, .text-left.
• Use list-unstyled and list-inline to remove default styles of lists e.g. removing bullets and paddings.

Resources

• Free Themes: http://startbootstrap.com/
• Sites using Bootstrap: http://expo.getbootstrap.com/

javascript.md

JavaScript Best Practices

General

• Abstract common object methods into prototype. This prevents objects from inheriting complete structures and take up excessive memories.
• Avoid using var too much and use comma extensions.
  • Helps on performance
  • Helps readability of lists of variables declared.
  • Avoid declaring using var within loops.
• Make use of namespaces in Javascript files (convention syntax with capitalization)

Public/Private Methods of objects

If we want to abstract a given object, e.g. ARMORY into public and private methods,

var ARMORY = {
  weaponList = [ *list of weapon Objects *];
  armorList = [ *list of armor Objects *];
  removeWeapon = function(...){};
  replaceWeapon = function(...){};
  removeArmor = function(...){};
  replaceArmor = function(...){};
  makeWeaponRequest: function(...){};
  makeArmorRequest: function(...){};
}

We need to make the following changes:

• Use an immediately invoked function expression (IIFE)
• Initiate local private method with var (and group them at the top for convention and best practices)
• Build public methods in a return statement, which are assigned back to the object once it's immediately invoked.

var ARMORY = (function(){
  var weaponList = [ *list of weapon Objects *];
  var armorList = [ *list of armor Objects *];
  
  var removeWeapon = function(...){};
  var replaceWeapon = function(...){};
  var removeArmor = function(...){};
  var replaceArmor = function(...){};
  
  return {
    makeWeaponRequest: function(...){};
    makeArmorRequest: function(...){};
  };
})();

• In the above examples, only makeWeaponRequest and makeArmorRequest can be accessed from the ARMORY object, all other objects and variables are private.

Global Imports

• Avoid use of global variables even in modules, since referring back to scopes can be resource-intensive, and the code is harder to maintain.
• Instead use global imports which creates faster local variables that are more clear in source.
• We do this by passing the global parameter as a parameter in the IIFE.

var wartime = true;
var ARMORY = (function(war){
  var weaponList = [ *list of weapon Objects *];
  var armorList = [ *list of armor Objects *];
  
  var removeWeapon = function(...){};
  var replaceWeapon = function(...){};
  var removeArmor = function(...){};
  var replaceArmor = function(...){};
  
  if (war) { ... };
  
  return {
    makeWeaponRequest: function(...){};
    makeArmorRequest: function(...){};
  };
})(wartime);

Warnings/Notes

• === compares both types and contents. It seeks a "strict" equality. Examples:
  • "4" == 4 -> true
  • "4" === 4 -> false
  • true == 1 -> true
  • false == 0 -> true
  • true === 1 -> false
  • false === 0 -> false
• Avoid the use of with and eval at all costs!
  • Use var assignments instead of with to be explicit with object nesting.
  • Use JSON.parse() instead of eval if we want to parse a JSON string (eval may run malicious scripts)
• Use toFixed to handle decimal precision in Javascript
• Use parseFloat and parseInt to convert stringified numbers created by toFixed into floats and ints respectively.

Speed Testing

• Use console.time and console.timeEnd to measure runspeed of algorithm or process.