Are You Ready?

Dance Dance Revolution has had a very positive place in my life. I probably first learned about it back in an arcade somewhere (remember going to arcades to play video games?), watching someone absolutely wreck some really hard song that I still couldn’t beat today. The pulsing beats, the flashing lights…it stood out in a room full of distractions. At first, you’re a noob, and you do easy songs because the whole thing is novel and you’re getting the hang of it. Then, if you keep at it, you start to build muscle memory about how to move, and you can anticipate steps better because you’ve played songs many times. You bump up the difficulty and learn new patterns and techniques. Your stamina increases. You sweat, because it’s not just a game, it’s a workout. It’s actually legitimate exercise.

This “performing” in public as I started doing harder songs more often resulted in more unpleasant physical feelings more of the time, and so I began to want to play not at an arcade, but at home. By that point, the game was so popular that home consoles had versions, and so I spent most of my DDR time on PlayStation instead. Some friends of mine shared my DDR interest, and so we’d sometimes play together, which was super fun. I even accompanied one friend to a legitimate DDR competition once, watching true experts play extremely hard songs (or even freestyle their own dance steps that also satisfied the song’s chart), which was pretty sick.

For the majority of my life now, however, DDR has been a game to play at home, alone, and it’s great that it also counts as exercise. In fact, at one point I was doing it so much that I actually shed considerable pounds. I’m definitely not the only person to use DDR in this way, and I’m not going to be the last to do it again.

Most forms of exercise I’ve tried in the past just never have the staying power of DDR. Racquetball, indoor rock climbing, tennis, walking, running, gym circuit training, even biking…while they all have their pros, none of them match the marriage of music, gaming, and movement that DDR brings to the table, nor can they be easily done in the privacy of one’s residence.

Crying Buckets of Tears

In order to play DDR at home, you need software (originally PlayStation, then open-source wonder Stepmania, and now open-source wonder Project OutFox), the songs themselves (an exercise left up to the reader), an audio/visual output (i.e. TV/monitor and speakers), and, most importantly, the dance pad.

When I was first playing DDR at home, I went through several iterations of my setup. First was the era of cheap, soft dance pads. They were superior only in price, because otherwise they sucked. They were barely better than hitting the ground, didn’t always register your steps, and they slid around a bunch, especially on harder songs.

The next step up from a soft pad is the foam pad. This is like the soft one, but more expensive, and filled with a small layer of plastic foam. They are definitely an improvement: sliding is minimized, feet get some cushioning, and steps are registered more accurately. However, it’s like going from 70% good to 80% good. It’s still not like the arcade, and as you get better and move faster, it just can’t keep up.

The final step, save from buying an actual DDR arcade machine, is the hard pad, made of metal and plastic. I went through several soft and foam pads over the years, and dealt with a lot of frustration due to their inaccuracies and drawbacks. I thought that if I just kept buying them as they deteriorated, it was enough. Once you get good at the game and want to do Hard difficulty-level songs all the time, however, you realize they just won’t ever fit the bill. Enter Cobalt Flux. It’s sold out now, and there are alternatives I’ve never tried, but the one I got for my birthday in my 20s is still the one I have today and am using in my most recent setup. You can stomp and stomp and stomp on this thing, and it just takes the abuse. It turned my DDR at-home soft and/or foam fragile ecosystem into a solid dance station.

I’m No Ordinary Fella

In my previous place of residence, there was a downstairs “extra” living room of sorts, and plenty of space to keep a heavy metal dance pad out for stomping. I remember doing DDR often there. In my current place of residence, such a space does not exist, and so I put the DDR stuff away, my skills atrophied, and the whole thing moved to the “archival space” of my brain. But the idea that I would play again never quite left me.

Recently, my usual form of exercise, biking, was temporarily disabled due to (yet another) flat tire. Changing the tire is tedious and unfun, and so I started thinking about an alternative. For some reason, DDR came full-fledged back into my head and I decided that there had to be a way to bring back this favorite form of interactive gaming which had been so beneficial to my life and health.

Through help from my wife (who has also done DDR with me in the past!), we were able to clean up the garage and make some space, and I could finally rebuild my DDR setup! I had an old Windows PC lying around (like you do), and I figured I could use that as a single-purpose DDR machine, but reality hit me quickly: it would not show anything on the new monitor I just got, no matter which video port I used. Rebooting did not help. Trying different cables did not help. The machine turned on, fans fanned, lights went on, but the monitor never got a signal.

Strike 1.

Wracking my brain for some other old, unused device I could use, I remembered I bought a Raspberry Pi 3b many years ago, hoping to start on a programming adventure with my kid which never materialized (alas!). Would it run OutFox? It only has 1GB memory and graphics hardware that is nothing to write home about, but posts on the Internet from people saying it could be done inspired me. I popped it open, ordered a new Micro-SD card with the Debian 13-flavored RPi operating system, plugged it in, and got some video output!

