Chris McLeod's blog

Generate a Markdown List of Open Safari Tabs with an iOS Shortcut

2024-02-18T21:06:00Z

I mentioned in my last post that I created an iOS Shortcut to automate turning the list of tabs I have open in Safari into a Markdown list. Ryan asked if I could share that shortcut. I was always intending to, so here it is for everyone to make use of:

Get Open Tabs as Markdown

By way of explanation of what the shortcut does:

Get a dictionary of all open tabs from Safari (this doesn’t include Private Browsing or tabs in a “collection”)
Loop through the dictionary.
- For each tab, format the page title and URL into the Markdown format for a link, prefixed with "- " to make it a list item.
Combine the items in the returned dictionary into one blob of plain text, separated by new lines.
Copy the resulting text to the clipboard.
Open the Share Sheet, so you can “share” it to any app you choose.

You don’t have to be in any particular app to run this Shortcut. You can run it standalone from the Home Screen, Shortcuts app, or add it as an action in the Share Sheet.

Open Tab Dump: Mobile Edition (2024-02-18)

2024-02-18T17:13:00Z

I had a lot of tabs open in Mobile Safari. It was kinda getting a bit overwhelming to have to scroll through them all to find a particular one, or if I already had something I was about to search for open.

So I figured I’d save a list of them all somewhere, just in case, and wipe the slate clean on my phone. The list below are the ones worth sharing. I even created an iOS Shortcut to help automate creating the list - so who knows, it might become a regular feature!

Cool Blogs, Blog Posts, and Where to Find Them

Miscellaneous

Blogkeeping

2024-02-16T13:20:00Z

A list of the little online jobs I’ve been knocking off my to-do list this week:

I moved Mastodon instance

I’d been on Mastodon.online for a number of years, but always intended to move off of it at some point - get onto a smaller, less generic server. I took advantage of omg.lol’s Valentine’s Day sale to jump over to Social.lol, as I noticed that’s where a lot of the accounts I was recently interacting with were based and it had a good vibe. Plus - support a cool Open Web service!

The switching process was “interesting”; the Mastodon.online side of it wasn’t working initially, so I had half the steps done at first and had to complete things the following morning. I also did not expect the “follower migration” step to bombard me with “Account followed you” notifications, as it was a migration, but it sure did! Otherwise it was pretty simple. The hardest part was probably re-configuring my cross-posting.

But it’s all done now. I’m using it as an opportunity to reset what and who I follow, so if I was following you before, and haven’t immediately followed you back, it’s because I’m manually adding people instead of importing the export file.

My micro blogs now have a consistent look and feel

It had started to bug me how wildly inconsistent my micro blogs were looking. In part this was due to me picking a default theme on a whim when setting up the sites in Micro.blog, but I never went back to fix it. Well, I finally found the oomph to do it.

I used Matt Langford’s Tiny Theme for Micro.blog because it has a really neat “microhook” system to make customising the templates easier without making upgrades harder. Then I took the styles from my main blog and mashed everything together until it looked like it was somewhat coherent to look at. The typography and “look and feel” should at least be familiar enough, even if it’s not 100% the same across platforms. I can make further tweaks some time in the future.

Buy Me A Coffee?

In 20+ years of blogging I’ve never put up a paywall or asked for subscriptions. I’m not sure I’ve ever even put up ads. I’m not about to start now. But I have setup a Buy Me A Coffee page out of curiosity, as I’d seen many of the people I follow link to similar platforms from their sites. To be clear, I don’t expect anyone to donate anything, ever - but if they do, I’ll be grateful, and I’ll put it towards the next bag of ground coffee from the local roasters.

Links to the Buy Me A Coffee page will be displayed at the bottom of blog posts on the web, across all my sites, and the site footer of this site, but won’t appear in feeds.

Things I'm Enjoying Lately

2024-02-14T16:54:00Z

I’ve been planning to write a general “stuff I’m enjoying recently” post for a while, and my birthday seemed as good a time as any to do it 🥳🎈

This post is largely media-centric, so there are a lot of YouTube embeds below. I might do some more posts like this on focussed on things I’m enjoying in other areas.

Gladiators (2024)

The new “reboot” of Gladiators, that’s showing on the BBC Saturday evenings is so much better than it had any right to be It’s been so much fun to watch. It’s got many of the same contests, similar-but-updated presentation, and - most importantly - the same music. I’d say the main difference between the reboot and the original is that in the reboot they seem to realise how silly the premise is and lean into it slightly.

Gladiators (1992)

Watching the reboot triggered some nostalgia for the original show and naturally pretty much all of it is available on YouTube, in all it’s low-res 90’s big-haired glory. We watched an episode with some 13 year olds who enjoy the modern version, and they were shocked to see just how little had changed (other than the haircuts and outfits)

Internet Friends - Knife Party

Every so often the algorithm in Apple Music reminds me this song exists and it becomes an earworm for several days/weeks. Warning for the embedded version below - it’s sweary.

The Build to WrestleMania 40

I dip in and out of Professional Wrestling every so often, just to see what’s happening. The best time of year to do so is January through to March/April, as you have the Royal Rumble kicking off the “road to WrestleMania”.
This year has been chaotic and messy, but oh so good. It would take a great many more paragraphs to recap all of the threads and story beats in the mix (there are many years of layers to peel back), but the headline right now is Dwayne “The Rock” Johnson going full-on entitled Hollywood villain because he wasn’t able to swoop in and just take the marquee main event championship match from the rightful challenger and current fan-favourite Cody Rhodes.

Haylo Haley

One discovered through my partner’s YouTube recommendations. A Gen-Z Youtuber putting the world to rights over the really ridiculous “trends” coming out of TikTok. I’m old, I’m not on TikTok, so having someone break it down for me with the righteous fury of youth has been super enjoyable.

Nami’s Life

Another random recommendation on my partner’s YouTube account. It’s the vlog of a woman living in Japan, but there’s no talking, and you never see their face. Unless you turn on captions there is absolutely nothing to tell you what’s happening. Largely focusses on cooking and cleaning. Oddly relaxing. I’m not really sure what else to say about this, as it’s like nothing else I can think of.

More Words on Webmentions (and Backfeed)

2024-02-11T13:42:00Z

Webmentions aren’t actually the problem

After my earlier post on webmentions, Cam kindly reminded me that the bit I felt uneasy about is actually backfeed. To quote the IndieWeb wiki:

Backfeed is the process of syndicating interactions on your POSSE copies back (AKA reverse syndicating) to your original posts.

It’s interesting reading the discussion section on the wiki page, as it acknowledges some of the concerns that have come up of late, but ultimately, skims over them.

The list of “pro” reasons for backfeed mentions making it easier for people to reply, particularly those who are less technical. However true this might be, I believe it’s probably equally true that the less technical someone is the then less likely they will understand why their words are appearing on a different site. Their expectations^[1] are almost certainly “I replied/liked/whatever on Site A (more likely App A), so it’s not going to appear on Site B”. Is it right we’re^[2] subverting these expectations in an effort to make blogs and personal websites “more social”?

Aside from the privacy and implementation concerns noted in the last post, Cam noted in his own post that another problem backfeed can lead to is context collapse. This isn’t a problem I have much experience with (so can’t really talk to it) but I thought it worth noting here for completeness.

This is not a new discussion

Terrence wrote about the ethics of this topic in 2022. His concerns were/are pretty much identical to my own. Bix wrote similarly on the integration of ActivityPub into everything just last month. Sebastian wrote an in-depth look at the problem - particularly through the lens of GDPR - back in 2018! There will be many more posts out there about the issues - and no doubt, potential solutions - to the problems with backfeed as a concept. If you know of any good ones, please send it my way on Mastodon.

It’s on us as webmasters

(Yeah, I cited the deep magic. Substitute for “site admin” or “site owner” if you prefer.)

How we handle the issues that have been raised is ultimately on us: the people who build and run the websites who integrate these features. We have to be more thoughtful about these things rather than rushing to “oh, cool new technology”. I didn’t really pay the issues much heed when I first implemented backfeed in 2019, but I should have.

There might come a day when users expect their details, words, and actions could show up on other sites they weren’t aware of. ActivityPub and other forms of the Fediverse and federation might herald that future. But I don’t think we’re there yet, and I’m not convinced everyone will buy into it. I’ve seen enough threads on Bluesky where someone reacts with abject horror when they learn that basically everything on Bluesky is public, and similar threads when someone learns just how far public posts on Mastodon can reach.

By all means send and receive webmentions. Even backfeed interactions onto your site. Just be mindful of how you do it and whether displaying all the data you receive is the best thing to do.

A quick clarification: I ❤️ Brid.gy

I wrote my last post pretty quickly and late at night, immediately before going to bed. After a re-read this morning I felt that it occasionally came across as me having a go at Brid.gy. That wasn’t my intent; I admire the technical feat of what Brid.gy achieves and could achieve in the future, and I respect that it is an open service helping to link disparate parts of the internet together, for free. My issues really lie with the consumption of what Brid.gy provides, rather than Brid.gy itself.

Yes, this is a massive generalisation, but I like to think it comes from a place of experience. ↩︎
I’ll use “we” and “us” a fair bit in this post. It’s largely the “royal we”. As I’ve said before: I ain’t the boss of you. ↩︎

