<rss version="2.0">
<channel>
<title>alanwsmith.com</title>
<link>https://www.alanwsmith.com/</link><item>
<title><![CDATA[Music for Today (March 15, 2026)]]></title>
<link>https://www.alanwsmith.com/en/3b/08/4i/uv/</link>
<pubDate>Sun, 15 Mar 2026 18:40:34 -0400</pubDate>
<guid>55a67f66-dbac-5a58-a441-db0c1b6c868e</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow">


<p>I published a big block of work last night. Stayed up super late to do it.</p>


<p>Today, I'm zoned out. In the post-deployment come down. I've mostly been poking around youtube. Lots of music in the mix.</p>


<p>A few selections from the day.</p></section>


<section class="youtube-section default-flow"><div class="youtube-player-title">Down to the River to Pray - The Petersens</div><youtube-player 
:video="PvSMiHFAjzo"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/PvSMiHFAjzo" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">Tom Waits - "Get Behind The Mule"</div><youtube-player 
:video="O_v2HChe350"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/O_v2HChe350" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">Going to California - Led Zeppelin - Sierra Eagleson Cover</div><youtube-player 
:video="FEcoxUZnsMc"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/FEcoxUZnsMc" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">Getting Ready to Get Down - Josh Ritter - 2017-13-05</div><youtube-player 
:video="3eyzc11gsWc"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/3eyzc11gsWc" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">San Fermin - Daedalus</div><youtube-player 
:video="MY9cuETTWC0"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/MY9cuETTWC0" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">the Mountain Goats - This Year - Jordan Lake Sessions</div><youtube-player 
:video="2Se76S0XH-I"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/2Se76S0XH-I" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">Siren Song - Didn't Leave Nobody but the Baby - O Brother, Where Art Thou</div><youtube-player 
:video="jI99ScMCWMg"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/jI99ScMCWMg" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">Lake Street Dive feat. Tiny Habits - "Leaving on a Jet Plane" - Live From the Road</div><youtube-player 
:video="zusFHHAhim4"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/zusFHHAhim4" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">Chet Faker - Gold</div><youtube-player 
:video="hi4pzKvuEQM"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/hi4pzKvuEQM" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">San Fermin - Daedalus</div><youtube-player 
:video="MY9cuETTWC0"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/MY9cuETTWC0" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">Sweet Child O' Mine Bluegrass Cover - Thunder and Rain</div><youtube-player 
:video="SDfBxudHWIA"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/SDfBxudHWIA" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="youtube-section default-flow"><div class="youtube-player-title">Can't Find My Way Home (Blind Faith) - Rachael Price - Live from Here with Chris Thile</div><youtube-player 
:video="1xZxxVlu7BM"></youtube-player>

<noscript>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/1xZxxVlu7BM" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</noscript>
</section>


<section class="p-section default-flow">


<p>It's gray outside. A light rain. Perfect for the chill mood.</p>


<p>-a</p></section>


</div>
  <div class="end-block"></div>
]]></description> 
</item><item>
<title><![CDATA[You can't update an input text value with keydown]]></title>
<link>https://www.alanwsmith.com/en/3a/ww/ey/gr/</link>
<pubDate>Sat, 14 Mar 2026 12:03:28 -0400</pubDate>
<guid>d12dd06a-008a-52ee-a7a8-1798ba2c9fee</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow">


<p>It doesn't look like there's a way to update the value of an <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text html basic"><span class="meta tag inline form html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag inline form html">input</span><span class="punctuation definition tag end html">&gt;</span></span></span></code> field with <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">keydown</span></code> events.</p>


<p>You can, of course, just update the value directly.</p>


<p>Simulating keyboard interactions needs to be done with something like puppeteer.</p></section>


</div>
  <div class="end-block"></div>
]]></description> 
</item><item>
<title><![CDATA[Update CSS Live using contenteditable (No JavaScript Required)]]></title>
<link>https://www.alanwsmith.com/en/3a/wg/pw/xg/</link>
<pubDate>Sat, 14 Mar 2026 09:49:58 -0400</pubDate>
<guid>987005bf-1dbd-5e47-9e9d-cd8645d243af</guid>
<description><![CDATA[
  <hr />
  <div>
    <strong>Dear RSS Reader:<br />The original version of this page includes
    custom CSS to style the page. It probably won't work in here.
    <a href="https://www.alanwsmith.com/en/3a/wg/pw/xg/">Check out the 
    original page</a> to see it in action.
    </strong>
  </div><hr /><div class="flow body-block">


<section class="title-section default-flow">


<p>I was reading the <a href="https://html.spec.whatwg.org/#attr-contenteditable" > HTML Living Standard for contenteditable </a> to figure some stuff out for bitty<sup class="xsmall-font-size"><a class="footnote-shorthand-span" href="#footnote-1-text"
    id="footnote-1-link"
    >1</a></sup>. Found a fun little tidbit: You can edit CSS live on a page without JavaScript.</p>


<p>Check this out:</p></section>


<section class="html-section default-flow show-html"><h4 class="show-html-heading">HTML</h4><pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="text html basic"><span class="meta tag block any html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag block any html">div</span> <span class="meta attribute-with-value class html"><span class="entity other attribute-name class html">class</span><span class="punctuation separator key-value html">=</span></span><span class="meta attribute-with-value class html"><span class="string quoted double html"><span class="punctuation definition string begin html">&quot;</span></span></span><span class="meta attribute-with-value class html"><span class="string quoted double html"><span class="meta class-name html">example</span><span class="punctuation definition string end html">&quot;</span></span></span><span class="punctuation definition tag end html">&gt;</span></span>the quick brown fox<span class="meta tag block any html"><span class="punctuation definition tag begin html">&lt;/</span><span class="entity name tag block any html">div</span><span class="punctuation definition tag end html">&gt;</span></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span><span class="meta tag style begin html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag style html">style</span></span><span class="meta tag style begin html"> <span class="meta attribute-with-value class html"><span class="entity other attribute-name class html">class</span><span class="punctuation separator key-value html">=</span></span><span class="meta attribute-with-value class html"><span class="string quoted double html"><span class="punctuation definition string begin html">&quot;</span></span></span><span class="meta attribute-with-value class html"><span class="string quoted double html"><span class="meta class-name html">style-editor</span><span class="punctuation definition string end html">&quot;</span></span></span> <span class="meta attribute-with-value html"><span class="entity other attribute-name html">contenteditable</span><span class="punctuation separator key-value html">=</span></span><span class="meta attribute-with-value html"><span class="string quoted double html"><span class="punctuation definition string begin html">&quot;</span>plaintext-only<span class="punctuation definition string end html">&quot;</span></span></span></span><span class="meta tag style begin html"><span class="punctuation definition tag end html">&gt;</span></span><span class="source css embedded html"><span class="source css"><span class="comment block css"><span class="punctuation definition comment css">/*</span> change the color to green <span class="punctuation definition comment css">*/</span></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css">.</span>example</span> </span><span class="meta property-list css"><span class="punctuation section property-list css">{</span>
<span class="aws-code-block-marker"></span>  <span class="meta property-name css"><span class="support type property-name css">color</span></span><span class="punctuation separator key-value css">:</span><span class="meta property-value css"> </span><span class="meta property-value css"><span class="support constant color w3c-extended-color-keywords css">crimson</span></span><span class="punctuation terminator rule css">;</span>
<span class="aws-code-block-marker"></span></span><span class="punctuation section property-list css">}</span>
<span class="aws-code-block-marker"></span></span></span><span class="meta tag style end html"><span class="punctuation definition tag begin html">&lt;/</span><span class="entity name tag style html">style</span><span class="punctuation definition tag end html">&gt;</span></span></span></code></pre>

<h4 class="show-html-heading">Output</h4>

<div class="faded-reverse-border default-padding default-border-radius">
  <div class="example">the quick brown fox</div>

<style class="style-editor" contenteditable="plaintext-only">/* change the color to green */

.example {
  color: crimson;
}
</style>
</div>

</section>


<section class="p-section default-flow">


<p>The contenteditable attribute does most of the work. The only other thing you need is to make the contents of the style tag visible by applying a <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="source css"><span class="meta selector css">display: block</span></span></code> to it with something like:</p></section>


<section class="css-section flow show-css"><h4 class="show-css-heading">CSS</h4><pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="source css"><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css">.</span>style-editor</span> </span><span class="meta property-list css"><span class="punctuation section property-list css">{</span> 
<span class="aws-code-block-marker"></span>  <span class="meta property-name css"><span class="support type property-name css">border</span></span><span class="punctuation separator key-value css">:</span><span class="meta property-value css"> </span><span class="meta property-value css"><span class="meta function-call css"><span class="support function var css">var</span><span class="meta group css"><span class="punctuation definition group begin css">(</span><span class="support type custom-property css"><span class="punctuation definition custom-property css">--</span><span class="support type custom-property name css">default-border</span></span></span><span class="meta group css"><span class="punctuation definition group end css">)</span></span></span></span><span class="punctuation terminator rule css">;</span>
<span class="aws-code-block-marker"></span>  <span class="meta property-name css"><span class="support type property-name css">display</span></span><span class="punctuation separator key-value css">:</span><span class="meta property-value css"> </span><span class="meta property-value css"><span class="support constant property-value css">block</span></span><span class="punctuation terminator rule css">;</span> 
<span class="aws-code-block-marker"></span>  <span class="meta property-name css"><span class="support type property-name css">margin</span>-block</span><span class="punctuation separator key-value css">:</span><span class="meta property-value css"> </span><span class="meta property-value css"><span class="constant numeric css">1<span class="keyword other unit css">rem</span></span></span><span class="punctuation terminator rule css">;</span>
<span class="aws-code-block-marker"></span>  <span class="meta property-name css"><span class="support type property-name css">padding</span></span><span class="punctuation separator key-value css">:</span><span class="meta property-value css"> </span><span class="meta property-value css"><span class="constant numeric css">0.7<span class="keyword other unit css">rem</span></span></span><span class="punctuation terminator rule css">;</span>
<span class="aws-code-block-marker"></span>  <span class="meta property-name css"><span class="support type property-name css">white-space</span></span><span class="punctuation separator key-value css">:</span><span class="meta property-value css"> </span><span class="meta property-value css"><span class="support constant property-value css">pre</span></span><span class="punctuation terminator rule css">;</span>
<span class="aws-code-block-marker"></span></span><span class="punctuation section property-list css">}</span></span></code></pre>
</section>


<section class="p-section default-flow">


<p>First thing that comes to mind to do with it is to set up a process on the backend that you can submit it to. It would update your actual stylesheet with it. Basically, live, on-page editing with immediate deployment.</p>


<p>A nice little reduction in friction.</p>


<p>-a</p></section>


</div>
  <div class="end-block">
          <section class="endnotes-section default-flow xxlarge-bottom-margin">
            <h3 class="back-matter">Endnotes</h3>
            <div class="xxlarge-flow">
          
        


<section class="endnote-section default-flow">
  


<p>Editing your global styles would be nice. Even better would be creating a supplemental stylesheet for each page. You could apply whatever tweaks you want directly on the page then just have them go live.</p>


<p>(Of course, it wouldn't have to be an external stylesheet. You could just have your CMS embed the custom styles directly on the page.)</p>
</section>


<section class="endnote-section default-flow">
  


<p>Probably less practical, but you could write a browser extension that opens any pages CSS in a little window to change things live that way too. What would be more interesting is to see if you can select/click on something and get its styles in an editable box on the page.</p>


<p>It would save you from having to open the console to kill the thing where sites disable the ability to paste a password.</p>
</section>


<section class="endnote-section default-flow">
  


<p>You might be able to add syntax highlighting too. I'm not set up to test that at the moment.</p>
</section>
            </div>
          </section>
    
        <section class="footnotes-section flow">
            <h3 class="back-matter">Footnotes</h3>
        
        


<section class="footnote-section small-font-size">
  <div><sup>
      <a href="#footnote-1-link">
        <span id="footnote-1-text">1 &#x2934;
        </span>
      </a>
      </sup></div>
  <div>
    
    <div><a href="https://bittyjs.com/"><strong>bitty - a little front-end framework for the web</strong></a></div>
    <div class="default-flow"></div>
    
  </div>


</section>
        </section>
    </div>
]]></description> 
</item><item>
<title><![CDATA[Restart fseventsd on a mac]]></title>
<link>https://www.alanwsmith.com/en/3a/ut/av/na/</link>
<pubDate>Fri, 13 Mar 2026 22:12:29 -0400</pubDate>
<guid>716a3d7e-ced9-51e9-ba40-d81b173a0f96</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow">