I excitedly downloaded OutFox and double-clicked the icon. A brief glimpse of a window pops up and then…it crashes. OpenGL has run out of memory. I tinker with config files and try again. Same thing. I tinker some more. I get a different OpenGL error. Tinker. Fail. Tinker. Fail. Maybe I don’t need to be in a windowing system? I try again from the command line. Fail. I try different approaches, using X11 and EGL, but fail. This all occurs over multiple days for multiple hours each time. It’s exhausing and demoralizing. Google and an LLM as my guide both ultimately failed. I finally give up on this path. I almost give up on the project entirely.

Strike 2.

Despite really initially liking the hacking aspect of a RPi-powered DDR machine, the hacking was not going anywhere, and I had reached my limit. Ordering a newer RPi was an option, but I feared I’d run into similar issues, and so decided to order a mini-PC running Windows 11. I got it up and running, installed OutFox, and…

Strike 3WINNER!

It’s not especially fast (setup took seemingly forever just to get to a desktop), nor does it have any whiz-bang like my actual gaming PC, but what it does is take up very little space, not make much noise, and runs DDR. My trusty 20 year-old Cobalt Flux, despite lots of use and some rusting, was plugged in via a PlayStation->USB converter, and was detected by the OS. I didn’t even have to mess with audio/video sync stuff, which is another bane of rhythm gaming, as it somehow magically Just Worked(tm) and I was A-i-a-i-ai-ing like in the olden days. DDR was, yet again, in my life and let’s hope it stays for a while.

Dancin’ Mastery

And that brings us to the present. I started on my at-home DDR journey in my 20s. I was lighter, more agile, and had more stamina. I’m in my 40s now and I’m…not as much any of that. However, once my new setup was complete, the nascent skills came back and the muscle memory kicked in all the same. I just gotta work on getting back the ability to play for 1-2 hours regularly without completely dying.

I’m thinking of re-adding the two custom DDR songs I made for two of my original songs, but maybe cleaning them up so they are more danceable (I created them using a computer and tested them with a keyboard, and they’ve never been quite idiomatic when it comes to actually dancing). I have so many more original songs I could turn into DDR songs now, too, so maybe I’ll get back into the custom thing. It’s exciting to re-open this chapter of my life, and I really hope it helps me drop some weight, because that’s the most important thing to me right now, besides just having fun and enjoying “working out” again.

Images

To illustrate the “Purge” part of the Binge-Purge Tech Cycle, I submit the following images, as they document my recent deletion of my Duolingo account.

Words

Duolingo is still a really cool app, and is the reason why (besides high school and my wife’s linguistics degree) I got into learning languages other than my native English. I started using it in 2013, but only started trying to keep a mega-streak in the 2020s. Unfortunately, I realized months ago that it really wasn’t fun clicking/tapping through all the post-lesson “you got gems!”, “open this chest!”, “here’s your next friend streak!” nonsense (and I’ve been a paying customer for years! If I had to see ads this whole time, I’d most certainly have checked out long ago). In addition, lessons were not really improving my language aptitude, nor did I enjoy the self-imposed albatross of having to “check in” each day to keep that meaningless streak going.

For me, the way to learn a human language (much like a programming language), is to use it, and use it often. A few minutes a day reminding myself of some grammar or vocabulary in a particular foreign language isn’t enough to move the needle significantly, and my desire was not stoked by any tactic Duolingo deployed (besides maintaining a streak).

Like a cruise that briefly visits several countries, or a variety platter of food served at a restaurant, Duolingo is at its best as a discovery tool. It allows you to sample a lot of languages, and does it in an engaging way. I’m sure I wouldn’t have learned as much random basic Japanese, Hawaiian, or Arabic as I did without it. But language is a muscle, and all that I’ve learned over the years has largely seeped into the void, and I knew it would, because I don’t use it much anywhere else besides Duolingo.

Introspectively, this may say more about me than Duolingo, honestly. I love to sample things and learn a little about a lot of things. Going super deep on a topic has never been my strong suit, which can often lead to competence, but rarely mastery. That being said, I tested through Spanish to the very last section, but I’d never say I was fluent, which feels like a failure of the system. I might’ve gleaned a new thing or two, but I doubt much will stick.

Duolingo allowed for me to play around with language, and occasionally try to actually learn, but in the end I think the lack of drive on my part plus the increased friction added to each lesson finally put me over the edge of just not caring at all anymore. After ~13 years of different language concentrations, streaks of hundreds of days broken by forgetfulness, and one incredibly long multi-year streak (and sharing all this love with friends), I’m done chasing the owl. If I actually want to learn a language beyond basic reading comprehension, then I will probably look for a different tool.

At least I hit a nice, round number and went out with a bang, right?

WHAT IS THIS?

It is NebyooAxe (or just Axe). And it is a guitar chord identifier and strummer that potentially improves your gitbox knowlege.

As I mentioned not long ago, I wanted to make some kind of online web app that could help me, musically. While I’ve made Keebord and SoundLister, they are not guitar-centric (which is a little wild since that’s my main instrument). Since there are plenty of musicians out there who also happen to be programmers, you can easily find web apps that help guitarists with various things, but most of them are either too bloated or full of ads or both. All of them aren’t made by me, too. Thus, I decided then to make a guitar chord lookup tool…and I have done so.

TECH STACK