Some Words on Webmentions

2024-02-11T00:11:00Z

Webmentions are one of those things I like the idea of, but not always the practicalities of - particularly in the extended IndieWeb sense of it. The idea of sending and receiving Likes and other interactions to/from other websites is pretty cool in theory, and helps bring that sense of community that is sometimes lacking in the modern version of the blogosphere. Time was you’d get a trackback/pingback from a response to a post you’d written, go check out the response post on the author’s site, then continue the conversation on your own blog. This back-and-forth was key to building up ties within groups and sub-groups on different topics. Webmentions are, at their core, just an iteration on the core technology behind that.

However, there are pretty significant problems with Webmentions as they stand. Wouter lists a bunch of issues he came across, and I can empathise with all of them, even if I haven’t experienced each and every item on the list. The points about microformats and Brid.gy (4 & 5) definitely hit home.

Microformats is by far the biggest pain in the arse (in my humble opinion) to get right if you want to use the IndieWeb formats. Not insurmountable, but definitely fiddly. When I recently implemented my Bookmarks page, getting the requisite microformats just right to show as a “bookmark-of” took by far the longest time of all the work involved. And absolutely, Brid.gy far and away accounts for the vast majority of webmentions I receive; I guess it’s to be expected when it pulls in all the interactions from social media for you.

However, Robb hits on the biggest potential issue with the way most sites implement webmentions: privacy. It’s something I first noticed on an old version of my blog: if Brid.gy (or another bridge service) sends social media interactions to your site, and your site is setup to save and display those interactions, then the person interacting with you has - probably inadvertently - had their details and words published to your site. They then lose all control over what is or isn’t displayed. If they should later delete their interaction it is highly unlikely in the current implementations of the various bits of software involved that the deletion will be replicated back to your site. I had more than one instance where a Twitter mutual were shocked to discover some of their replies/likes at the bottom of some of my posts. Most didn’t mind, but a couple really didn’t like it so I went ahead and deleted the data for them manually.

It was these interactions which led to me not adding webmentions at all to this site for a long time after it went live, despite wanting to. Even now I can send and receive, nothing is displayed anywhere on the site itself.

So what do we do about these concerns around webmentions? Or rather, what am I going to do^[1]? Well, I still hold to the promise of webmentions as a community building tool. I still want to receive them, even if the ones I care about get drowned out. They let me know where people are linking to my site from, and to an extent, what posts have resonated. In that vein, I still plan to send them - to let other people know when I link to them - though I might not spend any time sweating to get the microformats right. But what I’m not going to do is display my webmentions publicly. I had been considering it for a while, but the recent discussion has made up my mind against it. At most I might display a simple count of the different types of webmention a post has received.

To be 100% transparent though: for my own convenience I am planning on adding a private dashboard that will display webmentions in a nice UI, but for my eyes only. Azure SWA lets me lock particular sections of my site behind role-based authentication, so I will be taking advantage of that. If only because the RSS feed from webmention.io isn’t always the clearest thing to read. One feature I’m definitely implementing is a filter to let me hide Brid.gy webmentions and focus on webmentions from blogs.

I ain’t the boss of you, so you do what you will. ↩︎

Adventures in Containerising a Legacy PHP App for Azure

2024-02-06T22:27:00Z

Context

For the last 18 years or so I’ve been looking after a small, bespoke, PHP application for a small local business. It started off as a “hey, can you help someone I know with a problem? There might be something in it for you…” at my then-employer and all these years later it’s still going.

It’s best described as a “seasonal app”; once a year I’ll be asked to do a little bit of work on it - a combination of tweaks and data loading, then it will be used moderately for a few months. Sometimes during that time I’ll need to provide the occasional bit of support or bugfix. The owners don’t really think of the app outside of this timeframe and the “budget” is essentially operating expenses and a kickback to me for my time. That is to say, the core of the app is largely the same foundations as when it was first written.

the app has been chugging along on a succession of DigitalOcean droplets for most of this time, somehow needing a more powerful spec every few years despite not becoming any more complex of an application. However, the major concern has been the increasing amount of hoop-jumping needed to keep it running on a new server. Without any real upgrades to speak of, it’s running old versions of the frameworks and libraries it’s built with, and these pretty much flat-out don’t work on PHP 8+. Without the time or budget to migrate to newer frameworks or fix the bugs, this is a major risk for future server moves. After a painful database crash last year, that nearly wiped out everything during “peak time” I was looking for a way to preserve the app as it is now, but allow me to run it in a less fragile manner.

On top of this was a need to setup a proper local development environment that was consistent with “prod” and ran on Windows.^[1]

So, what’s a aging, put-upon, web developer to do with a legacy application needing modernised, and little to no budget or time to do it in? Well, this sounds exactly like a scenario straight out of a “why you should use containers” sales pitch.

Act 1: Running Locally

I figured the best way to start was with a working, containerised, local environment, then adapt that to go into production. Ideally I’d split things up so there was the entry-point to the app (NGINX) in one container, and the processing part (PHP-FPM) in a second container. Locally I’d also need a MySQL database container, though the plan was to have a managed database in prod. To begin with, I set my initial project structure:

.
├── conf
│   ├── nginx
│   ├── other
│   └── php-fpm
├── data
├── src
├── docker-compose.local.yml
└── docker-compose.yml

