jonathantneal

if (globalThis.CSSStyleSheet) try {
	new CSSStyleSheet
} catch (error) {
	globalThis.CSSStyleSheet = ((
		{ prototype } = CSSStyleSheet,
		styledoc = document.implementation.createDocument(
			'http://www.w3.org/1999/xhtml',
			'style',
		),
		{ firstChild } = styledoc,

jonathantneal

/** Observes stylesheet lists and runs a callback whenever it encounteres added or removed stylesheets. */
export const createStyleSheetObserver = (/** @type {(addedSheets?: CSSStyleSheet[], removedSheets?: CSSStyleSheet[]) => void} */ callback) => {
	/** @type {Set<StyleSheetList>} Observed style sheet lists. */
	const sheetLists = new Set
	/** @type {Set<CSSStyleSheet>} Previously observed style sheets. */
	let lastSheets = new Set
	/** Observes style sheet on each animation frame. */
	const onAnimationFrame = () => {
		requestAnimationFrame(onAnimationFrame)
		/** @type {CSSStyleSheet[]} Observed StyleSheets after this frame. */

jonathantneal

CSS Container Queries Notes

Detecting a layout container

1. If the target rule represents a style rule;
2. If the target rule style contains a fallback contain property; 1. If the fallback contain property represents a layout container;
   1. For each element matching the selector of the target rule;
   2. Add the element to the list of layout containers, then;
   3. Add a fallback layout containment rule for that specific element.

jonathantneal

[
  "align-content",
  "align-items",
  "align-self",
  "alignment-baseline",
  "all",
  "animation",
  "animation-delay",
  "animation-direction",
  "animation-duration",

jonathantneal

function deepAssign(objectA, objectB) {
	for (var n in objectB) {
		var objectBN = objectB[n]

		if (objectBN === Object(objectBN)) {
			var objectAN = objectA[n]

			if (objectAN === Object(objectAN)) {
				objectA[n] = deepAssign(objectAN, objectBN)

jonathantneal

export default new Proxy(
	Object.entries({
		reset: 0,
		bold: 1,
		dim: 2,
		underline: 4,
		blink: 5,
		invert: 7,
		hidden: 8,
		black: 30,

jonathantneal

(
	(
		d,
		c = d.createElement('b').style,
		a = c.gap = 0,
		polyfillList = new WeakMap,
		ungapful = /^(normal|0px)+$/,
		polyfillNode = element => {
			if (polyfillList.has(element)) return
			polyfillList.set(element, true)

jonathantneal

Before Starting

Install Command Line Tools for macOS:

xcode-select --install

Quick Installs

jonathantneal

/** Returns a unique identifier tied to the document in the window on which it was created. */
const createObjectUID = (): string => URL.createObjectURL(new Blob()).slice(-5)

jonathantneal

/** Returns a new object with all entries that pass the test implemented by the provided function. */
function filteredObject<T>(object: { [s: string]: T } | ArrayLike<T>, predicate: (value: T, name: string, array: [string, T][]) => unknown): { [s: string]: T } {
	const newObject = Object.create(Object(object).prototype)
	const entries = Object.entries(object)
	for (const [name, value] of entries) {
		if (predicate(value, name, entries)) {
			Reflect.set(newObject, name, Reflect.get(object, name))
		}
	}
	return newObject