Skip to content

Instantly share code, notes, and snippets.

Avatar

Jonathan Neal jonathantneal

View GitHub Profile
@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,
View flex-gap-polyfill.js
(
(
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
jonathantneal / README.md
Last active Apr 20, 2021
Installing Apps on M1
View README.md

Before Starting

Install Command Line Tools for macOS:

xcode-select --install

Quick Installs

@jonathantneal
jonathantneal / createObjectUID.ts
Created Nov 5, 2020
Create a unique identifier from an Object URL
View createObjectUID.ts
/** 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
jonathantneal / filteredObject.ts
Created Nov 5, 2020
filteredObject: Returns a new object with all entries that pass the test implemented by the provided function.
View filteredObject.ts
/** 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