conf/* holds any configuration files I need to add to the containers
data is where MySQL data will be persisted
src is where the application source code will go
the 2 docker-compose files were placeholders; docker-compose.local.yml is for the local environment.

Getting the local environment was, ultimately, reasonably straightforward. The NGINX container ended up being the official, Alpine-based, image. For PHP-FPM, I needed to create a custom Dockerfile based off an official PHP 7 image, then add a few extensions and PHP Composer. Then wire it up in the docker-compose file with suitable environment variables. The resulting file ended up more-or-less like this (some details changed to keep it anonymous):

version: "3.8"

services:
  web:
    image: nginx:alpine
    ports:
      - "8080:80"
    volumes:
      - ./conf/nginx/site.conf:/etc/nginx/conf.d/default.conf
      - ./src:/var/www/html
    container_name: dev-nginx
  db:
    image: mysql:8
    environment:
      MYSQL_ROOT_PASSWORD: mysupersecurerootpwd!
    ports:
      - "3306:3306"
    volumes:
      - ./data/db:/var/lib/mysql
    container_name: dev-mysql
  php:
    build:
      context: ./src
      dockerfile: Dockerfile
    volumes:
      - ./src:/var/www/html
    environment:
      CI_ENV: development
      CI_DB_HOST: db
      CI_DB_USER: local-user
      CI_DB_PASS: local-pwd
      CI_DB_NAME: dev_web
    container_name: dev-php

No, those passwords aren’t the real thing 😉

The gist of this configuration is that it runs the services, using volumes to link certain files or folders into the containers as necessary to enable things to run: configuration files, data folders, source code. Linking the app source code into the containers like this means I don’t need to rebuild the containers every time I make changes - everything will update in real time. I can run the application and edit it. So far, so good! This might be easier than I feared! I wonder what happens when I try to deploy it?

Act 2: Attempting Deployment, aka, The Clown Show Begins

Obviously I couldn’t deploy as-is - where would the source code go? Changes will be needed.

At this point I should explain what my deployment plans were: you’ll have guessed from the title that Azure is involved, but more specifically, my initial plan was to use the Container Apps. The idea was to deploy an NGINX container as the main app container, and have PHP-FPM as a supporting container. Each container would be packaged up with a copy of the app source code so that requests could be routed and processed as required^[2]. Microservices, yeah!^[3] I knew running multiple containers as part of one Container App “app” was possible, because I’d seen all the options when I’d created some other container apps.

With this plan in mind I created some new Dockerfiles to package up the required configs and source code for each container, built the images and pushed them up into an Azure Container Registry. So far, somewhat so good. Let’s try to spin up the Container App…

My friends: I had not understood how Container Apps works. Communication between multi-container setups is possible, but only using HTTPS or Dapr. Not over, say, port 9000 for FastCGI connections. However, I did not realise this at first, so spent approximately 6 hours over 2 evenings trying to make it work: tweaking configurations in Azure and in the containers, rebuilding and pushing new versions of the images. It was exhausting and frustrating.

Then I tried to run the multi-container setup in the regular App Service - it’s possible to give App Service a docker-compose file and have it deploy everything for you, and it runs somewhat similarly to on a regular computer. Only App Service just flat out refused to deploy the containers, so I tore it down and abandoned that plan because I was starting to feel quite aggravated.

It was at this point I realised I was going to have to bundle everything into one container image and run that instead of the two-container solution.

Act 3: Return of the Clown

So, a single container it is then. That’s not too difficult to pull together? And it wasn’t, really. Took keep things as small as possible I started with the PHP:7-fpm-alpine^[4] image, added the dependencies I needed, added NGINX, added the source code and configs, tested it with the local database, and it… worked! The app loaded, features worked, and generally everything seemed A-OK.

So I decided to test with the Production database, an Azure MySQL Flexible Server. MySQL on Azure requires using an SSL connection, so no problem: I downloaded the relevant certificate, added it to the container build, configured the connection in the app and started everything up again.

Things didn’t just break, they broke so badly PHP would segfault the instant it tried to connect to the database. No error, no logs, just no response. Not just in the app itself, oh no; I tried manually connecting using the PHP interactive environment (php -a) bypassing any library interference and still it would crash and burn. Delving into the logs using dmesg | grep segfault | tail -n 10 revealed the problem was “error 4 in libssl.so.1.1”. Noting this library wasn’t in the list of dependencies I’d added to the Dockerfile, I initially tried explicitly installing it and rebuilding. No dice.

After a lot of ~~googling~~ duck-duck-go-ing(?) I learned that there might be an incompatibility between the version of libssl linked to some of the libraries I was using and other components of Alpine. By this point I was tired, wanted the whole ordeal over with, and I didn’t have the energy to start recompiling libraries left and right, so I stopped paying attention and decided to give up on an Alpine image.

Act 4: Old Faithful To The Rescue

Debian. Good old, reliable, Debian. It might be old, uncool, and slightly bigger than we’d like (to all three of which I can relate) but it’s rarely let me down.

Starting the consolidated container image all over again, I went with PHP:7-fpm as the base, which is in turn based on the not-slimmed-down version of Debian. I briefly tried the slim version but it threw an error when running a simple apt-get update so I immediately gave up on the idea. After a bit of tweaking to get config files in the right place - because of course different images have different ideas of where things go - I rebuilt and run the container locally again and got an application error! Callooh! Callay! It was progress. I can work with an application error, as it means there’s something I can fix.

Act 5: The Final Boss

The problem was thus: the application was seemingly opening 2 database connections; one was successful, the other was failing to use SSL. I tracked this down to the main framework using its’ own database code (using the MySQLi driver) for session management, and all other database operations going through an ORM which used a separate connection. After a bit of trial and error I figured the ORM could be so old it might not have implemented the necessary bits and pieces to make an SSL connection. But in investigating this I discovered it was at least possible to pass an existing PDO-based connection into the ORM and it would use that. The docs suggested it would have reduced functionality but core features would work - which was all I needed. After a bit more spelunking I determined that 1) it was possible to use a PDO driver with the main framework (and that it still worked with SSL), and 2) that once setup I could access that connection and pass it to the ORM.

Act 6: Deployment, But For Real This Time?

With the necessary code changes made, and the container rebuilt, it was time to try deployment again. A new Container Apps instance was setup, all the secrets and other configuration entered, and the image deployed. After a moment for everything to spin up I checked the auto-generated URL to see if it worked - SUCCESS!

I’m not going to lie, I punched the air at this point, it had been such a slog. Cautiously I added the custom domain to ensure it all still worked under a new URL. Thankfully it did, and finally the app was containerised and fully switched over to its new cloud-based home.

Container Apps runs with a serverless model, so instead of paying a flat fee for the app to go unused during “off-season”, like I was with the droplet, it will instead spin down after it’s not used for a while. Spinning up again seems to take ~20-30 seconds on the first load, but that’s acceptable enough, and it’s plenty fast once it’s up and running.

Deploying any future bug fixes will be a case of running a few commands to build a new image, push it to the registry, then create a new revision in Container Apps. This can all be done through the CLI, so I should be able to script and automate it to some degree.

While it was - frankly - a pain in the arse to get this app containerised, I’m glad I got it done. The new home on Azure gives me some real benefits above the two mentioned above, and maybe buys some time to get a fully modernised version in the works, as I won’t have to worry about aging out of compatibility any more or patching up the aging infrastructure any more. In an ideal world I’d have done this exercise sooner and used this year to start modernising it properly - but hindsight is a wonderful teacher!

Look, I’m not proud of how much I’ve been winging it with this app for the last couple of years. ↩︎
This should probably have been my first clue that this approach was not the right one. ↩︎
No, this isn’t actually Microservices. ↩︎
I actually started with a base Alpine:latest image but had to jump back so many versions just to get PHP 7 libraries installing that I figured I was as well using the official PHP image even though it’s a year old. ↩︎

Visiting Websites

2024-01-30T09:55:00Z

I love my RSS reader and the mountain of feeds it lets me read/skim on a daily basis. But some recent discussion gave me pause on how I use RSS, and made me reflect on whether it strips something fundamental from the web: visiting cool websites.

Evan wrote about this in November:

I think RSS is great, but I sometimes feel like it’s at odds with one of my favorite things about the web. For one thing, I see less of my friends’ cool websites. A lot of the websites in my feed reader are really nice to look at. Some of their owners do periodic redesigns which are fun to see. I feel like I’m missing out a little on these lovely personal websites because I nearly always interact with them through my feed reader, which flattens all of the personality into a minimal, legible view.

Greg picked up this idea yesterday:

this seemed like a crazy idea, but the more I thought about it, the more it made perfect sense. I read 99% of the blogs I follow in my favourite app Matter. Which is great in that it boils websites down to the basic content and makes it easier to read. However, it removes all personality and expression from personal websites.

As an aside, I’d argue that the prevalence of “mobile” reading experiences also do a lot to strip the personality out of websites too, not just RSS or Read-It-Later services. It’s hard to be whimsical when you’re just a single screen-wide column of text. Maybe that’s just me?

Habib also wrote on this topic, and how he uses a feature in Reeder to get around this problem:

As much as I enjoy the Reeder reading experience within the app, I enjoy reading the content even more on the publisher’s website or blog. Thankfully, Reeder makes this process easy; once I hit the title of the post from the list it launches the content, and a simple swipe right to left launches the content on the publisher’s site using the In-app safari browser. Depending on the article — if long-form posts — I can tap on the article title link to launch the content in the default mobile Safari browser, bypassing the need to swipe right to left.

For myself, I know I’m guilty of just chucking a site into Inoreader and forgetting about visiting again unless I need to find something so deep in the archives that I can’t get it through RSS any more. I’d like to change that behaviour over time. I remember when we would “make the rounds” to the sites on our blogrolls or in our webrings. In part this was because there were just a lot less sites to follow/visit in those days, and also in part it was because you had to go to the site to leave a comment or similar to give your thoughts to the author. You could write a post on your own site but there was no guarantee they would ever see it.

Regardless of why you had to visit, you did, and it meant you’d see all the (frequent) redesigns, the new widgets and experiments, the new links in the sidebar you could explore after your visit was concluded.

I feel the nostalgia is pulling me away from the point I was trying to get to, so let’s try to get back on track!

I want to change this behaviour of only viewing sites through the lens of a feed reader (or similar). I want to visit sites more routinely when they are updated. As Evan put it:

I wonder what the alternative looks like. A tool that helps you remember the sites you like to visit so that you can browse them at your leisure, but that doesn’t create a commitment to read—or at least look at—absolutely everything that is published on all of those sites.

I don’t know what it was, but this dragged FraidyCat to the surface of my memory. FraidyCat is an alternative take on following websites, created by Kicks Condor. It’s exactly what Evan describes: It keeps track of websites you want to follow, lets you see when they were last updated, but crucially for this purpose links to the website instead of loading the feed content. If you want to read the post then you have to click through. There are no notifications to make you read everything to clear a badge, and you can organise sites by how important they are to you.

I’ll admit that I never quite managed to “get” FraidyCat when I tried it out a few years back, but I’m going to give it another, more concerted try. I need to figure out my organisation structure and import some sites into it. It still might not stick. But if it gets me visiting websites again, and not only reading their feeds, then it will have been a worthwhile exercise.

Adding a Bookmarks Page

2024-01-29T17:00:00Z

I mentioned over on The Underground that one thing I wanted to add to my site, to “do more” with it, was a space to collect bookmarks and fun links I com across. Well, I’ve added a quick and dirty “first draft” of the feature over on the new /bookmarks page. It’s even got its own feed you can use to follow along at home.

I’d had the idea for the page a while ago, but the real motivation to get it done came with a recent push to get more people sharing links they’d enjoyed on their website more often (See, for example: Cassidy, Hidde, and Joan). I wanted to have a way of sharing these links that in a way that didn’t need me to dedicate a whole blog post to them^[1], giving me the opportunity to be more spontaneous about it.

Fun(?) Technical Notes:

When I add a bookmark it should trigger a webmention to the page in question (if it supports webmentions), and if the other site supports microformats then it should show up as an IndieWeb “bookmark-of”. This was by far the most fiddly bit to get right.

In terms of adding bookmarks - I’m using a combination of IndieKit and a “bookmark on my site” iOS shortcut I made using the guide I wrote a few years back: IndieWeb Sharing with iOS Shortcuts . Hurrah for blog archives, otherwise I’d have had to figure this out again from scratch! I have a few minor niggles to iron out, but adding bookmarks is overall pretty easy for me to do.

I am thinking about automating some sort of “weekly round-up post” that will include bookmarks + other content I add to the site. But not yet, as I don’t quite have everything in place as I’d like it. ↩︎

Generative AI for Blogging: Revisited

2024-01-26T09:34:00Z

About 6 months ago I did an experiment with using generative AI tools to write blog posts. It was part of a wider “understand if this stuff is useful and what its limitations are” exercise I needed to go through for work; it’s a hot topic and I needed to understand it - which involved using it, basically. I usually learn best by doing

In the end I wrote 3 posts using “GenAI”, using a couple of different methods (ranked in order from least satisfying result to “most satisfying”):

“AI take the wheel” - input a prompt, look at the output, refine the prompt until it was closer to what I wanted. Make slight tweaks to spelling and grammar. Post. This was the quickest way of using the tools. Partly done this way because I was in the process of leaving the cinema.
“Fill out this first draft outline” - write my own outline with some first draft points, then have the tools rewrite and expand on it. Again, make minor edits for clarity/remove Americanisms. This one was sorta-okay, but lacks polish and has a weird, disjointed tone and writing style.
“Let’s collaborate” - the most involved process, taking much, much longer to write than if I’d just done it myself. More details in this post: How I use Generative AI to help write blog posts, which is actually the post which falls into this category.

And then, I promptly (albeit subconsciously^[1]) decided using AI to help write blog posts wasn’t really for me, and I’ve never used it this context again, other than to check a couple of technical points in an upcoming post. It’s okay for search-like applications, so long as you make sure to confirm the citations say what it claims they say.

When I was importing my historical posts I made a point of re-reading a lot of my own posts, which ended up including the “AI-generated” posts. They stood out like a sore thumb, with the exception of the “collaborative” one. Honestly, reading them now makes me itch. They quite clearly aren’t written by me, and while I don’t regret doing the experiment or trying out the technology, I do regret publishing them.

For the one that is okay-enough it doesn’t invoke an allergic reaction: was it worth it? Possibly, but probably not. It took hours to put that post together - far more than I would normally spend on something of a similar length^[2]. Part of this could be put down to still being still not fully familiar with the inner-loop of writing with AI-assistance - and thus doing things in a sub-optimal manner - or by having to check technical details, but a damn lot of it was because I had to rewrite so much stuff. I’ve been writing for myself for long enough I have a process I go through, as imperfect as it may be, and bringing a collaborator into that process was a chore.

So, as it stands I am unlikely to be using generative AI tools to write or co-author my blog posts going forward. Of the 3 posts that were written in this way, I don’t feel it’s right to delete them now I’ve referenced here, but I am going to label them as having used AI and point to this post by way of explanation. I’ve seen people add “written by a human” to the end of their blog posts, so it feels only right to do similar for the inverse. If I do ever consciously involve The Machine again, I will make sure to label those posts too.

Honestly, I hadn’t really realised until today I was no longer using this thing I’d written a lengthy post about using. ↩︎
The latest post on The Underground is ~50% longer and took around about two-thirds of the time to write, for example. ↩︎

Sending Webmentions after Deploying to Azure Static Web Apps

2024-01-21T10:51:00Z

I recently switched this site from Netlify to Azure Static Web Apps (SWA). For the most part it just worked - setup the site in the Azure portal, switch the DNS… done. You probably didn’t notice.

There were a couple of things which didn’t immediately work because they were set up in a Netlify-specific way: HTTP headers, redirects, and sending webmentions after deploying a new version of the site. HTTP headers and redirects can be handled in the SWA configuration file, so thy were easy enough to fix. Webmentions was looking to be a bit more tricky.

On Netlify I was able to create a post-deployment event which called a webhook. This action called Remy’s Webmention.app service to scan the site feed and send to any discovered webmention targets. Unfortunately, SWA doesn’t have an obviously comparable feature, so I thought I was going to be stuck webmention-less for the foreseeable future.

Thankfully, Sophie posted a guide on how she sends webmentions from her static site. This reminded me that Remy also provides a CLI version of the Webmention tool, as an NPM package, that doesn’t rely on the web service. And then, to top it off, she posted how she deploys her Eleventy site to Neocities and reminded me of something else that let me put everything together: GitHub Actions.

Hooking SWA up to your GitHub repository creates a GitHub Actions workflow file in your repository. This file handles the building of your site and deployment to SWA. GitHub Actions workflows can run commands, so I could use the CLI webmention tool after the auto-generated build-and-deploy step. All I needed to do was get the configuration right.

After a bit of tinkering with the CLI running in “dry-run” mode, the addition to my workflow file looks like this:

- name: Webmentions
        id: webmentions
        run: |
          npx -y @remy/webmention dist/feed.xml --limit 1 --send

Other than this addition, my workflow file is the default generated by the Azure portal. For context, my complete workflow file now looks like this:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - develop
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - develop

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: $
          repo_token: $ # Used for Github integrations (i.e. PR comments)
          action: 'upload'
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: '/' # App source code path
          api_location: '' # Api source code path - optional
          output_location: '/dist' # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
      - name: Webmentions
        id: webmentions
        run: |
          npx -y @remy/webmention dist/feed.xml --limit 1 --send

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: $
          action: 'close'

Doing More With What You Already Have

2024-01-20T16:48:00Z

I’ve just posted the first post on The Underground for the New Year; you’ll need to be subscribed to the RSS feed to read the full thing, but I wanted to share my favourite part of the post here, for posterity:

An aside: I hesitate to air the nostalgia reason; a lot of the current resurgence of the small/indie/open web is driven by a nostalgia for what we had before, and ultimately I’d like us collectively to move past that nostalgia and start imagining new ways of using the web on a personal level.

But. But but but.

I can’t deny there is an element of nostalgia driving this desire to do more with my own website. Way, way, way back… back before we standardised on blogs, I had a website and it was a melting pot of everything I was interested in; it was a miniature “hub” online for me and my “IRL” friends (one of several hubs we used, all run by someone we knew in person). There was a feature where people could leave messages for each other. Meetups were arranged in the comments. If I decided I wanted to experiment with using maths to drive Adobe Flash animations, well I guess now there’s a new gallery page for that. Photo dumps of nights out before we started using Facebook for that purpose - before Facebook existed, even! Reviews of local band gigs that were as much about promoting those bands and venues as anything else, because I was in love with that world and wanted to share it… in short: anything I could think about putting online I experimented with doing so. Some of it didn’t work and got pulled down again quickly, and most of it would almost certainly make me cringe now - but isn’t that part of the point of being young? To embarrass your older self with how carefree you were?

Now, I accept the world and I are very different in 2024 to how we were in 1999-2002, so it will never be exactly the same. But the ethos still clings to me. I still believe - even if my aging memory needs reminded and pushed into action - that our websites could and should be a reflection of everything we want to share about ourselves. Your website could be your central hub on the web, instead of one part in a network of profiles across dozens of sites. It could be something so deeply you, that even though you post prolifically in many places, it’s your website people remember about and read first.

Adding Site Search to Eleventy with

2024-01-07T15:27:00Z

I recently added some new ways to dig through the archives of this site, and chief among them was search. Search is something I’ve wanted to add for ages, and thankfully it was pretty straightforward, thanks to Pagefind and the <pagefind-search> web component by Zach Leatherman.

Installation

Installing the component starts with adding it to our package.json as a regular dependency (not a DevDependency as you might be used to for Eleventy):

npm install --save @zachleat/pagefind-search

With the package added, we need to add a reference to it into a JavaScript file referenced in our site/page HTML. The specifics of how you do this will vary depending on your setup/bundling process. For me, as I am using Eleventy Excellent for the basis of my site, the easiest way for me to do do this was to add an import to the top of assets/scripts/app.js:

import '@zachleat/pagefind-search';
/* ... rest of existing file contents ... */

