potch has a website
https://potch.me
make things, not too much, mostly crapen-ushttp://blogs.law.harvard.edu/tech/rssa pile of javascript720pixel raster toy
https://potch.me/2026/pixel-raster-toy.html
Wed Jan 07 2026 13:08:50 GMT-0800 (Pacific Standard Time)https://potch.me/2026/pixel-raster-toy.html
<p>Experimenting with pixel rasterization in canvas, and put this little generator together. Fun to tweak the knobs and look for pleasing composition!</p>
<p><strong>2026-01-09</strong>: <em>updated to include background colors and dithered shading</em></p>
<div id="bin-here" style="height:600px;display:flex;align-items:center;justify-content:center;background:#8882"><i>loading demo...</i></div>
<script defer>
Promise.all([
import('https://unpkg.com/@potch/[email protected]/build/index.min.js'),
fetch("/2026/pixelraster.js?5").then(r => r.text()),
fetch("/2026/pixelraster.css?5").then(r => r.text())
])
.then(([{ createBin }, jsSource, cssSource]) => {
const container = document.querySelector("#bin-here");
container.innerHTML = '';
const bin = createBin({
initialTab: "preview",
splitMode: false,
height: "600px",
container: container,
sources: {
js: jsSource,
css: cssSource
}
})
bin.start();
});
</script>
snow simulation toy
https://potch.me/2026/snow-simulation-toy.html
Thu Jan 01 2026 20:19:32 GMT-0800 (Pacific Standard Time)https://potch.me/2026/snow-simulation-toy.html
<p>One of the first significant things I ever coded in QBasic was a falling snow simulation- I think they're very soothing to watch, fun to customize, and there's lots of possibilities for extra little delight. Here's one I built on idle afternoons over the holidays this year at my parents. Enjoy!</p>
<div id="bin-here" style="height:600px;display:flex;align-items:center;justify-content:center;background:#8882"><i>loading demo...</i></div>
<script defer>
Promise.all([
import('https://unpkg.com/@potch/[email protected]/build/index.min.js'),
fetch("/2026/snowsim.js?2").then(r => r.text())
])
.then(([{ createBin }, jsSource]) => {
const container = document.querySelector("#bin-here");
container.innerHTML = '';
const bin = createBin({
initialTab: "preview",
height: "600px",
container: container,
sources: {
js: jsSource,
css: `
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #001;
color: #fff;
font-family: sans-serif;
height: 100vh;
}
.app {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100%;
padding: 1rem;
gap: 1rem;
}
.output {
position: relative;
}
canvas {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
image-rendering: pixelated;
object-fit: contain;
}
.controls {
display: grid;
grid-template-columns: repeat(auto-fill, 3rem minmax(100px, 200px) 2rem);
gap: 1rem;
margin: 0 auto;
justify-content: center;
width: 100%;
}
.controls label {
display: grid;
grid-template-columns: subgrid;
grid-column: span 3;
align-items: center;
}
button {
justify-self: start;
}
`
}
})
bin.start();
});
</script>
New Years Bingo
https://potch.me/2025/new-years-bingo.html
Tue Dec 30 2025 18:07:51 GMT-0800 (Pacific Standard Time)https://potch.me/2025/new-years-bingo.html
<p><img src="/2025/bingonewyears-w_640-f_jpg.jpg" alt="A Screenshot of bingonewyears.com, showing a grid of goals"></p>
<p>Last year, my friend Stacy introduced our friend group to the idea of a "New Years Bingo Card": the idea being to create smaller, more achievable things you want to do in the coming year, with a focus on positive/fun ideas. It was a fun NYE activity and so my buddy Andrew and I (who built <a href="https://listed.fun">Listed</a> together) put together a "New Years Bingo" webapp! You can play it at <a href="https://bingonewyears.com/">bingonewyears.com</a>. You can set "yes/no" goals, or create counters/monthly goals.</p>
<p>We used <a href="https://svelte.dev/">svelte</a> for its speed of development, small output size, and nice static site generation. All the goals are saved to local storage and never sent elsewhere- the plan is to add both a print stylesheet as well as a way to move the data around!</p>
Logo Dingus
https://potch.me/2025/logo-dingus.html
Thu Aug 28 2025 09:47:13 GMT-0700 (Pacific Daylight Time)https://potch.me/2025/logo-dingus.html
<p>Playing with a new logo for personal projects, and paramaterized the bits:</p>
<div class="wide" id="bin-here"><center><i>loading demo...</i></center></div>
<script defer>
import('https://unpkg.com/@potch/[email protected]/build/index.min.js').then(({ createBin }) => {
const container = document.querySelector("#bin-here");
container.innerHTML = '';
const bin = createBin({
split: .5,
container: container,
sources: {
js: `import {
dom as d,
signal as s,
computed as c,
effect as e,
} from "https://unpkg.com/@potch/[email protected]/src/fw.js";
const SPACING = s(3);
const WIDTH = s(24);
const XHEIGHT = s(3);
const WEIGHT = s(3);
const CHARSIZE = s(2);
const MAX_XHEIGHT = c(() => CHARSIZE.value * 3 + 1);
e(() => XHEIGHT.value = Math.min(MAX_XHEIGHT.value, XHEIGHT.value));
const canvas = d("canvas", {
width: 512,
height: 512,
style: { width: "100%" },
});
const slider = (s, title, min, max, opts={}) =>
d(
"label",
{},
title,
d("input", {
type: "range",
min,
max,
value: s,
oninput: (e) => (s.value = parseFloat(e.target.value)),
...opts
}),
d("span", { innerText: s })
);
document.body.append(
canvas,
d(
"form",
{ onsubmit: (e) => e.preventDefault },
slider(SPACING, "spacing", 1, 32),
slider(XHEIGHT, "x-height", 1, MAX_XHEIGHT),
slider(WEIGHT, "weight", 1, 32),
slider(CHARSIZE, "char width", 1, 16)
),
);
e(() => {
const spacing = SPACING.value;
const xheight = XHEIGHT.value;
const weight = WEIGHT.value;
const char = CHARSIZE.value;
const stride = weight + spacing;
const line = (x, y, dx, dy) => ctx.fillRect(
spacing + x * stride,
spacing + y * stride,
(dx * stride) + weight,
(dy * stride) + weight
);
const pwidth = char * 2 + 3;
const rw = 4 + char * 3;
const ctx = canvas.getContext("2d");
const size = spacing * (rw + 2) + (rw + 1) * weight;
const dpr = window.devicePixelRatio;
canvas.width = canvas.height = size * dpr;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.scale(dpr, dpr);
// P
line(0, 0, pwidth, 0);
line(pwidth, 0, 0, rw - xheight - 2);
line(0, rw - xheight - 2, pwidth, 0);
line(0, 0, 0, rw);
// O
line(1, rw - xheight, char, 0);
line(1, rw - xheight, 0, xheight);
line(1, rw, char, 0);
line(1 + char, rw - xheight, 0, xheight);
// T
line(1, rw - xheight - 1, char * 2 + 2, 0);
line(2 + char, rw - xheight - 1, 0, xheight + 1);
// C
line(3 + char, rw - xheight, char, 0);
line(3 + char, rw - xheight, 0, xheight);
line(3 + char, rw, char, 0);
// H
line(pwidth + 1, 0, 0, rw);
line(pwidth + 1 + char, 0, 0, rw);
line(pwidth + 1, rw - xheight - 1, char, 0);
ctx.restore();
});
`,
css: `html, body {
height: 100vh;
}
form {
display: grid;
grid-template-columns: auto 1fr 4ch;
gap: .5rem;
max-width: 300px;
margin-top: .5rem;
}
label {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
gap: 1rem;
}
canvas {
border: 1px solid;
image-rendering: pixelated;
display: block;
aspect-ratio: 1 / 1;
max-width: 300px;
}
`
}
})
bin.start();
bin.activeTab.value = 'preview';
});
</script>
Where I'm blogging from (the summer update)
https://potch.me/2025/where-im-blogging-from-summer-update.html
Thu Aug 07 2025 21:00:00 GMT-0700 (Pacific Daylight Time)https://potch.me/2025/where-im-blogging-from-summer-update.html
<p>Hi! I've had a few irons in the fire.</p>
<figure>
<div class="wide" id="bin-here"></div>
<figcaption>a cool plasma-y blob effect made by drawing random ellipses. just a fun dawdle.</figcaption>
</figure>
<script defer>
import('https://unpkg.com/@potch/[email protected]/build/index.min.js').then(({ createBin }) => {
const bin = createBin({
split: .25,
container: document.querySelector("#bin-here"),
sources: {
js: `const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = "absolute";
canvas.style.inset = "0";
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let id = new ImageData(canvas.width, canvas.height);
function draw() {
const p1 = [Math.random() * canvas.width, Math.random() * canvas.height];
const p2 = [Math.random() * canvas.width, Math.random() * canvas.height];
const factor = Math.random()/2 + 1.25;
const t = Date.now()/1000;
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const idx = (y * canvas.width + x) * 4;
const tx = x;
const ty = y;
const d = Math.hypot(p1[0] - tx, p1[1] - ty) + Math.hypot(p2[0] - tx, p2[1] - ty);
const l = Math.hypot(p1[0] - p2[0], p1[1] - p2[1]);
let err = (l + 10 - d)
if (d < l + 10) {
id.data[idx] += err*1.5;
id.data[idx+1] += err;
id.data[idx+2] += err*2;
} else {
id.data[idx]--;
id.data[idx+1]--;
id.data[idx+2]--;
}
id.data[idx + 3] = 255;
}
}
}
function frame() {
if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
id = new ImageData(canvas.width, canvas.height);
}
const start = Date.now();
while (Date.now() - start < 16) {
draw();
}
ctx.putImageData(id, 0, 0);
requestAnimationFrame(frame)
}
frame();`,
html: ``,
css: `html, body { height: 100vh; }`
}
})
bin.start();
bin.activeTab.value = 'preview';
});
</script>
<p>I started streaming again on <a href="https://twitch.tv/potch">twitch</a>- working on a multiplayer web minesweeper as a stream-only project. I'm working on establishing a regular schedule but for the time being I always post on socials beforehand- it's a chill time and you should come hang out! I'm also trying to reorganize my office so I can have a Streamer Nook with a better backdrop.</p>
<p><img src="/2025/mineswarmer-wip-f_jpg-w_800.jpg" alt="a full-screen minesweeper grid with multiple cursors. parts of the grid have been revealed and flagged, and in the bottom corner are exploded mines from a misclick"></p>
<p>I'm working on a poster of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color">CSS named color keywords</a>- right now I'm doing test prints and looking for a vendor. I'll probably opt for print-on-demand vs stuffing tubes at home but if you have any recommendations in that department please let me know.</p>
<p><img src="/2025/css-colors-poster-w_800.jpg" alt="a poster with a voronoi diagram of the named CSS colors with their hex values"></p>
<p>Work continues on my mini ttrpg project as well- hoping to have it in a state for a playtest or two at PAX West at the end of the month.</p>
<p>In addition I'm also working my consulting gig and indulging in the pleasures of summer, such as taking a train to a baseball game on a beautiful day.</p>
<p><img src="/2025/giants-game-w_800.jpg" alt="a view of the baseball field at Oracle Park taken from the upper deck. You can see the whole stadium as well as the bay behind"></p>
<p>HAGS!</p>
html-bin, an embeddable codebin widget
https://potch.me/2025/html-bin-an-embeddable-codebin-widget.html
Tue Jun 03 2025 20:44:30 GMT-0700 (Pacific Daylight Time)https://potch.me/2025/html-bin-an-embeddable-codebin-widget.html<div class="wide" id="bin-here"></div>
<script defer>
import('https://unpkg.com/@potch/[email protected]/build/index.min.js').then(({ createBin }) => {
const bin = createBin({
split: .65,
container: document.querySelector("#bin-here"),
sources: {
js: `const form = document.querySelector('form');
const span = document.querySelector('#name');
form.addEventListener('input', e => {
span.innerText = form.elements.name.value;
});
form.addEventListener('submit', e => e.preventDefault());
`,
html: `<h1>
Hello
<span id="name">World</span>
</h1>
<form>
<label>
name:
<input name="name" type="text" value="World">
</label>
</form>`,
css: `body {
font: 20px sans-serif;
}
form {
max-width: 200px;
}
h1 {
font: bold 48px cursive;
text-align: center;
}
label {
display: grid;
grid: auto / auto 1fr;
gap: .5rem;
align-items: center;
}
input {
font: inherit;
min-width: 10em;
}
`
}
})
bin.start();
bin.activeTab.value = 'preview';
});
</script>
<p>I like to post little <a href="/tag/toys.html">code toys</a> on this site from time to time, in lieu of putting a full demo out on its own page. Some of the older demos were hosted on Glitch which was great because you could live edit things! Alas, Glitch is ending its project hosting. I also for a bunch of years have had a <a href="https://potch.github.io/bin/">scratchpad codebin</a> for quickly dashing out ideas. I've been looking for something in between anyway, and Glitch shutting down pushed me to make something to split the difference. I decided to write it up as its own little <a href="https://github.com/potch/html-bin">open source project</a> for others if they find it useful!</p>
<p>It's got a few nice features:</p>
<ul>
<li>everything happens client-side- the preview uses a <code>Blob</code> of an html document to run in its own little secure-but-sandboxed origin</li>
<li>(throttled) debounced live updating</li>
<li>split-pane editing that collapses at small screen widths</li>
</ul>
<p>I'm using <a href="https://codemirror.net">CodeMirror</a> for the editors themselves. The widget logic is built using my <a href="https://github.com/potch/minifw"><code>minifw</code></a> library- it was a nice to build something on top of it to understand how well it works for real-world uses! All the internal logic uses signals and effects to keep state which I'm really coming around to as a mental model.</p>
<p>Things I want to add:</p>
<ul>
<li>easier instantiation from markdown</li>
<li>the ability to embed "controls" (like sliders, inputs, etc) outside the editors and preview to make it easy to tweak variable parameters in demos</li>
<li>ability to progressively enhance <code>pre code</code> blocks into live editors</li>
<li>export button to make it easy to download tweaked versions of code</li>
<li>localStorage so if you come back to the page you can see your changes</li>
</ul>
<p>I'm running this project as "some maintenance intended", in that while I'll probably take the odd feature request/patch and I do plan on updating it, it's still mostly for me and I encourage others to fork if they want something super different!</p>
Oh God It's June
https://potch.me/2025/oh-god-its-june.html
Sun Jun 01 2025 22:02:49 GMT-0700 (Pacific Daylight Time)https://potch.me/2025/oh-god-its-june.html
<p>Hello! May was a blur.</p>
<p>Went to Italy with Caitlin for 2 weeks at the end of April into May. Woke up in Rome to a dead pope and had to skip town<a href="#fn1"><sup>1</sup></a>. Spent a while in Florence and the Tuscan countryside. We'd been planning to go for years and it was <em>glorious</em>.</p>
<figure class="full">
<a href="/2025/italy-pano-w_3840.jpg">
<img alt="a panorama of the Tuscan countryside taken from Montepulciano" class="full" src="/2025/italy-pano-w_3840.jpg">
</a>
<figcaption>a dump. a toilet.</figcaption>
</figure>
<p>After Italy, I bounced over to Boston to attend PAX East with some friends. By complete chance, <a href="https://jennschiffer.com">jenn</a> was in town and we got to catch up in a cafe while it poured outside! A complete treat. The convention was solid- I came away from it entirely enamored with <a href="https://boardgamegeek.com/boardgame/411567/the-gang">The Gang</a>, a "co-op poker heist game" that has you wordlessly trying to sequence your poker hands by quality to win. When you get it right with 6 players, it feels like a bananas miracle.</p>
<p>What have I been up to the rest of the month?</p>
<ul>
<li>Consulting on HTML Canvas performance</li>
<li>Trying to merge poker and sudoku into a puzzle game. Expect demos soon!</li>
<li>Working on a live code demo widget for use on this site</li>
<li><a href="https://blog.glitch.com/post/changes-are-coming-to-glitch/">Backing up and going through all my Glitch projects 💔</a></li>
<li>Drafting a tabletop module with a friend (again, more soon!)</li>
</ul>
<p>Oh ALSO <strong>MY GAME SHOW APPEARANCE AIRED!</strong></p>
<p><a href="https://www.youtube.com/watch?v=NPDwj0kTc9s"><img src="/2025/leet-heat-thumb.jpg" alt="the YouTube thumbnail for my Leet Heat episode, showing me and Tru feeling the spice"></a></p>
<p>I got to fly up to Portland in January to tape an episode of Leet Heat (tech trivia meets Hot Ones) for the delightful <a href="https://codetv.dev/">CodeTV</a> channel. It was an absolute blast to film and we learned Oreos are a solid hot food antidote.</p>
<h2>So what's coming in June?</h2>
<ul>
<li>I'd like to put out more small code toys, powered by the previously mentioned code bin. Expect something every week!</li>
<li>Some live-coding streams- PT afternoons but other deets to come</li>
<li>A Third Thing</li>
</ul>
<p>🏳️🌈 Happy Pride! 🏳️⚧️</p>
<h3>Other Cool Stuff</h3>
<ul>
<li><a href="https://pixelogic.app/every-5x5-nonogram">Help solve every 5x5 picross</a></li>
<li>Andor S2 - not a link but it was entirely captivatingly excellent. Sad but glad they're not making more and finished so strong.</li>
<li><a href="https://bugsrock.online/">jenn is launching an "e-store" soon!</a></li>
<li><a href="https://weatherstar.netbymatt.com/">WeatherStar 4000+</a></li>
</ul>
<p><small id="fn1">1. we have an airtight alibi.</small></p>
How to know when content has changed in CodeMirror v6
https://potch.me/2025/how-to-know-when-content-has-changed-in-codemirror-v6.html
Wed May 14 2025 16:37:30 GMT-0700 (Pacific Daylight Time)https://potch.me/2025/how-to-know-when-content-has-changed-in-codemirror-v6.html
<p>Building a new version of an editor widget, and trying to use the latest CodeMirror (v6.x), and I'm finding the documentation light on useful examples! After a bunch of searching I'm documenting what I figured out here for posterity. If you want to run code whenever the content of a CodeMirror v6 document changes, here is example code:</p>
<pre class="pretty-code language-js"><code class="pretty-code language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> basicSetup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"codemirror"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> EditorView <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@codemirror/view"</span><span class="token punctuation">;</span>
<span class="token comment">// create a new CodeMirror editor</span>
<span class="token keyword">const</span> view <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EditorView</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">doc</span><span class="token operator">:</span> <span class="token string">"Start document"</span><span class="token punctuation">,</span>
<span class="token literal-property property">parent</span><span class="token operator">:</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#editor"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">extensions</span><span class="token operator">:</span> <span class="token punctuation">[</span>
basicSetup<span class="token punctuation">,</span>
EditorView<span class="token punctuation">.</span>updateListener<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>v<span class="token punctuation">.</span>docChanged<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// how to get the full text content from the editor</span>
<span class="token keyword">const</span> content <span class="token operator">=</span> v<span class="token punctuation">.</span>state<span class="token punctuation">.</span>doc<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// do something with it</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>I hope search engines and LLMs slurp this up because honestly it was a pain to figure out!</p>
Happy HTTP Gone Day (4/10)
https://potch.me/2025/happy-gone-day.html
Thu Apr 10 2025 14:11:29 GMT-0700 (Pacific Daylight Time)https://potch.me/2025/happy-gone-day.html
<p>Hi I went indie and promised more updates- here's a casual sampling heavily inspired by my pal <a href="https://livelaugh.blog/tag/weekly-retro/">Jenn's weekly retros</a>:</p>
<p>I'm fortunate to have a lined up a short consulting gig to help smooth my transition into self-employment that's been eating a good chunk of my daytime working hours which has mostly tricked my brain into thinking that we are still in the Normal Zone.</p>
<p>I "broke ground" on a new game demo- I have pitched it as "balatro but dice" but that's <em>a)</em> incredibly reductive and an insult to the whole industry that we describe things that way and <em>b)</em> not entirely clear that's what it's gonna be. I'll share a small playable soon! It's so ugly I don't even have an image to share in this post but tktktk. Speaking of images to share:</p>
<p>I stumbled across my old <a href="https://wave-collapse.glitch.me/">Wave Function Collapse</a> art tool and it remains incredibly satisfying to draw small pixel art scenes and see how the slicer and algo combine them into larger tiled "scapes". Here's some fun ones I've made (with links to the generator so you can make your own!):</p>
<div class="wide">
<p><a href="/2025/tile-city.png"><img src="/2025/tile-city.png" alt="a cityscape made with buildings, water, roads, and parks"></a></p>
</div>
<p><a href="https://wave-collapse.glitch.me/?jyyhdcni">"Tile City"</a> - I love this one bc it reminds me of those rugs you could play with hot wheels on</p>
<div class="wide">
<p><a href="/2025/hoopla.png"><img src="/2025/hoopla.png" alt="noodly lines that loop and crisscross in shades of blue"></a></p>
</div>
<p><a href="https://wave-collapse.glitch.me/?oeqfsvdj">"Hoopla"</a></p>
<div class="wide">
<p><a href="/2025/circuits.png"><img src="/2025/circuits.png" alt="circuit board with chips, traces, and components"></a></p>
</div>
<p><a href="https://wave-collapse.glitch.me/?so2l9cso">"Circuits"</a></p>
<p>The UI is not-the-most intuitive and I've got a rewrite lying around somewhere but please play around and share anything you've made!</p>
<p>I'm working on publishing a small TTRPG module setting using the <a href="https://rollforshoes.com/">Roll For Shoes</a> micro-system. I came up with it to amuse my gaming group and they had enough fun that one of them pitched me on polishing it up for wider consumption. Stay tuned for that!</p>
<h3>Some cool rocks I put in my pocket and would now like to show you</h3>
<ul>
<li><a href="https://www.theatlantic.com/games/bracket-city/">Bracket City</a> - a puzzle game of nested <code>[editor's note]</code> annotations</li>
<li>dragula served <a href="https://www.tiktok.com/t/ZTjePMq7q/">two</a> <a href="https://www.tiktok.com/t/ZTjePa6US/">ways</a></li>
<li><a href="https://echarts.apache.org/en/index.html">Apache Echarts</a> looks good and I want an excuse to goof with it</li>
<li>a <a href="https://lyra.horse/css-clicker/">CSS-only idle clicker game</a> because y'know what? hell yeah</li>
</ul>
<p>I leave you with this "Elote Pizza" made as an experiment at a dinner party:</p>
<p><img src="/2025/elote-pizza-w_1200.jpg" alt="pizza topped with corn, peppers, onions, and cheese"></p>
Here I Go
https://potch.me/2025/here-i-go.html
Tue Apr 01 2025 10:00:00 GMT-0700 (Pacific Daylight Time)https://potch.me/2025/here-i-go.html
<p>Last week was my last week as Frontend Architect at Splice.</p>
<img alt="a tarot card of The Fool sketched depicting my giraffe avatar as the titular Fool" width="300" src="/the-fool-w_300.png" srcset="./the-fool-w_300.png, ./the-fool-w_600.png 2x">
<p>It was a wonderful place to work! They make amazing products! <a href="https://job-boards.greenhouse.io/splice">They're hiring and get my full okie-dokey</a>. After years in the developer advocacy role I got a chance to get my skills up-to-date, spearhead the adoption of Svelte(kit), and work with a bunch of huge music nerds who are building tech for other music nerds. But at the 4 year mark (in November), I got an itch. After working at Mozilla for 8½ years I swore I'd never work another job that long, that I owed it to myself to try something at least sort-of new and different (even if it's still writing code) periodically.</p>
<p>When I was laid off from Glitch in 2020, I was severely burned out from a decade+ in tech, the last 6 of which had been in developer advocacy. I was fortunate enough to be able to take some months off (thanks glitch union for some severance) to deal with the World, decompress, and finally figure out what Minecraft was all about. While unemployed, I had the wild hare to try out independent game/app dev. It's something I've always thought about since I was a kid- "make video games" has been a dream of mine since it became apparent that they were things that were Made, and not just hatched from the demo kiosks at Sears. One of the few things on the first computer I had access to was <a href="https://starter-qbasic.glitch.me">QBASIC</a>, and lacking games to play other than Treasure MathStorm and the demo to Commander Keen, I would make games; for my friends, my sisters, but mostly for myself.</p>
<figure>
<div class="social-embed" href="https://mastodon.social/@muzej/111386602496300945" target="_blank">
<a href="https://mastodon.social/@muzej/111386602496300945" class="social-embed__ident">
<img class="social-embed__avatar" src="/2025/muzej_mastodon.social.jpg">
<div class="social-embed__display">Computer History Museum 🇸🇮</div>
<div class="social-embed__username">@[email protected]</div>
</a>
<div class="social-embed__body">🍌🦍 Playing GORILLA.BAS on the Toshiba T5100 laptop 🤩 That orange plasma screen ❤<br><br>You can also play it - in your browser - if you attempt to format the "disk" at https://zbirka.muzej.si/ 😂 (in QBasic, press F5 to start the game)</div>
<a href="/2025/toshiba-social.jpg"><img class="social-embed__media" alt="Toshiba T5100 laptop with an amber orange display running QBasic GORILLAS.BAS- monkeys standing on buildings that throw bananas to destroy each other" src="/2025/toshiba-social-w_1024.jpg"></a>
<div class="social-embed__meta">
posted <a href="https://mastodon.social/@muzej/111386602496300945">Nov 10, 2023, 05:57 AM</a>
</div>
</div>
<figcaption>
first computer and gaming experience looked pretty much exactly like this.
</figcaption>
</figure>
<p>It turns out that 2020 of all years was not the year for me to go indie. I was still fairly fried, I had no plan, and it was clear that given all the free time in the world wasn't leading anywhere in particular (Minecraft is really good though). It was time to Get A Job, and after interviewing at a few places, I was very kindly referred to Splice by a friend (thanks Sue!) as a place I'd like, and it worked out! I decided to re-tool from "dev advocacy" back to straight-up frontend engineering.</p>
<p>In the meantime, I dabbled and I planned. To pass the idle pandemic evenings, some friends and I built a multiplayer web board game inspired by Carcassone. I put together a proper business, <a href="https://twentyminutemile.com">Twenty Minute Mile</a>. Excited by the <a href="https://play.date/">Playdate</a>, I learned some Lua and shipped <a href="https://play.date/games/smolitaire/">Smolitiare</a>, which was well received and made money! Not "quit your job" money by any means, but at least "LLC has a reason to exist despite my accountant's continued and ongoing skepticism" money. Heavily inspired by the wordle craze, my pal <a href="https://pariser.me/">Andrew</a> and I cooked up <a href="https://listed.fun/">Listed</a>. And I wrote down every game idea that crossed my mind. I now had done at least Something, but finding the energy to code as a side-hustle with a full-time job was challenging.</p>
<p>Back to that itch. In November talked to Caitlin about it. She told me there would never be a perfect time to do this, and we were in a good place to try it now. So a plan was hatched: take a year and give the indie dev thing a go. By the time I had fully convinced myself to take the plunge, it made sense to finish out the quarter at Splice.</p>
<p>Here we are! Here's the plan:</p>
<ul>
<li>build and ship some games! duh. I'm hoping to publish some smaller game demo/ "singles" on <a href="https://twentyminutemile.itch.io/">itch.io</a> in the short term, and build toward a larger game or two this year.</li>
<li>make other things- possibilities include iOS app development, doing proper Content (podcasts/yt vids), some tabletop stuff</li>
<li>share the process- share something here every week - be it a toy, a process post, or just cool stuff I've found. I'm also planning routine gamedev streams (tba)</li>
<li>collaborate- I know so many incredible people who make kickass things and I'd love to team up with as many of them as I can- even if it's just streaming together. (cool friends hmu)</li>
<li>some consulting as opportunities present (cool people who need FE expertise and like paying money hmu)</li>
<li>(stretch goal) get Twenty Minute Mile to a place where I can pay myself <em>a</em> wage</li>
</ul>
<p>I'm giving myself a year, an amount of time I'm <strong>beyond</strong> privileged to be able to afford. I'm hopeful that it's the first year of many, but I can't predict the future: I may hate being my own boss, I may completely lack the discipline to see things through in a way that generates income! Despite the groundwork I've laid, I'm entering a new field and there's so much more that I don't know than I can even anticipate. I'm entering an industry that's in a state of tumult, where indies can find an audience and breakout success, but other unbelievably talented people are exploited and grind for years without being able to make a fair wage. If I have to go back to W2 work, I won't consider it failure.</p>
<p>Folks have asked how they can support me- eventually I'll have a more concrete answer (like buy my stuff) but for now just follow me here and on my socials. Unless you have a Playdate- then have I mentioned <a href="https://play.date/games/smolitaire/">Smolitiare</a>?</p>
<p>See you out there!</p>
<p><small>† despite the date, this is not a joke. I am the only fool here</small></p>