Besides the usual soup of HTML, JS, and CSS that all my (and most others’) web apps tend to have, I decided to once again use Vue, since I enjoyed using it for Keebord. I like the idea of having these single file components that have all the template, style, and logic, and my work in EmberJS and GlimmerJS has only cemented that. In order to make it even gooder-er, I opted to use TypeScript so that I can have explicit variable types and frustrate myself when my terrible untyped JavaScript skills are constantly tested (but get better about the logic therein!).

Remembering settings is once again done in localStorage using the Web Storage API, because I’ve used it many times before and it works great. I opted for VueUse’s specific useStorage method to help things along, though.

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

type FretArray = string[]

export const useSettingsStore = defineStore('nebyooaxe-settings', {
  state: () => ({
    enableFretSound: useStorage('axe-enable-fretSound', true),
    currentFrets: useStorage('axe-current-frets', <string[]>[]),
  }),
  actions: {
    toggleEnableFretSound() {
      this.enableFretSound = !this.enableFretSound
    },
    updateCurrentFrets(currentFrets: FretArray) {
      this.currentFrets = currentFrets
    },
  },
})

Playing the notes when pressed and strumming the chords are all done manually through the Web Audio API, creating oscillators and fading the volume in and out.

function playNote(fretId: string): void {
  const masterGainNode = ctx.createGain()
  const startGain = 0.0001
  const endGain = 0.1
  masterGainNode.gain.value = startGain

  // main osc note
  const osc = ctx.createOscillator()
  osc.type = 'square'
  const noteFreq = MUSICAL_NOTES.filter(
    (n) => n.fretIds.includes(fretId)
  )[0]?.frequency
  if (noteFreq) {
    osc.frequency.value = noteFreq
  }

  // vibrato lfo
  const lfo = ctx.createOscillator()
  lfo.type = 'sine'
  lfo.frequency.value = 8

  // gain that sets the depth of the freq mod
  const lfoGain = ctx.createGain()
  lfoGain.gain.value = 0.35
  const lfoDetune = ctx.createGain()
  lfoDetune.gain.value = 50

  // connect lfo to its gain and its detune and then start it
  lfo.connect(lfoGain)
  lfoGain.connect(osc.detune)
  lfo.start()

  // connect main osc to main gain and then to destination
  osc.connect(masterGainNode)
  masterGainNode.connect(ctx.destination)

  // start the main osc, fade in volume, fade out volume, stop main osc
  osc.start(ctx.currentTime)
  masterGainNode.gain.exponentialRampToValueAtTime(
    endGain,
    ctx.currentTime + 0.2
  )
  masterGainNode.gain.exponentialRampToValueAtTime(
    startGain,
    ctx.currentTime + 2.1
  )
  osc.stop(ctx.currentTime + 2.1)
  lfo.stop(ctx.currentTime + 2.1)
}

Speaking of which: I should really write some more tests. I’m using Playwright for E2E tests and Vitest for unit tests…because that’s what Vue defaults to. I’ve had some minor experience with both of them due to using Astro recently, but I’m still mainly used to either QUnit or Cypress, so it’ll take a little getting used to.

FINAL NOTE

Of course, as a web app, NebyooAxe is not done done just yet. The algorithm to figure out chords could be improved with more intelligence. It only works for standard tuning and six strings, despite variations existing. It also only works for right-handedly strung guitars. I know, I know. It is not yet as featureful or accessible as it could be. My mantra, however, is that the web is art, and art is never done. However, it is currently useful to me, and possibly others, so it’s up and ready to strum.

FOR THE ROAD

I never took formal lessons to learn to play the guitar. I was inspired by someone in high school playing to finally pick one up and start plucking. Then I turned to tablature on the Internet to learn to play my favorite songs. Somewhere along the way I just got curious about what all the theory behind it was and that became a lifelong interest. Knowing the chord names (and how they’re derived) has been fascinating to me for a long time. Now that I have my very own configurable way to look them up, I feel like a bucket list item got checked off. Hopefully NebyooAxe is helpful to someone else, too!

PRE-AMBLE

I’ve been a guitar player since the mid-1990s, so…it’s been a minute. I grew up when the Internet was becoming popular, and one of the best things about it was the easy access to tablature. If you’re not familiar, imagine standard sheet music, with the bars and lines and notes, but instead of a 6-line, 5-space area, with circles denoting pitch AND duration, each note was a number, denoting the specific fret on a string instrument. Obviously, this meant non-string players did not use it, which limited its use. And each note had no intrinsic duration, so only careful spacing of text would infer that information.

Regardless of its failings, guitar tablature was easier to write and read, being closer to the metal, mimicking the 6-string fretboard of your average guitar, so I was able to grok it immediately, unlike standard sheet music. That, and all my favorite pop and rock songs were often in tablature format and accessible from OLGA (rip) or Ultimate Guitar, so I devoured that in my first few years of learning the guitbox. I even printed out a massive book of them at one point!

While tablature is amazing, if you can’t tune your guitar it’s not going to be much help. Also, some of the “tablature” you find may just be chord charts, and if you don’t know how to play a C#sus2, then you’d be out of luck. Thus, that’s kind of the three tools I first think of when I ponder a new web app to help guitarists (myself and anyone else).

• Tablature
• Tuner
• Chord lookup

AMBLE