With that out of the way, we can add the component to which ever page or template you want to use it in. For me, this was my archive Nunjucks file, with the additions looking like so:

<h2>Search</h2>
<pagefind-search pagefind-autofocus>
  <form action="https://duckduckgo.com/" method="get" style="min-height: 3.2em;"><!-- min-height to reduce CLS -->
	<label>
	  Search for:
	  <input type="search" name="q" autocomplete="off" autofocus>
	</label>
	<!-- Put your searchable domain here -->
	<input type="hidden" name="sites" value="chrismcleod.dev">
	<button type="submit" class="button">Search</button>
  </form>
</pagefind-search>

This is more-or-less a copy of Zach’s example usage. The only difference is I’ve added the pagefind-autofocus attribute and changed the fallback content to reference my domain. There are other attributes you can play with to customise the component further.

With these steps done, we’re nearly ready, but the search will not work until we generate the Pagefind bundle and index our site.

Indexing our site

Run your regular build command for your site, to generate the static files to be indexed. Indexing requires running another command:

npx -y pagefind --site dist

The --site option should point to the output directory of your build process. For me, that’s the dist directory. Pagefind will go off and do it’s thing, then report back what it’s indexed. The end of the output will look something like this:

[Building search indexes]
Total: 
  Indexed 1 language
  Indexed 520 pages
  Indexed 10092 words
  Indexed 0 filters
  Indexed 0 sorts

Finished in 4.393 seconds

Everything should be generated now, you can go ahead and serve your site locally to try it out!

If you want to customise the Pagefind index, you should refer to the documentation. Personally, I’ve added a couple of attributes to my templates to indicate what should or shouldn’t be indexed.

This is all great so far, but we should automate things so the index is generated on every build - especially if we use any sort of automated process to build and deploy our site. To do this, you’ll need to modify whatever command you use to build your site. For me, I modified the scripts section of my package.json to this (I’ve omitted irrelevant lines, for clarity):

