jonathantneal

Create Fragment

The createFragment function returns an HTML fragment from a string.

[
  { name: 'Hedral', coat: 'Tuxedo', legs: 4 },
  { name: 'Pillar', coat: 'Ticked Tabby', legs: 3 },
].reduce(
  (table, { name, coat, legs }) => {

jonathantneal

HTMLSelectorSlotElement = ((internal, filter) => class HTMLSelectorSlotElement extends HTMLElement {
	constructor() {
		internal.set(super(), [
			this.attachShadow({ mode: 'open' }),
			document.createElement('slot'),
			document.createElement('slot'),
			new MutationObserver(HTMLSelectorSlotElement.prototype.connectedCallback.bind(this)),
			[]
		])
	}

jonathantneal

Fetching Web Platform Data in NodeJS

Should there be a need to fetch web platform data in NodeJS, here are some dependency-less functions that will return feature data from W3C, CanIUse, and MDN Browser Compatibility Data.

Dependency-Free Fetching in NodeJS

NodeJS includes an http and https library which can perform network requests.

const https = require('https')

jonathantneal

[
  {
    "type": "Comment",
    "value": "\n  augmented-ui\n  BSD 2-Clause License\n  Copyright (c) James0x57, PropJockey, 2019\n",
    "delimiterStart": "/*",
    "delimiterEnd": "*/"
  },
  {
    "type": "Space",

jonathantneal

This work was moved to https://github.com/csstools/tokenizer

jonathantneal

!function () {
	let WindowEvent = Event
	try {
		new WindowEvent('')
	} catch (error) {
	' Animation AudioProcessing BeforeUnload Clipboard Close Composition Custom Error Focus Gamepad HashChange IDBVersionChange Input Keyboard Message Mouse Mutation OfflineAudioCompletion PageTransition PaymentRequestUpdate Pointer PopState Progress Storage Track Transition UI WebGLContext Wheel'
	.split(' ').forEach(function (eventName) {
		eventName += 'Event'
		let NativeEvent = window[eventName] || WindowEvent
		let nativeEventName = NativeEvent === WindowEvent || eventName === 'InputEvent' ? 'Event' : eventName

jonathantneal

!function () {
	let KeyboardEventPrototype = KeyboardEvent.prototype
	let KeyboardEventPrototypeKeyDescriptor = Object.getOwnPropertyDescriptor(KeyboardEventPrototype, 'key')
	let KeyboardEventPrototypeKeyGetter = KeyboardEventPrototypeKeyDescriptor.get
	KeyboardEventPrototypeKeyDescriptor.get = function () {
		return {
			27: 'Escape',
			29: 'NonConvert',
			32: ' ',
			37: 'ArrowLeft',

jonathantneal

Object.prototype.__defineGetter__('_t', function () {
	return this
}), _t.globalThis = _t, delete Object.prototype._t

jonathantneal

closest = (function (Object, error) {
	return function (targetElement, selectors, untilElement) {
		let document = Object(Object(targetElement).ownerDocument)
		let rootElement = Object(document.documentElement)
		let Element = Object(document.defaultView).Element
		untilElement = untilElement || rootElement
		if (typeof Element === 'function' && targetElement instanceof Element && untilElement instanceof Element) {
			while (untilElement.contains(targetElement)) {
				if (targetElement.matches(selectors)) {
					return targetElement

jonathantneal

/** Return the size and position of an element relative to the viewport and the flow of content. */
function getLogicalClientRect(element) {
	var props = ['left', 'top', 'right', 'bottom', 'width', 'height'] // physical properties
	var rects = element.getBoundingClientRect()
	var style = getComputedStyle(element)
	var isDirectionRTL = /^r/.test(style.direction)           // whether content flow is right to left
	var isWriteModeVrt = /^[hlr]/.test(style['writing-mode']) // whether content flow is vertical
	var isWriteModeInv = /-[br]/.test(style['writing-mode'])  // whether content flow is inverted
	var startI = isWriteModeVrt ? isDirectionRTL ? 2 : 0 : isDirectionRTL ? 3 : 1 // physical property index, starting parallel to content flow
	var startB = isWriteModeVrt ? isWriteModeInv ? 3 : 1 : isWriteModeInv ? 2 : 0 // physical property index, starting perpendicular to content flow