Yoshi Walsh's Blog

Some years prior I’d had a fleeting idea for a project to find English words that could be accurately phonetically represented in katakana, and to find words pronounced differently in English but identically in Japanese. Ultimately I never started this project, but while I was trying to determine how difficult it would be I’d been looking for open source English dictionaries. One of the options that came up in my searches was WordNet.

WordNet is such a cool database that I knew I had to make a game out of it. But how?

The idea that I eventually came to was to give players “directions” from their guess through the shortest path of connected words in order to reach the target word. Kind of like a “six degrees of separation” concept. Each direction would describe the relation between a word and the next, but not reveal anything about the specific words.

For the first few years of my career I thought that “writing algorithms” was a special type of programming and required a unique skillset.

I had a full time job, and I considered myself a fairly good programmer. But I’m self-taught, and at the time I didn’t think I’d ever be able to write algorithms. I thought you had to go to university to learn that skill. I also thought that I’d never need to, since I was already doing alright for myself without.

But it turns out that algorithms aren’t actually so scary. This is the post that I wish I could send my past self. Here I am trying to write the post that I wish I could have read at that time.

From the title you might think that this post is about anime. Well, it’s true that there is a lot of anime mentioned in this post, but that’s not where the title comes from. “AniMe Matrix” is ASUS’ name for the programmable LED matrix display on the rear of the lid of certain Zephyrus G14 models. ASUS include some nice graphics and animations you can display on this by default (I’m particularly fond of the “SEE YA” animation that plays whenever you shut down the laptop) but given that ASUS pitch the AniMe Matrix as a tool for self-expression, the intention seems to be that you will create your own content for it.

In practice, I found that authoring content for the matrix is trickier than you might expect. The matrix itself is low resolution, greyscale only, skewed, and has significant light bleed between neighbouring “pixels”. Images are also rescaled before they appear on the matrix, and this rescaling also tweaks the aspect ratio. Due to all of these factors, content often ends up appearing blurry and indistinct on the panel.

Clearly a better understanding of how the matrix works would allow for authoring higher quality content. After a lot of trial and error, I might not understand everything there is to know about the AniMe Matrix, but I understand enough to create images and animations that meet my standards for quality.

I recently updated this blog to a new version of Gatsby. When I did, I encountered an issue: when I tried to build the site I got an error about Sharp not being installed correctly.

I noticed that favicons depended on sharp ^0.22.1. The ^ symbol usually allows minor version updates but not major version updates, but for packages still on major version 0 it only allows patch updates. This meant it was incompatible with the ^0.23.1 required by Gatsby’s official plugins. This doesn’t cause an issue during the install process, as NPM simply installs both 0.23.1 and 0.21.1, allowing each dependency to use their own version of sharp. But sharp (for some reason) doesn’t support having multiple versions installed within a project, so we get the error.

After I’d written the first draft of my posts about LyrTube, etoile-et-toi, and LyrSync I was proof-reading them and realised they were a bit boring. I was happy with the content and the writing, but the posts were walls of text. With LyrSync in particular the visuals were a huge part of the project, so the fact that the post was completely devoid of imagery stood out as particularly dull.

Of course, the third blog post in that series was all about animation, so simple screenshots would not suffice. I would need to embed animated gifs in the post. A super-easy way to produce such gifs would be to use GifCam to record my screen. A fancier method would be to record my screen with OBS Studio and then use ffmpeg to produce high quality gifs.

But neither of these methods were pointlessly-overcomplicated enough for my tastes.

When I developed my étoile et toi webtoy I intended for it to be a once-off project that only worked for that one song. But after I finished it, I realised there were other songs that I’d like to give the same treatment. After all, I was still using LRC to store the lyrics, so it wouldn’t be that hard add more songs.

The main issue was styling. The next song I wanted to make lyrics for was Rammstein’s Puppe. Gentle transitions and cursive writing certainly wouldn’t suit this song, particularly the chorus. In fact, every song would benefit from having its own unique styling. After all, the fitting styling was a major goal for the étoile et toi webtoy and without it I doubt the toy would’ve been at all compelling.

But I didn’t want to just copy/paste the étoile et toi project and modify the styling. I’m lazy, which means I’m a firm believer in the Don’t Repeat Yourself (DRY) principle. I was definitely not going maintain a separate project for each song.

