Skip to content

Instantly share code, notes, and snippets.

@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>
@nolanlawson
nolanlawson / index.html
Created Apr 6, 2021
Selector perf test
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</title>
<style>
pre {
position: fixed;
right: 0;
@nolanlawson
nolanlawson / index.html
Created Mar 18, 2021
Repro Chrome emoji bug
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Repro Chrome emoji bug</title>
<style>
:root {
--button-primary-bg: royalblue;
--button-primary-text: white;
--button-primary-border: #214cce;
@nolanlawson
nolanlawson / index.html
Created Mar 17, 2021
Repro Firefox :focus-visible issue
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Repro Firefox :focus-visible issue</title>
<style>
a, a:visited {
color: blue
}
html {
@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>