Javascript Templating Language and Engine— Mustache.js with Node and Express

Javascript Templating

Javascript templating is a fast and efficient technique to render client-side view templates with Javascript by using a JSON data source. The template is HTML markup, with added templating tags that will either insert variables or run programming logic. The template engine then replaces variables and instances declared in a template file with actual values at runtime, and convert the template into an HTML file sent to the client.

Mustache

Mustache is a logic-less template syntax. It can be used for HTML, config files, source code — anything. It works by expanding tags in a template using values provided in a hash or object. It is often referred to as “logic-less” because there are no if statements, else clauses, or for loops. Instead, there are only tags. Some tags are replaced with a value, some nothing, and others a series of values. mustache.js is an implementation of the mustache template system in JavaScript. It is often considered the base for JavaScript templating. And, since mustache supports various languages, we don’t need a separate templating system on the server side.

In the above, we see two braces around . This is Mustache syntax to show that it is a placeholder. When Mustache compiles this, it will look for the ‘name’ property in the object we pass in, and replace with the actual value, e,g, “Sherlynn”.

Mustache-Express If you intend you use mustache with Node and Express, you can use mustache-express. Mustache Express lets you use Mustache and Express together easily. To install: With Yarn: $ yarn add mustache-express or with NPM: $ npm install mustache –save

Coders — How to add source code to your Medium articles

So as I was writing an article pertaining to coding work, I knew that I could add Code blocks & Inline code as a feature provided by Medium. Code block To begin a code block, on a new line type in (triple backtick). Keyboard shortcut: ⌘ + Opt + 6 / Ctrl + Alt + 6. This is an example of a code block Inline code For inline code in a paragraph, type a single backtick ` to begin and end your code. Or highlight some text and press the backtick key. An example of an inline code Note: Code blocks and inline…

A Complete Guide to Flexbox

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

display This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

.container { display: flex; /* or inline-flex */ } Note that CSS columns have no effect on a flex container.

flex-direction the four possible values of flex-direction being shown: top to bottom, bottom to top, right to left, and left to right

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

.container { flex-direction: row | row-reverse | column | column-reverse; } row (default): left to right in ltr; right to left in rtl row-reverse: right to left in ltr; left to right in rtl column: same as row but top to bottom column-reverse: same as row-reverse but bottom to top

flex-wrap two rows of boxes, the first wrapping down onto the second By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container { flex-wrap: nowrap | wrap | wrap-reverse; } nowrap (default): all flex items will be on one line wrap: flex items will wrap onto multiple lines, from top to bottom. wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

flex-flow This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

.container { flex-flow: column wrap; }

justify-content flex items within a flex container demonstrating the different spacing options

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe; } flex-start (default): items are packed toward the start of the flex-direction. flex-end: items are packed toward the end of the flex-direction. start: items are packed toward the start of the writing-mode direction. end: items are packed toward the end of the writing-mode direction. left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start. right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end. center: items are centered along the line space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal. Note that that browser support for these values is nuanced. For example, space-between never got support from some versions of Edge, and start/end/left/right aren’t in Chrome yet. MDN has detailed charts. The safest values are flex-start, flex-end, and center.

There are also two additional keywords you can pair with these values: safe and unsafe. Using safe ensures that however you do this type of positioning, you can’t push an element such that it renders off-screen (e.g. off the top) in such a way the content can’t be scrolled too (called “data loss”).

align-items demonstration of differnet alignment options, like all boxes stuck to the top of a flex parent, the bottom, stretched out, or along a baseline

This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

.container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe; } stretch (default): stretch to fill the container (still respect min-width/max-width) flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules. flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules. center: items are centered in the cross-axis baseline: items are aligned such as their baselines align The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support), and deal with helping you prevent aligning elements such that the content becomes inaccessible.

align-content examples of the align-content property where a group of items cluster at the top or bottom, or stretch out to fill the space, or have spacing.

This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

normal (default): items are packed in their default position as if no value was set. flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction. flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction. center: items centered in the container space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end space-around: items evenly distributed with equal space around each line space-evenly: items are evenly distributed with equal space around them stretch: lines stretch to take up the remaining space