Short meta-post. Until 2019-08-20, I was using Font Library as a CDN for the two webfonts 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 Gentium, 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.
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.
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.
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.
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.
- The width/height of SVGs can’t be specified in
rem
units, which makes sense upon reflection. An SVG is really a standalone bit of XML that just happens to be acceptable to dump into an HTML file. I was thinking in HTML tidiness terms and declaring width="auto" height="13rem"
, but obviously something that hypothetically can stand alone has no master em to be relative to. It’s definitely not valid SVG, but I never thought twice about it since it seemed like a best practice from an HTML standpoint, and Chrome, Safari, IE, and Edge all handled it as expected. Firefox rendered at 100% width and the height to match, and those suckers got big. I temporarily slipped in a JS patch, but I think I have now edited every post to use ems instead of rems.
- My SVG-in-a-data-URI-in-CSS didn’t work, because I wasn’t properly percent-encoding the data (notably, the hashes and percent signs). This, again, makes perfect sense but I hadn’t really thought about it because WebKit-based browsers didn’t care. This also failed in IE/Edge, I just never noticed, largely because I had only made use of SVGs in this way in one post – A chessboard for pebbling. Luckily, none of the browsers tested seemed to care about spaces. Also, protip: do
:s/%/%25/g
before :s/#/%23/g
.
- My drawers got stuck, or, you know, just didn’t work. Those drawers up top, when you click ‘categories’, or the like. They didn’t work because I was using
addRule
and I guess insertRule
, while far more obnoxious is also the more ubiquitous solution. I temporarily had a wedge in there to conditionally choose between the two, but I think that only matters for very old IEs and… I have to draw the line somewhere. Unfortunately, the drawers are very hackish no matter what I do; injecting rules into stylesheets is not something I would recommend, but here we are.
- Fixing the drawers broke the drawers on iOS. Which was super frustrating,
insertRule
should have been pretty much universal. I had never attempted to use the iOS web inspector before, and there is a reason for that: it is a fucking terrible experience. You have to use Safari on the phone, you have to tether the phone to your Mac, and then you have to use Safari on your Mac. I don’t like doing any of these things, and juggling them all while trying to get work done is, well, fucking terrible. Anyway, turns out iOS’s version of WebKit doesn’t like injecting CSS at index 0 for some reason. So, now I do index 1, who cares, does not matter. Index -1 is supposed to place the rule at the end, so I thought, but it overflows on everything I’ve tried it on with ‘the end’ being like 4 billion elements deep. Again, don’t care.
- So now the drawers work, but still have a weird graphical glitch which isn’t new, I just haven’t solved it yet – on iOS, the text is very large when you open up a drawer. The drawer is sized such that the text is the right size, and on Chrome (but not Safari) it jumps back to the right size after scrolling. Very odd.
- Unrelated, but I patched some other things in my Hugo template while I was meddling, like having a really broken process for
<meta name="description">
before, which I probably half-assed because when I think about meta tags I start thinking about SEO, and then I vomit. But, I tweaked this, and hopefully I’ll have some reasonable descriptions in the Googleverse at least.
- I also started fixing some minor issues with some posts, primarily capitalization of categories, since the drawer doodad lowercases them anyway. But Hugo inexplicably has no inbuilt alphabetical sort, and therefore sorts all uppercase letters before all lowercase letters. You can see this by opening the categories drawer up top and seeing ‘svg’ before a bunch of ‘a’s. I need to make a decision on how to handle this soon – lowercase all of my categories, sacrificing semantics for aesthetics; or use an awful fucking hack. I mostly included this list item for the sake of not losing that link.
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.
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:
- Use HTML
<audio>
elements
- Be minimalist and unintrusive
- Thus, fit inline with text
- And have very few UI elements
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, 1⁄3 volume, 2⁄3 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 span. 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.
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.
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 readymade licenses for open cultural texts.