Skip to content

Instantly share code, notes, and snippets.

Domenic Denicola domenic

Block or report user

Report or block domenic

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@domenic
domenic / library-consumer.mjs
Created Jul 11, 2019
Readonly Sets attempt
View library-consumer.mjs
import { languagesSet } from "./some-library.mjs";
// Allowed
languagesSet.keys();
languagesSet.entries();
languagesSet.forEach(l => console.log);
languagesSet.size;
languagesSet.values();
// Will throw TypeError
@domenic
domenic / engine-ua-sniffer.js
Last active Sep 6, 2019
Rendering engine UA sniffer
View engine-ua-sniffer.js
// This is a minimal UA sniffer, that only cares about the rendering/JS engine
// name and version, which should be enough to do feature discrimination and
// differential code loading.
//
// This is distinct from things like https://www.npmjs.com/package/ua-parser-js
// which distinguish between different branded browsers that use the same rendering
// engine. That sort of distinction is maybe useful for analytics purposes, but
// for differential code loading it is overcomplicated.
//
// This is meant to demonstrate that UA sniffing is not really that hard if you're
@domenic
domenic / tostring-in-js.md
Last active Jul 9, 2019
ToString() in JavaScript
View tostring-in-js.md

ToString() in JavaScript

I am posting this as a gist because I am too lazy to figure out my blog. TODO: move it to https://domenic.me/ one day.

A lot of specifications use the ToString() abstract operation. (What's an abstract operation?) For example, any web specification which uses Web IDL's DOMString type (i.e., its basic string type) will convert incoming values using ToString(). Similarly, various parts of the JS specification itself perform ToString(). One example is the Error constructor, which we will refer to going forward.

If you are trying to implement or polyfill such a specification in JavaScript, how do you do it? For example, given

function ErrorConstructorPolyfill(message) {
@domenic
domenic / after-markdown-conversion.html
Created Apr 26, 2019
Working mode before and after
View after-markdown-conversion.html
<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8">
<title>Working Mode — WHATWG</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#3A7908">
<link rel="icon" href="https://resources.whatwg.org/logo.svg">
<link rel="stylesheet" href="/style/shared.css">
<link rel="stylesheet" href="/style/subpages.css">
@domenic
domenic / difference.md
Last active Jan 16, 2019
Set.prototype.difference, simplified
View difference.md

Context: https://github.com/tc39/proposal-set-methods/issues/50

Proposed spec texts

Set.prototype.difference(arg), minimalist

  1. If Type(this) is not Object, or this does not have a [[SetData]] internal slot, throw a new TypeError exception.
  2. If Type(arg) is not Object, or arg does not have a [[SetData]] internal slot, throw a new TypeError exception.
  3. Let diffList be a List containing all elements that are in this.[[SetData]] but are not in arg.[[SetData]], using SameValueZero to determine identity. (Optional: formalize this with a loop that operates on the Lists.)
  4. Let newSet be ? OrdinaryCreateFromConstructor(%Set%, "%SetPrototype%", « [[SetData]] »).
@domenic
domenic / link-stuff.md
Last active Dec 22, 2018
Revamping link fetching and stuff
View link-stuff.md
@domenic
domenic / html-style.html
Created Jul 31, 2018
HTML Standard inline stylesheet
View html-style.html
<style>
.status { min-height: 0.6em; font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; margin: -2em 0 0 0; border-collapse: initial; border-spacing: initial; }
.status:hover { z-index: 9; }
.status:focus-within { z-index: 9; }
.status.wrapped > :not(input) { display: none; }
.status > input { position: absolute; left: 0; top: 0; width: 1em; height: 1em; border: none; background: transparent; padding: 0; margin: 0; }
.status > p { font-size: 0.6em; margin: 0; padding: 0; }
.status > p + p { padding-top: 0.5em; }
.status > p > strong { margin-left: 1.5em; }
.status > .support { display: block; }
@domenic
domenic / transfer.js
Created Jul 26, 2018
ArrayBuffer.prototype.transfer not-really-a-polyfill
View transfer.js
// This creates a copy, but does detach the source buffer
const mc = new MessageChannel();
ArrayBuffer.prototype.transfer = function () {
const result = this.slice();
mc.port1.postMessage(this, [this]);
return result;
};
@domenic
domenic / arch.js
Created Jun 3, 2018
Mozilla arch JS code
View arch.js
function curveInArchCoords(col, rows, cols) {
const mathX = col / cols * 2 * Math.PI;
const mathY = Math.cos(mathX);
const archY = (1 + mathY) / 2 * rows;
return archY;
}
function setFrame(frame, rows, cols, colOffset) {
for (const i of frame) {
frame[i] = 0;
View HTMLMarqueeElement.js
"use strict";
const conversions = require("webidl-conversions");
const utils = require("./utils.js");
const impl = utils.implSymbol;
const HTMLElement = require("./HTMLElement.js");
function HTMLMarqueeElement() {
throw new TypeError("Illegal constructor");
You can’t perform that action at this time.