Skip to content

Instantly share code, notes, and snippets.

Avatar

Jonathan Neal jonathantneal

View GitHub Profile
@jonathantneal
jonathantneal / README.md
Last active Sep 13, 2020
Create Fragment
View README.md

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 }) => {
View HTMLSelectorSlotElement.js
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
jonathantneal / README.md
Created Sep 7, 2020
Fetching Web Platform Data in NodeJS
View README.md

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')
View augmented.css.json
This file has been truncated, but you can view the full file.
[
{
"type": "Comment",
"value": "\n augmented-ui\n BSD 2-Clause License\n Copyright (c) James0x57, PropJockey, 2019\n",
"delimiterStart": "/*",
"delimiterEnd": "*/"
},
{
"type": "Space",
@jonathantneal
jonathantneal / events.js
Created Apr 10, 2020
Events: Polyfill missing Event constructors in Internet Explorer (864 bytes / 547 bytes gzipped)
View events.js
!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
jonathantneal / keyboard-key.js
Created Apr 9, 2020
KeyboardEvent Key: Polyfill the correct key names in Internet Explorer (577 bytes / 385 bytes gzipped)
View keyboard-key.js
!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
jonathantneal / globalThis.js
Created Apr 9, 2020
globalThis: Defines globalThis in all environements (107 bytes, 107 bytes gzipped)
View globalThis.js
Object.prototype.__defineGetter__('_t', function () {
return this
}), _t.globalThis = _t, delete Object.prototype._t
@jonathantneal
jonathantneal / closest.js
Created Apr 8, 2020
Closest, but with an extra argument to specify the ancestor to look up until
View closest.js
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
jonathantneal / getLogicalClientRect.js
Last active Feb 24, 2020
getLogicalClientRect - Return the size and position of an element relative to the viewport and the flow of content
View getLogicalClientRect.js
/** 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
You can’t perform that action at this time.