• semantic templates easily
• loads from a CDN

  <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
  <script>
  // compile the template
  var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
  // execute the compiled template and print the output to the console
  console.log(template({ doesWhat: "rocks!" }));
  </script>

• can use liquid code formatting {{thing}} to use objects values in text
• {{#with object}} can populate the template with the object values called out
• can use {{#each objectCollection}} to make lists for the entire collection
• can make helpers to run short bits of code
• can escape special characters or leave them as raw, depending on comments
• invoking a script in the html (with <script> tags) will need to be done multiple times for all of the templates you want but they can be then passed over to any JS files easily for DOM manipulation.
• we always need to pass a context object in to a template in the js to have the html render from
• you write helpers in JS with a special notation, which then become functions that can be called.
• block helpers can take in whatever is between the open/close brackets and pass it in to a helper function

• flex operates as a 1-directional ordering of a container's elements
• it will only wrap when dictated and when defining the direction of the flex, you have now modified it's start/end locations to reflect accordingly.
• with only a couple lines you can do complex float-like behavior that is more legible and easier to apply.

Complete all steps of this tutorial

• justify-content is weird how it warps the 'writing' direction. It's much like inverting gravity, it takes a few tries to re-orient.
• this isn't too bad as long as you keep the current working axis clear in your head and can use compound flex-flow statements to make things more concise.

Reference