Skip to content

Instantly share code, notes, and snippets.

Avatar

Jonathan Neal jonathantneal

View GitHub Profile
@jonathantneal
jonathantneal / command.js
Last active Jul 25, 2021
Executable JavaScript Modules
View command.js
":" //#;exec /usr/bin/env node --input-type=module - $@<$0
import process from 'process'
const { argv } = process
console.log(argv)
@jonathantneal
jonathantneal / README.md
Last active Jul 20, 2021
React Custom Elements
View README.md

React Custom Elements

Use Web Components as React Components.

Usage

Import reactCustomElements as a module:

import * as reactCustomElements from 'https://gist.githack.com/jonathantneal/b3df57a4c59cd70e0d18437352586794/raw/reactCustomElements.esm.min.js'
@jonathantneal
jonathantneal / index.xml
Last active Jun 3, 2021
Example XML webpage
View index.xml
<!DOCTYPE xml [
<!ATTLIST xsl:stylesheet
id ID #FIXED '!'
xmlns:xsl CDATA #FIXED 'http://www.w3.org/1999/XSL/Transform'
version CDATA #FIXED '1.0'
>
<!ATTLIST xsl:output
doctype-system CDATA #FIXED 'about:legacy-compat'
method CDATA #FIXED 'html'
>
@jonathantneal
jonathantneal / esbuild-loader.js
Last active Jun 15, 2021
Node — Loads modules using esbuild. — `node --experimental-loader ./esbuild-loader.js`
View esbuild-loader.js
import { existsSync } from 'fs'
import { readFile } from 'fs/promises'
import { transform } from 'esbuild'
/** @typedef {{ conditions: string[], parentURL: string }} Context */
/** @typedef {(specifier: string, context: Context, defaultResolve: ResolveHook) => { url: string }} ResolveHook */
/** @typedef {(url: string, context: Context, defaultGetFormat: GetFormatHook) => { format: string }} GetFormatHook */
/** @typedef {(url: string, context: Context, defaultGetSource: GetSourceHook) => Promise<{ source: string | SharedArrayBuffer | Uint8Array }>} GetSourceHook */
/** Matches any JavaScript/TypeScript module. */
@jonathantneal
jonathantneal / ConstructableStylesheetPolyfill.js
Created May 11, 2021
Constructable Stylesheet Polyfill — 320 bytes / 226 bytes gzipped — https://wicg.github.io/construct-stylesheets/
View ConstructableStylesheetPolyfill.js
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
jonathantneal / createStyleSheetObserver.js
Created May 10, 2021
Some, like, useful functions when building cqfill. This gist may be deleted later.
View createStyleSheetObserver.js
/** 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
jonathantneal / README.md
Last active Apr 25, 2021
CSS Container Queries Notes
View README.md

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.
View all-css-property-names.js
[
"align-content",
"align-items",
"align-self",
"alignment-baseline",
"all",
"animation",
"animation-delay",
"animation-direction",
"animation-duration",
@jonathantneal
jonathantneal / deepAssign.js
Created Mar 8, 2021
Deep Assign - deeply copies all enumerable own properties from one source object to a target object
View deepAssign.js
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
jonathantneal / color.js
Created Feb 19, 2021
color.js - a color utility useful in a NodeJS terminal, console, command prompt
View color.js
export default new Proxy(
Object.entries({
reset: 0,
bold: 1,
dim: 2,
underline: 4,
blink: 5,
invert: 7,
hidden: 8,
black: 30,