Ryan Johnson CITguy

Automatic Git Hook Installation for Node workflow

NOTE: This setup assumes that your project is for a shared NPM package and your workflow has a start script defined in package.json.

1. Git Hooks Directory

Recommendation: git-hooks/

Since git ignores the .git/ directory, you'll need to create a separate directory to house your version-controlled hooks. I'd recommend git-hooks/ to make its purpose obvious. Whatever name you give your hooks directory, you'll

Supporting IE

Below are details worth noting when considering to support or continue supporting Internet Explorer.

Facts

IE is no longer actively receiving new feature updates [needs reference]
IE11 is the only version still supported by Microsoft [needs reference]
IE11 is only receiving patches for critical security issues [needs reference]
IE11 has broken implemntations of valid, semantic HTML5 elements
- for unknown elements, browsers will style them as inline elements. This is problematic when you want to use valid semantic HTML5 elements to provide a11y support and the browser doesn't know about them.
As a workaround, you have to add additional markup (role="main", etc.) and CSS (main { display: block; }) in order to drag IE forward to modern times.

Web Dev Links

Miscellaneous links to stuff I find interesting or useful.

NPM Packages

style-dictionary - quickly generate design tokens for multiple platforms
docsify - simple documentation from markdown files

Bullet Journal (BuJo) Resources

Web Sites & Articles

Group Array of JavaScript Objects by Key or Property Value

Implementation

const groupBy = key => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5

setN(10);

	const applyTemplate = (templateElement, data) => {
	const element = templateElement.content.cloneNode(true);
	const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, () => NodeFilter.FILTER_ACCEPT);

	while(treeWalker.nextNode()) {
	const node = treeWalker.currentNode;
	for(let bindAttr in node.dataset) {
	let isBindableAttr = (bindAttr.indexOf('bind_') == 0) ? true : false;
	if(isBindableAttr) {
	let dataKeyString = node.dataset[bindAttr];

	* {
	font-size: 12pt;
	font-family: monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: black;
	cursor: default;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8" />
	<script src="templating.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

	<template id=t>