<p>if fseventsd is taking 100% or more of a CPU you can restart it by quitting it in Activity Monitor (after which it restarts automatically).</p></section>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
Open Activity Monitor</li>


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">fseventsd</span></code> will probably be visible if it's having an issue. You can also search for it, if it's not for some reason.</li>


<li class="default-flow">
Double click it.</li>


<li class="default-flow">
Click <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">Quit</span></code> in the pop-up window.</li></ul>
</section>


<section class="p-section default-flow">


<p>It's usually not an issue, but when my machine has been up for a couple weeks and I've been using multiple file watchers a bunch it can freak out.</p>


<p>Quitting it and letting it restart itself clears things up.</p>


<p>-a</p></section>


</div>
  <div class="end-block"></div>
]]></description> 
</item><item>
<title><![CDATA[Guidelines for Building a Static Site Generator (2026 Edition)]]></title>
<link>https://www.alanwsmith.com/en/3a/rr/9g/jz/</link>
<pubDate>Thu, 12 Mar 2026 16:49:12 -0400</pubDate>
<guid>1bde7104-4715-51c6-b776-ef9b5bfda948</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow"></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>The Next Generation</h2>


<p>I've built several static site generators for personal use. Early ones were to support <a href="https://neopolitan.alanwsmith.com/" >neopolitan</a>. Later ones were to make it easier to build sites in general.</p>


<p>Now, I'm looking to move my site from <a href="https://www.alanwsmith.com/" >alanwsmith.com</a> to <a href="https://al9000.com/" >al9000.com</a>. Part of the reason I want to make the move is to pull <a href="https://links.alanwsmith.com" >all my sub-domains</a> back under the main site. It'll make things a lot easier to link back and forth and to update with global templates.</p>


<p>I also want to expand the site by adding in my Rust Grimoire. I've got tons of rust notes on the site already, but the grimoire isn't included. Examples in it span multiple files that my current site generator isn't set up to accommodate.</p></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>TODOish</h2>


<p>The new generator is just for me. No need to worry about it making sense for other folks. So, I'll mostly be building things as need arises. That said, there are some basics that I want to make sure I've thought through before kicking off. Here's the list (which I'll add to whenever I think of something).</p></section>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
Split out the neopolitan parser so that it's its own thing that can be included in other projects.</li>