"scripts": {
    "clean": "rimraf dist",
    "build": "ELEVENTY_PRODUCTION=true run-s clean build:*",
    "build:11ty": "eleventy",
    "build:index": "npx -y pagefind --site dist",
  },

The build entry is the one used by Netlify when it generates and deploys my site from any updates checked into GitHub. The important bit that changed here, from what it was before, is the addition of build:index. This adds the step to the build process which indexes the site.

Customising the display (Optional)

Pagefind comes with its’ own UI CSS, which the <pagefind-search> component loads when initialising. The defaults are perfectly acceptable - they work well, and look good. They did unfortunately stick out a bit as “wrong” when I initially added the component, so I wanted to make some adjustments.

It took me a while to figure out how to get the results to display in a way that was more like the rest of my site - namely the typography and element spacing. It’s far from perfect, and I want to do some more work on this, but the following should help you customise things a bit to your liking.

The main issue you’ll face is the Pagefind stylesheet will probably load after your main site stylesheets - so if you, say, follow the documentation and override the styling using CSS variables, the default stylesheet will override this. Thankfully, we can use the cascade and specificity to make our overrides take effect.

As mentioned, I use Eleventy Excellent, which uses some build tools to bundle up multiple CSS files into one. To keep things organised I added a new search.css file in the src/assets/css/blocks directory (link). Your site will probably differ in the specifics - you should add any CSS in the same way you normally would.

/* src/assets/css/blocks/search.css */
.pagefind-ui{
    margin-block-start: var(--flow-space,1em);
    --pagefind-ui-scale: 1.2;
    --pagefind-ui-primary: var(--color-fg);
    --pagefind-ui-text: var(--color-fg);
    --pagefind-ui-background: var(--color-bg);
    --pagefind-ui-border: var(--color-fg);
    --pagefind-ui-tag: var(--color-primary);
    --pagefind-ui-border-width: 2px;
    --pagefind-ui-border-radius: var(--border-radius);
    --pagefind-ui-image-border-radius: var(--border-radius);
    --pagefind-ui-image-box-ratio: 3 / 2;
    --pagefind-ui-font: var(--font-base);
}
.pagefind-ui__result {
    --pagefind-ui-border: #eeeeee;
  }
.pagefind-ui__button {
    --pagefind-ui-primary: var(--color-fg);
    --pagefind-ui-background: var(--color-bg);
    margin-block-start: var(--space-s-m);
}
.pagefind-ui__button:hover {
    --pagefind-ui-primary: var(--color-bg);
    --pagefind-ui-background: var(--color-fg);
}

.pagefind-ui__search-input:focus-visible {
  outline: 2px solid var(--color-primary);
}

The important bit to begin with is the .pagefind-ui rule declaration. This is where we define the new generic values for the PageFind variables, and define any properties which aren’t already set. If you want to override properties which are set (and aren’t influenced by the variables), you’ll need to get more into the weeds I’m afraid - which is outside the scope of this post. Maybe later, once I’ve revisited this topic.

The reason this works is that the default PageFind variables are set on the :root pseudo-element, which is less specific than .pagefind-ui. In my case I set the values to variables set by Eleventy Excellent’s own stylesheet, which lets the colours follow my implementation of Dark Mode.

From here, it’s a case of finding the class for the right elements you want to modify, and overriding the variables or adding new properties. For me, this was adjusting the border between results, and making the “load more results” button more like the other buttons on my site. One thing to remember: any variables you don’t override will use the defaults - so if you’re happy with everything but the font, for example, you can set the value of --pagefind-ui-font in .pagefind-ui, and leave it at that.

I Hate iCloud For Windows

2024-01-06T14:33:00Z

Hate is maybe too strong a word, but I can’t think of a better one in the moment. I like to think it’s not often I’ll piss-and-moan about a bit of software (these days), but the iCloud app for Windows is just so, so, so bad I’ve finally lost my patience with it. All I wanted it to do was sync my photos to my laptop, and occasionally let me grab a file from iCloud Drive. But for something that should be so simple, it’s caused nothing but trouble.

Every few weeks it would require logging into the app again with the full 2FA flow. Not in itself too bad, but at one point last year it decided it was going to get in an endless login loop despite nothing changing with my Apple account. This resulted in Apple’s systems locking me out (across all Apple devices) and forced me to reset the password through the web portal - so I then had to go login to every device again.

Syncing photos was hit-or-miss. Sometimes it would take days for a photo to show up on my laptop. The recently improved integration with the Photos app on Windows 11 didn’t work for weeks after I installed all the relevant updates and toggled the settings. Instead of the integrated view I just had an extra folder view - something I could have setup before the update 😅 It eventually started working.

And for today’s grumble? I updated my Apple account email address several weeks ago; iCloud for Windows finally caught up to the fact and asked me to login again^[1]. Only, it won’t let me edit the email address in the login prompt. Which means every login attempt fails. I’d have signed out and back in again, but the rest of the UI - including the sign out button - is locked behind the login prompt, leaving me stuck. With the memories of last year’s tomfoolery still fresh enough in my mind, I don’t want to risk getting locked out again, so just… gave up and uninstalled the application.

For photo sync I’ve discovered I can achieve much the same result using the OneDrive app on my iPhone, and I can also use OneDrive to get files to my laptop. It all requires some extra hops, but at least it seems to work reliably.

probably because I just had to reboot for a system update. ↩︎

New Year, Old Posts

2024-01-01T23:32:00Z

In a case of history repeating itself not once - but three times! - I’ve been working through the process of adding “historical” blog posts to my blog. These are posts I have written on previous iterations of my blog, in this case on several different domains, and stretch back over 20 years. Most of the earliest posts have been pulled from The Internet Archive, because younger me didn’t think about backups - not that any I’d taken would have lasted this long!

It’s a work-in-progress, but I’ve added in the region of 470 posts today. Most of the links and images should be working, but there’s a high chance something will be broken; I’ll be doing regular sweeps to fix up anything I find. There are still over 2000 “short form” and other, more esoteric, posts to sort through. Most of these are some form of IndieWeb “post kind” that will need a bit more work to bring across, and may require some further changes to the site itself to accommodate.

Beyond fixing formatting/images, I’m purposefully not editing the content itself. Even though I’m a very different person than I was when I some of these posts were written, it feels like it would be wrong to start rewriting the past. Instead, I’m putting a big disclaimer at the top of any post that’s older than 3 years. I’m still fiddling with the exact wording, but if you look at any old post you should see a representative example.

For context, I was still a teenager when I wrote the earliest post I’ve been able to recover, and I don’t think the word “blog” had caught on yet.

In terms of technical process, it was very similar to when I migrated this site from Wordpress to Eleventy. It just required a bit of extra work up front. I’d lost the Wordpress backups I’d made of my previous blog^[1], but still had a disk image backup of the server itself. I ended up using this backup to create a Digital Ocean droplet that represented the old server before I shut it down. With a few configuration tweaks I was able to access Wordpress and make a new backup of the site content. While the server was online, I also grabbed a copy of the uploaded media.

With that kerfuffle out of the way, I followed the same steps as my last migration - it just ended up with an order of magnitude more posts to sort through and clean up! It quickly became apparent I was missing a lot of images from 2017 and earlier - roughly when I had made another, earlier server migration. Thankfully, I did still have a backup of those images to hand, so just had to match up the files to the right place.

So. Will this be the last time I go through this exercise? The Magic 8-Ball says “eh, probably not…” but if nothing else it’s been a great excuse to go back, read, and reflect on some of the earliest things I’ve written online and just how far I’ve come since then.

There is also a static HTML archived copy I could refer to, but that wouldn’t help much with getting the content into Markdown for Eleventy. It was useful reference for fixing post where the export was missing some data due to the Wordpress plugins I was using. ↩︎

Certified: DevOps Institute Site Reliability Engineering Fundamentals

2023-12-17T20:11:00Z

It’s been a very busy week, so I’m only managing to blog about this now, even though it happened last weekend. Last Saturday (9th December) I sat and passed the Foundation-level DevOps Institute certification for Site Reliability Engineering. This was a bit of a spur-of-the-moment certification to sit; it was instigated by a random conversation with a manager (not one of my own) who brought up Site Reliability Engineering, and the need to have more knowledge of it within our area of the organisation. It was a topic I was aware of through my various DevOps studies, but not as anything more than a passing mention. In order to be able to start fleshing out our internal wikis with at least some basic information (that other, more experienced colleagues could then bulk out further), I started looking at some of the internal training resources for more information. Fast forward another 2 weeks, and I had an unexpected opportunity to go on a 2-day external training course that included a voucher for sitting the certification exam. Wanting to strike while the iron was hot, I scheduled the exam for the day after the training, and that was that!

Having the prior DevOps knowledge definitely helped, but I wouldn’t say it was essential. It was mostly a benefit in terms of knowing some of the general processes and concepts. Overall, the topic wasn’t much of a jump from what I’d done before, and being a foundation level exam, was broad rather than deep in terms of knowledge needed.

In terms of resources used, I think most of the concepts can be learned from the many videos on YouTube that cover SRE, and the books at https://sre.google/. I do, however, recommend the virtual classroom course run by QA, if your employer will pay for it. It’s 2 days, gives you everything you need to pass the exam, and includes a voucher for the exam itself (which costs £220 otherwise).