There are plenty of web apps available that do one or multiple of these things. Some of them are very good! Some of them are less good. A lot of them are full of ads. I’ve never made a web app and put ads on it. I live a privileged life where I don’t need to make money off of the random things I make for the web. Thus, I will continue to do that as long as I can.

Of the three tools that I identified, I think that a chord lookup app appeals to me the most. Tablature (and the editing of it) is a big job, with lots of decisions to make and edge cases to handle. A tuner would be even easier than a chord lookup tool, but I use it less, in general, since I have an app on my phone and even a couple hardware tuners (or I can just hit a note on a piano).

Chord lookup appeals not only to my intrinsic interest in cataloguing and identifying and theorizing about music, but it also sounds like a fun challenge. My online keyboard app, Keebord, already does some decent chord identification on a piano, but this would allow me to expand that, and center it around my main instrument. In fact, maybe I could even intermingle the tuning thing to potentially identify a strummed chord. I’m sure that’s a lot harder than using an algorithm with manual notes or intervals, but…it is also intriguing.

POST-AMBLE

Decision made! A chord lookup tool it is going to be, with a potential audio input identification thingy maybe later.

Now…what to call it?

INTRO: Easing You Into the Topic

While Deckdle is probably my most successful and continuously used web app, I think my most useful one is SoundLister, mainly because whenever I’m working on new music it gets used heavily. Adding temp tracks to something like iTunes or even iCloud Files is just not as simple or efficient, and have drawbacks I don’t want (they are not finished so they don’t yet belong in my music collection, but I still need a playlist of them to listen and scrub and loop over while I’m doing listening tests). Thus, many years ago I decided to make a web app so I could drop audio files in a directory on a server and listen to them on any Internet-enabled device. It works like a charm and more details can be found at my initial unveiling blog post (note: despite what it says then, iOS eventually fixed the ‘screen off, so next track does not play bug’!).

VERSE: Telling You a Story

The only real problem with SoundLister is a problem any web app that is delivered over a network has: if the network disappears, you can’t get to the web app. This could happen if you were on a flight or driving through a low signal area or because all wireless towers and satellites blew up instantaneously. I don’t know, man, crazy stuff happens sometimes!

However, there is a way to somewhat get around this: Service Workers.

Service Workers act as a proxy, essentially doing a full cache of whatever you tell it to cache, and so in the future if your app requests files, like CSS or image or MP3, then it checks the cache first before going to the network. Thus, if you install and register one, you go from the initial “Web App Live From the Network” to a subsequent “Web App From the Cache”, negating the need to re-download anything, and making your “web app” a “local app” for all intents and purposes. It’s kind of magical!

The basic code needed is the sw.js file itself, which handles the event life cycle of the Service Worker itself, and a navigator.serviceWorker.register method that registers the Service Worker to do its thing.

// app.js
const SL_SERVICE_WORKER_PATH = '/sw.js'

SoundLister.registerServiceWorker = async () => {
  if ('serviceWorker' in navigator) {
    try {
      const registration = await navigator.serviceWorker.register(
        SL_SERVICE_WORKER_PATH, {
          scope: '/',
        }
      )

      SoundLister._logStatus('Service Worker registered', registration)

      if (registration.installing) {
        SoundLister._logStatus('Service worker installing')
      } else if (registration.waiting) {
        SoundLister._logStatus('Service worker installed')
      } else if (registration.active) {
        SoundLister._logStatus('Service worker active')
      }
    } catch (error) {
      console.error('Service Worker failed to register', error)
    }
  }
}

// sw.js
const SL_CACHE_STATIC_KEY = 'soundlist-cache-static-v1'

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches
      .open(SL_CACHE_STATIC_KEY)
      .then((cache) => {
        const staticAssets = ['/', '/index.html', '/assets/css/app.css']
        return cache.addAll(staticAssets)
      })

      // ...we will come back to this part...

  )
})

What a Service Worker is not is something that provides an intuitive way to cache not only static files BUT ALSO a dynamic list of audio files that can change depending on the instance or day.

CHORUS: The Part You Will Remember

PHP to the rescue!

That is to say, of course, that I was already using a PHP script to scan a directory and build a nice array of all the subdirs and their files so that I could use it build the playlist interface.

<?php
// to echo out and return to JS for further processing
$files = array();

$iterator = new RecursiveIteratorIterator(
  new RecursiveDirectoryIterator(
    '../audio/',
    FilesystemIterator::SKIP_DOTS
  )
);

$curDir = '';

foreach ($iterator as $file) {
  if (in_array(strtolower($file->getExtension()), $exts)) {
    $path['basename'] = $file->getBasename();
    $path['filename'] = $file->pathname;

    // etc.

    $files[$dirIndex][] = $path;
  }
}

echo json_encode($files);
?>

Once the script returns its value Javascript, one is left with a const response = fetch(SL_PHP_SCRIPT) call that then feeds into a const data = response.json() call that is then processed into the UI.

However, the Service Worker install method cannot have any arguments, so in order to load things dynamically into its cache when it is installed you need to have a manifest of sorts to tell it what to cache once you do know. Thus, I had to do an extra step in my PHP script, like so:

