HTML

Handlebars/Templating

Handlebars - Is a server side templating language that renders into HTML and then sends to the browser.

{{{ body }}} - triple “stash” is used when….

{{ component }} - double “stash” is used when…

Conditionals

If block helper

{{#if }} {{/#if}}

Each block helper

{{#each }}} {{/#each}}

Handlebars Docs http://handlebarsjs.com/builtin_helpers.html

Canvas/HTML5

HTML Canvas

established a section for creating shapes and free-form polygons on a designated area. Used to draw web graphics on a page.

canvas tag

used to capture canvas size via an “ID” and then selected through the DOM.

canvas.getContext("2d")

used to initialize the canvas for 2d or 3d polygons

ctx

context used to select/create polygons

ctx.fillStyle = “#ffffff”;

what hex color the rectangle will be.

How to fill a rectangle:

CSS

ctx.fillRect (
0, ← x coordinate start
0, ← y coordinate start
0, ← how far to fill/stretch horizontally/x
0, ← how far to fill/stretch vertically/y
)

HTML/JS

 <canvas id="myCanvas" width="600px" height="400px">
 </canvas>

 <script>
   var canvas = document.getElementById("myCanvas");
   var ctx = canvas.getContext("2d");
   ctx.fillStyle = "#133180";
   ctx.fillRect(0, 0, 600, 120);
 </script>

Miscellaneous Section Notes

Markdown Cheat Sheet

Markdown Reference

Markdown Emoji Reference Sheet

Mac Emoji (keyboard shortcut): CTRL + CMD + Space