jonathantneal

Practical ARIA Tabs

This is a small guide to marking up fully accessible tabs. Consider using PostHTML ARIA Tabs as a practical solution.

The Rules

1. Add tablist role to the <ul> to indicate it contains tabs.
2. Add presentation role to each <li> to bypass its list item state.
3. Add tab role to each <a> to incidate it is an actual tab.
4. Add href and aria-controls to each <a> to reference its tab panel.

jonathantneal

/*! Microsoft EdgeHTML 13.10586 | Copyright (C) Microsoft. All rights reserved. */

address {
	display: block;
	font-style: italic;
}

article {
	display: block;
	unicode-bidi: embed;

jonathantneal

Fluid Aspect

fluid-aspect is a Sass mixin for creating intrinsic ratios in CSS. Intrinsic ratios allow elements to fill the width of their containing block and resize on the fly while maintaining their aspect ratio.

@include fluid-aspect($ratio, [$target]);

• $ratio: An aspect ratio represented as two numbers separated by a space. Defaults to 1:1
• $target: A selector targeting the element to be made fluid. Defaults to "> :first-child"

jonathantneal

/** Return a unique selector for a specific element. */
let getUniqueSelector = (/** @type {Element} */ element) => {
	/** Unique selector for this element */
	let selector = ''

	/** @type {Element} */
	let parent

	/** @type {number} */
	let nth

jonathantneal

Sprites, Glyphs, Icons, and Symbols

What is the difference between a sprite, a glyph, an icon, and a symbol? They are all images. They all represent objects, places, and ideas. What makes them different from one another?

A sprite is something you interface with. For instance, a sprite may represent a character or an item in a video game.

A glyph is a typographical character that represents something else. For example, the @ sign is a glyph that commonly represents the phrase at.

An icon is a direct representation of something else. For example, an icon that links to the contents of a hard drive would be a picture of a hard drive.

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

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[]>

jonathantneal

// 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

try {
	new CSSStyleSheet()
} catch {
	CSSStyleSheet = ((
		stylePtt = CSSStyleSheet.prototype,
		styleDoc = new Document(),
		styleDom = styleDoc.appendChild(document.createElement('style')),
		sheet
	) => Object.assign(stylePtt.constructor = function CSSStyleSheet() {
			if (!new.target) {

jonathantneal

/*
| bitmask | enumerable | configurable | writable | accessor |
| ------- | ---------- | ------------ | -------- | -------- |
| 0       |            |              |          |          |
| 1       |    YES     |              |          |          |
| 2       |            |     YES      |          |          |
| 3       |    YES     |     YES      |          |          |
| 4       |            |              |   YES    |          |
| 5       |    YES     |              |   YES    |          |
| 6       |            |     YES      |   YES    |          |