Skip to content

Instantly share code, notes, and snippets.

@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;
@nolanlawson
nolanlawson / index.html
Created Apr 22, 2021
Repro Firefox focusin event issue
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Repro Firefox focusin event issue</title>
</head>
<body>
<h1>Repro Firefox focusin event issue</h1>
<div>
@nolanlawson
nolanlawson / index.html
Created Apr 15, 2021
Adopted stylesheets benchmark
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adopted stylesheets benchmark</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
pre {
position: fixed;
right: 0;
@nolanlawson
nolanlawson / index.html
Created Apr 14, 2021
Selector perf test, more realistic scenario for attribute values
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selector perf test (more realistic scenario for attribute values)</title>
<style>
pre {
position: fixed;
right: 0;
@nolanlawson
nolanlawson / index.html
Created Apr 13, 2021
Test constructable stylesheet perf
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test constructable stylesheet perf</title>
<style>
pre {
position: fixed;
right: 0;
@nolanlawson
nolanlawson / index.html
Created Apr 10, 2021
<video controls> in modal dialog demo
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dialog element and shadow DOM example</title>
</head>
<body>
<button>Focusable button</button>
<button class="modal-button">Click to open modal dialog</button>