alanwsmith.com

Open Videos - March 30, 2026

Mon, 30 Mar 2026 08:13:37 -0400

The current set of video tabs I have open right now. Archiving them here and closing them in the browser.

Pulling Magic Commander Rankings from EDHREC

Sun, 29 Mar 2026 22:44:49 -0400

I'm working on a tool to help me build Magic Decks^mdb. It'll let me search and assemble cards from data via Scryfall^sf. I also want to see other folks are doing. For example, which are the most used commanders. I'm grabbing data from EDHREC^edh for that.

This is the script I'm using to pull in the raw data.

#!/usr/bin/env python3

import json
import urllib.request

url = "https://edhrec.com/commanders"
output_path = "commanders.json"

def get_json():
    response = urllib.request.urlopen(url)
    html = response.read().decode('utf-8')
    parts = html.split('')
    data = json.loads(content[0])
    with open(output_path, "w") as _out:
        _out.write(json.dumps(data, sort_keys=True, indent=2, default=str))

if __name__ == "__main__":
    get_json()

The code's a little brittle in terms of doing a split to pull out the data instead of more advanced parsing with something like Beautiful Soup^bs. That's not a big deal. If they change the page and things break I'll just update the script.

-a

Endnotes

The EDHREC data uses Scryfall IDs. Combining data sets is no fuss, no muss.

Footnotes

^{mdb ⤴}

Magic Deck Builder

The little tool I'm making to make Magic decks. Still very much a work in progress at press time.

^{sf ⤴}

Scryfall

The place to search for Magic cards. Even better, they provide bulk data downloads.

^{edh ⤴}

EDHREC

Fantastic fan content for all things Magic. They've got articles and stuff which I'm sure are great. I'm only there for the deck lists and rankings though.

^{bs ⤴}

Beautiful Soup

For those times when doing simple splits doesn't get you what you need, try Beautiful Soup. It's the only way to fly with python HTML parsing.

Parse a String of Text into JSON in Python

Sun, 29 Mar 2026 22:38:08 -0400

import json

input = '{ "alfa": "bravo", "charlie": "delta" }'
data = json.loads(input)
print(data)
print("----")
print(json.dumps(data, sort_keys=True, indent=2, default=str))

Output:

{'alfa': 'bravo', 'charlie': 'delta'}
----
{
  "alfa": "bravo",
  "charlie": "delta"
}

Using IndexedDB to Store Key Value Pairs with Vanilla JavaScript

Sat, 28 Mar 2026 02:10:06 -0400

Dear RSS Reader:
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. Check out the original page to see it in action.

I'm working on a Magic Deck Builder^magic. There's about 30,000 cards to choose from. Keeping track of them is beyond the capabilities of localStorage^ls. IndexedDB^idb, on the other hand, has no problem hanging on to that much stuff.

An Actual Solution

Most documentation and tutorials on IndexedDB are disapointing. They show how to store values just fine. They fail to demonstrate how to pull data out in a useful way. The only thing they give you is how to print to console.log(). Nothing about how to, you know, actually use the data outside the functions that query it^results.

The examples also lock in on storing full objects. That's great and all, but I want to use IndexedDB as a simple key/value store^kv.

This is how I'm doing that:

JavaScript

const DB_NAME = "example_db";
const STORE_NAME = "storage";
const DB_VERSION = 1;

async function initDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);
    request.onsuccess = () => resolve(request.result);
    request.onerror= () => reject(request.result);
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME);
      }
    }
  });
}

async function putValue(value, key) {
  const db = await initDB();
  return new Promise((resolve, reject) => {
    const store = db
      .transaction(STORE_NAME, "readwrite")
      .objectStore(STORE_NAME);
    const request = store.put(value, key);
    request.onsuccess = () => resolve(request.result);
    request.onerror= () => reject(request.result);
  });
}

async function getValue(key) {
  const db = await initDB();
  return new Promise((resolve, reject) => {
    const store = db
      .transaction(STORE_NAME, "readonly")
      .objectStore(STORE_NAME);
    const request = store.get(key);
    request.onsuccess = () => resolve(request.result);
    request.onerror= () => reject(request.result);
  });
}

async function deleteValue(key) {
  const db = await initDB();
  return new Promise((resolve, reject) => {
    const store = db
      .transaction(STORE_NAME, "readwrite")
      .objectStore(STORE_NAME);
    const request = store.delete(key);
    request.onsuccess = () => resolve(request.result);
    request.onerror= () => reject(request.result);
  });
}

await putValue("this is alfa", "alfa");
const afterPut = await getValue("alfa");
const afterPutEl = document.querySelector("#afterPut");
afterPutEl.innerHTML = afterPut;

