Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
nolanlawson / index.html
Last active Feb 21, 2021
Modal with inert demo
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal dialog with inert demo</title>
</head>
<body>
<button>Focusable button</button>
<button class="modal-button">Click to open modal dialog</button>
@nolanlawson
nolanlawson / index.html
Created Feb 13, 2021
Shadow dialog example
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>
@nolanlawson
nolanlawson / index.html
Created Dec 18, 2020
repro emoji-picker-element issue
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Repro emoji picker element issue</title>
</head>
<body>
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
<emoji-picker>
</emoji-picker>
@nolanlawson
nolanlawson / fake-indexeddb.js
Created Oct 19, 2020
Demo of emoji-picker-element working in Firefox private browsing
View fake-indexeddb.js
// Built version of fake-indexeddb using Browserify
// browserify -r fake-indexeddb -s FakeIndexedDB
// Also patched to expose FDBKeyRange
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.FakeIndexedDB = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
'use strict'
@nolanlawson
nolanlawson / index.html
Created Oct 17, 2020
emoji-picker tooltip example
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>emoji-picker tooltip demo</title>
<style>
.tooltip:not(.shown) {
display: none;
}
</style>
@nolanlawson
nolanlawson / index.html
Last active Jul 9, 2020
Demo heap snapshot retainment
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo heap snapshot retainment</title>
</head>
<body>
<h1>Demo heap snapshot retainment</h1>
<button>Add a memory leak</button>
@nolanlawson
nolanlawson / index.html
Created Jun 4, 2020
Test cross-origin etag
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test cross-origin etag</title>
</head>
<body>
<h1>Test cross origin etag</h1>
<pre id="display"></pre>
<script>
@nolanlawson
nolanlawson / indexeddb-usage.sh
Last active Feb 18, 2021
Calculate IndexedDB disk usage on Ubuntu, for Firefox, Chrome, and Epiphany Browser
View indexeddb-usage.sh
#!/usr/bin/env bash
set -e
if [ -z "$1" ]; then
PORT=3000
else
PORT=$1
fi
View index.html
<html>
<head><title>test fonts</title></head>
<body>
<h1>test fonts</h1>
<h2 style="font-family: Helvetica">Helvetica</h2>
<h2 style="font-family: system-ui">system-ui</h2>
<h2 style="font-family: sans-serif">sans-serif</h2>
<h2 style="font-family: Arial">Arial</h2>
</body>
</html>
@nolanlawson
nolanlawson / spy-add-event-listener.js
Created Nov 24, 2019
Attempt to spy on addEventListener
View spy-add-event-listener.js
window.__numDomListeners = 0
function spyAddListener (proto) {
const addEventListener = proto.addEventListener
proto.addEventListener = function () {
window.__numDomListeners++
console.log('add', this, arguments)
return addEventListener.apply(this, arguments)
}
}