Handlebars.js basic

Expression - {{body}}
Compilation - Handlebars.compile
Execution -  template(context)
Escaping - {{expression}}
Non-escaping - {{{expression}}} or Handlebars.SafeString
Block - {{#each}}
Content goes here.
{{/each}}
Helper - Handlebars.registerHelper, {{#helperName name="value"}}
Path - {{author.name}}, or ../parentName
Helper and data name Conflict - this.name or ./name
Comments - {{!-- --}}
Literals -  literal values passed to them either as parameter arguments or hash arguments
Partials - Handlebars.registerPartial, {{> partialName name="value" }}
Built-In Helpers - if, else, unless, each, with, lookup, log

scaffold to make js library support amd and commonjs

Here is the scaffold using IIFE (Immediately-Invoked Function Expression):

(function (root, factory) {
  if(typeof define === "function" && define.amd) {
    // Now we're wrapping the factory and assigning the return
    // value to the root (window) and returning it as well to
    // the AMD loader.
    define(["postal"], function(postal){
      return (root.myModule = factory(postal));
    });
  } else if(typeof module === "object" && module.exports) {
    // I've not encountered a need for this yet, since I haven't
    // run into a scenario where plain modules depend on CommonJS
    // *and* I happen to be loading in a CJS browser environment
    // but I'm including it for the sake of being thorough
    module.exports = (root.myModule = factory(require("postal")));
  } else {
    root.myModule = factory(root.postal);
  }
}(this, function(postal) {
  // module code here....

  var sub;
  var ch = postal.channel("myModule");
  var myModule = {
    sayHi:function() {
      ch.publish("hey.yall", { msg: "myModule sez hai" });
    },
    dispose: function() {
      sub.unsubscribe();
    }
  };

  return myModule;
}));

Here is the reference blog:
http://ifandelse.com/its-not-hard-making-your-library-support-amd-and-commonjs/

Bootstrap 3.x review

We are based on Bootstrap!!!!! Semantics, reusable, customizable

We are using HTML5 for semantics tags!!!

<article>    Defines an article
<aside>    Defines content aside from the page content
<details>    Defines additional details that the user can view or hide
<figcaption>    Defines a caption for a <figure> element
<figure>    Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>    Defines a footer for a document or section
<header>    Specifies a header for a document or section
<main>    Specifies the main content of a document
<mark>    Defines marked/highlighted text
<nav>    Defines navigation links
<section>    Defines a section in a document
<summary>    Defines a visible heading for a <details> element
<time>    Defines a date/time

Variables:
    colors (grayscale and semantic),
    Scaffolding (bg-color, text-color),
    Links (link-color, link-hover-color)
    Typography (font-family, font-size, line-height, headings)
    Icons (icon-font-path, icon-font-name)
    Components (padding vertical/horizontal, line-height, border-radius, active-color, active-bg, caret-width-base)
    transitions
    animations
    opacity
    placeholder

Mixin: Use mixins, like size(), sizable(), opacity()

color/background color
border
spacing (padding/margin)
font weight (400, 500, 600)
font size (xs, sm, default, md, lg, xl, )
h1-h6
text
floating (pull-left, pull-right)
pull/push
variables (font-size-base, line-height-base)
alignment (text-left, center, right, justify, nowrap) - we need a mx-text-wrap
list (either ul/li, or div/div, list-inline, list-unstyled)
block (p, pre, pre-scrollable)
table
contextual (active, success, info, warning, danger)
forms (form-group, form-control, inline-form, input-group, input-group-addon, form-horizontal, .form-control-static)
input: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color
textarea
checkbox/radio
select
validation states (.has-warning, .has-error, or .has-success)
button: Use the button classes on an <a>, <button>, or <input> element.
button-style:default, primary, success, info,warning, info, danger, link (.btn-block to span the full width of a parent)
accessibility: additional text hidden with the .sr-only class (screen-reader)
utility class: states: active, disabled,
images (img-responsive, center-block, img-rounded, img-circle, img-thumbnail)

Contextual colors
Contextual backgrounds
close
Carets
pull-left/pull-right/navbar-left/navbar-right
center-block
clearfix
show/hidden/invisible (block element, sr-only)
Print classes

Inline text elements (mark, del, s, ins, u, small, strong, em, )

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).