A couple of months ago, I got myself roped into a soon-to-be-released podcast by a friend. We’re calling it Hoffstadter’s Law. The basic premise is that each episode is a game of Nomic, which explores the contractual and evolutionary nature of law and society. As our ideas have become progressively more involved, we’ve gotten to the point where it made sense to start writing code to facilitate new games.
One set of episodes uses the background of gentlemen betting on horse racing. I quickly developed a minimal version of a virtual horse race in Python that suited our purposes well enough, but it had the distinct disadvantage of only being usable in terminal. Having taken the time to develop GUIs in Python before, it made sense at the time to write it in JavaScript instead. The thinking was that a JS implementation would give me superior control over the interface, and it would have the advantage that my friend would be able to use it online without making any changes to his machine.
The fruit of this endeavor can be played here. It is currently being served through Vercel, and you can see its ongoing development by the connected GitHub repo.
Plot Twist
I’ve never written JavaScript in any meaningful capacity before. I briefly flirted with a CSS tutorial in 2011. People gave earnest advice about flipping houses since the last time I touched HTML. At the start of this project, I understood vaguely that libraries like React existed, but had no context for what they did or why they were useful. That the JavaScript ecosystem had grown so large and byzantine was considered, but decided that it wasn’t worth being daunted by.
From that vantage, the path forward was clear enough: I would take in a bit of HTML, CSS, and JS to write a first draft, translate that into React, then find… Some kind of hosting? People host React apps, right?
Results
There is a lot to reflect on in this project. I didn’t realize at first that the heavy parallelism of learning would be beneficial, and looking back, I would have leaned into it more. Knowing that there were a number of things that had to be done to make anything work made it feel a bit overwhelming at the time, but it also left no time for indecision to bog down the project. If something was unclear, it was easy to focus on something else instead of stopping.
By the same token, if I were to give myself advice in the past, it would be to lean into that parallelism more. There came a time when the next best move was to start learning React, which became a critical point of divergence for the project. From then on, it was only a React project; the vanilla JS elements fell by the wayside as development on the React app accelerated. The early assumption that it would be easy to synchronize them later was based on the lack of understanding of how differently React approaches project development and structure.
Something that became a problem as development went on, and this became clear relatively early in the React portion, was a lack of clarity as to the ultimate audience of Horseless Derby. Deciding that it would only be for the podcast and portfolio, which is its status for the time being, would mean different implementation details than making it a full game.
For instance, at the moment, all user information is stored in localStorage. A full database and user credentialing would have been massive overkill for our purposes. A proper multiplayer mode, with human or AI opponents, even moreso, though I am considering adding all of these features to further expand my skills.
Importantly and not surprisingly, graphical design is hard. I’m not talking about technical implementation details, even though those also have their challenges. The actual design of an attractive layout is something I want to double down on, and will probably be the main focus of a future project.
Looking at the code, there is some uncertainty about the best way to do CSS styling. React has a library for styled components that can be used to change CSS of a single component. As of this writing, styled-components is used to marked effect, but it strikes me as messy and overdone. This certainly warrants more study and experimentation going forward.
Conclusion
It wasn’t until this project that I noticed how much anxiety I had around the web development ecosystem. Getting to the other side of it, I see now how unwarranted that was. I’ve been making more progress with other projects in the meantime, and there is something refreshing in knowing that this is another dimension that they can expand into, and that I actually really enjoy this kind of coding. Early Days!