Skip to content

Instantly share code, notes, and snippets.

Avatar

Lea Verou LeaVerou

View GitHub Profile
@LeaVerou
LeaVerou / detect_custom_elements.js
Last active Apr 21, 2022 — forked from ebidel/highlight_custom_elements.js
Get a list of custom elements used on a page
View detect_custom_elements.js
// Highlights all custom elements on the page.
// 7/31/2016: updated to work with both shadow dom v0 and v1.
// To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html
var allCustomElements = [];
function isCustomElement(el) {
const isAttr = el.getAttribute('is');
// Check for <super-button> and <button is="super-button">.
return el.localName.includes('-') || isAttr && isAttr.includes('-');
@LeaVerou
LeaVerou / dabblet.css
Created Feb 28, 2022
Overriding presentational HTML
View dabblet.css
/**
* Overriding presentational HTML
*/
div {
background: pink;
}
@LeaVerou
LeaVerou / dabblet.css
Created Dec 13, 2021
Negative opacity
View dabblet.css
/**
* Negative opacity
*/
body { background: red }
@supports (opacity: -3.1415926535) {
body { background: green }
}
@LeaVerou
LeaVerou / tape-to-mocha.js
Last active Nov 2, 2021
Shim to migrate Tape tests to Mocha tests
View tape-to-mocha.js
// Migrate Tape tests to Chai tets (used by Mocha)
// This will not get you 100% of the way, but it will get you most of the way there (depending on your tests).
// I mainly only had to rewrite tests that used subtests (`t.test()`): For those, I used `describe` for the outer test, and converted `t.test()` to `test()`
import { assert } from '@esm-bundle/chai';
assert.ok = assert.isOk.bind(assert);
assert.pass = assert.isOk.bind(assert, true);
assert.end = () => {}; // no-op
assert.plan = () => {}; // no-op, doesn't seem to be needed with WTR
@LeaVerou
LeaVerou / settings.json
Created Aug 3, 2021
VS Code Solarized Light that looks like Atom’s Solarized Light (WIP)
View settings.json
{
"workbench.colorTheme": "Solarized Light",
"editor.fontFamily": "Consolas, Menlo, Monaco, 'Courier New', monospace",
"editor.insertSpaces": false,
"editor.inlineSuggest.enabled": true,
"editor.fontSize": 14.5,
"editor.renderWhitespace": "boundary",
"editor.codeLens": false,
"editor.inlayHints.fontFamily": "Consolas, Menlo, Monaco, 'Courier New', monospace",
"diffEditor.codeLens": true,
View colorNotebook.md

Test

let color = new Color("p3", [0, 1, 0]);
let redgreen = color.range("red", {
	space: "lch", // interpolation space
	outputSpace: "srgb"
});
redgreen(.5); // midpoint
View colorNotebook.md

Tab's example

let middleRed = new Color("rgb(100 0 0)");
let middleGreen = new Color("rgb(0 100 0)");
let mixed = middleRed.mix(middleGreen, -.2, {space: "srgb"});

middleRed.hue;
mixed.hue;
@LeaVerou
LeaVerou / dabblet.css
Created Mar 27, 2021
LCH vs HSL colors for the same lightness
View dabblet.css
/**
* LCH vs HSL colors for the same lightness
*/
div {
width: 100%;
height: 6em;
background: linear-gradient(to right, var(--stops));
--stops: gray, gray;
--l: 50%;
View dabblet.css
/**
* Extrapolation
*/
@keyframes funky {
to {
background: gray;
}
}
View colorNotebook.md

Lightness/darkness adjustments

How to lighten/darken

let color = new Color("hsl(20, 100%, 30%)");

// HSL lightness adjustment
let lighter = color.clone();