<li class="default-flow">
Use MiniJinja as the template engine (it's Jinja, but in rust).</li>


<li class="default-flow">
Every page on the site gets loaded as a template that can be included by any other page.</li>


<li class="default-flow">
Make a two pass system so that each page can be rendered and then the rendered version be included in the next pass.</li>


<li class="default-flow">


<p>Standard tokes that are processed on the first pass are:</p>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[! !]</span></code> functions</li>


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[@ @]</span></code> output</li>


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[# #]</span></code> comments</li></ul>
</section>


</li>


<li class="default-flow">


<p>Tokens for the second pass are:</p>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[2! !2]</span></code> functions</li>


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[2@ @2]</span></code> output</li>


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[2# #2]</span></code> comments</li></ul>
</section>





<p>During the first pass those tokens get changed to their standard counterparts so they get used normally in the second pass.</p>


<p>NOTE: it may more more sense to do <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[1@ @1]</span></code> etc to assist with caching. The idea being that you can watch files for changes and only update the ones with <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[1@ @1]</span></code> on the first run through and everything else could be cached and ready. (Not sure if that makes sense or not. Something to look into)</p></li>


<li class="default-flow">


<p>Escaping tokens is done with:</p>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[/! !/]</span></code> functions</li>


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[/@ @/]</span></code> output</li>


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[/# #/]</span></code> comments</li></ul>
</section>





<p>After the second pass those tokens are converted to strings of their non-escaped versions.</p></li>


<li class="default-flow">
Template names are the full path to the file (as opposed to one of my current site builders where the leading <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">/</span></code> isn't there in the template names)</li>


<li class="default-flow">


<p>Syntax highlighting of blocks. (Return values won't include and pre tags, just the spans to put into a pre tag).</p>


<p>Ideally this can be <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[! hlblock(&quot;html&quot;) !][! endhlblock !]</span></code></p>


<p>But I think i may have to be <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[! filter hlblock(&quot;html&quot;) !][! endfilter !]</span></code></p></li>


<li class="default-flow">


<p>Syntax highlighting of spans.</p>


<p><code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[! filter hlspan(&quot;html&quot;) !][! endfilter !]</span></code></p>


<p>As well as:</p>


<p><code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[@ hlspan(&quot;html&quot;, &quot;the string to highlight&quot;) @]</span></code></p></li>


<li class="default-flow">
Syntax highlighting of files <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[@ hlfile(PATH, &quot;html&quot;) @]</span></code>.</li>


<li class="default-flow">
Funciton to pull specific lines from a file with syntax highlighting applied (i.e. the syntax highlighting happens on the entire file and then the lines are pulled)</li>


<li class="default-flow">
Cache syntax highlighting since it can take some time.</li>


<li class="default-flow">
Use tracing library to be able to meausre performance when necessary.</li>


<li class="default-flow">
Shorthand for <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[! filter some_filter !][! endfilter !]</span></code> that is <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[! f some_filter !][! endf !]</span></code>.</li>


<li class="default-flow">
<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[! md !][! endmd !]</span></code> filter.</li>


<li class="default-flow">
Actually, thinking about it, you should be able to use whatever strings you want for filters and then just find/replace them with whatever minijinjas needs (e.g. <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[! md !]</span></code> becomes <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[! filter md !]</span></code>).</li>


<li class="default-flow">
Include a full file as markdown (e.g. <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[@ mdfile(PATH) @]</span></code>)</li>


<li class="default-flow">
Good error messages for where things went wrong in template processing or neopolitan parsing.</li>


<li class="default-flow">
Update the most recently changed file first and send refresh to browser when its updated.</li>


<li class="default-flow">
Auto populate `/last-update/index.html` with whatever the most recent .html file to have changed is.</li>


<li class="default-flow">
Any valid JSON files is available from a <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[@ json @]</span></code> variable (e.g. <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">/some/data.json</span></code> is available at <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[@ json.some.data.KEYS @]</span></code></li>


<li class="default-flow">
Hooks to run before the build, after the first pass, and after the second pass.</li>


<li class="default-flow">
Provide JS minifier</li>


<li class="default-flow">
Provide CSS minifier</li>


<li class="default-flow">
Auto genreate RSS feeds. One for all posts. One each for different tags.</li>


<li class="default-flow">
Auto generate pages for each tag (with pagination)</li>


<li class="default-flow">
Auto generate index link pages for posts (with pagination)</li>


<li class="default-flow">
Provide details on the time it takes to render each page.</li></ul>
</section>





<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Neopolitan</h2></section>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
Need to do more thinking about how to integration Neopllitan and MiniJinja.</li>


<li class="default-flow">
I think the biggest thing will be setting up the <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">-- template</span></code> in page metadata to define the minijinja template to include from.</li>


<li class="default-flow">
There will have to be some things that build out a little differently. I think it's basically going to require a preprocessor that turns neopolitan files into base level HTML files that are ready to be processed by minijinja.</li>


<li class="default-flow">
More thinking (and, more importantly, prototyping) to figure that out.</li></ul>
</section>





<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Images</h2></section>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
A single image folder that can have any folder/file structure inside it.</li>


<li class="default-flow">
Image calls in content are done with just the image file name without the extension. The engine finds the right file and links it up based on the name.</li>


<li class="default-flow">
Auto generate responsive image sites.</li>


<li class="default-flow">
Auto generate responsive image tags with the available sizes.</li>


<li class="default-flow">
Output files are generated in the same places as their inputs. That is, <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">/path/filename.html</span></code> does not become <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">/path/filename/index.html</span></code>.</li>


<li class="default-flow">
File extension can change (e.g. "file-name.neo" becomes "file-name.html").</li>


<li class="default-flow">
Any file can have a `.off` added before its extension to opt it out of converting tag</li></ul>
</section>





<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>File Metadata</h2>


<p>During processing every file has access to a <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">filemd</span></code> variable that holds metadata including:</p></section>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
File name with extension.</li>


<li class="default-flow">
File name without extension.</li>


<li class="default-flow">
The source file extension.</li>


<li class="default-flow">
The destination file extension.</li>


<li class="default-flow">
The full string path to the source file.</li>


<li class="default-flow">
The string path to the parent folder.</li>


<li class="default-flow">
An array containing strings for the path to the parent folder split on each directory level.</li>


<li class="default-flow">
A variable that points to the files directory for calling JSON in it. (e.g. <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">/path/to/file.html</span></code> and <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">/path/to/data.json</span></code> would have a variable called <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[@ local @]</span></code> that is an alias for `[@ json.path.to @]<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">so you can do </span></code>[@ local.data.KEY @] to get whatever is in the data.json file.</li></ul>
</section>





<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Folder Metadata</h2></section>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
Similar to file metadata</li>


<li class="default-flow">
details tbd</li></ul>
</section>





<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Site Metadata and Functions</h2></section>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
A <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">folders()</span></code> function that returns an array of all the folders on the site where each entry is itself an array of the folder path split by directories.</li>


<li class="default-flow">
An <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">exists(PATH)</span></code> that returns true if a given path exists.</li></ul>
</section>





<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Miscellaneous</h2></section>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
Build in preview server with hot realoading on file changes (with appropriate throttle/debounce).</li>


<li class="default-flow">
Files and directories starting with two underscores (i.e. <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">__</span></code>) are available to be used as templates but don't get transformed/output directly.</li>


<li class="default-flow">
files_in_folder(FOLDER_PATH) function</li>


<li class="default-flow">
files_in_folder_ext(FOLDER_PATH, EXTENSION) function (i.e. <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">files_in_folder_ext(&quot;/some/folder&quot;, &quot;jpg&quot;)</span></code> finds all the JPG files. EXTENSION can also be an array to find files with any number of extensions.</li>


<li class="default-flow">
folders_in_folder(FOLDER_PATH) function</li>


<li class="default-flow">
path(STRING, STRING...) function that assembles strings into safe paths.</li></ul>
</section>





<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Version 9000</h2>


<p>That's everything I can think of at the moment. That thinking included taking a look at my current generators and <a href="/en/2a/pl/ck/zd/" >this prior post</a> with earlier ideas. Some of that holds up. A lot I'm thinking about differently these days.</p>


<p>I've got <a href="https://bittyjs.com/" >bitty</a> in pretty good shape. Moving into this njavascript.on.jsew generator isn't too far away.</p>


<p>Pretty excited about the update, tbh,</p>


<p>-a</p></section>


</div>
  <div class="end-block"></div>
]]></description> 
</item><item>
<title><![CDATA[Get a Random Number with crypto.getRandomValues() in JavaScript]]></title>
<link>https://www.alanwsmith.com/en/3a/lf/yo/8a/</link>
<pubDate>Thu, 12 Mar 2026 12:14:24 -0400</pubDate>
<guid>65c0d391-d150-5af2-b5e3-cc10a9569274</guid>
<description><![CDATA[<hr />
  <div>
    <strong>Dear RSS Reader:<br />The original version of this page includes
    JavaScript. It probably won't run in here. So, any
    functionality it might have had probably won't work.
    <a href="https://www.alanwsmith.com/en/3a/lf/yo/8a/">Check out the 
    original page</a> to see it in action.
    </strong>
  </div><hr /><div class="flow body-block">


<section class="title-section default-flow"></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>The Road to Random</h2>


<p>I'm adding some randomizing functions to <a href="https://bittyjs.com/" >bitty</a>. I wanted to use `crypto.getRandomValues()` instead of `Math.random()`. While it's unlikely to matter, I figure using the better tool makes sense.</p>


<p>Here's the core functions:</p></section>



<section class="javascript-section default-flow"><div class="flow show-javascript">

    <h4 class="show-javascript-heading">JavaScript</h4><div class="javascript-body">
      <pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="source js"><span class="meta function declaration js"><span class="storage type function js">function</span> <span class="entity name function js">randomInt</span><span class="punctuation section group begin js">(</span><span class="variable parameter function js">min</span><span class="punctuation separator parameter function js">,</span> <span class="variable parameter function js">max</span><span class="punctuation section group end js">)</span><span class="meta function declaration js"> </span></span><span class="meta block js"><span class="punctuation section block js">{</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">const</span> <span class="variable other readwrite js">seeker</span> <span class="keyword operator assignment js">=</span> <span class="meta instance constructor js"><span class="keyword operator word new js">new</span><span class="meta function-call constructor js"> <span class="variable type js">Uint32Array</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="constant numeric js">1</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="variable other object js">crypto</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">getRandomValues</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">seeker</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">const</span> <span class="variable other readwrite js">base</span> <span class="keyword operator assignment js">=</span> <span class="variable other object js">seeker</span><span class="meta brackets js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">const</span> <span class="variable other readwrite js">modder</span> <span class="keyword operator assignment js">=</span> <span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">abs</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">max</span> <span class="keyword operator arithmetic js">-</span> <span class="variable other readwrite js">min</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span> <span class="keyword operator arithmetic js">+</span> <span class="constant numeric js">1</span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">let</span> <span class="variable other readwrite js">result</span> <span class="keyword operator assignment js">=</span> <span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">base</span> <span class="keyword operator arithmetic js">%</span> <span class="variable other readwrite js">modder</span><span class="punctuation section group js">)</span></span> <span class="keyword operator arithmetic js">+</span> <span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">min</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">min</span><span class="punctuation separator comma js">,</span> <span class="variable other readwrite js">max</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="keyword control flow js">return</span> <span class="variable other readwrite js">result</span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span><span class="punctuation section block js">}</span></span></span></code></pre>
    </div>
  </div>
</section>



<section class="javascript-section default-flow"><div class="flow show-javascript">

    <h4 class="show-javascript-heading">JavaScript</h4><div class="javascript-body">
      <pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="source js"><span class="meta function declaration js"><span class="storage type function js">function</span> <span class="entity name function js">randomFloat</span><span class="punctuation section group begin js">(</span><span class="variable parameter function js">min</span><span class="punctuation separator parameter function js">,</span> <span class="variable parameter function js">max</span><span class="punctuation section group end js">)</span><span class="meta function declaration js"> </span></span><span class="meta block js"><span class="punctuation section block js">{</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">const</span> <span class="variable other readwrite js">seeker</span> <span class="keyword operator assignment js">=</span> <span class="meta instance constructor js"><span class="keyword operator word new js">new</span><span class="meta function-call constructor js"> <span class="variable type js">Uint32Array</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="constant numeric js">1</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="variable other object js">crypto</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">getRandomValues</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">seeker</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">const</span> <span class="variable other readwrite js">base</span> <span class="keyword operator assignment js">=</span> <span class="variable other object js">seeker</span><span class="meta brackets js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span> <span class="keyword operator arithmetic js">/</span> <span class="meta group js"><span class="punctuation section group js">(</span><span class="constant numeric js">0xFFFFFFFF</span> <span class="keyword operator arithmetic js">+</span> <span class="constant numeric js">1</span><span class="punctuation section group js">)</span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">const</span> <span class="variable other readwrite js">distance</span> <span class="keyword operator assignment js">=</span> <span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">abs</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">max</span> <span class="keyword operator arithmetic js">-</span> <span class="variable other readwrite js">min</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">let</span> <span class="variable other readwrite js">result</span> <span class="keyword operator assignment js">=</span> <span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">base</span> <span class="keyword operator arithmetic js">*</span> <span class="variable other readwrite js">distance</span><span class="punctuation section group js">)</span></span> <span class="keyword operator arithmetic js">+</span> <span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">min</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">min</span><span class="punctuation separator comma js">,</span> <span class="variable other readwrite js">max</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="keyword control flow js">return</span> <span class="variable other readwrite js">result</span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span><span class="punctuation section block js">}</span></span></span></code></pre>
    </div>
  </div>
</section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Snake Eyes</h2>


<p>You pass the functions your minimum and maximum values. They spit out a random value. The numbers are inclusive. To simulate rolling a six sided die, you'd do this:</p></section>


<section class="code-section no-numbers no-buttons default-flow"><pre class="code-block no-numbers no-buttons"><code><span class="aws-code-block-marker"></span><span class="source js"><span class="storage type js">const</span> <span class="variable other readwrite js">roll</span> <span class="keyword operator assignment js">=</span> <span class="meta function-call js"><span class="variable function js">randomInt</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">6</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span></span></code></pre></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Negative Space</h2>


<p>I don't generally need random negative numbers. That's no reason to avoid them. The functions handles them just fine:</p></section>


<section class="code-section no-numbers no-buttons default-flow"><pre class="code-block no-numbers no-buttons"><code><span class="aws-code-block-marker"></span><span class="source js"><span class="meta function-call js"><span class="variable function js">randomInt</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span></span></code></pre></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Min/Max</h2>


<p>The <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="source js"><span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">min</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">min</span><span class="punctuation separator comma js">,</span> <span class="variable other readwrite js">max</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span></span></code> part of the `result` lines is a nice-to-have. It allows you to flip the inputs without breaking the function. I find that useful for negative numbers. Both of these operate on within the same range:</p></section>


<section class="code-section no-numbers no-buttons default-flow"><pre class="code-block no-numbers no-buttons"><code><span class="aws-code-block-marker"></span><span class="source js"><span class="meta function-call js"><span class="variable function js">randomInt</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">6</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span><span class="meta function-call js"><span class="variable function js">randomInt</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">6</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">1</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span></span></code></pre></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>How's That Now?</h2>


<p>The <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="source js"><span class="variable other object js">crypto</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">getRandomValues</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">seeker</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span></span></code> function requires a different approach than <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="source js"><span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">random</span><span class="meta group js"><span class="punctuation section group js">(</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span></span></code>. It works by filling an array with random numbers instead of providing a single random output like the <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">Math</span></code> function.</p>


<p>The approach here makes an array with only one item and populates it with the random number. Then, it uses the remainder operator (<code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">%</span></code>) to get a value in the min/max distance. Finally, the min value is added back in to shift it into the right place.</p>


<p>The float version works by using bytes. It divides the incoming number by <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">0xFFFFFFFF + 1</span></code>. That places the result between 0 and 1. We multiply that by the distance between the min and max numbers using the same approach generally used with <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">Math.random()</span></code>.</p></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>More Code is Better (in this case)</h2>


<p>The <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">crypto</span></code> functions are notably longer than their <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="source js"><span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">random</span><span class="meta group js"><span class="punctuation section group js">(</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span></span></code> counterparts. Take this standard integer approach, for example:</p></section>


<section class="code-section no-buttons no-numbers default-flow"><pre class="code-block no-buttons no-numbers"><code><span class="aws-code-block-marker"></span><span class="source js"><span class="meta function declaration js"><span class="storage type function js">function</span> <span class="entity name function js">randomIntViaMathRandom</span><span class="punctuation section group begin js">(</span><span class="variable parameter function js">min</span><span class="punctuation separator parameter function js">,</span> <span class="variable parameter function js">max</span><span class="punctuation section group end js">)</span><span class="meta function declaration js"> </span></span><span class="meta block js"><span class="punctuation section block js">{</span>
<span class="aws-code-block-marker"></span>  <span class="keyword control flow js">return</span> <span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">floor</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">random</span><span class="meta group js"><span class="punctuation section group js">(</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span> <span class="keyword operator arithmetic js">*</span> <span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">max</span> <span class="keyword operator arithmetic js">-</span> <span class="variable other readwrite js">min</span> <span class="keyword operator arithmetic js">+</span> <span class="constant numeric js">1</span><span class="punctuation section group js">)</span></span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span> <span class="keyword operator arithmetic js">+</span> <span class="variable other readwrite js">min</span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span><span class="punctuation section block js">}</span></span></span></code></pre></section>


<section class="p-section default-flow">


<p>That doesn't matter. The entire point of baking things into functions is to encapsulate the complexity.</p>


<p>-a</p></section>


</div>
  <div class="end-block">
          <section class="endnotes-section default-flow xxlarge-bottom-margin">
            <h3 class="back-matter">Endnotes</h3>
            <div class="xxlarge-flow">
          
        


<section class="endnote-section default-flow">
  


<p>Here's the code I used to make sure swaping the min and max worked properly:</p>


<section class="details-section default-flow">
  <details class="default-flow"><summary>test code</summary>



<section class="javascript-section default-flow"><div class="flow show-javascript">

    <h4 class="show-javascript-heading">JavaScript</h4><div class="javascript-body">
      <pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="source js"><span class="meta function declaration js"><span class="storage type function js">function</span> <span class="entity name function js">randomIntMathCheck</span><span class="punctuation section group begin js">(</span><span class="variable parameter function js">min</span><span class="punctuation separator parameter function js">,</span> <span class="variable parameter function js">max</span><span class="punctuation separator parameter function js">,</span> <span class="variable parameter function js">base</span><span class="punctuation section group end js">)</span><span class="meta function declaration js"> </span></span><span class="meta block js"><span class="punctuation section block js">{</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">const</span> <span class="variable other readwrite js">modder</span> <span class="keyword operator assignment js">=</span> <span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">abs</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">max</span> <span class="keyword operator arithmetic js">-</span> <span class="variable other readwrite js">min</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span> <span class="keyword operator arithmetic js">+</span> <span class="constant numeric js">1</span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">let</span> <span class="variable other readwrite js">result</span> <span class="keyword operator assignment js">=</span> <span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">base</span> <span class="keyword operator arithmetic js">%</span> <span class="variable other readwrite js">modder</span><span class="punctuation section group js">)</span></span> <span class="keyword operator arithmetic js">+</span> <span class="support class builtin js">Math</span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">min</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">min</span><span class="punctuation separator comma js">,</span> <span class="variable other readwrite js">max</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="keyword control flow js">return</span> <span class="variable other readwrite js">result</span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span><span class="punctuation section block js">}</span></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span><span class="meta function declaration js"><span class="storage type function js">function</span> <span class="entity name function js">runTest</span><span class="punctuation section group begin js">(</span><span class="variable parameter function js">values</span><span class="punctuation section group end js">)</span><span class="meta function declaration js"> </span></span><span class="meta block js"><span class="punctuation section block js">{</span>
<span class="aws-code-block-marker"></span>  <span class="storage type js">const</span> <span class="variable other readwrite js">result</span> <span class="keyword operator assignment js">=</span> <span class="meta function-call js"><span class="variable function js">randomIntMathCheck</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other object js">values</span><span class="meta brackets js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span> <span class="variable other object js">values</span><span class="meta brackets js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span> <span class="variable other object js">values</span><span class="meta brackets js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="meta conditional js"><span class="keyword control conditional js">if</span> <span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">result</span> <span class="keyword operator comparison js">===</span> <span class="variable other object js">values</span><span class="meta brackets js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">3</span><span class="punctuation section brackets js">]</span></span><span class="punctuation section group js">)</span></span> <span class="meta block js"><span class="punctuation section block js">{</span>
<span class="aws-code-block-marker"></span>    <span class="meta function-call method js"><span class="support type object console js">console</span><span class="punctuation accessor js">.</span><span class="support function console js">log</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="string template js"><span class="punctuation definition string template begin js">`</span>PASS: </span><span class="meta template expression js"><span class="punctuation definition template-expression begin js">${</span></span><span class="meta template expression js"><span class="source js embedded expression"><span class="variable other readwrite js">values</span></span><span class="punctuation definition template-expression end js">}</span></span><span class="string template js"><span class="punctuation definition string template end js">`</span></span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  </span><span class="meta block js"><span class="punctuation section block js">}</span></span></span> <span class="meta conditional js"><span class="keyword control conditional js">else</span> <span class="meta block js"><span class="punctuation section block js">{</span>
<span class="aws-code-block-marker"></span>    <span class="meta function-call method js"><span class="support type object console js">console</span><span class="punctuation accessor js">.</span><span class="support function console js">error</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="string template js"><span class="punctuation definition string template begin js">`</span>FAIL: Got </span><span class="meta template expression js"><span class="punctuation definition template-expression begin js">${</span></span><span class="meta template expression js"><span class="source js embedded expression"><span class="variable other readwrite js">result</span></span><span class="punctuation definition template-expression end js">}</span></span><span class="string template js"> instead of </span><span class="meta template expression js"><span class="punctuation definition template-expression begin js">${</span></span><span class="meta template expression js"><span class="source js embedded expression"><span class="variable other object js">values</span><span class="meta brackets js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">3</span><span class="punctuation section brackets js">]</span></span></span><span class="punctuation definition template-expression end js">}</span></span><span class="string template js"> for </span><span class="meta template expression js"><span class="punctuation definition template-expression begin js">${</span></span><span class="meta template expression js"><span class="source js embedded expression"><span class="variable other readwrite js">values</span></span><span class="punctuation definition template-expression end js">}</span></span><span class="string template js"><span class="punctuation definition string template end js">`</span></span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  </span><span class="meta block js"><span class="punctuation section block js">}</span></span></span>
<span class="aws-code-block-marker"></span><span class="punctuation section block js">}</span></span></span></code></pre>
    </div>
  </div>
</section>



<section class="javascript-section default-flow"><div class="flow show-javascript">

    <h4 class="show-javascript-heading">JavaScript</h4><div class="javascript-body">
      <pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="source js"><span class="meta function declaration js"><span class="storage type function js">function</span> <span class="entity name function js">runTests</span><span class="punctuation section group begin js">(</span><span class="punctuation section group end js">)</span><span class="meta function declaration js"> </span></span><span class="meta block js"><span class="punctuation section block js">{</span>
<span class="aws-code-block-marker"></span>  <span class="meta sequence js"><span class="punctuation section brackets js">[</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">5</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">6</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">7</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">8</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">9</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">10</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">5</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">6</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">7</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">8</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">5</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">6</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">7</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">8</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">5</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">6</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">7</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">8</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">9</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">10</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">3</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">4</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">5</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">6</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">7</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">0</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">8</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">1</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">9</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>    <span class="meta sequence js"><span class="punctuation section brackets js">[</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation separator comma js">,</span> <span class="constant numeric js">10</span><span class="punctuation separator comma js">,</span> <span class="keyword operator arithmetic js">-</span><span class="constant numeric js">2</span><span class="punctuation section brackets js">]</span></span><span class="punctuation separator comma js">,</span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span>  <span class="punctuation section brackets js">]</span></span><span class="punctuation accessor js">.</span><span class="meta function-call method js"><span class="variable function js">forEach</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="meta function declaration js"><span class="punctuation section group begin js">(</span><span class="variable parameter function js">test</span><span class="punctuation section group end js">)</span><span class="meta function declaration js"> </span><span class="storage type function arrow js">=&gt;</span></span> <span class="meta block js"><span class="punctuation section block js">{</span>
<span class="aws-code-block-marker"></span>    <span class="meta function-call js"><span class="variable function js">runTest</span><span class="meta group js"><span class="punctuation section group js">(</span><span class="variable other readwrite js">test</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span>  <span class="punctuation section block js">}</span></span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span>
<span class="aws-code-block-marker"></span><span class="punctuation section block js">}</span></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span><span class="meta function-call js"><span class="variable function js">runTests</span><span class="meta group js"><span class="punctuation section group js">(</span></span><span class="meta group js"><span class="punctuation section group js">)</span></span></span><span class="punctuation terminator statement js">;</span></span></code></pre>
    </div>
  </div>
</section></details>
</section>



</section>



            </div>
          </section>
    
        <section class="references-section flow">
            <h3 class="back-matter large-bottom-padding">References</h3>
            <div class="default-flow">
        
        


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues">JavaScript Crypto: getRandomValues()</a>
    </div>
    <div class="default-flow">
      
    </div>
</section>


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">JavaScript Math.random()</a>
    </div>
    <div class="default-flow">
      
    </div>
</section>


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array">JavaScript Unit32Array</a>
    </div>
    <div class="default-flow">
      
    </div>
</section>


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">JavaScript Remainder (%)</a>
    </div>
    <div class="default-flow">
      


<p>Some languages use <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">%</span></code> as a modulo operator. It's similar, but not quite the same as the remainder. Check the link for details.</p>
    </div>
</section>
      </div>
        </section>
    </div>
]]></description> 
</item><item>
<title><![CDATA[Prevent a Checkbox from Staying Checked when a Page Refreshes in Firefox]]></title>
<link>https://www.alanwsmith.com/en/3a/nx/3n/ui/</link>
<pubDate>Wed, 11 Mar 2026 11:12:15 -0400</pubDate>
<guid>2ad3bcc1-1c5c-5715-8cfa-2c4f8bd74b82</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow">


<p>This one bit me.</p>


<p>In some browsers, a checkbox that's been checked will revert to unchecked by default if the pages refreshes. That's not true in the current version of Firefox. You have to add <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text html basic">autocomplete=&quot;off&quot;</span></code> to make it consistent with the other browsers.</p>


<p>For example, in my Chrome browser I can check both of these and when I refresh the page both revert to being unchecked. In Firefox, the first box stays checked.</p></section>


<section class="html-section flow show-html"><h4 class="show-html-heading">Output</h4>
  <div>
  <label>
    <input type="checkbox" />
    Example checkbox without an autocomplete attribute 
  </label>
</div>

<div>
  <label>
    <input type="checkbox" autocomplete="off" />
    Example checkbox with autocomplete set to 'off'
  </label>
</div>

  <h4 class="show-html-heading">HTML</h4><pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="text html basic"><span class="meta tag block any html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag block any html">div</span><span class="punctuation definition tag end html">&gt;</span></span>
<span class="aws-code-block-marker"></span>  <span class="meta tag inline form html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag inline form html">label</span><span class="punctuation definition tag end html">&gt;</span></span>
<span class="aws-code-block-marker"></span>    <span class="meta tag inline form html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag inline form html">input</span> <span class="meta attribute-with-value html"><span class="entity other attribute-name html">type</span><span class="punctuation separator key-value html">=</span></span><span class="meta attribute-with-value html"><span class="string quoted double html"><span class="punctuation definition string begin html">&quot;</span>checkbox<span class="punctuation definition string end html">&quot;</span></span></span><span class="punctuation definition tag end html"> /&gt;</span></span>
<span class="aws-code-block-marker"></span>    Example checkbox without an autocomplete attribute 
<span class="aws-code-block-marker"></span>  <span class="meta tag inline form html"><span class="punctuation definition tag begin html">&lt;/</span><span class="entity name tag inline form html">label</span><span class="punctuation definition tag end html">&gt;</span></span>
<span class="aws-code-block-marker"></span><span class="meta tag block any html"><span class="punctuation definition tag begin html">&lt;/</span><span class="entity name tag block any html">div</span><span class="punctuation definition tag end html">&gt;</span></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span><span class="meta tag block any html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag block any html">div</span><span class="punctuation definition tag end html">&gt;</span></span>
<span class="aws-code-block-marker"></span>  <span class="meta tag inline form html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag inline form html">label</span><span class="punctuation definition tag end html">&gt;</span></span>
<span class="aws-code-block-marker"></span>    <span class="meta tag inline form html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag inline form html">input</span> <span class="meta attribute-with-value html"><span class="entity other attribute-name html">type</span><span class="punctuation separator key-value html">=</span></span><span class="meta attribute-with-value html"><span class="string quoted double html"><span class="punctuation definition string begin html">&quot;</span>checkbox<span class="punctuation definition string end html">&quot;</span></span></span> <span class="meta attribute-with-value html"><span class="entity other attribute-name html">autocomplete</span><span class="punctuation separator key-value html">=</span></span><span class="meta attribute-with-value html"><span class="string quoted double html"><span class="punctuation definition string begin html">&quot;</span>off<span class="punctuation definition string end html">&quot;</span></span></span><span class="punctuation definition tag end html"> /&gt;</span></span>
<span class="aws-code-block-marker"></span>    Example checkbox with autocomplete set to &#39;off&#39;
<span class="aws-code-block-marker"></span>  <span class="meta tag inline form html"><span class="punctuation definition tag begin html">&lt;/</span><span class="entity name tag inline form html">label</span><span class="punctuation definition tag end html">&gt;</span></span>
<span class="aws-code-block-marker"></span><span class="meta tag block any html"><span class="punctuation definition tag begin html">&lt;/</span><span class="entity name tag block any html">div</span><span class="punctuation definition tag end html">&gt;</span></span></span></code></pre>

</section>


<section class="p-section default-flow">


<p>We have way fewer differences between browsers than in the days of The Browser Wars. They still crop up from time to time, though.</p>


<p>-a</p></section>


</div>
  <div class="end-block">
          <section class="endnotes-section default-flow xxlarge-bottom-margin">
            <h3 class="back-matter">Endnotes</h3>
            <div class="xxlarge-flow">
          
        


<section class="endnote-section default-flow">
  


<p>I'm running Firefox on a mac and seeing the checkbox state persist there. YMMV on other OSes and maybe the browsers will gain consistency over time.</p>
</section>


<section class="endnote-section default-flow">
  


<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#autocomplete" >input -> autocomplete docs on MDN</a> state that:</p>


<section class="blockquote-section default-flow">
  <blockquote class="flow default-flow">


<p>This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types</p></blockquote>
</section>


<section class="p-section default-flow">


<p>Clearly, that's not accurate. The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#checked" > checkbox -> checked</a> docs have an explicit call out to Firefox maintaining the state and pointing to <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">autocomplete</span></code> for how to address it.</p></section>
</section>



            </div>
          </section>
    
        <section class="references-section flow">
            <h3 class="back-matter large-bottom-padding">References</h3>
            <div class="default-flow">
        
        


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#autocomplete"><code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">&lt;input&gt;</span></code>: The HTML Input element - autocomplete</a>
    </div>
    <div class="default-flow">
      
    </div>
</section>


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#checked"><code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">&lt;input type=&quot;checkbox&quot;&gt;</span></code> - checked</a>
    </div>
    <div class="default-flow">
      
    </div>
</section>


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value">HTML attribute: autocomplete</a>
    </div>
    <div class="default-flow">
      
    </div>
</section>
      </div>
        </section>
    </div>
]]></description> 
</item><item>
<title><![CDATA[Filter the First N Number of Items from a JSON Array with jq]]></title>
<link>https://www.alanwsmith.com/en/3a/ni/m6/3o/</link>
<pubDate>Wed, 11 Mar 2026 09:11:23 -0400</pubDate>
<guid>ca50f07a-5a67-545b-9960-9827c1343c3c</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow">


<p>Use <a href="https://jqlang.org/" >jq's</a> <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[start:finish]</span></code> to filter JSON to remove all but the first N number of items from a JSON array. For example:</p>


<p>For example:</p></section>


<section class="code-section default-flow"><pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="source shell bash"><span class="meta function-call shell"><span class="support function echo shell">echo</span></span><span class="meta function-call arguments shell"> <span class="string quoted single shell"><span class="punctuation definition string begin shell">&#39;</span>{ &quot;items&quot;: [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;] }<span class="punctuation definition string end shell">&#39;</span></span> <span class="punctuation separator continuation line shell">\
<span class="aws-code-block-marker"></span></span></span><span class="keyword operator logical pipe shell">|</span> <span class="meta function-call shell"><span class="variable function shell">jq</span></span><span class="meta function-call arguments shell"> <span class="string quoted single shell"><span class="punctuation definition string begin shell">&#39;</span>.items = .items[0:2]<span class="punctuation definition string end shell">&#39;</span></span></span></span></code></pre></section>


<section class="results-section">
<div class="results-header">Output:</div>
<div class="results-body">
<pre><code>{
  &quot;items&quot;: [
    &quot;a&quot;,
    &quot;b&quot;
  ]
}</code></pre>
</div></section>





<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>More Range</h2>


<p>The <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">start</span></code> and <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">finish</span></code> values are indexes. They can pull other ranges of the array beyond starting with the first item. For example:</p></section>


<section class="code-section default-flow"><pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="source shell bash"><span class="meta function-call shell"><span class="support function echo shell">echo</span></span><span class="meta function-call arguments shell"> <span class="string quoted single shell"><span class="punctuation definition string begin shell">&#39;</span>{ &quot;items&quot;: [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;] }<span class="punctuation definition string end shell">&#39;</span></span> <span class="punctuation separator continuation line shell">\
<span class="aws-code-block-marker"></span></span></span><span class="keyword operator logical pipe shell">|</span> <span class="meta function-call shell"><span class="variable function shell">jq</span></span><span class="meta function-call arguments shell"> <span class="string quoted single shell"><span class="punctuation definition string begin shell">&#39;</span>.items = .items[1:3]<span class="punctuation definition string end shell">&#39;</span></span></span></span></code></pre></section>


<section class="results-section">
<div class="results-header">Output:</div>
<div class="results-body">
<pre><code>{
  &quot;items&quot;: [
    &quot;b&quot;,
    &quot;c&quot;
  ]
}</code></pre>
</div></section>


<section class="results-end-section default-flow">


<p>The key being that the overall structure of the JSON remains the same.</p></section>


<section class="p-section default-flow">


<p><code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">jq</span></code> continues to impress.</p>


<p>-a</p></section>


</div>
  <div class="end-block">
        <section class="references-section flow">
            <h3 class="back-matter large-bottom-padding">References</h3>
            <div class="default-flow">
        
        


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      <a href="https://jqlang.org/">jq</a>
    </div>
    <div class="default-flow">
      


<p>the lightweight and flexible command-line JSON processor.</p>
    </div>
</section>
      </div>
        </section>
    </div>
]]></description> 
</item><item>
<title><![CDATA[A `jq` Filter for Card Types from Archidekt JSON Feeds]]></title>
<link>https://www.alanwsmith.com/en/3a/zh/go/dv/</link>
<pubDate>Fri, 6 Mar 2026 09:05:06 -0500</pubDate>
<guid>cfa0b157-ced7-568b-a5cc-cd0dd715336b</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow"></section>


<section class="forward-section default-flow">


<p>I'm making my own Magic: The Gathering deck maker. It's based on feeds from <a href="https://archidekt.com/" >Archidekt</a>.</p>


<p>The process I'm doing is to make big collections of cards for each color/color-combination to start with. I filter those down to make actual decks.</p>


<p>My first step was to split things my existing decks into the colors/combos. I did that by pulling down the Archidekt JSON data from their API. Then, I used <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">jq</span></code> to filter the decks and pull out the names for each set.</p></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Single Color Cards</h2>


<p>For example, Green:</p></section>


<section class="cli-section default-flow">

<pre class="code-block no-numbers"><code><span class="aws-code-block-marker"></span><span class="source shell bash"><span class="meta function-call shell"><span class="variable function shell">cat</span></span><span class="meta function-call arguments shell"> tmp.json</span> <span class="keyword operator logical pipe shell">|</span> <span class="meta function-call shell"><span class="variable function shell">jq</span></span><span class="meta function-call arguments shell"><span class="variable parameter option shell"><span class="punctuation definition parameter shell"> -</span>r</span> <span class="string quoted single shell"><span class="punctuation definition string begin shell">&#39;</span>.cards[] 
<span class="aws-code-block-marker"></span>| select(.card.oracleCard.colors | length == 1) 
<span class="aws-code-block-marker"></span>| select(.card.oracleCard.colors | any(index(&quot;Green&quot;) )) 
<span class="aws-code-block-marker"></span>| .card.oracleCard.name<span class="punctuation definition string end shell">&#39;</span></span> <span class="keyword operator assignment redirection shell">&gt;</span> green-names.txt</span></span></code></pre></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Multi Color</h2>


<p>For example, Green and Black for "Golgari"</p></section>


<section class="cli-section default-flow">

<pre class="code-block no-numbers"><code><span class="aws-code-block-marker"></span><span class="source shell bash"><span class="meta function-call shell"><span class="variable function shell">cat</span></span><span class="meta function-call arguments shell"> input.json</span> <span class="keyword operator logical pipe shell">|</span> <span class="meta function-call shell"><span class="variable function shell">jq</span></span><span class="meta function-call arguments shell"><span class="variable parameter option shell"><span class="punctuation definition parameter shell"> -</span>r</span> <span class="string quoted single shell"><span class="punctuation definition string begin shell">&#39;</span>.cards[]
<span class="aws-code-block-marker"></span>| select(.card.oracleCard.colorIdentity | length == 2) 
<span class="aws-code-block-marker"></span>| select(.card.oracleCard.colorIdentity | any(index(&quot;Black&quot;))) 
<span class="aws-code-block-marker"></span>| select(.card.oracleCard.colorIdentity | any(index(&quot;Green&quot;))) 
<span class="aws-code-block-marker"></span>| .card.oracleCard.name<span class="punctuation definition string end shell">&#39;</span></span> <span class="keyword operator assignment redirection shell">&gt;</span> golgari-names.txt</span></span></code></pre></section>


<section class="p-section default-flow">


<p>I've used <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">jq</span></code> a few times before. This is the first time I used it to filter things based on values nested inside objects. It's super impressive.</p>


<p>-a</p></section>


</div>
  <div class="end-block">
        <section class="references-section flow">
            <h3 class="back-matter large-bottom-padding">References</h3>
            <div class="default-flow">
        
        


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      The Archidekt API
    </div>
    <div class="default-flow">
      


<p>Archidekt doesn't mind folks poking at their API. You can use the ID of a deck in a URL like this to get the JSON for it:</p>


<p><a href="https://archidekt.com/api/decks/20588790/" > https://archidekt.com/api/decks/20588790/</a></p>
    </div>
</section>


<section class="ref-section faded-reverse-left-border default-left-padding">
    <div>
      <a href="https://jqlang.org/">jq - the JSON processor</a>
    </div>
    <div class="default-flow">
      


<p>The only way to fly when you need to mess with JSON on the command line.</p>
    </div>
</section>
      </div>
        </section>
    </div>
]]></description> 
</item><item>
<title><![CDATA[Default Pages for a Static Site Generator]]></title>
<link>https://www.alanwsmith.com/en/3a/dd/9e/rq/</link>
<pubDate>Thu, 26 Feb 2026 10:01:37 -0500</pubDate>
<guid>33452947-1980-5a97-b0da-a66212dd2996</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow">


<p>More work on bitty's<sup class="xsmall-font-size"><a class="footnote-shorthand-span" href="#footnote-1-text"
    id="footnote-1-link"
    >1</a></sup> documentation is under way. I'm using files and directories for all the data instead of putting it into a database. Pages are assembled by including files inside each other.</p>


<p>I use a directory structure like this:</p></section>


<section class="code-section no-buttons no-numbers default-flow"><pre class="code-block no-buttons no-numbers"><code><span class="aws-code-block-marker"></span><span class="text plain">data-receive
<span class="aws-code-block-marker"></span>  index.html
<span class="aws-code-block-marker"></span>  tests 
<span class="aws-code-block-marker"></span>    basic-check
<span class="aws-code-block-marker"></span>      name.html
<span class="aws-code-block-marker"></span>      notes.html
<span class="aws-code-block-marker"></span>      sample.js
<span class="aws-code-block-marker"></span>      trigger.js
<span class="aws-code-block-marker"></span>    bounce-check
<span class="aws-code-block-marker"></span>      name.html
<span class="aws-code-block-marker"></span>      notes.html
<span class="aws-code-block-marker"></span>      sample.js
<span class="aws-code-block-marker"></span>      trigger.js</span></code></pre></section>


<section class="p-section default-flow">


<p>The <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">index.html</span></code> file is what gets served. Its content is built by looping over the <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">tests</span></code> directory and combining the files from the directory for each test.</p></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Each Like the Other</h2>


<p>Every test directory has the same set of files with the following features:</p></section>


<section class="olist-section default-flow">
  <ol class="default-flow">


<li class="default-flow">
The <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">name.html</span></code> and <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">script.js</span></code> are different for each test.</li>


<li class="default-flow">
The <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">trigger.js</span></code> file is the same for 90% of the tests.</li>


<li class="default-flow">
The <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">notes.html</span></code> file is usually empty.</li></ol>
</section>


<section class="p-section default-flow">


<p>Unsurprisingly, I wrote a script that watches for new test directories and stubs in an initial set of files.</p>


<p>The thing is, the <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">trigger.js</span></code> file has evolved over time. So, I needed a way to update it. The trick being to avoid overwriting any of the versions of the file I customized.</p></section>


<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>Scoring the Default</h2>


<p>The solution I'm using is all about and underscore. It breaks down like this:</p></section>


<section class="olist-section default-flow">
  <ol class="default-flow">


<li class="default-flow">


<p>My script generates the default version of <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">trigger.js</span></code> with a leading underscore on the file name:</p>


<section class="path-section no-numbers no-buttons default-flow"><pre class="code-block no-numbers no-buttons"><code><span class="aws-code-block-marker"></span><span class="text plain">_trigger.js</span></code></pre></section>


</li>


<li class="default-flow">


<p>I rename the file to remove the underscore if I need to customized the test.</p>


<section class="path-section no-numbers no-buttons default-flow"><pre class="code-block no-numbers no-buttons"><code><span class="aws-code-block-marker"></span><span class="text plain">trigger.js</span></code></pre></section>


</li>


<li class="default-flow">


<p>I re-run my file generation script when the trigger format changes.</p>


<section class="list-section default-flow"><ul class="default-flow">


<li class="default-flow">
If the <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">trigger.js</span></code> file exists, the script doesn't do anything for that test.</li>


<li class="default-flow">
If the <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">trigger.js</span></code> file doesn't exist, the script creates or updates the <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">_trigger.js</span></code> file.</li></ul>
</section>


</li>


<li class="default-flow">
When the site builds, the <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">trigger.js</span></code> file gets included if it exists. Otherwise, the fallback <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">_trigger.js</span></code> is used.</li></ol>
</section>





<section 
   class="h2-section default-flow xxlarge-top-margin"
>

  <h2>The Name is the Game</h2>


<p>Removing the other files from the directory tree for a moment we get this:</p></section>


<section class="code-section no-buttons no-numbers default-flow"><pre class="code-block no-buttons no-numbers"><code><span class="aws-code-block-marker"></span><span class="text plain">data-receive
<span class="aws-code-block-marker"></span>  index.html
<span class="aws-code-block-marker"></span>    tests 
<span class="aws-code-block-marker"></span>      basic-check
<span class="aws-code-block-marker"></span>        _trigger.js
<span class="aws-code-block-marker"></span>      multi-check
<span class="aws-code-block-marker"></span>        trigger.js
<span class="aws-code-block-marker"></span>      rebound-check
<span class="aws-code-block-marker"></span>        trigger.js
<span class="aws-code-block-marker"></span>      static-check
<span class="aws-code-block-marker"></span>        _trigger.js</span></code></pre></section>


<section class="p-section default-flow">


<p>Using the name of the file as a toggle to determine what should happen in both stubbing and output is nice. Removing a single character takes care of everything for me. It's also an instance read for which files are the default and which have been customized.</p>


<p>I'm all about reducing the friction it takes to make thing. This is a nice one that lets me focus on content rather than on how it's stored.</p>


<p>-a</p></section>


</div>
  <div class="end-block">
          <section class="endnotes-section default-flow xxlarge-bottom-margin">
            <h3 class="back-matter">Endnotes</h3>
            <div class="xxlarge-flow">
          
        


<section class="endnote-section default-flow">
  


<p>The site is built with a custom static site generator built around <a href="https://docs.rs/minijinja/latest/minijinja/" >MiniJinja</a> (rust's version of Jinja). It's fantastic.</p>
</section>


<section class="endnote-section default-flow">
  


<p>This is a cut down version of the directory structure to make the example clearer. The actual one has more levels and everything starts with the <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">_</span></code> named stub file.</p>
</section>
            </div>
          </section>
    
        <section class="footnotes-section flow">
            <h3 class="back-matter">Footnotes</h3>
        
        


<section class="footnote-section small-font-size">
  <div><sup>
      <a href="#footnote-1-link">
        <span id="footnote-1-text">1 &#x2934;
        </span>
      </a>
      </sup></div>
  <div>
    
    <div><a href="https://bitty-js.com/"><strong>bitty - the little framework that could</strong></a></div>
    <div class="default-flow">


<p>Version 8 is underway. I've got a good feeling about this one.</p></div>
    
  </div>


</section>
        </section>
    </div>
]]></description> 
</item><item>
<title><![CDATA[Walking a Directory with Directory Parts in Python]]></title>
<link>https://www.alanwsmith.com/en/3a/b3/uh/ip/</link>
<pubDate>Wed, 25 Feb 2026 15:46:00 -0500</pubDate>
<guid>ecfe98ef-7e72-55b2-aa40-e0cb34f0d2ba</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow"></section>


<section class="forward-section default-flow">


<p>Working on <a href="https://bitty-js.com/" >bitty</a>. Setting up a copy system for making tests. This is the way I'm pulling direcotires to build out a little easier.</p>


<p>The idea being that I need to keep the positions of the input directories relative to a template structure.</p>


<p>I've done this like a million times, but never put the function into the grimoire. Checking that off the list here.</p>


<p>-a</p></section>


<section class="code-section default-flow"><pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="source python"><span class="meta statement import python"><span class="keyword control import python">import</span> <span class="meta qualified-name python"><span class="meta generic-name python">os</span></span></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span><span class="meta function python"><span class="storage type function python">def</span> <span class="entity name function python"><span class="meta generic-name python">parse_dir</span></span></span><span class="meta function parameters python"><span class="punctuation section parameters begin python">(</span></span><span class="meta function parameters python"><span class="variable parameter python">dir</span><span class="punctuation section parameters end python">)</span></span><span class="meta function python"><span class="punctuation section function begin python">:</span></span>
<span class="aws-code-block-marker"></span>  <span class="keyword control flow return python">return</span> <span class="meta group python"><span class="punctuation section group begin python">(</span><span class="meta item-access python"><span class="meta qualified-name python"><span class="support function builtin python">dir</span></span></span><span class="meta item-access python"><span class="punctuation section brackets begin python">[</span></span><span class="meta item-access arguments python"><span class="constant numeric integer decimal python">0</span></span><span class="meta item-access python"><span class="punctuation section brackets end python">]</span></span><span class="meta function-call python"><span class="meta qualified-name python"><span class="punctuation accessor dot python">.</span></span><span class="meta qualified-name python"><span class="variable function python">split</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta string python"><span class="string quoted double python"><span class="punctuation definition string begin python">&quot;</span></span></span><span class="meta string python"><span class="string quoted double python">/<span class="punctuation definition string end python">&quot;</span></span></span></span><span class="punctuation section arguments end python">)</span></span><span class="punctuation separator tuple python">,</span> <span class="meta item-access python"><span class="meta qualified-name python"><span class="support function builtin python">dir</span></span></span><span class="meta item-access python"><span class="punctuation section brackets begin python">[</span></span><span class="meta item-access arguments python"><span class="constant numeric integer decimal python">2</span></span><span class="meta item-access python"><span class="punctuation section brackets end python">]</span></span><span class="punctuation section group end python">)</span></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span><span class="meta function python"><span class="storage type function python">def</span> <span class="entity name function python"><span class="meta generic-name python">dir_list</span></span></span><span class="meta function parameters python"><span class="punctuation section parameters begin python">(</span></span><span class="meta function parameters python"><span class="variable parameter python">path</span><span class="punctuation section parameters end python">)</span></span><span class="meta function python"><span class="punctuation section function begin python">:</span></span>
<span class="aws-code-block-marker"></span>  <span class="keyword control flow return python">return</span> <span class="meta structure list python"><span class="punctuation section list begin python">[</span><span class="meta function-call python"><span class="meta qualified-name python"><span class="variable function python">parse_dir</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta qualified-name python"><span class="support function builtin python">dir</span></span></span><span class="punctuation section arguments end python">)</span></span> <span class="meta expression generator python"><span class="keyword control flow for generator python">for</span> <span class="support function builtin python">dir</span> <span class="keyword control flow for in python">in</span></span> <span class="meta function-call python"><span class="meta qualified-name python"><span class="meta generic-name python">os</span><span class="punctuation accessor dot python">.</span></span><span class="meta qualified-name python"><span class="variable function python">walk</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta qualified-name python"><span class="meta generic-name python">path</span></span></span><span class="punctuation section arguments end python">)</span></span><span class="punctuation section list end python">]</span></span>
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span><span class="meta statement if python"><span class="keyword control flow conditional python">if</span> <span class="meta qualified-name python"><span class="support variable magic python">__name__</span></span> <span class="keyword operator comparison python">==</span> <span class="meta string python"><span class="string quoted double python"><span class="punctuation definition string begin python">&quot;</span></span></span><span class="meta string python"><span class="string quoted double python">__main__<span class="punctuation definition string end python">&quot;</span></span></span><span class="punctuation section block conditional python">:</span></span>
<span class="aws-code-block-marker"></span>  <span class="meta statement for python"><span class="keyword control flow for python">for</span> <span class="support function builtin python">dir</span> <span class="meta statement for python"><span class="keyword control flow for in python">in</span></span></span><span class="meta statement for python"> <span class="meta function-call python"><span class="meta qualified-name python"><span class="variable function python">dir_list</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta string python"><span class="string quoted double python"><span class="punctuation definition string begin python">&quot;</span></span></span><span class="meta string python"><span class="string quoted double python">dir-structure-test<span class="punctuation definition string end python">&quot;</span></span></span></span><span class="punctuation section arguments end python">)</span></span><span class="punctuation section block for python">:</span></span>
<span class="aws-code-block-marker"></span>    <span class="meta function-call python"><span class="meta qualified-name python"><span class="support function builtin python">print</span></span><span class="punctuation section arguments begin python">(</span><span class="meta function-call arguments python"><span class="meta qualified-name python"><span class="support function builtin python">dir</span></span></span><span class="punctuation section arguments end python">)</span></span></span></code></pre></section>


<section class="results-section">
<div class="results-header">Output:</div>
<div class="results-body">
<pre><code>([&#x27;dir-structure-test&#x27;], [&#x27;.DS_Store&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;], [&#x27;.DS_Store&#x27;, &#x27;appendix-dublin.txt&#x27;, &#x27;invited-urls.txt&#x27;, &#x27;tahoe-leone.txt&#x27;, &#x27;neck-ericsson.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;springfield-poetry&#x27;], [&#x27;elections-imaging.txt&#x27;, &#x27;standings-coding.txt&#x27;, &#x27;.DS_Store&#x27;, &#x27;pasta-hotmail.txt&#x27;, &#x27;table-constraint.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;springfield-poetry&#x27;, &#x27;out-tub&#x27;], [&#x27;auditor-whom.txt&#x27;, &#x27;inside-lawyer.txt&#x27;, &#x27;life-rush.txt&#x27;, &#x27;naked-earlier.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;springfield-poetry&#x27;, &#x27;liquid-ensuring&#x27;], [&#x27;gratuit-ascii.txt&#x27;, &#x27;bikini-kits.txt&#x27;, &#x27;safer-finding.txt&#x27;, &#x27;driving-oriented.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;springfield-poetry&#x27;, &#x27;tattoo-reference&#x27;], [&#x27;airports-language.txt&#x27;, &#x27;virginia-roll.txt&#x27;, &#x27;del-embassy.txt&#x27;, &#x27;returns-lately.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;springfield-poetry&#x27;, &#x27;jewish-weak&#x27;], [&#x27;unemployment-cattle.txt&#x27;, &#x27;assigned-hu.txt&#x27;, &#x27;floors-sales.txt&#x27;, &#x27;adaptive-loud.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;motorcycle-valves&#x27;], [&#x27;.DS_Store&#x27;, &#x27;otherwise-topless.txt&#x27;, &#x27;simpson-enemy.txt&#x27;, &#x27;painted-error.txt&#x27;, &#x27;result-newer.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;motorcycle-valves&#x27;, &#x27;johnston-finland&#x27;], [&#x27;seventh-japan.txt&#x27;, &#x27;elementary-romania.txt&#x27;, &#x27;salem-enhancement.txt&#x27;, &#x27;qatar-encryption.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;motorcycle-valves&#x27;, &#x27;research-bother&#x27;], [&#x27;gen-indonesian.txt&#x27;, &#x27;downloading-processor.txt&#x27;, &#x27;informal-weak.txt&#x27;, &#x27;fruit-completely.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;motorcycle-valves&#x27;, &#x27;motor-million&#x27;], [&#x27;ny-zoom.txt&#x27;, &#x27;metro-newspapers.txt&#x27;, &#x27;modified-cables.txt&#x27;, &#x27;italic-collection.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;motorcycle-valves&#x27;, &#x27;den-lexmark&#x27;], [&#x27;acids-hydraulic.txt&#x27;, &#x27;remember-obtaining.txt&#x27;, &#x27;dishes-ref.txt&#x27;, &#x27;offers-campus.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;accurately-struct&#x27;], [&#x27;scientists-hotels.txt&#x27;, &#x27;.DS_Store&#x27;, &#x27;save-bookmark.txt&#x27;, &#x27;tn-populations.txt&#x27;, &#x27;vg-griffin.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;accurately-struct&#x27;, &#x27;accidents-ads&#x27;], [&#x27;draw-mug.txt&#x27;, &#x27;writings-journalist.txt&#x27;, &#x27;gave-integrating.txt&#x27;, &#x27;only-environments.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;accurately-struct&#x27;, &#x27;interventions-src&#x27;], [&#x27;faqs-tries.txt&#x27;, &#x27;milfhunter-seen.txt&#x27;, &#x27;stanford-relationship.txt&#x27;, &#x27;trails-mouse.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;accurately-struct&#x27;, &#x27;drove-justice&#x27;], [&#x27;biography-considerations.txt&#x27;, &#x27;slovenia-digit.txt&#x27;, &#x27;jackets-be.txt&#x27;, &#x27;tubes-henry.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;accurately-struct&#x27;, &#x27;collectible-kirk&#x27;], [&#x27;admissions-wifi.txt&#x27;, &#x27;expertise-qualifying.txt&#x27;, &#x27;systematic-hebrew.txt&#x27;, &#x27;performance-ask.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;configuration-consumer&#x27;], [&#x27;riders-for.txt&#x27;, &#x27;.DS_Store&#x27;, &#x27;towers-ford.txt&#x27;, &#x27;grams-shut.txt&#x27;, &#x27;acrobat-sample.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;configuration-consumer&#x27;, &#x27;assumed-dir&#x27;], [&#x27;tubes-heath.txt&#x27;, &#x27;overseas-press.txt&#x27;, &#x27;providers-helmet.txt&#x27;, &#x27;markers-asbestos.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;configuration-consumer&#x27;, &#x27;dallas-would&#x27;], [&#x27;ryan-acer.txt&#x27;, &#x27;gmbh-mas.txt&#x27;, &#x27;strip-bulletin.txt&#x27;, &#x27;steal-release.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;configuration-consumer&#x27;, &#x27;comparison-notify&#x27;], [&#x27;lincoln-scotia.txt&#x27;, &#x27;church-communication.txt&#x27;, &#x27;optional-assist.txt&#x27;, &#x27;ga-taxi.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;variance-trustee&#x27;, &#x27;configuration-consumer&#x27;, &#x27;coastal-maria&#x27;], [&#x27;blast-exercises.txt&#x27;, &#x27;dynamic-pleased.txt&#x27;, &#x27;bother-language.txt&#x27;, &#x27;tiger-sewing.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;], [&#x27;.DS_Store&#x27;, &#x27;indicator-optimize.txt&#x27;, &#x27;browsers-lift.txt&#x27;, &#x27;alternate-postings.txt&#x27;, &#x27;always-retail.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;vertex-undefined&#x27;], [&#x27;japanese-vehicle.txt&#x27;, &#x27;.DS_Store&#x27;, &#x27;surplus-designs.txt&#x27;, &#x27;link-educated.txt&#x27;, &#x27;labour-stretch.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;vertex-undefined&#x27;, &#x27;turned-totals&#x27;], [&#x27;carry-curtis.txt&#x27;, &#x27;russian-configure.txt&#x27;, &#x27;producing-ministry.txt&#x27;, &#x27;coach-briefing.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;vertex-undefined&#x27;, &#x27;cl-benefits&#x27;], [&#x27;cycling-booking.txt&#x27;, &#x27;rim-walnut.txt&#x27;, &#x27;characterization-traditional.txt&#x27;, &#x27;pools-competitions.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;vertex-undefined&#x27;, &#x27;allocated-fabulous&#x27;], [&#x27;build-cute.txt&#x27;, &#x27;phd-complement.txt&#x27;, &#x27;tell-producing.txt&#x27;, &#x27;ass-filtering.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;vertex-undefined&#x27;, &#x27;organised-ko&#x27;], [&#x27;then-wholesale.txt&#x27;, &#x27;occupation-disclaimers.txt&#x27;, &#x27;preferences-aircraft.txt&#x27;, &#x27;boom-clark.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;reservations-cho&#x27;], [&#x27;.DS_Store&#x27;, &#x27;hats-concerned.txt&#x27;, &#x27;excel-acquisition.txt&#x27;, &#x27;ecology-safe.txt&#x27;, &#x27;wrapped-imports.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;reservations-cho&#x27;, &#x27;total-smaller&#x27;], [&#x27;urge-compete.txt&#x27;, &#x27;wool-harbour.txt&#x27;, &#x27;phentermine-bookings.txt&#x27;, &#x27;breakfast-voice.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;reservations-cho&#x27;, &#x27;worked-compliance&#x27;], [&#x27;wrote-catch.txt&#x27;, &#x27;hu-fujitsu.txt&#x27;, &#x27;settlement-longest.txt&#x27;, &#x27;robin-sony.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;reservations-cho&#x27;, &#x27;ez-plenty&#x27;], [&#x27;chelsea-defend.txt&#x27;, &#x27;czech-butter.txt&#x27;, &#x27;starting-escorts.txt&#x27;, &#x27;sparc-september.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;reservations-cho&#x27;, &#x27;open-ng&#x27;], [&#x27;casino-enormous.txt&#x27;, &#x27;aim-unlock.txt&#x27;, &#x27;adopt-carrier.txt&#x27;, &#x27;gbp-safety.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;contact-nurse&#x27;], [&#x27;.DS_Store&#x27;, &#x27;button-modems.txt&#x27;, &#x27;carmen-showing.txt&#x27;, &#x27;chief-insider.txt&#x27;, &#x27;servers-declared.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;contact-nurse&#x27;, &#x27;cho-gratis&#x27;], [&#x27;cotton-episodes.txt&#x27;, &#x27;customise-chemical.txt&#x27;, &#x27;tar-operators.txt&#x27;, &#x27;baseball-three.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;contact-nurse&#x27;, &#x27;indirect-chicks&#x27;], [&#x27;consoles-dh.txt&#x27;, &#x27;plenty-complex.txt&#x27;, &#x27;being-silver.txt&#x27;, &#x27;wax-victim.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;contact-nurse&#x27;, &#x27;jeffrey-stereo&#x27;], [&#x27;boom-mi.txt&#x27;, &#x27;noted-current.txt&#x27;, &#x27;improvements-typical.txt&#x27;, &#x27;diversity-cable.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;contact-nurse&#x27;, &#x27;bmw-novel&#x27;], [&#x27;apparel-detective.txt&#x27;, &#x27;populations-spent.txt&#x27;, &#x27;hurt-puzzle.txt&#x27;, &#x27;maker-relocation.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;restaurant-exchange&#x27;], [&#x27;.DS_Store&#x27;, &#x27;gold-implemented.txt&#x27;, &#x27;threads-discretion.txt&#x27;, &#x27;enquiry-minolta.txt&#x27;, &#x27;composer-afford.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;restaurant-exchange&#x27;, &#x27;athletic-streets&#x27;], [&#x27;prev-keys.txt&#x27;, &#x27;recover-centered.txt&#x27;, &#x27;viral-dot.txt&#x27;, &#x27;textbooks-satisfactory.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;restaurant-exchange&#x27;, &#x27;vitamin-documentary&#x27;], [&#x27;mr-chorus.txt&#x27;, &#x27;miller-characteristic.txt&#x27;, &#x27;trained-dispatched.txt&#x27;, &#x27;e-wonderful.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;restaurant-exchange&#x27;, &#x27;instrument-curtis&#x27;], [&#x27;flour-describing.txt&#x27;, &#x27;antonio-dialog.txt&#x27;, &#x27;conceptual-artists.txt&#x27;, &#x27;doug-maria.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;defined-dice&#x27;, &#x27;restaurant-exchange&#x27;, &#x27;consider-mileage&#x27;], [&#x27;friendly-smith.txt&#x27;, &#x27;examines-goods.txt&#x27;, &#x27;aims-forums.txt&#x27;, &#x27;citations-islam.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;], [&#x27;.DS_Store&#x27;, &#x27;smile-tear.txt&#x27;, &#x27;handjobs-scheduled.txt&#x27;, &#x27;device-concern.txt&#x27;, &#x27;tries-validation.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;greenhouse-gi&#x27;], [&#x27;.DS_Store&#x27;, &#x27;suburban-children.txt&#x27;, &#x27;bahrain-eur.txt&#x27;, &#x27;login-explained.txt&#x27;, &#x27;featuring-police.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;greenhouse-gi&#x27;, &#x27;eos-knowing&#x27;], [&#x27;tells-continental.txt&#x27;, &#x27;exports-they.txt&#x27;, &#x27;plants-tight.txt&#x27;, &#x27;pos-million.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;greenhouse-gi&#x27;, &#x27;flight-gnu&#x27;], [&#x27;translator-pgp.txt&#x27;, &#x27;affair-asian.txt&#x27;, &#x27;powerseller-filename.txt&#x27;, &#x27;serious-intervention.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;greenhouse-gi&#x27;, &#x27;production-released&#x27;], [&#x27;respondent-much.txt&#x27;, &#x27;conclusions-avon.txt&#x27;, &#x27;exec-laboratory.txt&#x27;, &#x27;demonstration-isolation.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;greenhouse-gi&#x27;, &#x27;ultimately-preferred&#x27;], [&#x27;specialized-search.txt&#x27;, &#x27;sunshine-preference.txt&#x27;, &#x27;satellite-preserve.txt&#x27;, &#x27;ongoing-tommy.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;lamps-nirvana&#x27;], [&#x27;.DS_Store&#x27;, &#x27;apartments-tea.txt&#x27;, &#x27;snake-ferrari.txt&#x27;, &#x27;combat-vocals.txt&#x27;, &#x27;appliance-abraham.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;lamps-nirvana&#x27;, &#x27;central-richard&#x27;], [&#x27;fragrances-thoroughly.txt&#x27;, &#x27;cheers-inspired.txt&#x27;, &#x27;cricket-bid.txt&#x27;, &#x27;reconstruction-group.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;lamps-nirvana&#x27;, &#x27;consolidated-literacy&#x27;], [&#x27;mailing-pork.txt&#x27;, &#x27;believed-african.txt&#x27;, &#x27;contractor-apache.txt&#x27;, &#x27;southern-gamecube.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;lamps-nirvana&#x27;, &#x27;quick-devel&#x27;], [&#x27;ir-laptops.txt&#x27;, &#x27;great-anti.txt&#x27;, &#x27;removal-cutting.txt&#x27;, &#x27;concentrations-suit.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;lamps-nirvana&#x27;, &#x27;independence-statements&#x27;], [&#x27;solve-sent.txt&#x27;, &#x27;simple-lauren.txt&#x27;, &#x27;asthma-legislature.txt&#x27;, &#x27;assets-linked.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;particles-supplements&#x27;], [&#x27;.DS_Store&#x27;, &#x27;outdoor-alien.txt&#x27;, &#x27;flesh-papers.txt&#x27;, &#x27;sd-melissa.txt&#x27;, &#x27;carbon-jacksonville.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;particles-supplements&#x27;, &#x27;usps-jpeg&#x27;], [&#x27;points-securities.txt&#x27;, &#x27;ghost-hip.txt&#x27;, &#x27;msgid-initiative.txt&#x27;, &#x27;tourism-comfort.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;particles-supplements&#x27;, &#x27;positions-impacts&#x27;], [&#x27;pump-punch.txt&#x27;, &#x27;al-charge.txt&#x27;, &#x27;nickname-income.txt&#x27;, &#x27;lamb-lights.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;particles-supplements&#x27;, &#x27;laden-gzip&#x27;], [&#x27;hire-harvey.txt&#x27;, &#x27;quiz-approximate.txt&#x27;, &#x27;wifi-determine.txt&#x27;, &#x27;women-louisiana.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;particles-supplements&#x27;, &#x27;bat-houses&#x27;], [&#x27;helmet-staffing.txt&#x27;, &#x27;eric-bicycle.txt&#x27;, &#x27;republic-printer.txt&#x27;, &#x27;zoo-platform.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;assess-enabled&#x27;], [&#x27;mere-write.txt&#x27;, &#x27;.DS_Store&#x27;, &#x27;system-wines.txt&#x27;, &#x27;opportunity-cia.txt&#x27;, &#x27;pt-cumulative.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;assess-enabled&#x27;, &#x27;general-duplicate&#x27;], [&#x27;connect-counseling.txt&#x27;, &#x27;believed-maintain.txt&#x27;, &#x27;locking-surround.txt&#x27;, &#x27;centre-anchor.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;assess-enabled&#x27;, &#x27;arena-also&#x27;], [&#x27;percentage-patrick.txt&#x27;, &#x27;jewelry-trinidad.txt&#x27;, &#x27;barrel-eric.txt&#x27;, &#x27;cut-dans.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;assess-enabled&#x27;, &#x27;alarm-denied&#x27;], [&#x27;agree-spanish.txt&#x27;, &#x27;plasma-consideration.txt&#x27;, &#x27;sperm-socket.txt&#x27;, &#x27;reporters-theory.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;fare-farm&#x27;, &#x27;assess-enabled&#x27;, &#x27;exclusive-joyce&#x27;], [&#x27;close-bag.txt&#x27;, &#x27;utilize-egyptian.txt&#x27;, &#x27;jj-customized.txt&#x27;, &#x27;mechanics-additional.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;], [&#x27;.DS_Store&#x27;, &#x27;belly-blackjack.txt&#x27;, &#x27;weekly-helps.txt&#x27;, &#x27;flooring-migration.txt&#x27;, &#x27;clearing-trading.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;relates-creator&#x27;], [&#x27;.DS_Store&#x27;, &#x27;houston-sticker.txt&#x27;, &#x27;gray-render.txt&#x27;, &#x27;expired-thunder.txt&#x27;, &#x27;thailand-doe.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;relates-creator&#x27;, &#x27;cry-wiley&#x27;], [&#x27;pike-routers.txt&#x27;, &#x27;referenced-doors.txt&#x27;, &#x27;lf-defines.txt&#x27;, &#x27;sept-mexico.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;relates-creator&#x27;, &#x27;collaborative-rb&#x27;], [&#x27;switched-springfield.txt&#x27;, &#x27;verified-visit.txt&#x27;, &#x27;worm-genres.txt&#x27;, &#x27;forming-anybody.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;relates-creator&#x27;, &#x27;brisbane-tokyo&#x27;], [&#x27;movers-roger.txt&#x27;, &#x27;href-preparing.txt&#x27;, &#x27;saved-previews.txt&#x27;, &#x27;principal-soldier.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;relates-creator&#x27;, &#x27;clouds-arnold&#x27;], [&#x27;proprietary-laboratories.txt&#x27;, &#x27;fears-visiting.txt&#x27;, &#x27;tu-donated.txt&#x27;, &#x27;situations-catalyst.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;overview-disabled&#x27;], [&#x27;.DS_Store&#x27;, &#x27;architectural-poster.txt&#x27;, &#x27;genome-jeffrey.txt&#x27;, &#x27;cheap-contracts.txt&#x27;, &#x27;us-tit.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;overview-disabled&#x27;, &#x27;lobby-nobody&#x27;], [&#x27;ppc-wiley.txt&#x27;, &#x27;days-sbjct.txt&#x27;, &#x27;hurt-barnes.txt&#x27;, &#x27;portions-os.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;overview-disabled&#x27;, &#x27;ap-tanzania&#x27;], [&#x27;fog-sql.txt&#x27;, &#x27;lots-pleasure.txt&#x27;, &#x27;m-constructed.txt&#x27;, &#x27;cookies-agency.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;overview-disabled&#x27;, &#x27;ratio-barriers&#x27;], [&#x27;actual-matches.txt&#x27;, &#x27;covered-lately.txt&#x27;, &#x27;focal-projectors.txt&#x27;, &#x27;nw-rise.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;overview-disabled&#x27;, &#x27;unix-soa&#x27;], [&#x27;grand-recorders.txt&#x27;, &#x27;flour-downloading.txt&#x27;, &#x27;nipples-macintosh.txt&#x27;, &#x27;focus-cr.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;hypothetical-clip&#x27;], [&#x27;.DS_Store&#x27;, &#x27;affected-doctors.txt&#x27;, &#x27;direction-ghana.txt&#x27;, &#x27;paso-theory.txt&#x27;, &#x27;cave-warcraft.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;hypothetical-clip&#x27;, &#x27;javascript-pan&#x27;], [&#x27;ic-fan.txt&#x27;, &#x27;overhead-homeland.txt&#x27;, &#x27;drum-smallest.txt&#x27;, &#x27;sustainability-ampland.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;hypothetical-clip&#x27;, &#x27;cellular-urge&#x27;], [&#x27;police-tiffany.txt&#x27;, &#x27;are-ministries.txt&#x27;, &#x27;mt-dynamics.txt&#x27;, &#x27;hay-advert.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;hypothetical-clip&#x27;, &#x27;hawaii-passive&#x27;], [&#x27;subscription-television.txt&#x27;, &#x27;mustang-lost.txt&#x27;, &#x27;dollars-betting.txt&#x27;, &#x27;yet-howard.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;hypothetical-clip&#x27;, &#x27;courtesy-len&#x27;], [&#x27;sql-cole.txt&#x27;, &#x27;metro-agent.txt&#x27;, &#x27;complex-dedicated.txt&#x27;, &#x27;grade-peterson.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;printed-artists&#x27;], [&#x27;.DS_Store&#x27;, &#x27;frames-aaa.txt&#x27;, &#x27;cycling-belly.txt&#x27;, &#x27;seventh-guru.txt&#x27;, &#x27;ratio-partnerships.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;printed-artists&#x27;, &#x27;codes-thing&#x27;], [&#x27;molecules-grenada.txt&#x27;, &#x27;sans-feeds.txt&#x27;, &#x27;rings-iraq.txt&#x27;, &#x27;italiano-charts.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;printed-artists&#x27;, &#x27;headers-cherry&#x27;], [&#x27;specialty-expression.txt&#x27;, &#x27;sociology-gulf.txt&#x27;, &#x27;send-girl.txt&#x27;, &#x27;pad-girls.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;printed-artists&#x27;, &#x27;mortgage-wagner&#x27;], [&#x27;second-younger.txt&#x27;, &#x27;versions-rebound.txt&#x27;, &#x27;fired-sitting.txt&#x27;, &#x27;moderator-adventure.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;development-love&#x27;, &#x27;printed-artists&#x27;, &#x27;replies-recommend&#x27;], [&#x27;sustained-gifts.txt&#x27;, &#x27;needed-align.txt&#x27;, &#x27;establishment-horror.txt&#x27;, &#x27;toy-rates.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;], [&#x27;.DS_Store&#x27;, &#x27;jacksonville-uniform.txt&#x27;, &#x27;balance-portal.txt&#x27;, &#x27;accommodate-grateful.txt&#x27;, &#x27;whatever-conceptual.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;cf-incorporate&#x27;], [&#x27;gallery-radar.txt&#x27;, &#x27;usage-issn.txt&#x27;, &#x27;.DS_Store&#x27;, &#x27;ring-coalition.txt&#x27;, &#x27;stomach-masturbating.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;cf-incorporate&#x27;, &#x27;paragraph-province&#x27;], [&#x27;reaches-surge.txt&#x27;, &#x27;harvey-salon.txt&#x27;, &#x27;storage-gathering.txt&#x27;, &#x27;current-allow.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;cf-incorporate&#x27;, &#x27;bali-childrens&#x27;], [&#x27;wales-ocean.txt&#x27;, &#x27;pvc-relevance.txt&#x27;, &#x27;provide-pioneer.txt&#x27;, &#x27;worcester-drunk.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;cf-incorporate&#x27;, &#x27;holdem-fingering&#x27;], [&#x27;carefully-theta.txt&#x27;, &#x27;marsh-temporarily.txt&#x27;, &#x27;filed-progress.txt&#x27;, &#x27;amsterdam-springer.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;cf-incorporate&#x27;, &#x27;artistic-discovery&#x27;], [&#x27;wayne-sin.txt&#x27;, &#x27;welsh-germany.txt&#x27;, &#x27;agreed-cruises.txt&#x27;, &#x27;checks-undertake.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;bra-fiction&#x27;], [&#x27;.DS_Store&#x27;, &#x27;consists-nyc.txt&#x27;, &#x27;pound-sq.txt&#x27;, &#x27;bookmarks-stem.txt&#x27;, &#x27;intense-graphical.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;bra-fiction&#x27;, &#x27;senators-dozen&#x27;], [&#x27;seattle-ali.txt&#x27;, &#x27;photographic-gage.txt&#x27;, &#x27;status-invalid.txt&#x27;, &#x27;tu-occupied.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;bra-fiction&#x27;, &#x27;hate-thread&#x27;], [&#x27;piece-shaved.txt&#x27;, &#x27;adams-wear.txt&#x27;, &#x27;ones-molecular.txt&#x27;, &#x27;thong-various.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;bra-fiction&#x27;, &#x27;staying-excerpt&#x27;], [&#x27;robert-prayers.txt&#x27;, &#x27;interactive-recycling.txt&#x27;, &#x27;artificial-harley.txt&#x27;, &#x27;toddler-enlargement.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;bra-fiction&#x27;, &#x27;cat-extract&#x27;], [&#x27;federation-gt.txt&#x27;, &#x27;estimate-wear.txt&#x27;, &#x27;governments-weak.txt&#x27;, &#x27;invision-rev.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;introduces-apartments&#x27;], [&#x27;.DS_Store&#x27;, &#x27;knit-payment.txt&#x27;, &#x27;vacuum-biz.txt&#x27;, &#x27;governance-hwy.txt&#x27;, &#x27;box-tiger.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;introduces-apartments&#x27;, &#x27;collections-celebrate&#x27;], [&#x27;treating-leading.txt&#x27;, &#x27;jan-pussy.txt&#x27;, &#x27;physicians-implications.txt&#x27;, &#x27;geneva-fare.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;introduces-apartments&#x27;, &#x27;collectables-proposal&#x27;], [&#x27;sam-timer.txt&#x27;, &#x27;hop-cleaners.txt&#x27;, &#x27;crap-lines.txt&#x27;, &#x27;restaurants-chemicals.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;introduces-apartments&#x27;, &#x27;ny-liberty&#x27;], [&#x27;litigation-achievements.txt&#x27;, &#x27;platinum-breeds.txt&#x27;, &#x27;iran-healing.txt&#x27;, &#x27;sam-value.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;introduces-apartments&#x27;, &#x27;fotos-performing&#x27;], [&#x27;cafe-survival.txt&#x27;, &#x27;seats-matching.txt&#x27;, &#x27;nursery-address.txt&#x27;, &#x27;lawyer-practical.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;pro-choose&#x27;], [&#x27;smart-mn.txt&#x27;, &#x27;.DS_Store&#x27;, &#x27;appropriations-licence.txt&#x27;, &#x27;disagree-saves.txt&#x27;, &#x27;vc-executive.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;pro-choose&#x27;, &#x27;colleagues-raises&#x27;], [&#x27;crops-carry.txt&#x27;, &#x27;di-difference.txt&#x27;, &#x27;demands-hanging.txt&#x27;, &#x27;fingering-streams.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;pro-choose&#x27;, &#x27;networks-trust&#x27;], [&#x27;paper-worry.txt&#x27;, &#x27;motherboard-ser.txt&#x27;, &#x27;dept-attend.txt&#x27;, &#x27;board-parallel.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;pro-choose&#x27;, &#x27;invoice-blow&#x27;], [&#x27;con-campus.txt&#x27;, &#x27;atm-interact.txt&#x27;, &#x27;merchandise-lebanon.txt&#x27;, &#x27;tactics-democrat.txt&#x27;])
([&#x27;dir-structure-test&#x27;, &#x27;anymore-cart&#x27;, &#x27;pro-choose&#x27;, &#x27;aim-realize&#x27;], [&#x27;jeep-alias.txt&#x27;, &#x27;suggestion-strikes.txt&#x27;, &#x27;votes-image.txt&#x27;, &#x27;returning-accepting.txt&#x27;])</code></pre>
</div></section>





</div>
  <div class="end-block"></div>
]]></description> 
</item><item>
<title><![CDATA[Fall Back to a Default Include File in MiniJinja]]></title>
<link>https://www.alanwsmith.com/en/3a/aw/up/r1/</link>
<pubDate>Wed, 25 Feb 2026 11:11:10 -0500</pubDate>
<guid>88d065a3-8da7-5258-bce2-f073786bfb51</guid>
<description><![CDATA[<div class="flow body-block">


<section class="title-section default-flow"></section>


<section class="forward-section default-flow">


<p>I'm working on upgrading the documentation for <a href="https://www.bitty-js.com/" >bitty</a>. Everything is built with <a href="https://docs.rs/minijinja/latest/minijinja/" >MiniJinja</a> (rust's version of the <a href="https://jinja.palletsprojects.com/en/stable/" >Jinja template engine</a>).</p>


<p>Very section has live test code with it. Most of the tests trigger the same way. A few don't. I wanted a way that I could use a script to generate the default approach and then override it when I need. I'm doing with in three steps:</p>


<section class="olist-section default-flow">
  <ol class="default-flow">


<li class="default-flow">
Use a script to generate default files with names the begin with an underscore.</li>


<li class="default-flow">
Manually make files with the same name minus the underscore when I need to customize something.</li>


<li class="default-flow">
Have MiniJinja use the non-underscore version of the file if it exists. Otherwise, fall back to using the default one that starts with the character.</li></ol>
</section>


<section class="p-section default-flow">


<p>The file structure looks like this:</p></section>


<section class="code-section no-numbers no-buttons default-flow"><pre class="code-block no-numbers no-buttons"><code><span class="aws-code-block-marker"></span><span class="text plain">alfa-test/
<span class="aws-code-block-marker"></span>  code_to_test.js
<span class="aws-code-block-marker"></span>  _trigger.js
<span class="aws-code-block-marker"></span>echo-test/
<span class="aws-code-block-marker"></span>  code_to_test.js
<span class="aws-code-block-marker"></span>  _trigger.js
<span class="aws-code-block-marker"></span>  trigger.js</span></code></pre></section>


<section class="p-section default-flow">


<p>The goal is to use the trigger files:</p></section>


<section class="code-section no-numbers no-buttons default-flow"><pre class="code-block no-numbers no-buttons"><code><span class="aws-code-block-marker"></span><span class="text plain">alfa-test/_trigger.js
<span class="aws-code-block-marker"></span>and
<span class="aws-code-block-marker"></span>echo-test/trigger.js</span></code></pre></section>


<section class="p-section default-flow">


<p>I'm using this MiniJinja macro to make it happen:</p></section></section>





<section class="code-section default-flow"><pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="text plain">[! macro get_content(folder, key) !]
<span class="aws-code-block-marker"></span>    [! set default_content !]
<span class="aws-code-block-marker"></span>        [! include [folder, &quot;/_&quot;, key]|join(&quot;&quot;) !]
<span class="aws-code-block-marker"></span>    [! endset !]
<span class="aws-code-block-marker"></span>    [! set custom_content !]
<span class="aws-code-block-marker"></span>        [! include [folder, &quot;/&quot;, key]|join(&quot;&quot;) ignore missing !]
<span class="aws-code-block-marker"></span>    [! endset !]
<span class="aws-code-block-marker"></span>    [! if custom_content == &quot;&quot; !]
<span class="aws-code-block-marker"></span>        [@ default_content @]
<span class="aws-code-block-marker"></span>    [! else !]
<span class="aws-code-block-marker"></span>        [@ custom_content @]
<span class="aws-code-block-marker"></span>    [! endif !]
<span class="aws-code-block-marker"></span>[! endmacro !]</span></code></pre></section>


<section class="p-section default-flow">


<p>It gets called like:</p></section>


<section class="code-section default-flow"><pre class="code-block"><code><span class="aws-code-block-marker"></span><span class="text plain">[@ get_content(&quot;alfa-test&quot;, &quot;trigger.js&quot;) @]
<span class="aws-code-block-marker"></span>
<span class="aws-code-block-marker"></span>[@ get_content(&quot;echo-test&quot;, &quot;trigger.js&quot;) @]</span></code></pre></section>


<section class="p-section default-flow">


<p>In each case the base filename without the underscore is called. That's what gets used if it exists. Otherwise, the underscore fallback gets output.</p>


<p>This way I can just let the defaults do their thing then customize when necessary. Way better than having to duplicate everything myself.</p>


<p>-a</p></section>


</div>
  <div class="end-block">
          <section class="endnotes-section default-flow xxlarge-bottom-margin">
            <h3 class="back-matter">Endnotes</h3>
            <div class="xxlarge-flow">
          
        


<section class="endnote-section default-flow">
  


<p>In some cases it would be possible to use a single copy of the default file stored in a central location. That won't work for what I'm doing. Each of the default trigger files has a unique ID in it that's generated outside of MiniJinja.</p>
</section>


<section class="endnote-section default-flow">
  


<p>The default Jinja/MiniJinja tokens are hard for me to scan quickly. I switch them out for the square bracket versions you see here (e.g. <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">{{ }}</span></code> becomes <code class="code-span color-alt-1-80" class="code-shorthand-span"><span class="text plain">[@ @]</span></code>.</p>
</section>
            </div>
          </section>
    </div>
]]></description> 
</item></channel>
</rss>