Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
nolanlawson / index.html
Last active Jun 7, 2021
File input to Blob example
View index.html
<html>
<head>
<style>
div {
margin: 20px;
}
</style>
</head>
<body>
<h1>Convert file input to Blob</h1>
@nolanlawson
nolanlawson / protips.js
Last active May 31, 2021
Promise protips - stuff I wish I had known when I started with Promises
View protips.js
// Promise.all is good for executing many promises at once
Promise.all([
promise1,
promise2
]);
// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
if (somethingIsNotRight()) {
throw new Error("I will be rejected asynchronously!");
@nolanlawson
nolanlawson / index.html
Last active May 29, 2021
Embed codepen that uses canvas
View index.html
<!doctype html>
<html>
<body>
<h1>Embed codepen that uses canvas </h1>
<p>Click "Result":</p>
<iframe src="https://codepen.io/anon/embed/MWpOarg?height=450&theme-id=1&slug-hash=LYxKJzd&default-tab=js,result"></iframe>
</body>
</html>
View index.html
<!doctype html>
<html>
<body>
<div></div>
<script>
const FONT_FAMILY = '"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Twemoji Mozilla","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif';
const getTextFeature = (text2, color) => {
try {
const canvas = document.createElement("canvas");
canvas.width = canvas.height = 1;
@nolanlawson
nolanlawson / how-to-link-two-android-projects.md
Last active May 27, 2021
How to link an Android app to a local library project
View how-to-link-two-android-projects.md
@nolanlawson
nolanlawson / index.html
Created May 20, 2021
Console leak repro
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console leak repro</title>
</head>
<body>
<h1>Console leak repro</h1>
<button type="button" onclick="causeFakeLeak()">Cause a "leak"</button>
<script>
@nolanlawson
nolanlawson / index.html
Last active May 19, 2021
webpack bundle analyzer
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Webpack Bundle Analyzer</title>
<!-- viewer.js -->
<script>
@nolanlawson
nolanlawson / index.html
Created May 13, 2021
Focus visible keyboard shortcuts repro
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus visible keyboard shortcuts repro</title>
<style>
*, *:after, *:before {
box-sizing: border-box;
}
:focus:not(:focus-visible) {
@nolanlawson
nolanlawson / index.html
Last active May 12, 2021
Ranges issue repro
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ranges issue repro</title>
</head>
<body>
<h1>Ranges issue repro</h1>
<label>
Click and then type here:
@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)
})