Made a small thing yesterday.

I’ve been seeing links to the uchū color pallette and Atkinson Hyperlegible font on Mastodon this past week and I wanted to give them a try on something. With little else to work on, I thought I’d spend yesterday evening building a small thing I’ve been wishing I had at work for a while.

My tasks at work has me looking up the two-letter country codes a lot recently. My goto is the ISO-3166-1 alpha 2 page on Wikipedia, but getting there involves a few clicks, a web-search, and a “find on page.” I wanted an easier way to get to this list, and a much easier way to filter it. I also wanted something that could work as a Vivaldi side panel, so that I can call it up while I’m looking at something else.

What I ended up building is this, which I’ve called 2LCC, which stands for Two Letter Country Codes.

Auto-generated description: A web page displays a country code list, featuring a filter option and countries listed alphabetically with their corresponding codes. Auto-generated description: A webpage shows a table listing country codes and names, including IO for British Indian Ocean Territory, IN for India, and ID for Indonesia, with Ind typed in a search bar. Auto-generated description: A selection list on a web page shows two-letter country codes along with their corresponding country names, with AU for Australia highlighted. Auto-generated description: A web browser window is open displaying a list of country codes on the left and several website shortcuts on the right, including Booking.com, News.com.au, YouTube, and eBay.

It was built using Hugo, which some might think may be a bit overkill, but Hugo does has some nice utilites for reading JSON data and running it through a Go template to produce static HTML. And that’s all this is: a static HTML page with a big table of country codes with a smattering of CSS and JavaScript. The JavaScript is just vanilla, and is simply used to power the filter, which basically walks the table, hiding rows which don’t contain the filter string. I was originally going to have the filter logic test the inner text elements of the table cells, but I decided to have the template spit out the country code as data- attributes instead. It’s easier to fetch in JavaScript using the dataset property list and since the values are spat out by the template in lowercase, it makes case insensitive slightly easier.

We’ll see how often I end up using this: there’ve been instances when I’ve over-index needing something for my job, only to build it and find myself using it less than I imagined. It probably wasn’t a great project to choose for trying out uchū colour scheme, seeing that I only ended up using two colours. But I’m happy with how the two colours I used turned out, and the the font looks great. And I do like that I took on more of the layout styling myself, rather than simply defer to simple.css.

Here’s a link to it should this be useful to you: https://2lcc.lmika.app/.