The exam itself was fairly standard for this level of certification - 40 multiple choice questions (4 possible answers per question), about an hour to complete the exam, and a pass rate of 65% (or, in SRE terms, an error budget of 14 wrong answers 😅). Interestingly, if you have the official hardcopy training materials, it’s an open book exam. I did not have them, so I had to go off memory. Having only sat Microsoft exams through PearsonVUE, I found the DevOps Institute exam - run by PeopleCert - to be interestingly different. The best way to describe it would be the check-in was more “hands-on”. Instead of uploading some pictures of my space and waiting for approval to start the exam through what feels like automated processes, I had to interact with the real-life proctor and use my webcam to slowly pan around the room and over every part of my desk - including underneath. This did lead to the situation where I had to slightly adjust the angle of my desk + webcam in the room so myself, the entrance door, and a cupboard door were all visible at the same time, but it was only a minor inconvenience. The proctor was very pleasant to interact with and was only enforcing the examination policies, not being unreasonable. Once the exam is completed, you get your initial score but have to wait a couple of days before receiving your official results + certificate. Being used to receiving everything from Microsoft within a couple of hours, this threw me, but it’s not the end of the world. My confirmation arrived near the end of the business day on Monday, so it wasn’t like I had an an unreasonable length of time to wait, really.

Overall, I’d recommend the exam and learning experience, for no other reason than simply having a verified understanding of the core concepts of SRE. Though obviously, it’s far from essential. I’m not sure if SRE is a topic I’m going to go deeper into, but we’ll see what next year holds!

So About That Feed Reader-Only Blog Idea

2023-12-04T12:32:00Z

In my last post I included a footnote about a RSS-only blog idea I’d had ages ago and not done anything with:

This reminds me of the time I mused about setting up a site that was only an RSS feed. No web pages beyond the bare minimum needed for feed discovery, or maybe a splash to let people know what’s going on. The idea never came to anything, but maybe…?

Well, thanks to some encouragement from Robb, I’m giving it a try. Say hello to theunderground.blog^[1]. As I mention in the first entry (issue?) there’s a lot I’m still figuring out, but the more boring technical aspects are largely in place. I literally took the Eleventy template for my site, stripped it back to just the Atom feed and a minimal home page, then called it a day. The most interesting part of it was getting Eleventy to delete all of the rendered posts after build so that there really wouldn’t be any permalinks that snuck through.

I treated Entry #1 as if it were almost an old-style email newsletter^[2], with a quick introduction blurb and then some interesting links, and honestly - I really enjoyed the format and will probably continue with it. I haven’t figured out what cadence posts will be; I’m not really a daily blogger any more, but somewhere between twice weekly and twice monthly will be where we land. It will probably evolve over time too, but we’ll have to see. It’s very early days!

The email newsletter comparison is probably the best mental model for a feed-only format. I can’t directly link to any entries, and I have little to no control over how it will be presented by clients. I just write, publish, then hope it lands in your feeds correctly. At least there’s no DKIM or SPF or spam filters to worry about. That “no linking” thing is the biggest brain twister I’ve come across so far. I’m so used to just tossing a link out to a post I’ve written it’s second nature, and I can’t do that here. It’s the homepage or the feed, or nothing! By its nature, entries might also be somewhat ephemeral. If you subscribe after, say, Entry #100, then I cannot be sure a feed reader will import right the way back to the beginning. It’s going to be an interesting journey of discovery.

So please subscribe to find out where this little experiment ends up going, and if you have any feedback, you should be able to webmention this post now, or find other contact details at the bottom of the first entry over on theunderground.blog.

I’m still figuring out the “branding” - theunderground.blog? The Underground Blog? The Underground? TheUnderground? You get the idea! Some of them veer a bit too close to music “zine”. ↩︎
Not your new-fangled ones like Substack or Buttondown that also give you a web version of each issue as an archive copy. ↩︎

Blogging is where it's at, again

2023-11-30T11:09:00Z

I don’t blog as much as I used to, or post about as wide an array of topics as I used to, but I’ve always believed the blog is the “natural form” of posting on the web: a site of your own, that you control^[1] and set your own rules on content and discussion; where you can post whatever you like without worrying about “The Algorithm”. Everyone should have a blog, whether it’s on a free service like Wordpress.com or Micro.blog, a crafted custom setup, or something in-between.

Blogs never really went away, but they did take a back seat to the social media era. I’ve been blogging on various iterations of my personal site (on different domains over the years) for around 24 years. This is my space on the internet (pun intended); I’m not beholden to the whims of social media platforms here, or their rise and fall. But still, I’ve spent more time and posted more on those platforms over the last several years than I have on my own site, so I’m not judging anyone about being, if we will, “social-first” (or only). For better or for worse, social media opened up the web to a lot more people for a number of reasons too long to get into here. I do like some social media platforms, some of the time. But deep down I feel having your own site is better. For the web, and for you: the writer and the reader.

Anyway. A couple of coincidental things happened over the last 2 days that got me jazzed for the future of blogging again. Maybe it’s going to make a comeback of sorts? That would be nice.

First, the Default Apps post from yesterday led me down a rabbit-hole. I was checking out the people who had also contributed to the list when I noticed the OPML file of everyone with an RSS feed. Currently that’s over 200 people. It might sound silly, but I’ve not seen a list of active bloggers that long in years, outside a few directories. It’s more than double the number of sites I had in my RSS reader’s “IndieWeb & Personal Blogs” folder after many years of slow curation.

Second, by way of Dave Winer, I found the RSS Club. Another list of bloggers — 32 this time — with the unique twist of committing to provide at lease some “RSS only” content^[2]. As the 2nd rule states: “Don’t Share on Social Media”. As luck would have it, the RSS Club also publishes an OPML file.

I keep mentioning OPML files. If you’re not aware, OPML files are used as a file for organising RSS feeds. If you export your subscriptions from a feed reader, what you’ll get is an OPML file ready to import into another service/app. So you could simply download the above linked files and import them directly into your feed reader of choice, subscribing you to everyone included when you initiated the download. The really cool thing about OPML files, that some feed readers and clients support, is that you can subscribe to the OPML file itself. This means that you’ll not only get the posts of anyone included when you subscribed, you’ll also get the posts of anyone who is added to the file at a later date. As the list of of feeds grows, so does the number of blogs and posts you’ll see.

Inoreader (one of the feed readers I’m a paid user of) supports OPML subscriptions^[3], so I added subscriptions to both of the files above. Already it’s given me a big change in my reading experience. Blogs aren’t being drowned out by news sites anymore. I woke up this morning to a couple of hundred posts to read on a very wide variety of topics; some serious, some whimsical, some somewhere in the middle. It was magical. It got me thinking about all sorts of possibilities around social media, blogs, and feeds — and inspired this post 😅

Maybe I’m reading too much into it, but stumbling into such a trove of active blogs has enthused me about blogging as a medium again. It’s sparked a thought that through a combination of increased blogging activity, declining platforms, and increasing adoption of open standards to glue everything together, that maybe — just maybe — we can swing the web back towards the blog again.

Hosting terms and conditions notwithstanding ↩︎
This reminds me of the time I mused about setting up a site that was only an RSS feed. No web pages beyond the bare minimum needed for feed discovery, or maybe a splash to let people know what’s going on. The idea never came to anything, but maybe…? ↩︎
Feedbin, the other paid-for service I use, doesn’t support OPML subscriptions. I was able to import from the files just fine, it just means I won’t get any additional feeds. I’m still going back and forth over which service I prefer, but Inoreader now has a slight advantage. ↩︎

Default Apps for 2023

2023-11-28T17:21:00Z

I came across this collection of “what apps am I using?” posts via Manton, and thought it would be fun take part. If you want to see what others have posted, Robb Knight is compiling a list.

📨 Mail Client: Apple Mail + web
📮 Mail Server: Fastmail
📝 Notes: Obsidian (also trying out LogSeq)
✅ To-Do: Apple Reminders
📷 iPhone Photo Shooting: Apple Camera
🌅 Photo Management: Apple Photos
📆 Calendar: Apple Calendar linked to Google (with plans to switch to Fastmail)
📁 Cloud File Storage: iCloud + OneDrive
📖 RSS: NetNewsWire and Feedbin
🙍🏻‍♂️ Contacts: Apple Contacts
🌐 Browser: Edge
💬 Chat: Work only - Teams; iMessage + WhatsApp, if they count
🔖 Bookmarks: Micro.blog
📑 Read It Later: Micro.blog
📜 Word Processing: Word
📈 Spreadsheets: Excel
📊 Presentations: PowerPoint
🛒 Shopping Lists: none
🍴 Meal Planning: none
💰 Budgeting and Personal Finance: Plum, banking app
📰 News: Artifact, Apple News, RSS
🎵 Music: Apple Music
🎙️ Podcasts: Overcast
🔐 Password Management: 1Password
🤖 Code Editing: VS Code + Visual Studio
📚 Books: Kindle, Audible
🌎 Blogging: Micro.blog, Wordpress, Eleventy