<?php
// to echo out and return to JS for further processing
$files = array();
// to save to JSON for service worker manifest
// [
//   '/audio/subdir1/song1.mp3',
//   '/audio/subdir1/song2.mp3',
//   '/audio/subdir2/song1.mp3'
// ]
$filePaths = array();

$iterator = new RecursiveIteratorIterator(
  new RecursiveDirectoryIterator(
    '../audio',
    FilesystemIterator::SKIP_DOTS
  )
);

$curDir = '';

foreach ($iterator as $file) {
  if (in_array(strtolower($file->getExtension()), $exts)) {
    $path['basename'] = $file->getBasename();
    $path['filename'] = $file->pathname;

    // etc.

    $files[$dirIndex][] = $path;
    $filePaths[] = '../audio' . '/' . $path['subdirPath'] . '/' . $path['basename'];
  }
}

// for Service Worker
$jsonString = json_encode(
  $filePaths,
  JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT
);
// make sure web server user has write access to the directory this is in!
$fp = fopen('../json/audio_manifest.json', 'w');
fwrite($fp, $jsonString);
fclose($fp);

// for immediate return to JS
echo json_encode($files);
?>

Two notes:

1. The JSON_UNESCAPED_SLASHES flag was necessary so PHP wouldn’t write \/audio\/subdir1\/song1.mp3 in its output, and the JSON_PRETTY_PRINT flag makes its output more human-readable (not necessary, but nice).
2. The comment about web server user access was important because I was just getting 500 errors from my script until I realized the group that owned it did not have the ability to create the json file I was asking it to create.

BRIDGE: Slight Tangent for Variety

As much as I want anyone reading this to listen to my music and fall in love with all of it and listen to it all the time and reach out to me about it, there are other people making music that is equally good (but really probably way more good), and you should check it out.

While writing this post I’ve been jamming out to Angine de Poitrine Vol. 1 and Vol. II and this stuff RULES SO HARD.

CHORUS: The Part You Remembered

PHP to the rescue!

Not that saying ‘PHP is cool’ has ever been, well, cool, I’d still like to shout it out because when I need to drop to the backend in order to do things frontend Javascript won’t do I still default to PHP. Python is really popular, too, and it seems to be getting more popular as LLM and AI agent programming becomes the norm, but it’s not in my gut like PHP.

My first ever real web app was your typical *AMP (Mac/Win/Linux, Apache, MySQL, PHP) type of project, and it really laid the groundwork for how I think to make a web application to this day. They released 8.5 back in November 2025 and 8.6 is already in development, so support remains strong even if it’s not hip to use.

OUTRO: Transition Out of Here

As a real test of this new Service Worker, I took a drive and loaded up SoundLister on my phone (with network on, obvs). Once it was done, I turned on Airplane Mode and refreshed the site. Lo and behold, it loaded and played audio like it was a local app with no need for network activity! It felt like real magic, honestly. There was a hiccup at one point where a track stopped playing out of nowhere, but a refresh of the site fixed things.

Since this blog post is so musically-themed, I will leave you with the outro of an actual song in the works:

Have you ever wondered how the many, many, MANY YouTube videos that apparently exist can really be filtered by such a small id? It doesnt seem nearly enough, especially when we live in a world with systems that use alphanumeric ids of 16, 20, 24, and more. Of course, my grasp of big numbers is limited and deplorable, so I did a little more digging.

According to some brief research it seems like YouTube (as of sometime last year) has about ~15 billion videos, with upload rates each day in the millions. The id that each video uses is an 11-character combination of three character sets: A-Z (26), a-z (26), and [0-9] (10), which makes the number of choices for each character 62. Remembering my high school math lead me to a permutation to figure out:

_nP_r = n! / (n - r)! -> ₆₂P₁₁ = 62! / (62 - 11)!

This results in about 20 quintillion (i.e. 20 with 18 zeroes) possibilities for a YouTube video ID. The current data set is nowhere near hitting that number. Thus, an 11-character ID really can easily filter all those videos.

This thought experiment has now concluded, but go read this BBC article which gets into it more.

I just killed my single-user, hosted instance of Mastodon.

Perhaps a victim of the binge-purge cycle?

CONTEXT

When I first heard about Mastodon, and that it could be self-hosted, I was very interested. I’ve had my own Linux VPS (Virtual Private Server) for many years now, and I love to try out new self-hosted software. It started with web and file serving. Then, slowly but surely, I’ve been moving services that used to be on a server I had no control over to my own server which I do. I was also excited to try a social media/microblogging platform that didn’t use an algorithm, nor that was owned by a tech billionaire.

My server started on Debian 9(?), and moving to 10 didn’t bring any major issues, but I was also running a lot less on it. Moving to 11 also didn’t bring any major issues that I can remember. Even a recent move from 11 to 12 was no big deal, but going to 13 borked several things: my mail server, a web site using Phusion Passenger, and my self-hosted version of Mastodon. The other two are going to need more research and work at some point, but I attempted to ameliorate the latter one today. Before I even started, I was tired. Knowing how something works and being able to fix it are things I value, but there’s a cost to the knowledge and the application of it. I have a limit on how much I want to endure, and I guess I finally hit it today.

