Adam Schwartz adamschwartz

## as-hot-page-script.js
(() => {
  let root = document.documentElement

  let timeout
  let removeBanner = () => {
    if (root.children[2]?.tagName === 'DIV') {
      if (console && console.clear) console.clear()
      return root.children[2].remove()
    }


## hot-page-banner-remover.js
(() => {
  let root = document.documentElement

  let timeout
  let remove = () => {
    if (root.children[2]?.tagName === 'DIV') {
      if (console && console.clear) console.clear()
      return root.children[2].remove()
    }


## --color-rgb-varying-opacity-example.html
<!doctype html>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">

<style visible>
  :root { --color-rgb: 8, 10, 60 }
</style>

<style>

## ios-safari-box-shadow-circle-bug-repro.html
<title>iOS Safari bug: incorrect rendering of box-shadow on 19.2px square element with 50% border-radius</title>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">

<style>
  html {
    font-size: 16px;
  }

## plink-plonk.js
/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

## pre-2020-google-search-results.css
/* Version 3. Updated Sep 5, 2022 */

#search a:has(>br):has(>h3):has(>div) br {
  display: none;
}

#search a:has(>br):has(>h3):has(>div) h3 {
  display: block;
}

## scroll-overflow-proof-of-concept.html
<!DOCTYPE html>
<html>
  <head>
    <title>&shy;</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <style>
      * {
        box-sizing: border-box;
      }

## subdomain-input.html
<form>
  <div prefix-editor suffix=".adamschwartz.com" spellcheck="false" autocomplete="false">
    <input type="text">
  </div>
</form>

<script>
  (() => {
    const editorEl = document.querySelector('[prefix-editor]')
    const inputEl = editorEl.querySelector('input')

## rainbow-donut-spinner.html
<style>
  :root {
    --background: #000;
    --rainbow-1: #e91e63;
    --rainbow-2: #9c27b0;
    --rainbow-3: #3f51b5;
    --rainbow-4: #2196f3;
    --rainbow-5: #00bcd4;
    --rainbow-6: #4caf50;
    --rainbow-7: #cddc39;

## gist:099acd44bd6a1b6eb9e6b716eb0dfd16
▲ ● ■
	(() => {
	let root = document.documentElement

	let timeout
	let removeBanner = () => {
	if (root.children[2]?.tagName === 'DIV') {
	if (console && console.clear) console.clear()
	return root.children[2].remove()
	}
	<!doctype html>

	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, width=device-width">

	<style visible>
	:root { --color-rgb: 8, 10, 60 }
	</style>

	<style>
	<title>iOS Safari bug: incorrect rendering of box-shadow on 19.2px square element with 50% border-radius</title>

	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, width=device-width">

	<style>
	html {
	font-size: 16px;
	}
	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.

	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)()
	/* Version 3. Updated Sep 5, 2022 */

	#search a:has(>br):has(>h3):has(>div) br {
	display: none;
	}

	#search a:has(>br):has(>h3):has(>div) h3 {
	display: block;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<style>
	* {
	box-sizing: border-box;
	}
	<form>
	<div prefix-editor suffix=".adamschwartz.com" spellcheck="false" autocomplete="false">
	<input type="text">
	</div>
	</form>

	<script>
	(() => {
	const editorEl = document.querySelector('[prefix-editor]')
	const inputEl = editorEl.querySelector('input')
	<style>
	:root {
	--background: #000;
	--rainbow-1: #e91e63;
	--rainbow-2: #9c27b0;
	--rainbow-3: #3f51b5;
	--rainbow-4: #2196f3;
	--rainbow-5: #00bcd4;
	--rainbow-6: #4caf50;
	--rainbow-7: #cddc39;