[{"title":"External link icons","date":"2024-06-29T00:00:00.000Z","description":"What caused me to add external link icons and some considerations about how to implement them.","tags":["code","css","svg","icons"],"cover_image":"https://res.cloudinary.com/desumhldo/image/upload/v1719702163/external-link-icon_xhwy4d.png","cover_width":2496,"cover_height":904,"cover_alt":"An external link with an icon to indicate that along with an internal link with no icon.","cover_in_post":false,"slug":"external-link-icons","full_post":"

I was skimming Hacker News and read this article about microfeatures. This blog already had several of these features, but one I didn’t think about adding until I read the article is an icon to visually indicate external links. As you can tell, I added this feature to my blog!

The implementation that the website used for these external links was different than I expected it to be:

It uses an inline SVG. While not a big deal, I’d opt to use CSS for something that is purely for style like this if possible. One benefit of using the SVG inline is being able to set the SVG’s fill and stroke to currentColor. One thing I might do differently if using an inline SVG is adding aria-hidden to hide it or adding role="img" and a <title> so that a screen reader can know what it is.
It makes use of an external SVG file as opposed to a data URI. I really don’t think this matters much so long as both are cached (data URIs are cached if the CSS file that they’re in is cached), but I lean towards using a data URI for something like this when possible so that it’s kept in the place where it’s used and nowhere else.
It loads a large-ish SVG with a lot of icons, then uses one from that SVG. I assume it does this so that all icons on the whole site can be loaded at the same time and then cached. I am not really against doing that, it’s just different than how I imagined it would work.

I made my own implementation for my blog. It resulted in this demo. The key, but potentially unfamiliar, features are 1. the use of a data attribute a[href^="https"] to select only external links and 2. the use of mask-image with currentColor to change the SVG’s “fill”. The mask-image is necessary since the SVG is a background-image as opposed to inline. I apply it to a pseudo-element so it can be applied with only CSS and be ignored by screen readers.

Which approach is better? In the end, they’re fairly different but both are solid. The best option is whichever fits your codebase better!

","excerpt":"

"},{"title":"Subsonic","date":"2024-04-03T00:00:00.000Z","description":"The triumphs and struggles of self-hosting my own personal music server.","tags":["projects","music"],"cover_image":"https://res.cloudinary.com/desumhldo/image/upload/q_100/v1712180702/Subsonic.png","cover_width":1096,"cover_height":653,"cover_alt":"A screenshot of my Subsonic app","cover_in_post":false,"slug":"subsonic","full_post":"

My pre-Subsonic era

Remember the days when all the music you owned was on some hardware in your home (computer, iPod Shuffle, CD, etc.)? Before streaming was the norm every person had to be their own music curator.

I never stopped doing that. I’ve always had music that was not on every streaming services: music from NewGrounds, music I made, custom edits of others’ music (mostly just cutting out sections of songs), or music that are only available on one streaming service. This made me never want to transition to streaming services as the primary way that I listened to my own music.

For a while I used Google Play Music’s (now YouTube Music’s) music uploading service. It allows you to upload a ton of music from your computer and listen to it remotely through their app.

However, Google Play / YouTube Music falls short in regards to sharing your playlist with others. Since it’s music you uploaded and they don’t have the rights, Google doesn’t let people other than you listen to the playlists (or music files) that you have uploaded.

To try and remedy this, I wrote a script to scrape my playlists and create tracklists. I experimented with ways of generating playlists from these tracklists in services like YouTube and Spotify. However, nothing really did a great job and there were always missing tracks.

I put up with this for a while but eventually wanted a better solution.

Enter Subsonic

Subsonic is an old, unmaintained, and buggy personal media streamer. However, there’s not really a lot of personal media servers out there that emphasize music (not video) streaming. So I tried it out.

I was able to add my music without issue. I got my music playlists working without too much effort by formatting the tracklists in m3u format then importing them.

My streaming needs from other devices were covered as there are a good many apps (I use iSub on my phone) that support streaming from a premium Subsonic server. Subsonic even supports streaming to the Sonos app!

Sharing was also covered. Subsonic lets you have user accounts, each with their own login. For the first year I shared my playlists with people this way.

Recently I found out that there’s an even better way of sharing a playlist with Subsonic: you can create a “Share” view of a playlist that doesn’t require any authentication! So now I can make a link for a friend to listen to my playlist and share it with them and they can access it instantly. Pretty sweet.

And with that, all of my core needs are covered.

The negatives of Subsonic

Subsonic is far from a perfect product. But thankfully since it is self-hosted I can fix little things myself.

For example, the default playlist section gets too small when you un-hover it. When it’s this small, it’s tough to add a song to a playlist. Thankfully that’s an easy code change!

I also made changes to improve the trackbar to make it easier to click, drag along, and see.

There’s a lot of other UI changes I would make if I were designing this app, but to be honest it’s good enough.

The biggest problem I’ve had with Subsonic

The most major issue I’ve had with Subsonic happens when my computer crashes, which it does fairly often due to some serious overheating issues. One time after restarting my computer and navigating to the Subsonic web app, I found a generic 503 error. I looked into the logs (for me that’s within the C:\\Program Files (x86)\\Subsonic\\log\\ directory) and found that it was due to an “out of memory” exception when creating the database. This surprised me given how little RAM Subsonic is supposed to use!

After poking around for a while I found that when my computer crashes and Subsonic is closed unexpectedly, it massively bloats the subsonic.data (for me that’s within C:\\subsonic\\db\\ — notice that it’s a different path than the one before). Others have ran into this issue and at least one person fixed it by trimming down the .data file itself but I couldn’t get that approach working due to null values.

The first time this issue happened I was able to fix it by just bumping up the max amount of RAM Subsonic used. The second time it happened I couldn’t fix it by further increasing the max RAM. When this happened a third time, the error I was receiving was different: It was complaining about NUL values.

The solution: doing a clean reinstall

A clean reinstalling fixes all of these issues. It’s now what I do anytime Subsonic fails to startup, which is a little annoying, but with practice you can get going again in a few minutes.

Note: Before you carry out the steps below, I highly recommend backing up your subsonic.properties file from within the subsonic directory and all of your playlists! I made a script to download all playlists that you have, just make sure the number of playlists is changed to ID number of the most recent playlist that have.

To do a clean reinstall make sure to delete both the Subsonic application directory (for me that was C:\\Program Files (x86)\\Subsonic\\) and the Subsonic personal directory (for me that was C:\\subsonic\\). Install using whatever means of installing Subsonic, add your subsonic.properties file back to the subsonic directory, and then upload your playlists.

Pro tips for importing playlists more quickly: In subsonic\\jetty\\0cfa60\\webapp\\WEB-INF\\jsp\\importPlaylist.jsp, add style="width:500px;height:500px;" to the input with the type of file to make the drag area larger. You can also navigate directly to the http://localhost:4040/importPlaylist.view to prevent Subsonic from navigating to the playlist that you imported each time!

Where I stand with Subsonic

I bought the unlimited Premium package. Sure Subsonic has its issues but it solves more important issues that other platforms don’t solve for me. Thankfully the code is also fairly easy to make minor tweaks to.

Is there room for a better product in this space? Definitely. But I’m happy with Subsonic until I hear about something better for my use case.

","excerpt":"

My pre-Subsonic era

Remember the days when all the music you owned was on some hardware in your home (computer, iPod Shuffle, CD, etc.)? Before streaming was the norm every person had to be their own music curator.

"},{"title":"The AI Stanley Parable is coming","date":"2023-12-18T00:00:00.000Z","description":"Some ways that AI will help create more interactive and differentiated experiences.","tags":["rambling","ai","video games","design","technology"],"cover_image":"https://res.cloudinary.com/desumhldo/image/upload/q_100/v1702850590/ai-stanley_wliaiy.webp","cover_width":1024,"cover_height":1024,"cover_alt":"A dark office that shows a CRT monitor with a terminal on it. The image has the text \"The AI Stanley Parable\" on it.","cover_in_post":true,"slug":"the-ai-stanley-parable","full_post":"

The Stanley Parable

Have you played The Stanley Parable? I highly recommend it if you haven’t.

The Stanley Parable’s gameplay is simple. Most of the gameplay is just walking around, experiencing a somewhat dull office environment, and occasionally interacting with an object or two while a narrator (a non-playable character or NPC) narrates. The player repeats the “same” scenario again and again.

However, depending on the player’s choices and overall state of the game, the scenario will likely change in some way. Variations can include the narrator saying something different, a new opportunity or decision being available, or a different ending.

There’s no competition in The Stanley Parable. There aren’t many rules or even really a way to “win”. One might even call it an experience rather than a game.

While this may sound dull, its surprisingly captivating due to the witty dialogue and absurd paths you can take. Its genius is in its writing and cleverness of options. It has sold over a million copies and received its share of awards.

The AI Stanley Parable?

Now think about the current state of AI. I foresee AIs being used to help create games and experiences like these.

Consider this:

One AI trained to act and sound like a particular personality (for example, David Attenborough providing commentary) that acts as the narrator or as NPCs.
One AI trained to create game levels and add variations to levels (example 1, example 2).

Add them together along with a game engine and a solid theme. Then you have it: An infinite game or experience similar to The Stanley Parable made possible with the help of AI.

You could even use AI to generate music, images, textures, models, or environments. All of these could depend on the previous choices that the user makes.

The Physical Stanley Parable?

It wouldn’t be too hard to make a physical, real world version of The Stanley Parable these days. You could just add one or more things to the above list:

You could do a scan (perhaps using Gaussian splatting) of physical spaces and map them into digital space, then run virtual simulations in them.
- You could use projectors, augmented reality (AR) glasses, or hook up physical machines which the engine has access to have it respond in a physical way.
You could track / capture the motion of participants and create digital versions, even pretty realistic ones, that the engine could change or interact with.

An escape room would be an interesting use case—the experience could be different every time and have different levels of difficulty built in.

I’d love to experience something like that!

Crafting valuable content

Of course, a truly worthwhile experience takes time and good thought to craft. Simply using AI to generate more content does not necessarily mean there’s more value added. Even though the concept of The Stanley Parable is simple, it’s the execution that made it truly stand out as something valuable. That execution required immense time, effort, and creativity to create.

Some people are afraid that AI only creates meaningless content. I’d like to point out that there’s plenty of meaningless content that’s created by humans. Even (especially?) at companies with very large budgets and lots of people working on a project, they still create boring and soul-less creations. This can lead to dull games (some would say recent Bethesda games fit in this category) and movies (i.e. the Marvelization of cinema).

Arguably, there’s an even higher risk of empty or meaningless content when you use AI due to the lower cost of creating “new” content and the fact that AI can’t genuinely be as creative as humans can be due to its lack of understanding. However, AI can be a useful tool that decreases the amount of time that it takes to create something valuable or acts within preset bounds to create new and differing experiences that are still worthwhile.

I’m excited to see experiences like these where AI is used to enhance and add value to experiences.

If you’re creating something along these lines, I’d love to hear about it!

P.S. If you like this post, you might like my post about the ultimate wearable.

","excerpt":"

The Stanley Parable

Have you played The Stanley Parable? I highly recommend it if you haven’t.

"}]