Static by default

Did you hate how sometimes the directory took a few seconds to load all of the foundries? (Well, I did.)

For many years, I was simply using a public facing js script to access all of the data for the directory which it would load and render everytime someone visited the site. The api key, while read-only, was technically public. This is very bad practice. But I did it because it allowed me to update the directory on the fly by simply making changes in Airtable.

I have now moved away from that.

Instead the directory pulls all of the data from airtable during the build process so it is way faster.

While there is still a bunch of js required to handle filtering and what not, the table itself is technically static and js-free by default. (Which is what I typically strive for.)

Image optimization

Previously, all of the foundry thumbnails were 1920x1080px images even though they render quite small by default. That meant when you visited the site, your computer or phone was downloading 150MB+ worth of images.

The directory now implements srcset images which allows the browser to load smaller versions of the images when they are set at small scale, and only calls the larger version when you need them (like in three column grid mode).

Faster filtering

I love the :has() psuedo class. But it is best used sparingly—and I was not using it sparingly—which meant filtering felt really sluggish. So I moved the filtering process into a js workflow instead which is way quicker.

This move was inevitable as I have plans to add some kind of query component to the URL so you can save your filter/view settings. I’m not there yet, but this is a step in the right direction.

Sorting

Toggling through the sorting options is much better. And when you cycle back through to 🔀 it reshuffles all of the foundries again. I do intend on making the toggle option next to the “Name” label more intuitive, but that’ll come later.

Oh, and Z→A sorting in grid view now works!