Skip to content

Instantly share code, notes, and snippets.

Avatar

Jonathan Neal jonathantneal

View GitHub Profile
@jonathantneal
jonathantneal / 0.README.md
Last active Dec 7, 2022
Focus Starting Point
View 0.README.md

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

View iterator-prototype-helpers-polyfill.d.ts
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 Nov 17, 2022
Dialog Terminology
View README.md

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 Aug 23, 2022
Fetch JSON returns the result with narrow typing
View fetchJSON.js
// @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 Aug 23, 2022
Create a Request, Stringify a Request into JSON, Hydrate JSON back into a Request
View Request.js
// @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 Aug 7, 2022
So You Think You Know Astro Quiz
View QUIZ.md

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 Jul 31, 2022
CSS ui-monospace polyfill (448 bytes minified, 182 gzipped)
View ui-monospace.css
/* 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),
@jonathantneal
jonathantneal / CSSStyleObserver.js
Created Apr 7, 2022
CSS Style Observer (695 bytes minified, 397 bytes gzipped)
View CSSStyleObserver.js
class CSSStyleRecord {
constructor(
/** @type {{ target: Element, propertyName: string, oldValue: string, newValue: string }} */
init
) {
Object.assign(this, init)
}
}
class CSSStyleObserver {
@jonathantneal
jonathantneal / HTMLElement-contentAvailableCallback.js
Last active Nov 22, 2021
HTMLElement with contentAvailableCallback (483 bytes / 317 gzip / 252 brotli, CC0-1.0)
View HTMLElement-contentAvailableCallback.js
{
let NativeHTMLElement = globalThis.HTMLElement, isContentAvailable = (element) => {
if (element.ownerDocument.readyState !== 'loading') return true
while (element) {
if (element.nextSibling) return true
element = element.parentElement
}
}
@jonathantneal
jonathantneal / glob.ts
Created Nov 2, 2021
Return a list of files, like import.meta.glob in Vite, without calling the files.
View glob.ts
import glob from 'fast-glob'
import nodeURL from 'url'
import process from 'process'
/** Returns pathnames matching the given pattern. */
const sync = (source: string) => glob.sync(source, options()) as string[]
/** Returns pathnames matching the given pattern. */
const async = (source: string) => glob(source, options()) as Promise<string[]>