await deleteValue("alfa");
const afterDelete = await getValue("alfa");
const afterDeleteEl = document.querySelector("#afterDelete");
afterDeleteEl.innerHTML = afterDelete;

HTML

<div id="afterPut">--div>
<div id="afterDelete">--div>

Output

Bulk Storage

That's a "non-trivial amount of code". It's also async/await based which adds to the complexity of using it. It would be nice if it was easier to work with, but the flexibility makes the complexity worth it.

-a

Endnotes

Using localStorage to do the same thing looks like this:

localStorage.setItem("bravo", "this is bravo");
const afterSet = localStorage.getItem("bravo");
const afterSetEl = document.querySelector("#afterSet");
afterSetEl.innerHTML = afterSet;

localStorage.removeItem("bravo");
const afterRemove = localStorage.getItem("bravo");
const afterRemoveEl = document.querySelector("#afterRemove");
afterRemoveEl.innerHTML = afterRemove;

Less than ten lines compared to more than sixty with no async to worry about is nice. It just falls over when trying to store large amounts of data since browsers have much lower limits on localStorage vs IndexedDB.

Normally, you'd check the return values in both the IndexedDB and localStorage approaches before trying to use them. I've skipped both here to reduce the code.

I'm using store.put(value, key) to add the values to the database. This is an upsert style change that updates the value if it exists and adds it if it doesn't. store.add(value, key) can be used to do an add without the update functionality.

The AI search results have the same problem with only showing how to log data instead of using it. When prompted for how to actually use the data they point to external libraries. Dexie, in particular. It looks great. It does tons of stuff including auth. Overkill for what I'm doing right now so I'm avoiding the dependency. It's on the radar though.

References

IndexedDB: What Makes It Better Than LocalStorage and Cookies? - YouTube

This is the video where I got the approach. It uses React and TypeScript. My version is vanilla JS.

IndexedDB API - MDN

IndexedDB key characteristics and basic terminology - MDN

Using IndexedDB - MDN

IDBDatabase: createObjectStore() method - MDN

Promise - MDN

Footnotes

^{magic ⤴}

My Magic Deck Builder

Very much a Work-In-Progress at press time. It's a lot like Archidekt. Just refined down only the feature I want (and a way to kick the tires for bitty.

^{ls ⤴}

localStorage

The traditional way to store data for a web site when you need something more than a cookie. Great for simple key/value pairs when the values are strings and you don't have too many of them. Storing objects requires jumping through JSON.stringify and JSON.parse. There are stricter size limits than IndexedDB as well.

^{idb ⤴}

The IndexedDB API

The new hotness in web app data storage. Just gotta jump through some more hoops.

^{results ⤴}

Using results from IndexedDB without async/await promises moves you into the world of callbacks. I could probably remember how do do that if I tried. I'd rather not.

^{kv ⤴}

The general IndexedDB tutorials show how to store objects with IDs. The requires putting the ID in the object. Great when you need it. More complicated than necessary when all you need is a key/value.

Music for Today (March 15, 2026)

Sun, 15 Mar 2026 18:40:34 -0400

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

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

A few selections from the day.

Down to the River to Pray - The Petersens

Tom Waits - "Get Behind The Mule"

Going to California - Led Zeppelin - Sierra Eagleson Cover

Getting Ready to Get Down - Josh Ritter - 2017-13-05

San Fermin - Daedalus

the Mountain Goats - This Year - Jordan Lake Sessions

Siren Song - Didn't Leave Nobody but the Baby - O Brother, Where Art Thou

Lake Street Dive feat. Tiny Habits - "Leaving on a Jet Plane" - Live From the Road

Chet Faker - Gold

San Fermin - Daedalus

Sweet Child O' Mine Bluegrass Cover - Thunder and Rain

Can't Find My Way Home (Blind Faith) - Rachael Price - Live from Here with Chris Thile

It's gray outside. A light rain. Perfect for the chill mood.

-a

You can't update an input text value with keydown

Sat, 14 Mar 2026 12:03:28 -0400

It doesn't look like there's a way to update the value of an <input> field with keydown events.

You can, of course, just update the value directly.

Simulating keyboard interactions needs to be done with something like puppeteer.

Update CSS Live using contenteditable (No JavaScript Required)

Sat, 14 Mar 2026 09:49:58 -0400

Dear RSS Reader:
The original version of this page includes custom CSS to style the page. It probably won't work in here. Check out the original page to see it in action.

I was reading the HTML Living Standard for contenteditable to figure some stuff out for bitty¹. Found a fun little tidbit: You can edit CSS live on a page without JavaScript.

Check this out:

HTML

<div class="example">the quick brown foxdiv>

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

.example {
  color: crimson;
}
style>

