<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Posts on Photomancer Lab</title><link>https://lab.photomancer.art/post/</link><description>Recent content in Posts on Photomancer Lab</description><generator>Hugo</generator><language>en</language><lastBuildDate>Wed, 15 Jul 2026 00:00:00 +0000</lastBuildDate><atom:link href="https://lab.photomancer.art/post/index.xml" rel="self" type="application/rss+xml"/><item><title>Contiguous Animated Popups</title><link>https://lab.photomancer.art/post/2026-07-15-contiguous-popup/</link><pubDate>Wed, 15 Jul 2026 00:00:00 +0000</pubDate><guid>https://lab.photomancer.art/post/2026-07-15-contiguous-popup/</guid><description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Transparency note:&lt;/strong&gt; this post was drafted by an AI agent (Claude) working at my
direction, based on a prototyping session we did together. The problem, the prototype,
and the opinions are mine; most of the sentences are the machine&amp;rsquo;s. I&amp;rsquo;ve reviewed and
edited it before publishing.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;There&amp;rsquo;s a UI pattern I keep coming back to: a button that expands into a popup, where
the border is &lt;em&gt;contiguous&lt;/em&gt; — one continuous outline wrapping both the button and the
panel, with smooth inward curves where they join. It ties the popup to the thing you
clicked in a way a floating card never does. It feels like diving into the button.&lt;/p&gt;</description></item><item><title>A Tiny Zod Factory Pattern</title><link>https://lab.photomancer.art/post/2026-06-10-3-zod-factory/</link><pubDate>Wed, 10 Jun 2026 00:00:00 +0000</pubDate><guid>https://lab.photomancer.art/post/2026-06-10-3-zod-factory/</guid><description>&lt;p&gt;There&amp;rsquo;s a pattern in TypeScript I like for building typed data graphs with a small, fluent interface.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#e7e9db;background-color:#2f1e2e;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-ts" data-lang="ts"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#06b6ef"&gt;publish&lt;/span&gt;(
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#06b6ef"&gt;Post&lt;/span&gt;({
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#06b6ef"&gt;title&lt;/span&gt;&lt;span style="color:#5bc4bf"&gt;:&lt;/span&gt; &lt;span style="color:#48b685"&gt;&amp;#34;A TypeScript data pattern&amp;#34;&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#06b6ef"&gt;content&lt;/span&gt;: &lt;span style="color:#fec418"&gt;document.body.innerText&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#06b6ef"&gt;author&lt;/span&gt;: &lt;span style="color:#fec418"&gt;Person&lt;/span&gt;({ &lt;span style="color:#06b6ef"&gt;name&lt;/span&gt;&lt;span style="color:#5bc4bf"&gt;:&lt;/span&gt; &lt;span style="color:#48b685"&gt;&amp;#34;Yona Appletree&amp;#34;&lt;/span&gt;, &lt;span style="color:#06b6ef"&gt;email&lt;/span&gt;&lt;span style="color:#5bc4bf"&gt;:&lt;/span&gt; &lt;span style="color:#48b685"&gt;&amp;#34;yona@photomancer.art&amp;#34;&lt;/span&gt; }),
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; }),
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#815ba4"&gt;function&lt;/span&gt; &lt;span style="color:#06b6ef"&gt;publish&lt;/span&gt;(&lt;span style="color:#06b6ef"&gt;post&lt;/span&gt;: &lt;span style="color:#fec418"&gt;Post&lt;/span&gt;) {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#776e71"&gt;/**/&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;The shape of the code is almost suspiciously simple: &lt;code&gt;Person(...)&lt;/code&gt; makes a person, &lt;code&gt;Post(...)&lt;/code&gt; makes a post, and the type names line up with the runtime functions. That last part is the trick. In TypeScript, values and types live in different namespaces, so &lt;code&gt;Post&lt;/code&gt; can be both a factory function and the name of the type it returns.&lt;/p&gt;</description></item><item><title>Friendly Tagged Catalogs in TypeScript</title><link>https://lab.photomancer.art/post/2026-06-10-4-tagged-catalogs/</link><pubDate>Wed, 10 Jun 2026 00:00:00 +0000</pubDate><guid>https://lab.photomancer.art/post/2026-06-10-4-tagged-catalogs/</guid><description>&lt;p&gt;There is often a need in TypeScript programs to have a source-defined set of rich values that are
identified by some tag/id/key. I call this pattern a &amp;ldquo;tagged catalog.&amp;rdquo;&lt;/p&gt;
&lt;p&gt;Recently I was looking over the code of a small game that a friend is writing to learn TypeScript.
One piece of it was exactly this kind of catalog.&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ll show the original code in a moment, but lets start with a clean example, showing how I&amp;rsquo;d &lt;em&gt;like&lt;/em&gt;
this to work:&lt;/p&gt;</description></item><item><title>Hello, lab</title><link>https://lab.photomancer.art/post/hello-world/</link><pubDate>Wed, 25 Mar 2026 00:00:00 +0000</pubDate><guid>https://lab.photomancer.art/post/hello-world/</guid><description>&lt;p&gt;Welcome to &lt;strong&gt;Photomancer Lab&lt;/strong&gt;. This site is built with &lt;a href="https://gohugo.io/"&gt;Hugo&lt;/a&gt; and the &lt;a href="https://github.com/kaisugi/HugoTeX"&gt;HugoTeX&lt;/a&gt; theme.&lt;/p&gt;
&lt;p&gt;More writing soon.&lt;/p&gt;</description></item></channel></rss>