I’ve been using Mastodon for several years now, occasionally posting to it, and using it to keep up on other creative people who did fun stuff like make games, music, animations, and other art. I wish it were used by more people I know, but I understand why it is not. Regardless, I believe it truly is the best way to be social online today, in a public way, to a wide audience, without being subject to tech giant algorithm nonsense.

Unfortunately, like every other microblogging platform that has ever existed, if you don’t already have an audience, it’s not some guarantee to getting one. Thus, a lot of the time it felt like I was posting into a void, much like when I make a blog like this one. The blog is just a part of my personal website, however, and so failing to write new blog posts often doesn’t mean I can’t tinker with the rest of it. Mastodon, on the other hand, is just the blog, and nothing else.

Not being a stranger to putting things online that no one looks at, this didn’t bother me, and so I used Mastodon, anyway. Running a Mastodon server, however, can be frustrating like running any other kind of server, and the difficulty of upgrading a Linux OS coupled with some confusion about the proper postgresql version to use resulted in losing my years-old account and friends list and post history. With more effort expended, I could go to a backup, extract said data, and put more hours into trying to fix things. But over the years I’ve grown almost as much weary at the concept of this particular brand of devops as I am curious. In other words, I’m getting too old for this shit.

So, I made a decision: just blow away the whole thing. The server maintenance and occasional bugfixing and Google sleuthing that comes with the whole thing, espcially when I barely use it, just doesn’t add up to enough value for it to feel worth it to me right now. It means, however, that what little “social media” I actively contribute to just took a dive. My time spent on Facebook or Instagram or X/Twitter or whatever can be measured in “barely” or “non-existent”, so removing Mastodon means I’m down to just my website. Just like the old days, I guess. Except in the old days, I had LiveJournal. I didn’t control it, but I posted to it often, as did my friends, and we had a community. That particular community died years ago, however, and I feel like social on the web has never been the same since.

FOR THE ROAD

I’ll miss the people I found on Mastodon, and maybe I’ll join some non-self-hosted instance someday, but for now…I feel a burden lifted. Mastodon was kind of a behemoth to host, and while I probably made it more difficult on myself not using Docker (it would probably have made the dependency management much less of a concern), the overall utility of it as a platform plus the exhausted frustration made it something I could see myself going without. Tootles for now.

You are born. You no longer get all nutrients from another life form (well, ok, you still will for a while, but the process of stopping this begins). It’s a lot brighter, a lot noisier, and a lot weirder than the small, warm, comfortable space you’ve been in for months. However, while you were gestating, you grew from a simple organism to a complex one. And now that you’re on The Outside, you’re only going to get a lot more complex.

…

I’m now in my mid-40s. I’ve experienced things. I’ve learned things. My interests have broadened. Regardless, I go through periods where I’m seriously all about adding more stuff to my life, and then periods where I want to just excise any and everything non-essential.

As a kid, I was into collecting comic books and trading cards of the sports and comic varieties. These collections now sit in boxes in my garage, never looked at for decades. I did some research on whether they’re worth anything, and they’re not. I would like to purge them from my life as they don’t bring any value anymore, but it’s hard to just throw them away. So…they sit.

…

Since “getting into computers” in the mid-90s, being able to learn and toy with new things, and thusly binge them, has become quite easy. Bingeing on something when it’s new or once-new-and-now-refreshed is often followed by a purge once the newness wears off, or the administration to handle it becomes mentally taxing.

You can see where this has gone and will continue to go. New things are fun and as cheap storage space ballooned over the decades, acquiring and storing it all got easier and easier. The Internet has allowed more people access to more things and so much of it can be digitized so it’s accessible.

This is not a new thing because of digital life, as people have hoarded material things for centuries, buying bigger homes to store more stuff. As I’ve gone through life, my place of residence and the potential amount of storage I have increased, and I’ve definitely spent some time filling it. However, the digital avenue allows for immense scale and speed in harboring binge-dom. If you keep on this road and never stop, then you might become a “hoarder” and, at the most extreme, become fodder for a show. If you course-correct and go the other way without stopping, you might join the “minimalist” cult. As I’ve learned over the years, however, is that long-term extremism is not healthy.

Even outside of the digital world, I go through periods of binge-purge.

I could do an AskReddit to see if I’m the only one who has this issue, but without even trying I’m 100% sure that is false. Perhaps this binge-purge cycle is on a spectrum, like with many character traits. We all do it to some degree, and we all probably move around on the spectrum over time.

As a final meta-note, I once did blogging on the Internet SO VERY MUCH, sometimes blogging multiple times a day. Now, it has taken me literally days to even finish this one. And the last one I did was months ago.

No great conclusion to any of this, but glad I finally got it out, as it’s something that’s rolled around in my head for years. To wit: moderation in all things, including moderation.

CONTEXT

For the first 100 episodes of Hacking the Grepson, the podcast about programming and related topics that my friend Matt and I do every other week, we did various topics. These topics include the following: programming languages, Wordle, software development life cycle, documentation, Factorio, technical debt, data analytics, Slay the Spire, version control, and many more.

