It's Eric Woodward (dotcom)

Recently, I decided to try my hand at some CSS shenanigans, and spent a few hours replacing this site’s long-serving background image with a scrolling grid background.

I’ve been obsessed with digital grids ever since I first saw the movie Tron (presumably during its initial HBO release, when I was around 6). Tron and Flynn were some of my first heroes (they fought for the users), and I remember being blown away not just by the movie, but by being able to play the same game they play in the movie via the incredible Tron arcade cabinet. I distinctly remember going to the Chuck E. Cheese’s near our house and playing it, complete with the special blue joystick, and just like the movie, it was amazing. And it was all grids.

So that’s the “why”, as for the “how”…

The capabilities of #web rendering engines (AKA #browsers) have improved immensely over the last few years, particularly in the area of CSS effects. A link to a link to a link lead me to a couple of stack exchange questions and a collection of fantastic synthwave-inspired CSS effects. The next thing I know, I’ve replaced the site’s static background image with a scrolling one.

Except… I know that not everyone likes moving background effects, so the only responsible way to add an effect like that is with a toggle that allows the site visitor to turn it on and off at will. And the only responsible way to add an interactive toggle like that is via progressive enhancement: visitors without JS enabled (or those whose browsers don’t support <script type="modules">) will get just a static background grid, but those who do have JS get both the scrolling grid AND the toggle, tying the presence of the feature to the ability to disable it.

If you want to know more specifics, check out the commit on my self-hosted git server, in particular the changes to the scripts.js and styles.css files.

Because I, too, fight for the users.

Ever since the early days of JavaScript (remember document.layers?), I’ve been interested in building web applications, from the complex to the trivial. In that time, I’ve built more signature generators, magic 8-balls, and die rollers than I care to mention. But, apart from the tools at Planar Vagabond, most of these #WebToys are lost to time (or sitting on some 3/4 full hard drive waiting to be rediscovered).

Until now!

I’ve decided to start archiving them here, in my lightly-tended digital garden, under the heading of WebToys (a moniker chosen based on their dubious utility). And the first #WebToy is a project I’ve had in mind for over 25 years, but that I’ve just finally put the 4-ish hours in to complete: .

The BPS (Bill Paxton Soundboard)

Back when I was in college (circa 1997), a friend of mine and I would often discuss ideas for “fun” (and typically useless) computer programs. One night, one of us suggested a virtual See-and-Say themed around quotes from the great character actor, the late Bill Paxton. Of course, writing such a program wasn’t worth the effort (especially circa 1997), so we just kind of chuckled and forgot about it.

Fast-forward to 2024: the company I work for has a “UI Developers Guild” (for those interested in bettering their development skills), and they recently started running coding challenges, both to drive engagement with the guild and to give the coders a chance to do something non-work related. This particular challenge had 3 simple rules (copied verbatim below):

1. Play some kind of music / sound
2. Be viewable
3. Don’t work over 4hrs!!!

After briefly contemplating what to offer as my entry for the challenge, the idea from college bubbled back to the front of my brain, and I thought, “this is my chance!”

The rest, as they say, is history.

Work Breakdown

• One hour thinking through the concept and writing the rough draft player.js and main.js modules;
• One hour to turn draft into MVP, addressing layout and audio issues;
• One hour to add images and expand the audio selection; and
• One final hour^[1] to add mobile support and some light documentation.

Now, this is obviously not the first Bill Paxton soundboard on the #interwebs, nor is it the most comprehensive. But, unlike the ones in the App or Play stores, mine doesn’t require any scary permissions, and won’t track you relentlessly. And, unlike other web-based soundboards, mine has no advertising, and… won’t track you relentlessly. So maybe mine is better, at least in some ways. 😄

Plus, releasing it here doubles as my entry into the aforementioned coding challenge, so win-win!

With a few more hours work, I’d probably turn it into a PWA and add full offline support (caching the sounds and images in localstorage), or maybe disable the buttons until the previous sound is done, but… that’s for another day.

I suspect I’ll wind up creating (or finding) other similar small #WebToys in the future, and when I do, I’ll add them here. In the meantime, I’m open to suggestions: what other tiny, useless programs does the world need more of?

Last year saw the release of the “Universes Beyond: Doctor Who” set for Magic: the Gathering, which included 188 new (and mechanically unique) cards based on various doctors, companions, villains, and other characters from the long-running TV show(s). As a lifelong Whovian^[1], I thoroughly enjoyed the set and loved how they wrote each cards mechanics to be representative of the characters. Yet I couldn’t help but notice that a few characters were missing^[2] (well, one for sure, the second only in a vaguely-related way, but I digress…). At the same time, I stumbled upon the highly-functional (if somewhat overly ad-encumbered) MTGCardBuilder.com, so I thought - why not make the missing cards myself?

Of course, unlike my usual custom card fair, I wanted something that would still be legally playable (or at least, legal in my weekly Magic game), so I decided to make them as Skinned Cards - that is to say, skinned version of other, legal (real) magic cards. This allows me to use them as proxies for other cards I already have in my collection.

In truth, both of these are also in my “15 Doctors / Tribal Timelords” deck (coming soon), and coming up with themed proxies just makes them fit better with the rest of the cards.

Jack Harkness, Torchwood Captain

First up is everyone’s favorite flirtatious immortal, Captain Jack Harkness. His omission was a grave mistake, IMHO, but making a proxy for him almost broke me. After sorting through the 683 legendary humans in the Gatherer (as of writing), I finally found the one that had just the right abilities (and subtypes):

Dr. Who, Eccentric Scientist

The second one came about a bit differently… I started working on (what would become) the 15 doctors deck about a month after the set dropped. It was basically the best cards from the Blast from the Past and Paradox Power decks, plus a handful of singles for the missing doctors and other Timelords, and next thing I knew, I had a 5-color deck full of Timelords and their companions… That is to say, legendary Timelords and their legendary companions… Hmmm…

So, who do you choose to lead a tribal legendary deck? Only the best commander the job, Jodah the Unifier^[3]. But he’s a human wizard, how can I tie that in the any version of Doctor Who?

And that’s when I remembered the strange, Technicolor-saturated Peter Cushing “Dr. Who” movies of the 60s, wherein the good Doctor is actually a weird, whimsical, human inventor who fights off evil alien robots with his time machine, a description close enough to a “wizard” for me:

I hope someone enjoys these and finds them useful. If you do like them, you may also like my other custom magic cards. And a word of advice: if you want to get them printed at your nearest corporate print-shop, you’ll probably want to use the “self-service” copiers to avoid any uncomfortable conversations with the staff about copyright and fair use.

Oh, and while I was working on these, I went ahead and did another round of custom (and completely broken) Saturday Night Planeswalkers.

Until next time, share and enjoy!