Skip to content

Instantly share code, notes, and snippets.

View nolanlawson's full-sized avatar

Nolan Lawson nolanlawson

3.1k followers · 40 following
View GitHub Profile
@nolanlawson
nolanlawson / chrome.results.json
Last active October 8, 2022 16:40
Raw data - updated selector benchmark
View chrome.results.json
{
"benchmarks": [
{
"name": "Scoping - classes - RHS",
"bytesSent": 0,
"measurement": {
"name": "total",
"mode": "performance",
"entryName": "total"
},
@nolanlawson
nolanlawson / index.html
Created August 27, 2022 15:55
Layout thrashing browser optimization 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 / .gitignore
Created August 25, 2022 21:01
Repro another tachometer issue
View .gitignore
node_modules
@nolanlawson
nolanlawson / index.html
Last active August 6, 2022 22:59
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 August 4, 2022 19:16
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 July 22, 2022 20:34
Repro SWC wasm
View .gitignore
node_modules
@nolanlawson
nolanlawson / index.html
Created July 11, 2022 21:41
Test @font-face in shadow DOM
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 July 10, 2022 15:49
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 July 6, 2022 18:08
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 June 30, 2022 18:46
Separate styles versus concatenated styles benchmark
View .gitignore
node_modules