Overall I’m a fan of sticking fairly close to the defaults on the platforms I use (Windows + iOS) simply because it usually leads to having an easier time of things. There are a couple of items on this list that probably won’t be on the list this time next year, but I’m still evaluating what their replacements might be.

How I use Generative AI to help write blog posts

2023-08-31T00:00:00Z

Editor’s Note, 26th January 2024 - This post was part of an experiment in using “generative AI” in my blogging process, and as such is at least in part written by one or more generative AI tools. I am no longer using these tools and felt it important to come back and and apply this label to posts where such tools were used.

The rise of large language models (LLMs) like ChatGPT, Anthropic’s Claude, Google Bard, and Bing Chatwith GPT-4 has opened up exciting new possibilities for augmenting creativity. Recently I started using generative AI tools to help me draft my blog posts. I find that AI can be a great way to generate ideas, outlines, and even full drafts of my posts. Coming up with the initial draft is often the hardest and most time consuming part of the blogging process, and using generative tools can be a big win. So how do I do use these tools?

The process:

I ask ChatGPT, Bing Chat, Bard, and Claude for an outline based on a prompt. The prompt is a short sentence or phrase that describes the main idea or theme of the blog post. For example, for this post, the prompt could be write an outline for a blog post titled "how I use generative AI to draft blog posts". Each tool will generate a different outline, with different headings and subheadings, based on the prompt.
I compare the outlines from the four tools and choose the one that best suits my purpose and intended audience. If necessary I tweak the outline to the shape of the post I want. I may also combine elements from different outlines or add my own headings and subheadings.
I then ask all the tools to write a first draft based on the outline. I provide each tool with the same outline prompt and ask them to generate a draft to a rough word count. Each tool will generate a different draft, with unique wording and style, based on the outline. Sometimes the drafts are vastly different to each other, which is interesting to see.
I compare and review the drafts. I read each draft carefully and evaluate its quality, coherence, readability, and tone. It’s fascinating to see the different tones and styles that emerge in these drafts. I may also ask for specific changes to individual drafts such as “use {X} writing style” or “include a paragraph about {Y}”.
I select the draft I consider closest to what I had in mind when I started. I may also consider other factors such as originality, creativity, and relevance.
I manually edit the draft to the final form, sometimes including elements from other drafts. I proofread and revise the draft to correct any errors, inconsistencies, or gaps in the content.
If something still isn’t quite sitting right, I will ask one of the tools to review the text for suggested edits or to change the tone. I may also ask for feedback or suggestions from other tools or sources to improve the quality and clarity of the text.

I’ve found that this process helps me reduce the time to write blog posts significantly. LLMs can generate a lot of ideas and content quickly, and I can then focus on editing and polishing the final product.

Lessons learned

Be clear and specific in your prompts. The more specific you are, the better the AI tools will be able to understand what you want.
Be willing to experiment. The AI tools are still under development, so you may need to try different prompts and settings to get the results you want.
Editing is a must. The AI tools can generate some great words, but it’s important to edit and revise it to make sure it’s clear, concise, and error-free.

It’s also important to use the right tools for the job. Not all generative AI tools are created equal. Some are better at generating ideas, while others are better at writing full drafts. It’s also important to be aware of the limitations of these tools. They are also not perfect, and they can sometimes generate text that is inaccurate, biased, or offensive. Over time you will develop a sense of what each is good at.

As an example, I usually find Claude to be the most “eloquent”, but equally, can get overly wordy and occasionally go on a tangent to meet a word count. Sometimes that works out for the better, but not always. On the other hand, Bard is usually the most “perfunctory”; it’s snappy and to-the-point, but can sometimes produce text that is blunt in tone to the point of rudeness. I also find Bard most likely to hallucinate things that weren’t asked for^[1]. ChatGPT and its variants sit somewhere in the middle.

Ultimately, the best way to use generative AI is to use it as a starting point. They can help you to generate ideas, outlines, and even full drafts, but you will still need to edit the final output to make sure it’s of a high quality to be posted under your name.

While there are certainly ethical concerns around AI content generation, I believe there are also responsible ways we can thoughtfully harness these models as tools. With the right human oversight, LLMs can expand our capabilities and knowledge, or just make certain jobs easier. My writing has already benefited from the interplay of AI and human creativity.

Moving forward, I’m sure my processes will continue evolving as the AI capabilities advance. For now, this collaborative workflow allows me to tap into the strengths of both man and machine. I’m excited to see how generative AI continues to develop in the future.

So what about this post?

How meta! My process for writing this post was basically no different to what I described above, only this time my first prompt included the outline of what I wanted to say as I had already figured that out. The starting prompt was:

write a first draft blog post of roughly 500 words about how I use generative AI/LLMs to draft blog posts, based on the outline below:

- I ask ChatGPT, Bing Chat, Bard, and Claude2 for an outline based on a prompt.
- I edit the outline to the shape of the post I want.
- I then ask the 4 tools to write a first draft based on the outline.
- I compare and review the drafts. I may ask for specific changes such as "use {X} writing style" or "include a point about {Y}".
- I select the draft I consider best.
- I manually edit the draft to the final form, sometimes including elements from another draft.
- If something isn't quite right, I will ask the "winning" tool to review the text for suggested edits/tone

The “winner” of the first round, this time, was Google Bard. It provided a nice and coherent draft post which expanded on my outline without going on too many tangents. I felt it was a little slim on details in places, so I edited in selections from Claude and Bing Chat where something needed expanded on. Finally, I asked Claude to review and edit for consistent tone and writing style with the following prompt:

review and suggest edits for the attached Markdown text. Ensure it has a consistent, approachable tone. Correct any grammar and spelling mistakes using UK English. Add hyperlinks to any tools referenced in the text. The final output should be in Markdown format.

The output was given one last proofread and minor edits such as adding the front-matter, before being posted as what you’re reading right now!

I once asked Bard to reword some positive performance review feedback from a bullet-point list into a couple of paragraphs. It did it, but also added a whole lot of unasked for and very negative text about poor time management and lack of research skills - both things that were completely unrelated to anything I had written. I did not use its output on that occasion! ↩︎

Microsoft Role-Based Exams Now (Semi) Open-Book

2023-08-23T00:00:00Z

Microsoft’s “role based” exams can be tough-going. There’s a lot to learn, with a lot of questions where remembering the sometimes subtle nuances between things like different SKUs/pricing plans, or particular flags on a PowerShell command can make all of the difference. A lot of the time this is detail you wouldn’t normally need to memorise, but would just look it up in normal day-to-day work.

It seems that Microsoft have noticed this, and are adding a new Microsoft Learn button to official exams. You’ll be able to access and search https://learn.microsoft.com/ from within the exam, in a neat split-screen view. It’s somewhat limited, so you’ll still need to have some experience with the tools and topics, but it should help lower test anxiety for some people. From their blog post:

How often do you say in your daily life, “I’ll just look that up.”? Now, you can… with easy access to Microsoft Learn, another enhancement that we have made to improve the overall exam experience.

Because this is an exam resource, much like a calculator, exam time will not be extended. We are not changing the way we write our questions; they will continue to focus on problems or scenarios that require real world experience to solve. As a result, this resource is intended to be used for those questions that describe problems where you may need to look something up on Microsoft Learn. It is not something you should be leveraging to answer every question.

Renewal tests were already completely open-book, so this change brings the exams more into line with those. Overall I think it’s a great change and will put an end to a lot of those “is it the Standard SKU or the Premium SKU for that feature?” moments which always seem to trip me up the most.

If you want a summary of all the changes in video form, Jon Savil has you covered:

I Rebuilt My Blog and Didn't Write About It

2023-08-20T00:00:00Z

Until now.

Sorry, it’s tradition. If someone redesigns/redevelops their blog and doesn’t blog about it, did it even happen?

Regular visitors (if there is such a thing) will already know this, but if you follow via RSS you might not know that this site has a new lick of ~~paint~~ CSS. Not only that, but there’s a new underlying system and hosting platform. In summary:

WordPress is out; Eleventy is in.
Instead of hosting on my own VPS for ~£20 a month, I’m hosting for free on Netlify.
The site is based on the excellent Eleventy Excellent starter, by Lene Saile. I’ve made a few tweaks here and there to make things just so for my tastes, but full credit goes to Lene for providing such a good foundation.

Why Eleventy?

In short: it’s very fast, flexible, and doesn’t railroad you into a particular way of building your site. The documentation is good, and ultimately: I just really like working with it.

The community around Eleventy has come up with a variety of “Starters”, which are a kind of template to help get your site up and running. They’re not just “templates” in the sense of how the site looks, but also how it is structured under the hood, build-time optimisations… the works! They can be as simple or as complicated as you want.

I evaluated a few different Starters, Initially I was just looking for something simple, that optimised the output HTML and CSS at build-time, but not much more than that. Then I found Eleventy Excellent and new it was the one for me. In Lene’s own words:

This (opiniated) Eleventy starter is based on Andy Bell’s talk ‘Be the browser’s mentor, not its micromanager’ and it’s companion website buildexcellentwebsit.es.

Andy’s talk was actually going to be the basis for how I built this site, so to find someone who had already done the hard work was fortuitous! That it looked good, was easily customisable, and fast, were all extra cherries on top 🥳

Getting content out of WordPress