You may have noticed a few proper nouns in that list, and those proper nouns are all what? GAMES. Many people become programmers to make games, and then end up working on spreadsheets or websites to pay the bills because those are generally easier and more applicable to more people. However, that itch to make a super cool game that’s fun and addictive never quite goes away.

ACTION

Thus! For season 2 (episode 101+) we decided to try something different and just have one topic for as many episodes as it takes: Make a Game (Together). That means we have had to decide what kind of game we are going to make, what to make it in, and then…make it and deploy it to the world.

After a couple of episodes (and some offline chatter), we have both gravitated to using Love2D (for prototyping) and Defold (for the final product). I’d played with the former back in the day (Balatro was made with it!), but never even heard of Defold until Matt brought it up (apparently it was created by an offshoot of Avalanche Studios, the makers of Just Cause). They both use Lua, a very popular scripting language that seems to be embedded in a lot of other things (I remember first experiencing it when investigating World of Warcraft mods waaaaay back in the day).

As far as which kind of game we are going to make, or which platform, or which control scheme, or which theme, or which mechanics, or [insert-other-aspect-of-game]…that is still being actively decided. At least we know which tool(s) we are going to use, and are both getting the hang of both. I’ve been making prototypes, going through tutorials, and testing the online documentation and wikis of both tools.

LOVE2D

Love (or LÖVE, as the creators stylize it, and as Love2D, which is how I will refer to it to make it distinct from the emotion/concept) is a free, open-source framework built on Lua, which means it takes the base Lua scripting language and adds a bunch of love (objects/classes) to it, and allows you to compile and run it (or export it to various things). Love2D has no IDE, so you write your code in a text editor of your choice, and build whatever pre-existing assets you want to use in whichever tool you choose, referencing them in code, but with no Love2D-specific GUI tooling to manipulate or organize them.

Here is some example code from a 2-player game’s drawing routine:

function love.draw()
  love.graphics.setBackgroundColor(0, 0, 0.3)

  -- draw player1
  love.graphics.setCanvas(screenCanvas)
    love.graphics.clear()
    drawEntities(player1)
  love.graphics.setCanvas()
  love.graphics.draw(screenCanvas)

  -- draw player2
  love.graphics.setCanvas(screenCanvas)
    love.graphics.clear()
    drawEntities(player2)
  love.graphics.setCanvas()
  love.graphics.draw(screenCanvas, 400)

  -- Add a line to separate the screens
  love.graphics.line(WinWidthCenter, 0, WinWidthCenter, WinHeight)

  -- draw scores
  love.graphics.print("$1: " .. player1.score, 10, 10)
  love.graphics.print("$2: " .. player2.score, 10, 30)
end

DEFOLD

Defold is a fully-fledged game engine and IDE (write your code and build projects from the application) also built on Lua. You spend most of your time in the application, writing code, creating tilesets and animations, and organizing things inside Game Objects and Collections. You still build your pre-existing assets in whichever tool you choose, but once inside Defold there are more GUI affordances for manipulating and integrating them.

Here is an excerpt from an avatar’s update routine:

function update(self, dt)
  ...

  local anim = self.current_anim
  local dx, dy = axis_to_vec(self.input)
  local moving = (dx ~= 0 or dy ~= 0)

  -- Update facing direction and animation when moving
  if dx < 0 then
    anim = hash("left")
    self.facing_direction = vmath.vector3(-1, 0, 0)
  elseif dx > 0 then
    anim = hash("right")
    self.facing_direction = vmath.vector3(1, 0, 0)
  elseif dy > 0 then
    anim = hash("back")
    self.facing_direction = vmath.vector3(0, 1, 0)
  elseif dy < 0 then
    anim = hash("front")
    self.facing_direction = vmath.vector3(0, -1, 0)
  else
    -- When stopped, switch to idle only if facing front, otherwise keep current animation
    if self.facing_direction == vmath.vector3(0, -1, 0) then
      anim = hash("idle")
    else
      anim = self.current_anim
    end
  end

  ...
end

PROGRESS THUS FAR

After almost two months of this experiment, and many hours put into both tools, it’s hard to say one is a clear winner. They both use Lua, so there’s no real difference there. Love2D is more of a “write code and run compiler on command line” flow, whereas Defold is an “open project, tinker, (re)-build” flow. They both run quickly and allow for quick iteration. Defold having built-in tilesource/tilemap support so you can easily build sprite-based levels is nice. However, I’m still getting tripped up on its collection/game object organization scheme. Love2D feels closer to Pico-8, which I’ve used a lot, but it’s missing the latter’s sprite/music editors (as is Defold).

Basically, this point in the project is still mainly learning tooling and trying to form muscle memory for the basic foundational things, so progress consists largely of going through tutorials, tweaking them, and spending a lot of time in Google/Wikis/Ollama. It’s not all fun, and often frustrating, but that’s part of the journey.

For now, I’m enjoying spending time messing around with various prototypes here and there and then doing a bi-weekly checkin with Matt on the podcast. It’s almost like recording a development team’s standup. I also started a “blog” of sorts which just consists of notes about each checkin, so we have a record of what we did each meeting, and can look back on progress.

FOR THE ROAD

Hopefully all of this coalesces into a single project that we share and iterate on, but for now it’s just the wild west of gamedev, baby.

