jonathantneal

Browser technologies and accepted input types

“Structured objects” is more precisely structured-cloneable JavaScript values: primitives, plain objects, arrays, maps, sets, dates, blobs, files, typed arrays, and more—but generally not functions, DOM nodes, symbols, or custom prototype behavior.

Category	Technology	Accepted input / payload
Storage	localStorage / sessionStorage	String keys and values. Other values are implicitly converted to strings; objects require explicit serialization such as JSON.
Storage	Cookies	Strings encoded using cookie syntax.
Storage	IndexedDB	Structured-cloneable values. Keys are restricted to numbers, dates, strings, binary values, or arrays of valid keys.
Storage	Cache Storage API	Request → Response pairs. Response bodies can contain text, binary data, blobs, or streams.

jonathantneal

const getNodeId = async (element: Element) => {
  const selectors = getUniqueSelectors(element)

  const root = (await cdp().send("DOM.getDocument", { depth: -1 })).root

  let nodeId = root.nodeId

  for (const selector of selectors) {
    if (nodeId !== root.nodeId) {
      const next = await cdp().send("DOM.describeNode", { nodeId })

jonathantneal

export const uuid = crypto.randomUUID ? crypto.randomUUID.bind(crypto) : ''.replace.bind([ 1e7 ] + -1e3 + -4e3 + -8e3 + -1e11, /[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16))

jonathantneal

// Define the KeyboardEvent.accelKey getter as the platform modifier key
KeyboardEvent.prototype.__defineGetter__(
	'accelKey',
	KeyboardEvent.prototype.__lookupGetter__(
		// The modifier key is meta for Apple devices, otherwise control
		(navigator.platform ? /MacIntel|iPhone|iPad/.test(navigator.platform) : /iPad|iPhone|Mac OS X/.test(navigator.userAgent)) ? 'metaKey' : 'ctrlKey'
	)
)

jonathantneal

ShadowRoot QSA Part Polyfill

This polyfill lets you use CSS ::part() selectors in querySelector and querySelectorAll on ShadowRoot.

The script is 442 bytes minified, 300 bytes gzipped.

Usage

Include this polyfill somewhere in your document.

jonathantneal

Focus Starting Point

Focus Starting Point lets you access and observe the focus starting point.

The library is 989 bytes, 554 bytes gzipped.

Example Usage

jonathantneal

interface Iterator<T, TReturn = any, TNext = undefined> {
	next(): {
		done: boolean
		value: T
	}

	/** Returns an iterator of the elements with the given mapping function applied. */
	map<TT>(
		/** A mapping function to call on every element of the iterator. */
		callback: (value: T) => TT

jonathantneal

Overlay Taxonomy

This is a defined taxonomy for overlay things on the web. A taxonomy is a way of organizing things into groups and subgroups based on shared characteristics. These definitions intend to reflect concepts already defined in or strongly inferred from existing W3C specifications and proposals. They do not necessarily reflect what exactly an element, attribute, property, or method of the same name does on the web.

Term	Description
overlay	Content that is displayed in a distinct layer over other content.
modal	An overlay that is blocking, interrupting the user flow and preventing access to other content.
non-modal	An overlay that is non-blocking, allowing access to other content.
dialog	A modal overlay, usually containing an action or task to perform.

jonathantneal

// @ts-check

import * as fs from 'node:fs'

/** Fetches JSON returns the result with narrow typing. */
export let fetchJSON = /** @type {(input: RequestInfo | URL, init?: RequestInit) => any} */ (
	async (/** @type {string} */ input, config = any) => {
		const response = await fetch(input, config)
		const responseJSON = await response.json()

jonathantneal

// @ts-check

/** Creates a new Request. */
export const create = /** @type {(input: RequestInfo | URL, init?: RequestInit) => Request} */ (
	(input, config = any) => new Request(input, config)
)

/** Stringifies a Request into JSON. */
export const stringify = /** @type {(request: Request) => Promise<StringifiedRequest>} */ (async (request) => {
	/** URL of the request. */