mundi morgado mundizzle

In the olden days, HTML was prepared by the server, and JavaScript was little more than a garnish, considered by some to have a soapy taste.

After a fashion, it was decided that sometimes our HTML is best rendered by JavaScript, running in a user's browser. While some would decry this new-found intimacy, the age of interactivity had begun.

But all was not right in the world. Somewhere along the way, we had slipped. Our pages went uncrawled by Bing, time to first meaningful paint grew faster than npm, and it became clear: something must be done.

And so it was decided that the applications first forged for the browser would also run on the server. We would render our HTML using the same logic on the server and the browser, and reap the advantages of both worlds. In a confusing series of events a name for this approach was agreed upon: Server-side rendering. What could go wrong?

In dark rooms, in hushed tones, we speak of colours.

Cheat sheet: strings

Strings are primitive values in JavaScript and immutable. That is, string-related operations always produce new strings and never change existing strings.

Working with strings

Literals for strings:

const str1 = 'Don\'t say "goodbye"'; // string literal

Cheat sheet: Arrays

JavaScript Arrays are a very flexible data structure and used as lists, stacks, queues, tuples (e.g. pairs), etc. Some

Using Arrays

Creating Arrays, reading and writing elements:

	/* Using a JavaScript proxy for a super low code REST client */
	// via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg
	// also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3
	// also see https://github.com/fastify/manifetch
	// also see https://github.com/flash-oss/allserver
	// and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb

	const createApi = (url) => {
	return new Proxy({}, {
	get(target, key) {

	/**
	* Sets up a DOM MutationObserver that watches for elements using undefined CSS
	* class names. Performance should be pretty good, but it's probably best to
	* avoid using this in production.
	*
	* Usage:
	*
	* import cssCheck from './checkForUndefinedCSSClasses.js'
	*
	* // Call before DOM renders (e.g. in <HEAD> or prior to React.render())

	/* CSS Custom Properties */

	:root {
	--font-family-default: 'Merriweather', serif;
	--font-family-alt: 'Merriweather Sans', sans-serif;

	--font-color-default: #b1a18;
	--font-color-alt: #f5f5f3;

	--font-link-default: #a62339;

	// // LUI Next Colors
	// // LUI Now colors live in @lendi-ui/color package
	import hexToRgba from 'hex-to-rgba';

	export const isHex = (str: string) => str.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/);

	type Shade = Partial<950 \| 900 \| 800 \| 700 \| 600 \| 500 \| 400 \| 300 \| 200 \| 100 \| 50 \| 25 \| 0>;
	type Format = 'hexadecimal' \| 'rgba';
	type Category = 'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning' \| 'info' \| 'shade' \| 'focus';
	type ColorObject = Partial<{ [key in Shade]: { value: string; format: Format } }>;

	const { existsSync } = require('fs');
	const { execSync } = require('child_process');

	// ================
	// Check existence.
	// ================

	const distFolderExists = existsSync('dist');
	const srcFolderExists = existsSync('src');

	/*
	Helper to mock DOM methods, for
	when an element might not exist.
	*/
	const getDomFallback = () => {
	return {
	// Props.
	children: [],
	className: '',
	classList: {

	html:not([data-has-css-animation='true']) {
	@include remove-css-animation;
	}

	@media (prefers-reduced-motion: reduce) {
	@include remove-css-animation;
	}