Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
nolanlawson / index.html
Last active Aug 6, 2022
Layout thrashing demo
View index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
@nolanlawson
nolanlawson / extends.js
Created Aug 4, 2022
Detecting customelements define extends
View extends.js
// Via https://github.com/ungap/custom-elements/blob/bdb7c27/index.js#L428-L456
const SUPPORTS_EXTENDING_BUILT_IN_ELEMENTS = (() => {
const tagName = `extends-li-${Math.floor(Math.random() * 1000000)}`;
self.customElements.define(tagName, class extends HTMLLIElement {}, { extends: 'li' });
const elm = document.createElement('li', { is: tagName });
return elm.outerHTML.indexOf(tagName) !== -1;
})();
@nolanlawson
nolanlawson / .gitignore
Last active Jul 22, 2022
Repro SWC wasm
View .gitignore
node_modules
View index.html
<!doctype html>
<html>
<head>
<title>Test @font-face in shadow DOM</title>
</head>
<body>
<h1>Test @font-face in shadow DOM</h1>
<div></div>
<script>
document.querySelector('div')
@nolanlawson
nolanlawson / index.html
Last active Jul 10, 2022
Test Windows 11 emoji
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Windows 11 emoji</title>
<style>
.emoji-1 {
font-family: "Segoe UI Emoji";
}
.emoji-2 {
@nolanlawson
nolanlawson / index.html
Created Jul 6, 2022
Test event capture
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test event capture</title>
</head>
<body>
<h1>Test event capture</h1>
@nolanlawson
nolanlawson / .gitignore
Last active Jun 30, 2022
Separate styles versus concatenated styles benchmark
View .gitignore
node_modules
@nolanlawson
nolanlawson / chrome.results.json
Last active Jun 25, 2022
Raw numbers from Shadow DOM selector benchmark, Mac Mini
View chrome.results.json
{
"benchmarks": [
{
"name": "Scoping - classes",
"bytesSent": 0,
"measurement": {
"name": "total",
"mode": "performance",
"entryName": "total"
},
@nolanlawson
nolanlawson / chrome.results.json
Last active Jun 24, 2022
Raw numbers from shadow DOM selector benchmark
View chrome.results.json
{
"benchmarks": [
{
"name": "Scoping - classes",
"bytesSent": 0,
"measurement": {
"name": "total",
"mode": "performance",
"entryName": "total"
},
@nolanlawson
nolanlawson / max_dom_depth.js
Last active Jun 22, 2022
Measure max DOM depth
View max_dom_depth.js
Math.max(...[...document.querySelectorAll('*')].map(node => {
let count = 0
while ((node = node.parentNode)) { count++ }
return count
}))