A small learning

December 26, 2019

In the spirit of writing often, I just want to jot out a small tidbit that I picked up today. Anchor tags in HTML can have a directory relative URL. Example:

<a href="./an_image.png">

I found this useful today because I was working on a Next.js app and wanted to quickly assemble a URL that required multiple pieces of data from different APIs. It looked something like this:

/fruits/{type}/varietal/{varietalName}/description.html

I knew I wanted the URL to have a shape like:

/fruits/{type}/varietal/{varietalName}/an_image.png

This relative URL format was helpful for verifying the rest of my code worked as expected, while I could click the link in the browser to verify I got it right. I could delay having to fetch {type} and {varietalName} programmatically until I was ready to focus on that.

Ultimately, I decided not to ship the code with this relative directory URL. It seemed like unnecessary coupling to the location of the base file, description.html in the above example. A change in the location of one file or other shouldn’t require thinking about too much. Still, I was glad to find a new angle of looking at an old tool.