Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
nolanlawson / index.html
Last active May 29, 2021
Embed codepen that uses canvas
View index.html
<!doctype html>
<html>
<body>
<h1>Embed codepen that uses canvas </h1>
<p>Click "Result":</p>
<iframe src="https://codepen.io/anon/embed/MWpOarg?height=450&theme-id=1&slug-hash=LYxKJzd&default-tab=js,result"></iframe>
</body>
</html>
View index.html
<!doctype html>
<html>
<body>
<div></div>
<script>
const FONT_FAMILY = '"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Twemoji Mozilla","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif';
const getTextFeature = (text2, color) => {
try {
const canvas = document.createElement("canvas");
canvas.width = canvas.height = 1;
@nolanlawson
nolanlawson / index.html
Created May 20, 2021
Console leak repro
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console leak repro</title>
</head>
<body>
<h1>Console leak repro</h1>
<button type="button" onclick="causeFakeLeak()">Cause a "leak"</button>
<script>
@nolanlawson
nolanlawson / index.html
Created May 13, 2021
Focus visible keyboard shortcuts repro
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus visible keyboard shortcuts repro</title>
<style>
*, *:after, *:before {
box-sizing: border-box;
}
:focus:not(:focus-visible) {
@nolanlawson
nolanlawson / index.html
Last active May 12, 2021
Ranges issue repro
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ranges issue repro</title>
</head>
<body>
<h1>Ranges issue repro</h1>
<label>
Click and then type here:
@nolanlawson
nolanlawson / stats.js
Created May 10, 2021
Count stats on a web page
View stats.js
({
numNodes: $$('*').length,
numCustomElements: $$('*').filter(_ => customElements.get(_.tagName.toLowerCase())).length,
numUniqueCustomElements: [...new Set([...$$('*').map(_ => _.tagName.toLowerCase())])].filter(_ => customElements.get(_)).length,
numRulesWithoutCrossOrigin: [...document.styleSheets].map(_ => { try { return _.cssRules.length } catch (e) { return 0 }}).reduce((a, b) => a + b, 0)
})
@nolanlawson
nolanlawson / index.html
Created May 4, 2021
Constructable styles benchmark
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Constructable styles benchmark</title>
<style>
label {
display: block;
margin: 20px 0;
@nolanlawson
nolanlawson / index.html
Created May 1, 2021
test emoji picker outside of body
View index.html
<!doctype heml>
<html>
<head>
<emoji-picker></emoji-picker>
<script src="https://unpkg.com/emoji-picker-element@1.4.0/index.js" type="module"></script>
<title>Test emoji picker outside body</title>
</head>
<body>
<h1>Test emoji picker outside body</h1>
</body>
@nolanlawson
nolanlawson / index.html
Last active Apr 23, 2021
Truly reduced repro of Firefox shadow style issue
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Truly reduced repro of Firefox shadow style issue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
pre {
position: fixed;
right: 0;
@nolanlawson
nolanlawson / index.html
Last active Apr 22, 2021
Repro Firefox shadow style issue
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Repro Firefox shadow style issue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
pre {
position: fixed;
right: 0;