Output

the quick brown fox

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 display: block to it with something like:

CSS

.style-editor { 
  border: var(--default-border);
  display: block; 
  margin-block: 1rem;
  padding: 0.7rem;
  white-space: pre;
}

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.

A nice little reduction in friction.

-a

Endnotes

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.

(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.)

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.

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

You might be able to add syntax highlighting too. I'm not set up to test that at the moment.

Footnotes

^{1 ⤴}

bitty - a little front-end framework for the web

Restart fseventsd on a mac

Fri, 13 Mar 2026 22:12:29 -0400

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).

Open Activity Monitor
fseventsd will probably be visible if it's having an issue. You can also search for it, if it's not for some reason.
Double click it.
Click Quit in the pop-up window.

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.

Quitting it and letting it restart itself clears things up.

-a

Guidelines for Building a Static Site Generator (2026 Edition)

Thu, 12 Mar 2026 16:49:12 -0400

The Next Generation

I've built several static site generators for personal use. Early ones were to support neopolitan. Later ones were to make it easier to build sites in general.

Now, I'm looking to move my site from alanwsmith.com to al9000.com. Part of the reason I want to make the move is to pull all my sub-domains back under the main site. It'll make things a lot easier to link back and forth and to update with global templates.

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.

TODOish

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).

Split out the neopolitan parser so that it's its own thing that can be included in other projects.
Use MiniJinja as the template engine (it's Jinja, but in rust).
Every page on the site gets loaded as a template that can be included by any other page.
Template names are the full path to the file (as opposed to one of my current site builders where the leading / isn't there in the template names)
Syntax highlighting of blocks. (Return values won't include and pre tags, just the spans to put into a pre tag).

Ideally this can be [! highlight_block("html") !][! endhighlight_block !]

But I think i may have to be [! filter highlight_block("html") !][! endfilter !]

TODO: look to see if there's a way to use the built in [! block KEY !][! endblock !] tokens and pass them extra options for the highlighting.
Syntax highlighting of spans.

[! filter highlight_span("html") !][! endfilter !]

As well as this, maybe:

[@ hlspan("html", "the string to highlight") @]
I was originally thinking about adding a way to highlight a file directly (e.g. [! highlight_file("key") !]), but that causes issues if the files being highlighted have minijinja tokens in them (i.e. they won't be parsed and the tokens will show up instead of the output they should produce).
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)
Cache syntax highlighting since it can take some time.
Use tracing library to be able to meausre performance when necessary.
Shorthand for [! filter some_filter !][! endfilter !] that is [! f some_filter !][! endf !].
[! md !][! endmd !] filter for markdown.
[! neo !][! endneo !] for neopolitan.
Good error messages for where things went wrong in template processing or neopolitan parsing.
Update the most recently changed file first and send refresh to browser when its updated. (this will get tricky if the file being updated is an include. so this will only happen later if the base performance isn't good enough)
Auto populate `/last-update/index.html` with whatever the most recent .html file to have changed is.
Any valid JSON files is available from a [@ j @] variable (e.g. /some/data.json is available at [@ j.some.data.KEYS @]
The top level /config.json file is available at [@ c.KEYS @].
Was originally thinking about having hooks that can run scripts before and after processing. But, the first approach will be to either run stuff manually or build the feature into the engine itself (e.g. A feature that grabs JSONs from external URls and drops then in place prior to running the build. That should cover most of what's necessary.)
Provide JS minifier
Provide CSS minifier
Auto genreate RSS feeds. One for all posts. One each for different tags.
Auto generate pages for each tag (with pagination)
Auto generate index link pages for posts (with pagination)
Provide details on the time it takes to render each page.
files and directories that have `.inc` in their names are avaialbe as includes but don't get output to the site themselves (e.g. the wrappers.inc directory will hold all the wrapper templates that everything uses but doesn't go out to the site).
If you put a JSON file next to a file with the same filename stem it becomes avialble via a `data` variable in during processing.
Arbitrary blocks of code should be able to be added to the head of the document from inside a content page. (This can be done with basic block tags in minijinja)
Put in template hooks with defaults to override parts of the main template.
Create a block for including bitty templates so they can be added to the end of the page or included via another file (This is really just an implementation detail for the wrapper templates).

Neopolitan

Need to do more thinking about how to integration Neopllitan and MiniJinja.
I think the biggest thing will be setting up the -- template in page metadata to define the minijinja template to include from.
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.
More thinking (and, more importantly, prototyping) to figure that out.

Images

A single image folder that can have any folder/file structure inside it.
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.
Auto generate responsive image sites.
Auto generate responsive image tags with the available sizes.
Output files are generated in the same places as their inputs. That is, /path/filename.html does not become /path/filename/index.html.
File extension can change (e.g. "file-name.neo" becomes "file-name.html").

File Metadata

During processing every file has access to a metadata variable that holds metadata including:

File name with extension.
File name without extension.
The source file extension.
The destination file extension.
The full string path to the source file.
The string path to the parent folder.
An array containing strings for the path to the parent folder split on each directory level.
A variable that points to the files directory for calling JSON in it. (e.g. /path/to/file.html and /path/to/data.json would have a variable called [@ local @] that is an alias for `[@ json.path.to @]so you can do [@ local.data.KEY @] to get whatever is in the data.json file.
TBD on how this works with includes. I think all paths are relative to the top level output page and not parsed at the include file level (e.g. if /page/index.html includes /extra.inc/details.html the file path value from a metadata call in /extra.inc/details.html would show the path to /page/index.html.

Folder Metadata

Similar to file metadata
details tbd

Site Metadata and Functions

A folders() 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.
An path_exists(PATH) that returns true if a given path exists.

Two Pass Processing Probably Not Needed

These are my original notes on setting up two pass processing. I had to do that in my existing static site builder in order for code highlighting to work when the code being highlighted pulled in other content via includes. I was using functions for that setup. I think I can wrap stuff in a different way and not have to deal with that.

Make a two pass system so that each page can be rendered and then the rendered version be included in the next pass.
Standard tokes that are processed on the first pass are:
- [! !] functions
- [@ @] output
- [# #] comments
Tokens for the second pass are:
- [2! !2] functions
- [2@ @2] output
- [2# #2] comments
During the first pass those tokens get changed to their standard counterparts so they get used normally in the second pass.

NOTE: it may more more sense to do [1@ @1] etc to assist with caching. The idea being that you can watch files for changes and only update the ones with [1@ @1] 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)
Escaping tokens is done with:
- [/! !/] functions
- [/@ @/] output
- [/# #/] comments
After the second pass those tokens are converted to strings of their non-escaped versions via find/replace.

Miscellaneous

Build in preview server with hot realoading on file changes (with appropriate throttle/debounce).
files_in_folder(FOLDER_PATH) function that gets the file list prior to processing (i.e. it would see include files that won't otherwise be sent out to the site)
files_in_folder_ext(FOLDER_PATH, EXTENSION) function (i.e. files_in_folder_ext("/some/folder", "jpg") finds all the JPG files. EXTENSION can also be an array to find files with any number of extensions.
folders_in_folder(FOLDER_PATH) function
path(STRING, STRING...) function that assembles strings into safe paths.

Version 9000

That's everything I can think of at the moment. That thinking included taking a look at my current generators and this prior post with earlier ideas. Some of that holds up. A lot I'm thinking about differently these days.

I've got bitty in pretty good shape. Moving into this njavascript.on.jsew generator isn't too far away.

Pretty excited about the update, tbh,

-a

Get a Random Number with crypto.getRandomValues() in JavaScript

Thu, 12 Mar 2026 12:14:24 -0400

The Road to Random

I'm adding some randomizing functions to bitty. I wanted to use `crypto.getRandomValues()` instead of `Math.random()`. While it's unlikely to matter, I figure using the better tool makes sense.

Here's the core functions:

JavaScript

function randomInt(min, max) {
  const seeker = new Uint32Array(1);
  crypto.getRandomValues(seeker);
  const base = seeker[0];
  const modder = Math.abs(max - min) + 1;
  let result = (base % modder) + Math.min(min, max);
  return result;
}

JavaScript

function randomFloat(min, max) {
  const seeker = new Uint32Array(1);
  crypto.getRandomValues(seeker);
  const base = seeker[0] / (0xFFFFFFFF + 1);
  const distance = Math.abs(max - min);
  let result = (base * distance) + Math.min(min, max);
  return result;
}

Snake Eyes

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:

const roll = randomInt(1, 6);

Negative Space

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

randomInt(-2, 2);

Min/Max

The Math.min(min, max) 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:

randomInt(-1, -6);
randomInt(-6, -1);

How's That Now?

The crypto.getRandomValues(seeker) function requires a different approach than Math.random(). It works by filling an array with random numbers instead of providing a single random output like the Math function.

The approach here makes an array with only one item and populates it with the random number. Then, it uses the remainder operator (%) to get a value in the min/max distance. Finally, the min value is added back in to shift it into the right place.

The float version works by using bytes. It divides the incoming number by 0xFFFFFFFF + 1. 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 Math.random().

More Code is Better (in this case)

The crypto functions are notably longer than their Math.random() counterparts. Take this standard integer approach, for example:

function randomIntViaMathRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

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

-a

Endnotes

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

test code