Font changes, hopefully no major issues

Short meta-post. Until 2019-08-20, I was using Font Library as a CDN for the two webfonts1 that I use on this site: Hack for code blocks and other monospaced needs, and Gentium for everything else. Font Library was, for at least a week, down, leading to upsettingly long load times. I temporarily just removed the appropriate <link>s, allowing the site to render in the user’s default monospace and serif fonts, respectively. Font Library is back up, now, but the downtime made me think about alternative solutions. I sure as hell was not going to subject my audience to Google as the CDN. And I realized, I don’t really have any need for a CDN, why make the additional external requests? Why worry at all about a third-party’s uptime? So, I am currently hosting the copies of Gentium and Hack that the site uses. I’m not entirely sure it’s the same version of Gentium2, so I may need to poke around, say, math posts and see if any glyphs are missing. Otherwise, I think this is the best solution and should be relatively problem-free.

I think it’s worth briefly mentioning why Font Library was down. Microsoft, citing trade restrictions, started banning Iranian, Syrian, and Crimean hosting on GitHub. The Bassel Khartabil Fellowship was one such banned project, based in Syria. My understanding is that Font Library was not directly affected by this, but having been built partially on Khartabil’s work, removed their site from GitHub in solidarity and in opposition of the policy. I mention this because it’s important. It was a bold move for Font Library to have that much downtime out of principle, and I applaud them for it. I would not be at all dissuaded from continuing to use their service, except… again the whole thing made me realize there’s really no practical reason for me to use any CDN for font hosting.

One final meta note, I have updated all posts of the category ‘lgbt’ to ‘lgbtqia’ instead. I think it’s just a habit of being of a certain age; I generally find myself defaulting to the four-letter initialism. But, there’s no reason not to try to be better and more inclusive, and this is such a simple update to make, it’s rather ridiculous not to.

Changing and updating the brhfl dot com template

It’s been a while since we had a good meta post here, which makes for a good excuse to perform a major overhaul on my template. In seriousness, this has been a long time coming. For starters, my site wouldn’t render on versions of Hugo past 0.47.1. While not a huge deal to keep old copies around, it only becomes more work as the versions roll by. None of the changes that I’ve made to support Hugo should have any visible effect on the site. But I’ve also been meaning to play around with revamping the navigation at the top. I was using this hacked-together ‘drawer’ type system to hide and reveal the categories, archive, and et cetera sections. I have preserved an archived copy of the home page with the old template intact for demonstration purposes. But I’m not doing that anymore, and let’s start there.

Site updates, supporting open source software, &c.

Haven’t done a meta post since August, so now seems like as good of a time as any to discuss a few things going on behind the scenes at brhfl dot com. For starters, back in November, I updated my About page. It was something I forced myself to write when I launched this pink blog, and it was… pretty strained writing. I think it reads a bit more naturally and in my voice now, and also better reflects what I’m actually writing about in this space. I also published my (p)review of Americana in November, which was an important thing to write. Unfortunately, it coincided with Font Library, the host of the fonts I use here, being down. This made me realize that I rely on quite a few free and/or open source products, and that I should probably round up ways to support them all. I’ll get to that at the end of this post, it’s a thought process that started in November, though.

HTTPS and categories

Meta-post time, as I’ve made a few site updates. Most notably, HTTPS works now. I wouldn’t say that Chrome 68 pushed me to finally do this, but hearing everyone talk about Chrome 68 was a good reminder that I was really running out of excuses. So, only this site as of right now, I’ll get around to fenipulator, the archive, and a couple of other projects that aren’t actually tied to my name shortly. My hosting provider, NearlyFreeSpeech.NET, has a little shell script in place that makes setting up with Let’s Encrypt an entirely effortless ordeal, with full ACME tools available if necessary. I still need to edit my .htaccess to force the matter.

A while back I also did some category overhauls. There are still quite a few categories that only contain a single post, but that seems likely to change in the future. I got rid of any categories where I didn’t really see myself adding more. I do have a tag taxonomy in place, which I need to start making better use of, for more detailed keywords. I planned to use this (plus categories, plus titles) for a sort of half-baked keyword search implementation, which I may still do at some point. I also ‘fixed’ the problem of categories showing up out of order by just making them all lowercase for the time being. It’s ludicrous to me that Hugo has no case-insensitive sorting.

Firefox fixes (et cetera)

I’ve been testing out Firefox Quantum recently, which is a post for another day, but it made me realize one thing and that is that this site right here barely functioned for anyone using Firefox. Either Quantum or the old engine (Gecko? Is Quantum a replacement for Gecko or a version of it?). Frankly, it’s much stricter than I would have imagined, and assuming that something that functions fine in IE/Edge and Chrome/Safari would also function fine in Firefox was… not a safe assumption, apparently. Here are a few things that I’ve fixed over the past few days, some related to Firefox and others not.

Post updates

I’ve realized that a few of the things I’ve written over the past year may have contained a nugget or two of information that was either ill-informed, or otherwise deserving of an update. For starters, in the posts Darwin image conversion via sips and Semaphore and sips redux, I talk about using Darwin’s sips command to convert a TIFF to PNG before running it through optipng. While this is a fine exercise, I have since come to learn that optipng will handle uncompressed TIFFs just fine, converting them to PNG and optimizing accordingly. sips is unnecessary, so long as I’m willing to temporarily use up the SSD space for uncompressed TIFFs.

