Adam Schwartz adamschwartz

## --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
▲ ● ■

## matter-js-fix-compound-body-hull-after-part-position-change.html
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>

  <script>
    const Engine = Matter.Engine
    const Render = Matter.Render
    const Runner = Matter.Runner
    const MouseConstraint = Matter.MouseConstraint
    const Mouse = Matter.Mouse
    const World = Matter.World

## matter-js-compound-body-set-position-then-set-parts.html
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>

  <script>
    const Engine = Matter.Engine
    const Render = Matter.Render
    const Runner = Matter.Runner
    const MouseConstraint = Matter.MouseConstraint
    const Mouse = Matter.Mouse
    const World = Matter.World
	<!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;
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>

	<script>
	const Engine = Matter.Engine
	const Render = Matter.Render
	const Runner = Matter.Runner
	const MouseConstraint = Matter.MouseConstraint
	const Mouse = Matter.Mouse
	const World = Matter.World