Yoshi Walsh's Blog

Yoshi Walsh

Yoshi Walsh is a Sydney-based developer, passionate about software systems of all sizes. From microservices & monorepos, to functions & flame charts, she just loves tinkering with technology.

  1. Mastering the AniMe Matrix - Everything you need to know to author content for the ASUS Zephyrus G14's LED panel

    Published 2020-12-31.

    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.

  2. Resolving pointy conflicts with Gatsby's dependency on sharp

    Published 2019-12-27.

    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.

  3. Lyrics 3.0+1.0 - Making perfect recordings using Selenium WebDriver & ffmpeg

    Published 2019-12-27.

    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.

  4. Lyrics 3.0 - Abusing CSS Custom Properties to create themeable synchronised lyrics

    Published 2019-12-26.

    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.

  5. Lyrics 2.0 - Immersive web-based lyrics

    Published 2019-12-26.

    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.

  6. Lyrics 1.0 - Timestamped lyrics on the web

    Published 2019-12-26.

    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.

  7. Tips for getting started with open source

    Published 2019-06-24. Updated 2019-06-24.

    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.

  8. Running nginx and PHP-FPM in separate Docker containers

    Published 2019-06-23.

    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.

  9. Fast & flexible content snippets in Gatsby

    Published 2019-05-30.

    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.

  10. Gatsby on AWS, the right way

    Published 2019-01-10. Updated 2020-05-05.

    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.

  11. Making an animated Hilbert Curve using WebGL

    Published 2019-01-07.

    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.

© Yoshi Walsh 2024 - I acknowledge the Gadigal people of the Eora Nation, the Traditional Custodians of the land I live upon. I pay my respects to Elders past, present, and emerging.