Before those posts was Of lynx and curl, describing a few uses of those tools in tandem. Toward the end I mention going through a list of URLs, and writing out a CSV by using printf to output the URL before using curl to fetch the status code. For some reason, I had long overlooked that curl has a variable for the current URL as well, so the printf step is largely unnecessary. Going through a list of links to output a CSV of the form URL,Status Code can be achieved as for i in $(< links.txt); curl -o /dev/null --location --silent --head --write-out '%{url_effective},%{http_code}\n' "$i" >> status.csv (given that links.txt is a line-by-line list of URLs to check).

In other news, the first post I made on this version of this blog was the meta post, Licensing – dated 2016-07-30. So I’ve stuck with this thing for a year now, 75 posts, so far so good. I did recently upgrade from Hugo 0.16 to 0.24.1, which I have a post-in-progress about but all in all the upgrade went shockingly smooth. I definitely have no regrets about the move to a static site generator, and I would whole-heartedly recommend Hugo for anyone whose needs it meets. I have made a few other minor changes, like setting my Inline audio player to not autoload, and customizing the selection highlight color, but nothing major since my last round of Template updates. Next up is hopefully building a better archive page using new Hugo features, having Hugo generate the CSS files, and possibly a JSON feed.

Inline audio player

For the purposes of an upcoming post or more, and some other upcoming projects, it occurred to me that I might need to come up with a UI for incorporating audio samples in with posts. It needed to:

Little snippets of audio have different requirements from, say, video. In keeping with my requirements, for example, I opted to omit a mute button. The snippets are short and trivial enough that pause should suffice. In fact, I opted for only five possible actions: play, pause, 13 volume, 23 volume, and full volume. This boils down to two controls: one play/pause control and one three-position volume control. The result looks something like this weird ringing sound.

Audio is just linked from inside a certain class of span1. The link remains – so users who want to or who don’t have JS enabled or who don’t have a modern browser can simply download the file. Each control is inline SVG. The play/pause button is one SVG, with either button being shown or hidden via CSS. Likewise the volume control is one SVG element, and each of the three bars defaults to the ‘off’ state. Any given bar will have the class active, and the CSS darkens the active class plus the next bar plus the next bar. Each bar has an invisible rectangle atop it that spans that entire third of the SVG, to make for an easier target.

The code is obviously snatchable, and I may release it at some point, but it’s definitely not pretty. I… don’t code pretty. I have some other reservations as well, namely accessibility. I haven’t really used SVGs quite like this before, and I don’t really know how to make AT handle it sensibly. I guess if nothing else, the link is a guaranteed fallback. Unrelated, but I was pleasantly surprised to see it working in IE11.

Template updates

I’ve made a handful of updates to my Hugo template over the past few weeks. Hopefully the next step is to confirm compatibility with Hugo v0.19, genericize the template, and then release it — it’s at a point where it does enough of the things I want it to do right that I’m proud of it.

A while back (I suppose when I started working on wo), I added a new sort of Hugo taxonomy – series. Very tightly connected posts, hopefully only a large handful of posts to a given series, and any given post can only potentially belong to a single series (most won’t). This taxonomic declaration does a few things – namely adding the series name to the beginning of the post’s title wherever it shows up, and adding information about the series to the bottom of the post. Since I added this taxonomy, that information was just a link to the series page, listing its posts. Now, it’s an ordered list of all the items in the series, each one a link except for the current post. I’m pretty happy with it.

A minor update is that dates in post bylines now link to the respective month in the ‘archive’. Now, Hugo doesn’t really support pagination by date. There are a few hacked-together solutions out there for an archive page, and I won’t pretend mine is great. Really it’s always a full list of posts that hides everything but the month identified by the fragment specified in the URL. Some other changes related to this came out of the third recent change, regarding my drawers.

My panties drawers are how I refer to the little slide in/out menus in my top-level menu — categories, archive, and et cetera. The problem with these things is that I need to render each one in full to grab its unfolded height, but I obviously can’t do this in view of the user or else all sorts of nasty flickering will go on. I was hiding the entire body in CSS, doing these calculations, and then showing the body afterward via JS, falling back with a <noscript> to reveal anything. There’s no way to do this that isn’t a hack, but a hack that involves not having a page unless JS or <noscript> works is a pretty weak hack, and I’ve been meaning to bite the bullet and replace it with some CSS that shoves it way off screen (I already do this with my ‘Skip to main content’ link, hit tab).

In doing this, I tidied up a few classes and such that should make other drawers simpler — I had considered making the series list below the post a drawer, which I don’t think I’m still considering, but it’s nice that the drawer solution is more portable. Back to the archive page, I used to be able to do all of that while the body was already invisible and the drawers were doing their thing. I can’t do that now, so I’m using the same basic hack just on that page. It’s not ideal, but it’ll be fine until (hint, hint, dev team) Hugo can generate real date-based archive pages.

Game-in-a-post: Yz (or, on post-specific JS/CSS requirements in Hugo)


I’ve long believed in open licensing, in sharing, in letting content be free. Warhol, Negativland, Paul’s Boutique… Culture jamming produces new culture, it moves culture forward. I’ve always tried to open up my own work to the world to use as it sees fit. Creative Commons has been a valuable resource for years when it comes to readymade1 licenses for open cultural texts.