An update on John's blog

It’s May 2021, time for a new site, right? Thanks for dropping by! If you’re curious, I have a bit about the site written up here. I thought my blog had gotten a bit stale, so I might as well make it completely static. Then, in putting together the static version of the site, I ended up writing a bunch of new posts. … and also realized that there were various other things hangout around which would be nice to include.

An update on John's blog »

Basic QMK custom keyboard (with Ubuntu, Arduino Pro Micro)

After getting QMK to work, I thought it would be useful to document how I got it to work. This is starting from zero, using a Ubuntu live booting USB drive. Hardware I’m using a basic Pro Micro dev board. It uses the ATMEGA 32u4, and supports USB natively, which is what we need. When getting these, make sure to get Micro-USB (otherwise you have the chonky mini-USB), and the 5V/16MHz version.

Basic QMK custom keyboard (with Ubuntu, Arduino Pro Micro) »

Bots that impersonate Googlebot

Anyone can act like a bot just by using the Googlebot useragent in a request. Sometimes crawlers do that to see what other bots might see. Sometimes it’s to circumvent robots.txt directives that apply to them, but not to Googlebot. Sometimes people hope to get a glimpse at cloaking. Whatever the reason, these kinds of requests can be annoying since they make log file analysis much harder. Motivation for this excursion:

Bots that impersonate Googlebot »

Privacy-preserving embedding of Tweets

Embedding tweets with the usual setup is a bit annoying. You end up using Twitter’s JavaScript, which takes a while to render the content. You probably have to do the GDPR dance for your users too (I honestly don’t know the details), since it’s possible they include cookies / trackers, etc. I made a “simpler” version which uses a preprocessor and Hugo Shortcodes to embed tweets as images. It’s easy to use while writing, the preprocessor generates images using Chrome / Puppeteer as needed.

Privacy-preserving embedding of Tweets »

Dynamic table of contents with Intersection Observer

My Hugo theme had a jQuery-powered dynamic table of contents. I thought it didn’t make much sense to keep the jQuery library (even a small version) if I’m just using it for that. So, out it went, and in went a JavaScript version with Intersection Observer. This is based on Ben Frain’s version, simplified a bit since we get the table of contents statically embedded. Code The full code (in layouts/partials/article.

Dynamic table of contents with Intersection Observer »

Check if a static site is moved correctly

The lazy person’s guide to confirming that a move to a static site worked. Overview: Download all relevant URLs from Search Console Convert download to a URL list Check for http to https redirects Check for valid final URLs Download all relevant URLs I’m picking one approximate source of truth - the URLs that received impressions in Google Search. This list doesn’t need to be comprehensive, just something more than I’d manually pick.

Check if a static site is moved correctly »

Extending Spotify's web volume slider

Having to choose between “too loud” and “too quiet” sucks. Unfortunately the Spotify web UI has an annoyingly short volume slider. Fortunately that’s easy to fix with a bookmarklet. Before: After: Drag this bookmarklet to your browser bookmark bar, and click on it to expand the volume slider. The code is pretty straightforward, it just changes the CSS slightly. Spotify volume Here’s the code in more understandable JavaScript:

Extending Spotify's web volume slider »

Nofollow with a bounce-URL

This is a simple (“simple” hah, it’s pretty complex for a simple annotation) implementation of a bounce URL for adding rel=nofollow support to a static HTML site. (More on other nofollow approaches) Overview We’ll modify 3 things: Add a /nofollow/ URL which redirects as appropriate Add the /nofollow/ URL to the site’s robots.txt. Modify the render-link.html code to swap in the rel=nofollow Passing mechanism: We’ll use URL anchors (/folder/page#anchor) to pass the destination URL.

Nofollow with a bounce-URL »

Nofollow strategies for markdown sites

I touched on nofollow for Hugo-sites recently, but thinking about it a bit more, I wonder if it needs some kinda of failsafe setup. What happens if Hugo stops injecting the link parser? What happens if I move to a different setup and forget the link processor? What happens if … (insert paranoia here) The goal of nofollow links is to avoid having search engines use them, but still to allow users to use them.

Nofollow strategies for markdown sites »

Mirroring a website for use on static hosting

If you’ve been following along, or probably not, since none of this is live yet, I’ve been moving some of my random old sites over to static hosting to simplify life. Static hosting doesn’t solve everything, and doesn’t protect your cheese, but it’s cheap & carefree (at least, until your hoster deprecates their static hosting). Finding new places to put static hosting is pretty straightforward too. I use Firebase static hosting for this site at the moment, that’s what this post covers.

Mirroring a website for use on static hosting »