brhfl.com

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)


Licensing

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.