It turns out that my fascination for timestamped lyrics has not decreased. I discovered this after I finished watching Kizumonogatari Ⅲ: Reiketsu-hen (Wound Story 3: Cold Blood) and the end credits started rolling.

During the credits a song called étoile et toi (edition le blanc) plays. The lyrics are in French, but Tactical’s fansubs kindly provide a translation. The song was very fitting for the movie, but I’m sure that without the translation it wouldn’t have resonated with me to such a degree. I found myself listening to the song repeatedly for the next few days, but each time I would have to skip to the end of the movie so I could enjoy the translated lyrics at the same time. I decided I wanted to be able to view these lyrics wherever I was, and so began a new project.

I had learned from my mistakes of aiming too big, so I decided that instead of trying to build a platform for lyrics I would just try to build a Single-Serving Site for this one song. This meant I was prioritising development speed over flexibility/maintainability. I challenged myself to develop the site as quickly as I could, preferably within 1 day.

In this post I’m reminiscing about an old project. In fact, I believe it was the first project I completed after I graduated from high-school.

While setting up my fb2k theme I discovered a component called Lyrics Show Panel 3. This component automatically searches the internet for lyrics to songs and displays them. But of interest to me was the fact that it supported timestamped lyrics, lyrics that are synchronised to the song. I fell in love with this functionality, and pretty soon I was creating my own timestamped lyrics files for whatever mildly-obscure songs took my fancy. This scratched the itch that I had to contribute, I felt that by syncing lyrics I was enhancing the songs.

But the true reward of creating things is in sharing those things with others, and it was difficult to convince friends that they should install fb2k and LSP3 in order to view my lyrics. I needed an easy way to share my creations. I wanted to be able to just send people links and not require them to do anything but click on those links.

The open source movement represents a tremendous opportunity for developers like you. It can help you improve your coding and communication skills while learning to effectively collaborate with strangers. It might provide you with fulfillment, a sense that you are contributing to The Greater Good. Or perhaps it will just help to make your resume look a bit better.

But if you haven’t contributed before, the open source community can seem intimidating, even if you’re an experienced developer. Open-sourcerers are geniuses, wizards, heroes! How could you possibly be so insolent as to request their attention, to waste their time with your questions and contributions?

I’m not an expert on open source, just someone who’s dabbled. I’m going to share some things that helped me and hopefully they will help you too.

This is a story of how setting up some game servers turned into an exploration of the seemingly-uncharted depths of FastCGI.

Was it worth spending so much time on this? Probably not. But at least I learned some things along the way.

Many sites display an excerpt of content on listing pages in order to give visitors a preview of the article. This snippet is your opportunity to entice people to click on the article and read it. The easiest way to generate a snippet is to just take the first x characters of the post.

Many articles start with a few introductory paragraphs to provide context or make the article seem more relatable. But does this introduction best represent the meat of the article? Wouldn’t it be nice to allow authors to choose which paragraph(s) got used to generate the preview snippet? I will first discuss the obvious way to solve this problem, then I will show you a better way.

Thanks to this approach my generated path---index-***.json file has shrunk from ~170KiB to ~4KiB, and that’s with only two blog posts. Larger websites could realise significant absolute savings.

There are plenty of articles online about hosting Gatsby using AWS S3+CloudFront, and there are even a couple of articles about using CodeBuild/CodePipeline for CI/CD (Continuous Integration & Continuous Delivery). But I believe they all over-simplify things, and miss out some real opportunities for improvement. While setting up this blog site my perfectionism kicked in, and I think that I can give you some tips on how to make your website just a little bit better. Plus we’re going to make /r/frugal proud and do it on a shoestring budget. If you already own a domain name, you can run a high-performance website for a few bucks per month.

On 2018-04-21 I read a blog post about using Hilbert Curves to map the internet in a way that humans could visually understand. Within the post there’s an animation of a small section of the internet which was moving through the Hilbert Curve. As soon as I saw this I wondered what it would look like if a much bigger Hilbert Curve was animated. Given that a large number of pixels would have to be updated every single frame, this seemed like the perfect opportunity to try out WebGL.