Basically, I wanted SoundLister to honor a keyboard function key (like the one I have on my Mac) that toggles play/pause, while also honoring the UI play/pause button. Since SL uses a regular <audio> element, pressing that key would play/pause the audio like expected, but the UI would NOT toggle like you’d expect, since the existing event listener was only checking for clicking on the main player’s icon.

At first I thought I needed to find an EventListener for keypress, as the event in question was a ‘key’ being pressed. Seems intuitive, right? That’s how I added some simple keyboard shortcuts for play/pause and skip forward/back:

document.addEventListener('keydown', (event) => {
  if (event.code == 'Space') {
    // fix issue with double-triggering
    // if space bar is activeElement
    document.activeElement.blur();
    SoundLister._updatePlayState('key');
  } else {
    // Next Track: Shift+Cmd/Win+Right
    // Prev Track: Shift+Cmd/Win+Left
    if (event.metaKey && event.shiftKey && event.code == 'ArrowRight') {
      SoundLister.goForward();
    } else if (event.metaKey && event.shiftKey && event.code == 'ArrowLeft') {
      SoundLister.goBack();
    }
  }
});

However, despite being aided by this wonderful JavaScript Key Codes site, JS doesn’t seem to hear function keys (F1-F19). Why? Probably some OS-specific low-level reason. I dunno. Regardless, I was looking in the wrong place: I needed to listen for when audio began to play or was paused. I was already doing this, but I needed to augment it and figure out the proper logic to keep from accidentally getting stuck in loops. This was achieved by properly seperating the various entrypoints into toggling the play/pause state of the <audio> element:

• Clicking on the playlist itself
• Clicking on the collection dropdown and choosing a new subset of tracks
• Clicking on the UI play/pause icon (or using keyboard shortcuts)
• <audio> events that the other methods would trigger

I ended up with the following:

// excerpt from events.js
// ...
// audio player UI play/pause icon
SoundLister.dom.playButton.addEventListener('click', () => {
  SoundLister._updatePlayState('click');
});
// <audio> element has started playing
SoundLister.dom.audio.addEventListener('play', () => {
  SoundLister._updatePlayState();
  SoundLister._setTitle(); // set <title> with current track name
});
// <audio> element has been paused
SoundLister.dom.audio.addEventListener('pause', () => {
  SoundLister._updatePlayState();
});

// excerpt from main.js
// ...
// change play/pause icon and audio element depending on context
SoundLister._updatePlayState = (source = null) => {
  switch (source) {
    // clicking in the audio playlist auto-starts track
    // and sets play/pause icon to 'pause'
    case 'playlist':
      // start the audio scrubbing bar updating so refreshes every second
      requestAnimationFrame(SoundLister._whilePlaying);

      // change play/pause icon to 'pause'
      SoundLister.dom.playButtonIcon.classList.remove('fa-play');
      SoundLister.dom.playButtonIcon.classList.add('fa-pause');

      break;

    // clicking on the collection dropdown auto-stops track
    // and sets play/pause icon to 'play'
    case 'collection':
      // stop updating the audio scrubber bar refresh
      cancelAnimationFrame(SoundLister.raf);

      // load first track in collection
      SoundLister.dom.audio.src = SoundLister.tracks()[0].href;

      // change play/pause icon to 'play'
      SoundLister.dom.playButtonIcon.classList.remove('fa-pause');
      SoundLister.dom.playButtonIcon.classList.add('fa-play');

      break;

    // clicking directly on the play/pause icon
    // or using the space or next/prev keys
    case 'click':
    case 'key':
      if (SoundLister.dom.audio.paused) {
        SoundLister.dom.audio.play();

        // start the audio scrubbing bar updating so refreshes every second
        requestAnimationFrame(SoundLister._whilePlaying);

        // change play/pause icon to 'play'
        SoundLister.dom.playButtonIcon.classList.remove('fa-pause');
        SoundLister.dom.playButtonIcon.classList.add('fa-play');
      } else {
        SoundLister.dom.audio.pause();

        // stop updating the audio scrubber bar refresh
        cancelAnimationFrame(SoundLister.raf);

        // change play/pause icon to 'pause'
        SoundLister.dom.playButtonIcon.classList.remove('fa-play');
        SoundLister.dom.playButtonIcon.classList.add('fa-pause');
      }

      break;

    // audio play/pause events
    default:
      if (SoundLister.dom.audio.paused) {
        // change play/pause icon to 'play'
        SoundLister.dom.playButtonIcon.classList.remove('fa-pause');
        SoundLister.dom.playButtonIcon.classList.add('fa-play');
      } else {
        // change play/pause icon to 'pause'
        SoundLister.dom.playButtonIcon.classList.remove('fa-play');
        SoundLister.dom.playButtonIcon.classList.add('fa-pause');
      }

      break;
  }
};

The real key was making sure that activating the play/pause UI icon didn’t create an infinite loop of audio start/stop events, causing the icon to toggle endlessly and the audio to take on a nice glitchy tremelo feature.

Trial and error, complication followed by simplification, and lots of refreshing of the browser finally got me to the finished, working state. Now I can hit the function key on my Mac and the status of everything syncs up nicely.