Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
367 followers · 294 following
View GitHub Profile
@tomhodgins
tomhodgins / element-replace-children.js
Last active September 15, 2020 14:41
A polyfill for parentNode.replaceChildren()
// Polyfill for parentNode.replaceChildren()
// Spec: https://dom.spec.whatwg.org/#dom-parentnode-replacechildren
// Docs: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/replaceChildren
// Gecko implementation: https://github.com/mozilla/gecko-dev/blob/master/dom/base/nsINode.cpp#L2027
// Webkit implementation: https://github.com/WebKit/webkit/blob/master/Source/WebCore/dom/ContainerNode.cpp#L958
// Source: https://gist.github.com/tomhodgins/14451f123e1878e766c9568ecce13878
if (typeof Element.prototype.replaceChildren !== 'function') {
Object.defineProperty(Element.prototype, 'replaceChildren', {
configurable: true,
writable: true,
@tomhodgins
tomhodgins / deno-or-browser-tagged-html-template-function.js
Created September 11, 2020 00:43
This tagged template for HTML literals works in all modern browsers and Deno
if ('Deno' in globalThis) {
globalThis.DOMParser = (await import('https://deno.land/x/deno_dom/deno-dom-wasm.ts')).DOMParser
}
function html(taggedTemplateString = [''], ...expressions) {
const nodes = []
const functions = new Map
const strings = typeof taggedTemplateString === 'string'
? [taggedTemplateString]
: taggedTemplateString
@tomhodgins
tomhodgins / count-down-element.html
Created September 10, 2020 14:03
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Count Down Element</title>
<script type=module>
import html from 'https://v2.crocdn.com/_plugins/html.js'
class CountDown extends HTMLElement {
constructor() {
@tomhodgins
tomhodgins / custom-aspect-ratio-property-example.html
Created September 5, 2020 16:23
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aspect Ratio Custom Property</title>
<script type=module>
// Run on load, resize, and 'reprocess' events
[
'load',
'resize',
@tomhodgins
tomhodgins / time-errors.js
Created September 4, 2020 14:33
let start = performance.now()
for (
let count = 250 * 1000;
count --> 0;
) {
console.error('oops')
}
let end = performance.now()
@tomhodgins
tomhodgins / deno-dom-wasm.test.js
Last active August 31, 2020 01:03
import {Document, DOMParser} from './deno-dom-wasm.ts'
import {assert} from 'https://deno.land/[email protected]/testing/asserts.ts'
const parseIntoHTMLDocument = (string = '') => new DOMParser().parseFromString(
String(string),
'text/html'
)
const html = `
<h1>Dummy HTML Content</h1>
@tomhodgins
tomhodgins / parsing-html-syntax-in-browser-deno-and-node.mjs
Created August 29, 2020 23:15
// Deno Support
if ('Deno' in globalThis) {
globalThis.DOMParser = (await import('https://deno.land/x/deno_dom/deno-dom-wasm.ts')).DOMParser
}
// Node Support
if ('process' in globalThis) {
const jsdom = (await import('jsdom')).default.JSDOM
globalThis.DOMParser = class {
@tomhodgins
tomhodgins / to-string-to-json.js
Created August 28, 2020 15:11
You can define how an object stringifies with String() and toString(), and how it represents itself when converted to JSON
({
value: 'hello world',
toString() { return `stringified that's: ${this.value}` }
}).toString()
// "stringified that's: hello world"
JSON.stringify({
value: 'hello world',
toJSON() { return [{JSONified_thats: this.value}] }
@tomhodgins
tomhodgins / deep-combinator.html
Created August 23, 2020 23:54
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deep Combinator</title>
<style>
[--deep] h1,
[--deep] span {
color: red;
}
@tomhodgins
tomhodgins / markup-through-the-decades.md
Created August 20, 2020 22:09

here's an example of some text content, and a variety of markups for it:

This is a headline
This is a paragraph

troff