Getting my content out of WordPress and into nice, simple Markdown was probably the most time-consuming part of this whole process. Although, to be honest, it wasn’t that difficult compared to what I’d braced myself for.

There are already a few WordPress to Markdown converters available. Most are a Node package that can be run against your WordPress export on the command-line. I tried out a couple, comparing the output, and finally settled on flowershow/wordpress-to-markdown). This generates a bunch of .md and downloads image files from posts into a directory structure.

From there began the laborious job of cleaning up the output to match the blog setup, change the image references from Markdown to the Eleventy Image short-code, and update the image paths to point to the Azure storage blob I’m using to hold my master copies. After a couple of sessions working on it in a Starbucks, everything was building exactly as I wanted it

Why Netlify and not Azure Static Web Apps?

If you’ve read my previous post on SWA, you’ll know I’m a huge fan of Azure Static Web Apps. So it might be a surprise that I opted for hosting with Netlify instead. In a lot of ways the services are functionally identical - free hosting for static sites, with a CI/CD pipeline from GitHub that automatically builds and deploys your site whenever changes are pushed to the repository.

Honestly, it came down to just one thing - limits on the size of the compiled site “bundle”, including media files. SWA has a limit of 250MB per site on the Free tier. Netlify doesn’t. Although I knew the static HTML would be a tiny fraction of that limit, the cached images in multiple formats would take me closer. I don’t think I’m realistically I would hit the limit any time soon^[1], but there would always be a ceiling I’d have to remember about as the content grows. So Netlify it was.

I might revisit this, and have everything on Azure, but I’m not in a rush.

Interesting Technical Details

Honestly, the majority of the technical underpinnings are pretty boring. To understand the HTML/CSS, I recommend taking a look at the starter repository and talk which inspired it. Both are linked at the top of this post. I think the most interesting thing is how I’m handling images:

As mentioned above, masters are stored in Azure storage, with a CDN attached to make it easier to reference in posts.
When writing a post I include a short-code which links out to the CDN version of the image.
At build time, Eleventy Image downloads the master, resizes it to the specified responsive sizes, and generates optimised versions in various formats like AVIF. These are then cached by the build to prevent excessive work/traffic.
The short-code is replaced with <picture> tags for proper responsive image support

It’s pretty cool all-in-all, and makes posting images pretty trivial. I just have to upload to Azure, then link from a post, and Eleventy then does all the “right things” with regards to optimisations.

What’s next?

Hopefully just writing more! I’ve added a dark mode and links page generated from Feedbin subscriptions, so I think the only things I still want to add are:

Search - I might end up using Azure Cognitive Search for this, but not 100% decided yet
Bringing in content from old iterations of my blog. I’ve been writing online since before it was called “blogging”, and I’ve got a bunch of good stuff in the archives that’s not on this site. I’ll need to do some editorialising to bring in the “greatest hits” in a way that makes sense, but I’d like to expand the content so it’s not just the last couple of years.

As it stands, the development build for the entire site is only ~21MB, including images - which take up >20MB. Yay HTML. ↩︎

Come on Barbie, let’s go party

2023-07-24T00:00:00Z

We went to the cinema recently, to watch Barbie, and I must say, it was an absolute blast! Going in, I had mixed expectations - essentially expecting something similar to The Lego Movie (funny, a few touching moments, but ultimately empty), but what I got was so much more.

From the very start, I was hooked. I was pretty much smiling or laughing the whole way through. It weaved heartwarming moments throughout, making it a well-rounded and engaging experience. Margot Robbie and Ryan Gosling were undoubtedly the stars of the show, and they played their roles to perfection, adding an extra layer of charm to the movie.

Margot Robbie’s portrayal of Barbie was exceptional, bringing the iconic character to life with a unique blend of humour, heart, and occasional obliviousness. Ryan Gosling’s performance as Ken was magnificent. I genuinely think I could watch an entire Ken movie based on his portrayal. Their chemistry on-screen was undeniable, and they truly seemed to be having a blast in their respective roles. Also - a shout-out to America Ferrera who adds the emotional core to the second half of the movie and who was brilliant in her role.

There have been some “murmurs” online about the film being “anti-men,” but to my mind – this is nonsense, and most likely performative. Personally I found it very much “pro men”, particularly in the final act of the movie, if you actually pay attention. The core message of Barbie is positive and empowering for everyone, regardless of gender. It celebrates the importance of embracing individuality, being true to oneself, and supporting each other. The film’s underlying messages are of inclusivity and empowerment, and these are not bad things.

As we left the cinema, I couldn’t help but reflect on the amazing experience I had just had. Barbie far exceeded my expectations. Whether you’re part of the target audience, or just looking for a fun-filled and heart-warming escape, Barbie has something for everyone. So if you can, I recommend you take time to go see it.

Azure Static Web Apps are Awesome!

2023-07-21T00:00:00Z

Editor’s Note, 26th January 2024 - This post was part of an experiment in using “generative AI” in my blogging process, and as such is at least in part written by one or more generative AI tools. I am no longer using these tools and felt it important to come back and apply this label to posts where such tools were used.

Azure Static Web Apps has become one of my new favourite tools for web development lately, so I wanted to do a quick write-up.

What is Azure Static Web Apps?

So what is Azure Static Web Apps (SWA), and what can do for you? In a nutshell, it’s a modern solution for web development hosted on the Azure cloud. There’s no complex server setups and managing infrastructure - with Azure Static Web Apps, you can focus solely on building your front-end magic while Azure handles the rest. Sound useful, right? It absolutely is!

One important thing to make clear - while the name is “Static”, and SWA doesn’t support pages built dynamically on the server (using PHP/Rails/whatever) - your pages do not need to be basic, un-interactive HTML if you don’t want them to be. Static Web Apps supports frameworks like React, Vue, Angular, .NET Blazor, static site generators like Gatsby and 11ty, and more. On top of that, here’s a list of things you get on the free tier that can spice up your app:

Routing
Authentication/Authorisation
Serverless functions
Integrate a database using GraphQL (currently in preview, but it’s awesome)
Custom domains
CI/CD integration
CLI tooling

Learn and Experiment with Ideas

One of the coolest things about Azure Static Web Apps is how it encourages you to learn and experiment. As a developer, you love trying out new ideas, prototypes, and proof-of-concepts. In the last few weeks I’ve spun up several sites on SWA just to try out an idea or learn something. I’ll be talking more about those in later posts.

Whether you want to build a personal website, an interactive landing page, API-driven frontend, or a progressive web app (PWA), Azure Static Web Apps can help you build it. And to top it off, getting started is a breeze!

Getting Started Made Super Simple

Deploying to Azure Static Web Apps is super simple. The first time you try it out, you’ll be pleasantly surprised by how smooth the process is. So, let me walk through the steps to get you started:

Step 1: Create Your Azure Static Web App

To begin, head over to the official Azure portal and create your very own Azure Static Web App instance. It’s free, and if it’s your first Azure account, you get some credits to put towards any paid Azure services that might take your fancy. Don’t worry about what’s involved in creating the instance; Microsoft have comprehensive documentation that will guide you through every step.

Step 2: Set Up the Deployment Pipeline

Next up is setting up your deployment pipeline. Azure integrates seamlessly with your version control system. Whether you prefer GitHub, Bitbucket, or Azure Repos, Azure will create a pipeline for you and add it to your repository. Once connected, Azure will automatically build and deploy your app whenever you push new changes.

Step 3: Experiment with Ideas

Now comes the fun part - experimenting with your ideas! Since Azure Static Web Apps are perfect for prototypes and proof-of-concepts (and production apps too!), you can quickly test different concepts without worrying about server resources. This means you get more time to iterate and refine your ideas!

Embrace the Power of Serverless Architecture

Another reason why you’ll love Azure Static Web Apps is its seamless integration with serverless architecture. With serverless APIs at your disposal, you can add dynamic functionalities to your static web apps without managing backend servers. It’s like having the best of both worlds - the simplicity of static sites with the power of dynamic APIs!

As well as regular serverless functions, SWA now has “Database Connections” as a feature preview. With this you can easily hook up to, say, a free-tier Azure CosmosDB instance and - with a couple of configuration files - have a working GraphQL server for your site, including Role-Based Authentication, in minutes.

Serverless Functions and Database Connections have full support for Role-Based Access Control, if that’s something you need.

Boost Your Productivity with Continuous Integration

As a developer, you value productivity, and Azure Static Web Apps delivers it in spades. The beauty of continuous integration is that you can focus on writing code without the distraction of deployment headaches. Plus, you get instant feedback on every change you make, making collaboration with teammates a breeze. Each Pull Request automatically spins-up a preview site with a unique URL - see your changes live before merging in and deploying to Production!

Learn with Microsoft Training Materials

Regular readers will know I’m a big fan of Microsoft learning resources. They offer a fantastic learning path for Azure Static Web Apps, and in-depth documentation. Even if you’re starting from scratch, you’ll get up-to-speed in no time with the well-crafted tutorials and guides.

Wrap Up

So, there you have it - a glimpse of why I think Azure Static Web Apps are genuinely awesome! They empower you to learn, experiment, and innovate with ease. With a user-friendly setup and seamless integration of serverless APIs, it’s a real joy to use. 🎉