Skip to content

Instantly share code, notes, and snippets.

View jonathantneal's full-sized avatar

Jonathan Neal jonathantneal

View GitHub Profile
@jonathantneal
jonathantneal / uuid.js
Created March 14, 2023 13:09
UUID Generator for Secure or Insecure Contexts (RFC 4122 Compliant)
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
jonathantneal / modifierKey.js
Created January 26, 2023 14:37
modifierKey for KeyboardEvent — 164 bytes / 140 bytes gzipped
// Define the KeyboardEvent.modifierKey getter as the platform modifier key
KeyboardEvent.prototype.__defineGetter__(
'modifierKey',
KeyboardEvent.prototype.__lookupGetter__(
// The modifier key is meta for Apple devices, otherwise control
/^(MacIntel|iPhone)$/.test(navigator.platform) ? 'metaKey' : 'ctrlKey'
)
)
@jonathantneal
jonathantneal / 0.README.md
Last active December 8, 2022 08:50
ShadowRoot QSA ::part() Polyfill

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
jonathantneal / 0.README.md
Last active December 7, 2022 14:35
Focus Starting Point

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

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
jonathantneal / README.md
Last active November 17, 2022 19:53
Dialog Terminology

Dialog Terms and Definitions

This is a list of definitions for dialog things on the web.

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. For example, the definition of ‘dialog’ is conceptual; it does not intend to cover the featureset or limits of a <dialog> element.

Term Description
dialog A prompt from the system to the user, usually containing an action or task to perform.
non-modal dialog A dialog that is non-blocking, allowing access to other content.
@jonathantneal
jonathantneal / fetchJSON.js
Created August 23, 2022 01:14
Fetch JSON returns the result with narrow typing
// @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
jonathantneal / Request.js
Created August 23, 2022 01:10
Create a Request, Stringify a Request into JSON, Hydrate JSON back into a Request
// @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. */
@jonathantneal
jonathantneal / QUIZ.md
Last active August 7, 2022 14:24
So You Think You Know Astro Quiz

So You Think You Know Astro

Ahoy, me celestial companions of coding! It be me, your humble gentlenaut of fortune, Cosmo, at ye service.

( An’ perhaps to some snooty static site scallywags an Ex-Sailor of the Astro Expanse... )

So, y’ think ye know Astro, do ye? Aye, then consider this cosmic challenge from ye ol’ quainty matey, Cosmo.

I will asks my riddles. Ye will gives ye answers.

@jonathantneal
jonathantneal / ui-monospace.css
Created July 31, 2022 23:16
CSS ui-monospace polyfill (448 bytes minified, 182 gzipped)
/* These rules are ignored when ui-monospace is supported. */
@font-face { font-family: ui-monospace; src:
/* MacOS (El Capitan +) */
local(Menlo-Regular),
/* Windows (11 +) */
local(CascadiaCode-Regular),
/* Windows (Vista +) */
local(Consolas),
/* Android */
local(RobotoMono-Regular),