Robb Knight • Posts • Atom Feed

Using Eleventy to Gobble Up Everything I Do Online

2024-02-21T20:47:27Z

This post is adapted from the talk I did at the Eleventy Meetup. You can also watch the talk on YouTube.

This is what I look like when I try to explain how my website works:

There are three main parts that make up this website: Echo, my API server (and Eleventy data files), and standard Markdown files.

Echo and Custom Post Text

Echo started life as a cross-posting tool to post from an RSS feed to Micro.blog. Since then I've added support for webhooks, Mastodon, LinkAce, Omnivore, and GitHub. If we take Letterboxd as an example. I post a review on there that gets added to the RSS feed. Echo will fetch that new review and create a new post in the git repository on GitHub, the site rebuilds, and the review now exists as a post. I then use Echo again to read the RSS feed of my movie reviews and post that to Mastodon.

Rather than just send the title and link to Mastodon, I prefer to include some (or all) of the post content with the toot as well. To do this, I added a makeTootText filter and a mastodonCounter function which I got from the Mastodon project. This filter check the type of post it is, checks if it will fit on Mastodon's limit of 500 characters, then adds it to the _knightposse object in the JSON feed.

"_knightposse": {
    "about": "https://rknight.me/about/colophon/",
    "text": "⭐ Apple is twisting the truth by @manton@manton.org https://www.manton.org/2024/02/16/apple-is-lying.html\n\n\"For example, to comply with the DMA’s requirements on sideloading or marketplaces, Apple could’ve chosen a system similar to installing apps from TestFlight. This would require zero new APIs for developers, just as TestFlight itself has no new APIs when building a beta version of your app.\"\n\nAnother DMA link. All of this is just gross and completely ignores what the DMA was attempting to do.\n\n📌 https://rknight.me/links/apple-is-twisting-the-truth/",
    "tags": []
},

At the moment I only customise link and Almanac posts so the filter returns just the title and link if the post isn't one of those types:

let content = ''
const permalink = `https://rknight.me${post.permalink}`

if (!['link', 'almanac'].includes(post.layout))
{
    return `${decode(post.title)} ${permalink}`
}

I then use Cheerio to get all the content as plain text which I combine with the title and link to check if it will fit on Mastodon. For Almanac posts, the filter also adds year, season, or platform information as relevant:

const $ = cheerio.load(`<div id="content">${decode(post.content)}</div>`)
let allText = $('#content').text().trim()

if (post.layout === 'almanac')
{
    let title = [
        _getTypeEmoji(post.type),
        `${_getVerb(post.type)}:`,
        decode(post.title),
        post.season ? `Season ${post.season}` : null,
        post.platform ? `(${post.platform})` : null,
    ].filter(t => t).join(' ')

    content = `${title} ${permalink}`

    const contentWithReview = `${content}\n\n${allText}`
    if (mastodonCount.getMastodonLength(contentWithReview).length <= 500)
    {
        content = contentWithReview
    }

    return content
}

For link posts, I mention the author if they have Mastodon as well as extracting any quotes so I can include those even if my full commentary won't fit:

let mastoUsername = null
if (post.author.mastodon)
{
    const url = new URL(post.author.mastodon)
    mastoUsername = `${url.pathname.replace('/', '')}@${url.host}`
}

content = `⭐ ${decode(post.title)} ${mastoUsername ? `by ${mastoUsername}` : ''} ${post.link}`

$('blockquote').get().forEach(element => {
    allText = allText.replace($(element).text().trim(), `"${$(element).text().trim()}"`)
})

const contentWithAllText = `${content}\n\n${allText}\n\n📌 ${permalink}`
const firstQuote = `"${$('blockquote').first().text().trim()}"`
const contentWithFirstQuote = `${content}\n\n${firstQuote}\n\n📌 ${permalink}`

if (mastodonCount.getMastodonLength(contentWithAllText).length <= 500)
{
    content = contentWithAllText
} else if (mastodonCount.getMastodonLength(contentWithFirstQuote).length <= 500)
{
    content = contentWithFirstQuote
} else {
    content = `${content}\n\n📌 ${permalink}`
}

return content

In my config in Echo I can then use that data from the JSON feed for the new post on Mastodon:

{
    name: 'rknightalmanac',
    feed: 'https://rknight.me/subscribe/almanac/feed.json',
    json: true,
    skipConversion: true,
    services: [SERVICES.MASTODON],
    transform: {
        getId: presets.default.getId,
        format: (data) => {
            return {
                content: data._knightposse.text,
                date: data.date_published,
            }
        },
    },
}

API Server and Data Files

I have an API "server" of sorts which collects information on various schedules depending on the service. To call it a server is a bit misleading, it's more like a bucket of node scripts that write JSON files. It fetches from multiple services for me including Overcast, Last.fm, Mastodon, and Brickset.

The schedule is set by cron jobs and uses a makefile to define which jobs run when:

monday:
	cd /home/forge/api.rknight.me; node services/lastfm.js
	cd /home/forge/api.rknight.me; node services/books.js
	cd /home/forge/api.rknight.me; node services/psn.js
	cd /home/forge/api.rknight.me; node services/tv.js
	cd /home/forge/api.rknight.me; node services/links.js
	cd /home/forge/api.rknight.me; node now/generate.js
	cd /home/forge/api.rknight.me; node now/update.js
	cd /home/forge/api.rknight.me; node utils/backup.js
sunday:
	cd /home/forge/api.rknight.me; node services/overcast/backup.js
	python3 /home/forge/api.rknight.me/services/overcast/fetcher/fetch.py
	cd /home/forge/api.rknight.me; node services/overcast/parser/run.js
	cd /home/forge/api.rknight.me; node services/overcast/now.js
	cd /home/forge/api.rknight.me; node now/generate.js
daily:
	cd /home/forge/api.rknight.me; node services/github.js
	cd /home/forge/api.rknight.me; node services/other.js
	cd /home/forge/api.rknight.me; node now/generate.js
hourly:
	cd /home/forge/api.rknight.me; node services/webmentions.js
	cd /home/forge/api.rknight.me; node services/mastodon.js
	cd /home/forge/api.rknight.me; node services/micro.js
ten:
	cd /home/forge/api.rknight.me; node services/discussion.js

Brickset is a site for managing and tracking a Lego collection. I have somewhere around 200 sets but along with tracking them, I want to show them on my collections page rather than linking out to my profile there. I login, fetch my set collection, then map that to a nicer format for handling in Eleventy.

const { BRICKSET_USERNAME, BRICKSET_PASSWORD, BRICKSET_API_KEY } = process.env
const response = await fetch(`https://brickset.com/api/v3.asmx/login?apiKey=${BRICKSET_API_KEY}&username=${BRICKSET_USERNAME}&password=${BRICKSET_PASSWORD}`)
const body = await response.json()

if (!response.ok) return

const userHash = body.hash

const setResponse = await fetch(`https://brickset.com/api/v3.asmx/getSets?apiKey=${BRICKSET_API_KEY}&userHash=${userHash}&params={"owned":1,"pageSize":500,"orderBy":"YearFrom","orderBy":"Theme"}`)
const rawData = await setResponse.json()

// format the data

This data is then written out to api/brickset.json and pulled into my site when it's built.

Each service on the API works in a similar way: fetch the data, format it, then write it to a file. I won't go through all of them here but you can view the source code here.

To give you some idea of how much I pull into my site, here is my _data directory. Each one of these represents either external data or hard-coded lists of things like projects:

└── data/
    ├── site/
    │   ├── config.js
    │   ├── explore.js
    │   ├── footerpages.js
    │   ├── links.js
    │   ├── production.js
    │   ├── projects.json
    │   └── save.js
    ├── adn.json
    ├── alfred.js
    ├── blogroll.js
    ├── discussion.js
    ├── fathom.js
    ├── games.json
    ├── micro.js
    ├── microboosts.js
    ├── mypodcasts.js
    ├── now.js
    ├── podcasts.js
    ├── podroll.js
    └── status.js

Which brings me to my next point about using data files: any page that has a list of things I tend to use data files instead of writing them in the page itself. For example, my projects page has a large amount of projects listed so I keep a JSON data file with all the projects and render them out from that.

{
	"featured": [
		{ "title": "Humonize!", "link": "https://hum.rknight.me", "desc": "Humonize forever", "image": "humonize.png" }
	],
	"current": [
		{ "title": "Alfred Workflows", "link": "/alfred-workflows", "desc": "All of my Alfred Workflows", "image": "alfred.png", "tags": ["JS", "AppleScript", "Python"] }
	],
	"podcasts": [
		{ "title": "Ruminate", "link": "https://ruminatepodcast.com", "desc": "A podcast about what's on our minds", "image": "ruminate.png", "tags": ["11ty", "Audio"] }
	],
	"profile": [
		{ "title": "omg.log cli", "link": "https://github.com/rknightuk/omglolcli", "desc": "A CLI tool for using omg.lol", "image": "omgcli.png", "tags": ["JS"] }
	],
}

Then in projects.njk I can loop through that data and output the HTML as needed:

### Current 

<div class="cards">
{%- for project in site.projects.current %}{% include 'project-card.njk' %}{% endfor%}
</div>

Markdown files and the Command Line Tool

The final component of the site is markdown files. These are used for blog posts, link posts, media reviews in Almanac, and the site changelog. One of the things that's difficult with different post types like this is making sure to input all the correct metadata that's required for each type. For example, a blog post looks like this with title, tags, and an excerpt:

---
title: "Using Eleventy to Gobble Up Everything I Do Online"
permalink: /blog/using-eleventy-to-gobble-up-everything-i-do-online/index.html
date: 2024-02-20T16:47:27.981Z
excerpt: "A blog post about how my site works based on a talk I did at the Eleventy meetup"
layout: post
tags:
    - Development
    - Eleventy
---

Link posts, on the other hand, have information about the author and the article being linked:

---
title: "Vision Accessibility on Apple Vision Pro"
permalink: /links/vision-accessibility-on-apple-vision-pro/index.html
link: https://zmknox.com/2024/02/18/vision-accessibility-on-apple-vision-pro
date: 2024-02-20T10:54:56.550Z
author: 
  name: Zach Knox
  web: https://zmknox.com
  feed: https://zmknox.com/feed.xml
  mastodon: https://snailedit.social/@zmk
---

To help with this, I built a CLI tool in Node. The tool uses a combination of Commander to create the interface, and @inquirer to ask questions and grab that data. When I run it, I am presented with a number of options:

............................................................
............................................................
..................@@@@@@@@@@@@@@,..&@@@@@,..................
..................@@@@@@@@@@@@@...@@@@@@....................
........................@@@@@@...@@@@@@.....................
.......................@@@@@@...@@@@@@......................
.....................%@@@@@*..%@@@@@*.......................
.......................@@@@@@...@@@@@@......................
........................@@@@@@...@@@@@@.....................
..................@@@@@..@@@@@@...@@@@@@....................
..................@@@@@...#@@@@@/..#@@@@@/..................
............................................................
.......................rknight.me...........................
............................................................

? What do you want to do? (Use arrow keys)
❯ Create a new post
  Create a new link post
  Create a new changelog entry
  Add a new project
  Add a new game
Create a new post

If I choose "Create a new post" I get asked a bunch of questions about the post including title, slug, and tags:

? What do you want to do? Create a new post
? Post title A New Post
? Post slug a-new-post
? Tags Eleventy, OpenWeb
? Select Project none

It then takes all this data, formats it to YAML frontmatter, and creates the file in the correct location. In this example, a file named 2024-02-21-a-new-post.md will be created at src/posts/blog and the front matter will look like this:

---
title: "A New Post"
permalink: /blog/a-new-post/index.html
date: 2024-02-21T11:36:14.696Z
excerpt: ""
layout: post
tags:
    - Eleventy
    - OpenWeb
---

I don't ask for the excerpt on the CLI because I'm not always sure what that will be until the post is finished. This is what the (truncated) code looks for creating a new post:

const title = await input({ message: 'Post title' })
const slug = await input({ message: 'Post slug', default: slugify(title) })

const slugDate = new Date().toISOString().split('T')[0]
const year = new Date().getFullYear()
const postDate = new Date().toISOString()

const tags = await checkbox({
    message: 'Tags',
    choices: [
        { name: 'ActivityPub', value: 'ActivityPub' },
        { name: 'AdventOfCode', value: 'AdventOfCode' },
        { name: 'AI', value: 'AI' },
        // the rest of my tags
    ],
})

const project = await utils.selectProject(__siteroot, {
    title: 'none',
    value: 'none',
    description: 'none',
})

let meta = `---
title: "${title}"
permalink: /blog/${slug}/index.html
date: ${postDate}
excerpt: ""
layout: post`

if (tags.length > 0)
{
    meta = `${meta}\ntags:\n${tags.map(tag => `    - ${tag}`).join('\n')}`
}

if (project.value !== 'none') {
    meta = `${meta}\nproject: ${project.link}`
}

meta = `${meta}\n---`

fs.writeFileSync(`${__siteroot}/src/posts/blog/${year}/${slugDate}-${slug}.md`, meta, { flag: "wx" })

For link posts, I input a link and the CLI tool fetches the page content, then uses linkedom to find the title, author details, and RSS feed if those exist to include them in the front matter.

// ask for link, slug, title, etc

const {
    title: foundTitle, author, feed, mastodon
} = await utils.fetchPageData(link, ['title', 'author', 'feed', 'mastodon'])

const meta = `---
title: "${title}"
permalink: /links/${slug}/index.html
link: ${link}
date: ${postDate}
author: 
  name: ${author ? author : ''}
  web: ${domain}
  feed: ${feed}
  mastodon: ${mastodon.join(', ')}
---`

// write the file

The source code for the CLI tool is on GitHub.

So that's an overview how I'm pulling in all my stuff from different places on the web into this site. It's kind of complicated but it works well for me. My site is on GitHub if you want to look at how I do something specific or feel free to ask me on Mastodon.

More Things You Can Do on Your Website

2024-02-19T12:14:03Z

James wrote a great post with ~~100~~ 83 ideas for things to do on a website^[1] with a call for people suggest more so here's another ten suggestions to add to his list, most of which already exist on my site because I have no imagination.

A uses page with software, tools, whatever you use to do things you enjoy doing
A collections page to show off your games, books, stamps, or anything else you collect
A colophon to explain how your website is created, built, and hosted
Create a podroll to list the podcasts you like to listen to
A wiki or a notes page to write down things you've learnt, little snippets of code, or useful website you use
A version history page to show what your website has looked like in the past
As an extension of James' number 33, add a subscribe page to list all the ways someone can see your blog posts like RSS and Mastodon
A save page to list referral links for things you recommend
A log of all the movies and tv shows you've watched, books you've read, and games (board or video) you've played
A stats page to show how many words you've written in total, how many posts, or something else interesting about your site

I will be consulting a lawyer about the false advertising, James ⤾

Notes on Buying a House

2024-02-17T15:20:26Z

tl;dr: The process is terrible. Also, these notes are only relevant to the UK.

Process

This is simplified but, in theory, the process is:

Save a deposit
Work out how much you can borrow - this tool on Money Saving Expert works well
Find, view, and put in an offer on, a house
Have an offer accepted
Wait around needlessly while everyone involved in the process ignores you for days on end and eventually gets everything signed off
Have a house

Finding a House

Right Move is pretty much the only option for finding houses unless you're spending over a million.

Saved Searches

Right Move has two search options: by area/postcode or by drawing an area. For areas you can set a distance from the area which depending on where you're looking can be useful; for me, it wasn't because of various islands that are technically within a couple of miles but in reality are ~5 miles away by road. Alternatively, you can draw an area on a map and it will show you all houses within it.

You can save these searches and then enable email alerts for when new houses get added. The option says "Instantly" but it's not. In some cases, I would see a new listing and not get an email about it for 2-3 hours. The best advice is, if you can, keep the search page open sorted by recently added and periodically refresh the page.

Viewings

When you call for a viewing, every estate agent wants to take your details so they can let you know about new houses. In my experience they'll just send you a few emails of stuff that's already on Right Move. They might organise a viewing for one that's in the process of being listed, but the one time this happened to me the house was nothing like what I wanted so it was a waste of time.

Stamp Duty

Stamp Duty Land Tax is a tax you have to pay when buying a house. If you're a first time buyer you pay no stamp duty if the house is worth less than some threshold, at the moment it's £500k. The government have a stamp duty calculator to work out how much you have to pay.

Conveyancing Solicitors

For solicitors, there are two choices: local firm (although in theory you could use one from anywhere) or an online one. I would recommend a local one as it makes it way easy to get in contact with them, drop paperwork off, and get things signed quickly.

Moving In

Just get the meter readings as soon as you have the keys otherwise this becomes a real hassle. Everything else can wait.

How I Make a Podcast Episode

2024-02-17T12:45:47Z

I have recorded and edited over 175 episodes of my podcasts so I know some things about podcasts but this is basically a list of things I use. If you want to hear from actual professionals I recommend episode 200 of Upgrade.

I record using a Razer Seiren Mini. I previously used a Blue Yeti. There are much better microphones available but for what I do, the Razer is fine.

I record my microphone and the call itself, as a backup, with Audio Hijack Pro. My setup looks likes this:

The Skype (or Facetime or Zoom) audio is recorded to a file and output to my headphones. My microphone input is then recorded to it's own file.

Once recording is done and I have both files (mine and my cohost's), I edit the show in GarageBand. I mostly just need to remove any cross-talk and little noises. It would probably be easier in Logic Pro but I can't justify paying for it. I then export the edited episode to a .wav file.

To add metadata like titles, descriptions, chapters, and the cover art I use Marco Arment's Forecast and export it to mp3 from there.

Finally I upload the file to my CDN and add the episode to the podcast website - which is a custom-built Eleventy site.

Webmentions Redux

2024-02-16T13:05:34Z

After thinking on all the issues and discussion around the privacy of webmentions, I've re-done everything about how I show webmentions on my site, more specifically backfeeding Mastodon replies.

Follow Up

Chris noted in his post, as pointed out by Cam, that the issue we were actually talking about is backfeed. That is, pulling in interactions from syndicated copies of posts - in this case, my toots on Mastodon.

There were a couple of points made in the replies that were interesting. Lots of replies along the lines of "If an ActivityPub server/instance can show replies, why can't a (non-AP) website do it?". I agree in principle but a non-AP website won't get notified of deletions so those replies exist forever. Nathan replied with an unlisted toot as a test to see what would happen and Bridgy doesn't take note of this at all. I don't know if it should but "unlisted" is designed to not show a toot in the public/federated timelines so not showing as a reply seems like a reasonable assumption.

Webmentions Version Two

Mario Hamann's solution of showing just the counts of replies, likes, and boosts caught my eye as a good way of handling this; no one's data is being pulled, it's clean, it's simple. Just what I was looking for.

My current implementation to show links to my posts on Mastodon was separate from my webmention fetching so I didn't have data to say "This Mastodon post is related to this blog post and has 12 likes". So I needed to pull all my Mastodon posts that include a link to one of my blog posts. I grabbed my export from the dashboard of social.lol but that export is in ActivityPub format and doesn't include reply, like, or boost counts so I switched over to my API and added a new script. I wanted the data keyed by the blog post path so I could easily get all toots for a specific post:

{
	"/blog/post-slug": {
		"12345678": {
			// toot data
		},
		"12345679": {
			// toot data
		}
	}
}

The script to get every one of my posts was easy enough, fetch my statuses, add them to the dicussion object, and page through until I've got them all:

let maxId = null
let discussion = {}

while (true) {
    const res = await fetch(`https://social.lol/api/v1/accounts/109523762776095110/statuses?exclude_replies=true&limit=40&exclude_reblogs=true${maxId ? `&max_id=${maxId}` : ''}`)
    const toots = await res.json()
    if (toots.length === 0) break
    
    toots.forEach(t => {
        const urls = (extractUrls(t.content) || []).filter(url => url.includes('https://rknight.me'))
        const isSyndicate = urls.some(url => url.includes('https://rknight.me'))

        if (isSyndicate) {
                urls.forEach(url => {
                    let path = new URL(url).pathname
                    if (!path.startsWith('/blog') && OLD_URLS.includes(path)) {
                    path = `/blog${path}`
                }
                
                if (!discussion[path]) discussion[path] = {}
                discussion[path][t.id] = t
            })
        }
    })

    maxId = toots.at(-1).id
    fs.writeFileSync('./api/discussion.json', JSON.stringify(discussion, '', 2))
    await new Promise(r => setTimeout(r, 2000))
}

I added the 2 second timeout just so I didn't hit any rate limits (I don't know what they are and couldn't be bothered to look). Going forward I will run this script on the latest 40 toots and add them to the data which you can see here. A side note here, the OLD_URLS part of this code is because I recently moved all my blog posts under the /blog path so some posts wouldn't match otherwise.

Initially, I had a similar design to Mario but I ended up expanding it to be more of a card as if I had embedded the toot in my site manually. This is what the code looks like in webmentions.njk, included at the end of each post:

{% if discussion[webmentionUrl] %}
    {%- set discussionData = discussion[webmentionUrl] | oValues -%}
    {%- for m in discussionData %}
        <div class="toot">
            <div class="toot__header">
                <svg class="icon mastodon-icon"><use xlink:href="#mastodon"></use></svg> <a target="_blank" href="{{ m.url }}">Discuss on Mastodon</a>
            </div>
            <div class="toot__content">{{ m.content | safe }}</div>
            <div class="toot__data">
                <div><a target="_blank" href="{{ m.url }}"><svg class="icon"><use xlink:href="#socialreply"></use></svg> {{ m.replies_count }}</a></div>
                <div><a target="_blank" href="{{ m.url }}/reblogs"><svg class="icon"><use xlink:href="#socialboost"></use></svg> {{ m.reblogs_count }}</a></div>
                <div><a target="_blank" href="{{ m.url }}/favourites"><svg class="icon"><use xlink:href="#sociallike"></use></svg> {{ m.favourites_count }}</a></div>
            </div>
        </div>
    {% endfor %}
{% endif %}

I had to add a filter to Eleventy to run Object.values on the toots so I could map over them in the code:

oValues: (data) => { 
	return Object.values(data)
},

I also include other relevant discussion links where appropriate (like HackerNews) so those are also styled to match the toot card style. The final result looks like this:

This new version isn't webmentions. It doesn't check for replies or likes or boosts. This is just showing where I've posted links to my posts, or syndication as it's called in the indieweb world. This solves all of the privacy issues outlined in my post as well as ones Wouter, Chris, Cam, and others have mentioned.

I haven't turned off webmention collection yet. I may still come back to data to see what "proper" webmentions I get and if it's worth showing those in the future. I will be turning off the Mastodon integration that Bridgy provides though - I just don't need to be collecting those replies.

There is one other reason to remove the old webmentions implementation: it is, quite frankly, a pain in the arse to maintain. Once it's working in theory it shouldn't break but it does on occasion. There's an ongoing bug with emojis showing as ???? which I needed to handle, along with a bunch of other edge cases.

I will miss the little grid of avatars for likes and boosts because I'm quite fond of the design, but I won't miss the complication webmentions adds to my site. Assuming everything has worked, this post should have the toot embedded below.

Update 2024-02-19: If you want an even easier way to do this, David Darnes has made a nice web component to do it for you.

Three Months of The Johnny Decimal System

2024-02-15T08:24:22Z

Three months ago I wrote about using the Johnny Decimal System - a system to organise your files, emails, and everything else in a way that means things are findable and storable quickly.

I had assumed, like a lot of things I try, that given a month or so I'd be back to just dumping files wherever and being annoyed when I couldn't find things but to my surprise the system is working. Really well. If I download a podcast episode I'm mentioned in^[1] I know it goes in 20-29 Podcasts > 22 Follow Out > 22.02 Podcast Mentions, that gifs go in 50-59 Media > 54 Memes > 54.02 Gifs, and my payslips go in 10-19 Home and Family > 13 Legal > 13.05 Payslips. I can find these quickly regardless of if I use terminal, Finder, or Alfred's find command.

I still have a fairly substantial downloads folder filled with random things but every now and again I can go through, delete what I don't need, and file everything else in the right place. I've also stuck with keeping my index in Obsidian where I've been keeping it up-to-date with related notes about my files.

This might be the first time a new system, of any kind, has actually clicked for me. The workbook, which I highly recommend, is only $19 now if you think this is something you want to try. And as if we planned this (we definitely didn't), just as I was about to publish this post Johnny announced the workshop which has a pre-launch price of $49.

Don't at me, I live for validation ⤾

Mastodon Webmentions and Privacy

2024-02-10T16:36:01Z

Wouter's post about retiring their webmention server is an interesting write-up on how complicated webmentions and indieweb functionality in general can be but one point from it has stuck with me since reading it:

...people mentioning or replying to your link via Twitter suddenly appear as a mention on your site. Great stuff, right? Except those people have no idea their avatar and text is being yanked. I’ve questioned these practices before and it’s clear that they’re built without thinking too hard about privacy.

Until this point I also hadn't considered the privacy aspect of using webmentions like this. Assume someone, @userX for example, replies to one of my toots about a post I've written. Bridgy will pull in that reply with the avatar, username, and the reply content for me to display on that post as a reply. As it's setup right now, that reply will live forever on my post regardless of what @userX does with their original version of the reply. Should I be periodically checking if a reply has been deleted (or edited for that matter)? In theory, that could be hundreds or thousands of links to check.

Secondly, not everyone even knows that this is happening when they reply to a toot where the site owner has webmentions enabled. Should there be some extra step to say "Are you happy for this to show up on this post"? That seems like a good way to kill the whole concept but maybe we should? I don't know.

Yes the replies are set as "public" (or at least I think Bridgy only picks up public ones) but public doesn't mean "do whatever you want and copy it forever".

For all the effort that's been put into making webmentions work I'm now wondering if I should even be doing it. I certainly wouldn't want anyone to feel like their posts are being taken without their permission or used in a way they never intended.

My Favourite Type of Time Travel

2024-02-06T17:30:00Z

I was recently^[1] asked by Zoe the following question:

What's your preferred type of time travel (like singular timeline where things always where, multiverse when you go back, some other shit)

That is quite the question. We should start with the different types of time travel to even be able to answer this. I'm not covering every possible version from media, just the ones I care or know about. Notably, I have not included Dr Who anywhere here because 1. I've never watched it 2. John and Kate in the Relay discord said it does whatever is needed for the plot and isn't consistent.

Types

Self-Correcting/Paradox

This is almost anti-time travel, the commonly-known "Grandfather paradox". If I travel back in time to kill my grandfather, I would never have been born and therefore couldn't have gone back to kill him in the first place. Anyone I went back to kill (assuming I chose someone I knew of) would self-correct because by them not existing I wouldn't know about them so would never have gone back.

This one also has the honour of being the least fun. Barely even time travel.

Single, Changeable Timeline

Examples: Back to the Future, Futurama "Roswell That End Well", Hot Tub Time Machine, Blackadder Back and Forth

This is the most common version seen in media and the one I'm most familiar with, having watched the Back to the Future movies at least once a year for the past 30 years. You go back, do something, and on your return things have changed. Maybe you go back and accidentally stop your mum meeting your dad, come up with an elaborate plan to get them back together even though she's into you now, turn your dad into a completely different person, play Johnny B. Goode for your parents classmates, then your mum names you after a guy she had the hots for in school and your dad says nothing about this. Or something less...weird.

The second movie explains these changes further as the timeline "skewing"; to get back to the "original" future you came from you need to fix whatever change you made in the past.

Inconsistencies

Do Marty's parents just not notice their kid looks a hell of a lot like that guy from when they were at school? Why did they name their third kid Marty and not their first one?
When Marty goes to the future in Part 2 he would get there to find his kids don't exist because he's been missing for 30 years, surely? Or does time travelling create some kind of clone so you keep existing in the timeline? It makes no sense.

Single, Changeable, Always-Happened Timeline

Examples: Harry Potter and the Prisoner of Azkaban, Bill and Ted

This is almost identical to above with the exception that the things that someone might do in the past already and always happened. So if you make a decision to go back in time and throw a rock at yourself, you already did.

This also happens in Bill and Ted when they need the keys to the police station cells. They think about doing it and the keys are there.

Notably, there isn't really anything in Bill and Ted that seems to change the timeline at all - even taking the princesses from medieval England doesn't change anything, at least that we know of from the movie.

Inconsistencies

At the point Hermione and Harry decide to time travel they've already experienced some of the things they will do when they travel; What happens if they decide not to go or will they 100% go because it's happened already?

Multiverse/Branching

Examples: Avengers: Endgame

This one is the easiest to explain away from a plot point of view. You go back, kill baby Thanos, and now you have two timelines: yours where Thanos is alive and a new one where Thanos is dead. Every action taken in the past creates a new branched timeline.

Also worth noting here that every decision made, even in the present, can also create new branches, it's not exclusive to when you're in the past.

Inconsistencies

None that I can think of. It's a very "clean" version of time travel.

Stable Time-Apparatus ("The Box")

Examples: Primer

As far as I know the only example of this is in Primer, the 2004 movie. I will try and explain the short version here but Wikipedia has a handy diagram too.

The Box is turned on by A with a 15 minute delay at 11:45am. A then hides (so as not to affect events and collect useful information like stocks) away until 6pm and which point he enters the box, and waits 6 hours to come out of the box...at midday (11:45 + the 15 minute delay). A is now B, with the original A still hiding away collecting stock info. If you understood this, you won't once you watch the movie.

This method only allows travelling back to the point when the box was turned on, no going back to punch Hitler here. Lots of opportunity for personal gain with this.

Inconsistencies

None

Time Loop

Examples: Groundhog Day, Palm Springs, Russian Doll Season 1

Usually a day, the character is stuck in a loop of the same period over and over, never being able to change what happens or get out of the loop. This isn't always considered as time travel but the consequences for the characters in the movies/shows are similar: they know what's going to happen and they can change things using their knowledge of how the loop will play out albeit for only for the current "loop" they're in.

The exit methods for the loops are usually vague like "become a better person" except in the case of Palm Springs where they use a bomb.

Inconsistencies

None

Forward or Backwards Only

Examples: Futurama: "The Late Philip J. Fry" (forwards) and Futurama: "Bender's Big Score (backwards)

Futurama features two machines that only go one way: one for forwards only and one for backwards only.

We're all doing the forwards one right now anyway it just happens to take one second to travel one second into the future. But if you want to go faster the "Forwards Time Machine" from Futurama does the trick.

Not sure of the usefulness of this one. In the Futurama universe if you go to the end of time the universe just starts again as it was before (but a few feet lower than before) so this could be used for backwards time travel but it's would be annoying to do.

The backwards-only version is mostly useless for humans unless your goal doesn't include coming back to the present. In the episode, Bender is the one who does it so he can just wait it out on account of being a robot. This does have a paradox of sorts that all the Benders waiting around to come back are all in the same place at once but that gets corrected evenutally.

Inconsistencies

None

My Favourite

Picking a favourite here is hard and would entirely depend on my goals.

Multiverse is kind of terrifing that every little action is creating a brand new timeline with untold horrors based on my decisions. It's a handy version if your goal is to steal something without any consequences to your own timeline.

Primer's box is useful only in the way the movie presents: for short-term personal gain. I won't spoil the movie but there are big consequences for making your days 36 hours long instead of 24. I'd want to use this once every now and again but I'm not sure I could be trusted.

I don't like the predetermined nature of the already-happened-no-matter-what timeline so I think my favourite, despite having the most paradoxes, is single timeline, Back to the Future style. There's a reason this is the one that appears more in media than any other: despite the problems, it's easy to explain quickly without need to sit down and write notes and diagrams (looking at you, Primer).

Time Travel Miscellania

I am a sucker for time travel media and I'll pretty much watch anything where it's involved. I can't get enough of them like Timeless and Legends of Tomorrow even if they are cheesy as hell.

I would like to see a movie where someone creates a time machine based on the Back to the Future "science" and travels to the future only to find out about the paradoxes and hilarity ensues. Get on it, Hollywood.

The DeLorean is obviously the coolest time machine.

This Minute Physics video on the topic is excellent.

This was easily over a year ago now, I only just got around to finishing this article ⤾

Things I Like: Pizza the Action Seasoning

2024-02-04T15:50:46Z

I'm going to try doing some quick posts like this going forward about things I like. Being the naming genius I am, I'm calling this series "Things I Like".

Pizza the Action is a seasoning from the UK-based company Condimaniac. It’s a seasoning mix designed to, as the name might suggest, go on pizza. There’s nothing particularly surprising or unusual in the ingredients list:

Tomato Flakes
Garlic Granules
Sea Salt
Onion Granules
Cayenne Pepper
Nutritional Yeast Flakes
Basil
Oregano
Smoked Paprika
Thyme

Who doesn't love a "nutritional yeast flake"? Ignoring that one, whatever their exact combination of the ingredients is makes pizzas taste fantastic. Even some cheap store-brand ones I’ve had in the past month tasted way better with a sprinkling of it. They suggest using it as seasoning for pizza sauce which I will definiely try with my current sauce recipe once the Ooni oven comes out again this summer.

Anyway, it’s tasty and I love it. I bought it from Ooni because I had some credit but they also sell it, along with a bunch of other pizza-related condiments, direct on their website.

Tech is Annoying Me This Week

2024-02-04T10:35:52Z

Computers are not my friend this week and I am basically ready to throw my computer into the sea. Here is an incomplete list of things annoying me at the moment:

Discord not marking a channel as read no matter how many times I look at it. Only force quitting fixes it.
Open source projects that say they’re “Built with Docker” with no other information about the stack meaning I have to go hunting in the code base just to find out how it’s actually built and if it’s something I’d be willing to maintain/fix if I decide to use it. This is like saying my house is “built with foundations”.
The fact that I’m forced to use Instagram’s shitty app to see my friend’s photos.
The share sheet on Apple Music on my Mac stops working at least once a day meaning I have to quit and restart it just to copy a link to an album or track.
Apple’s stupid EU DMA proposals. If what they’ve proposed gets accepted by the EU the DMA is a waste of time and they might as well not have bothered with it in the first place. Third party app stores except Apple still controls the whole thing? I can’t even.
Notifications on my wife’s Apple Watch have just stopped working for almost every app. I’ve tried everything and nothing fixes it.

Quick Thoughts on Crisps

2024-01-25T17:17:34Z

Now this is a theme I can get behind. If my specialist subject for Mastermind couldn't be Back to the Future, "Crisps of the UK" might be a close second. Following in the footsteps of Lynn, Dave, Jonathan, and Peter here are my thoughts on ~~chips~~ crisps.

Prawn Cocktail is one of the finest flavours available and I'm sad this mostly doesn't exist outside the UK.
Brannigans beef and mustard were the best crisp ever made. The flavour, texture, everything. RIP.
Of course Pringles are crisps. Sorry Peter.
Salt and Vinegar crisps should have enough salt to make my mouth numb for a day.
The pretending-to-be-artisnal crisps like Kettle are better eaten out of a bowl each time you walk past said bowl.

Related to this: my food graveyard post.

My First Mac

2024-01-25T07:47:37Z

Apologies for the terrible filtered photos but the only versions I have are from my Instagram archive when we all thought filters were the best thing ever. They were not.

My first Mac was a 2009 27” iMac. It was a Christmas present from my parents. I had asked for a Mac Mini so a iMac was a big upgrade. I asked for the mini partly because it was cheaper and partly because I already had a (really crappy) monitor. I think it technically belonged to my dad’s company for tax reasons and I did do some work for him at least once so all good Mr tax man, nothing to see here.

Having been on hand-me-down crappy Windows laptops prior to the iMac I was blown away. The screen, the OS in general, and the third party apps. In particular, Panic’s Coda is the one I remember the most - I even used their font for my HTML and CSS tattoos.

That iMac lasted me a long time as both my general computer and my “TV”. Then a few years in the hard drive failed which meant I had to take it apart and replace the drive. If you don’t know, to get to anything in one of these iMacs, you need to get the glass off the front, ideally with specialised tools that I didn’t have, so I used a toilet plunger instead^[1].

Another fun thing about this; the hard drives in these iMac also include temperature sensors. At the time, I couldn’t afford one with the sensor so I installed a normal drive and then used a third party app called something like “fan control pro”. When it booted up and the app wasn’t running, the fans would run on full until the app launched. Good times.

The iMac got retired when I bought a real TV like a grown up and the Mac itself was replaced with a MacBook Air and since then a series of MacBook Pros. You can see my current setup on my uses page.

These days I still love my Mac but I’m not so enamoured with the company but that’s a post for another day.

Don't worry, I cleaned it ⤾

Creating an OPML File for my Blogroll

2024-01-21T07:10:16Z

Last night I updated my blogroll and podroll to include a description about the sites instead of just showing the latest post; this is much more useful to someone who lands on that page. Then I realised I could add an OPML file so anyone could subscribe to all of the feeds in the roll all at once.

OPML stands for "Outline Processor Markup Language" which isn't useful to explain what it does in this context. At it's core, it's a XML document that has a list of RSS feeds you can import into a feed reader or podcast app. It looks something like this:

<?xml version="1.0" encoding="UTF-8"?>
<opml version="1.0">
    <head>
        <title>A title</title>
        <dateCreated>Sun, 21 Jan 2024 08:13:40 +0000</dateCreated>
    </head>
    <body>
        <outline text="A Cool Blog" title="A Cool Blog" type="rss" xmlUrl="https://example.com/rss" htmlUrl="https://example.com/"/>
    </body>
</opml>

Each outline element is a feed with some attributes to describe it:

title - The title of the feed/site
text - This is what will be shown by feed readers when importing an OPML. This can be different to title but I keep them the same
type - the type of feed. I'm not sure it matters if you set an Atom feed with the type set as rss, most feed readers will handle this anyway
xmlUrl - a link to the feed
htmlUrl - a link to the site

My rolls are configured with a data file:

// src/_data/blogroll.js
module.exports = () => {
    return [
        {
            name: 'A Blog',
            url: 'https://example.com',
            feed: 'https://example.com/rss',
            description: 'A cool blog about things',
        },
        // the rest of the sites
    ]
}

To generate an OPML file from the roll in Eleventy, I added an opml.njk file and configured it like this:

---
permalink: /blog/roll/opml.xml
eleventyExcludeFromCollections: true
---
<?xml version="1.0" encoding="UTF-8"?>
<opml version="1.0">
    <head>
        <title>RSS Feeds for all Robb Knight's Blogroll</title>
        <dateCreated>{{ page.date | dateToRfc822 }}</dateCreated>
    </head>
    <body>
        {%- for site in blogroll -%}
            <outline text="{{ site.name }}" title="{{ site.name }}" type="rss" xmlUrl="{{ site.feed }}" htmlUrl="{{ site.url }}"/>
        {% endfor %}
    </body>
</opml>

The dateToRfc822 filter used in dateCreated is a filter provided by the Eleventy RSS plugin. Then I loop through all of the sites in my blogroll and output an outline element for each one.

Finally I added a link to the file on each of the roll pages. Note I include a download attribute so browsers will (hopefully) download the file rather than show the XML file directly:

<a href="opml.xml" download="download">Download the OPML file</a>

You can view my "rolls" here:

What Even is a Webmention?

2024-01-20T16:11:08Z

My post about implementing webmentions on this site has been fairly popular and I get quite a few questions about something I don't think I explained properly in the post which all boil down to "what is a webmention though and what has that got to do with Mastodon?".

Before we get started I will say I found the different pages explaining the technical details of webmentions to be lacking in terms of real-world use cases so I am basing this on what I can piece together from those sites.

"Real" Webmentions

A webmention is "a simple way to notify any URL when you link to it from your site.". The use of "simple" here is stretching the definition but it does at least explain what they are, sort of. There are different types of webmentions but the one typically used by a website is mention-of. Basically, "I wrote this post and I have mentioned your or your website in it". These need to be sent from the poster to the website being mentioned. For my site I use the CLI version of webmention.app; each time a new post appears in my RSS feed, I use the command line package to send mentions to any supported site that I've included in the post:

npx webmention path/to/feed.xml --limit 1 --send

You might be thinking I'd link to an example of one of these types of webmentions on my site but I don't show them. I checked my webmentions for this type and out of the ~40 or so that were there, only a handful were actually legitimate, the rest were either now-dead sites or spam. If I can come up with a system for approving them in the future, I will add them to the site. The open nature of webmentions means there's very little to stop someone from sending spam webmentions. These can be blocked in webmention.io but I would never remember to do that. I also had two bookmark-of webmentions but both of those links were dead and I don't know what type of post they should refer to.

I do get some legitimate ones though so here is an example of one from Sophie, truncated for the sake of legibility:

{
    "type": "entry",
    "author": {
        // author info
    },
    "url": "https://localghost.dev/blog/everything-should-have-an-api-adventures-in-trying-to-automate-stuff/",
    "published": "2023-01-24T00:00:00",
    "wm-received": "2024-01-19T20:43:30Z",
    "wm-id": 1769280,
    "wm-source": "https://localghost.dev/blog/everything-should-have-an-api-adventures-in-trying-to-automate-stuff/",
    "wm-target": "https://rknight.me/automating-my-now-page/",
    "wm-protocol": "webmention",
    "name": "Everything should have an API: adventures in trying to automate stuff",
    "content": {
        "html": "<p>Inspired by <a href=\"https://rknight.me/automating-my-now-page/\">Robb Knight</a> I want to build my own <a href=\"https://nownownow.com/about\">/now page</a>..."
    },
    "mention-of": "https://rknight.me/automating-my-now-page/",
    "wm-property": "mention-of",
    "wm-private": false
}

Notice it has the type of mention-of and the URL for the post I'm being mentioned in.

Based on my understanding, there no reason you couldn't send a webmention about a post you've written as a reply or repost type but I haven't seen this being used, outside of how Bridgy converts Mastodon interactions.

Mastodon "Webmentions"

Calling what I show at the bottom of my blog posts "webmentions" is a bit misleading because they're actually posts, likes, and boosts from Mastodon; nothing to do with webmentions.

What's actually happening is those interactions are being converted to webmentions by Brid.gy which then forwards them on to webmention.io. As an example this toot on Mastodon from Zach is a reply to my toot which includes a link to one of my blog posts. Bridgy will see this reply and convert it to a webmention of the type in-reply-to:

{
    "type": "entry",
    "author": {
        "type": "card",
        "name": "Zach Leatherman :11ty:",
        "photo": "https://webmention.io/avatar/media.social.lol/f4e48698b4079b12cff61448419d6cf2a13293b27bdaa0a551de22a70e402f70.png",
        "url": "https://fediverse.zachleat.com/@zachleat"
    },
    "url": "https://fediverse.zachleat.com/@zachleat/109780757249677343",
    "published": "2023-01-30T23:30:17",
    "wm-received": "2023-01-30T23:48:08Z",
    "wm-id": 1611442,
    "wm-source": "https://brid.gy/comment/mastodon/@robb@social.lol/109780686521180648/109780761774871086",
    "wm-target": "https://rknight.me/adding-webmentions-to-your-site/",
    "content": {
        "html": "<p><span class=\"h-card\"><a href=\"https://social.lol/@robb\" class=\"u-url\">@<span>robb</span></a></span> awesome!</p>",
        "text": "@robb awesome!"
    },
    "in-reply-to": "https://rknight.me/adding-webmentions-to-your-site/",
    "wm-property": "in-reply-to",
    "wm-private": false
}

You can see it has a target attribute which is my blog post, the details of the author of the toot, as well as some other metadata including the in-reply-to type. The same thing will happen for likes (like-of) and boosts (repost-of). I then use this to show this at the bottom of my posts.

What Bridgy doesn't do, and I'm not even sure how this could work given the federated nature of Mastdon, is pull in a toot from someone else posting a link to one of my posts. In theory, I could monitor the federated feed of social.lol and see if something pops up but it's not guaranteed to find all, if any, mentions.

Shouldn't all this be easier?

If you've read my post, or Cory's post, or one of the many other posts about webmentions in Eleventy you'll know this isn't as simple or easy as it should be.

First off given how few "real" webmentions I have, I'm tempted to skip that part entirely and just pull Mastodon interactions directly. I'm not a fan of relying on other services that I don't control so this would solve that for me. I haven't looked at the API too much for this, but I can't imagine it would be too difficult^[1].

Secondly, to my point above about relying on other services, I've yet to see a good implementation of something that can be easily self-hosted. I want to explore that a more in the future. Let me know if there is something you're aware of.

As for sending webmentions I could imagine a service for sending webmentions where you just point your RSS feed at it and it deals with sending webmentions for you, rather than using something like webmention.app which is very good but either requires manually entering each blog post, or setting up something on each build of your site; not the most user friendly solution.

Famous last words ⤾

Deleting S3 Files with Spaces in the Name

2024-01-17T15:26:31Z

This is a fun one: I had a file, lets say it was originally called mycoolfile (2).png, it's been uploaded to S3, and then stored in our database. Except at some point it's become URL encoded so it looks like this instead: mycoolfile%20%282%29.png. Now I want to delete that file using the AWS SDK for PHP which you can do, in theory, like so:

$this->s3->deleteObjects([
    'Bucket' => 'coolbucket',
    'Delete' => [
    'Objects' => [
        [
            'key' => 'mycoolfile%20%282%29.png',
        ]
    ],
]);

Except, no. AWS will not find that file, won't delete it, and won't give you an error message^[1]. Add a urldecode and it deletes the file with no issues.

$this->s3->deleteObjects([
    'Bucket' => 'coolbucket',
    'Delete' => [
    'Objects' => [
        [
-            'key' => 'mycoolfile%20%282%29.png',
+            'key' => \urldecode('mycoolfile%20%282%29.png'),
        ]
    ],
]);

I guess I should have checked this sooner but I was looking for the bug in completely the wrong place so this took longer to find than expected. This blog post is definitely going to save me pain again in the future.

This might be a limitation of the PHP SDK rather than the API in general ⤾

Fetching Package Dependents from GitHub

2024-01-16T20:50:28Z

A conversation in the Eleventy Discord led me to remember about the dependents page of a GitHub repository. That is, a list of other repositories that are depending on a package, in this case my Post Graph plugin. I wanted to show which people are using the package on the post graph website.

GitHub don't offer an API endpoint for this so I made a new data file in Eleventy, installed linkedom, and got to inspecting the elements of that page. The dependents list is an element with an id of dependents with two links per repo. The first leads to the author's profile and the second to the repository: this second link is the one I care about. To narrow it down I had to target both the class (text-bold) and the data attribute (data-hovercard-type) then grab the href from it:

const res = await fetch('https://github.com/rknightuk/eleventy-plugin-post-graph/network/dependents')
const html = await res.text()

const { document } = parseHTML(html)

const dependents = Array.from(document.querySelectorAll('#dependents .text-bold[data-hovercard-type]')).map((el) => {
    return {
        link: `https://github.com${el.href}`,
        name: el.href.replace('/','')
    }
})

Once this was done I could output the list on the Post Graph site at the top:

{% if dependents.length > 0 %}
    <details>
        <summary>Used by {{ dependents.length }} people</summary>
        <ul>
            {% for d in dependents %}
                <li><a href="{{ d.link }}"><code>{{ d.name }}</code></a></li>
            {% endfor %}
        </ul>
    </details>
{% endif %}

Snippets I Use Regularly

2024-01-13T14:17:27Z

Someone recently asked me how I was able to respond to a message so quickly to a keyboard shortcut question using the command and shift symbols (⌘ ⇧) in my response. Snippets is the answer and I thought it would be a good idea to post the ones I use regularly.

These all run through Alfred which is my favourite Mac app by a longshot but there are other options that do similar things like TextExpander, Espanso, and Typinator. I always prefix my snippets with ; so I don't accidentally trigger them during normal typing^[1].

Exported snippets from Alfred are in an .alfredsnippets file which is a wrapper around a sqlite database. Instead of copy and pasting these I used the Snippet Transformer workflow to convert them to CSV for easier copying.

General Snippets

These are mostly used when write code, or git commits. The date ones I probably used 20 times a day.

keyword	output	notes
`;em`	email address	I also have one of these for my work email
`;dn`	1955-11-05	Alfred syntax: `{date:Y-MM-dd}`
`;cl`	[1955-11-05]	I used this a lot for adding entries to changelogs at work
`;dtn`	1955-11-05 06:16	Alfred syntax: `{date:Y-MM-dd HH:mm}`
`;sel`	`select * from`
`;cl`	`console.log()`
`;uuid`	`A41861B4-3EF1-4161-B080-2F9CA025D78A`	Alfred syntax: `{random:UUID}`

Symbols

These are ones that I really don't need but it's nice to use the trademark or multiplication symbols when ~~shitposting on Mastodon~~ having very serious conversations with my friends. Quality Jokes™: a robb × mastodon collab.

keyword	output	notes
`;shrug`	`¯\_(ツ)_/¯`
`;bull`	•
`;deg`	°
`;x`	×	This is the symbol that should be used for multiplication. And collabs of course.
`;tm`	™
`;ctrl`	⌃
`;shift`	⇧
`;opt`	⌥
`;cmd`	⌘
`;kall`	⌃⌥⇧⌘
`;kopt`	`<kbd>⌥</kbd>`	*
`;kcmd`	`<kbd>⌘</kbd>`	*
`;kshift`	`<kbd>⇧</kbd>`	*
`;kctrl`	`<kbd>⌃</kbd>`	*

* kbd is the rarely-seen keyboard input element. Example which I definitely didn't just add to my css for this blog post: ⌘

Update: I reordered the modifier key symbols to be in the correct modifier key order.

It still happens on occasion ⤾

A Birthday Poem I'm Sure Jason Actually Wrote and Didn't Get AI to Generate For Him

2024-01-09T22:35:07Z

It's my birthday today and Jason has been more enthusiastic than anyone about it, including me. He sent me this e-card and email which I'm sure he definitely hand-crafted himself. It's a response to this toot about my home insurance company emailing me which totally wasn't a "thinly-veiled “please wish me a happy birthday, people of Mastodon” post"^[1].

In the dance of the years, another twirl,
A special day unfolds for you, Robb, in this world.
With laughter, joy, and dreams anew,
May this birthday bring delights, bright and true.

From morning's light to evening's starry view,
May each moment sparkle with happiness through.
With friends like stars and memories to weave,
A year of wonders is what we believe.

So blow out the candles, make a wish, take a slice,
In the journey of life, each year is a new spice.
From all of us at Hemispheric Views, near and far,
Happy Birthday, Robb, you're our shining star!

*This email is GDPR compliant.

It really wasn't but I guess also it was ⤾

Styling RSS and Atom Feeds

2024-01-07T15:08:15Z

Styled XML? Well, I never. Look at my RSS feeds all styled and fancy:

This is done with XSLT stylesheets. A truly exciting phrase. I would recommend reading Darek Kay's post on how to do this as well as mine. I won't be repeating everything Darek wrote in his post but I do have some additional details I wanted to note down.

To style an RSS or Atom feed you neeed to add a reference to an xsl file which is the styling document for the feed.

<?xml version="1.0" encoding="utf-8"?>
+ <?xml-stylesheet href="/subscribe/styles/rss.xsl" type="text/xsl"?>

I grabbed pretty-feed-v3 which is what Darek used as base for his as well. I removed all the Tailwind classes, removed the inline styles, and added a new feeds.css stylesheet to Eleventy. I pulled in Andy Bell's CSS reset, my site variables, and added a few rules to make the feed look nice.

@import "_reset.css"; /* https: //andy-bell.co.uk/a-modern-css-reset/ */
@import "_variables.css";

p { margin: 1em 0; }
h2, h3 { margin: 1em 0 0 0; }
a { color: var(--primary-links); }
a:hover { color: var(--offwhite); }

.rss-feed {
    padding: 10px 20px;
    background-color: var(--nearblack);
    color: var(--offwhite);
    margin: 0 auto;
    max-width: 800px;
    font-family: system-ui, sans-serif;
    font-weight: normal;
}

.nav__notice {
    background-color: var(--primary);
    color: white;
    padding: 20px;
}

.summary { font-style: italic; }

pretty-feed-v3 works for RSS and Darek's example works for Atom but I really didn't want to have to xsl files for each format. What I noticed was if a value wasn't found, it would output nothing, so I could just output the value for RSS and Atom to keep it to one file. See this example with the title and description:

<h2>
    <xsl:value-of select="/rss/channel/title"/>
    <xsl:value-of select="/atom:feed/atom:title"/>
</h2>
<p>
    <xsl:value-of select="/rss/channel/description"/>
    <xsl:value-of select="/atom:feed/atom:subtitle"/>
</p>

Another change I wanted to make was to only show the most recent five posts, rather than all of them. A bit of digging around and I found the answer to limit xsl:for-each to the first five:

<!-- atom -->
<xsl:for-each select="/atom:feed/atom:entry[position() &lt; 6]">

<!-- rss -->
<xsl:for-each select="/rss/channel/item[position() &lt; 6]">

Finally to make this work with Safari, as noted in the pretty-feed-v3 comments, the header must be set as Content-Type: application/xml; charset=utf-8. I added this to my Nginx config:

location ^.xml {
  add_header "Content-Type": "application/xml; charset=utf-8";
}

And there we go. This is much nicer than showing a generic XML file or worse like on iOS where it tries to open the file in whatever application has decided it handles feeds.

Netcraft, Facebook, and Digital Ocean

2024-01-06T12:18:26Z

Now I’ve calmed down after my tootstorm, here’s what happened yesterday with Netcraft, Facebook, Digital Ocean, and this blog post.^[1]

At 4:06pm I received an email from DigitalOcean that said the following:

We’ve received a report that there may be phishing material hosted on your Droplet at 164.92.144.168 .

You can review the report that’s caused this ticket to be generated at this link.

We’re currently reviewing this complaint, but wanted to notify you as soon as possible so that you can investigate and remove the content, as it is extremely harmful.

After you’ve reviewed the above report and removed the listed content - should you determine the content is phishing - we’d appreciate it if you would update this ticket so we can mark the matter as resolved.

And then this one three minutes later:

We have not taken any action at this time regarding this complaint, but request you address it within the next 24 hours. Please note that if we do not hear from you and the content is still active at that time we may take additional action to prevent access to the phishing material, up to and including temporary suspension of the Droplet involved.

So what's happened here:

Netcraft are contracted by Facebook to look for phishing sites related to Facebook, fair enough.
Netcraft have decided through whatever method that my blog post is attempting to phish Facebook login details.
They have sent an abuse report to Digital Ocean, without a human reviewing it.
Digital Ocean received this report and sent me the report claiming the post is "extremely harmful". No human involved again.

So Netcraft, on behalf of Facebook, had decided that my blog post was phishing and Digital Ocean have taken that at face value. Note the wording from here: "...so you can investigate and remove the content, as it is extremely harmful." and "...if we do not hear from you and the content is still active at that time we may take additional action to prevent access to the phishing material". So I'm hosting dangerous phishing content and also my droplet will be suspended if I don't remove the post? Why has this email been sent before anyone at DO even reviewed it.

Had I not done anything because I was busy, or whatever I might have been doing, my droplet would have been suspended on a baseless claim? These emails, quite frankly, are shitty.

I reported this on Netcraft's abuse page as as false positive and got these two generic responses back a while later:

[Opsgenie] Ben Golding acknowledged alert: False positive report for takedown incident 3ee0db5c9a6a

We have reviewed the site and agree that it was incorrectly identified as phishing. We have now halted the takedown process and sent retraction messages to all parties contacted. We have also removed the site from our phishing blocklist.

"...agree that it was incorrectly identified". Wow how do you do it with only $100m in funding. Truly incredible.

I replied to Digital Ocean with the following:

The page mentioned in the abuse report (https://rknight.me/blog/convert-spotify-facebook-to-email-login/) is not in any way related to phishing or targeting Facebook customers. It is a blog post outlining how to unlink a Facebook account from Spotify. At no point does it request user information, or advise sharing personal details with myself or any third party.

No action should be taken here. The abuse report from Netcraft is completely frivolous and inaccurate.

And they did reply, four hours later:

Thanks for sharing that update. It looks like this was a false positive, sent over via Netcraft. There's no reason to worry, this won't be suspended. Sometimes, entities will go through these brand protection agencies a bit overzealously. We just ask that folks share a timely update to any reports of this type, as noted in that original messaging. I'll close this ticket out. If we receive any future reports, we'll always forward those along in the spirit of transparency.

"Sometimes, entities will go through these brand protection agencies a bit overzealously". And yet you take them at face value anyway? Not good enough.

The same person^[2] then replied again, having seen my tootstorm probably from Hacker News, a few hours later:

Just wanted to loop back around here since I saw the Mastodon thread and realized that there's likely a bit more information that can be useful here. Couldn't share it publicly, since it'd be inappropriate to share details related to your personal account and ticket. I also realize that "there's no need to worry" can sound inconsiderate in a medium that lacks accent, tone, and the usual mannerisms that provide context to our speech. I do apologize if that read as dismissive. That is certainly not the intent.

Okay I can agree with that. Intent isn't easy to convey in email. I think this was a direct response to this toot.

To be a bit more specific, there was never a risk of this Droplet being deleted, blocked or of your account having any restrictions in place.

Really? Because the previous email says "...up to and including temporary suspension of the Droplet". Sure sounds like restrictions to me. Then some more general information about how the reporting system works, included here for the sake of completeness.

In instances of reported phishing, we automatically pass along the initial report to maintain transparency and ask for either a response or the content removed. I don't think it'd be appropriate of us to withhold details of companies issuing such reports against our customers, and this ask is typically a reasonable one, allowing us to easily sort out the issue with the customer taking a look and sharing their perspective on the matter if they feel the report is unreasonable. Without response or the content being removed, we don't have automated actioning at this stage and would require our team to manually review the report, the content in dispute, as well as the whole of your customer account. We have the discretion to throw out any report that doesn't align with our expectations, which would naturally occur here.

Beyond phishing, our abuse team has a number of safeties baked into our infrastructure that intentionally limit us from taking action against Droplets or accounts like yours. I totally get that it can be alarming to get an alert like this, and that without the understanding shared, it can seem a bit scarier than it is. Also, worth emphasizing that no one twisted my arm to share this. I just wanted to make sure we could be as transparent as possible with you as possible and represent the work our team does in a better light, since it's certainly a hard-working group of folks.

To be clear on that last point, I don't think any single person is to blame here, nor do I think the staff at Digital Ocean are being deliberately malicious. I do, however, think the wording of the initial emails are outrageously threatening and don't line up with what allegedly would have happened if I'd done nothing.

This is all resolved now; my droplet isn't being suspended but I'm already in the process of moving my sites to Hetzner. Maybe their abuse process is just as bad as Digital Ocean, maybe it's not but that's not the point. On principle, I'm moving everything.

I'm sure this has happened before on this blog post but I can’t find any toots, tweets, or emails from me to confirm this. ⤾
I say "the same person" but the email is signed off as "Security Operations DigitalOcean Security" so I don't know 100% if it was the same person or not. ⤾

My Home Screen (January 2024)

2024-01-03T14:22:04Z

Since the last time I posted my homescreen in 2017 the main change is widgets. I still kind of dislike them and wish I could customise them more but it's better than not having them.

Top left is Marvis Pro which aside from being a nice music player, also integrates with Last.fm; the main reason I use it. The other widgets are Fantastical and Reminders.

Most of the apps have been on my homescreen for long time with the exception of two. Huckleberry is a baby tracking app for keeping track of feeds, sleeps, meds, and poops. It's pretty crap but my wife chose it and it's free for what we need. Omnivore is my current read-later app. It's lovely, and free, but doesn't quite do what I want so I'm in the research phase of trying some other services.

My wallpaper is Baby Knight and I have the large photo widget on the screen to the left^[1]. And dark mode is on always.

I have no idea what this screen is called. ⤾

New Old Posts

2024-01-03T13:31:33Z

Yesterday Chris imported 470 old posts of his into his website and I was inspired to do the same.

The earliest posts I could think of were when I was writing reviews of various iPhone apps for iPhoneWorld.ca in 2009. Sadly the site has been offline a long time so I fired up the internet archive and managed to find 14 of those reviews. It's a goldmine of glorious pre-iOS7 design, check out all the posts with the #iPhoneWorldCA tag.

After that I wrote for a while for AppAdvice which does still exist but all my reviews are gone. Thankfully I had archived the 15 reviews previously which you can view on the #AppAdvice tag.

Deep in my computer archives I found a Tumblr backup from 2010. Most of these posts were just link posts and basically all of the links were dead. I did manage to save a few posts though:^[1]

Finally I found an old version of this site which had a lot of posts from 2010 and 2011 that weren't here for some reason, so that added another 82 posts.

I updated my postsForFeed collection in Eleventy so that posts older than 2013 won't show up and spam everyone's feed reader^[2]:

postsForFeed: (collectionApi) => {
    return collectionApi.getFilteredByGlob("src/posts/blog/**/*.md").reverse().filter(p => {
        return moment(p.date).isAfter(moment('2012-12-12'))
    })
}

None of these posts are particularly exciting but I want to keep as much of it as I can online. As far as I know, this site now contains every article I've ever written.

lol Evernote ⤾
Not a dig at you, Chris. More of a "thank fuck someone else did it first" ⤾

Making a Word Cloud for App Defaults

2024-01-02T12:32:59Z

Since I last blogged about the App Defaults project the number of blog posts has more than doubled; there are 320 now!

A few people have said something along the lines of "It would be cool to see what the most popular apps are" and I told them I'd been working on a way to do it. I shipped the best approximation I can do given the blog posts don't have a standard format: a word cloud.

I created a new script called extract.js and used @extractus/article-extractor to extract the main article content from everyone's blog posts and write that to an HTML file.

import { extract } from '@extractus/article-extractor'
import fs from 'fs'

const sites = JSON.parse(fs.readFileSync('../_data/sites.json', 'utf8'))

const run = async () => {
    for (let i = 0; i < sites.length; i++) {
        const input = sites[i].url

        try {
            console.log('running for ' + input)
            if (!fs.existsSync(`./_output/_${i}.html`)) {
                const article = await extract(input)
                fs.writeFileSync(`./_output/_${i}.html`, article.content)
            }
        } catch (err) {
            console.log('error caught, writing blank file')
            fs.writeFileSync(`./_output/_${i}.html`, '')
        }
    }
}

Once I had the HTML, I needed to extract the words. The initial version used a combination of regex, find-and-replace, and generally nonsense to try to get a clean set of words. This did not work; I ended up with words joined together and punctuation where it shouldn't be. I showed the demo on the Hemispheric Views hangout and Jason was very excited so I knew I had to get this working.

This morning I realised I was making this too difficult, I just wanted the text. Javascript can do that with innerText and jQuery can do it with text(). So I installed Cheerio. I used Cheerio in the past to do some web scraping. I needed to remove some rogue punctuation after the fact, and do some splitting and joining but the output is much better than before:


for (let i = 0; i < sites.length; i++) {
    // grab the html as above

    const htmlWords = $.text()
        // remove emoji
        .replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '')
        .split('\n').join(' ')
        .split(' ')
        .map(w => {
            let wf = w.trim()
            if (wf.endsWith('.')) wf = wf.slice(0, -1)
            if (wf.endsWith(',')) wf = wf.slice(0, -1)
            if (wf.endsWith('!')) wf = wf.slice(0, -1)
            if (wf.endsWith('?')) wf = wf.slice(0, -1)
            if (wf.endsWith(':')) wf = wf.slice(0, -1)
            wf = wf.replaceAll('(', '')
                .replaceAll(')', '')
            return wf.toLowerCase()
        })
        .filter(w => {
            return w && w.length > 3 && !stopWords.includes(w.toLowerCase())
        })
        .join(' ')
        .split('/').join(' ')
        .split(' ')

    htmlWords.forEach(word => {
        if (!wordMap[word]) wordMap[word.toLowerCase()] = 0
        wordMap[word.toLowerCase()]++  
    })
}

Notice I'm also filtering out words shorter than 3 characters, removing some common punctuation, as well as checking against a list of stop words. I expanded this stop words list to include some common words these blog posts all tend to have like hemispheric, duel, and defaults.

To make the word cloud I'm using wordCloud2.js which requires the words to be in this format: [['foo', 12], ['bar', 6]]^[1]. Once I had extracted all the words, I sort them by frequency, map them to the correct format, the write them to Eleventy's data directory:

// write the output of all the words
fs.writeFileSync('./_output/wordMap.json', JSON.stringify(wordMap, '', 2))

// sort by cound
const sorted = Object.entries(wordMap).sort((a, b) => b[1] - a[1])

let outputForWordCloud = []

Object.values(sorted).forEach(word => {
    outputForWordCloud.push(word)
})

// write both files to the data directory
fs.writeFileSync('../_data/wordsRaw.json', JSON.stringify(wordMap))
fs.writeFileSync('../_data/words.json', JSON.stringify(outputForWordCloud))

Once I had my data I added it to the window object on the Word Cloud page and initialised the library:

<script>
    window.WordCloudWords = {{ words | stringify | safe }}
</script>

<style>
    .canvas {
        border: 20px solid white;
    }
</style>
<canvas id="wordcloud-canvas" class="canvas" height="600" width="1200"></canvas>

<script type="text/javascript">

(function() {
    // - 70 here to account for padding
    const width = (window.innerWidth > 1200 ? 1200 : window.innerWidth) - 70
    document.getElementById('wordcloud-canvas').width = width
    document.getElementById('wordcloud-canvas').height = 600
       
    WordCloud(document.getElementById('wordcloud-canvas'), { 
        list: window.WordCloudWords, 
        rotateRatio: 1, 
        shrinkToFit: true 
    })
})()
    
</script>

The final result as of this writing (view the live version here):

What a strange format choice ⤾

Creating Permanent and Temporary Redirects with Nginx

2024-01-01T13:16:10Z

As part of a change to move my blog posts from /slug-of-post to /blog/slug-of-post I needed to set permanent redirects in my Nginx config so the old post links wouldn't 404. Forge has a UI for this but it only allows doing one redirect at a time and I had ~130 to do. So I grabbed a list of all my post slugs and formatted them with multi-line edit in Sublime Text^[1].

Add the following to your Nginx config to do a redirect for a specific URL. In my case, this lives at /etc/nginx/sites-available/rknight.me.

server {
    # 301 Moved Permanently
    rewrite ^/slug-of-post /blog/slug-of-post permanent;

    # 302 Found/Moved Temporarily
    rewrite ^/slug-of-post /blog/slug-of-post redirect;

    # the rest of your nginx config here
}

You can also do this for a whole domain. Although I didn't need to do this, it's worth noting here as well.

server {
    # redirect the root of the domain
    rewrite ^/$ http://new.example.com permanent;

    # preserve paths
    rewrite ^/(.*)$ http://new.example.com/$1 permanent;

    # the rest of your nginx config here
}

I use VSCode for most things, but Sublime is still the best at handling multi-line editing ⤾

Roast Potato Recipe

2023-12-30T23:52:12Z

I tried this recipe on boxing day this year and it was fantastic so we made some more tonight which were, unsurprisingly, also fantastic.

You will need:

Maris Piper potatoes. 2kg is a reasonable amount for 4-6 people but we ate all those between three of us so do as many as you ~~want~~ can fit in your oven
Goose fat
Olive oil (optional)
Salt
Garlic
Fresh rosemary
Fresh thyme

Peel the potatoes and chop them into four (or more if you have exceptionally large potatoes). Give them a rinse to remove some of the starch. Pre-heat the oven to 180°c.

Boil them in water with salt, crushed garlic, and a bit of rosemary and thyme for 15-20 minutes until they just start become soft. Drain them and leave them to dry for about 10 minutes.

While the potatoes are draining, pop a generous amount of goose fat (I use somewhere around 100g) in a roasting tray, along with a drizzle of olive oil if you're feeling fancy, and stick it in the oven to get the fat nice and hot.

After the potatoes have dried out and the goose fat is hot, put all the potatoes in the roasting tray and make sure they all get a good covering with the fat, then into the oven with them. All told these should cook for around 90 minutes. Every 30 minutes take them out and turn them to make sure they're cooking evenly. For the last 20 minutes, sprinkle some salt on them, and pop some garlic cloves, rosemary, and thyme into the tray. Serve them up and eat all the potatoes you can.

This recipe came from a Facebook reel which I'm not linking to for two reasons:

I had to OCR the steps out of the comments on the video so I worked hard for this
I can't find it anymore because searching for reels is impossible
Who puts a recipe in a video comment, come on

Letters with Kev Quirk

2023-12-30T23:24:40Z

Just as I started the year writing back and forth with Jason Becker, this month I was part of Kev's PenPals project. This is the conversation we had covering all kinds of topics including Christmas food, weddings, and POSSE. You can see Kev's post about this conversation here.

1st December

Hey Robb,

Hope you're doing well? Thanks for agreeing to be my PenPal for December - I'm looking forward to getting to know you better. With Christmas coming up, I don't know how much opportunity we will have to email one another, but I hope it works out. If nothing else, we should have plenty to talk about. :-)

No point in beating around the bush...let's dive right in, shall we? Can you tell me a little bit about yourself please? I've been doing a bit of cyber stalking to see what I can learn about you, I don't know why, but I thought you were American. Looking at your Social.lol page it seems you're in Portsmouth? Being in the same timezone should make emailing a little easier.

I also see that you got married recently. Congratulations! My and I got married around 3.5 years ago, in the summer before the pandemic hit. We've been together for, like 16 years now I think, and we never really intended to get married. We decided to once we made the decision the adopt - we figured it would be less confusing for the kids if we all had the same surname. 🤷‍♂️

Romance is not dead in the Quirk household!

OK, I've held off long enough...please please please tell me about your site. I LOVE the design of it. The colours, the typography, the subtle texture on the background. It's just lovely. What are you using at the backend?

I notice you're using social.lol too; have you ever thought about using their platform to host your site? I have an account there too, more to explore it than anything else. The sheer number of services available for the price is great value, and they're always adding new stuff. I think if I ever left Fosstodon, I'd probably switch to their Mastodon instance.

I think this is more than enough to get us started. Looking forward to your reply.

Kev

1st December

Hi Kev,

Firstly, this is a nice bookend to the year because I started January with a similar project with Jason Becker.

You are right that I'm in Portsmouth. I was born here, then lived for most of my school years in Southampton, and moved back here afterwards. I work as a developer for a property software company here in Portsmouth. I live with my wife, cat, and nearly-nine month old daughter. We were supposed to get married in September 2020 but because of the event we moved it to May 2021. Then the restrictions made it difficult to have the day we wanted we decided to move house instead and so we got married this year. I would not recommend having a baby and getting married in the same year 😅

To your point about getting married for more "practical" reasons, we totally get that - if we'd been able to get deposits back from various vendors we may have gone for the cheaper registry office wedding instead of what we had. That said we had a great day even if it was the hottest day of the year.

Now, to the real questions: my website. We've crossed paths just as I pushed a new design. My previous design I had for a couple of years (which is archived here) and as much as I loved it, the "boxy" design was pushing me into a corner where I was struggling to make big changes to layouts so I knew I wanted a new design but I didn't know what I wanted. Until I saw the Cartridge font from Simplebits and I knew I wanted a site that was reminiscent of the Atari 2600-type designs from the game covers.

Speaking of design, a friend and I were discussing monogram logos recently and how we have awkward letters to make a nice monogram with. Then I remembered yours and showed it to her and she was furious at how good it is. I love it.

I'm using Eleventy for my site hosted on Digital Ocean and have done for maybe five years. I love the flexibility it gives me to pull in data from a bunch of different sources and manipulate it however I want. It's what I use for most of my side projects if I can. I'm a big fan of using as little as possible to build websites; if I can avoid a database or javascript, I will. Speaking of which, I recently used simple.css on a project and it saved me a lot of time so thanks for that.

How do you like Kirby? I saw your post about the custom forms for the penpals project and it looks like an excellent CMS but I've not had occasion to use it.

As for hosting my site on omg.lol I don't use it for similar reasons that you mentioned for not using micro.blog: I want a lot more control over everything I can. I like to automate things, like my now page, and generally be able to control as much as I can with my own code. Weblog.lol is an excellent blogging platform, but it's not for me. I do swear by social.lol as an instance though: I've been burned twice by instances (one Mastodon and one Lemmy) just shutting down overnight and not being able to export my data. I need to be on an instance where I know who's running it and that I can pay money to so that instance continues to run.

I can talk about open web protocols until the cows come home so I'll stop for now.

Speak soon,
Robb

3rd December

Hey Robb,

Thanks for the reply. I originally said in the first post that I'd exchange 1 email per week with my PenPal, but if you're happy with whatever cadence suite our schedule at the time (i.e. we just email back and forth whenever it suits) I'm good with that if you are?

Young children seem like such hard work. Our boys are adopted - we decided early on in our relationship that we didn't want kids, but later decided that we wanted a family, but still didn't feel the need to have biological kids, so we decided to adopt - anyway, I digress...our kids are adopted and they came home when they were 5 and 2, so we never experienced the baby part of bringing up kids. Which feels like a double edge sword; on the one hand, se dodged all the long nights etc. but on the other, we missed out on making that early bond with them. So simultaneously envy and don't envy you. :)

Ah, don't get me started on how expensive weddings are. My wife and I decided early on that we wanted to keep it small, so we set the budget at £10k (ten thousand pounds for a single day!) and so we started looking at venues. Slowly but surely the budget began to creep up until we were having conversations about £30k weddings.

Luckily we both saw sense, reeled it back in and ended having a lovely wedding for around the original budget. Pissed it down the whole day though haha.

You previous "boxy" design is quite similar to the design I have now on my site, actually. I've considered using the box-shadow on things like cards etc. but decided against over-using them and just having them on buttons instead.

The Cartridge font is really nice - and not obnoxiously priced like many fonts. I've never heard of Simplebits before - they have some great fonts, and all seem to be very reasonably priced.

Thanks for the kind words about my monogram. I'm really happy with how it turned out, but I suppose K & Q are easy to put together in this way.

I'm similar to you - I prefer to use no JavaScript on my site. I've been thinking about introducing a colour switcher so it doesn't only rely on prefers-color-scheme so would need to introduce some JS for that, but I'm still on the fence. I used Jekyll when this site was on an SSG, but did consider a move to 11ty more than once. I'll definitely use it on a project at some point.

I'm really enjoying Kirby. Like really enjoying it. I always liked WP, but the sheer amount of noise in the control panel frustrated me. Kirby is really bare bones by default, and allows you to build panels that make sense to you.Once you have it nailed, it's like having a custom build CMS, just for you. And because it's not DB driven, if I want to create content in a text editor, I can do that too. It's so flexible, I really love it.

I'm with you on the omg.lol thing. I think it's a great out-of-box solution for someone who's just getting started, or someone who doesn't want to manage their own site. I'm going to be penpalling (is that even a word?) with Gabz in June; he used omg.lol for his blog for a while, so I'll be interested to hear what he says about it.

Oof this is SUCH a long email already, but I'd love to talk about open protocols too, so I'll just bullet out some of my thoughts and we can dig into them more (along with your thoughts) in our next exchange:

I think ActivityPub has the potential to be great but I wonder how well it will scale. Fosstodon only has like 60k users and it's really expensive to run already. Goodness knows what it must cost Eugen to run .social
If I were ever to run my own instance, I think I'd go with GoToSocial, as it seems to be quite lightweight and it supports most of the spec
I don't understand why BlueSky tried to re-invent the wheel? Why not just on the AP bandwagon?
I don't think Threads will ever support AP - that's just a pipedream
I used to run the IndieWeb stack on my site, but it's so convoluted to plug it all together, that I decided to abandon it. I think if it's ever going to gain traction, there needs to be either a hosted solution that supports it natively, or it needs to be hugely simplified

Anyway, this email ended up being WAY longer than I intended it to be. Sorry about that. Looking forward to hearing your thoughts on the open protocols.

Kev

10th December

Hey Kev,

Firstly, our wedding came out around the same price as yours and that was considered "cheap" in comparison to some of my friends. I try not to think about the money and just remember the day which was wonderful.

I'm looking forward to seeing what you and Gabz talking about, he's a great guy.

Now onto the meaty stuff: open protocols.

Fosstodon only has like 60k users and it's really expensive to run

This was one of the reasons I built Bugle - I wanted something I could run easily on my server to create accounts for little side projects and such., Even for a single user who has a few hundred followers, or uploads a lot of photos, it can get expensive quick with Mastodon. The way it handles files and the duplication that happens is a huge problem in getting smaller instances up and running and probably why we see so many users on the main four or five instances. Building Bugle did give me a good insight into how a lot of the protocols work but it's hard. The lack of documentation, or more specifically, examples of how the spec should work make it difficult. The developer of Pixelfed, Dan, was incredibly helpful in pointing me in the right direction for things I was stuck on.

How do you find running an instance with that many users? Does moderation take up a lot of time or is it generally pretty good for Fosstodon?

I hadn't heard of GoToSocial until you mentioned it but that looks much closer to what I was trying to achieve with Bugle and I"m adding that to my list to investigate. I don't have much to say on BlueSky or Threads, neither of them interest me if they don't support AP so I don't pay them much attention (although I do have accounts on both). The one thing I do like with Bluesky is the domain-as-a-username. That is something that does excite me and I know Mastodon has talked about implementing something similar in the future.

I agree with you on the IndieWeb stuff, I've implemented webventions and recently some other metadata-type things, but like AP it just doesn't feel like it's that well documented. IndieKit looks promising in that it's runs separately from your site and handles all the IndieWeb stuff one might need. It doesn't have everything yet but it's one to keep an eye on.

We are now just about two weeks from Christmas, how are you plans coming along for the day?

Speak soon,
Robb

12th December

Hey Robb,

It's crazy how expensive weddings can get. My sister-in-law is married to an Indian and they had a traditional Indian wedding, with a TONNE of people. I dread to think how much theirs cost.

Scalability of Mastodon does concern me. The way in which is caches everything from every server/account it's connected to means things spiral quickly. I remember speaking with Hugo, who runs Masto.host, and he said with me having around 26k followers, a single-user instance would be around $50/month just because of the amount of other instances it would have to connect to.

When Mike and I started Fosstodon, we decided early on to go with a hosted solution, as it would be one less thing for us to worry about. Turns out it was the best decision, as I really wouldn't want to be managing the infrastructure myself with so many people relying on it. We've since grown out the moderation team so that Mike and I can take a step back from the moderation stuff and can focus on other things, like dealing with the various parts that make up the service etc.

At the same time, we also decided to go invite-only. Mainly to force people to go to other servers, and we're far bigger than we ever thought we would be, and honestly, it worries me. I don't want to be responsible for the social network of so many people. But also for moderation - previously we were approving every account that signed up, and we moderate heavily. It's a large burden, but it keeps the timeline (I think) clean and friendly. I have a test account on .social and local timeline over there is a hot mess.

I was listening Ruminate this morning on my way to work; you and Johnny were talking about blog posts vs micro/social posts and what belongs where. Have you ever thought about integrating social with your blog?

I decided that they're 2 different use cases, and I personally dislike it when my RSS feeds contain multiple hot takes per day, as that's not what I want it for - my RSS feeds are for longer form content. I enjoy both hot takes and longer articles, but I have to be in a different frame of mind to consume each, so mangling them both together makes no sense to me.

Ah, Christmas. We're doing ok. There's still a few presents to buy, and a lot to wrap, but we're pretty close, I think. We do things a bit differently on Christmas day. Instead of having a big fancy roast dinner, we cook a simple curry and enjoy that instead. That way, we're not slaving in the kitchen all day and can enjoy the day as a family. Hows about you? You all sorted yet?

Look forward to talking soon.

Kev

22nd December

Hey Kev,

Been a while since I replied, we've had a hectic week over at the Knight household with illnesses going round everyone.

Have you ever thought about integrating social with your blog

I think about this all the time. I do have a mirror of my Mastodon feed on my site as a sort of backup, but I would like to get to a point of proper POSSE. For that to work for me I really need to be able to post from mobile, which means integrating a CMS of some kind. I'm looking at Kirby as well as Wordpress but also considering building my own. "The developer curse" as I like to call it.

I agree having them in one feed (long posts and short posts) isn't what I'd like from someone else's site so I certainly wouldn't be doing that on mine. I also want to split out some things to services more suited to the media; right now I post photos directly on Mastodon but I think Pixelfed would make a lot more sense for me. They are releasing "Solo", a single-user version of Pixelfed soon so I'll be checking that out as soon as it's available.

As for Christmas we're all sorted now, the food is in the fridge ready, chocolates are scattered around the house in bowls for grabbing as we walk past, and my daughter has met Santa for the first time. This year will be the first time I've cooked for my dad so I'm pulling out all the stops.

If I don't speak to you again before Christmas (because apparently it's only 3 days away 😱) have a good one and I'll speak to you soon.

Robb

24th December

Hey Robb,

Good to hear from you and hope you and the family are all feeling better now!

Thanks for you help on the Echo thing - that really helped, but has had the undesired effect of making me explore POSSE again and whether I should start posting "notes" to my blog and have them syndicate to Masto. Problem is, I then go down this rabbit hole of "but I won't have replies..." so then I start looking at webmentions and the whole thing gets so complicated.

I'm also considered adding a bookmarks page to my site. Kinda like a self-hosted read later type thing. Or just a resource that people can use to see what I've found interesting or useful. But I don't know whether I'm going to implement that. If I do, I'll probably switch my about page to my home page, then have my posts served from /blog/ as the site will be far more than just a blog at that point. I dunno what I'll do ultimately, but it's so much fun playing with this stuff.

I see you're looking at TinaCMS - I was keeping an eye on that project when I was running Jekyll. It's looks really good, but was only in beta when I switched, so never explored it further.

You know, we have a distinct lack of chocolate in casa Quirk this year, which is disappointing. I think my wife hasn't bothered because of all the work I've put in losing weight, but I'm happy to put on a few KG over the next couple weeks. I might have to nip the shops for a couple boxes! :)

Cooking Christmas dinner is so much pressure. Good luck cooking for your old man! We tend to have a quiet Christmas, where we don't even have a roast dinner actually. Our tradition is to cook a curry. The kids don't really like roast dinners, so seems silly to spend all day in the kitchen for a meal they won't enjoy.

Anyway, it's the big day tomorrow. Hope you and the family have a great one and that there's no problems with dinner.

Talks soon,

Kev

30th December

Hey Kev,

Hope your Christmas went well. The cooking for my dad went well, he was very impressed so much so that he said he’s never cooking on Christmas and I have to do every year. I’ll be getting my roast potato recipe up on the blog hopefully tomorrow.

If you subscribe my RSS feed you might have seen a sneak peek at what I plan to build next year, but I’m still torn on bookmarks, POSSE notes, etc. It’s a hard problem to solve or at least come up with something I’m happy with.

I am completely chocolated (and cheesed) out now so we’re back to proper dinners and mealtimes. We have been having bacon and egg sandwiches every morning this week which has been nice treat.

No plans for new years here, I expect we’ll watch some movies and wait until midnight when I’m sure Baby Knight will wake up because of the fireworks. Do you have any fun plans at all?

I guess this will likely be the last exchange for this month’s letters. I’m looking forward to seeing who you’ve got lined up for next year. This has been a lot of fun and I’ll definitely be asking for your opinions on all this POSSE stuff in the next few months as I try and get to grips with it all.

Speak soon,

Robb

30th December

Hey Robb,

Yeah, Christmas was great thanks. Just very chilled and lots of family time. I still have another week off work, so only halfway through the holiday yet. Sounds like you're on he hook for all the Christmas dinners from now on...no pressure!

I do subscribe to your RSS feed - I'm looking forward to seeing what comes of it all. Personally, I'm still undecided. Integrating notes into the site would be trivial at this point, but I really don't know whether the juice is worth the squeeze.

I've been eating so much crap the last week or so, as I'm writing this very email, I'm chomping on a pack of Kettle chips. 🤦‍♂️ Oh well, I'll get back on the wagon after the holidays.

It's actually my mum's birthday tomorrow, so I'll go up and see her for a few hours, then I think we're going to our neighbours house for a few drink tomorrow evening.

Yeah, this is likely going to be the last exchange. Thanks so much for taking the time to be my PenPal for this last month, it's been great getting to know you better and I'm looking forward to continuing to get to know you better in the future.

Happy new year, and talk soon!

Kev

Another Project I Forgot About

2023-12-29T15:58:44Z

Welcome to the Knight club - RSS-only posts. These only show for RSS subscribers but feel free to share them. Read more about RSS club.

I totally forgot about one more project I'd like to get done this year. I want to take my current Eleventy-based site I used for my podcasts and make it usable for anyone to quickly get a podcast up and running. I need to move any hard-coded stuff to a data file, plus decide how to handle file uploads and storage.

In the spirit of committing myself to this, I'm posting it here as an addendum to the previous post.

Welcome to the Knight Club

2023-12-29T13:21:50Z

Welcome to the Knight club - RSS-only posts. These only show for RSS subscribers but feel free to share them. Read more about RSS club.

Congratulations on subscribing via RSS, you get these bonus posts. Lucky you. Welcome to the Knight Club^[1].

What am I going to post here? Not a clue to be honest but there are things that I want to talk about that don't need to be full posts. I might "release" these into the main archive page after a year or so, mostly for my own sanity of finding them.

It's two days before the end of 2023 so I want to write down what projects I plan to do in the next 12 months. I don't mind talking about what I'm working on but I don't think a "proper" blog post makes sense until I have something to release. Firstly, I have a couple of in progress projects I want to finish.

Meta checker (I will come up with a better name) is similar to metatags.io but more suited to the specific things I want to check for a website: favicon, Safari accent color, is the RSS feed auto-detectable, those kinds of things. It will serve as a checklist of sorts for when I'm nearly done with a project.

The second is Echo. I want to make this a more friendly service for non-tech people to use. Right now it requires NodeJS knowledge, a horrible Javascript config file, and a pocket full of hopes and dreams.

Now for the new projects. The first is a GitHub-based CMS, similar to TinaCMS. If you follow me on Mastodon, you'll know I've had a lot of issues with getting Tina set up. I'm not sure how their backend works but it is definitely more complicated than it needs to be. I think I can make something more suited to what I want and hopefully what other people want.

The second project has already been through multiple iterations: Almanac. A media logging website. Think Letterboxd but for everything: movies, TV shows, podcasts, music, books. I initially wanted to make this a service people signed up for and used but the licensing around the data just isn't worth the hassle. So instead, I'm going to make it a self-hosted, bring-your-own-api-keys site. It'll have a nice API to be able to update my /now page, feeds to auto-post to Mastodon, and some other fun stuff. The API itself is done but I need to consider how I want the front end to work.

Finally, webmentions. How do they work? I wrote a post about it and I'm still not entirely sure. I'm relying on Webmention.io and Bridgy but how do they work? I want to make my own thing to handle webmentions and conversation from Mastodon but I need to dig into the formats first.

That's it for now, have a great new years!

When I changed my name I didn't consider how many good puns I was going to be able to make with it, just a fun little bonus. ⤾

The Web is Fantastic

2023-12-28T23:52:27Z

Reading the title you might be thinking "Yeah no shit Robb of course the web^[1] is fantastic it's literally the cornerstone of all commerce and communications in the modern world". Or maybe you're not thinking that. But I'm not talking about the web as a whole, I'm talking about the open web. The come-do-cool-things-with-our-api web. The open standards web. The indie web.

Links

Services like Linktree exist because Facebook, TikTok, et al decided that links are okay but only if it's to their stuff. You, the creator of the video/photo/whatever only get one link, better make it a good one. Even then, my wife sometimes sends me links of Facebook don't-call-it-tiktoks and unless I install the mobile app, those links just don't work.

The real web is built on links. Hyper ones, in fact. Links you can share on your website. Links you can send to your mates. Links to pages that can be indexed by search engines so you can find things again (in theory).

Look at this journey Chris went through to stumble upon the App Defaults project:^[2]

I was adding a link to omg.lol, a blog and email hosting service that's cute AND easy AND (relatively) cheap, to my newsletter.

While browsing their help and info page, I saw that they offer a /now/ feature that lets you update the world on what you're working on, reading, watching, etc... now. Old school internet at it's best.

I clicked through to the omg.lol /now garden which has examples of how people are using /now to update the world.

I randomly picked Rebecca Owen's /now page.

Then I clicked back through to her omg.lol page to see how she was using it.

I saw she had a blog, so I checked that out.

The most recent post on Rebecca's blog was one called Default Apps 2023. That's clickbait-up-arrow.gif material for me.

She had included a link to an episode a podcast called Hemispheric Views, and this defaults page.

That is cool. That is how we should find interesting things. With links. The big social media sites have decided that actually no, we don't like links. Just sort of "find" things and if you don't find it well tough shit. Sharing interesting websites, blogs, and articles on your own site is the way to go. Make a blogroll. Make a podroll. Share links on your Mastodon account.

Blogs and RSS

Check out About Feeds to see how RSS works and apps that work with it. I use NetNewsWire.

Blogs and RSS never died. Some of us just took a little break from it while we all shitposted on Twitter for likes, retweets, and validation. While we wrote long, unfindable threads instead of blog posts. I'm as guilty of this as anyone.

Get an RSS app or service and install an extension that auto detects RSS feeds. Keep an eye on it while you're browsing around and grab every feed you see. You can easily unsubscribe if it's not for you. Here's over 300 blogs to get you started.

Chris McLeod said this about blogging in his post, "Blogging is where it's at, again":

stumbling into such a trove of active blogs has enthused me about blogging as a medium again

He's right. Blogging is where it's at. Get a blog. Post some stuff.

If you have a website, don't forget to expose your RSS. Have a big prominent button. Make sure it's in your head for auto-detection. Maybe start an RSS club. Post some wonderful things, or sad things, or only-interesting-to-you things.^[3]

Extras

Add a /now page to your site. Check out a whole load of them here and on the now garden.
Add a /uses page to list what apps and hardware and whatever else you use. uses.tech has nearly 800 examples.
If you're really feeling adventurous you can add webmentions to your site.

It's your website, you can add literally anything you want^[4] and no one can stop you.

Useful links to get started

This is all well and good but if you don't already have a website it can be daunting to know where to go.

Micro.blog - $5 a month, has cross-posting to a whole load of places
Wordpress.com - Free
weblog.lol via omg.lol - $20 a year also includes a Mastodon server, pastebin, profile page, now page, and some other cool things
Bear - free
Neocities - free
Pika - free
Eleventy if you want to dig into code and run your own thing.

Reach out to me on Mastodon if you have questions and I'll do what I can to help get you started.

Conclusion

The real web, the small web, the indie web is amazing. Don't give Facebook and the rest of these clowns your content. Don't give them the time or your attention. Get a blog, a website, a Mastodon account, something you control, and share links to cool things you find. Make a list of your favourite blogs or websites or photos of cats. Write about a pizza you had that was delicious. Share a recipe. Go down a rabbit hole for hours on end adding weird stuff to your site. Just do it somewhere you control because the real web is fantastic.

Yeah I know "the web" and "the internet" are different things, don't at me ⤾
I miss StumbleUpon ⤾
I guarantee you're not the only one interested in this theorectical topic ⤾
Keep it legal, folks ⤾

Generating and Caching Open Graph Images with Eleventy

2023-12-24T10:09:42Z

I recently added automatically generated open graph images to my site using eleventy-plugin-og-image. Here is the open graph image for this post:

I won't go over how to use the plugin; the docs on the repo and this blog post explain that very well. What I didn't like is that these are generated every time the site builds which, aside from being wildly inefficient, added significant time to my builds.

I posted about this on the 'don and Sophie replied with how she is doing it:

I run it locally when I write a new post, and commit the results [...] basically the dev server will spit out the OG image

This is exactly what I wanted - generate the images once, and commit them to the repo. To do this I had to modify the plugin config to output the images to my src folder instead of the output folder:

eleventyConfig.addPlugin(ogImagePlugin, {
+    outputDir: 'src/assets/ogi',
    satoriOptions: {

This will output the image to my assets directory, which in turn gets copied into my built site. This did cause a new issue though - Eleventy watches for changes in source files and rebuilds the site so every time a new image was made, Eleventy would rebuild again. To solve this, I used watchesIgnore in my config file:

eleventyConfig.watchIgnores.add('src/assets/ogi/**/*')

I only wanted these to be generated in development mode so I added an env data file to check the mode:

module.exports = function() {
  return {
    production: process.env.ELEVENTY_RUN_MODE === 'build'
  }
}

Then I updated my base layout so it only uses the ogImage plugin when in development mode. In production, it uses the full path to the image:

{% if env.production %}
    <meta property="og:image" content="https://rknight.me/assets/ogi/{{ page.url | slugify }}.png">
{% else %}
    {% ogImage "src/og-image.og.njk", { title: title | safe } %}
{% endif %}

The final problem I had is the plugin will wipe the output directory on every change. This pull request added that functionality and originally had an option to pass in for it to happen or not, but that option didn't make it to the final version. Based on the discussion it looked as though this wasn't something wanted in the plugin, so I made a copy of the plugin in my plugins directory and removed the line that deleted the files each time:

- eleventyConfig.on('eleventy.before', () => {
-    const options = mergeOptions(directoriesConfig, pluginOptions);
-    fs.rmSync(options.outputDir, { recursive: true, force: true });
- });

This process does require me to run --serve at least once each time I added a blog post but there is rarely a time where I wouldn't do that.

Just 2023 Things

2023-12-22T10:11:45Z

I got married and had a child. No time for anything else. Thank you for reading.

Writing

This year I wrote 60 blog posts including this one which is a big jump compared to last year's 19. My most popular posts^[1] for the year are:

Please, Expose your RSS - this one hit the front page of Hacker News
App Defaults - see the everything else section below for more info on this
Adding Webmentions to Your Site
Automating My Now Page
Using PageFind with Eleventy for Search

Media

Movies

Checking my Letterboxd I only watched a handful of new-to-me movies this year. Black Panther: Wakanda Forever and Ant-Man and the Wasp: Quantumania were equally disappointing in their own special ways. Barbie was...fine? Maybe the hype set my expectations too high but it was fine. Whatever. It's a sad state of affairs that Superfast! was the best new-to-me movie I watched this year (here my review on episode 5 of We Got Family).

TV

Just two shows jump out at me as worth recommending this year:

Severance
The Last of Us accompanied with The Incomparable's The Cast of Us podcast
I have yet to watch For All Mankind season 4 and the Scott Pilgrim show.

Music

I've continued to use my MusicThread shortcut to send new albums and tracks to the relevant playlists:

Punk Tactics by Joey Valence & Brae has easily been my favourite album of the year, with One More Time by blink-182 a close second. The Meteora 20th Anniversary Edition was also in heavy rotation for me this year as well. According to Apple Music my top artists were (I promise this is a 2023 list and not 2005):

Linkin Park
Simple Plan
Punk Rock Factory
Blink 182
State Champs
Zebrahead
Bowling for Soup
Allister (top 100 listeners!)
Eminem
Story of the Year

Games

According to Playstation Wrap-Up, I played four games this year:

Last of Us Part 1
Stray
Spider-Man 2
Guardian of the Galaxy

Of those I stopped playing Guardians because I found it boring and I'm halfway through Spider-Man and Last of Us. Stray is the only game I've finished.

Books

In last year's end of year post I said:

I did start Men Who Hate Women and hopefully will finish it soon.

I did not finish it yet. Maybe next year. The only book I read this year was the Johnny Decimal workbook which I enjoyed so much I wrote a post about it.

Podcasts

The only new podcast I added to my subscriptions is Hemispheric Views. I enjoyed it so much I went back and listened to all 78 episodes over three months. Hemispheric Views was also how App Defaults started, more about that below.

Side Projects

January: omg! lol!

At the start of the year I switched over to social.lol and using Mastodon rather than micro.blog which led to a few related projects:

Echo I am still using heavily and I know that RecentFM and omgnow.js is being used by at least a few people. I have plans to make Echo a more user-friendly project but that's a way off yet I think.

September: The Donation Daddy Cometh

This year I was organised enough to setup a sub-campaign for Relay's annual St Jude fundraising campaign and I (with the help of Adam) was able to raise $12,590.57. You can read the blog post here for more of the juicy details on the campaign itself.

The real fun (aside from raising lots of money of course) comes from the japes in the Relay discord. It started with Septembed, then deskmat.help, then Coin Me, Daddy, and finally Donation Treats. These were all separate websites for the majority of the campaign but towards the end I merged them into a single project for my own sanity and slapped Zach's incredible donation daddy logo on it. I can't wait for next year, me and Adam have some fun ideas already (it's basically September anyway).

We also sent out over 100 sets of stickers to people who donated. I was pretty proud of how well the stickers I designed looked, so much so I made the Ruminate one our proper artwork.

Photo courtesy of Leon Mika

Everything Else

Mac 30th Anniversary Icons. I couldn't have done with without Keir and Josh
Brian Butterfield Diet Soundboard. One of the more popular projects. It keeps ending up getting posted on random newsletters, gets a big spike of traffic, then dies down again. I use it all the time.
Bugle - My ActivityPub server I'm using for We Got Family and my bots
Custom Finder Sidebar Icons. A fun but frustrating project I did with Keir
We Got Family Podcast. We got a bit behind on this but we will finish it. It's been a lot of fun talking about the Fast and Furious movies.
Podcast Duration Calculator and Defocused vs. the Movies. I don't even remember why I wanted to know how many hours of audio a podcast was but these two projects were a result of that.
Secret Relay.fm project. Can't say what this is but it involved the Google Sheets API and Eleventy data files.
VLCNR. I had wanted to revive this app for a while and finally found the time to do it.
App Defaults. My most popular project this year by far. In the 50 days from launching it there was only three days where I didn't have to add at least one site to the list. As of today, there are 282 blog posts.
Pokédon. My first hackathon in seven years, this time on my own instead of part of my team. I think I spent more time on the Pokédex design that I did the actual code.
DoubleShift and Crossover. Two projects that scratched an itch for me to know where I'd seen other actors in similar shows. A lot fun data stuff in here.
Eleventy Post Graph. The graph I added on my stats page was pretty popular so I made it into an Eleventy Plugin. This was also somehow the first time I've published an npm package. Read the blog post.
This site. Last month I redesigned the site after seeing SimpleBits Cartridge font and knew I had to use it somewhere. Now I've redesigned it to make it more flexible I can start porting over some of the content from the Intersect.

It's been a pretty good year all told. Now if I could find a way to get paid to make stupid web apps all day that'd be great.

I've excluded these two posts because although they are really popular they are very boring ⤾

Puff Pastry Sausage Roll Recipe

2023-12-21T14:18:43Z

Here is the recipe for very easy to make sausage rolls. You'll need:

~450g of sausage meat. I prefer to buy sausages and remove the skin as there's a bigger variety of flavours available without having to add stuff to sausage meat myself
A sheet of puff pastry. In the UK at least these come in a standard size of 320g (example)
An egg
A baking tray and some greaseproof/baking paper

Preheat the oven to 180°c. Whisk up an egg in a bowl.

Lay the puff pastry flat and lay a cylinder of sausage meat about an inch thick across the pastry. Roll the pastry around that and cut it so there's just enough to cover the meat with a little bit of overlap. Do this until you run out of pastry.

Grab your baking tray, lay down some greaseproof paper on it, then brush the tray with the eggwash.

Cut up your long sausage roll into inch-wide smaller sausage rolls and pop them on the baking tray, seam down. Brush them with egg and pop them in the oven for 20-25 minutes until they're golden brown all over.

Boom. Sausage rolls for days.

Eleventy Post Graph Plugin

2023-12-19T15:10:02Z

Last week I tooted about my Github-style post graph on my stats page and people seemed to like it. James added one to his blog pages. Pete swore at me. I knew I had to make it into an Eleventy plugin so other people could us it easily.

If you just want to jump straight into using it, check out the docs here.

To create the data, which days have posts, and the grid itself I'm using moment.js to manipulate post dates^[1] and generate an object that looks something like this:

const postMap = {
    years: {
        2023: {
            days: 365,
            offset: 6
        }
    },
    counts: {
        '2023-1': 1,
        '2023-5': 3,
        // and so on
    },
}

days is the number of days in the year and offset is used to start the grid on the correct day; if the 1st of January is a Sunday, the offset is 6. The keys in counts are the year plus the day of the year. This makes it easy to check if a day should be highlighted or not:

<div class="${prefix}__squares">
${
    // generate the offset of the start of year
    Array.from({ length: postMap.years[year].offset }).map((_, index) => {
        return `<div class="epg__box epg__box--empty"></div>`
    }).join('')
}
${
    // make a box for every day of the year
    // if at least one post exists, highlight that box
    Array.from({ length: postMap.years[year].days }).map((_, index) => {
        const dateIndexKey = `${year}-${index + 1}`
        const postCount = postMap.counts[dateIndexKey] || 0
        return `<div class="epg__box ${ postCount > 0 ? `epg__hasPost` : '' }"></div>`
    }).join('')
}
</div>

One edge case I hadn't considered until I was writing the docs was what if someone wanted two instances of the graph in different colors - the css injected into the page would apply to both. The solution I came up with was to add a prefix option wherein the classes, instead of being epg__{something}, will become mycoolprefix-epg__{something}.

I added a bunch of other options to handle all the different use cases I could think of but I'm sure they'll be more. Get started with the docs and if you use this on your site let me know, I'd love to see it.

I am aware that Day.js is better but I just...forgot about it until right now ⤾

Meta Doesn't Need ActivityPub to Slurp Up Your Data

2023-12-15T10:30:49Z

Threads started to test ActivityPub integration this week and the fediverse is losing it's collective mind going into overdrive to block them in any way possible so they can't grab all your data. Here's the fun part: they can already do that and they definitely don't need ActivityPub to do that.

Take my profile for example: https://social.lol/@robb. It's all right there for downloading, scraping, or scribbling down in a "robb is very clever and handsome" notebook. The local timeline for social.lol is the same. Ready to be gobbled up into whatever data center Meta want to put it in. This doesn't even take into account that Mastodon has an API that anyone can use. Hell, they could follow the local timeline on Mastodon.social and probably get 90% of the data they want anyway, assuming they want any of it to begin with. Or create an account on a few hundred instances and get the data that way. But they won't because that's not why they're doing this.

They are doing this because they have to. The EU is breathing down all the big tech companies neck's to be more open and interoperable.^[1] They only launched in the EU yesterday and I'd bet my left bollock it took so long because they were doing sneaky shit with tracking that the EU would have fined them for immediately. The EU didn't make Threads illegal like certain tech pundits claimed, Meta were just doing illegal things. Just a little crime, as a treat.

Some instances have already blocked Threads completely meaning their users have no way of intereacting with accounts on Threads. Purely on the basis that it's Meta with no evidence that they're doing anything nefarious or dangerous. Congratulations, you've made your instance worse for your users. By all means, wait and see if federating with Threads becomes a problem, but doing it just because "meta bad" is ridiculous.

Cassidy James:

...defederating from Threads is like an upstart email service blocking their users from being able to email Gmail users because they don’t like Google. That might seem fine on principle, but in reality it just siloes people from their friends — and makes joining the other service more attractive.

What's to be gained from stopping your instance's users following their friends and family who have chosen to use Threads, other than making them switch to another instance? As Cassidy also points out an individual user can block an instance themselves which is the great thing about Mastodon: users have a choice to block or not block whatever they want.

I'm also aware that users also have a choice to move instances and to some extent I agree that if you don't like how your instance is run, you should move to another one.^[2] But how about instead everyone chills out for a minute, maybe give Meta a chance to actual federate real accounts people want to follow, and then decide if they should be blocked or not. How about we don't force hundreds of people to new instances (or worse, Threads) just so they can see the latest minion meme their mum posted.

Yes, it's Meta and they suck and I hate them. But they don't need ActivityPub to grab your data and blocking them for no good reason is just making the Fediverse, and the open web, worse for everyone.

Stupid unelected elite in Brussels trying to make life better for it's citizens, how dare they. Brexit means Brexit. ⤾
"Tough shit, move instances" is something I have said on a few occasions when discussing disagreeing with instance admin decisions. ⤾

Subscriptions

2023-12-13T17:35:24Z

Inspired by Marco and Kev, here is the current state of my subscriptions. Any prices that were in dollars I've converted to GBP. Anything I pay for yearly I've divided by 12 and marked them as such.

Miscellanea

I pay for Apple One Premier at £36.95 per month which includes Apple TV+, iCloud Storage, and Apple Music for me and my wife but I'll include it in the streaming section for the sake of clarity.

I have a 1Password Family account but I get this for free through my job.

Streaming

Netflix (£7.99 / month). We cheap out on this because it's mostly for my wife to watch old crime documentaries and the quality doesn't really matter
Disney+ (£10.99 / month). We don't actually pay for this, instead we use our Tesco Clubcard vouchers every three months instead.
Amazon Prime (£7.99 / month (paid yearly)). We don't so much pay for this as we just get it included because we want quick delivery.
Apple TV+, Apple Music (£36.95 / month).
Total: £63.92 / month

Memberships

Connected Pro/Relay FM (£4 / month). Ad-free episodes with extra content for connected, bonus episodes and access to the Relay Discord.
Hemispheric Views One Prime Plus (£4 / month). Bonus episodes, a newsletter, access to a members-only Discord channel, plus some dandy stickers. I just bumped this from $2 to $5 because I'm not convinced much of my $2 is actually reaching them once you account for fees and whatnot.
Eleventy (£4 / month). I build so many of my sites with Eleventy, it's a no-brainer.
Total: £12 / month

Apps and Services

omg.lol (£1.33 / month (paid annually)). My main use is the Mastodon instance but it has loads of stuff. Read Blake's post for a better overview than I could ever write.
Digital Ocean (£12 / month). Hosting for this website and all my side projects.
Fathom Analytics (£11 / month). Analytics I use for my sites. Worth noting here I get ~$7/£5 back each month thanks to referrals so the actual price paid here is ~£6.
BunnyCDN (£1 / month). Currently only using this to host the files for We Got Family.
Ivory (£2 / month (paid yearly)). The best Mastodon client on the Mac and iOS.
Total: £25.33 / month

Grand Total

£101.25 isn't too bad considering everything I'm getting for that. Not sure what conclusion to draw from this, nothing here I really need to cut. Maybe if it goes much higher I'll think about it some more.

Advent of Code 2023: Day Nine

2023-12-09T13:10:04Z

Part One

Given this an input like this, find the next number in the sequence. See the advent of code instructions for more details, but we need to go from this:

0 3 6 9 12 15

To the following, to get the final value for that row of 18. To do this we take the first two numbers and get the difference between them. That becomes our first number on the second row. Continue this until the final row is all zeros. Then take the last digit all of the rows and sum them to get 18 (0 + 3 + 15).

0   3   6   9  12  15 -> 18
  3   3   3   3   3 -> 3
    0   0   0   0 -> 0

I interated over each line, used a while loop to check if the sum of the new row is more than zero, and continue adding rows until the new row's sum is zero (this assumption becomes important in a minute). Then grab all the final numbers and sum them for our row value, then sum all the lines to get the answer.

foreach ($lines as $line) {
    $allNumbers = [];
    $allNumbers[] = explode(' ', $line);
    $currentIndex = 0;
    $finalNumbers = $allNumbers[array_key_last($allNumbers)];
    while (array_sum($finalNumbers) > 0) {
        $currentRow = $allNumbers[$currentIndex];
        $new = [];
        foreach ($currentRow as $index => $number) {
            if (!isset($currentRow[$index+1])) {
                $allNumbers[] = $new;
                $finalNumbers = $allNumbers[array_key_last($allNumbers)];
                continue;
            }
            $new[] = $currentRow[$index+1] - $number;
        }
        $currentIndex++;
    }

    $finalValue = 0;

    foreach ($allNumbers as $numbers) {
        $finalValue += $numbers[array_key_last($numbers)];
    }

    $total += $finalValue;
}

echo "Total: $total" . PHP_EOL;

This worked perfectly on the sample input but like other days the real input had a gotcha. As I noted above, I made the assumption that if the sum of a row was more than zero we should carry on but this doesn't account for negative numbers. What I should have done was check if the sum was not exactly zero:

+ while (array_sum($finalNumbers) !== 0) {
- while (array_sum($finalNumbers) > 0) {

That was part one done.

Part Two

Instead of calculating the next number we need to do the previous number from each sequence. All of my previous code for getting all the rows is the same, I just need to update my total calculator to generate the previous number for each row and get the previous number for the original sequence:

- $finalValue = 0;

- foreach ($allNumbers as $numbers) {
-    $finalValue += $numbers[array_key_last($numbers)];
- }

- $total += $finalValue;

$next = 0;
foreach (array_reverse($allNumbers) as $index => $numbers) {
    if ($index === 0) { // skip the first row it's always zeros
        continue;
    }

    $first = $numbers[0];
    $next = $first - $next;
}

$total += $next;

This was a nice one. Nothing too hard to understand from the instructions and totally doable without knowing a magic maths solution.

My solution is on GitHub.

Advent of Code 2023: Day Eight

2023-12-08T15:05:58Z

We've navigating a network today for...reasons.

Part One

The sample input looks like so:

RL

AAA = (BBB, CCC)
BBB = (DDD, EEE)
CCC = (ZZZ, GGG)
DDD = (DDD, DDD)
EEE = (EEE, EEE)
GGG = (GGG, GGG)
ZZZ = (ZZZ, ZZZ)

The first line is a list of instructions (left or right) and the rest is the nodes with their left and right defined. So if we go right from AAA, we move to CCC, then left from there takes us to ZZZ. The puzzle is to count how many steps it takes to get to ZZZ.

I did a bunch of string replacement and exploding to get the output in a format I wanted:

$input = array_filter(explode("\n", $input));

$instructions = str_split($input[0]);
unset($input[0]);

$elements = [];
foreach ($input as $value) {
    $data = explode(' = ', $value);
    $elementKey = $data[0];
    [$L, $R] = explode(', ', str_replace(')', '', str_replace('(', '', $data[1])));
    $elements[$elementKey] = compact('L', 'R');
}

// [
//    'AAA' => [ 'L' => 'BBB', 'R' => 'CCC' ],
//    'BBB' => [ 'L' => 'DDD', 'R' => 'EEE' ],
//    ...
// ]

One other part of this is that you may not get to ZZZ with the set of instructions. So if you hit the end, go back to the start of the instructions. I set the starting values and counters then while found is false, I incremenent the instruction index until we hit ZZZ:

$element = array_key_first($elements);
$found = false;
$instructionIndex = 0;
$steps = 0;

while (!$found) {
    // if we're at the end of the instructions, go back to the start
    if ($instructionIndex === count($instructions)) {
        $instructionIndex = 0;
    }
    $instruction = $instructions[$instructionIndex];
    $element = $elements[$element][$instruction];
    if ($element === 'ZZZ')
    {
        $found = true;
    }

    $instructionIndex++;
    $steps++;
}

echo 'It takes ' . $steps . ' steps to reach ZZZ' . PHP_EOL;

I ran it on the real input and I got stuck in an infinite loop. Initially I didn't read the instructions properly so I was starting at whatever the first node was; in the samples, this is always AAA but in the real input, it isn't. I stepped back and re-read what I was supposed to be doing and fixed this:

- $element = array_key_first($elements);
+ $element = 'AAA';

Re-ran it and it worked perfectly.

Part Two

For part two there some story about a ghost or whatever, but the crux of it is we need to follow multiple paths starting at all node that end with an A. We're only done when all the nodes for all paths end in a Z. I updated my formatting code to account for this:

+ $startingElements = [];
$elements = [];
foreach ($input as $value) {
    $data = explode(' = ', $value);
    $elementKey = $data[0];
    [$L, $R] = explode(', ', str_replace(')', '', str_replace('(', '', $data[1])));
    $elements[$elementKey] = compact('L', 'R');
+    if (str_ends_with($elementKey, 'A')){
+        $startingElements[] = $elementKey;
+    }
}

For the new sample input gave me two starting points (the real input has five):

$test = 'LR

11A = (11B, XXX)
11B = (XXX, 11Z)
11Z = (11B, XXX)
22A = (22B, XXX)
22B = (22C, 22C)
22C = (22Z, 22Z)
22Z = (22B, 22B)
XXX = (XXX, XXX)';

// ...

[
    0 => '11A',
    1 => '22A',
]

Next I updated my instruction loop to go through each starting point, get the next element for all of them, then check if they all the found elements end with a Z:

while (!$found) {
    if ($instructionIndex === count($instructions)) {
        $instructionIndex = 0;
    }
    $foundElements = [];
    $instruction = $instructions[$instructionIndex];
    $check = true;
    foreach ($elementRange as $er) {
        $el = empty($nextElements) ? $startingElements[$er] : $nextElements[$er];
        $foundElements[] = $elements[$el][$instruction];
    }
    $allEndWithZ = count(array_filter($foundElements, function ($fe) {
        return str_ends_with($fe, 'Z');
    })) === $elementCount;
    if ($allEndWithZ) {
        $found = true;
    }
    $nextElements = $foundElements;

    $instructionIndex++;
    $steps++;
}

I ran it on the sample, no problem. Ran it on the real input and it just kept going. For a long time. I ran it for 45 minutes and it was still going. I spoke to Zoe, who had already finished part two, and the correct answer is 14 digits. Based on her maths, this method would take somewhere in the region of 500 hours. I knew there had to be some kind of number...things I could do to work out the answer but it was beyond me at this point.

Part Two Redux

After making a joke about wanting a supercomputer on Mastodon, Chris asked if I wanted a clue he'd seen on the subreddit. I had no idea how to solve this so yes, yes I did. The clue:

Lowest Common Multiple

Of course the solution was a maths concept I'd heard of but never had a need to use (or I did and I just wasn't listening at school). "The smallest positive integer that is divisible by both a and b". As always, PHP has a function for this: git_lcm but this only works for two numbers. I made a new file (2v2.php), extracted my path-to-Z logic into a function, collected the steps for each path, and calculated the lowest common multiple.

$allSteps = [];

foreach ($startingElements as $element)
{
    $steps = stepsToZ($instructions, $elements, $element);
    $allSteps[] = gmp_init($steps); // numbers passed to `gmp_lcm` need to be converted to GMP
}

$result = $allSteps[0];

foreach ($allSteps as $index => $step)
{
    if ($index === 0) continue;
    $result = gmp_init((string) gmp_lcm($result, $step));
}

echo (string) $result . PHP_EOL;

I'm still not clear on why this gets the answer beyond maths but whatever, it's done. Onwards to day nine.

Update: Zoe has a good explanation of why this is the answer.

My solution is on GitHub.

Advent of Code 2023: Day Seven

2023-12-07T15:45:19Z

Time to play some matches of legally-distinct-from-poker-and-easy-to-play-on-a-camel^[1] card game.

Part One

Each hand has five cards and a score:

32T3K 765
T55J5 684
KK677 28
KTJJT 220
QQQJA 483

Each hand outranks others based on how many cards of each type it has, starting at five of a kind and ending with high card. Here's the array I was using to test out my hand rank calculator:

$scores = [
    'AAAAA', // five of a kind / rank 7
    'AA8AA', // four of a kind / rank 6
    '23332', // full house / rank 5
    'TTT98', // three of a kind / rank 4
    '23432', // two pair / rank 3
    'A23A4', // one pair / rank 2
    '23456' // high card / rank 1
];

All the hands need to be ordered by their rank and in the result of a tie, compare the hands's first value and if those are the same the second value, and so on. Some values are letters rather than numbers, and ace is high:

$highValues = [
    'A' => 14,
    'K' => 13,
    'Q' => 12,
    'J' => 11,
    'T' => 10,
];

Once they've all been ranked, multiply that rank by the score and add them together to get the answer. The lowest rank is 1 and upwards to however many hands we have.

Like previous days PHP has some handy functions to make this easier. count_chars "counts the number of occurrences of every byte-value in a string". chr then converts that back to the number or letter:

$count = count_chars('12344', 1);

// output
[
	49 => 1,
	50 => 1,
	51 => 1,
	52 => 2,
]

chr(52);
// 4

Once I had my counts for each hands, I make this calculateHandRank function to return a rank between one and seven depending on the hand. Based on how many elements the array has (and the product in some cases) I can work out the rank easily. Lewis has a more elegant solution thay works when the counts are ordered but the result is the ultimately the same:

function calculateHandRank($counts) {
    $count = count($counts);
    switch($count) {
        case 2:
            return array_product(array_values($counts)) === 4 ? 6 : 5;
        case 3:
            return array_product(array_values($counts)) === 3 ? 4 : 3;
        case 4:
            return 2;
        case 5:
            return 1;
        default:
            return 7;
    }
};

Part of ranking the hands is the tie-breaker I mentioned above, based on each card compared to the other hand. So if we had two hands that were both five of a kind, the first one would win because A (ace) is higher than Q (queen):

'AAAAA'
'QQQQQ'

Here it us all together to get the answer for part one:

// extract the hands and scores, caclulate the hand types
$formatted = array_map(function ($line) {
    [$cards, $score] = explode(' ', $line);
    $score = (int) $score;
    $counts = count_chars($cards, 1);
    $cards = str_split($cards, 1);
    $handType = calculateHandRank($counts);
    return compact('cards', 'score', 'handType');
}, $lines);

// sort the hands by type, compare the card values in the event of a tie break
usort($formatted, function ($a, $b) use ($highValues) {
    if ($a['handType'] === $b['handType']) {
        foreach ($a['cards'] as $index => $aCard)
        {
            $aCard = $highValues[$aCard] ?? $aCard;
            $bCard = $b['cards'][$index];
            $bCard = $highValues[$b['cards'][$index]] ?? $b['cards'][$index];

            if ($aCard === $bCard) {
                continue;
            }

            return $aCard > $bCard ? 1 : -1;
        }
    }
    return $a['handType'] > $b['handType'] ? 1 : -1;
});

// calculate the overall score 
$score = 0;

foreach ($formatted as $index => $line) {
    $score += $line['score'] * ($index + 1);
}

echo $score . PHP_EOL;

Part Two

Part two introduced a fun twist. J is now a joker instead of the jack/11. In the event of a tie break, the joker is worth 1 but if it exists in a hand the it goes towards whichever grouping would increase the hands type. For example, this three of a kind hand becomes four of a kind:

$before = 'AAA5J'; // three of a kind
$after = 'AAA5A'; // four of a kind

I updated my formatting code to account for, using count_chars to find which value the joker should become:

$formatted = array_map(function ($line) use ($highValues) {
    [$cards, $score] = explode(' ', $line);
    $score = (int) $score;
    $counts = count_chars($cards, 1);
    if (strpos($cards, 'J') !== false) {
        // get the highest grouping character
        $highest = 0;
        $character = null;
        $index = null;
        foreach ($counts as $char => $count) {
            if (chr($char) === 'J') {
                continue;
            }
            $fChar = (int) ($highValues[chr($char)] ?? chr($char));
            if ($count === $highest) {
                // compare the numbers/cards instead of the count
                if ($fChar < $character) {
                    continue;
                }
                $highest = $count;
                $character = $fChar;
                $index = $char;
            } else if ($count > $highest) {
                $highest = $count;
                $character = $fChar;
                $index = $char;
            }
        }
        $newCards = str_replace('J', chr($index), $cards);
        $counts = count_chars($newCards, 1);
    }
    $cards = str_split($cards, 1);
    $handType = calculateHandRank($counts);
    return compact('cards', 'score', 'handType');
}, $lines);

Finally, I swapped the J value for 1:

$highValues = [
-    'J' => 11,
+    'J' => 1,
];

I ran the code and got a warning:

chr(): Passing null to parameter #1 ($codepoint) of type int is deprecated

One of the edge cases (maybe the only one?) was a hand that was five of a kind of all J cards. I hadn't accounted for this in my new code for locating the joker replacement; I was skipping every card that was a J so it never the replacement index would be null. One more quick change and I had part two finished.

+ $replace = $index ? chr($index) : 'A';
- $newCards = str_replace('J', $chr($index), $cards);
+ $newCards = str_replace('J', $replace, $cards);

This was a nice one today. Easy to understand but complicated enough to be a challenge.

My solution is on GitHub.

Told you the story was bonkers ⤾

Smart Speed Broke My Brain

2023-12-06T22:30:39Z

According to Overcast's stats I've saved 424 hours with smart speed. Smart speed, or "trim silence" as other apps call it, is a feature that will remove silences from podcasts and at launch was Overcast’s primary selling point. After the best part of a decade I was convinced by Keenan (if you can, listen to the audio version of the post, it's wonderful) to turn it off and I’m so glad I did.

It’s a common joke in the Relay FM Discord about how those of us who use smart speed (or just the speed controls) think the hosts sound drunk or like they’re slurring when we hear the “normal” version of podcasts; we’re so used to listening to them sped up with no gaps between each side of the conversation like some kind of Aaron Sorkin movie.

How do you distinguish yourself in a population of people who all got 1600 on their SAT’s?

I didn’t know they take SAT’s in China.

They don’t. I wasn’t talking about China anymore, I was talking about me.

I haven’t listened to a show at standard speed for years. After I turned off smart speed and listened to a show I realised how calm I felt compared to usual. It was relaxing. I had time to process what was being said without also trying to hear the next part of the conversation. I realised for the past decade I’ve been on high alert just to listen to a podcast, concentrating really hard to consume all the information. I was stressed from something that’s supposed to be enjoyable. I was accustomed to readying myself to listen to a show. Smart speed had broken my brain.

424 hours "saved" according to Overcast. Saved what though? 424 more hours to consume content. Lovely.

Back to Keenan:

I truly believe that Trim Silence is an abomination that should be fully eradicated from existence, as it not only spits in the face of the people who take the time and effort to produce their shows, but also, more broadly, encourages a way of interfacing with art that can only be described as gluttonous

I don't feel that strongly about it but I do feel stupid for doing this to myself for so long. I don’t think there’s some big conclusion to draw here but maybe, if you speed up your podcasts all the time^[1], maybe try it without for a show or two to see if you like it.

Hi Cory 👋 ⤾

Advent of Code 2023: Day Six

2023-12-06T11:07:22Z

It's boat racing time. For each millisecond you hold the boat down, it's speed will increase by one millimeter per second. Just like the bus in Speed, the boat never slows down.

Part One

The input format:

Time:      7  15   30
Distance:  9  40  200

Each column is a race which contains the race time and a distance the boat needs to travel to win. So in race one, the boat can travel the required distance (9) by holding down the boat for two, three, four, and five milliseconds. Here is some mathematics:

$time = 7;
$distance = 9;
$testSeconds = 2;
$newDistance = $testSeconds * ($time - $current);
$canWin = $newDistance > $distance;

// $canWin = true

For each of the races I generated a range of numbers to test based on the time, then checked if those could win based on the distance for that race.

$extract = function($input) {
    return array_values(array_filter(explode(' ', explode(':', $input)[1])));
};

[$times, $distances] = explode("\n", $input);
$times = $extract($times);
$distances = $extract($distances);

$wins = [];
foreach ($times as $race => $time) {
    $distance = $distances[$race];
    $range = range(1, $time);
    $winCount = 0;
    foreach ($range as $r)
    {
        $newDistance = $r * ($time - $r);
        $canWin = $newDistance > $distance;
        if ($canWin)
        {
            $winCount++;
        }
    }
    $wins[] = $winCount;
}

echo 'Total is ' . array_product($wins) . PHP_EOL;

Got the correct total, part one done. Easy peasy.

Part Two

Apprently the kerning on the peice of paper the input was written on was not good and it's actually just one race and not multiple.^[1] So now we have one large race:

$time = 71530;
$distance = 940200;

I switched out my extractor to remove all the spaces and give me just two numbers (I put them in an array so I could avoid changing any of the other code):

$extract = function ($input) {
    return (int) str_replace(' ', '', explode(':', $input)[1]);
};

[$times, $distances] = explode("\n", $input);
$times = [$extract($times)];
$distances = [$extract($distances)];

Like yesterday when I also used range on some large numbers, I ran out of memory. I did throw memory at it and it worked but I knew an easy fix for this one so I changed the range logic to a while loop.

foreach ($times as $race => $time) {
    $distance = $distances[$race];
    $winCount = 0;
    $current = 1;
    while ($current < $time) {
        $newDistance = $current * ($time - $current);
        $canWin = $newDistance > $distance;
        if ($canWin) {
            $winCount++;
        }
        $current++;
    }
    $wins[] = $winCount;
}

echo 'Total is ' . array_product($wins) . PHP_EOL;

And that was part two. I don't know how efficient array_product is and I could have just calculated the total as I went along instead of adding to an array instead.

My solution is on GitHub.

The "story" part of advent of code is really something. ⤾

Advent of Code 2023: Day Five

2023-12-05T11:40:26Z

The description for this puzzle was confusing. Like, really confusing. I had to read it at least five times before I even understood the question.

Part One

For this puzzle the sample input was as follows:

seeds: 79 14 55 13

seed-to-soil map:
50 98 2
52 50 48

soil-to-fertilizer map:
0 15 37
37 52 2
39 0 15

fertilizer-to-water map:
49 53 8
0 11 42
42 0 7
57 7 4

water-to-light map:
88 18 7
18 25 70

light-to-temperature map:
45 77 23
81 45 19
68 64 13

temperature-to-humidity map:
0 69 1
1 0 69

humidity-to-location map:
60 56 37
56 93 4

Each line of a map is the destination start, the source start, and the range length. For example if we take the first line of the seed-to-soil map:

$line = '50 98 2';

[$destinationStart, $sourceStart, $rangeLength] = explode(' ', $line);
$sourceRange = range(
    $sourceStart, 
    $sourceStart + $rangeLength - 1
);
$destinationRange = range(
    $destinationStart, 
    $destinationStart + $rangeLength - 1
);

$mapped = array_combine($sourceRange, $destinationRange);
$mapped = [
    98 => 50,
    99 => 51,
];

This needs to be done for every map in the input. Then take the seed number for the first map, get the value (or the previous value if it's not in the range), and so on to the last location value. So in the above example if the seed number is 98 the value is 50. Then take 50 and see if that exists in the soil-to-fertilizer map. If this makes no sense, have a look at the advent of code page for today's puzzle.^[1]

Below is my full "solution". I'm looping through each line of each map, generating the ranges based on the numbers, and adding it to a mapData array. Notice I'm using array_combine to use the source values as the keys and the destination values as the new values. array_replace preserves keys unlike array_merge which resets keys, which in this case are important.


$rawData = explode("\n\n", $input);
$seeds = explode(' ', str_replace('seeds: ', '', $rawData[0]));
unset($rawData[0]);

$mapData = [];

foreach ($rawData as $value) {
    $lines = explode("\n", $value);
    $mapName = str_replace(' map:', '', $lines[0]);
    unset($lines[0]);
    $mapData[$mapName] = [];
    foreach ([$lines] as $line)
    {
        [$destinationStart, $sourceStart, $rangeLength] = explode(' ', $line);

        // generate the ranges for the source and destination
        $mapData[$mapName] = array_replace($mapData[$mapName], array_combine(
            range($sourceStart, $sourceStart + $rangeLength - 1),
            range($destinationStart, $destinationStart + $rangeLength - 1),
        ));
    }
}

$locations = [];

foreach ($seeds as $seed)
{
    // keep track of the current value, starting with the seed
    $current = $seed;
    foreach ($mapData as $mapName => $map)
    {
        // if there isn't a value set, fallback to the current
        $current = $map[$current] ?? $current;
    }
    $locations[] = $current;
}

echo 'Lowest location number is ' . min($locations) . PHP_EOL;

This worked for the sample input which was nice given how long I spent trying to understand the puzzle to start with. Then I ran it on the real input and got this out of memory error:

Fatal error: Allowed memory size of 536870912 bytes exhausted

I hadn't actually looked at the real input at this point. The real input has huge numbers compared to the sample input so the range generation was causing PHP to run out of memory. Which means I had to rethink my solution or throw a bunch of memory at it and hope for the best.

So I ran it with 64GB of memory: php -d memory_limit=64000M 1.php and it worked! Or at least, it ran. It gave me an answer that was wrong. I had a better look at the numbers in the real input and called it a day.

Two hours later I had a moment of clarity and realised how to solve this without needing the 1.102 exaFLOPS of the Frontier supercomputer. I also noticed a bit of testing code which sliced one of the arrays so even if I hadn't had the memory problems, I was never going to get the right answer. Whoops.

Part One Redux

Instead of generating the ranges for every number, I could work out the index of the seed by generating the start and end of each of the ranges:

- $mapData[$mapName] = array_replace($mapData[$mapName], array_combine(
-    range($sourceStart, $sourceStart + $rangeLength - 1),
-    range($destinationStart, $destinationStart + $rangeLength - 1),
- ));
+ $mapData[$mapName][] = [
+    'sourceStart' => $sourceStart,
+    'sourceEnd' => $sourceStart + $rangeLength - 1,
+    'destinationStart' => $destinationStart,
+    'destinationEnd' => $destinationStart + $rangeLength - 1,
+ ];

Then calculate the difference to make my index, then use that index on the next "map" to get the correct value:

$locations = [];

foreach ($seeds as $seed) {
    $current = $seed;
    foreach ($mapData as $mapName => $mapArray) {
        foreach ($mapArray as $map)
        {
            if ($current >= $map['sourceStart'] && $current <= $map['sourceEnd']) {
                $index = $current - (int) $map['sourceStart'];
                $current = (int) $map['destinationStart'] + $index;
                break;
            }
        }
    }
    $locations[] = $current;
}

echo 'Lowest location number is ' . min($locations) . PHP_EOL;

Part one done. And I didn't even need to give it extra memory to run.

Part Two

To paraphrase Marie Kondo:

your feelings are the standard for decision making – specifically, knowing what sparks joy. To determine this when writing code, the key is to pick up each bit of code one at a time, and ask yourself quietly, “Does this spark joy?”

Just like 2015's Fantastic Four, there is no part two. Not today, satan.

My code is on GitHub.

And probably be as confused as I was ⤾

Advent of Code 2023: Day Four

2023-12-04T13:07:52Z

As soon as I saw this one this morning I knew it was going to at least be a bit easier than yesterday.

Part One

The premise for today was scratchcards with two sets of numbers: winning numbers and numbers you have. The first half is winning numbers, the second is numbers you have.

Card 1: 41 48 83 86 17 | 83 86  6 31 17  9 48 53

From the Advent of Code page:

Card 1 has five winning numbers (41, 48, 83, 86, and 17) and eight numbers you have (83, 86, 6, 31, 17, 9, 48, and 53). Of the numbers you have, four of them (48, 83, 17, and 86) are winning numbers!

Seemed easy enough especially when using PHP's array_intersect which returns "an array containing all the values of array that are present in all the arguments". In this case, our winning numbers. For each winning number, the score doubles (starting with one for the first winning number). The goal was the find the total score of all the winning cards.

$total = 0;

$lines = explode("\n", $input);

foreach ($lines as $line)
{
    // explode the string to get only the numbers
    [$card, $data] = explode(': ', $line);
    // get the two strings of numbers
    [$winners, $have] = explode('|', $data);

    // make them an array
    $winners = explode(' ', trim($winners));
    $have = explode(' ', trim($have));

    $winningNumbers = array_intersect($have, $winners);

    $currentTotal = 0;
    foreach ($winningNumbers as $win)
    {
        if ($currentTotal === 0) {
            // first number, so start at 1 for the score
            $currentTotal = 1;
            continue;
        }

        // each additional winning number doubles the score
        $currentTotal = $currentTotal * 2;

    }

    $total += $currentTotal;
}

echo 'Current total ' . $total . PHP_EOL;

I was pretty confident in this solution but I did not get the correct answer using the sample input. I then noticed the inconsistent spaces in the string so my array_intersect was returning additional empty values. A quick array_filter later and I had the correct answer so I was onto part two.

- $winningNumbers = array_intersect($have, $winners);
+ $winningNumbers = array_filter(array_intersect($have, $winners));

Part Two

Part two is, as always, more complicated:

Instead, scratchcards only cause you to win more scratchcards equal to the number of winning numbers you have

Card 1 has four matching numbers, so you win one copy each of the next four cards: cards 2, 3, 4, and 5

Starting with part one's code, I did some processing of the data prior to looping over each scratchcard.

$lines = explode("\n", $input);
$lines = array_map(function($l) {
    [$_, $data] = explode(': ', $l);
    [$winners, $have] = explode('|', $data);
    $winners = explode(' ', trim($winners));
    $have = explode(' ', trim($have));
    return [
        'winners' => $winners,
        'have' => $have,
    ];
}, $lines);
// [['winners' => [4,5,6], 'have' => [1,2,3]], ...]

$multipliers = array_fill(1, count($lines), 1);
// [1 => 1, 2 => 2, 3 => 3, ...]

I then looped over the scratchcards, identified the winning numbers, then for each number add to the multipliers for that card. For example, card one has four wininng numbers so it "copies" cards two, three, four, and five by setting it to 2. When I hit card two in the loop, the added number would be 2 rather than one, because I have two copies of that card.

foreach ($lines as $index => $line) {
    $cardId = $index + 1;
    
    // count the winning numbers
    $winCount = count(array_filter(array_intersect($line['have'], $line['winners'])));
    
    // if there are none, we don't need to make any card copies
    if ($winCount === 0) {
        continue;
    }

    // the card ID of the next card we need to copy
    $windex = $cardId + 1;

    // for each winning number, add the the multipliers to "copy" that card
    foreach (range(0, $winCount - 1) as $win) {
        $multipliers[$windex] += $multipliers[$cardId];
        $windex++;
    }
}

All in all this took me about 30 minutes for part one, and about 15 minutes for part two - although I did think about part two for a few hours while I was working.

My solution is on GitHub.

Advent of Code 2023: Day Three

2023-12-03T11:50:39Z

More regex and string parsing today. Sounds like a party.^[1]

Part One

Given an "engine schematic" like below, identify which numbers are part numbers. That is, they have a symbol (not a . though) either next to, above, or below them including diagonally.

467..114..
...*......
..35..633.

In this example, 467 and 35 are part numbers, 114 and 633 are not.

My plan was a such: go through each line, identifying the part numbers and symbols, and then use strpos to work out if they are or are not part numbers. I also generated a range that I could use with substr to get the location of the number (plus an additional character each side) on the previous, current, and next lines. For example if my string was as below, the range starts at 2 and ends at 5.

//       0123456789
$line = '...56.....';

// then use substr to get `.56.`
substr($line, 2, 5 - 2);

After some tinkering around I had a solution that worked. At least for the sample input.

$explodedInput = explode("\n", $input);
$strippedInput = str_replace('.', ' ', $input);

$total = 0;

foreach (explode("\n", $strippedInput) as $index => $line)
{
    preg_match_all('/\d+/', $line, $numbers);
    preg_match_all('/\D/', str_replace(' ', '', $line), $symbols);

    $current = $explodedInput[$index] ?? '';
    $previous = $explodedInput[$index - 1] ?? '';
    $next = $explodedInput[$index + 1] ?? '';

    foreach ($numbers[0] as $number) {
        $position = strpos($line, $number);
        $range = [
            $position === 0 ? $position : $position - 1,
            $position + strlen($number) + 1 - ($position === 0 ? $position : $position - 1),
        ];

        $findInCurrent = substr($current, $range[0], $range[1]);
        $findInPrevious = substr($previous, $range[0], $range[1]);
        $findInNext = substr($next, $range[0], $range[1]);
        preg_match_all('/[^0-9\.]/', $findInCurrent, $sc);
        preg_match_all('/[^0-9\.]/', $findInPrevious, $sp);
        preg_match_all('/[^0-9\.]/', $findInNext, $sn);

        if (
            count($sc[0]) > 0 || count($sp[0]) > 0 || count($sn[0]) > 0
        ) {
            $total += $number;
        }
    }
}

echo 'Current total ' . $total . PHP_EOL;

When I ran this on the real data, my total was too high. Despite how it looks, the code is relatively straight forward so I knew there must be something tiny I was missing.

What I haven’t accounted for was numbers appearing more than once in a single line. I was using strpos which finds the first instance of a string so if the string was 654...6... then when I tried to find that second 6 it would find the first one. It sounds obvious but on the first pass it just didn't occur to me.

Off the top of my head I didn't know how to fix this problem. Turns out preg_match_replace can take a fourth parameter of PREG_OFFSET_CAPTURE to return the string offset of the found string:

$line = '654...6...';

preg_match_all('/\d+/', $line, $numbers);
// [["654","6"]]

preg_match_all('/\d+/', $line, $numbersWithOffset, PREG_OFFSET_CAPTURE);
// [[["654",0], ["6",6]]]

Then instead of getting the position separately, I could grab it from the matches:

- foreach ($numbers[0] as $number)
+ foreach ($numbers[0] as $numberData)
{
- $position = strpos($line, $number);
+ [$number, $position] = $numberData;

And just like that I had the correct answer to part one.

Part Two

Today's puzzle did not spark joy so I just didn't do part two. Zoe and Lewis did if you want to see a completed solution. Here's hoping tomorrow is a bit less straining on my sleep-deprived brain.

My solution for part one is on GitHub.

It wasn't a party at all. ⤾

Advent of Code 2023: Day Two

2023-12-02T22:06:56Z

After finally finding time to do today's challenge, I was able to knock it out in about 30 minutes for parts one and two. At the core of both of parts was parsing strings like this:

$input = [
    'Game 1: 3 blue, 4 red; 1 red, 2 green, 6 blue; 2 green',
    'Game 2: 1 blue, 2 green; 3 green, 4 blue, 1 red; 1 green, 1 blue',
    'Game 3: 8 green, 6 blue, 20 red; 5 blue, 4 red, 13 green; 5 green, 1 red',
    // and so on
];

Part One

For part one I needed to get the game ID plus the amount and related colors from each pick of the games. There are a lot of ways of doing this but the solution I went with was some good-old fashioned string-replacement and exploding:

$colors = [
    'red' => 12,
    'green' => 13,
    'blue' => 14,
];

$validGameTotal = 0;

foreach ($input as $line) {
    [$game, $games] = explode(':', $line);
    $gameId = explode(' ', $game)[1];
    $picks = explode(',', str_replace(';', ',', $games));
    $gameValid = true;

    foreach ($picks as $pick)
    {
        if (!$gameValid) continue;
        $pick = trim($pick);
        $color = explode(' ', $pick)[1];
        $amount = explode(' ', $pick)[0];
        if ($amount > $colors[$color]) {
            $gameValid = false;
            continue;
        }
    }

    if ($gameValid) {
        $validGameTotal += $gameId;
    }
}

echo $validGameTotal . PHP_EOL;

A break statement would make more sense instead of using continue but I'm not changing it now.

Part Two

Part two was similar but I needed to find the highest value of each given color and multiply them. PHP's max function made this easy:

foreach ($input as $line) {
    [$game, $games] = explode(':', $line);
    $gameId = explode(' ', $game)[1];
    $picks = explode(',', str_replace(';', ',', $games));

    $blue = 0;
    $red = 0;
    $green = 0;
    
    foreach ($picks as $pick) {
        $pick = trim($pick);
        $color = explode(' ', $pick)[1];
        $amount = explode(' ', $pick)[0];
        switch ($color) {
            case 'blue':
                $blue = max($blue, $amount);
                break;
            case 'red':
                $red = max($red, $amount);
                break;
            case 'green':
                $green = max($green, $amount);
                break;
        }
    }

    $total += ($blue * $red * $green);
}

Onwards to day three.

My solution is on GitHub.

Advent of Code 2023: Day One

2023-12-01T11:30:30Z

Until Zoe mentioned it this morning, I didn't know what Advent of Code was ^[1]. Advent of Code is an "advent calendar of small programming puzzles". So once I knew what it was, I figured I'd give it a go. I'm not sure if I'll make it all month but I'll certainly try. I'm doing it in PHP because it's what I know and it will annoy Zoe a little bit; you can see her rust-based solution here.

Part One

The first challenge was to extract the first and last digit from an array of strings, concatenate them, then get the total. For example the result of this on 1fghy2 would give 12.

Anyone who knows me professionally knows regex is my kryptonite. It just doesn't click with my brain and I seem to forget anything I learn about it instantly. I fired up regex101 to give this a go anyway. Regex101 has a handy quick reference which told me I needed \d to find any digit. I used preg_match_all to get all digits:

$input = [
    '1abc2',
    'pqr3stu8vwx',
    'a1b2c3d4e5f',
    'treb7uchet',
];

$result = array_reduce($input, function ($total, $line) {
    // get all digits
    preg_match_all('/\d/', $line, $matches);

    $first = $matches[0][0];
    $last = end($matches[0]);

    $total += $first . $last;
    return $total;
}, 0);

echo 'The total is ' . $result . PHP_EOL;
// The total is 142

Part One

Part two added a complexity that some of the numbers could be written out as words instead of digits. Some of the strings might have no digits and some might have no numbers-as-words. So onedsjfbi2 would give 12 and 23sdshseven would give 27. This part I did know; find all digits, or the words of 1-9. A quick swap of my regex from before and mapping words to numbers with PHPs null coalescing operator:

$lettersToNumbers = [
    'one' => 1,
    'two' => 2,
    // and so on
];

preg_match_all('/\d|one|two|three|four|five|six|seven|eight|nine)/', $line, $matches);

$first = $lettersToNumbers[$matches[0][0]] ?? $matches[0][0];
$last = $lettersToNumbers[end($matches[0])] ?? end($matches[0]);

I thought I'd cracked it but the advent of code site told me my number was too high. I logged out all the strings and the numbers I had found with my regex and eyeballed a lot of them and everything seemed fine. After a good 20 minutes or so I had to call it quits and check out what Lewis had for his solution. It turns out some of the strings have words that crossover, for example 35oneight. The result should be 38 but I was getting 31 because regex will match the first instance (in this case one) and then move on. I didn't look at Lewis' solution because I still want to attempt it myself.

After a bit of googling what I needed was a capturing technique inside an unanchored positive lookahead^[2] which would then return eight in the example above:

preg_match_all('/(?=(\d|one|two|three|four|five|six|seven|eight|nine))/', $line, $matches);

And there we go, day one done.

My solution is on GitHub.

Or more likely, I did know and just forgot about it. ⤾
Very normal sentence, yes. Nothing to see here. ⤾

Crossover

2023-11-30T21:17:34Z

Sometimes one idea begets another. In the case of Crossover I had the idea while building DoubleShift but I was too far in to change it. DoubleShift also now has some fun additional features like leaderboards which only make sense for that site.

Crossover, unlike DoubleShift, isn't limited to a handful of TV shows: if a show is in The Movie Database you can compare it with Crossover.

There are a few pre-loaded shows on the site but you can search for any show - once you've found one, it gets added to the options so you can mix and match in any way you want.

The logo is a mix of Breaking Bad and Game of Thrones so you might think Game of Thrones would be a good default on the site but there are very few actors that crossover with other shows I was testing with. The font looked good though so here we are.

Check out Crossover here and DoubleShift here.

DoubleShift

2023-11-27T22:30:06Z

I have watched Scrubs more times than I can count and I am currently re-watching Grey's Anatomy for the third (maybe fourth?) time. I noticed there are a lot of actors who have appeared in both and it seemed like it was every other episode. After some data-wrangling I have an actual answer: 28 actors have appeared in both series.

The Idea

I thought it would be fun to show this on a site along with highlighting what I'm calling "double doctors": that is, actors who have played a doctor in both shows. The site is called DoubleShift and it has this nifty logo I whipped up:

I mentioned this idea to David and he asked what the numbers were like against House. So I added House to my dataset: 78 actors have appeared in Grey's and House, and 48 have appeared in Scrubs and House. I also added ER because that had a lot of crossover too.

I briefly added General Hospital because of how long it has been running but there was just one actress who has been in any of the other shows so I removed it again. Also, adding even one more show generates so many more permutations.

Handling the Data

To fetch the actor data for each show I used The Movie Database API which has a handy "Aggregate Credits" endpoint for fetching all actors who have been in a show across all seasons. I then mapped that data to a keyed object by their TMDB ID:

const res = await fetch(`https://api.themoviedb.org/3/tv/${show.id}/aggregate_credits?&series_id=1416&language=en-US`, {
	headers: {
		'Authorization': `Bearer ${process.env.API_KEY}`,
		'accept': 'application/json'
	}
})
const json = await res.json()
const data = {}

json.cast.forEach((actor) => {
	data[actor.id] = {
		...actor,
	}
})

To find the actors who have been in both shows a filter did the trick:

const intersection = Object.keys(showData[showOne]).filter(element => Object.keys(showData[showTwo]).includes(element))

// console.log(intersection)
// [123, 3456, 3456]

I used Eleventy like I always do because it's data files are perfect at handling this kind of thing and using nunjucks is easy-peasy to output what I want. I decided to avoid using javascript on the site itself here so I used CSS and radio buttons to show and hide each combination of show.

#show-greys-scrubs {
	display: none;
}

#greys-scrubs:checked ~ #show-greys-scrubs {
	display: none;
}

It's worth noting that when using the subsequent-sibling combinator (~) the two elements must be children of the same parent so I couldn't have the radio buttons inside their own container which made styling them slightly harder, but a small price to pay to not rely on JS here.

View the DoubleShift site here and you can view the source on GitHub

Update 2023-11-28: Added four more shows and leaderboards
Update 2023-11-30: Check out Crossover to compare any two TV shows

Popular Pages with Eleventy and Fathom Analytics

2023-11-24T22:42:04Z

Now my new site design is done, I've been able to take some time to add features I've wanted for a while. In this case, I want to show popular pages based on pageviews at the end of blog posts, on the search page, and on the 404 page.

Fetching Pageviews

I use Fathom for analytics on my sites and they have an API which is handy. If you use Plausible for your analytics you should check out Cory's post on the same topic for the specific API implementation. He also uses liquid rather than nunjucks which I use so if that's your jam you probably want his post instead.

To fetch the data I use Eleventy data files. You can get an API key from your Fathom dashboard. Also, you don't need to use the qs library but it does make life a bit easier.

// _data/fathom.js
const qs = require('qs')

module.exports = async function() {

	const date_from = moment().subtract(90, 'days').format('YYYY-MM-DD HH:mm')
	const date_to = moment().format('YYYY-MM-DD HH:mm')
	
	const query = qs.stringify({
		entity: 'pageview',
		entity_id: env.process.FATHOM_SITE_CODE,
		aggregates: 'pageviews',
		field_grouping: 'pathname',
		date_from,
		date_to,
		sort_by: 'pageviews:desc',
		limit: 100
	})
	
	const res = await fetch(`https://api.usefathom.com/v1/aggregations?${query}`, {
		headers: {
			'Authorization': `Bearer ${env.process.FATHOM_API_KEY}`
		}
	})
	
	const json = await res.json()
}

Which gives uses a response like this:

[
	{
		pageviews: 100,
		pathname: '/',
	},
	{
		pageviews: 99,
		pathname: '/please-expose-your-rss/',
	},
	{
		pageviews: 98,
		pathname: '/app-defaults/',
	},
	// and so on
]

The first problem here is this includes pages that aren't blog posts. If you're normal and setup your site well, this is easy: filter the list to only get posts that contain /blog in the pathname:

const json = await res.json()

const data = json.filter(pv => pv.pathname.includes('/blog'))

If you're like me and made a silly mistake many years ago and your posts live at the root of your site, you have to get a bit creative to get all the blog post paths. I'm also using titleMap to get the titles of the posts so I can add those to the Fathom data.

const fs = require('fs')

// ...fetching fathom goes here

const files = await glob('./src/posts/blog/**/*.md')
const titleMap = {}

files.forEach(page => {
	const content = fs.readFileSync(page, 'utf8')
	const permalink = content.match(/^permalink: ?(.*$)/gm)[0].split('permalink: ')[1].replace('index.html', '')
	let title = content.match(/^title: ?(.*$)/gm)[0].split('title: ')[1]
	
	if (title.startsWith('"'))
	{
		title = title.slice(1,-1)
	}
	
	titleMap[permalink] = title
})

// titleMap = {
//	'/please-expose-your-rss/': 'Please, Expose your RSS',
//	'/app-defaults/': 'App Defaults',
// }

// filter out only blog posts
let data = json.filter(pv => {
	return Object.keys(titleMap).includes(pv.pathname)
})

// add the titles to the fathom data
data.map(pv => {
	return {
		title: titleMap[pv.pathname],
		url: pv.pathname,
		pageviews: pv.pageviews
	}
})

return data

This sets the fathom data to something like this:

[
	{
		title: 'Please, Expose your RSS',
		url: '/please-expose-your-rss/',
		pageviews: 99,
	},
	{
		title: 'App Defaults',
		url: '/app-defaults/',
		pageviews: 98,
	},
	// and so on
]

It's worth noting you don't have to map the titles to the data inside the data file, you can do it when rendering popular posts inside a custom filter as Cory did which would give you access to other post attributes you have. I didn't need any of the additional attributes as I'm just outputting the title and link so I didn't bother but it's worth keeping in mind.

Including Popular Posts

I want to include the popular pages in multiple places so an include file makes the most sense. Annoyingly, nunjucks doesn't support passing in variables to an include like liquid does so I need to define the variables before each include:

// all popular posts
{%- set popular = fathom | popularPosts(10) -%}
{% include 'popular_posts.njk' %}

// on a post page, exclude that post by passing in the current url
{%- set pageUrl -%}{{ page.url | stripIndex }}{%- endset -%}
{%- set popular = fathom | popularPosts(5, pageUrl) -%}
{% include 'popular_posts.njk' %}

popularPosts is an Eleventy filter I have defined in my config:

// .eleventy.js

eleventyConfig.addFilter('popularPosts', (pageviews, limit, url) => {
	return pageviews
		.filter(pv => pv.url !== url) // filter out the passed in url
		.slice(0, limit) // limit to the passed-in limit
})

Then the popular_posts.njk include looks like this:

// _includes/popular_posts.njk

<div>
	<h4><svg class="icon"><use xlink:href="#popular"></use></svg> Popular Posts</h4>

<ul>
	{%- for p in popular %}
		<li><a href="{{ p.url }}">{{ p.title }}</li>
	{% endfor %}
</ul>

<p><small>Analytics powered by <a href="https://usefathom.com/ref/IXCLSF">Fathom</a></small></p>

</div>

And the final result (or you can look just below this post and they should be there unless I broke something, or got bored and removed them 🙃). If you don't have analytics yet and want to use Fathom my referral link will give you $10 credit - I've been using them for a quite a while and use them on all of my sites.

Using SVG Sprites

2023-11-21T21:41:14Z

Recently someone emailed me to ask how I was doing SVGs on my website because they'd looked in the source but it wasn't obvious how it actually rendered the SVG so I figured I would do a proper post about it. Here is their email:

I'm looking to steal more ideas from you and found this while looking through your web site source:

<svg class="icon">
  <use xlink:href="#rklogo"></use>
</svg>

But when I inspect the DOM I see it fully expanded:

<svg class="icon">
    <use xlink:href="#rklogo"></use>
    <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" id="rklogo">
        <path class="logo-bar" fill="currentColor" fill-rule="evenodd" stroke="none" d="M 300 400 L 200 200 L 300 0 L 400 0 L 300 200 L 400 400 L 300 400 Z"></path>
        <path class="logo-dot" fill-rule="evenodd" stroke="none" d="M 0 399 L 75 399 L 75 324 L 0 324 Z"></path>
        <path class="logo-bar" fill="currentColor" fill-rule="evenodd" stroke="none" d="M 150 400 L 50 200 L 106 89 L 0 89 L 0 0 L 250 0 L 150 200 L 250 400 L 150 400 Z"></path>
    </svg>
</svg>

Other Methods

Before I get into how to use sprites, there are two arguably easier options to use an SVG on a website: img and directly:

<!-- use the SVG just like any other image -->
<img src="icon.svg">

<!-- put the SVG in directly -->
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <path fill="#000000" fill-rule="evenodd" stroke="none" d="M 300 400"></path>
</svg>

Using an img tag is quick but you lose any ability to change the SVG colors, or animate it, with CSS. If you have an SVG that doesn't need any of that, this works fine.

Putting the SVG in the HTML directly is also a perfectly fine way to do it, but it can get messy if you have lots of icons, or you need to reuse the same icon multiple times.

SVG Sprites

An SVG sprite is basically a collection of SVGs inside an svg tag that can be used with the syntax I already mentioned at the top of the article. A sprite looks something like this where we have an svg tag and then some SVGs inside that. Note the id attribute - this is used to identify the SVG when we use it elsewhere on the site. For my sites, I usually put the sprite right before the closing body tag.

<svg width="0" height="0" style="display: none">
   <svg  id="buymeacoffee" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="currentColor" d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z"></path>
   </svg>
   <svg  id="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
   </svg>
   <svg  id="mastodon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="currentColor" d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"></path>
   </svg>
</svg>

Because the SVGs have fill="currentColor set instead of a specific color, we can style them just using color: #e33d94 in CSS. Handy. To use one of the SVGs, for example buymeacoffee, we can do the following in the HTML wherever we need it:

<svg>
    <use xlink:href="#buymeacoffee"></use>
</svg>

Which will output the icon:

You can just paste in your SVGs to make a sprite or you can do what I do and use https://svgsprit.es. You can drop in a bunch of SVGs and it will give you back your sprite for putting on your site. A lot of static site generators also have plugins to do this, for example this one for Eleventy.

You can view the SVG sprite for this site on GitHub here.

Pokédon: Read Mastodon on a Pokédex

2023-11-18T19:32:15Z

Today, I attended a casual no-official-name hackathon. Just a bunch of people working on silly projects. It did have a theme though: silly interfaces. I spent the first hour before I arrived thinking of a few ideas until I thought of the perfect thing: a Mastodon client but it's in a Pokédex.

Try it out here.

It's fairly limited but you can:

Sign into your instance
View your timeline
Navigate with the keyboard (up/down for newer/older toots)
Listen to a toot with the SpeechSynthesis API

The Mastodon OAuth process is handled by Laravel Socialite and this Mastodon socialite provider which has excellent examples in the readme enabling me to have this up and running in under an hour. Interacting with the Mastodon API is done with kawax/laravel-mastodon-api by the same author.

The SpeechSynthesis API allows you to do text to speech in the browser. For this project I used the speak method as well as two events of SpeechSynthesisUtterance: end and boundary:


// text to speech
let msg = new SpeechSynthesisUtterance()
msg.text = 'Hello'
window.speechSynthesis.speak(msg)

msg.addEventListener('end', (event) => {
    // do something
})

To get the text to output as it's spoken, I took the text, split it on a blank space, then slice the array and join again and then put that back in the element after each boundary event. This isn't the best way as it removes any HTML like links. I'd be interested in a reliable way to do this while keeping the HTML in tact.

const toot = document.getElementById('#toot')
const content = toot.innerText
const tootWords = content.split(' ')
let currentBoundary = 0

msg.addEventListener('boundary', (event) => {
    currentBoundary++
    toot.innerHTML = `<p>${tootWords.slice(0, currentBoundary).join(' ')}</p>`
})

To make Professor Oak slide up when talking, I used CSS transitions on the height of the element:

.poak {
    position: absolute;
    bottom: -5px;
    left: 75px;
    height: 230px;
    overflow: hidden;
    transition: all 1s;
}

.poak.close {
    height: 0;
}

Things it doesn't do right now:

~~Be responsive. I just didn't have time today.~~ Done 2023-11-21
Allow boosting and favouriting.
Allow you to pause audio.
View followers
View your activity

I will probably come back to this at some point and add some of these features but as it is I'm pretty happy with this as a day's project.

Credit for the name goes to Zoe.

Fonts used:

PKMN RBYGSC Font for the text on the screens
Pokémon Font for the logo
Atkinson Hyperlegible Font for the body text

So Many Default Apps

2023-11-16T22:16:38Z

Two weeks ago when Hemispheric Views 097 released and people started putting up their default app posts Jason said this in the HV Discord:

take a hike /now. It's all about /default now

I decided to quickly throw a site together to collect all these (at the time eight) blog posts in one place: App Defaults. I used this old web framework you might have heard of called "artisanal hand-crafted HTML". It was only seven links, maybe a couple more, manually adding a new link didn't seem like a problem. Until way more than that arrived. At it's peak, there were 35 new posts added to the list. As of this post, there are 151 posts listed.

Date	Posts Added
4/11	15
5/11	10
6/11	5
7/11	35
8/11	24
9/11	14
10/11	7
11/11	10
12/11	11
13/11	6
14/11	7
15/11	5
16/11	2
Total	151

Three days in I realised this was likely to take off so I switched the site to Eleventy and a json data file to keep track of the blog posts. I also added RSS feeds for everyone's sites.

Day four was the busiest for submissions and I had a fun idea to allow anyone to subscribe to all of the websites mentioned. I generated an OPML file from the site data and added a link to that to the site.

Network Graph

The latest feature was added today when I was inspired by something said on episode 098 but as of this moment I cannot remember what it was that was said. Regardless, I wanted to visualise the links between all the blog posts to get a sense of how the "trend" spread between people so I created the Network Graph page.

To achieve this I used @extractus/article-extractor to extract the article contents from every post, then I used linkedom to get all the links contained in each article, and then I mapped each of those links to the post they were linking to. Finally I ran a script to map that data to the format required for network to render the graph. This is the same graph used on omg.lol to show the referral data and thankfully I could look at Adam's implementation to speed things up.

A few stats to finish:

67 of the sites were added via a pull request on GitHub
The most popular TLD is, unsurprisingly, .com (48 posts). .blog, .me, and .net were tied for second with 13 posts each.
144 of the 151 sites have RSS feeds 🙌

Using the Johnny Decimal System

2023-11-15T18:09:17Z

In episode 028 of Hemispheric Views Andrew mentioned the Johnny Decimal (JD) system for organising files. I made a note of it as a thing to look into. Then, like a lot of things, I never went back to investigate. Then in episode 096 they had Mr Johnny Decimal himself on to talk about the system. This was the kick I needed to properly check it out. I also spoke with John about the JD system on the two most recent episodes of Ruminate if audio is more your thing.

Before we get into it, the JD system has concepts that are worth knowing about for any of this to make sense:

Areas - these are the top level of the folder system, e.g. 10-19 Family
Categories - These are the folders inside areas, e.g. 10 Finance
IDs or Items - These are the actual files that exist inside of areas, e.g. 10.01 Insurance

Attempt One

I skimmed through the beautiful website to get a sense of what the "rules" are for the system and starting coming up with my categories. Note I use the word "skimmed" there because I got this very wrong; my categories were too narrow and my areas were too broad to make any sense. Johnny was kind enough in the JD Discord to give me some feedback after I clearly rushed though and didn't pay enough attention to the website. I'll just go over two of them here:

00-09 System

00-09 System
│ 00 Inbox
│ 01 Exported Data
│ ├── 01.01 Twitter
│ ├── 01.02 Tumblr
│ ├── 01.03 Instagram
│ ├── 01.04 Mastodon
│ ├── 01.05 Reddit
│ ├── 01.06 Project Databases
│ ├── 01.07 Other
│ 02 Education Archive
│ ├── 02.01 College
│ ├── 02.02 Uni
│ ├── 02.03 School
│ 03 Sites Archive
│ ├── 03.01 Just Delete Me (JDM)
│ ├── 03.02 Wordpress Themes
│ ├── 03.03 Personal
│ ├── 03.04 Freelance
│ ├── 03.05 DevsDoDesign
│ 09 Archive
│ ├── 09.01 Archive
│ ├── 09.02 Camera Uploads

I think all archives can just become 09 archive. it doesn’t feel like you have anywhere near 99 things you’ll ever put in there? fill ‘er up baby

In this case, I was trying to organise too hard. As Johnny pointed out, for an archive it really doesn't matter how much stuff is in there. Fill 'er up baby indeed.

40-49 Games

40-49 Games
│ 40 Screenshots
│ 41 Manuals
│ 42 ROMs

that’s a nice clear area, perhaps it doesn’t need its own area and could just be a category elsewhere though? do you see it filling up with time, or is this it? if this is it it’s a ‘waste’ of an area as it is

I mean you have 10 to use, it’s not like it’s a crime…I’ve just learned over the years that compression tends to better results

This category was far too specific. This is 10 years worth of stuff, it's unlikely I'm going to suddenly have a huge influx in new areas of things for this.

Johnny also offered some other advice about my other categories but the general gist was I hadn't quite got it. So I dug into the book (which Johnny kindly sent me).

The Workbook

The JD Workbook is a 110-page ebook designed to "guide you through the entire process of setting up your own Johnny.Decimal system". There are also videos at the end of each section which go over everything in that chapter. I found these useful particularly seeing how Johnny does his index in Bear.

Johnny gave me this advice before starting the workbook, in reference to his previous comments:

I’d really like to see the results after a workbook-doin’. When you do that, try to forget all of this.

I read the book twice, once just reading and the second time while taking notes about what I thought my areas and categories should look like. I started by creating a new directory in my iCloud Drive, created folders, then used tree to see the folder structure in plain text:

tree -L 3 -d
# -L 3 for how many levels deep
# -d for directories only

├── 00-09 System
│   ├── 00 Index
│   │   └── 00.01 Index Files
│   ├── 01 Exported Data
# ...and so on

I even printed out the worksheets from the back of the book as suggested by Johnny. I found the process really helpful to actually write down with pen and paper rather than into Obsidian or some other note taking app.

The Index

Before reading the book I didn't really understand the need for the index. I get it now. The index is the source of truth for the location of items and any additional notes or tasks related to the item. The index is a list of all of your JD IDs stored in some kind of note app, in my case Obsidian. After watching the video on the index, I realised that the part that would be useful to me was adding notes about the files in my IDs. So each ID has a corresponding note. For example, I have a folder called 30-39 Resources/30 Fonts/30.02 Media Fonts and in my index Obsidian vault I have a note called 30.02 Media Fonts.md. This note contains the following link to the source of the London Tube.otf font:

London Tube Font: https://www.fontspace.com/london-tube-font-f2717

I have found being able to add additional notes about a certain items really helpful. In the past I would have the files for something like applying for a mortgage in Finder and then a separate note in Obsidian with things like dates and expected timelines but those two things didn't know anything about each other. Using the index links those things together: if I need to find out information about applying for the mortgage, I open up 11.04 Mortgage.md and can see any notes and tasks that need to be done. And based on the ID I know that it it's stored in 10-19 Family/11 Finance/11.04 Mortgage. The index is also the place to start when a new project or file doesn't have a home.

As a slight aside and a little outside the spirit of the deliberate nature of the JD system, I didn't actually create the notes in Obsidian until I was mostly done with the folders and files themselves. I built this little script to make the files for me instead:

#!/bin/bash

output="/path/to/obsidian/vault"

# put a list of folders names here
files=(
"50.01 Audio Books"
"50.02 Comics"
"50.03 Ebooks"
)

for f in "${files[@]}"; do
    touch "$output/$f.md"
done

After reading the workbook for the second time and thinking some more about my structure, this is where it's at as of today:

JD System Structure

00-09 System
| 00 Index
│ ├── 00.01 Index Files
| 01 Exported Data
│ ├── 01.01 Twitter
│ ├── 01.02 Tumblr
│ ├── 01.03 Instagram
│ ├── 01.04 Mastodon
│ ├── 01.05 Reddit
│ ├── 01.06 Project Databases
│ ├── 01.07 Other
│ ├── 01.08 TwitPic
| 09 Archive
│ ├── 09.01 Archive
│ ├── 09.02 Camera Uploads
│ ├── 09.03 DevsDoDesign
│ ├── 09.04 Freelance
│ ├── 09.05 Just Delete Me (JDM)
│ ├── 09.06 Personal Sites
│ ├── 09.07 Wordpress Themes
│ ├── 09.08 College
│ ├── 09.09 Uni
│ ├── 09.10 School
│ ├── 09.11 Talks
│ ├── 09.12 Artwork
10-19 Home and Family
| 10 Products
│ ├── 10.01 Washing Machine
│ ├── 10.02 Dishwasher
│ ├── 10.03 Freezer
│ ├── 10.04 Oven
│ ├── 10.05 Microwave
│ ├── 10.06 TV
│ ├── 10.07 Electronics
| 11 Finance
│ ├── 11.01 Mortgage
│ ├── 11.02 Insurance
│ ├── 11.03 Credit Cards
│ ├── 11.04 Loans
│ ├── 11.05 Monzo Pots
| 12 Building Work
│ ├── 12.01 Floorplans and Layouts
│ ├── 12.02 Photos
│ ├── 12.03 Kitchen
│ ├── 12.04 Utility Room
│ ├── 12.05 Bathroom
| 13 Purchases
│ ├── 13.01 123 House Street
│ ├── 13.02 456 House Road
| 14 Legal
│ ├── 14.01 Work
│ ├── 14.02 Deaths
│ ├── 14.03 Deed Poll
│ ├── 14.04 Payslips
│ ├── 14.09 [redacted]
20-29 Podcasts
| 20 Ruminate
│ ├── 20.00 Recordings
│ ├── 20.01 Episodes
│ ├── 20.02 Artwork
│ ├── 20.03 Sounds
│ ├── 20.04 Shownotes
│ ├── 20.05 Episode Art
| 21 We Got Family
│ ├── 21.00 Recordings
│ ├── 21.01 Episodes
│ ├── 21.02 Artwork
│ ├── 21.03 Sounds
│ ├── 21.04 Shownotes
│ ├── 21.05 Episode Art
| 22 Follow Out
│ ├── 22.01 Appearances
│ ├── 22.02 Mentions
│ ├── 22.03 Fan Art
| 23 Show Archives
│ ├── 23.01 The Ricky Gervais Show
│ ├── 23.02 Bionic and Bonanza
│ ├── 23.03 Cooking With Brett and Myke
│ ├── 23.03 Futurama
│ ├── 23.04 Hello Internet
30-39 Resources
| 30 Fonts
│ ├── 30.01 Coding
│ ├── 30.02 Media
│ ├── 30.03 Symbols
│ ├── 30.04 Others
| 31 Icons
│ ├── 31.01 General Use
│ ├── 31.02 Niche
| 32 Music and Sounds
│ ├── 32.01 Clips
│ ├── 32.02 Royalty Free Music
│ ├── 32.03 Blahaj
| 33 Books
│ ├── 33.01 Audio Books
│ ├── 33.02 Comics
│ ├── 33.03 Dev
│ ├── 33.04 eBooks
│ ├── 33.05 Lego
40-49 Hobbies
| 40 Games
│ ├── 40.01 Screenshots
│ ├── 40.02 Manuals
│ ├── 40.03 ROMs
| 41 Lego
│ ├── 41.01 Manuals
│ ├── 41.02 Photos
│ ├── 41.03 MOC
│ ├── 41.04 Comic Con Exclusives
| 42 Raspberry Pi
│ ├── 42.01 PiSight
│ ├── 42.02 Now Playing Pi
| 43 Fundraising
│ ├── 43.01 St Jude 2023
| 44 Streaming
│ ├── 44.01 Backgrounds
50-59 Media
| 50 Tattoo Ideas
│ ├── 50.01 Inbox
│ ├── 50.02 Arm Tattoo
│ ├── 50.03 SleeveStar
│ ├── 50.04 CSS HTML Tattoo
| 51 Memes
│ ├── 51.01 Mine
│ ├── 51.02 Gifs
| 52 Profile
│ ├── 52.01 Avatars
│ ├── 52.02 Headers
│ ├── 52.03 Memoji
│ ├── 52.04 RK Logo
| 53 Wallpapers
│ ├── 53.01 Desktop
│ ├── 53.02 Phone
│ ├── 53.03 iPad
| 54 Media Screenshots
│ ├── 54.01 Comics
│ ├── 54.02 TV
│ ├── 54.03 Back to the Future Posters
│ ├── 54.04 Cornetto Trilogy Posters
| 55 Music
│ ├── 55.01 Album Covers
│ ├── 55.02 Linkin Park Demos
│ ├── 55.03 Bowling for Soup Demos
│ ├── 55.04 Albums
| 56 Photos and Videos
│ ├── 56.00 Camera Uploads
│ ├── 56.01 By Year
│ ├── 56.02 [redacted]
│ ├── 56.03 Paper Drawings
│ ├── 56.04 Various
│ ├── 56.06 Personal Videos
│ ├── 56.07 YouTube Videos
│ ├── 56.08 Wedding Photo Booth

Using JD Elsewhere

One of the things I found really useful was the idea that by using numbers for sorting folders instead of names, things don't move. If I renamed 30.02 Garden Patio to 30.02 Garden Decking the folder stays in the same place. This seems obvious in hindsight but I found this so useful I incorporated it into my main Obsidian vault. Previously I had three folders called Ideas, Posts, and Projects as well as some more time-specific ones. Now, these are 00.01 Ideas, 00.02 Posts, and 00.03 Projects. Another very obvious-in-hindsight idea came from Johnny's index video: sorting files by last modified instead of by name. I've found this to be way easier to be able to jump in and update a note quickly when I have an idea.

Conclusion

I think systems like this tend to either work for a person or don't work at all, there's no middle ground. That's not the case for the JD system. I believe even if it doesn't work as a whole for someone (like John) there are loads of good ideas in here that can be applied in a lot of different cases. It has worked very well for me and I've been able to find files I'm looking for so much quicker than I could before.

Check out the Johnny Decimal website to read more and if you like it, check out the workbook.

Please, Expose your RSS

2023-11-06T13:11:20Z

Earlier this week I had a need to manually find a bunch of people's RSS feed links. It seemed simple enough: go to their website and look for an RSS/Subscribe link but I was surprised to find that a lot of people don't have a link anywhere to their feed.

Even if people only ever add your website into their feed reader and let the app find the RSS feed (see below for more info on this), showing an RSS link reminds people that RSS exists, a win for the open web.

My second step when finding a link failed was to use this handy JS snippet from my Podcast Duration project:

return Array.from(document.getElementsByTagName('link')).find(l => l.type.includes('application/rss+xml'))?.href

This looks for a <link> tag on the website that has a type of application/rss+xml. This is called RSS auto-discovery and is a standard way to expose RSS feeds to help browsers and other software to automatically find a site's RSS feed.

Like the standard link, a lot of sites were also missing this. This is (at least as a first step) what feed reeders like NetNewsWire will use to automatically find a feed when you paste in a URL. If you have an RSS feed, you should have the following in the head of your website:

<link rel="alternate" type="application/rss+xml" title="My Cool Website" href="https://example.com/feed.xml" />

<!-- use application/atom+xml for an atom feed -->
<link rel="alternate" type="application/atom+xml" title="My Cool Website" href="https://example.com/atom.xml" />

If you have multiple feeds, you can have more than one link tag that links to those feeds as well. For example, say you have a JSON feed and a podcast feed you want to link to:

<!-- Website RSS feed -->
<link rel="alternate" type="application/rss+xml" title="My Cool Website" href="https://example.com/feed.xml" />

<!-- Website JSON feed -->
<link rel="alternate" type="application/json" title="My Cool Website but JSON" href="https://example.com/feed.json" />

<!-- Podcast RSS feed -->
<link rel="alternate" type="application/rss+xml" title="My Cool Podcast" href="https://example.com/podcast.xml" />

Please, expose your RSS.

Update 2023-12-09 via James:

if you're going to add an RSS button, please ensure it looks like an RSS button and is in RSS orange

This is an excellent idea and I have done so here.

App Defaults

2023-11-03T17:31:10Z

Inspired by Hemispheric Views 097 - Duel of the Defaults! and this post by Gabz herein lies all the apps I use in the various categories as written by Andrew:

📨 Mail Client
- Mail.app
- Score: 1
📮 Mail Server
- iCloud with custom domain
- Score: 1
📝 Notes
- Notes.app, Obsidian
- Score: 2
✅ To-Do
- Reminders
- Score: 1
📷 iPhone Photo Shooting
- iOS Camera
- Score: 1
🟦 Photo Management
- Photos.app
- Score: 1
📆 Calendar
- Fantastical
- Score: 2
📁 Cloud File Storage
- iCloud Drive
- Score: 1
📖 RSS
- NetNewsWire
- Score: 2
🙍🏻‍♂️ Contacts
- Contacts.app
- Score: 1
🌐 Browser
- Safari, Chrome for development/work
- Score: 2
💬 Chat
- Discord
- Score: 2
🔖 Bookmarks
- The Intersect
- Score: 2
📑 Read It Later
- Omnivore
- Score: 3
📜 Word Processing
- Sublime Text
- Score: 3
📈 Spreadsheets
- Numbers
- Score: 1
📊 Presentations
- Keynote
- Score: 1
🛒 Shopping Lists
- Reminders
- Score: 1
🍴 Meal Planning
- n/a
- Score: 0
💰 Budgeting and Personal Finance
- A spreadsheet
- Score: 2
📰 News
- Mastodon, BBC News
- Score: 2
🎵 Music
- Apple Music
- Score: 1
🎤 Podcasts
- Overcast
- Score: 2
🔐 Password Management
- 1Password
- Score: 2
🔔 Hard Quiz Special Topic Interlude (Something for Which I’d Be the Subject Matter Expert in the Room)
- Back to the Future

Final score: 37

St Jude 2023

2023-10-07T06:19:47Z

It's September 37th and the Relay for St Jude campaign has closed. They raised $774,262.53, putting Relay at $2.98m lifetime raised! Our St Jude sub-campaign raised $12,590.57 and sent out 106 sticker packs to 15 different countries. This is a far cry from my initial goal of $250.

I want to thank everyone who donated but I want to call out some people specifically as well:

Adam for donating half of omg.lol's profits for the entire month - $3309! If you want to thank him, you should sign up for omg.lol - it's a fun community
Stephen for buying the Coin Daddy domain
Kate for always finding bugs the second I pushed a new change. Also for the idea for Coin Me, Daddy
Ben for helping with the API so I could build all the stupid websites for the campaign (see below)
Ian, Mike and all the other dollar daddies
Zach for creating the Donation Daddy logo

I also got myself a couple of nice rewards. JD mowed my name into a lawn and I will be getting a Jony Cube sticker from Matt. We hit our first milestone which meant I had to watch Superfast! - you can listen to the episode of We Got Family about it here.

The campaign this year led me to make four different websites to help with donations:

Septembed - A script for embedding a campaign on your website. This was the start of the japes. Very proud of the name as well.
Desk Mat Help - The precursor to Coin Me, Daddy this site lists all the campaigns that were close to $250 to get a desk mat
Coin Me, Daddy - The most popular of the sites, this one was an idea from Kate. It shows all campaigns that have yet to raise one dollar to get a coin. There are so many donations with the title "Dollar Daddy"
Donation Treats - Lists all the rewards you can get for all the available campaigns

Initially, these were all separate websites with very similar code. Towards the end of the month I merged these into one single codebase. This should make it a lot easier next year when I'm sure I'll think of some other site to do.

Add Full Screen Artwork to Your Podcast

2023-09-22T12:18:12Z

tl;dr: You can't set full screen artwork without being featured by Apple.

In iOS17, the Apple Podcasts app has (for some shows) fancy new full screen artwork but I noticed that my shows don't.

After some hunting around, some tooting, and messaging John, I came across this page that outlines the full screen artwork. It explains the sizes for hero images, channel covers, and full page show art. It even has photoshop templates. My podcasts are unlikely to be featured but I figured it was worth a shot.

Once I made the art and hit the submit button, it turns out you can only submit hero images and if Apple then deems my show worthy enough for a feature will they then request the full page art.

This feels really shitty that you have to get featured just to get nicer artwork in the Apple Podcasts app which is far and away the most popular podcast app.

I'm (Not) Building a Podcast Host

2023-09-20T11:32:33Z

Late last year I moved Ruminate from Simplecast to it's own site built with Eleventy for a two reasons:

I wanted full control over how the site looked
Simplecast is $15 a month and that's a lot for a show that makes no money

Since then, I've successfully used that same Eleventy site to build the site for We Got Family, my Fast and Furious podcast. Having both my podcasts hosted myself has been great. I can automate uploads, extract the title and description from the file instead of having to copy and paste it into a CMS, and it costs me basically nothing.

One thing I am missing since I moved away from Simplecast is listener/download numbers. This is, in my opinion, the core selling feature of a dedicated podcast host. Each host does the calculations differently (and they all keep their methods secret) but they do all seem to at least attempt to follow this thrilling document titled "Podcast Measurement Technical Guidelines Version 2.1". There's some boring stuff in there about the poor advertisers who can't get the data they want and some talk about a new, yet-to-happen reporting feature from some apps but the part I care about is counting listens. The hard part of calculating downloads is parsing server logs: if someone listens in a browser, logs will show multiple partial downloads for that file so that should be counted as one listen.

Thankfully, Bunny has a very nice log format that is easy enough to parse. A quick-and-dirty solution me and Adam came up with for counting a single listen is if the IP address, user agent, and file are the same within the same 24 hour period, count that as one listen. This isn't perfect by any means, but will be good enough for what I want.

This attempt at generating listen stats was partially research into an idea I've had running around in my head for at least a year:

Can you build a podcast host for smaller podcasts like mine for, say, $20 a year?

The accounts, uploading files, hosting websites, is all easy enough but when you consider download costs the answer, after going over some calculations with Zoe, is no. The file egress costs (the cost of downloading the files from a CDN) is too high even for a small show.

Update: I got the calculations wrong here for Bunny's pricing so it might still be viable as a product although the margins are still tight.

As an example, if a show has a 30mb episode and that show gets 500 downloads, that's ~15gb of egress. On BunnyCDN that would cost somewhere in the region of $1.50. AWS S3 is about the same. Assuming one episode a month (unlikely), that's pretty close to $20 a year.

These calculations don't even take into account older episodes getting more downloads over time (they definitely will) or the show growing over time (it likely will). What about if someone decides to listen to all 74 episodes of a show at once leading to 2-3gb of downloads in one go?

There is an argument to be made that variable pricing might work: pay $X per year then monthly pay whatever the CDN cost for your show is but this feels counter-intuitive to building a simple podcast host. I could charge a similar amount as some of the existing services but then I'm not bringing anything new to the table.

Ultimately every solution to the cost problem goes against my initial idea. Instead, I'm going to focus some time on making my Eleventy podcast site more usable for other people to deploy their own podcasts.

Fundraising for St Jude

2023-08-28T15:28:07Z

This year is Relay FM's 5th annual fundraiser for St Jude Children's Research Hospital. If you don't know St Jude:

The mission of St. Jude Children’s Research Hospital is to advance cures, and means of prevention, for pediatric catastrophic diseases through research and treatment. Consistent with the vision of our founder Danny Thomas, no child is denied treatment based on race, religion or a family’s ability to pay.

Their goal this year is to hit $2.5 million lifetime donations. As part of that individuals, like me, can set up their own campaign which is exactly what I've done.

I set a milestone of $150 at which point I will watch all 99 minutes of Superfast!, a Fast and Furious parody movie which I definitely do not want to watch in any way. That milestone has been hit already so keep an eye out on the We Got Family podcast feed for an episode about it.

My original goal was $250 but Adam of omg.lol kindly donated the entire amount in one go. Then he went one step further and commited to donating 50% of profits from omg.lol for the entire month. So if you're an omg.lol member (or you sign up for a new account) and you renew your address you're donating to the campaign.

We also have two omg.lol codes up for grabs: anyone who donates $10 or more will be entered to win a five year code and whoever donates the most will win an ultra-rare lifetime code.

I have moved the goal to ~~$3000~~ ~~$5000~~ $10000 and as generous as Adam is being, I don't want it to all come from him so if you can donate anything, even a dollar, it all helps towards an amazing cause.

Donate to the campaign here

Update post

It’s Better in the App and Other Lies

2023-08-22T10:00:00Z

I've seen a few conversations on Mastodon the last week or so about why we have so many apps rather than decent mobile websites and why we're shown "things are better in the app!" banners (and who's fault is that website?!). I've been thinking about this on and off for a long time. I don't like that Apple hold all the keys to distrubting an app and I'm a big fan of the open web. I do beleive there are good reasons for native apps in some cases (specifically native features not available in browsers) but not everything needs an app. I think there are three different reasons this is happening so much.

Gobbling data

This is the obvious one. It's a lot easier to collect data from a native app than it is from a website. On an app I have very little control over what requests are made, blocking ads, that kind of thing. So of course companies want to use apps to collect this data.

Making money

This one applies more to indie developers than it does to big companies but I'm certain people are more willing to pay for an app than access to a website. As an example, Callsheet could be a website but would people pay $9 a year for a website? I don't think they would.

People want apps

This last one is at least a little bit on Apple with their "there's an app for that" ad. A few years ago I ordered a washing machine from AO and if I was on mobile the only way to track my order was to download their brand new tracking app. I contacted them about this and I was told they made the app because lots of customers were asking for it.

Just think about that for a second: people want to download an app just to track deliveries of their white goods, something which most people order at most once a year. This is bonkers to me. They did eventually fix the deep link so you could track from the website on mobile.

In some instances it's become impossible to do certain things on mobile because the app doesn't support the feature (for example, buying ebooks on Amazon) but I never get redirected back out

Just Delete Me: Ten Years Later

2023-08-18T12:44:06Z

Ten years ago Ed Poole and I launched Just Delete Me. Just Delete Me, as I described it at the time, was:

a directory of urls to delete your account from web services

I wrote three blog posts in first ten days which you can read here:

As I recall we made it over the course of one Sunday afternoon and launched it the day after. The first day it had a decent amount of visitors (~3000) and then seemingly overnight it got picked up everywhere, including some huge sites:

Mashable
Wired
Slate
CNET
Neil Gaiman reblogged it on his Tumblr

We spent the next week or two frantically merging pull requests for new sites, going from the 16 we started with to over 100 in a very short space of time. We hit one million page views within nine days of launching and I was interviewed by the Wall Street Journal and a BBC radio station (I don't remember which one nor do I have the recording).

A few days after this I added a service to the site and marked it as difficult to delete, then tweeted about it. Within hours I got an email from their CEO (I won't name him but I will say maybe he had a day phone and a night phone) who was annoyed we had marked them as such and wanted to know what he could do to change that. To the best of my knowledge, they never actually did anything about it.

The only way to contribute to the site was to open a pull request on Github which wasn't great for non-developers so I set up a Google form to collect suggestions and links. We got so many pull requests I completely forgot about the form for a couple of months. When I did remember about it and logged in to have a look I was genuinely surprised to see there was thousands of submissions but most of them weren't suggestions for sites. There was hundreds of submissions that included peoples usernames and passwords for various sites (loads of Facebook ones) because they thought the form was a way to get me to delete their accounts. I promptly deleted that form and the associated sheet, I did not want to be responsible for that data.

Thanks to contributors the site eventually had translations into 20 or so languages and grew to have 476 sites listed at the time I sold it. At some stage in the first few months we put Google ads on the site (gross) and it paid my, admittedly small, rent for the next 2 years (not gross).

Unfortunately the person I sold it to let it go stagnant (turns out they just wanted the domain) but someone forked the project, put it up on a new domain (https://justdeleteme.xyz/) and continued adding sites. It now has over 1500 sites and services listed. This forked project also spun off two other projects based on the same premise: Just Get My Data and Just What's The Data.

The original version of the site was built with ~~hopes, dreams, and duct tape~~ a makefile and a whole lot of json files. If I was going to make this exact site today it would be significantly easier with Eleventy data files and I could probably avoid a lot of the merge conflicts we had in the early days with a better data structure. I also definitely wouldn't put Google ads on the site.

Just Delete Me is still my most popular project at least in terms of page views, although the Monzo Pot Image Generator has definitely been more consistent in terms of visits (and ~55k images generated).

Here's every link I collected about the site back then. Given it's been 10 years I'm guessing a lot of these are dead now.

Compiling CSS with Eleventy

2023-08-16T12:30:35Z

Yesterday I asked on Mastodon what methods people are using for compiling CSS with Eleventy. It's been a while since I've need anything more than a single stylesheet but since I keep adding various things to my site, the stylesheet has got a bit unweildy. I'll admit, I know very little about the various css libraries and tools (the last time I did this I used Gulp which tells you how long ago that was) so I was coming to this with basically no knowledge. My basic requirements were:

Compile multiple CSS files into one
Minify the CSS
Keep everything in Eleventy. I don't want to have to manage additional libraries and scripts outside the Eleventy build step.

PostCSS

The first response was Jason with his method of using PostCSS with the easy-import and nesting plugin. This is a nice solution and I have used PostCSS a little bit in the past. Martin Schneider has a nice blog post about using PostCSS before the site is built so they can inline and purge the CSS.

Read the fucking manual

David Darnes came at me with a classic RTFM. Turns out Eleventy has a page on the docs for doing exactly this. This method uses Sass and requires a little bit of config. One thing to note is by default this will output all .scss file to the built site, so I added a check to see if the file is named app and if it's not, then skip it. Alternatively you can put your files in an _includes directory and these won't be output (thanks Dave). style: 'compressed' will minimise the CSS.

// .eleventy.js
const sass = require('sass')
const path = require('node:path')

module.exports = function (eleventyConfig) {
  eleventyConfig.addTemplateFormats('scss')

  eleventyConfig.addExtension('scss', {
    outputFileExtension: 'css',

    compile: async function (inputContent, inputPath) {
      let parsed = path.parse(inputPath)
      if (parsed.name !== 'app') return // we only want the output of app.scss
      let result = sass.compileString(inputContent, {
        loadPaths: [parsed.dir || '.', this.config.dir.includes],
        style: 'compressed',
      })

      return async (data) => {
        return result.css
      }
    },
  })
}

LightningCSS

I hadn't heard of LightningCSS until yesterday but it's a "CSS parser, transformer, bundler, and minifier" built with Rust. Stephanie Eckles has an Eleventy plugin for using LightningCSS which handles all the configuration and as a bonus ignores any files that start with _ so they won't get copied to the build folder.

// .eleventy.js
const lightningCSS = require("@11tyrocks/eleventy-plugin-lightningcss")

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(lightningCSS)
}

Ultimately I like how simple this is to add to my existing site without any additonal configuration so I think this is the way I'm going to go.

Block ChatGPT and other AI Bots with robots.txt

2023-08-12T09:12:43Z

A robots.txt file "tells search engine crawlers which URLs the crawler can access on your site". Generally one would use this to tell a search engine which directories should be crawled, which ones shouldn't, or to completely block from crawling your site. The file lives at the root of your site. You can see mine here.

ChatGPT has two user agents that might attempt to crawl your site: GPTBot and ChatGPT-User. To disallow crawling from both of these, we can set our robots.txt file like so:

User-agent: GPTBot
Disallow: /

User-agent: ChatGPT-User
Disallow: /

Update 2023-09-29: Neil Clarke has a great post with some additional bots that should be blocked:

User-agent: CCBot
Disallow: /

User-agent: Google-Extended
Disallow: /

User-agent: Omgilibot
Disallow: /

Adding a robots.txt file to Eleventy

Using Eleventy's passthrough file copy we can create a robots.txt file and then add the following to our Eleventy config to make sure the file is copied to your built site:

eleventyConfig.addPassthroughCopy('robots.txt')

Alternatively you can do this with just a file and a permalink:

---
permalink: robots.txt
eleventyExcludeFromCollections: true
---

// user agents here

And there we go. ChatGPT, in theory, should be blocked from crawling our site.

Three Years of Hemispheric Views Feedback

2023-08-01T12:00:01Z

I recently started listening to the Hemispheric Views podcast and decided I would go back to the start and listen to the 74 previous episodes that I hadn't listened to. I wrote down all my feedback. I started this endevour on the 17th of May and finished the last episode this morning. Jason agreed to this:

We will take any feedback, 3 years old or otherwise haha

In total I listened to just over 58 hours of main show and over ten hours of the one prime plus dot com member show. About ten episodes in I started singing the theme song to Baby Knight.

Main Show

Roast my desk please
001 Jason tried Vegemite, has he tried marmite?
002 Martins “Game Boy micro USB” joke wasn’t acknowledged as it should have been
003 Did Jason ever develop the 1926 camera film?
004 Halloween is the worst "holiday"
009 Of course the week starts on Monday, anything else is mayhem
009 I watched an episode of Bargearse and it was glorious
010 I love picking a random movie that's on TV when I’m away in a hotel or something but never do it at home
010 One of favourite bands covered the Round the Twist theme song
011 Andrew is a briefcase wanker
012 Gabriel’s Orange Lego X-Wing is canon
014 What the hell is with Australian nature
014 I would die for the Gobbledok
014 “Nissan Iambic pentameter” 👏
016 Andrew hasn’t seen Batman and Robin?! He should rectify that
016 I put a Raspberry Pi camera in an iSight
017 "Double digit coffee action" would be a good band name
019 My partner spent years using ~$10 headphones. When I gave her my good ones, she was blown away at how good music can sound
020 Screw it, I’m making my own asset deprecation spreadsheet
020 Sealed triangle toastie is the best toastie type
022 Alex makes the media corner theme tune, a few years later he’s in Eurovision. Suspicious.
022 The premise of Crackerjack sounds identical to Blackball
022 “Perthsuaded” I hate this
023 “There still isn’t a good email app on iOS” - Andrew. This is because email is bad, stop looking for your own sanity
023 “Everything surrounding email is wrong”
023 Here’s my homescreen
023 I wish Apple would allow apps to be anywhere on the Home Screen too. Please Tim Apple.
023 I have 203 apps installed
025 Is Andrew still using the johnny decimal system?
027 Game preservation is why I’ve tried as best I can to only buy physical games - currently I have around 300 across a bunch of consoles
028 A few years ago we built a Nokia 3310 simulator in the browser
029 I wear shoes in the house, life is too short
031 I wear the same black socks all year round, regardless of jeans or shorts. All my socks are identical so I don’t have to pair them up. I say no to funny socks
031 Perhaps there’s a market for discounted once-used socks, then Jason could have new socks every day
031 This is more than I ever needed to know about air conditioning
033 I also love going to grocery stores in other countries
033 I laughed at Andrew’s joke about going to Cloud 9
034 My neighbour works at the Office of National Statistics and it sounds fascinating
034 I’ve never seen rocky road with Turkish delight. That sounds incredible.
036 I spat my drink out at “FinderJimbo”
038 “Clean show”? Jason has definitely sworn on at least 4 episodes
038 Movies our spouses don’t like? My partner refuses to watch any Fast and Furious movie despite the fact that I love them
038 TODAY!
039 I know my neighbours now but didn’t at my last house that I lived at for 10 years. I did what Jason did when we moved and drew a map with names of everyone. It helped that we moved in around Christmas so everyone sent cards with their names
040 I am furious Andrew doesn’t use “Grand Canion” as a username everywhere because that is so fucking good
040 Pen licence! I never actually got mine because my writing was (and still is) terrible, I outlasted them until year 4 when everyone had to use a pen anyway
042 Right at the start Jason swears and isn’t bleeped and then immediately after in the same sentence he is bleeped. No notes, just amused
042 That stupid EA Sports intro in burned into my brain from play FIFA World Cup ‘98 on the N64. Immediately after Song 2 by Blur would play so it wasn’t all bad
044 Never say “state daddy” again
044 Fruit Loops is a garbage cereal. Lucky Charms all the way
044 Andrew said the milk on the box looked too white and creamy. That’s because they usually use paint or PVA glue for milk in food photography
045 I couldn’t use just spotlight. I have so many workflows I use in Alfred
046 The shuffling albums on Spotify drama with Adele was so stupid
046 One arcade machine for my house? Time Crisis 2
046 It’s 7am here and a breakfast lasagne sounds amazing
046 What happened to Decimeal
049 “I don’t know if anyone does this but go back to the beginning of the RSS archive, apparently people have other things to do” - Martin
049 The formal intro thing is unsettling
050 What on earth was all this Dolly Parton talk?!
051 I hadn’t considered the comparison to Dharma for Severance but that is an excellent observation
051 🛎️ More Dolly Parton
051 I watched Severance in one night until 6am while sleep-deprived when Baby Knight was born. It definitely gave it a different vibe
052 Another recommendation for Punk Rock Factory: We Don't Talk About Bruno cover
053 The people saying sorry too much thing is a problem in the UK as well, I hate it
054 I refuse to listen to podcasts that have dynamically inserted ads
054 I have a disappearing dock and like it. Sorry Natasha
055 My MX Master works fine on Bluetooth
057 Martin on Elon buying Twitter “I’m cautiously optimistic that something really useful will happen and it will change for the better”
058 My entrance music would be Not the Same by Bodyjar because it’s a banger
059 I’m scared to do bad show notes lest I feel the wrath of Jason
061 I have my school yearbook but I never look at it
061 Perfect foods: pizza, spaghetti bolognese, donor kebab with lettuce and garlic sauce
061 “Feld tip” 👀
063 This was an excellent discussion about podcasts
064 I refuse to believe it's pronounced ex-mouth
064 This business corner was incredible
065 I guessed the bus story was fake
068 wtf was that Cappuccino talk
069 We have Nobby’s nuts here too
069 You’re making me want a Play Date
069 My top five movies:
- Back to the Future (I even have a Back to the Future tattoo)
- Hot Fuzz
- Baby Driver
- Captain America: Winter Soldier
- Straight Outta Compton
070 Benji said he doesn’t like the yellow bit of eggs. Notable.
070 “Be more negative” - Benji
072 Martin will hate this sign from a UK chain where “everyday” should be two words
074 My favourite photos from 2022:

A phone box in Edinburgh

The Edinburgh skyline at night

Having a drink in front of the Pantheon

one prime plus dot com member show

01 Now I need to make a home wiki
02 The eighties were sexy
06 This number plate story is wonderful
06 In the UK we didn’t line dance at school, but we did Morris Dance
07 I started podcasting because I said, kind of as a joke, “Lets do a podcast?” to John Voorhees ~8 years ago
07 “Am I being too intense?” - Martin. No Martin, you crack on.
08 I guessed before I listened: I think Jason is tallest, then Andrew, then Martin.
08 UK folks uses imperial for height and a lot of the time weight as well. Oh and speed limits and distances are usually imperial too.
08 You are all very tall
09 The health insurance I have through work has a scheme to get a discounted Apple Watch if you do a certain amount of steps/exercise minutes every week
013 My mum was a social worker her entire career. I remember her saying “are you sure about these computers as a job?” when I was 16. Maybe she was right.
013 I have it on good authority that a lot of universities use group work so the students who are doing worse still pass because they get paired up with one or two people who will do the work
016 My pre-teen photo, 5 years old on my last day of a holiday in Cyprus:

016 wtf is ham sauce for beans
019 The kebab story 👏
020 A half onesie is mayhem
021 I view someone not voting essentially as a vote for the “winner”. Ultimately if you didn’t vote, you don’t have the same legitimacy to complain as someone who did.
023 Wogman. Just…wow. Incredible.
024 I will not download Day One again. I will not download Day One again.
026 I’ve been really enjoying Omnivore for my read later stuff
027 Arc is definitely a “have you heard the good word” product for sure
027 I like my gum the standard format
029 Andrews ability to improvised over-the-top intros is amazing
029 Food pleasures: crisps, literally any crisps
030 bullying
031 Some birds have been known to mimic car alarm sounds
031 We need a Mastodon instance called Screacher
032 Sorry Jason the opening the crisps with scissors thing is weird

Fix for Low Volume Exported Audio in GarageBand

2023-07-10T08:28:42Z

Yesterday Mike pointed out that the pilot episode of my new podcast was quiet compared to other shows. I opened up the project files in GarageBand and couldn't see anything that would be causing this so I started hunting around in the settings. It turns out the "Export projects at full volume" was causing this. I don't know what this setting is supposed to do but I turned it off, exported the episode again, and it was fixed.

A Threads Thread Blog Post

2023-07-06T08:05:16Z

I wanted to expand a bit on my Threads thread so instead of adding to the thread, I've written a blog post about Threads. Clear? Good.

The Mastodon blog has a good post about Threads and what it means for the fediverse in general:

The fact that large platforms are adopting ActivityPub is not only validation of the movement towards decentralized social media, but a path forward for people locked into these platforms to switch to better providers

I have no intention of using Threads, signing up was purely an academic exercise. I'm not even going to link to my profile but if you happen to find me, I'll be posting random emojis when I remember the app exists.

Threads shows me a load of crap from people I don’t follow.

I said "as expected" in my Mastodon post but I'm not sure I'd actually thought about this. Of course they were going to dump random stuff into the timeline. And of course this will include ads/promoted posts in the future. I wonder if they intend to inject ads into a persons timeline when they support ActivityPub so even if you follow from Mastodon you see ads (until I immediately unfollow them). We shall see.

The app does that awful refresh like Instagram does when you open the app, start reading something, then it’s gone, never to be seen again. CTD said they have muscle memory to favourite posts on Instagram when it opens just in case this happens? That is wild that people feel the need to do that just because the app sucks. Now we have two apps that suck like that.

Speaking of ActivityPub, they say it's coming, it's mentioned in help docs but I agree with Andy:

it either won’t happen at all, or won’t happen for a long time

I made a basic ActivityPub server a few weeks ago and while it doesn't implement everything that ActivityPub has to offer, it's close enough. I'm surprised a company the size of Meta, who has a huge team of engineers couldn't get this working for launch. To be clear I'm not saying "herp derp I did it why can't they" but still, I find it surprising. If we don't see it within a month, I think we might never see it.

Assuming they do release AP support, I am excited for that. Being able to follow people who will never join Mastodon sounds great. I don't want to use Threads (much like Bluesky) just to follow a handful of people. Here's hoping they do release it and that they don't inject ads into a user's posts.

Custom Sidebar Icons in Finder

2023-06-29T16:28:34Z

MacOS customisation is basically dead. Plenty of apps that used to work, no longer do. You can still have custom folder icons which is nice but I wanted custom sidebar icons for those folders, like the developer one.

I started googling around trying to find something for recent versions of MacOS and the only thing I found was this Reddit post outlining a method to do it with PNGs. Between me and Keir we were able to make it work not only with any standard SF Symbol but custom made ones as well.

You'll need Xcode installed to do this but the instructions relatively simple. I will say it's really flaky when building, sometimes it works, sometimes it doesn't, sometimes it just shows a random icon instead. All of the instructions are on the GitHub repository including some dandy screencasts from Keir.

Building an ActivityPub Server

2023-06-28T05:48:41Z

To start with, I'm not convinced everything I've done here is exactly to the ActivityPub specification or if there will be problems interacting with Bugle on various ActivityPub servers outside the main ones (Mastodon, Calckey, etc). I'm also unclear on which parts of this are Mastodon-specific and which parts are pure ActivityPub. I will use Mastodon as the example external server throughout.

I won't go over setting up my database or server for this but at minimum you'll need a way to handle requests, render JSON, and a database to store posts and activities.

WebFinger and Profile JSON

This is the easiest part of the whole thing, two JSON files: .well-known/webfinger and @bugle.json.

.well-known/webfinger is how ActivityPub finds links to your profile. Searching for @bugle@bugle.lol on Mastodon, for example, will send a GET request to https://bugle.lol/.well-known/webfinger?resource=acct:bugle@bugle.lol which will return the following:

{

  "subject": "acct:bugle@bugle.lol",
  "links": [
    {
      "rel": "self",
      "type": "application/activity+json",
      "href": "https://bugle.lol/@bugle"
    }
  ]
}

The server handles checking if the requested resource exists and returning the correct data. The links part is how it knows the account lives at bugle.lol/@bugle. This might seems obvious but it isn't always the case that the username match the domain where the profile lives. For example, the profile for viticci@macstories.net is actually at mastodon.macstories.net/@viticci, which is indicated by the webfinger.

Once Mastodon has the link, it will make a request to that link (in this case https://bugle.lol/@bugle) for the profile json file which includes general profile information like name, avatar, and bio, as well as which endpoints it should send requests to. These are usually called an inbox although the actually name and path isn't important.

You can see a full example on my Mastodon profile but I'll go through the main important parts here. The first part is the @context, which as best I can tell it an indicator of the type of object(?) we're defining, in this case an activity stream.


{
	"@context": [
	    "https://www.w3.org/ns/activitystreams",
	    "https://w3id.org/security/v1",
	]
}

The next part is an ID to identify your user, a type to define that this is a Person, and endpoints for various features, some of which are Mastodon-specific (like featured and featuredTags).

{
	"id": "https://bugle.lol/@bugle",
	"type": "Person",
	"following": "https://bugle.lol/@bugle/following",
	"followers": "https://bugle.lol/@bugle/followers",
	"inbox": "https://bugle.lol/@bugle/inbox",
	"outbox": "https://bugle.lol/@bugle/outbox",
	"featured": "https://bugle.lol/@bugle/collections/featured",
	"featuredTags": "https://bugle.lol/@bugle/collections/tags",
	"endpoints": {
	    "sharedInbox": "https://bugle.lol/inbox"
	},
}

I'm not entirely sure when most of these are used aside from when first searching for a profile (because I see the requests in the logs) but the important ones here are inbox and endpoints.sharedInbox. This is where replies and mentions will get posted to (sharedInbox) and activities such as likes, follows, and boosts (inbox). I'll go into how that works further down.

We also need information about the profile itself like name, bio, profile picture, and so on. The icon attributes refer to your main profile image and image refers to a header image.

{
	"name": "bugle dot lol",
	"summary": "<p>A bio goes here</p>\n",
	"url": "https://bugle.lol/@bugle",
	"manuallyApprovesFollowers": false,
	"discoverable": true,
	"published": "2022-12-16T00:00:00Z",
	"icon": {
		"type": "Image",
		"mediaType": "image/jpeg",
		"url": "http://placekitten.com/200/300"
	},
	"image": {
		"type": "Image",
		"mediaType": "image/jpeg",
		"url": "http://placekitten.com/600/300"
	}
}

Finally we need a publicKey attribute. This is used to validate requests to and from the server:

"publicKey": {
		"id": "https://bugle.lol/@bugle#main-key",
		"owner": "https://bugle.lol/@bugle",
		"publicKeyPem": "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAyB9YyNt5OB23VW3sFm5o\nPnV4phqSXgqwyqmjXIE6ZtwLE0I6JEeeqv+SD2pd9QDXiUfugEWuUyNImZCglNg2\nV3Vh/NNr/YX6tWW6VSkudJ/b8lNQF8Rr/Z9wK9jD0WUmFs+YjS0R/KePDtLt1HOX\nVfjPLyOCODO+ykXQkydLI1RZf3V+iJdiTP9e5nhBxQGHkbyVja/86uqJIC96zyX4\nQPteEtHjXngVgO6QozCQu6Null4WFOHUdPGHaN7wsJtkZV10BPp3yCOiirJQlXSp\no+7YfJuROFv8QU+jWitTPTYWQYEuRwUfDUsdThqSh/u6eZt2hHjTzcI0/qgpxWqI\n1wIDAQAB\n-----END PUBLIC KEY-----\n"
	},

You can generate these in most languages. Here's how I did it in PHP on profile creation to store in the database:

$config = [
	"private_key_bits" => 2048,
	"private_key_type" => OPENSSL_KEYTYPE_RSA,
];

$keypair = openssl_pkey_new($config);
openssl_pkey_export($keypair, $private_key);

$public_key = openssl_pkey_get_details($keypair);
$public_key = $public_key["key"];

Receiving Activities

As mentioned above there are two endpoints for receiving activities: The global inbox (/inbox) and the user inbox (/@bugle/inbox).

Validating Requests

All signature validation is handled in my HttpSignature class if you'd prefer to look at the code directly.

Every request that comes in should be validated against the signature to make sure it's a valid request. The first step is to extract the values into an array keyed by the name (other languages and frameworks might have an easier way to do this).

$values = [];

// split the signature at ',' and assign each one
// to $values, keyed by its name
$parts = explode(',', $request->header('signature'));
foreach ($parts as $current) {
	$pair = explode('=', $current, 2);
	$key = $pair[0];
	$value = substr($pair[1], 1, -1);
	$values[$key] = $value;
}

// $values is now:
// [
//    'keyId' => 'https://mas.to/users/rknightuk#main-key',
//    'algorithm' => 'rsa-sha256',
//    'headers' => ''(request-target) host date digest content-type',
//    'signature' => 'BIGLONGSIGNATURE',
// ];

Next we need to get the headers value from the signature, and map over those, get the values from the request headers, and generate a string. This string is what we use to validate the request:

$inboxPath = '/@bugle/inbox';

$headerList = explode(' ', $values['headers']);
// $headersList = [
//	'(request-target)',
//	'host',
//	'date',
//	'digest',
//	'content-type',
// ]

$expectedHeaders = [];
  
foreach ($headerList as $h) {
	if ($h === "(request-target)") {
		$expectedHeaders[] = "(request-target): post " . $inboxPath;
	} else {
		$expectedHeaders[] = $h . ": " . $request->headers->get($h);
	}
}

$signatureHeader = $request->header('signature');
$signaturePairs = explode(',', $signatureHeader);
$signatureHeaderMap = [];

foreach ($signaturePairs as $pair) {
	$pairParts = explode('=', $pair);
	$key = trim($pairParts[0]);
	$value = trim($pairParts[1], '"');
	$signatureHeaderMap[$key] = $value;
}

$str = implode("\n", $expectedHeaders);

// $str:
// "(request-target): post /@bugle/inbox
// host: 9928-82-19-65-174.ngrok-free.app
// date: Tue, 27 Jun 2023 15:27:11 GMT
// digest: SHA-256=LdxwDtVsenhzJE0E3H2oj2C7cKPvZYEG5LrY0phH9Zc=
// content-type: application/activity+json"

One thing to note here is if you set different inbox URLs for user and for local, then you need to specific which path you're validating for (either /inbox or /@bugle/inbox) otherwise the signatures won't match.

Lastly, we need to fetch the public key for the actor, and use that to validate the request:

$keyId = $signatureHeaderMap['keyId'];
$actor = Http::accept('application/activity+json')->get($keyId);
$publicKeyPem = $actor['publicKey']['publicKeyPem'];
$verifier = openssl_get_publickey($publicKeyPem);
$validate = openssl_verify($str, base64_decode($signatureHeaderMap['signature']), $verifier, OPENSSL_ALGO_SHA256);

$isValid = $validate === 1;

If isValid is true, we can carry on and accept requests. You should do this for all requests that come into the inboxes.

Likes, Boosts, and Follows

The user inbox will POST requests for follows, likes, and boosts. Likes and boosts are easy enough to handle as you don't need to respond to the request or even store them if you don't want to. A like is the simplest of the two. It contains an ID of the like, the type of activity, the actor, and the object - this is the post that has been liked.

{
	"@context": "https://www.w3.org/ns/activitystreams",
	"id": "https://aninstance.social/users/robb#likes/10253875",
	"type": "Like",
	"actor": "https://aninstance.social/users/robb",
	"object": "https://bugle.lol/@bugle/f6dfebf6-1a73-4b3e-8afa-28a768698579",
}

Boosts are similar, but they also include to and cc arrays of users the post is being boosted to, as well as a published_at date.

{
	"@context": "https://www.w3.org/ns/activitystreams",
	"id": "https://aninstance.social/users/robb/statuses/110592144954280515/activity",
	"type": "Announce",
	"actor": "https://aninstance.social/users/robb",
	"published": "2023-06-23T06:36:51Z",
	"to": [
		"https://www.w3.org/ns/activitystreams#Public"
	],
	"cc": [
		"https://8d19-82-19-65-174.ngrok-free.app/@bugle",
		"https://aninstance.social/users/robb/followers",
	],
	"object": "https://8d19-82-19-65-174.ngrok-free.app/@bugle/f6dfebf6-1a73-4b3e-8afa-28a768698579",
}

Follow events are more complicated because they require a response. A follow activity will look something like this:

{
	"@context": "https://www.w3.org/ns/activitystreams",
	"id": "https://aninstance.social/9bb08aae-c666-432f-a3e6-35617e32830d",
	"type": "Follow",
	"actor": "https://aninstance.social/users/robb",
	"object": "https://bugle.lol/@bugle",
}

To respond to a follow, we need to send an Accept activity with a valid signature. To start with we need to build our activity message; it has an ID, type, actor (the user being followed) and an object which in this case, is the Follow activity we received.

// this isn't important unless you intend to store all
// follow requests that come into the system but a unique(ish)
// ID is required here
$guid = bin2hex(random_bytes(16));

$message = [
	'@context' => 'https://www.w3.org/ns/activitystreams',
	'id' => 'https://bugle.lol' . '/' . $guid,
	'type' => 'Accept',
	'actor' => 'https://bugle.lol/@bugle',
	'object' => [
		'@context' => 'https://www.w3.org/ns/activitystreams',
		'id' => 'https://aninstance.social/9bb08aae-c666-432f-a3e6-35617e32830d',
		'type' => 'Follow',
		'actor' => 'https://aninstance.social/users/robb',
		'object' => 'https://bugle.lol/@bugle',
	],
];

To generate the signature we need the message we just created, the private key of the profile from the database, the host of the actor (in this case aninstance.social), the inbox path (/@bugle/inbox), and the url to the profile.

$host = 'aninstance.social';
$path = '/@bugle/inbox';
$privateKey = 'a_private_key';
$keyId = 'https://bugle.lol/@bugle';

$hash = hash('sha256', json_encode($message), true);
$digest = base64_encode($hash);

$date = date('D, d M Y H:i:s \G\M\T');
$signer = openssl_get_privatekey($privateKey);
$stringToSign = "(request-target): post $path\nhost: $host\ndate: $date\ndigest: SHA-256=$digest";
openssl_sign($stringToSign, $signature, $signer, OPENSSL_ALGO_SHA256);
$signature_b64 = base64_encode($signature);

$header = 'keyId="' . $keyId . '",algorithm="rsa-sha256",headers="(request-target) host date digest",signature="' . $signature_b64 . '"';

$headers = [
    'Host' => $host,
    'Date' => $date,
    'Signature' => $header,
    'Digest' => 'SHA-256=' . $digest,
    'Content-Type' => 'application/activity+json',
    'Accept' => 'application/activity+json',
];

Finally, we send the Accept activity:

$inbox = 'https://aninstance.social/users/robb/inbox';

return Http::withHeaders($headers)
	->withBody(json_encode($message), 'application/json')
	->post($inbox);

We'll need this same header signature generation later for notifying followers of new posts.

If someone unfollows you, you'll receive an Undo request. Check the actor on that request and you can then remove them from your followers table.

Replies

The global inbox will receive a POST request with data about replies and @mentions with data that looks something like this:

{
	"id": "https://mas.to/users/rknightuk/statuses/110617068531392295/activity",
	"type": "Create",
	"actor": "https://mas.to/users/rknightuk",
	"published": "2023-06-27T16:15:15Z",
	"to": [
	   "https://www.w3.org/ns/activitystreams#Public",
	],
	"cc": [
	    "https://mas.to/users/rknightuk/followers",
	    "https://bugle.lol/@robb",
	],
	"object": {
	    "id": "https://mas.to/users/rknightuk/statuses/110617068531392295",
	    "type": "Note",
	    "inReplyTo": null,
	    "published": "2023-06-27T16:15:15Z",
	    "url": "https://mas.to/@rknightuk/110617068531392295",
	    "attributedTo": "https://mas.to/users/rknightuk",
	    "to": [
	        "0": "https://www.w3.org/ns/activitystreams#Public",
	    ],
	    "cc": [
	        "https://mas.to/users/rknightuk/followers",
	        "https://bugle.lol/@robb",
	    ],
	    "content": "<p><span class=\"h-card\"><a href=\"https://bugle.lol/@robb\" class=\"u-url mention\">@<span>robb</span></a></span> hello!</p>",
	}
}

If you only have one profile setup then you're golden: just save the object.content and the object.id somewhere and you have your reply. If you have a server with multiple profiles, you can map over the object.cc array to find matching profiles for your domain.

As a bonus here, unrelated to ActivityPub, I setup https://ntfy.sh/ to send me notifications whenever I get a reply:

$ntfyKey = config('bugle.ntfy_key');

Http::withHeaders([
	'Content-Type' => 'text/plain',
	'Title' => 'New mention from @' . $activity->getActorUsername(),
	'click' => Arr::get($input, 'object.url'),
])
->post('https://ntfy.sh/' . $ntfyKey, strip_tags($activity->content));

Formatting Posts

The post's content needs to be rendered to HTML. Bugle supports writing in Markdown so I use league/commonmark to format the content for sending to followers. I also extract @mentions to generate links in the posts and add them to tags on the post JSON. See TootFormatter for the full implementation.

A post that looks like this:

This toot has [a link](https://example.com) and a mention: @robb@social.lol ahoy!

Is run through the formatter:

$content = 'This toot has [a link](https://example.com) and a mention: @robb@social.lol ahoy!';

$converter = new CommonMarkConverter([
	'html_input' => 'strip',
	'allow_unsafe_links' => false,
]);

$content = $converter->convert($content)->getContent();

$content = nl2br($content);
$content = str_replace("\n", '', $content);

$tags = [];

$pattern = '/@?\b([A-Z0-9._%+-]+)@([A-Z0-9.-]+\.[A-Z]{2,})\b/mi';
preg_match_all($pattern, $content, $matches);
[$fullUsernames, $usernames, $domains] = $matches;

foreach ($fullUsernames as $i => $fu) {
	$tags[] = [
		'type' => 'Mention',
		'href' => 'https://' . $domains[$i] . '/@' . $usernames[$i],
		'name' => $fu,
	];

	$content = str_replace(
		$fu,
		sprintf(
			'<span class="h-card"><a href="https://%s/@%s" class="u-url mention">@<span>%s</span></a></span>',
			$domains[$i],
			$usernames[$i],
			$usernames[$i]
		),
		$content,
	);
}

$content = preg_replace('/(<br \/>)+$/', '', $content);

return [
	$content, $tags
];

Becomes:

<p>This toot has <a href="https://example.com">a link</a> and a mention: <span class="h-card"><a href="https://social.lol/@robb" class="u-url mention">@<span>robb</span></a></span> ahoy!</p>",

And the tags, which we'll use later to determine who to notify of a mention, look like this:

[
	{
		"type": "Mention",
		"href": "https://social.lol/@robb",
		"name": "@robb@social.lol"
	}
]

Notifying Followers about New Posts

Unlike RSS where new posts can be fetched into a feed ActivityPub requires all followers are notified of new posts by the originating server. Here's an example payload to notify followers of a new post.

{
	"@context": "https://www.w3.org/ns/activitystreams",
	"id": "https://bugle.lol/@bugle/7c01aab9-bc96-4773-b235-703a6d2a1f76",
	"type": "Create",
	"actor": "https://bugle.lol/@bugle",
	"to": [
		"https://www.w3.org/ns/activitystreams#Public"
	],
	"cc": [
		"https://bugle.lol/@bugle/followers",
		"https://example.com/users/robb"
	],
	"object": {
		"id": "https://bugle.lol/@bugle/7c01aab9-bc96-4773-b235-703a6d2a1f76",
		"type": "Note",
		"inReplyTo": null,
		"published": "2023-06-27T20:42:43Z",
		"updated": "2023-06-27T21:30:10Z",
		"attributedTo": "https://bugle.lol/@bugle",
		"content": "<p>Toot toot!</p>",
		"to": [
		  "https://www.w3.org/ns/activitystreams#Public"
		],
		"cc": [
		  "https://bugle.lol/@bugle/followers",
		  "https://example.com/users/robb"
		],
		"senstive": true,
		"summary": null,
		"attachment": [
			{
				"type": "Document",
				"mediaType": "image/jpeg",
				"url": "http://placekitten.com/200/300",
				"name": "A kitten",
				"blurhash": "L46[2Hofofof00j[offQ~qofofof",
				"width": 200,
				"height": 300,
			}
		],
		"tag": [
			{
				"type": "Mention",
				"href": "https://mas.to/@rknightuk",
				"name": "@rknightuk@mas.to"
			}
		]
	}
}

The type attribute has three possible values that I'm using:

Create - to notify of a new post
Delete - to delete an existing post
Update - to update an existing post after an edit. Mastodon (and I assume others) require the updated timestamp for a Update activity

The cc field is how visibility is controlled on Mastodon (I think) but I haven't looked into it enough so Bugle only has the ability to send public posts.

To notify followers of a new post, send a POST request to the global of the followers instance. For the sake of simplicity I'm taking the users domain and appending /inbox to it. This won't work in a few edge-cases (like the MacStories example above) so I need to update Bugle to fetch the users endpoints using webfinger either when they follow an account, or each time I need to send to them.

If we assume I have one follower (@robb@example.com) and I make a post that mentioned another account (@dave@example.com) I need to make two requests to notify them both. A follower notification goes to the user inbox:

$follower = 'https://example.com/@robb';
$inbox = 'https://example.com/@robb/inbox';

$headers = ''; // generate header signture as we did above for `Accept`  
$response = Http::withHeaders($headers)
	->withBody(json_encode($message), 'application/json')
	->post($inbox);

And an @mention goes to the global inbox. For mentions, you need to include the tag array in the post data (see above).

$mention = 'https://example.com/@dave';
$inbox = 'https://example.com/inbox';

$headers = ''; // generate header signture as we did above for `Accept`  
$response = Http::withHeaders($headers)
	->withBody(json_encode($message), 'application/json')
	->post($inbox);

Replying to a post

If you look at the post data above you may have noticed a null value of inReplyTo. This is the part that needs to be filled in to reply to a specific post. Say I was replying to this excellent post by a handsome internet person I need to include the URL as the value for inReplyTo like so:

"inReplyTo": 'https://social.lol/@robb/109863669770547458',

Any posts with that set will show up as replies to the original post.

A note on attachments

nb: I've only tested images because it's unlikely I'll need video any time soon.

Attachments are included as an array in the post JSON with their mime type, url, alt text, width/height, and something I hadn't heard of before: a blurhash.


{
	"type": "Document",
	"mediaType": "imag/jpeg",
	"url": "http://placekitten.com/200/300",
	"name": "A kitten",
	"blurhash": "L46[2Hofofof00j[offQ~qofofof",
	"width": 200,
	"height": 300,
}

A blurhash is "a compact representation of a placeholder for an image.". So when you see blurry images loading on Mastodon, these are blurhashes. To make one you need a library for your chosen language which in my case was PHP and I used bepsvpt/blurhash:

$hash = $this->blurhash->encode($attachment);

// L46[2Hofofof00j[offQ~qofofof

And there you go. Everything I (think) I understand about ActivityPub. All of the code for Bugle is on GitHub for your perusal.

Links and Resources

Thanks to Lewis for his help with verify requests. Articles and implementations I found helpful to work out how all this works:

Articles

Implementations

The Biology of the Hey Bear Fruits Makes No Sense

2023-06-22T17:44:51Z

Hey Bear is a YouTube channel with videos of dancing fruits, vegetables, and other nonsense designed to ~~make kids stfu~~ entertain young children. It works. Baby Knight loves it.

Last night my partner asked if I was okay because I looked distant and downtrodden. I wasn't sad or tired, I was pondering the biology of the fruits that dance in these videos.

The pineapple, Baby Knight's favourite, is a classic fruit-with-a-face; eyes and a mouth on the outside rind of the pineapple. Same with the strawberry, blueberry, and a bunch of others. Pretty standard fare for a children's cartoon, they seem to love it. Beyond those it gets a bit weird.

A single orange, in the Hey Bear cinematic universe, is actually two creatures. The face is on the fleshy inside of each half but how did they get like that? Does a bigger fruit, or a human perhaps, have to cut them in half so they can see and talk and do whatever a living orange half does? What happens if said cutter slices off-centre, does one of them die while the other stays alive but has a part of their sibling's face on theirs, forever haunted by the memory.

The banana's face is inside the peel, able to see only when it's pulled back. Is there a ceremony for this with family and friends gathered round as the local face-revealer performs the act? Perhaps cards are sent to the parents, adorned with "congrats on your baby's face" and "Let's face it, today is a good day" on the front. They don't seem to have the ability to hear or make sound so the face is probably pretty important. Maybe the movie Face-Off is unsettling in their world, or that sewed-up-mouth scene from the Matrix.

And finally the millennial favourite, the avocado. The one we see on screen has the stone in tact but we never other half, the sibling. Is the stoneless sibling an outcast in Hey Bear world or are they lauded for surviving without a fairly important part of an avocado? We might never know.

Asset Lifespan Spreadsheet

2023-06-02T16:22:40Z

In episode 20 of Hemispheric Views Andrew talks about his asset lifespan spreadsheet which shows the cost of an item, the date purchased, and the cost per week for said item.

I figured I'd have a crack at making my own and after some wrangling with formula in Numbers I was able to get something up and running. The key part was using the DATEDIF function to get how many days it has been since purchase:

=(cost_of_item / DATEDIF(date_purchased, todays_date, diff_type))

=(B3 / DATEDIF(B2, TODAY, "D") / 7) // for cost per week
=(B3 / DATEDIF(B2, TODAY, "M")) // for cost per month

Which gives me an output like this:

A	B	C	D	E
Product	Purchase Date	Cost	Cost Per Week	Cost Per Month
ATH-M50X	2015-12-13	£85.60	£0.22	£0.96

I don't know what I'm going to do with this information beyond obsess over it but I do know I'm getting my money's worth with those Audio-Technica headphones.

Brian Butterfield Diet Soundboard

2023-05-22T14:27:43Z

Over the weekend I spent some time splitting the audio from the Brian Butterfield Diet sketch and then subsequently the Christmas version. Both of these sketches are from The Peter Serafinowicz Show from 2007.

I split the audio using Sound Studio which has a handy "split by markers" feature then used Eleventy data files to output those files including some titles from a JSON files of all the audio. As much as I'd like to sit and sketch some terrible icons for each food item I went with Font Awesome to save some time.

See the Brian Butterfield Diet Soundboard.

One Year of Pizza Making

2023-05-03T12:24:32Z

In November 2021 I bought an Ooni Frya 12 (thanks Black Friday discounts!) and since then I've used it somewhere between 10 and 15 times. Each time I've managed to make something about the pizza better; the sauce, the dough, the topping ratio. Herein lies my notes about making better pizzas.

For all my pizzas, I've used the Ooni classic dough recipe and I'm always aiming for a (sort of) Neapolitan style pizza.

Equipment

When I bought the oven I also picked up two peels: a wooden one and a metal one. I tend to only use the metal one so the wooden one has just become a standard chopping board. Ooni's accessories are far more expensive than other brands so I picked up a much cheaper dough scraper on Amazon and I plan to get a turning peel at some point but I won't be paying Ooni's price.

Dough

My first batch was reasonably tasty but completely misshapen and definitely not thin enough. I figured using a rolling pin would be fine for rolling out the dough but that doesn't really get it thin enough and also removes a lot of the gas that makes a nice fluffy but crunchy crust. Rolling also made the dough stick to the peel and was really difficult to slide it off into the oven, even with a lot of flour underneath.

This video from Ooni helped a lot with working out the stretching technique. I'd also recommend any of Brian Lagerstrom's pizza videos to see how he strengthens the dough before proofing.

I used bread flour I had lying around for the first attempt which I've since found out is not ideal. 00 flour, which is a much finer flour, is far better. I switched to Sainsbury's 00 flour and then recently to Caputo Pizzeria 00. Each time the dough has gotten tastier and much easier to stretch and shape. One other change I've made is better yeast. I previously used Tesco dried yeast but I found this wasn't raising the dough as much as I liked, so I switched to Caputo yeast which has much better results.

I mix everything by hand (if someone wants to buy me a stand mixer I won't say no) in a metal mixing bowl, and use that for the first 2 hour proofing, then transfer the individual balls of dough into these pots, with a bit of oil to stop them from sticking, and leave them to proof for another 2 hours. If I'm making more than I need I freeze after the first proof and get them out 12-24 hours before I need them and defrost in the fridge.

Sauce

I want my sauce to be as easy as possible to make and after some messing around with different recipes, this is what I've come up with for a tasty but easy-to-make sauce:

400g chopped tomatoes or passata
100g tomato puree
5g garlic powder
5g salt
5g pepper
5g chilli flakes (optional)

This is usually enough for 6-10 pizzas.

Toppings

My partner is a bit fussier than I am so we've mostly stuck to chicken and ham for toppings but if I have friends round I'll grab some pepperoni or similar from the supermarket. We've used cheap ham if we have it in the fridge and even that tastes great when combined with the sauce and cheese.

Speaking of cheese, because of availability we've mostly used cheddar which has been fine. Recently I picked up some aged mozzarella and used a 50/50 mix of that and cheddar and it tastes fantastic. Galbani Cucina Mozzarella is the only aged mozzarella I've been able to find that is available in UK supermarkets.

Finally some other ingredients I've been enjoying:

JDs Hot Honey which I pop on right as the pizza comes out the over adds a nice bit of sweet flavour.
Candied Jalapenos. I've been using these ones from Haynes but I have some fresh jalapenos on the way to attempt to make my own.
A liberal sprinkle of parmesan (or whatever hard italian cheese I can get my hands on).

The Knightpool

2023-03-09T10:02:00Z

From me, yesterday:

We setup a baby name pool at work, £1 a guess. We have 50 names, £51 in the pot. Someone has guessed the name so no money for me.

Some additional rules we discussed:

If the correct answer is guessed by more than one person, the pot is split
Spelling is not important. So "Emelia" and "Amelia" are the same name for the purposes of the Knightpool

I'm calling this the Knightpool because I can and definitely not stealing the idea from Marvel. Here are the 50 names that have been guessed:

Abby
Alice
Amy
Ava
Ayla
Beth
Blair
Chantell
Chloe
Claire
Cleo
Daisy
Ella
Ellie
Elsie
Emilia
Emma
Eve
Evie
Faye
Flick
Freya
Gemma
Grace
Hannah
Jane
Jess
Jill
Jo (note: Two people guessed this name)
Joy
Kate
Kayleigh
Laura
Leah
Lilly
Liz
Lucy
Maisie
Mia
Millie
Nora
Olivia
Paige
Phoebe
Quinn
Rose
Sarah
Sophie
Tess
Zoe

Food Graveyard

2023-02-24T22:54:57Z

Discontinued food items I miss.

No More Ratings

2023-02-14T09:52:15Z

When I used to use Plot (RIP) to track movies that had a thumbs up or down system. When I switched to my own CMS for this I did the same thing. Then when I switched to Letterboxd I translated what was essentially a 1-3 rating system to the five-star system (even though it's actually out of ten not five) Letterboxd uses. From my Letterboxd profile:

★☆☆☆☆ : Never again

★★★☆☆ : Fine

★★★★★ : Good movie, would watch again

The problem with this system is I mostly don't watch bad movies. Or a better way to put it is I kinda like bad movies. Despite knowing intellectually that Shawshank Redemption is a "better" movie than Olympus Has Fallen they're both rated 5 stars in my system. I could change my system to use the full spectrum of the five stars but I just don't have the energy or the inclination to do it. How do I decide what gets 4.5 stars and what gets a 5? Is there really a discernible difference between those two ratings? Also, who gives a shit what number I've ordained upon a movie?

So fuck it. No more ratings.

Add to MusicThread Shortcut

2023-02-06T18:04:43Z

MusicThread is "a website to create and share lists of music" by Ed Wellbrook. I recently started using it to save new tracks I've found and new albums, which are then cross-posted to my Mastodon account with Echo.

The iOS app, currently in beta, has a share sheet extension for adding to a thread, but for MacOS I needed to make something in Shortcuts. The shortcut I've made (after a lot of ranting about how bad shortcuts is) can either ask for a music link to add, or be used directly from Apple Music under the share menu. It then asks which thread to add the link to.

Download Add to MusicThread Shortcut

Notes on Migrating a Wordpress Site to Eleventy

2023-01-31T22:13:16Z

I recently helped my friend Tim move his site from a Wordpress install to a much simpler Eleventy setup. The biggest hurdle was transforming the Wordpress exported data into Markdown files. Thankfully wordpress-export-to-markdown exists. This is a command line tool that takes a wordpress export, puts all the posts in markdown files, and downloads all the images contained in the posts.

I did make an adjustment to this script so I could add a permalink attribute to each post by editing the parser.js file:

frontmatter: {
    title: getPostTitle(post),
+   permalink: `${getPostSlug(post)}/index.html`,
    date: getPostDate(post),
    categories: getCategories(post),
    tags: getTags(post)
}

The image download will take a while but once it was done I had all the posts and all the images ready to pop into an Eleventy site.

To match Tim's existing site it needed support for markdown footnotes and image captions. As a side note here, footnotes do not export well from Wordpress via the CLI tool so I had to manually fix all of them which was not fun. Al Power had an article for both of these features which was handy. To add footnote support I followed the steps in this article which outlines how to include markdown-it-footnote for the markdown parsing and this article to add image captions.

All in all it went fairly smoothly - without wordpress-export-to-markdown I would have had to write my own parsing script which I'm very glad I didn't have to do.

Additional Webmention Resources

2023-01-31T00:00:00Z

Some more links and tools I've found or had saved about webmentions. Read my post on adding webmentions here.

@remy/webmention

Sadly the webapp side of this is down at the moment but the command line tool for sending webmentions is completely standalone.

You can pass the script a url or an RSS feed and it will scan it to find links, confirm those sites accept web mentions, and send those mentions. I ran it once on my whole feed to send any mentions and then added it to my build steps to run it on the latest post:

npx webmention /path/to/feed.xml --limit 1 --send

eleventy-plugin-webmentions

An eleventy plugin to fetch webmentions and helper methods to display them

Why didn't I look for a plugin when I was doing webmentions? No idea. This is going on my list to review and see if I can streamline my code a bit.

Links

Some other articles I had saved related to this:

Adding Webmentions to Your Site

2023-01-30T00:00:00Z

Right off the bat, I read the following two articles to get a sense of how to do this so I won't go over too much of the same content but rather add some thoughts of my own about the process. I would highly recommend reading both of these.

Also, I feel like I muddled through this to get it to work. JSON and API requests I can understand. The how of webmentions I'm still a bit confused on but we will proceed nonetheless.

What are webmentions?

Webmentions are:

a simple way to notify any URL when you link to it from your site

Sounds simple enough. It's a link (or a comment, or reply, or like) to an article on my site. What I do know of webmentions from sites like Sophie's and Zach's is that somehow I can have likes, boosts, and replies from Mastodon show up on my blog posts.

How though?

This bit has confused me for months (I had a note about this dated November last year). Admittedly I didn't look too far into it but pretty much every article about webmentions will link to two sites: webmention.io and Bridgy.

Webmention dot io and IndieLogin

Webmention.io is:

a hosted service created to easily receive webmentions on any web page

Webmention.io collects your webmentions and exposes an API to be able to fetch these mentions but to start off you need to login which was my first hurdle: We couldn't find any way to authenticate you using your website.. Webmention.io uses IndieLogin to log you in and apparently I hadn't added rel="me" to any of my social links. So I added a Github link, deployed it, and was then able to login. Success.

<a style="display: none;" href="https://github.com/rknightuk" rel="me">github.com/rknightuk</a>

Once I logged in I was presented with tags to add to my site to accept webmentions so I promptly added those:

<link rel="webmention" href="https://webmention.io/rknight.me/webmention" />
<link rel="pingback" href="https://webmention.io/rknight.me/xmlrpc" />

At this point, this system will work for "proper" webmentions (although not added to my site yet) but what about conversations on Mastodon? That's where Bridgy comes in.

Bridgy

Bridgy "connects your web site to social media" according to the home page but moreso it converts conversations on social media to webmentions to send back to webmention.io.

I went ahead and signed in with my Mastodon account. After a few minutes Bridgy started showing responses to some recent Mastodon posts that had links to my blog posts. I then went back to webmention.io and there they all were. I'm not sure of the limitations of the initial scan but it only showed the last few posts I had done so I manually went and grabbed some Mastodon posts linking to my blog and put them in the "Resend for post" input box to grab some earlier responses.

Showing Webmentions on my Site

I'm using Eleventy data files extensively to power my now page so I knew this would be trivial to pull into my site. Because I already have my "api" I decided to fetch it there instead and then pull it into my site. For the sake of simplicity assume you don't like making your life difficult and all this would exist in Eleventy (or your site of choice).

Fetching Mentions

Webmention.io has an API to fetch mentions. There are a few different endpoints but I wasn't able to work out what all the differences were so I went with the mention.jf2 with no other options. Source on GitHub.

// this API also accepts `since_id` to only get new mentions
const response = await fetch(`https://webmention.io/api/mentions.jf2?token=${webmentionskey}&per-page=1000`);

const body = await response.json();
const newMentions = body.children

I've set this up to run every hour on a cron, merge new data with the existing data, and then write the data to a JSON file. Webmention.io does have an option for sending a webhook when a new mention comes in (under "settings") but that might be a lot of rebuilding if a post gets popular so I'm sticking with this method for now. Then in Eleventy, I fetch this data in src/_data/webmentions.js.

To get this to render on my post pages, I lifted most of Max's solution with a few changes like grouping the different types of responses together. As an aside, I still don't know what a mention-of webmention looks like or how one happens.

Update 07/07/2023

I finally got some data to see what mention-of gives. I decided against showing these though because at least half of them didn't exist after only ~6 months.

{
    "type": "entry",
    "author": {
    "type": "card",
    "name": "",
    "photo": "",
    "url": ""
    },
    "url": "https://blog.luiscarlospando.com/coding/2023/02/hay-nuevo-sistema-de-comentarios-en-mi-blog-2/",
    "published": null,
    "wm-received": "2023-07-07T00:18:46Z",
    "wm-id": 1693400,
    "wm-source": "https://blog.luiscarlospando.com/coding/2023/02/hay-nuevo-sistema-de-comentarios-en-mi-blog-2/",
    "wm-target": "https://rknight.me/adding-webmentions-to-your-site/",
    "mention-of": "https://rknight.me/adding-webmentions-to-your-site/",
    "wm-property": "mention-of",
    "wm-private": false
}

// .eleventy.js
eleventyConfig.addFilter('webmentionsByUrl', function(webmentions, url) {
    const allowedTypes = ['in-reply-to', 'like-of', 'repost-of']

    const data = {
        'like-of': [],
        'repost-of': [],
        'in-reply-to': [],
    }

    const hasRequiredFields = entry => {
        const { author, published, content } = entry
        return author.name && published && content
    }

    const filtered = webmentions
        .filter(entry => entry['wm-target'] === `https://rknight.me${url}`)
        .filter(entry => allowedTypes.includes(entry['wm-property']))

    filtered.forEach(m => {
        if (data[m['wm-property']])
        {
            const isReply = m['wm-property'] === 'in-reply-to'
            const isValidReply = isReply && hasRequiredFields(m)
            if (isReply)
            {
                if (isValidReply)
                {
                    m.sanitized = sanitizeHTML(m.content.html)
                    data[m['wm-property']].unshift(m)
                }

                return
            }

            data[m['wm-property']].unshift(m)
        }
    })

    return data
})

// _templates/post.njk
{%- set webmentionUrl -%}{{ page.url | stripIndex }}{%- endset -%}
{% include 'webmentions.njk' %}

// webmentions.njk
// Then the same again as this for `repost-of` and `in-reply-to`
{% if mentions['like-of']|length %}
    <h4>Likes</h4>
    <div class="webmentions--likeboost">
        {%- for like in mentions['like-of'] %}
            <a target="_blank" rel="noopener" href="{{like.author.url}}"><img src="{{like.author.photo}}" title="{{like.author.name}}"></a>
        {% endfor%}
    </div>
{% endif %}

A little bit of CSS later and we have lift off:

You might even see some webmentions below this post if I'm lucky.

Twitter Backup and Archiving Options

2023-01-29T00:00:00Z

If you want to make your Twitter archive a bit more useful than the standard backup Twitter give you, there are 3 options of varying complexity I'm aware of.

Option 0: Don't do anything

This is by far the easiest option. Don't care about your tweets. Let them wither away into the ether. Be free from the shackles of hoarding your data.

Option 1: Tiny Subversions

Darius Kazemi of Tiny Subversions made this tool to make a self hosted, searchable archive. It's as simple as uploading the .zip file of your archive, give it a minute, and the new archive will be downloaded.

Option 2: TwitVault

TwitVault/ is a desktop App for Mac, Windows, and Linux that has the biggest feature set. Download it, login with your Twitter credentials, and let it do it's thing. This initial setup will pull everything is can from the Twitter API but that has limits: 3200 tweets and 800 mentions. Once that part of the setup is done (this can take a while), you can then pull in your full archive in the terminal.

Option 3: Tweetback

Tweetback is a tool built with Eleventy and is my current choice for making my archive available. You can see mine at hellsite.rknight.me. The steps to get this working are more involved than the previous options but I'm a big fan of the output. I won't go through the steps here but the readme has detailed instructions.

One other related part of Tweetback is tweetback-canonical. If you add your archive and username to the repository, anyone who uses Tweetback and has tweets that mention you, those tweets will link back to your archive rather than Twitter's website itself. For example, this tweet where I mention Zach links to his archive.

Letters with Jason Becker

2023-01-28T00:00:00Z

Letters is a ongoing project by Jason Becker that I was involved in for this month. The what:

Letters will involve me corresponding with someone else on the internet over the course of a month. Each week, we will each write a letter to each other. There are no set topics.

The why:

I was thinking about how much of our history (in the West at least) comes from important figures having extensive private correspondences that were saved, catalogued, and released after their deaths. And while I’d love some private pen pals, it just got me thinking that public letters are a rich way to discuss complex issues.

Jason posted that in November and I thought it sounded like an interesting thing to be involved in. While I don't think we hit the heights of "historical figures discussing complex issues", we did have conversations about taking stock, finding time for personal projects and hobbies, and of course my Topic of the Year™ 2022: DIY. Below are the four emails from me with Jason's responses (and links to the posts on Jason's site).

Jason is doing this for the rest of the year which I'm looking forward to.

Week 1: 2023-01-01

Hi Jason,

We have only interacted briefly on Micro.blog so I figured I should start by introducing myself. I’m a 30-something developer working on software for the property industry. I live with my partner, Jess, and two cats in Portsmouth on the south coast of the UK.

We have spent the past 12 months decorating and redoing every room in our house - the previous owners lived here since it was built in 1971 and hadn’t done any work to it since then. This involved me learning a whole set of new skills like floor laying, wallpapering, and fitting new skirting boards (baseboards for Americans).

In July we found out my partner was pregnant with a girl and she is due in March 2023. This accelerated the timeline of getting the house finished but we are now ready for her arrival at least in terms of furniture and the nursery. Mentally ready? I’m not so sure.

Look forward to hearing from you, Robb

Hi Robb,

First of all, congratulations on pending fatherhood! I’m glad we were able to slip in our month of correspondance before the pending sleep depravation.

What an exciting and busy year. Even though we moved into our home 5 years ago (and it was new construction), I still feel like we need to keep decorating and redoing. Our work has been less skills-based and more “accumulating more stuff than I am comfortable owning”-based, since our new(ish) home is much larger than the 700 square feet we lived in previously. I have always found that I have ambitious of being handy in theory, but mostly fail when it comes to applying that ambition. At this stage, my partner Elsa just pays people to do things before telling me they’ve gone wrong or haven’t happened.

I am curious, what room or project are you most proud of? I’m not quite “done”, but pretty close to having my office set up how I’d like. It was a big pandemic project since we got rid of the company office right away. Having my own space has changed my whole relationship with my home.

I took a peek at the work you do and it’s fascinating. I have actually discussed this area (home management, focused on home inspections in the US followed by “asset management” and warranty support nad the like) with my work partner multiple times as an idea to pursue{^tech]. The intersection of home-renovation and your work must have been an interesting exercise. I’d be curious what you’ve learned managing your house that suprised you or changed your perspective on the work you do day to day.

Thanks for your participation in Letters. I’m already enjoying this project, and I hope others will as well.

Jason

Week 2: 2023-01-10

Good Morning Jason,

what room or project are you most proud of?

The office was my top priority (my partner had different ideas) as I spend 3-4 days a week working in there and I’m very proud of how that turned out. I built the desktop and matching shelves myself from scaffold boards because finding something in the exact size I wanted turned out to be fairly difficult. This was a project that took a few weekends of lots of sanding, glueing, and staining but the final results is something I’m very proud of. Here’s an in-progress shot and the final result in situ. I also did the faux wood-panelling in our bedroom which we’re both very pleased with.

The work I do is primarily focused on property reports for tenants (inventories, fire risk assessments, etc) so there isn’t much crossover with renovating the house but I what I did learn is that planning is key. We wish we had spent a few weeks planning what we wanted to achieve before jumping into the renovation. There were definitely things that made our life a bit more difficult because we did some work when we should have waited for another job to be finished first.

That sounds like an interesting job but it must be difficult to work with organisations like schools that can be slow and unwieldy to get new tech implemented. How long have you been doing that?

I saw you posted yesterday about being ill, hope you’re feeling a bit better today?

Speak soon,
Robb

Hi Robb,

Luckily, I am feeling better. Note to self, when you order a steak medium and it comes out just barely rare just send the damn thing back. The day of suffering that followed was not worth it.

I've done some more work in my office since this last photo, but this is a not-terribly-inaccurate representation of where things are. I also use the IKEA pegboard. I did not quite get as fancy on the desk itself-- which is an IKEA Karlby 98" top that I had a friend cut to 80" and then added some really cool metal legs from an Etsy shop. When the pandemic hit we went 100% remote, which meant tha this room got transformed into an office. I probably have 6-10 scattered blog posts about the process that landed on the setup linked above-- most of the changes by now are additional plants and things hung on the wall (plus some equipment changes).

I think it's pretty natural for the office to be the place you're most proud of-- it's one you get to call your own and the spot you're probably stuck spending the most time in.

We've been thinking about doing a similar paneling look either behind our bed or possibly behind our TV. Maybe that'll be a project for when we return home. It's hard to have a big wall behind a TV-- it looks bare without anything, but most things we could put there would be distracting.

https://json.blog/uploads/2023/938df46b2f.jpg

I've been working at my current company nearly 9 years. Before that, I worked at a university research center working with school districts on early warning systems, and before that, I worked for the state department of education. I think what's most challenging is that everyone is well-established. There aren't new school districts popping up building their systems and processes from scratch. The people, organizations, culture, and work processes are all fairly fixed. So we have to do things much more completely and better than most companies to even get in the door. Then we have to get a large set of folks on board so that we can deliver on our promise. We're a small team and we're supporting billions of dollars of budgeting and monitoring. There's a lot of technical/systems and cultural debt that we have to work with to succeed.

That said, the opportunity for improvement is huge, and it's very satisfying when someone gets it and we can make their work so much easier and more effective.

Looking forward to next week
Jason

Week 3: 2023-01-19

Hi Jason,

A late reply this week - I completely forgot about this until very late last night.

Your TV setup looks very similar to ours but we're lucky enough to have two wall lights behind it so the wall looks much less bare but you're right it's hard to put anything to garish there otherwise it's distracting.

With 10 weeks to go, I've been thinking a lot about technology and how that will affect my duaghter. This post in particular made me think about how much I'm going to share about her online once she's here. I don't think there's any right answer but it has occupied my mind the past few days. Come to think of it, the impending birth is basically the only thing I can think about at the moment. I'm sure that we'll be fine but I can't help but worry that we won't have enough clothes or nappies, or something I haven't even thought of will go wrong.

As for non-baby things, I've been having fun messing around with the omg.lol API building a CLI to interact with the service and I'm working on add a /now page to my website (as well as the new omg.lol now pages). How has your week been this week?

Speak soon,
Robb

Hi Robb,

Easily excusing the "late" reply (rules are once per week, doesn't have to be right at the start), with a later reply of my own. This week has been incredibly busy at work as the post-holiday break, post-three day weekend, we're really back at it and in it, started to kick in. It's been long but rewarding-- one of those weeks where you're exhausted, but I'm doing the kind of work I do well bringing the energy and attention I need to.

In particular, I've recently reorganized our team so that I have slightly smaller set of direct reports that are more "coherent" structurally-- I am managing directly one person who leads each function below me. It's too early to say if this is working better for the whole team, but this week made me feel confident that it works better for me, which is really important for avoiding burn out.

On the TV side, wall lights were another thing we considered-- a sconce on each side just to give it something. It just feels strange to have so much blank space above the TV as well. I need someone to, I don't know, share a Pinterest board or something with me so I can figure out what people actually do. The entire dilemma of what to do behind the TV reinforces a personal frustration of mine. It feels wrong that our "living room" is oriented toward a television. I would like for things to be different, but I don't think my partner or her mother would be sufficiently on board to make that change. It's more aspirational, really, to make sure that all television time is appointment time and not casual watching.

I cannot imagine the stack of worry that comes with being just weeks away from being a dad. It's good to work with fun new tools right now while you can-- a good distraction before side projects get put aside for a while. My gut is that it's not worth worrying too much about online presence. I'm not a parent, and I'm not facing that decision, but my gut is that it's easy to overthink the consequences (or lack thereof). Short of straight up exploitation, which is rare, these things seem to work out ok for parents and kids regardless of the choices they make. That's not to say the choices don't matter, but it seems like there aren't wrong choices.

I'm a big fan of /now pages (I really need to update mine). I really value the narrative of a Now page. For me, it's a time I get to think about what matters that gets lost in the series of smaller posts or dripped out updates. I have resisted adding any "automated" elements-- it'd be easy to add the book I'm currently reading, for example, or maybe something like starred articles from my RSS reader. Something to think about.

We're coming to the end of our time in Mexico. I'm thinking a lot about what makes home, well, home, and what I've learned about where I want to live and what I want my life to be like from 2+ months away. It's a different kind of taking stock than becoming a parent, but I find myself taking stock nonetheless.

Looking forward to next week,
Jason

Week 4: 2023-01-28

Hi Jason,

Another later-in-the-week reply for our last week of this project. To what you said about taking stock, I think a break or a big life change is an excellent time to think about these things. We found ourselves doing that when we moved into this house and once again when we knew we were having a child.

Onto which, the final preparations are now taking place: washing the clothes, organising the nursery, and prepping the hospital bag (a long with many pregnancy and post-pregnancy products I'd never realised even existed). I've gone past the worrying stage now for the most part and I'm focusing on things I can control.

Mexico sounds wonderful and I hope you've been able to relax and enjoy it - spending an extended time away from home in somewhere so different sounds lovely.

Now to get a little bit meta about this project of yours. Having done this for four weeks now I'm struck by how difficult I've found being committed to writing something every week - it's certainly a good job I suggested early in the year pre-baby else I'm not sure it would have gone quite as well. Despite having ideas here and there for little projects or blog posts something about the somewhat stricter schedule I've struggled to do it "on time" (despite the loose rules).

I have, however, really enjoyed being part of this project and I'm looking forward to reading in the coming months.

Speak soon,
Robb

Hi Robb,

It’s funny, because here at the beginning of this project, while taking stock, I’ve had two contrary reactions. First, it does take a surprising amount of discipline to sit down and write to someone. It’s certainly harder than just shooting off whatever is at the top of my mind. Second, it feels so feeble to just write a letter once a week while I see all the progression you’ve been making on several side projects, while preparing for the baby, during this same month.

You’ve been automating your now page, released a widely celebrated set of icons, built a CLI for omg.lol, and a host of other small projects. Based on chaosweb.space, I think you’d like mavica’s work.

It’s generating that itch in me again to figure out how to leave some energy at the end of the day to do the things I love on the computer after doing those things at work all day on the computer. Part of my taking stock is realizing that I have to find a way to push over that activation energy hump so that I can just work on small tools for myself all the time.

I’m glad this first month felt like just writing letters to a friend about what’s happening— it feels like an easy introduction. Maybe they’ll all go this way, but maybe some folks will want to really dig into a specific topic. I’m glad that I am not responsible for writing the first letter, because I think that makes it more likely that each month will be a bit different based on who is participating.

Thanks for helping me kick off this project.
Jason

Get Mastodon Account ID from Username

2023-01-27T00:00:00Z

Note: Every Mastodon has an RSS feed you can use to get statuses if you don't need the data in JSON format https://example.social/@foobar.rss.

If you want to get a user's statuses from Mastodon you can't just look these up with the username. You need, to quote the documentation, "the ID of the Account in the database". To get this, we can use the lookup endpoint that will return what we need:

# for an account on example.social
curl https://example.social/api/v1/accounts/lookup?acct=foobar

# also works for remote accounts
curl https://example.social/api/v1/accounts/lookup?acct=foobar@another.social

Assuming the username is valid, you will receive a response like this:

{
    "id": "1234567891011121314",
    "acct": "foobar",
    "username": "foobar"
    // ...
}

Then you can use that ID to make a request for a users statuses:

curl https://example.instance/api/v1/accounts/1234567891011121314/statuses

Everything Should Have an API: I'm Done with Closed Services

2023-01-24T00:00:00Z

I'm not signing up to any service that doesn't offer at minimum RSS feeds for my data. Ideally an API, even a simple one. No more apps that aren't part of the web. I'm done.

To quote Sophie:

Why bother tracking what you're playing/reading/watching if you can't then do fun stuff with that data?

Is it too much to ask for an RSS feed of listen history from my podcast apps? Every single one of them collects and stores that data but (as far as I know) don't make that data available easily via RSS or an API. One of the apps must have this, please let me know.

There are a loads of mobile apps for tracking game collections, movies watched, habits logged, but most of of them have no way to access the data on the web, let alone programatically; god forbid I want to access stuff from a browser on my Mac instead of using my phone all the time.

I shouldn't need to set a reminder every week/month/year to go and request an export of my data just to have it backed up, posted to my blog, or whatever else I want to do with it.

I'm done with closed services.

Web Scraping with Node and Cheerio

2023-01-22T00:00:00Z

This post is a spin-off from Automating My Now Page.

If you want to programatically get data from a site that doesn't have an API, scraping is the solution. Keep in mind scraping could be against the terms of service of some websites or illegal in some places. To scrape a website there are (at least in this tutorial) two steps:

Get the web page content
Find the data inside the HTML you've collected

For this tutorial, we'll scrape two things from my PSN profile:

The latest game I'm playing
The link to the game

We should end up with an object that looks something like this:

scrapedData = {
 title: "Marvel's Guardians of the Galaxy",
 link: "https://psnprofiles.com/trophies/14419-marvels-guardians-of-the-galaxy/rknightuk",
}

Setup

For this tutorial you'll need Node installed - version 17 or higher to make use of the native version of fetch.

Create a directory and navigate to it:

mkdir psn-scraper

cd psn-scraper

Next we will initialise the project. You can either fill in all the details or append -y to the command to skip all the questions:

# with questions
npm init

# skip all questions
npm init -y

Next we need to install Cheerio. Cheerio is a subset of jQuery designed to run on the server for DOM parsing and manipulation.

npm install cheerio

If then install works correctly you should have a package.json and package.lock file in your directory. In the package.json

Finally, we'll create our scraper file:

touch index.js

Fetching the HTML

The first step is to fetch the HTML of the page we want to scrape which we'll do with fetch. In your index.js require cheerio and add a run function that using async (we'll be using await so this needs to be in a function).

const cheerio = require('cheerio')

async function run() {
 const response = await fetch('https://psnprofiles.com/rknightuk')

 const body = await response.text()

 console.log(body)
}

run()

If we call node index.js a large amount of HTML will be output to the terminal. At this point we could use regex to find the data we want but using regex on HTML is notoriously difficult and unreliable. Instead Cheerio will do all the heavy lifting for us.

Parsing the Data

The first thing we need to do is find a class name or ID on the list of games so we can correctly target it. If we inspect the first game in the list of games on my profile, we can see that the link itself which contains the title and url has a class of title:

On some websites this might be enough to get what we need, but a quick check in the console with document.getElementsByClassName('title').length shows there are 91 elements on the profile page with that class but the games list only has 75 games in it so we need to be more specific. The list of games is inside a table element with an ID of gamesTable so we can use that in combination with the title class name. If you've used jQuery before the syntax will be familiar to you:

// ...
const body = await response.text()

// load the HTML into Cheerio
const $ = cheerio.load(body)

// this will return elements we don't want
const games = $('.title')

// this is more specific and only returns elements inside the games table
const games = $('#gamesTable .title')

console.log(games.length) // 75

We now have an array of games which we can get the title and link from. Because Cheerio's API is the same as jQuery we can used first, attr, and text to get the values we need:

// ...
const games = $('#gamesTable .title')

const path = games.first().attr('href')
const parsedData = {
 title: games.first().text(),
 link: `https://psnprofiles.com${path}`, // the href doesn't include the domain so we add it here
}

console.log(parsedData)
// {
//  title: "Marvel's Guardians of the Galaxy",
//  link: '/trophies/14419-marvels-guardians-of-the-galaxy/rknightuk'
// }

If we wanted to get all the games in the list, we can use each:

const parsedData = []

games.each((i, el) => {
 const path = $(el).attr('href')
 games.push({
  title: $(el).text(),
  link: `https://psnprofiles.com${path}`,
 })
})

console.log(parsedData)
// [
//  {
//    title: "Marvel's Guardians of the Galaxy",
//    link: 'https://psnprofiles.com/trophies/14419-marvels-guardians-of-the-galaxy/rknightuk'
//  },
//  {
//    title: 'Peggle 2',
//    link: 'https://psnprofiles.com/trophies/2935-peggle-2/rknightuk'
//  }
  // ...
// ]

All together:

const cheerio = require('cheerio')

async function run() {
    const response = await fetch('https://psnprofiles.com/rknightuk')
    const body = await response.text()

    const $ = cheerio.load(body)
    const games = $('#gamesTable .title')

    const parsedData = {
        title: games.first().text(),
        link: games.first().attr('href'),
    }

    console.log(parsedData)
}

run()

Now we have that data, we could do anything we want with it like post it to a blog or add it to an RSS feed. The source code for this tutorial is on GitHub.

Automating My Now Page

2023-01-21T00:00:00Z

This post outlines how I automated my now page(s) but I should start with what a now page is. From nownownow.com:

a website with a link that says “now” goes to a page that tells you what this person is focused on at this point in their life. For short, we call it a "now page"

I had heard of now pages a long time ago and always meant to add one to my site but just never got round to it. A few weeks ago omg.lol launched their now page feature which made me think about this again (and I want to keep both my personal site and the omg.lol now page up to date and in sync). One problem with a page that should, in theory, be updated regularly is I will definitely forget to do it. Automation to the rescue! Or more specifically a veritable grab-bag of python and node scripts, web scraping, and APIs.

If you just want to see the pages here are the links:

The source code is on GitHub.

Overview

For each service I'm pulling data from I'm doing mostly the same thing:

Fetch some data from somewhere
Format that data to make is easier to work with
Add it to data.json

I then call now/generate.js which goes through each key in data.json and outputs it to two markdown files: now-omg.txt (for omg.lol) and now-web.txt (for my website). The web version skips the omg.lol-specific syntax and intro section.

For omg.lol, I wanted to append icons to each line so they display as the bullet on my omg.lol now page. I grabbed icons for each section from Font Awesome and apply them as I loop through item in a section:

const text = `Some text from an item ${getIcon('making', 1)}`

const getIcon = (key, index) => {
    const icons = {
        making: ['microphone-lines', 'laptop-code', 'terminal', 'code-pull-request', 'bug'],
        reading: ['book', 'book-bookmark', 'book-open', 'book-open-reader', 'bookmark'],
        music: ['headphones', 'radio', 'guitar', 'compact-disc', 'drum', 'sliders', 'volume-high'],
        podcast: ['headphones', 'microphone-lines', 'comments', 'tower-broadcast', 'podcast'],
    }

    return icons[key][index]
}

Getting the data

Music

services/lastfm.js

This was a nice easy one: show the albums, tracks, and artists I've been listening to the past seven days. Last.fm have a decent, if slightly oddly designed, API to get this data.

Not so easy is that Last.fm no longer return artist or track images. To get around this I do a lookup with the MusicBrainz which gives me a link to AllMusic which I then scrape and grab the main image with Cheerio.

I also use text-to-image to generate images for artists and albums where I'm unable to get one either from Last.fm or AllMusic:

await textToImage.generate(`${album.name} by ${album.artist.name}`, {
    maxWidth: 200,
    customHeight: 200,
    textColor: 'white',
    textAlign: 'center',
    margin: 20,
    bgColor: 'black',
    verticalAlign: 'center'
})

Github, Books, and Statuses

These are all straight-forward API calls with a slightly manually process of tagging projects on GitHub with now - I don't want every recent project showing up and GitHub doesn't have an API for star lists yet.

Games

services/psn.js

Like the missing artist images, this involved scraping a page because PSN doesn't have an API. I scrape my PSN Profiles and use Cheerio to grab the latest games I've got trophies for. It's not a perfect system, but it's likely the current game I'm playing will be the top of that list.

Overcast

services/overcast.js

This export isn't a secret, nor are the scripts to download it but don't hammer this endpoint. I'm downloading once a week. I have emailed Marco to ask if he'd implement an RSS feed of listen history so this isn't required.

This one was trickier but doable. Overcast offers an "All Data" export but you need to be logged in to access it. And it's in OPML format. So this is a two step process:

Use this python script to login and download the export
Run this node script to convert the OPML to JSON and then to a valid JSON feed

One thing I noticed is that Relay's member show feeds show the episode and show URL as relay.fm/membership so I had to handle this myself. Example here with Connected Pro:

const isConnectedPro = podcast.title === 'Connected Pro'

let episodeUrl = episode.url
if (isConnectedPro)
{
    const episodeNumber = episode.title.split(':')[0]
    episodeUrl = `https://relay.fm/connected/${episodeNumber}`
}

From this data, I take the last 30 episodes, group them by show, and rank them by episode count which then becomes the podcasts section of the now page.

Other

services/other.js

For the "about" and "tv" sections, I wanted to be able to update these from anywhere so I opted to dump some yaml in an omg.lol pastebin and fetch it from there.

Syncing the changes

Each data source doesn't need to be updated every hour or day, so I split them out into a makefile for jobs to run on a Monday (music, books, games), a Friday (Overcast), and daily (about, tv, github projects). (I could have done these all as separate cron jobs but it was easier to split them in a make file and just have three scheduled jobs instead).

Each time a job runs, it updates the data.json file so I can run generate.js and update.js at any time throughout the week to update my now pages. The update script posts the contents of web-omg.txt to the omg.lol API and sends a webhook to Forge to deploy my main site.

All of the code for this is on GitHub if you want to do something similar.

Navigate Project Folders with Pick

2023-01-19T00:00:00Z

When I started my industrial placement at Radweb nearly 10 years ago (👴), Dan Harper sent me his bash aliases which included a lot of handy Git ones including this one that uses pick to list git branches. I can either do gco, search, and enter to checkout to that branch, or do gco branchName to checkout immediately to a branch:

function gco() {
    if [ $# -eq 0 ]; then
        git checkout $(git branch | pick)
    else
        git checkout "$@"
    fi
}

I do use zsh-marks already to jump to folders I've expicitly marked (as well as jumping to the root of projects with jump sites) but last night while doing the cd ..; cd project-name dance between different projects I hadn't marked I realised I could apply this same thing to my personal sites folder which as the time of this writing has 97 folders. To do this, I needed to list out the directories with ls and the -1 option which tells ls to show one per line and just the folder name:

function site() {
    if [ $# -eq 0 ]; then
        cd ~/path/to/sites/$(ls -1 "~/path/to/sites" | pick)
    else
        cd ~/path/to/sites/"$@"
    fi
}

So now to jump directly to the folder for this website instead of doing j sites then cd personal/rknight.me I can simply do site rknight.me. You can see all my aliases in my dotfiles on GitHub.

Link Dump

2023-01-15T00:00:00Z

A brief history of my newspaper blackout poems. Not sure how I've not seen this before, but I'll be buying the book ASAP.
AI generated Marvel cat-characters. Cute AF.
Sony Ericsson Xperia Pureness. Not sure why this was in my read later list but very cool (article is from 2009)
Audio Cassette Player | We Are Rewind. A cassette player with Bluetooth. It's like this product was made for me.
A portable clone of Wordle designed for the Nokia N-Gage. Cool.
Written in Stone • A gallery of sidewalks, and the stamps and seals left by the people who laid them. I already posted this but figured I'd pop it here too.

Bye Almanac, Hello Lantern

2023-01-14T00:00:00Z

I am a hoarder of data. I have exports from dead Tumblr sites, Twitter accounts, Pinboard, Instapaper, and probably more I'm not thinking of. I also like to be able to check when I did something, watched something, or just tweeted something funny (it happened at least once).

Bye Almanac

In February 2015 I started using Plot (RIP) for tracking movies I've watched. This was before I'd heard of Letterboxd and before the proliferation of the many TV and movie tracking apps on iOS. Within a few months I decided I wanted the same for TV shows I'd watched and games I played so I started work on the first version of Almanac. I built this with Eleventy which worked well but was missing any kind of search and I couldn't post from my phone (I suppose I could but I hate doing things on my phone). Sadly I don't have a copy of this version of site but I do have this rather natty screenshot of it:

Fast forward to 2018 and I did the first commit on version two. This version was built on Laravel for the backend and a React front end. It used the TMDB API for movies and TV, and the GiantBomb API for games. I built a Letterboxd importer to poll my profile RSS feed to grab new reviews and store them in Almanac, kept track of how many times I'd watched a movie, and more recently used it to cross-post Letterboxd reviews to Micro.blog. This has now been replaced with Echo.

When I started using Micro.blog early last year I realised it made no sense to have all these different places I was posting things so I spent some time exporting the ~1200 posts from Almanac and importing them into Micro.blog. Since then I've been posting directly to Micro.blog, with the exception of movies which are still fed in from Letterboxd. For the sake of posterity, here's a couple of screenshots of Almanac as it exists now:

Hello Lantern

Like version one of Almanac, I've missed being able to quickly search for a movie or TV show to grab the year or link when posting to Micro.blog. Which is why I built Lantern. Lantern uses the same APIs as Almanac (and even shares some of the same design for search). It grabs the year (release or first aired) as well as the poster and converts it to Markdown for posting to Micro.blog. Of course it also pops the discover emoji in there too.

I started with a version that logged you in and would post automatically but realised that made it more complicated that it needs to be. I switched it over to use Netlify functions for the API and a mess of vanilla JS for the front end. Micro.blog has the posting UI so I just needed to generated the main content. Micro.blog already has book support so I don't think I'll be adding too many features to Lantern but please let me know if you find any bugs or you have any litte requests.

Import RSS to Micro.blog and Mastodon with Echo

2023-01-10T00:00:00Z

Update 13/01/23: Echo now supports Mastodon and webhooks as well as Micro.blog. Check out the website for more details.

After a conversation with Zoe about status.lol, as well as this reply from Markus, I decided to write Echo last night (do I know how to party on my birthday or what?). From the readme:

Echo is a node script to post new items from an RSS feed to Micro.blog

Micro.blog already supports importing RSS feeds and handles it very well but ~~I'm a control freak~~ I wanted a bit more control over the formatting as well as assigning categories on import.

Echo takes a config of RSS feeds as well as some formatting functions for items and posts them to Micro.blog. I run mine every 15 minutes but you could set it up to run whenever you want. The only requirements are node and npm and a server to run it on (or you could run it on your computer and manually run it as and when).

Download Echo on GitHub

Blogs and Wikis and Links

2023-01-07T00:00:00Z

I've been thinking about how better to handle all the different places I'm posting too including this site, Micro.blog, and my wiki. To quote myself:

Starting to think some things I’ve put into my wiki might be better served as a blog post that I just update as and when I find things. The discoverability of pages is kinda crappy for anyone who isn’t me (because I know to go there to look for things)

For example, this page about buying a house. Why isn't this a blog post? It looks just like one, it's unlikely I'm going to buy another house so this is likely to be all I ever write about it. This git page. There's no reason I couldn't have this as a blog post and just update it as I find other things. People are more likely to find it as a blog post than a page on my wiki.

Then there's the opposite: this PiSight page is 100% links. I wonder if a link system with tags would be better than posting to a specific page each time I find a new link. Or I could add the links to the PiSight blog post I wrote.

The Intersect was fun to build but it's complicated. The build process takes a while, making any structural changes is a pain. Something simpler might be better. I should reduce it to the bare minimum of things that I need from it.

Should I incorporate the wiki into my personal site instead of having it on a different domain perhaps? Should I just do more blog posts when I find interesting things and not worry if it's "worth it" to post? Who knows.

Using PageFind with Eleventy for Search

2023-01-04T00:00:00Z

In the past, I have implemented my own search for static sites and while it's good enough, it's not great. Recently Tweetback, a self-hosted Twitter archive, added search using PageFind so I dug into the code to see how it's done. PageFind is:

a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure

I hadn't even heard of PageFind until a few weeks ago so most of what I've learnt here came from the PageFind docs and the pull request that added search to Tweetback so a big thanks to Alistair for writing the PR.

Installation

Note: I had to change some directories for the demo to get this to work on GitHub pages but everything works exactly the same as below.

To get started, install the package to your Eleventy project. PageFind has more detailed installation instructions on their website here.

npm install --save-dev pagefind

Build the index

PageFind works by scanning a bunch of HTML files and looking for one of the data-pagefind attributes. We'll add the data-pagefind-body attribute to the article element that wraps the posts to tell it to index the post content:

<article data-pagefind-body>
    {{ content | safe }}
</article>

We want to run the PageFind CLI after the site has been built so we use the after Eleventy event and run the command with execSync on all HTML files in the built site:

const { execSync } = require('child_process')

module.exports = function(eleventyConfig) {
  eleventyConfig.on('eleventy.after', () => {
    execSync(`npx pagefind --source _site --glob \"**/*.html\"`, { encoding: 'utf-8' })
  })
}

Update 24/07/23: If you have a lot (read: ~3000) of pages like I do then you might find the build crashes trying to build the index. If that's the case, do the pagefind command after your Eleventy site build script has finished instead of in the after event.

Note the _site source option - if your site is built to a different directory then change this. This outputs a _pagefind directory to the build folder.

Add a Search Box

PageFind has an API if you want to make your own search interface but for this we'll use the built-in UI. Add the following to wherever you want the search box to appear, in the case of this demo it's going on the home page.

Add the PageFind stylesheet either in the head or above your search box element. The additional styles are optional and only needed if you need a dark theme/mode.

<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">

<style>
  @media (prefers-color-scheme: dark) {
    :root {
      --pagefind-ui-primary: #eeeeee;
      --pagefind-ui-text: #eeeeee;
      --pagefind-ui-background: #152028;
      --pagefind-ui-border: #152028;
      --pagefind-ui-tag: #152028;
    }
  }
</style>

PageFind requires an element with an ID which can then be passed to the script.

<div id="search" class="search"></div>

<script src="/_pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search', showImages: false });"></script>

Run your Eleventy serve script and if everything has worked, you should have a functioning search that searches all your posts:

The code for this is on GitHub and there is a live demo here.

Just 2022 Things

2022-12-30T00:00:00Z

Inspired by Sophie's post I decided to do a little roundup of things I've done the year.

House Project

We purchased our house in November 2021 and it hadn't been decorated since 1971 so everything needed doing; most of this year has been spent getting all the rooms fixed up. In July, we found out my partner was pregnant (🎉) which is very exciting but also added an extra bit of stress to making sure the house was done by the end of this year. Things I learnt how to do:

Fitting laminate flooring - This isn't difficult per se, but it is hard work.
Wallpapering - This is a pain in the arse, I hate it, and will never do it again. I do like the finished wall now it has the mirror and radiator though.
Installing skirting boards - Again, a bit of a pain but with a decent mitre saw and some Gripfill it doesn't take too long.
Building a desk from scratch - This was a fun woodworking project. I'm pretty happy with how it turned out.

Travel

In February we went to Rome, visited all the normal sites, and ate so much incredible pizza. We stayed right near The Pantheon which was perfect for walking everywhere we needed to go.

In April we went to Bournemouth for a few days and saw Bowling for Soup on the last day.

Right before Christmas we went to Edinburgh to visit the Christmas market (which was a bit disappointing) but we did a tour of the Edinburgh Vaults, rubbed the nose of Greyfriar's Bobby, and visited some great book shops.

We saw a bunch of theatre shows this year as well:

Hamilton
Six
Book of Mormon
Back to the Future: The Musical
Cinderella - This was an interesting one because the front 8 rows rotate with the stage so you're facing everyone else. This got cancelled right after we saw it.

Web

I made a bunch of little plugins/webapps for Micro.blog and the Monzo Pot Image Generator hit over 40k images generated. I stopped using Twitter so I'm using a combination of Micro.blog and Mastodon - the latter is run by omg.lol. omg.lol is such a fun site and has a bunch of services, including a Mastodon instance. You can get it for $5 a year until tomorrow.

Games

I didn't play many games due to the aforementioned home project but I did manage to play through the GTA Trilogy as well as Horizon Forbidden West.

Movies

According to Letterboxd I've watched 103 movies this year. Of those, 12 of them came out this year. My favourites of those are:

Thor: Love and Thunder - This movie is a bit divisive but I loved it.
Glass Onion: A Knives Out Mystery - An excellent sequel to Knives Out.
The Guardians of the Galaxy Holiday Special - This was so much fun and the main song is a banger.

TV

I didn't watch all that much TV this year but the two stands outs were:

Reacher - As a fan of the books, I was impressed how closely this matched up. A really great adaptation.
Better Call Saul - This show is perfect in every way.
For All Mankind - No other show builds suspense like For All Mankind does

Books

I read zero books this year which is embarrassing, I hope to change this next year. I did start Men Who Hate Women and hopefully will finish it soon.

Building a Podcast Site with Eleventy

2022-12-28T00:00:00Z

When me and John started Ruminate, we didn't know much about hosting podcasts so we decided to go with Simplecast to host and manage the podcast. Seven years later, Simplecast has changed quite a bit to the point that it's hindering rather than helping me post the show. It's not a bad service, but it's overkill for posting one episode every two weeks.

I asked last week if anyone had self-hosted a podcast and a few people I trust said it should be easy enough to do so I got to work. As with most of my projects, I used Eleventy. Eleventy is a very powerful static site generator that this site is built with. This post was very helpful in pointing me in the right direction.

Importing existing posts

The first step was to import the existing 156 episodes into the new site. I had a look at the RSS feed to see what metadata each episode would need. Here is an example from episode 156:

layout: episode
guid: ff7d5a18-c87c-4420-a6dd-965be716aa12
title: "156 - For Listeners Only"
published: "Wed, 7 Dec 2022 20:55:06 +0000"
permalink: 156/index.html
file: "https://ruminatepod.s3-us-west-2.amazonaws.com/156.mp3"
length: 10993430
duration: 00:22:49
summary: "Baguettes and Obsidian."
episodeNumber: 156

I created a new script called feedtomarkdown.js, used node-fetch and xml2json to parse the feed, and then looped through each episode to get the data. For the shownotes, I needed to covert that back to markdown with turndown. I also learnt about padStart/padEnd to pad the episode numbers from 21 to 021:

'21'.padStart(3, '0') // 021

Finally I output all the file names into filenames.sh to download all the episodes with wget with consistent naming:

#!/bin/bash
wget http://path.to/file -O 001.mp3
wget http://path.to/file -O 002.mp3
# and so on

Creating new episodes

I'm hosting the episode files on S3 and I didn't want to have to manually get the filesize, duration, and generate a UUID for each episode so I wrote new.js. This script takes an episode number, finds the mp3 file, reads the duration, title, and summary from the mp3 and outputs a new episode (with a UUID as well). This uses mp3-duration and node-id3 to extract that data. I can then fill in the shownotes and push the new episode.

RSS feed

I was able to replicate the RSS feed from Simplecast with this new setup but for some reason Safari doesn't auto-recognise it as a feed that can be opened in Podcasts/NetNewsWire. If anyone knows what attribute triggers this, I'd love to know.

All of the code for this is on GitHub and you can see see the new website here.

Two Social Networks? In This Economy?

2022-12-22T00:00:00Z

The past few months Micro.blog (M.b.) has improved its support for Mastodon and thanks to Space Karen doing what he does best, I've been following more and more people from there as they join via M.b.

This has led to my timeline being busy which is good, but the way people post on Mastodon is very different to M.b. Threads (write a damn blog post please), posts with content that warnings (which rightly in my opinion M.b doesn't support), boosts (again not supported on M.b.), as well as hashtags have made the timeline feel messy and disconnected from the rest of M.b.

Enter omg.lol. omg.lol is a service that has a whole bunch of features, one of which is a Mastodon instance for users, social.lol. As a side note, until the end of the year it's only $5 a year (going up to $20 in 2023) so now is a good time to sign up.

One thing that had put me off signing up on any given instance is what if it shuts down because most of them are free and although some have Patreons, I'm not sure that's a sustainable model for smaller instances in the long run. Because social.lol is linked directly to a service I'm paying for I feel confident it's not going anywhere any time soon.

After asking on M.b about how people use both I made the decision to cross-post everything to Mastodon, keeping M.b as the source of truth. This has worked pretty well the past week, although I did hit some cross-posting issues of my own doing but I should be able to iron these out as I go. I'm also boosting some posts on Mastodon and may even do a bit of shitposting from time to time.

I don't really have a conclusion here other than I'm using both things for now. I might even checkout Pixelfed at some point.

If you want to follow me you can do so on Micro.blog or on social.lol/@robb. But probably don't follow me on both lest you see every post twice.

Prami's Challenge

2022-12-18T07:43:47Z

Prami posted a challenge on social.lol to decode this string and win a lifetime subscription to omg.lol.

The string below is an encoded lifetime omg.lol gift code:

eoad1o1fpoawctnjeiri11dmj7rir6d8ehadkt4seo6u4

[...]

in this format: XXXX-XXXX-XXXX-XXXX

I figured I'd have a go which ended up being a good few hours. Then I kind of lost my mind a bit. Then went to bed having given up (and needing to be up for a flight this morning).

Overnight, Joanna solved it and I felt like I'd been presented with a sock, I was free. The solution was 3 schemes: z-base-32 then rot13 then base64. I googled a lot last night and not once did I see z-base-32 so I had no chance (although I was on a website that supports it but clearly didn't see it).

Other things I tried:

Various different cypher detectors
Asking ChatGPT nicely
hashcat
Ciphey - this one crashed my computer trying to run overnight

ChatGPT and mySQL Database Schemas

2022-12-16T19:38:40Z

ChatGPT is wild. I entered "Describe a mysql database schema for tracking the owned books of multiple people" and it came back with the queries to write the tables including foreign keys:

CREATE TABLE people (
  id INTEGER PRIMARY KEY,
  name VARCHAR(255) NOT NULL
);

CREATE TABLE books (
  id INTEGER PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  author VARCHAR(255) NOT NULL,
  year INTEGER NOT NULL
);

CREATE TABLE owned_books (
  person_id INTEGER NOT NULL,
  book_id INTEGER NOT NULL,
  PRIMARY KEY (person_id, book_id),
  FOREIGN KEY (person_id) REFERENCES people(id),
  FOREIGN KEY (book_id) REFERENCES books(id)
);

I do things like this regularly so I can do this no problem but having a rough draft dumped in front of me within seconds is handy. It even gives examples of what queries you could run with the data, so I followed up with "What would the query for how many books each person owns look like?"

SELECT p.name, COUNT(ob.book_id) AS num_books
FROM people p
JOIN owned_books ob ON p.id = ob.person_id
GROUP BY p.id

I'm not convinced I'm getting replaced yet but I'm a tiny bit more worried than I was a few weeks ago.

Lite YouTube for Micro.blog

2022-12-06T00:00:00Z

I've published a new Micro.blog plugin called Lite YouTube which does one thing: finds YouTube links in posts and appends a lite-youtube-embed to the post. Example before and after below:

You can see it working on this post about The Last of Us or on this post with two videos.

Why did I do this instead of using YouTube shortcodes? Two reasons:

Shortcodes are great but what if I change where my site is hosted? Those links won't work any more
(This is the real reason) I will forget, I'm too lazy to do it, this is automatic.

You can install it from the plug-in directory and view the code on GitHub.

My Office Setup

2022-12-05T00:00:00Z

A couple of weeks ago I posted a photo in the MacStories Discord and Federico ~~demanded~~ asked very nicely if I would write about it, so here we are. I have a lot of consoles which means I have a lot of games and controllers. I’ve never been one to sell games after I’ve finished them so I always had a collection of some sort. I worked at a second hand game shop while I was at university so my collection grew rapidly in the 11 months I was there and I have continued to pick up games here and there over the years. As of right now I have 315 games across 12 systems, a third of which are for the PlayStation 2. A lot of my all-time favourite games are for the PS2 including:

Tony Hawk Pro Skater 3 and 4
Jak and Daxter
Grand Theft Auto: Vice City (side note: despite the launch bugs, the remaster version of this is excellent)
Mashed: Fully Loaded

I’m a big fan of single-player story-driven games so the majority of my collection are those types of games. I’m currently playing through Horizon Forbidden West which I am loving.

My setup consists of a PS5, a PS3, a pink PS2 which I adore, an Xbox 360, and an Xbox One all hooked up to a HiSense 4K 43" TV that I bought a few years ago. I’m not sure in 2022 if I would even be able to buy a TV with this many inputs. The modern consoles use HDMI and the PS2 and 360 use SCART cables which was widely used on TVs in the UK and Europe and is somewhat better than using component input.

I use GameEye to keep track of my the games and consoles I own. I log the games I’ve played with Almanac, a custom blogging system I made for tracking things I’ve watched and played. (Update: I now use Micro.blog for this). In my attic I have a Sega Master System, Nintendo 64, and a Nintendo Wii, plus there is a Nintendo Switch in the living room.

Until I add shelves to my office to have at least some of my games on display, I’m using the built-in cupboard as storage for my games. I built the shelves in there myself so they are a perfect size for double-stacking games. I added an Ikea Skadis to the inside of the door to various gaming-related things like cables, controllers, and memory cards for the older consoles.

I have some ideas for the office including a custom controller holder, shelves to display my games and my many collector’s edition statues (these are also in storage right now), and I’m also considering wall-mounting the TV. I also need to alphabetise the games instead of dumping them in the cupboard like they are right now.

My Favourite Albums of 2022

2022-12-02T19:50:00Z

It's been a really good year for music especially for artists I've been listening to for years.

Avril Lavinge - Love Sux - This is the link to the deluxe version which contains some excellent acoustic versions of some of the tracks.
State Champs - Kings of the New Age
Simple Plan - Hard Than It Looks - This is as good an album as they've ever made.
Demi Levato - HOLY FVCK - this was a suprise entry for me, I didn't expect to like it as much as I do.
Jaret Jay Reddick - Just Woke Up
Beefy - Super Relatable
Punk Rock Factory - A Whole New Wurst 2 - Their cover of Surface Pressure is amazing.

The released tracks on Story of the Year's new album are fantastic. I can't wait to hear the rest of them.

Finally I discovered Never Look Back by Goldfinger. Apparently it came out in 2020 and I completely missed it. There's a great version of Here In Your Bedroom featuring Avril on this deluxe version of the album.

How to Copy Gifs to Clipboard Programatically

2022-12-01T00:00:00Z

Update 1

Ed Wellbrook solved this with grabgif like the absolute hero he is.

Update 2

Turns out in my frustrated state, some of the things I tried did work but I just didn't notice (or I did something like clear the clipboard by accident). After looking at Ed's solution it clicked. This solution does work:

osascript -e 'set the clipboard to POSIX file "/path/to/animated.gif"

I will leave the rest of the article but everything below is kind of useless now.

If you've come to this post to find out how to copy an animated gif to the clipboard programatically: I'm sorry. All I have is many solutions that either don't work at all, or only partially work.

Why was I doing this? I've had an idea for an Alfred workflow for a while that would list all the gifs in my gif folder then copy it to the clipboard so I can paste in to Slack (or anywhere that supports copy/pasting animated gifs). I like to keep things as simple as possible with my Alfred workflows so I figured I'd try AppleScript/JXA first.

AppleScript and JXA

There are loads of StackOverflow posts describing how to copy images, some of which even say it works with gifs. They do not. At best, some of them will copy the first frame of the gif to the clipboard, at worst they flat out don't work.

# these work but will only get the first frame

osascript -e 'set the clipboard to (read (POSIX file "/path/to/animated.gif") as {«class GIFf»})'

osascript -e 'set the clipboard to (read "/path/to/animated.gif" as GIF picture)'


# these do not work at all

osascript -e 'set the clipboard to (read (POSIX file "/path/to/animated.gif")'

osascript -e 'set the clipboard to POSIX file "/path/to/animated.gif"'

Command Line Tools

I found a number of CLI tools that looked promising. The first of these I came across was impbcopy but this only works with png files. Perhaps there's a way to modify this to work but I wasn't able to see how to do that. Likewise with pngpaste which claims to support gifs.

Conclusion

Having spent a good few hours on this at this point I am assuming this can't be done. If someone knows of a way to do this I would be very interested to see a solution.

Music Replay 2022

2022-11-29T16:33:59Z

Apple Music Replay is a vast improvement on last year. I grabbed some of the data so I have a record of it (I have no idea if you can access a previous years data or not).

No suprises Hamilton is top again with Lin-Manuel Miranda and Leslie Odom, Jr. taking 2 of the top artist spots. Combined, they take the real top spot.

I was in the top 100 listeners for Punk Rock Factory and Goldfinger.

3695 songs

696 Artists

Top artists:

Punk Rock Factory - 4,447 minutes
Goldfinger - 3,354 minutes
Lin-Manuel Miranda - 3,292 minutes
Linkin Park - 3,046 minutes
Leslie Odom, Jr. - 2,886 minutes
Simple Plan - 2,303 minutes
Bowling for Soup - 2,015 minutes
Machine Gun Kelly - 1,920 minutes
Avril Lavigne - 1,837 minutes
MC Lars - 1,772 minutes

231 Albums

I have no idea how it works out the play count on albums but I assume this is individual tracks so I've worked out the times I've played an album based on this. Apple doesn't give numbers for albums 6-10.

Top Albums:

Hamilton: An American Musical (Original Broadway Cast Recording) - 1,581 plays / ~35 times
Never Look Back (Deluxe) - Goldfinger - 1,099 plays / ~57 times
Harder Than It Looks - Simple Plan 503 plays / ~50 times
Love Sux - Avril Lavigne - 464 plays / ~38 times
Just Woke Up - Jaret Ray Reddick - 448 plays / ~37 times
Tickets to My Downfall (SOLD OUT Deluxe)
RECHARGED - Linkin Park
Kings of the New Age - State Champs
With Sprinkles - Beefy
Single and Famous - K.Flay and MC Lars

Importing Tweets into Micro.blog

2022-11-17T00:00:00Z

I wanted to import a bunch of tweets from my archive (mostly cat photos and a few other bits) but I didn't want to have to manually go through each tweet, copy the text and download the photos. So I wrote a script to do it for me once I had the IDs (which I got with my Safari shortcut).

One thing that had annoyed me for a while is I didn't keep a diary/note of things that happened and my thoughts during the first year of so of the pandemic but thanks to going through my archive I now have that. On a cheerier note I have a lovely collection of animals in the pets category. These additional categories were done manually (with the help of QLMarkdown) as I couldn't think of a way to automate this.

Once I had the IDs it was a case of getting the format correctly (for example, Micro.blog will fail an import with empty categories in the YAML). I was able to take ~450 tweets, convert them to markdown and import them into Micro.blog. For example, this tweet:

becomes:

---
date: 2022-10-20T13:56:19+00:00
categories: Imported Tweets
---

"You could not live with your own failure. Where did that bring you? Back to me"

![](https://pbs.twimg.com/media/Ffg6jkDXkAARD4p.jpg)

The script isn't perfect. It doesn't do anything with hashtags or usernames, nor does it check if a tweet is a reply or a retweet. The project readme.md has steps for using it on your own archive.

The "Best" Tweets

2022-11-15T00:00:00Z

A few days ago James Thomson posted that you can find your tweets based on how many likes they got with the following link (switching my username for yours):

https://twitter.com/search?q=from%3Arknightuk%20min_faves%3A1000&src=typed_query&f=live

I think it's very likely my account will be deleted at some point so I figured I'd have a little look at my best tweets and archive them here (I am using "best" in the loosest possible way here).

Back to the Future Day tweet - 2015-10-21 (link)

This has a typo that will haunt me forever (should be "Emmett" not "Emmet").

“Are you Marty McFly? I’ve got something for you”

opens letter

“Emmet Brown would like you to join his professional network on LinkedIn”

I also did ~~the same tweet~~ a totally original tweet when GDPR caused everyone to send a thousand emails (link).

“Are you Marty McFly? I’ve got something for you”

opens letter

“Please confirm you want to continue to receive letters from Dr. Emmett Brown”

Alt Key - 2016-08-21 (link)

The alt symbol (⌥) is like a track switch. An alternate route. Alt.

Mind blown.

Dark Pattern - 2018-05-27 (link)

This “no I hate myself” pattern is horrible.

Boris × Thanos - 2022-10-20 (link)

I didn't make this image. I had the idea and then grabbed the image from this tweet.

"You could not live with your own failure. Where did that bring you? Back to me"

Year of Renovation

2022-11-08T00:00:00Z

We moved into our house November 3rd 2021, just over a year ago. Most of the house hadn't been decorated since it was built in the '70s so everything needed redoing. With the exception of a few carpets and a bit of painting, everything is now done.

Bathroom

Main Bedroom

Spare Room

Office

Nursery

Kitchen

This was the biggest project. We extended into the garage to make a kitchen/diner and add a utility room.

Living Room

Follow Mastodon User on Micro.blog Shortcut

2022-11-03T00:00:00Z

Micro.blog has support for following and replying to Mastodon users but getting from someone's profile on Mastodon to the follow page on Micro.blog can be a pain. To search for a user you need have it in the format of cooluser@mastodon.instance which isn't the same as the profile URLs. To make this easier I made a shortcut that does the following:

Takes the current Safari URL, for example https://mastodon.instance/@cooluser
Gets the domain (mastodon.instance) and the path (@cooluser)
Swaps those round to become cooluser@mastodon.instance
Opens the page on Micro.blog to be able to follow that user (https://micro.blog/cooluser@mastodon.instance)

It will also check to see if the path/username contains an @ symbol and if it doesn't will show an alert instead. This isn't ideal but given that Mastodon can have any domain, it's much harder to detect if it's a Mastodon site or not.

There is a meta tag in the HTML with profile:username as the property name but I don't know enough about Shortcuts to do this.

Download Follow Mastodon User on Micro.blog shortcut v1.1

Previous Versions

v1.0 - this version won't work if the user hasn't been seen before by Micro.blog

Fix for Bluetooth Audio Cutting Out on the Mac

2022-09-14T00:00:00Z

Bluetooth cutting out randomly on my Mac when using wireless headphones has been an issue for me for ages. I assumed it was because of everyones BT devices in the office but I'm here by myself this morning and it was still happening.

Had a google around and found this thread on Reddit and it solved it. Settings > Sharing > Turn off AirPlay Reciever.

I wish I'd looked for a solution sooner.

Update for Ventura: System Settings > General > AirDrop & Handoff. Thanks Trevor.

Thoughts on Micro.blog

2022-05-14T00:00:00Z

A couple of weeks ago I signed up to Micro.blog and stopped using Twitter, Instagram, and Pocket.

Twitter

Micro.blog (MB for the rest of the post) has no likes, no follower counts, no retweets, and no ~~post dunking~~ quote tweets. If I post something, I don't know who saw it or who enjoyed it but it doesn't matter; I'm posting it because I want to. Might be something interesting or me being nostalgic for a time when I thought I was, but definitely wasn't, cool but none of it is being posted to try and "go viral" or get likes.

The lack of follower count, or even knowing if someone follows you, means there's no guilt for unfollowing someone or wondering why someone unfollowed you. No likes means if someone really does like a post a lot, they can reply and say so. Alan Jacobs has an excellent post about this.

I've looked at Twitter a few times in the past month and I was reminded just how negative it is. I'm as guilty as anyone for dunking on politicians, crypto bros, and general idiots. They probably deserve it but it is exhausting and it's pretty much every other tweet. I don't follow news sites or "brands" on Twitter, these are all just normal people but we're all (rightly) angry about the things. I just don't think it's good for my mental health to be that annoyed about a thousand things all the time.

Instagram

I hadn't posted to Instagram for a long time. I'd felt uneasy about feeding content to the beast that is Facebook for a while but I also thought perhaps I didn't have anything worth posting. A few days after I signed up, MB were running the May Photoblogging challenge. 30 days, 30 prompts, post a photo each day. Turns out I do have things to post and you can view my challenge photos here. Challenge photos are collected in this nice grid view and it's been a great way to find all the cat people.

Pocket

This one is less "stick it to the man" and more "just use one service for a bunch of things". MB has a bookmarking feature that works for exactly my needs and I whipped together a shortcut as well as making a little web app to manage my bookmarks.

Other things I like about Micro.blog

Editable posts. What a concept.

The discover timeline is a manually curated timeline of features posts from real people and is an excellent starting point to find users to follow. Jean does an excellent job of curating posts for the discover page as well as helping new people to the service. The other way to find interesting posts are the automatic timelines based on emoji topics.

You can follow Mastodon users from MB which mean I can still get updates from the duck haus or any other Mastodon instance. Mastodon users can follow MB users as well. When using a custom domain with MB you can set a Mastodon-compatible username. For example mine is robb@toot.rknight.me.

There's an API which I'm sure I'll be using more in the future.

Missing Pieces

As much as I've complained about Twitter, there are people who I still want to subscribe to. Of course Twitter doesn't have RSS feeds any more but thankfully NetNewsWire allows me to subscribe to specific people so I'm "following" a handful of Twitter accounts there instead.

Get Safari Tabs Shortcut

2022-05-13T00:00:00Z

For Automation April MacStories ran a contest where people could submit a shortcut and be in with a chance of winning an Analogue Pocket and a Stream Deck.

Until the announcement of the contest I had never made a shortcut but I wanted to enter just for the fun of it (and that sweet role icon in the members Discord). I decided to convert my existing Get Safari Tabs Alfred workflow to a shortcut.

The shortcut gets all currently open tabs in Safari and converts them into one of 6 formats and then copies them to the clipboard

Markdown list: - [Robb Knight](https://rknight.me)
Markdown links: [Robb Knight](https://rknight.me)
Links only: https://rknight.me
Titles only Robb Knight
Titles with links Robb Knight https://rknight.me

I use the workflow, and now the shortcut, fairly regularly for making shownotes for Ruminate and for adding links to the Intersect.

The shortcut is MacOS only because it uses JXA to get the current tabs and formatting them. I'm sure this could be done with shortcut actions but I already had the existing logic from the workflow and I couldn't see any advantage in converting the logic to actions.

Download Get Safari Links Shortcut for MacOS

Update 2024-02-20: Chris has made something similar for iOS

Save Bookmark to Micro.blog Shortcut

2022-04-28T00:00:00Z

I recently signed up (again) to Micro.blog in an attempt to move away from services run by billionare shitposters. I will probably write up a full post about it soon but you can hear me talk about it on episode 144 of Ruminate or view my micro blog here.

One of the features Micro.blog offers is bookmarking of posts and links. After a conversation about using micro.blog as a read later service and finding the correct API I put together a shortcut to save bookmarks. You'll need to get an access token from the apps settings page.

Download Bookmark on Micro.blog

MacOS shortcuts lacks support for using the sharesheet without a third-party app so instead you can run this shortcut whenever and it gets the current Safari page URL. The iOS version shows up in the share sheet so it can be used wherever you share links.

~~If there's a way to combine these so one shortcut works for both MacOS and iOS, I'd love to hear it.~~ Thanks to Pratik for showing me how to check the device type and make this one shortcut for both platforms.

Building a PiSight

2022-02-10T00:00:00Z

During the pandemic Max Braun managed to squeeze a Pi Zero with camera module into an Apple iSight camera. I came across the post a few weeks ago and decided to have a go myself.

Despite the Rapsberry Pi shortage I was able to order a Pi Zero, the camera module, the Pi Zero camera cable, and an iSight. I ordered the 3D-printed internal chassis and this USB adaptor from SGD3D which took about a week to arrive.

I followed these iFixIt teardowns to work out how to take the iSight apart, then looked at the issues on the PiSight repo, and this blog post, to see other people putting theirs together. The main issue I had was having to trimming off the bottom two corners of the camera module to be able to fit it inside the iSight tube. I used showmewebcam for the software, which boots incredibly quickly and makes it very easy to get going.

Once I'd wrangled it all together I used Hand Mirror to check everything was working (the lighting is terrible in this temporary office hence why it's looks so bad):

It may not be the best webcam in the world, but it's easily as good as the one I have in my MacBook, and I can move it around wherever I want.

Additional Links

Monzo Pot Image Generator Version Two

2021-08-29T00:00:00Z

It's been a while since I released the first version of the Monzo pot image generator and there's been a lot of requests on the Monzo forum for various new features.

So I spent some time adding and updating the site:

New about modal with credits for the new icons:
- Nearly 2000 brand logos from Simple Icons
- Country flags from lipis/flag-icon-css
- Country icons from djaiss/mapsicon
- Full set of emoji from Openmoji
Premium backgrounds from Ben in the forums
Upload your own background image
New coloured Monzo logo from the Monzo press kit
Offline support

Try the Monzo Pot Image Generator.

The Intersect: My Personal Wiki

2021-08-23T00:00:00Z

I came across Nikita Volodoev's wiki recently when looking for other things and realised this was exactly the type of things I'd been looking for to store snippets, links, and other notes about various things that don't justify a full blog post. And because I'm an idiot I ended up building my own solution with Eleventy. The result is Intersect.

Aside from just rendering a bunch of markdown files it has a number of additional features.

Table of contents and breadcrumbs
Syntax highlight for code blocks with copy code button
Full search of content and links
Highlight search queries on navigation to a result
Popular pages using the Fathom API
Recently updated pages by parsing the git log

There are a bunch of pages where you can read about what Intersect is and how it works on Intersect itself:

The introduction page has some more details about the why
The meta page sets out what the purpose of the site is
The readme page has installation instructions, and more technical information about how it was built

The source code is on GitHub but to paraphrase Andy Bell it's not open source so much as it is free. I doubt this will meet the requirements of anyone else, it's a good base to start with, but any features I add will be because I want them.

There is a companion Alfred workflow that also searches the content and links and can also open the page in VSCode for editing.

I even went full #devsdodesign and made a logo:

Calendar Events Alfred Workflow

2021-07-22T00:00:00Z

NB: This workflow has been deprecated and replaced with the Agenda Workflow

tl;dr: Calendar events workflow for Alfred. Download it here.

I released a Reminders workflow a few days ago and while working on that I realised a lot of the code would be reusable for a version to manage calendar events. So I went at it tonight while it was too hot to sleep (it's 3am).

Like the reminders one, it uses an only-for-this-use-case CLI tool which you can view on Github here.

One difference with this one is opening and creating events. I wanted the workflow to stand on it's own but I use Fantastical as my calender so it has two modes: one for default Calendar.app and one for Fantastical. By changing the usefantastical workflow variable events will be opened and created in Fantastical. This is the recommended way of using it.

With this workflow you can:

View upcoming events for the next 5 days (all or a specific calendar)
Open events in Calendar.app or Fantastical
Set a default calendar for creating events

Download Calendar Events for Alfred.

Reminders Alfred Workflow

2021-07-19T00:00:00Z

NB: This workflow has been deprecated and replaced with the Agenda Workflow

tl;dr: Reminders workflow for Alfred. Download it here.

There are a number of workflows available for Alfred to manage Reminders on the Mac and I've tried most of them; none of them do everything I want. Most of them have one of these problems:

They don't order reminders based on due date
You can create reminders but can't view them
They rely on a default list for creating with no option to choose

I decided to have a go at building my own this weekend (and this evening). I tried a number of approaches including Javascript for automation (JXA) which was too slow and AppleScript which opens the app to access your reminders so is also slow. I then found reminders-cli which is a command line tool written in Swift.

This tool was as close as I was able to get in terms of accessing reminders but it didn't order them by due date, and didn't allow me to view reminders from all lists, only specific ones. I cloned the repo and starting changing some stuff to do what I wanted; I've never written Swift before, so the code is bad. Really bad. I also modified the date parsing script from alfred-reminders, which uses (an admittedly older version of) Chrono but works for this purpose.

After a bit more wrangling of various things like bash, AppleScript, and Alfred's various features like script filters and workflow variables I was able to get something I'm happy with.

With this workflow you can:

View all upcoming reminders
View upcoming reminders from a specific list
Mark reminders complete
Set a default list for creating reminders (or create for a specific list)
Create new reminders with natural language (e.g. "Lunch with John tomorrow 1pm")

Download Reminders for Alfred.

Monzo Pot Image Generator

2020-07-21T00:00:00Z

While browsing this thread on the Monzo forums I came up with an idea to generate Monzo pot images whenever I want so I created the Monzo Pot Image Generator.

First thing was to work out how to generate and download the images. This turned out to be relatively easy with a combination of dom-to-image and FileSaver. To generate a list of the Font Awesome icons output in the search, I grabbed the JSON config, did a little bit of manipulating in Sublime and used Eleventy's global data files to use that data when building the site.

I wanted to keep everything as simple as possible; no crazy build scripts and as few files as possible. I used Water.css for the base css and the rest of the css is in a style tag in the head (is that legal?). I also learnt that there is a type="color" input - although I might replace this at some point because it's not particularly nice on mobile Safari.

You can also share you pot images with a link like this. I initially used url hashes to keep the url updated all the time, but when sharing these to Twitter they get stripped out so I switched to using query strings instead.

Game FAQs

2020-02-14T00:00:00Z

Before YouTube was the go-to place for game tutorials, GameFAQs was one of the only decent places online to get in-depth guides on how to complete games or get cheat codes. GameFAQs only allowed text posts on the site so people came up with interesting ways to navigate chapters and sections in what feels like a precursor to Markdown.

Every guide would have an ASCII art heading and a table of contents with some unique key so you could use CMD/CTRL+F to find the relevant section. Today I remembered my only contribution to GameFAQs was a Fifa Street PS2 guide. I'm pretty sure a lot of it was just copied from magazines and other websites but I wanted to grab a copy of it just in case it ever removed or GameFAQs shuts down. So if that link doesn't work, I've also uploaded the original text file.

I haven't used GameFAQs in a long time but it's nice to know all those guides are still available.

Image from this GTA III guide I remember using a lot.

Changing Your Name by Deed Poll

2019-09-08T00:00:00Z

I changed my name (and my email) a couple of weeks ago and I have a few thoughts about the process. Most of this should also apply if you've changed your name because of marriage.

Make a List

Before you do anything else, make a list of everywhere you need to change your name, along with the process to do it (letter, email, in branch). If it's a letter or email, I used this to send to each of them:

Please be advised that on {name change date} my name was legally changed from {old name} to {new name}.

My new name should be reflected on my {credit card|account|whatever}, account number {12345}, previously held in the name of {old name}.

I have included a copy of my Deed Poll. If you have further questions, please contact me at {phone number} or {email}.

Sincerely,
{New Name} (previously {Old Name})

You'll also need to sign that letter with your old and new signature. Becuase signatures are proof of...something?

I won't list everywhere I had to change my name, but here's a good list of places to start:

HMRC. You can do this online through the government gateway.
Passport. Again, it can be done online, but you'll need to send your deed poll and another "proof". I used a bank statement in my new name.
Driving Licence. Requires a new application form, order online or pickup in a Post Office.
Bank. Depends on the bank, check their website.
Credit Cards.
Insurance (house, car, phone, etc)
Utilities (water, gas, electric)
Mortgage/Landlord
Electoral Register. You can do this online by registering to vote and it will ask if you've changed your name.
Council Tax
Paypal. They require additional proof including photo ID and a bank statement.

Make Multiple Deed Polls

I used Free UK Deed Poll to make my deed poll, printed on some certificate paper I got on Amazon. This is 100% legal and any company that charges you for a deed poll is just printing a piece of paper for you. I would suggest getting at least four or five deed polls signed (you need two witnesses); I currently have three in the mail and a final one at home which won't be leaving my sight until at least one has been returned.

Do Your Passport or Driving Licence as Soon as Possible

Despite a deed poll being a legal document, there are some places that won't accept that as proof without additional documentation, namely a photo ID of some kind. Getting either your passport or driving licence done quickly will make the process a lot easier. If you don't have either of those, you'll have to argue with them like I did with my mortgage company while I was waiting for my new passport.

Try Live Chat First

A lot of companies have pages explaining how to change your name with them, which is usually something like "Send us a letter in the post with a copy of your deed poll" but if you ask them on live chat, a lot of them will do it without having to send them a physical letter like a caveman.

You Won't Get Confirmation

Of the seven places I've sent letters to, only one of them has actually confirmed that the change has happened, I had to call the others to confirm the change.

Everyone Sucks Except Monzo

I was able to change my name on Monzo within five minutes using the in-app chat. A week later, I'm still waiting for my high street bank to change even though I went in branch to make the change, which they force you to do.

If All Else Fails, Say the Magic Word

I also changed my email at the same time as my name, so I had to go through all my online accounts to change it.

If you find a company who refuses to change your name or email, say the magic word: GDPR. There are multiple companies who won't change your email address at all so it almost always ended in me sending an email something like this:

You have an obligation under GDPR to keep my personal information correct and up to date. If you're unable or unwilling to change my {name|email}, please delete my account as soon as possible.

For the most part, these companies would "suddenly" find a way to change it or, in a few cases, they would delete the account.

Convert a Spotify Account From Facebook to Email Login

2018-03-21T00:00:00Z

This morning I tweeted that there's no way to convert a Spotify account from Facebook login to email and password login. I even spoke to Spotify support who said:

As your account was created via Facebook, it can't be unlinked. Don't worry, we can free up your email address so you can create a new account. Once that's done, we'll transfer all of your tunes and student details across.

I complained about this in one the Slack groups I'm in, and Nathaniel suggested I try doing a "forgot password" to set a password on the account and it worked. After that I was able to disconnect Spotify from the Facebook settings page.

On the Spotify website, log out
Go to the login page and choose "forgot password" and use the email associated with your Facebook account
Reset your password from the email link
Disconnect Spotify in Facebook
Log in with your new password

The above steps that I followed have also been confirmed to work by Wade.

My Home Screen (November 2017)

2018-03-15T15:25:00Z

A lot of things have changed for me since I last shared my Home screen in 2015. Last year I switched to Android, using a Pixel XL as my phone because I had become frustrated with some of the interface changes to iOS. Just under a year later I was as irked with Android as I previously was with iOS, but for different reasons (Seriously Android? No way to choose audio output is ridiculous). I also missed my Apple Watch and I wanted to try out AirPods which, surprising no one, I love.

One of the things I did like about Android is that every app you install doesn't have to be on the Home screen. I got pretty use to this so I now have my most used apps on first screen, everything else in a folder on the second, and I use spotlight to find those apps. This did have its downsides on Android though; some apps I would simply forget to check, or post to, so I've made an effort to put those apps on the Home screen on my iPhone, namely Instagram, Reddit, and Buzzfeed.

Starting with my dock, Overcast and Tweetbot were the apps I missed the most. The plethora of great podcast, and to some extent Twitter, clients on iOS isn't mirrored on Android and Pocketcasts is basically the only decent option. As much as I like Pocketcasts, Overcast works better for the way I like to listen and subscribe to podcasts. I do still have Pocketcasts and Castro installed so I can check out any new features and switch easily if I want to.

Mac counterparts isn't something offered by a lot of Android apps so coming back to iOS I was happy download Fantastical and PCalc although the latter isn't as much a calculator for me as it is a game that can also do calculations.

Before I used Android I was a plug-in-and-sync-from-iTunes person but I signed up for Spotify the day I got my Pixel and I've been using it ever since. I have considered Apple Music but it doesn't integrate with my Amazon Echo so that's a no-go, at least for now.

The rest of the apps are fairly self-explanatory; Amazon, eBay, and my bank's terrible app because I buy a lot of Lego, Google Inbox because email is a necessary evil, and notes because I like the simplicity of it.

Spending a year on Android gave me an appreciation for the things I really like about iOS as well as the areas I hope they improve on in the future like the Home screen layout and notifications.

Notes About Setting up RetroPie

2017-07-04T09:14:00Z

Setting up RetroPie on a Raspberry Pi is fairly easy but I did come up against a couple of issues that I needed to fix. This post is just a collection of quick fixes for those issues.

Remove underscored games when transferring from a Mac

When copying ROMs from a Mac, you may end up with a bunch of files that start with an underscore. To remove them all, run the following:

find /home/pi/RetroPie -name "._*" -exec rm -rf {} \;

[source]

Finding Installed Themes

For the theme I'm using, I wanted to edit the SNES background image to use the non-US SNES (read: the one true SNES). Installed themes are stored in /etc/emulationstation/themes.

Finding decent ROMs

The best site I've found for searching for specific ROMs is Complete ROMS. They don't have everything but the site is clean and easy to find exactly what you're looking for.

Getting Closer to the Perfect TV

2017-05-15T00:00:00Z

In 2015, Pieter Siekerman wrote a blog post describing what the perfect TV should be:

For two years now I’ve closely watched various TV manufacturers trying to find their way in the changing landscape of TV platforms and I just don’t get it.

In September, (and again this week), I ordered the Hisense H43M3000 despite it being a relatively unknown brand in the UK and I was pleasantly surprised at how good it was given the price of ~£300. This is the closest I've come to the perfect TV thus far, but it still has a long way to go based on Peter's list.

First of all and most importantly, it should not be a TV platform.

Unfortunately, it is. It has built-in apps but no app store to download other apps. It's slow to load anything including switching inputs, which is infuriating. The remote is a hot mess of useless buttons including app-specific buttons like Netflix, YouTube and Wuaki which can't be changed to open a different app.

A large number of HDMI ports

The TV has 4 HDMI ports but annoyingly only two of them support UHD/4K/HDR/whatever. I assume this is a cost-saving measure but if they removed the TV tuner or the "common interface" slot, whatever the hell that is, this would cover it. It does have a SCART socket, component, and 3 USB ports but I'd prefer to replace all of those with HDMI if I could. I can rename the inputs though which is the best feature of this TV by a long shot.

The display should be great

The display is so nice I bought another one to replace my aging HDTV from ~5 year ago. Even with non-4K content, everything looks fantastic.

There are a number of other points on Peter's list which I care less about than the ones listed above and there's still a long way to go before I can buy the perfect TV. However, if you're looking for a good value 4K TV this is a pretty good option. Just buy yourself a Fire TV box to go with it so you can avoid thier "smart" software.

Enable HDR with PS4 on Hisense H43M3000

2017-05-05T00:00:00Z

My Hisense TV (H43M3000) recently received an update to support HDR, which is something the PS4 supports for some games. After plugging the console in, the PS4 told me my TV doesn't support HDR but after some playing around with settings and ports I managed to get it to work:

The PS4 must be using either HDMI port 3 or 4
Open the TV settings and go to System then the "HDMI & CEC Function" section
Select "Adjust" on the HDMI 2.0 Format setting and choose "Enhanced Format"

Once I restarted the PS4 and TV, HDR was supported (and looked beautiful in Horizon Zero Dawn) 🎉.

~~nb: I have an original PS4 so I can't confirm if this TV works with 4K on the PS4 Pro.~~

24/01/2018 Update: I now have a PS4 Pro and can confirm it works with 4K as well.

Jekyll Post Archive Grouped by Year

2017-01-12T00:00:00Z


    <!-- Check if the date has been output -->
    {% assign datePrinted = false %}
    <!-- Assign year to something we're not using -->
    {% assign currentYear = 1000 %}
    <!-- Get number of posts -->
    {% assign postCount = archivePosts | size %}
    
    <!-- If no posts, say that -->
    {% if postCount == 0 %}
        <p>No posts yet</p>
    {% endif %}

    <!--  Loop thrugh posts -->
    {% for post in archivePosts %}

        {% assign postYear = post.date | date: "%Y" %}

        <!-- Output posts if this is a new year -->
        {% unless postYear == currentYear %}
            <h2>{{ postYear }}</h2>
        {% endunless %}

        {% assign currentYear = postYear %}

        <!-- Output post -->
        <p>
            {{ post.date | date: "%d/%m" }} - 
            <a href="{{ post.url }}">
                {{ post.title }}
            </a>
        </p>
        
    {% endfor %}

Thoughts on OnePlus 3 and Switching to Android

2016-10-11T00:00:00Z

If you want to hear more about this, or just prefer listening over reading (hi Myke), I spoke about this with John on episode 30 of our podcast, Ruminate. Find it in Overcast, Pocketcasts, or iTunes, or any other podcast app you use.

I wrote about replacing all my apps on Android just under a week ago, but I wanted to lay out some of my thoughts about the OnePlus 3 and Android in general.

Firstly, I've had a few people ask why I switched to Android. There wasn't a single reason but a plethora of little things that started to bug me about iOS. First off, as I discussed here, I'm no longer using iTunes because of how buggy it is when downloading music, as well as it constantly messing up my album artwork. Without iTunes, the only thing locking me into iOS was iMessage and I realised I could live without it. After the "upgrade" to iOS10 a lot of things bugged me about it. In no particular order:

Pressing notifications would sometimes not open the related app, they would just disappear
The feature where it would show Overcast on the lock screen when I plugged my headphones in no longer worked
Because iOS10 splits control center into two panels, whenever I opened it to use something it was inevitably on the wrong panel
No way to clear all notifications from the lock screen without 3D touch (without swiping down notification center which you can only do from the widget lock screen)
Widgets can't be placed wherever I want
Actions on notifications (reply, archive, etc) take twice as many presses to get to as before without 3D touch
Even with rest to unlock enabled, my iPhone still wouldn't always unlock properly, or at all
Fucking iMessage stickers and apps

All of the above made me hate using my phone and on top of all that the way I use my phone has changed significantly in the past year so I decided the best thing for me to do was to switch to Android.

OnePlus 3

I won't be going in depth into the phone but MKBHD reviewed it here. The OnePlus is similar in size to the iPhone 7 plus and after a few days of using it my iPhone 6 felt ridiculously small; turns out Myke was right.

The OnePlus build quality is not quite as nice as an iPhone, which I expected, but it is still a really nice device. The thing I love the most about it is the fingerprint unlock. Not only has it never failed to read my fingerprint but it's also really fast, as you can see in this video.

Dash is OnePlus's quick charging feature that uses their dash charger and cable. I'm able to charge my phone from ~15% to 70% in about 30 minutes, and another 15 to reach the full 100%. Because of this I've started charging my phone in the evening before I go to bed and the battery lasts the entirety of the next day well into the late evening before I need to charge again. It's worth noting that dash charging only works with both the USB plug and the dash cable, so it won't work with third-party USB cables.

OnePlus 3, like the previous models, has an alert slider on the side to switch between silent, priority notifications, and all notifications. This is really useful and not something that appears on a lot of Android phones (although the modes exist as a software feature). By default priority includes alarms, music, messages, and phone calls but any app can be treated as priority in the global notification settings. Coming from an iPhone, it's nice to have a physical switch and as someone who had a lot of old Nokia phones I love having a modern equivalent of profiles. I use silent for when I'm sleeping, priority for when I'm at work, and all for any other time.

The OnePlus runs OxygenOS which is a slightly modified version of stock Android, currently on 6.0 Marshmallow. Although it's frustrating to not have the latest version of Android, I'm pretty happy with it and OnePlus have confirmed they are working on an Android N update which should be out in the next few months.

The camera is no iPhone competitor but the photos it takes are pretty good. I don't take a lot of photos with my phone so this isn't massively important to me, but your mileage may vary.

Lets be honest, it's a slab of glass with some buttons next to it. It's not the world's greatest device but it's nowhere near the worst and for £330, you can't go wrong.

Android

Android is much as you'd expect; it's a mobile operating system that has apps, widgets, notifications, just like iOS. There are, however, some significant differences. Some of them I like, some not so much.

Being able to install an app from the Google Play store from my Mac (and choose which device to install to) is so natural, and works so well, that I'm amazed Apple hasn't implemented this. Opening iTunes seems archaic in comparison. Once I'd downloaded a few apps, I was impressed with Google's ability to suggest apps tailored to my interests, something which Apple have been trying to do for years on the App Store with little success (remember Genius for Apps?).

The home screen(s) is where Android differs significantly; I can put apps wherever I want, and have widgets all over the place. This is the biggest improvement using my phone day-to-day because if I only want four apps on the home screen, they don't have to be right at the top of the screen. The left-most home screen is Google Now which shows weather, news, and a host of other "cards" based on emails and apps I use (for example, it now shows me my eBay saved searches). It's supposed to show me delivery information based on my emails, but this might be disabled for Google Apps accounts so I don't get the benefit of this. I currently have two home screen; one with my most used apps and the Pocketcasts widget, and one with some lesser used apps and the Spotify widget. Apps that aren't on either home screen can be accessed through search or from the app drawer.

Setting default apps is great (I swapped out the default SMS app for Textra) but the best part about setting defaults is opening specific type of links and files in specific apps. For example, all Twitter links open in Fenix and all Reddit links open in Relay. This is so much better than ending up on the mobile Twitter site when I have a perfectly good Twitter client installed. Talking of opening links, Link Bubble is fantastic. When I click a link in Twitter, for example, it shows a floating bubble on my screen which will expand once the page has loaded. Being able to scroll through Twitter, open a bunch of links, and then review them all at once is amazing.

One of the things I thought I'd miss most is sending messages from my Mac through the Messages app. Push Bullet fixes this by allowing me to mirror all notifications to my Mac, send messages, send files between devices, and interact with the notifications just like I can on the phone. It also has a bunch of other really useful features. I was concerned that apps like this might massively affect battery life, but this hasn't been the case.

Something I wasn't able to work out was how to choose where to output audio when I'm connected to a Bluetooth device. On iOS, the "AirPlay" menu serves this function. I looked around for a solution to this but came up short so if anyone knows of an app that might fix this, let me know. Speaking of Bluetooth, unlike iOS, there is no way to see the battery life of Bluetooth devices like headphones. Although not a huge problem, it's frustrating that Android lacks this feature.

On iOS both the banking apps I used, HSBC and Lloyds, allowed me to use TouchID to login. On Android, this isn't the case, despite Android having support for such a system (PayPal use it). This, I assume, is because not all Android phones have fingerprint sensors so there's a smaller market for it. Again, not something I can't deal with, but a pain none the less.

I'd be remiss if I didn't mention the clusterfuck that is Amazon's presence on Android. I wanted to download the Amazon Video app but the Play Store said it wasn't compatible with my device, which seemed odd. When I asked Dan, he informed me I should download it through the normal Amazon app. Except my Amazon app didn't have the option he showed me because I downloaded the Amazon app from the Play Store and not the Amazon Underground app which is a combination of the standard shopping app, plus an app store. To download the Underground app, I had to turn off the security setting to only allow apps from trusted sources. Then, and only then, was I able to download the Amazon Video app from inside that app. What.

I'm pretty happy with using Android. I don't do Real Work™ on my phone and mostly use it for Twitter, phone calls, and buying stuff on Amazon when I'm not at my Mac. Almost any problem or tweak I want to make I can through apps or widgets; Android definitely feels like it's geared more towards power users and people who want to tinker with settings or "fix" things but that's perfect for me.

Finally, because the Apple Watch doesn't work with Android, I'm getting rid of it. As I said on Twitter the only thing I miss is not being able to quickly see the time so I'm currently eyeing up one of these.

Replacing Apps on Android

2016-10-06T00:00:00Z

If you follow me on Twitter, you probably already know I've ditched my iPhone in favour of a OnePlus 3. The biggest hurdle to switching is the apps I used regularly (and some not-so-regularly). After making a list of apps I had installed on my iPhone, I was able to filter it down to just two lists: ones with no equivalent, and ones I needed to find an Android alternative for. The three with no equivalent were:

Apple Store
Blink
Plot

None of these will make a massive difference to my life, but I will definitely miss Blink and Plot. The following apps are ones I need replacements for:

I haven't been able to find anything that is as easy for creating lists as Clear but Google Keep's lists feature does the job reasonably well and also doubles as a good replacement for Apple's notes app.

I switched to Google Inbox prior to buying the OnePlus and it manages to show delivery tracking inline with the email so I decided I didn't need Deliveries anymore. Dan also told me Google Now should tell me about my deliveries based on my email, but I haven't seen that working yet. Google Now also has a reminders feature, which has mostly replaced Due.

The stock Google calendar app and widget replaced Fantastical for what I needed with no problems.

Tweetbot is a solid app and I knew finding a decent alternative would be hard given Twitter's disdain for third party developers. Fenix for Twitter has most of the features I want from a Twitter app, and the design is fantastic.

TV Series, as of right now, seems like a pretty good app although I'll need a few more weeks to know if it works as well as iTV Shows which I was using on iOS. Overcast and Narwhal are both fantastic apps, but also reasonably easy to find quality Android equivalents. I replaced them with Pocketcasts and Relay respectively.

Overall, I'm really pleased so many of the apps I used have Android and iOS versions, because it made switching much easier. And, despite what some in the Apple community have you believe, the Android-only apps that I've tried are really great quality and on par with their iOS equivalents. And someone should show Apple how great installing apps from the Google Play site is, because it's a damn sight easier than opening iTunes.

Amazon Echo Initial Thoughts

2016-09-29T00:00:00Z

I have no self control so I bought an Echo while Amazon were offering £50 off for Prime members last week. Here's a brain dump of my initial thoughts on the device.

Setup

Setup is pretty easy using the Alexa app. The Echo creates it's own wifi network which you need to connect to so you can choose your home wifi network. Once that's done, you can connect services and products like Spotify and Hue lights from within the app, as well as add additional "skills" (Skills are what Amazon call apps for the Echo).

Spotify

Update: As /u/jennorocks pointed out, if you say the word "playlist" when asking for a playlist, it works pretty well.

I linked my Spotify account in the Alexa app and once setup, I was able to do a two things with it: either tell Alexa to play music on Spotify (playlist, artist, album, genre) or start playing through Spotify Connect which sees the Echo as a device from within the Spotify app. Getting Alexa to play one of my saved playlists was difficult as it seems to just search Spotify and play the first search result. For example, I have a playlist called "90s Hits" but it kept playing a similarly named playlist. I don't know if there's some trick to force it play my playlists, but I haven't found it yet.

Bluetooth

The Echo also functions as a bluetooth speaker. Saying "Alexa, pair my device" will turn on the Echo's discovery mode which I could then select from my phone's bluetooth settings. The Echo can then control my phone playback by asking Alexa to play or pause. If my phone is disconnected from the Echo (e.g. if I leave the house), when I come back I can say "Alexa, connect to my phone" and the Echo will reconnect.

Everything else

Alexa understood every command I gave her including when we played around with it in the office and you can see a list of commands you've asked in the Alexa app, which has Google Now-style cards with extra information for some things like traffic, timers, or shopping lists.

I was looking forward to using IFTTT to automate some tasks such as moving my Alexa shopping list items to Todoist but IFTTT doesn't currently support Echo in the UK which is disappointing, but IFTTT say they're working on it. Hopefully this will be fixed soon.

The Alexa app is pretty slow and janky (it's a web app in a wrapper) but it's only used for setup of the device, and adding new skills. You can access the "app" from alexa.amazon.com as well if you prefer to setup from a browser.

I don't currently have any smart home devices so I wasn't able to try these features out, but given how well everything else works I'm sure this will work equally well. The Echo does feel like somewhat of a novelty right now, but it works as a Spotify device, bluetooth speaker, and for timers while I'm cooking so I'm pretty happy with it.

Saving Money on Lego in the UK

2016-03-31T00:00:00Z

Although there always seems to be some great Lego bargains to be had in the US from the likes of Walmart and Target, the UK doesn't really have equivalent stores that do reductions like those stores do. But there are a number of ways to save significant money on Lego in the UK.

Lego VIP Points

Lego's VIP points is a points system where for every £1 you spend (either online or in an official Lego store) you get 1 point. When you have 100 points, you get £5 off a purchase. Usually twice a year (around March and September), Lego run a double points promotion, so for every pound, you get 2 points; these promotions are a good time (if you have the willpower to wait) to order larger, Lego-exclusive sets or place a large order. So depending on how and when you order, you can get 5%-10% back in money off of other purchases. Being a VIP member also allows you early-access to exclusive sets, normally a few weeks early.

Although VIP is an always-on promotion, I personally buy from Lego for two reasons:

A double VIP points promotion is running
When a free gift with a purchase is being offered — if the free gift (normally a polybag) is difficult, or not available, elsewhere they tend to sell for between £10-£15 on eBay. Personally, I would rather buy extra Lego with that money and get the polybag free, rather than spending the money on the polybag on it's own.

Disadvantages:

Delivery times when buying online can be anywhere from a few days to nearly two weeks.
Discounts and sales are few and far between so saving money on a specific set can be difficult

Amazon, CamelCamelCamel and Brickset

A significant portion of the Lego I buy comes from Amazon for one reason: discounts. Lego sets sold by Amazon always become discounted by at least 10%; with non-licensed themes like City or Friends, the discounts can go as high as 30%.

To guarantee I save money on Lego bought from Amazon, I do two things: add all the sets I want to a wish list (so I can manually check the prices every week) and install the CamelCamelCamel Chrome extension. CamelCamelCamel (herein referred to as CCC) is a site that tracks prices on Amazon and can alert you when a product reaches a certain price.

To setup a price watch on Amazon, go to the product page and click the CCC button in the Chrome toolbar. This will show a price history graph for the product, and below that you can set a price that you want to be alerted at. CCC will send you an email when the product is available at that price.

If you use Brickset's wanted sets functionality (read our guide to Brickset here), visit their Amazon shopper page, check the "Sets on my wanted list only" checkbox and Brickset will show you the current Amazon price for sets from your wanted list.

Disadvantages:

Amazon doesn't generally sell the Lego-exclusive sets (although sometimes third-parties sell them but they're usually above retail price)
If you don't subscribe to Amazon Prime, you have to pay postage for orders under £20.

Hot UK Deals and Retailer Promotions

The Hot UK Deals app allows you to setup notifications based on keywords. By setting "Lego" as one of your keywords, any time a deal is posted containing the word Lego, you'll get a notifications.

A lot of the UK supermarkets sell Lego, so when they get reduced, someone always posts it pretty quickly to Hot UK Deals. Something to look out for here is that some of the deals will be store specific so may not be applicable to you. However, when a retailer is doing 3 for 2 on Lego (like Tesco did recently), this can be a great time to save a significant amount of money on sets you want.

Disadvantages:

Notifications can be hit or miss; there are a lot of deals on the Lego video games so those will show up as well.

Flubit

Flubit is a site that tries to get you a better price than Amazon are currently offering. You give them a link to a product on Amazon, and they come back with a better offer. Read their How it Works page to find out more. I've only used Flubit once, but I saved 20% on a set that was full-price on Amazon.

Disadvantages:

Your order could come from any retailer so delivery might not be very quick.

eBay: Sets with no minifigures

If a set you want it out of your price range, you're not interested in the minifigures, or you particularly like a specific vehicle from a set, eBay can be a great place to pick these up. Lots of people buy sets, take out the minifgures, and then sell the sets on their without them. For example, I picked up all these Jurassic World sets with no figures/dinosaurs for £35. Even used for spares, this was a great price. Set up eBay saved searches for what you're looking for, be patient, and you can get some great deals.

Individual Minifigures

There are three places I buy individual minifigures:

The Minifigure Store: Prices are competitive with Bricklink and they run money off promotions through their Twitter account on a regular basis.
Bricklink: Bricklink is best place to pick up spare pieces as well as individual minifigures. If you're buying just one minifigure, the price with postage can be the same as the Minifigure store/eBay, but buying a few at a time can have some good savings. Read our Guide to Bricklink to find out about buying from Bricklink.
eBay: Prices are slightly higher than Bricklink, but most of the times postage is free and just-released minifigures are generally available within a few days.

Disadvantages:

For smaller sets, it can be more economical to just buy the complete set, even if you only want the minifigures

Collectible Series Minifigures

Lego's collectible minifigures are hugely popular but have one large disadvantage: they come in blind bags so unless you can get really good at feeling for a specific one (I'm terrible at it), you can end up with a lot of duplicates.

If you want individual minifigures from a series, see the advice above. But if, like me, you like to collect the whole series, I've found that by watching auctions on eBay, I can pick up a whole series for around £45 (I never pay more than £48), which works out at just under £3 a minifigure. The collectible minifigures are usually priced at £2.50 so this might not seem like a money-saving tip, but if you end up with more than two duplicates when trying to buy the blind bags, then this will save you money.

Miscellaneous

If there is a specific set you're looking for that is recently retired, or isn't discounted in the places listed above, these are the retailers I tend to look at:

I've had some luck checking Tesco's reduced section (assuming your local Tesco sells Lego) where some store-specific reductions can happen on smaller Lego sets and Sainsbury's tend to reduce all their Lego once every 3 months or so as well.

Convert LXF to Bricklink XML

2016-03-22T00:00:00Z

When you've created a model in Lego Digital Designer, you likely want get those parts into a Bricklink wanted list so you can order them. Unfortunately, LDD doesn't have an option to export to the required Bricklink XML format. Thankfully, Rebrickable has the ability to convert an LDD model to Bricklink XML. You'll need a Rebrickable account to do this, so if you haven't got one yet, register for one, and sign in.

Once you're signed in, choose "My Private MOCs" from the account dropdown menu and click "Add New Private MOC", give it a name, and then press "Save Details". Below this you will see a number of import options, but for the purposes of this article, we'll be focusing only on the LXF import. Click " Import from MPD/LDR/LXF file", choose your LXF file from your computer, and press "import".

Rebrickable will then show all the parts from the model and indicate if any colours you've used don't exist. To fix any errornous colours, click on the part and choose a valid colour from the dropdown, and hit "Save". This is also a good time to change the colour of any parts that Rebrickable marks as "rare" — you may want to switch to a more common colour to make it easier to buy.

Once you're happy with your part list, click "Add to your Bricklink Wanted List". A window will popup allowing you to login to Bricklink. You can choose to add them to an existing list, or create a new one from this window. Once you click "Add parts", a message will confirm that the parts have been added, and there will be a button to view your wanted list.

Update: When this post was written, I didn't realise Rebrickable had a feature to automatically add parts to a Bricklink wanted list.

~~Once you're happy with your part list, click "Export to Bricklink (XML)" and your parts list will be downloaded in the correct format to import into Bricklink.~~

If you want to upload the parts list to a specific wanted list on Bricklink, you will need to edit the XML file in a text editor (I recommend Sublime Text). You'll need to add <WANTEDLISTID>12345</WANTEDLISTID> to every part in the XML file, where 12345 refers to your Bricklink wanted list ID.

Once all that is done, you can upload it to Bricklink.

Third Party Apple Watch Bands Review

2015-11-16T00:00:00Z

When I first saw the Hermès Cuff for Apple Watch I thought it looked like a great watch band but also knew that there was no way I was going to pay upwards of a thousand pounds for one. So I kept an eye on eBay, looking for third party manufacturers making similar bands. These became available for purchase about a month after the announcement so I decided to order one. The seller also had some other copies of Apple's bands and I ordered a blue sport band, a black Milanese loop, as well as a pair of black adaptors to better match my space grey sport watch.

Leather Cuff (£20)

eBay link

I haven't seen the Hermès band in real life so I can only compare against photos but this band is more or less identical in design to the Hermès version. But as you might imagine, it feels cheap. The leather is pretty thin, not particularly soft, and it's generally uncomfortable to wear. The buckle feels like a toy from a Christmas cracker. There are some third party version that are around the £100 mark that would likely not have these issues but something I did notice whilst wearing the band, is that because of the way the band is designed my Apple Watch sits significantly higher on my wrist then when I using a sport band. I found this to be annoying and it's possible that the Hermès version has the same problem.

Black Milanese (£20)

eBay link

Apple only makes the Milanese loop milanese loop in one colour, so for someone like me with the space grey watch, my only option for a milanese loop is third party. The band I ordered is comfortable, but it does feel like it costs. There are some more expensive options available but I can't speak for how these compare to this one. The magnet is strong, but the materials used for the band itself just aren't that great and can get uncomfortable with continued use.

Blue Sport Band (£5)

eBay link

After trying the leather cuff and seeing how cheap it felt, I was surprised to find that the sport band from the same seller felt great. The design is identical in every way to the official version and feels more or less the same when wearing it. The only noticeable difference between this one and the Apple version is that Apple's feels a little bit thicker and sturdier. The band doesn't fit quite as snugly is the slots as it's official counterpart, but it's still feels sturdy. It's just as comfy as Apple's and at £5, it's a bargain.

These bands are fine if you want something that's not a sport band and aren't willing to spend out the money for the offical onces but overall, you get what you pay for. I think, as usual, Myke was right. I'm going to stick to sport bands for the forseeable future. They're much more comfortable to wear for an extended period and that's more important to me than anything else.

Game Controller Double Standards

2015-11-11T00:00:00Z

The new Apple TV supports game controllers which is great. What's not so great is the fact that developers can't require them. By not allowing developers to require a game controller, what Apple have done is limited the platform and the games produced for it. I bought a Nimbus controller so I could play games like Rayman Adventures and Asphalt 8 but I only ever use 1 or 2 buttons on the controller in any given game. It's unreasonable to expect developers to have one set of controls for the Siri remote and another for a controller, without changing the game significantly to support this.

Guitar Hero, however, is allowed to require a controller but not a standard MFi controller; Guitar Hero requires a purpose-built controller that presumably won't be able to be used for other games on Apple TV (except more Guitar Hero games). This kind of double standard is frustrating for both developers and owners of the Apple TV and I hope Apple decide to reverse their decision on not requiring game controllers soon.

Tips for Apple TV App Developers

2015-11-09T00:00:00Z

Since the Apple TV got released I have been running Apple TV Apps, a blog and Twitter account showcasing the best Apple TV apps available. With discoverability being sub-par compared to the iOS app store, the site has been moderately successful and I've been contacted by a number of developers with iTunes links to their apps asking me to feature them, but there's a problem. Those links don't go anywhere; no web previews, no way to view these apps in iTunes.

Graham Spencer summed up what is needed from developers really well:

Apple TV developers, please make sure you have a landing page with screenshots, info, price and press kit!

The page doesn't have to be the most beautiful website in the world but the information needs to be available if you expect your app to be featured anywhere. There are a number of options to get a simple website up and running with very little effort.

Free options

Although Wordpress and Tumblr are both blogging platforms, they can be used as landing pages with a little bit of tweaking in the settings.

GitHub Pages - If you know some HTML and CSS, you can get a GitHub pages site up in a matter of minutes.

Paid options

Squarespace - Their cover page starts at just $5 a month and is perfect for an app landing page.
Roll your own - If you're comfortable with setting everything up yourself, you can build and host your own website. Hover is a great option for domains and Digital Ocean offer one-click installs for loads of web applications like Wordpress and Ghost.

Checklist

At a minimum, you should have:

A few screenshots of the various parts of your apps (ideally the same ones featured in the store)
A description of your app (again, the same description as you have in the app store is ideal)
The price — this is a more difficult one because of pricing in different countries, but put the price in at least one currency.

Some other things that will help market your app:

A video of your app. This is useful for helping people decide whether they want to but your app or not.
A press kit. This is normally a zip file which includes all the the above information (screenshots, description, video) as well as your app icon and any other marketing materials you might have.

For an example that fits all of these criteria, check out the landing page for Almost Impossible!.

Until Apple allows web previews for Apple TV apps, your goal should be to replicate all of the information you have in the app store. If you at least some of the above, your app is much more likely to be featured and also it will help customers decide if they want to buy your app.

The Best Apple TV Apps

2015-10-28T00:00:00Z

I've started a new blog to highlight some the best and most interesting Apple TV apps available. If you're interested you can follow @_atvapps on Twitter or check out the blog at http://atvapps.net.

My Home Screen (September 2015)

2015-09-11T00:00:00Z

I like to try and keep all of my apps on one page, hence the large number of folders. In the fight between quick access to apps and tidiness, tidiness always wins. Having said that, I do still like to keep my most used apps one tap away. The empty bottom row is used primarly for apps that I'm trying out which, at the moment, happens to be BuzzFeed News.

Because I only have one screen of apps, my dock is less important than if I had multiple pages. I have always kept phone and Safari in those spots and as I've added more messaging apps (Facebook, Slack, Snapchat) the Messages app has been replaced by a folder to contain them all. Similarly, because I switch between listening to podcasts in Overcast and music, all media-related apps go into the media folder in the dock.

The app I use the most is definitely Tweetbot; I spend a lot of time on Twitter so I need to be able to get to it quickly. I also regulary catch on a number of subreddits and Narwhal is easily the best Reddit client I've found as the official one is far too confusing. Clear and Fantastical are the best apps in their respective categories and I wouldn't even considering removing them from the home screen. Although I don't use it as much as Tweetbot or Narwhal, Plot is a fantastic app for keeping track of movies I want to watch and ones that I have watched.

Simplecast is a saved web site and not a native application, but I like to check up on the download numbers for my podcast so that earns a spot on my home screen. Some of the other apps that are hidden away that I use regularly include Due, a simple but really powerful reminders app, Blink for generating iTunes affiliate links and Deliveries for tracking parcels.

The background is a Star-Lord wallpaper (that I also use on my desktop) and you can download it here.

New Podcast: Ruminate

2015-08-24T00:00:00Z

John Voorhees and I decided to have a go at creating out own podcast. The current description of the show is:

A podcast about the opportunities and challenges that technology presents us with every day

This might change in the future (podcasts are harder than they seem) but for now we'll be talking about how technology helps solve problems, as well as some non-tech related topics like terrible food, and why you would save a pair of shoes for 10 years.

~You can subscribe and listen to the first episode at http://ruminatepodcast.com/1 and follow us ~~on Twitter~~ on Mastodon.

Manage Your LEGO Collection with Brickset

2015-04-16T00:00:00Z

Brickset, as well as being a great source for LEGO news and reviews, is a also an excellent service for keeping a list of all the sets and minifigures that you own. Brickset also has some more advanced features for marking sets that you own without minifigures and custom flags to make managing your collection even easier. Once you've set up your collection, you can also share it publicly if you desire. For example, here is my collection. If you haven't already, signup for a Brickset account.

Sets

There are a number of different ways you can search for sets to add them to your collection: by set number, by set name or by tag. To add a set to your collection, type the set name or number into the search box and once you've found the set you want to add, simply check the "I own" checkbox and it will be added to your collection. A large number of sets on Brickset are also tagged to make searching for a set easier; if you type Emmet into the search box you will see Emmet Brickowski [Tag] as one of the suggestions. Selecting this option will show you all sets that contain an Emmet minifigure. You can then view a list of all the sets you by selecting Sets you own from the My sets menu. You can also set up a wanted list of sets by checking the I want checkbox: your wanted list can be found by selecting Sets you want from the My sets menu.

Once you've added a set, you will also be able to view a list of all the minifigures you own by going to brickset.com/minifigs/mycollection-owned. Brickset will automatically work out which minifigures you have based on the sets you own. However, if you're like me, you may on occasion buy a set without the minifigures and Brickset has a feature to cope with this: flags.

Custom Flags and No Minifigures

Flags are a way for you to add extra metadata to the sets you own. To set up flags, go to brickset.com/mycollection and select Set up flags. Brickset allows you up to four custom flags: I have a Bricklinked flag for noting when I bought the parts of a set from Bricklink, a To build flag to note when I haven't yet opened a set and a Maybe flag to use in conjunction with my wanted list. The blue flag has an extra checkbox to make the flag indicate that you don't own the minifigures for a set. By using this flag, Brickset will not show that you own the minifigures from any set with this flag applied.

Loose Minifigures

If you have purchased a minifigure individually, there are two ways you can add this to your minifigures collection. The first is to find the set the minifigure comes from, select the minifigures tab from the set page, and check the I own checkbox. These will be added to your minifigure collection. The second method is to search by the name of the minifigure: simply change the search dropdown to minifigs. Once you have found the minifigure you want to add to your collection, simple check the I own checkbox.

Custom lists

Once you've set up your collection, you can filter by theme, year and sort it by various different methods (e.g. number of pieces). This is great for sets that are directly linked together by something official like a theme, but if you want to create a custom list of sets, or BrickLists as Brickset calls them, you can. For example, I've made a list of the sets given away with the Daily Mail last year for my own reference. To create a new BrickList, select BrickLists from My Menu and then select Create new BrickList. Give your list a title and description and then you can start adding sets to it. You can choose to make it public or keep it private.

Find out if you own a specific part

As an additional bonus of having catalogued your collection, if you are looking for a specific part, Brickset will tell you which sets that you own contain that part you are looking for. Change the search dropdown to part, find the part you want to find, choose a colour and then select View sets in your collection that contain this part.

Collection Summary

Now you've added all your sets and minifigures, you can view your collection summary by selecting Collection summary from the My Sets menu. This summary will show you, by theme, the total cost of the sets you own, the total numbers of sets in a theme and how many of them you own as well as a number of other data points. Fair warning: if you don't want to know how much you've spent on LEGO, avoid this page.

Simple Git Deploy

2015-03-29T00:00:00Z

This is a simple way to deploy to a remote server, more for my reference than anything else.

Create a new folder on the server and initialise a bare git repository in it.

mkdir /root/repos/project-name
cd /root/repos/project-name
git init --bare

Create a post-receive hook (nano /hooks/post-receive) with this as the contents:

#!/bin/sh
REPO=/root/repos/project-name
TMP_GIT_CLONE=/tmp/project-name
PUBLIC_DIR=/var/www/project-name

git clone $REPO $TMP_GIT_CLONE
cp -rp $TMP_GIT_CLONE/* $PUBLIC_DIR
rm -rf $TMP_GIT_CLONE

Make sure to create the public directory if it doesn't already exist. Then add the remote to your local repo.

git remote add live ssh@server:/root/repos/project-name

Remove Laravel Homestead Environment Variables

2015-03-27T00:00:00Z

When you add environment variables to Laravel homestead, they get added so you can access them within your applications. The problem is, if you delete a varaible from your homestead.yaml file, it doesn't get deleted within Homestead. If you need to remove them, you can delete them from php-fpm.conf located at /etc/php5/fpm/php-fpm.conf.

Stig Quote Generator

2015-03-26T00:00:00Z

This morning, I was watching Top Gear and decided it would be fun to create the Stig quote generator. I grabbed all the "some say" quotes from the Top Gear Wikiquote page and split them into two parts (the "some say" part and the "and that" parts). The generator then grabs two of them at random, one of each type, and joins them together. Example:

Some say that his heart is in upside down, and that if he felt like it he could fire Alan Sugar.

The code is on GitHub if that's your thing.

UltraViolet: Everything is Not Awesome

2015-02-20T00:00:00Z

Joe Steel wrote about digital content following an interview with a Kevin Tsujihara, CEO of Warner Bros. Entertainment:

Incredibly, he highlights that they’re still trying to push hard on UltraViolet. Consumers have roundly rejected this as any kind of solution. Disney, Google, and Apple won’t participate — but sure, let’s prop this sucker up, Weekend at Bernie’s style! It is a farce of a system that has wronged many that dare to use it.

Joe and Dan also spoke about how bad UltraViolet is on this week's Defocused so I thought I would take the oppurtunity to get an UltraViolet copy of The Lego Movie that came with the blu ray I bought. The UltraViolet slip in the blu ray suggests to "instantly stream or download" it takes "3 easy steps".

Go to http://flixter.com/getuv
Enter the code
Follow the instructions

Step one and two went smoothly. The page at stage two noted that the UltraViolet download is for the "cinema version" only although it wasn't clear if the blu ray version was different. I was informed I would have to create two accounts, Flixter and UltraViolet. These are for "storing your film and TV collection in the cloud" and to "stream and download your UltraViolet Digital Collection to your favourite compatible screens" respectively.

Signing up for a Flixter account requires a name, email addrees and date of birth; this data can be used for the UltraViolet account as well, which is convenient. Alternatively, you can login with Facebook which asks for access to your profile, friends list and email address, or Google Plus which requests access to a list of all the people in your circles. To finalise the account(s) creation, the terms and conditions that you must agree to state (emphasis mine):

I accept UltraViolet's Terms of Use and Privacy Policy; agree to allow Flixster to link to my UltraViolet account and allow me to manage it through Flixster; and request that Flixster and Warner Bros. send me offers and make product recommendations and use my UltraViolet account information for such purposes.

On submission an error told me "The UV username is not valid.". I subsequently received an email asking me to confirm my Flixter account. Ignoring the error, I confirmed the account and was prompted to link my UltraViolet account, which I'm pretty sure didn't exist. It didn't."Your connection to UltraViolet needs to be reset. Please click here to resolve this issue." Flixter told me. The same UltraViolet linking page was presented with no way to sign up for a new account so I Googled for the sign up page and filled in the form. Success. Back to Flixter to link my brand new UltraViolet account, which worked this time and then redirected back to Flixter where I can finally view my collection. Of no movies. Nothing there. The code I originally entered hadn't worked so I selected "redeem" from the main menu.

Redemption of a code on Flixter requires searching for the movie in their database rather than just entering the code directly. Then back to the UltraViolet site to enter the code again. After a few minutes of "updating my collection" I finally had the Lego Movie available to watch in my collection.

This whole process took me about 40 minutes for "3 easy steps". Everything is not awesome, Mr. Tsujihara. Not even close.

Fix Gmail SMTP Offline Error in Yosemite Mail

2014-10-17T00:00:00Z

Yosemite Mail will sometimes show Gmail outgoing mail as being offline when you first setup a Gmail account. To fix this open up Mail and do the following steps:

Open preferences and go to Accounts.
Select "Edit SMTP Server List" from the "Outgoing Mail Server Dropdown".
Select "Advanced" and put your account password in the password input.
Voila, all fixed.

For some reason, Mail doesn't always save the password here on setup, so these are steps required to fix it.

Apple Privacy Statement

2014-09-18T00:00:00Z

Apple:

On devices running iOS 8, your personal data such as photos, messages (including attachments), email, contacts, call history, iTunes content, notes, and reminders is placed under the protection of your passcode. Unlike our competitors, Apple cannot bypass your passcode and therefore cannot access this data. So it's not technically feasible for us to respond to government warrants for the extraction of this data from devices in their possession running iOS 8.

This is excellent news.

Relay FM

2014-08-18T00:00:00Z

Myke and Stephen:

Relay FM is our new home on the Internet, and where you can find all of our podcasts. The shows you have known and loved for years are being rebooted as part of the new network. Everything we have done so far in our podcasting careers has led us here, and we're pouring all of our love, knowledge and attention into this thing.

I've already listened to the first episode of Analog(ue) and Inquisitive and, as with everything Myke produces, they are fantastic. I wish him, Stephen and all the other hosts the best of luck.

An Ode to Bionic

2014-07-09T00:00:00Z

Things Are Happening,
Is This The End?,
It's What Panda's Must Feel Like,
All The Time.

Stop Belling Yourself,
What's The Point,
Do You Remember Rogif Moore?,
Too Sad.

World's Latest Podcast,
Our Non-Specific Internet Phone Calls,
To Our Child Bionique,
The Magnificent Meese.

You, I and Our Love Child,
I Put A Bell On The End,
Not Even a Full Ding,
I've Got To Get It All In.

I Want To Sell You Clothes,
Potential, That's What It's Loaded With,
It's A Team Effort, I'd Like to Say,
Tinkerbell Button.

This Show Isn't About Ecosystems,
One Star,
It's Probably Swearing,
Fuck You, Everyone.

They Come In Sets of Two,
Did It Hard and Fast,
World's Greatest Finale,
VLCNR forever.

How to Install iOS8 Beta Without a Developer Account

2014-06-03T00:00:00Z

No no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no.

If you're not a developer, this is not for you. If you do install it, don't go reviewing apps in the App Store because they don't work. Don't complain when shit breaks. Don't moan when the beta expires. Don't be surprised if your phone becomes unusable.

Just don't.

Thoughts on Google Chromecast

2014-03-21T00:00:00Z

The Chromecast got released in the UK on Wednesday and I bought one, in the hopes it will be better than the plethora of other streaming devices I have (Apple TV, Google TV, Xbox 360, PS3). As a side note, the Google TV, specifically this model is the worst peice of equipment I've ever owned.

Setup

The Chromecast is really easy to setup; plug in the dongle into an HDMI port, plug in the power cable (either USB or mains) and turn your TV on. Then go to chromecast.com/setup and follow the instructions. I set it up on my Mac so I can't vouch for the Windows setup, but I think it'd be pretty similar. Download and run the companion Mac app, setup your preferred wifi network, let any Chromecast updates run and you're good to go. None of the setup is done on the Chromecast itself, so there's no bullshit of trying to put in your wifi password with an on screen keyboard.

Apps

Google lists a number of apps on the Chromecast site that have support for the Chromecast but the ones I am most interested in were BBC iPlayer, Netflix, Plex and YouTube.
If you've ever used AirPlay on an iOS device, using Chromecast is just as simple. In any supported app, select the "cast button", choose your Chromecast from the list and the video will start playing through your TV.

YouTube, Netflix and BBC iPlayer were fairly straight forward and worked without a hitch. Plex required me to update the server on my Mac to the latest version (I hadn't updated it for over a year). You can also use the Chromecast within Chrome on the desktop by installing the Chromecast extension.

One of the biggest advantages of Chromecast over AirPlay to an Apple TV is the ability to leave the app your streaming from and do other things. When AirPlaying video, the app your streaming from has to be open the whole time, whereas the Chromecast loads the stream to the device itself, allowing you to check Twitter, Facebook or whatever else you want to do.

If you use any of the apps listed on the Chromecast site on a regular basis, for £30 you really can't go wrong.

New York

2014-01-05T00:00:00Z

I visited my friend over Christmas who is currently working in New York. I had an amazing time and I thought I would recommend some places I visited for anyone who is planning on visiting in the future, as well as to keep a record of what I got up to.

Restaurants

We ate at quite a few restaurants and these three are the ones I would recommend to anyone:

Rogue - Rogue is a sports bar but the food is absolutely fantastic. As long as you can put up with all the sports (I counted seven simultaneous games on one occasion) being shown on their 14+ televisions, it's well worth a visit.
Ruby Tuesday, Times Square - Ruby Tuesday is exactly what you'd expect from an American restaurant; huge portions, lots of meat and amazing buffalo chicken.
Bella Napoli, 7th Avenue - An excellent Italian restaurant, great service and reasonably priced.

Attractions

Ignoring the obvious, well-known attractions such as Times Square and the Empire State Building, the High Line was a personal highlight. The High Line is "a public park built on an historic freight rail line elevated above the streets on Manhattan’s West Side" and definitely makes a nice change of pace from barging past people on the streets. We took a ride on the Circleline Downtown Cruise which gives great views of the Statue of Liberty, the Manhattan skyline as well as Ellis Island and Governor's Island. We also did a helicoptor tour which gave spectacular views, but it is a little on the pricy side (~£100 p/person for 15 minutes). And I turned into a little kid when I visited the Nintendo Store at the Rockefeller Center.

Photos

Ed was kind enough to lend me his Canon 650D to take photos which was an interesting experience. Apparently, a good camera doesn't make you a good photographer. I got used to it after a couple of days and managed to get a few nice photos which I have posted on Exposure.

Create a Table in Markdown with No Headers

2013-11-12T00:00:00Z

Whilst creating a document which requires me to put some data (which isn't in the slightest way tabular data) into a table, I wanted to create the table with no headers. However the way markdown works mean it requires you to set a header for it to create a table in the first place. By using the HTML non-breaking space entity it can be done:

&nbsp; | &nbsp;
------ | -----
Stuff  | More things

Simple.

Parents: Take Some Fucking Responsibility

2013-10-01T00:00:00Z

The Telegraph reported this morning that two six-year-olds racked up a £1000 bill through in app purchases because they knew their parents iTunes password. And of course the parents are placing the blame entirely on the developers of apps that include in-app purchases.

Parental controls

iOS has built in parental controls that allow for restrictions on downloading apps and when a password is required (either every 15 minutes, or always) among other settings. The problem is, there is no mention of these controls in the initial setup process, presumably to keep setup as simple as possible.

Parents may not be aware these settings exist and therefore just assume they can't restrict access to purchases or other features of the operating system. For reference, restrictions are in settings:

settings>general>restrictions

The Blame Game

The parents of the twins claim they knew the password for the account:

...his children knew the password after using the iPad for schoolwork and games.

"Using the iPad for schoolwork"? In what way would that involve needing the password for the iTunes account? So because they couldn't be bothered to check what their children were purchasing, they just gave them the password. Perhaps give them the pin number to your credit card so they can go and do their own shopping? They're six years old.

This is not the first time this has happened. Back in March an eight-year-old spent £980 on The Simpsons: Tapped Out. The parents responded by saying:

I appreciate children are their target audience but it is not right and there needs to be specific controls in place to stop this from happening.

Specific controls? Perhaps like the ones in settings?

In both cases, Apple refunded the money to the parents as a gesture of good will. Jim Darymple nails it in this peice entitled "It's not Apple's Job to be a parent to your kids":

The simple fact is, as parents, it’s up to us to monitor what our kids do with technology or any toy. If you choose not to use the included controls because they are a hassle, then that’s your choice. You made that decision.

Parents: take some fucking responsibility, stop blaming everyone else and use some common sense instead of letting your kids do whatever the hell they want.

Pub Hack #1

2013-09-18T00:00:00Z

The first Pub Hack took place yesterday. Jo and Lillian did an excellent job of organising everything including food, t-shirts, trophies as well as all the other behind-the-scenes stuff that needed doing.

The theme was "post-apocolypse" so pretty much everyone, including our team, took that to mean zombies. We wasted the first hour on an idea that we found had already been done and then got to work on "Has It Blown Over Yet?". Blown Over takes inspiration from UK Snow Map, and Shaun of the Dead, and allows people to report a zombie attack on Twitter (using the hashtag #pompeyzombie) or on the website. And of course it will show you pubs close to your location to wait for this to all blow over.

We only had 10 hours to build it so the Twitter integration is a little bit buggy and the map pins just keep building up forever. But overall I'm really happy with what we built.

There were some excellent entries including "Apocalhipster" which used an iPhone accelarometer and web sockets to control a zombie-shooting hipster, "Last Man Standing" which used the battery level API to allow people to set off alarms on the laptops of those plugged into power and a first-person game set in the Brewhouse & Kitchen, where Pub Hack took place. There was also a similiar entry to ours tracking disasters across the world on a map and a directory of "forts" (read: pubs) in which to stay safe from the apocolypse.

Our team won "Most Likely to Commercially Suceed" which was awesome, Apocalhipster won "Best Design" and the 3D game won overall. It was a really great day and I can't wait for the next one.

Update: Pub Hack on Vimeo

Thoughts on the iPhone 5S and 5C

2013-09-11T00:00:00Z

So Apple had their iPhone event. iPhone 5S. iPhone 5C. Nothing particularly surprising but interesting nonetheless.

iPhone 5S

The same solid design of the iPhone 5 with an improved camera, A7 chip and fingerprint scanner system called Touch ID. Touch ID is the feature I'm most excited about. Not because I find inputting a pin code "cumbersome", as Phil Schiller said, but because I don't have to enter my password for iTunes purchases. And according to Jim Darymple, it works well:

I went through the process of adding my fingerprint to the 5S and then unlocking the phone using the fingerprint. It’s pretty seamless to do, just following the onscreen instructions.

The 5S comes in three colours, including the now-infamous "gold". From what I've seen of it, this isn't some flashy over-the-top monstrosity but a more subtle gold finish. I still won't be buying a gold one though.

The camera has a lot of improvements including video recording at 120fps, a new burst mode for capturing action shots and a dual LED flash to "light your subject perfectly".

iPhone 5C

The 5C is more or less an iPhone 5, with a slightly bigger battery and plastic back. It comes in five colours and you can get a hideous case for it, if you so choose.

The interesting part about this model is it's not "cheap" per se. Yes, it £80 cheaper than the 5S but that's still not what I would call cheap. But it's cheap enough that it'll likely be free on most contracts in the UK.

Taking a quick look around some carriers websites today, I can't seem to find a mention of the 5S, but the 5C is on all the home pages. It seems to me that this is the phone they're going to be trying to sell over the 5S for obvious reasons.

iWork, iMovie and iPhoto

From now on, when you buy a new iPhone or iPad, you're going to get the complete iOS iWork suite, as well as iMovie and iPhoto, for free. This is a great move by Apple and I wouldn't be surprised if the same deal was announced for iWork for Mac when Mavericks is released.

Release dates

Pre orders for the 5C and 5S open on Friday. iOS7 will be released the the public on 18th September, two days before the new iPhones.

You can watch the announcement here.

JustDelete.me: One Million Page Views

2013-08-29T07:04:00Z

When I wrote this post about justdelete.me I assumed that would pretty much be the best I could hope for in terms of traffic. 3000 visitors in 24 hours was an amazing response to get.The last few days? We’ve been doing that in half an hour.

News coverage

The coverage in the news has been insane. We were picked up by Minimal Mac on Monday and the traffic stayed pretty steady for the next couple of days. Then we were featured in WIRED which skyrocketed traffic. From there, many of the other tech blogs picked up the story and we ended up at number one on Hacker News, trending on GitHub, number one on Pinboard popular and Christina Warren was interviewed about the site on Varney and Co on Fox Business. Other sites that picked it up include TechCrunch, Mashable and Gigaom. I was also interviewed for The Tech Tailor podcast. All of the links I have found about the site are on Pinboard tagged as justdeleteme.

Hosting

I’ve got a little confession to make. I’ve never had more than 10 visitors on my site at the same time (except that one time Panic linked to me and the site died immediately). My hosting was costing me $1.50 a month. The server held up until around Thursday night when CPU usage was at 100%. Ed, Mike and myself all jumped on a Skype call to work out what to do. Stupidly, I hadn’t even made the site static (thinking that hardly anyone would be interested) so we immediately converted it to static. We then cloned the site to MediaTemple, changed the name servers and waited. It took about 2 days for it to fully transfer over but the majority of traffic was going to MT which has held up really well. Since we moved the site, we’ve used over 80gb of bandwidth even though the site is only around 200kb.

Contributors and Future plans

We’re going to continue adding services from pull requests (We’ve done 130 from 61 different contributors so far) and I will open email submission again soon. We now have over 180 services listed (the current count is shown in the console on page load if you’re interested) which I’m sure will expand in the coming weeks. In terms of making some money to cover hosting and analytics costs we’re going to see how the traffic is in a week or two when the frenzy has died down and make a decision then.

Terms of Service; Didn’t Read are looking at integrating our data with theirs to keep as much information up to date as possible. The JustDelete.me Chrome Extension is receiving some great feedback and Mike is currently considering creating versions for Firefox and Safari.

Statistics

We have been tracking visitor numbers with GoSquared. GoSquared are a real-time analytics company and they have been awesome in terms of supporting us and helping with upgrades. I can’t recommended, and thank, them enough. The top sources of traffic for the last 10 days are:

We’ve had visitors from at least 150 countries with United States, Germany and Italy making up the top three. Here’s a chart showing the last 10 day’s visitors, uniques and page views:

Some other random snippets of information about the site:

Over 13k likes on Facebook.
The most used browser was Chrome.
There have been over 6500 tweets about the site.
The most used operating system was Windows 7.
Half a million pages views were served on Monday and Tuesday alone.
The average time spent on the site is around four minutes.
The most used monitor size was 1366 x 768.
Someone made a copy of the site trying to cash in on the press attention. As soon as we created an official Twitter account, he stopped getting mentioned. BOOM.
The highest amount of people on the site at one time was 1842, on Tuesday.
The Twitter account has more followers than me and Ed combined.

24 Hours of Just Delete Me

2013-08-20T12:49:00Z

“I’m sure I’ll get a couple of hundred visitors”. That’s what I was thinking yesterday when I launched justdelete.me. I wasn’t completely wrong.

The response to justdelete.me has been incredible. In just 24 hours it was linked to by Minimal Mac (swoon!), tweeted and retweeted by hundreds of people and had over 3000 visitors.

Since launch five additional services have been added: Reddit, Lovefilm, MySpace, Amazon and Klout. To add Klout, I had to sign up for it to immediately delete my account. I saw things. Crazy, strange things. How’s that for dedication?

Other stats of note:

Visitors from over 70 different countries
Around 30% of people were using Chrome
Someone from Apple visited
The top three operating systems were OS X 10.8, iOS 6.1 and Windows 7

Also Ed, who designed the site, isn’t getting anywhere near enough credit for the project so go visit his portfolio.

Just Delete Me

2013-08-19T07:00:00Z

After seeing a few tweets about how difficult it can be to delete your Skype account and then hearing that Netflix flat-out won’t delete your details I decided to build JustDelete.me.

JustDelete.Me is a directory of urls to delete your account from web services. (Yes, I am aware how terrible that description is. If you’ve got a better one, let me know). Services are marked either easy, medium or hard depending on how difficult it is to delete that account. Those marked as hard have additional information on how to completely remove your account, such as Skype which requires you to contact customer services to do so.

A lot of inspiration for the site came from Steve Streza’s DevCenter.me and the search functionality is modified from the repository. I thought about just forking the repo and modifying it but the sites are different enough to warrant the time to build it myself. Also, where would have been the fun in that? Ed Poole did a great on job on taking the initial concept and making it look a hell of a lot nicer than what I "designed".

At present there are 16 services listed. If you want to add a new service, drop me an email and let me know. Alternatively, fork the repo on GitHub, add the site to the json file and submit a pull request.

Update: 24 Hours of Just Delete Me

How PF Meet Helped Me Get a Placement

2013-08-16T15:03:00Z

I wrote a post over on the PF Meet blog about how the event helped me get an industrial placement. Worth a read if you're going to be applying for placements or wondering about the benefits of events like PF Meet.

Lego Back to The Future Set Review

2013-08-12T09:00:00Z

I love Back to The Future. I even have a DeLorean tattoo. Back in December of last year, Lego announced that that they were going to be making a Back to The Future themed set. On Saturday my Back to The Future Lego set arrived and I opened it like a kid on Christmas morning.

The set has 401 pieces, plus the usual random selection of spares, and a huge instruction manual. A majority of the manual is to construct the DeLorean from the first film with the last few pages showing the modifications needed to make the other two versions. You get both the “OUTATIME” licence plate as well as the barcode one from the future.

The flux capacitor custom brick is great and the time circuit states the destination time, rather than 1955, as 1958 which is the year the first Lego brick was introduced. The gull-wing doors are particularly fun to use, despite not having actual windows in them. They can be a little fragile and tend to fall off if I try and move the set whilst holding them.

The Marty and Doc minifigures have double-sided faces (happy and shocked) and Doc has a double sided body; one side is his lab coat and one is a radiation suit. The figures are slightly too big to fit comfortably into the car, making it somewhat frustrating to close the doors. Although the finished product doesn’t look exactly like the films, it’s pretty close considering it’s made of Lego and if you’re a fan of Back to The Future, you’re going to want this set. I got mine from the Lego online store but it’s available pretty much anywhere Lego sets are sold.

Instapaper Beta

2013-08-10T00:00:00Z

Instapaper, having been sold to Betaworks in April, has a shiny new beta for the web interface which is long overdue. Not that the site wasn’t usable, but it was starting to feel very dated when compared to the likes of Pocket. Despite this I had stuck with Instapaper as it had the one thing Pocket still doesn’t have: a way for me to pay them for the service, but that’s a topic for another day.

The new interface is a complete overhaul of the old site and looks great. There are a number of things that could do with improvement (too much whitespace, not great on smaller screens) but it’s still in beta so I’m sure things will get better before the public release.

It’s nice, for once, to see something be sold and not just left to fade into internet history. Although it was fairly certain this wouldn’t happen based on what Marco Arment said in this announcement of the sale:

We’ve structured the deal with Instapaper’s health and longevity as the top priority, with incentives to keep it going well into the future.

On top of the web beta, Betaworks said in a blog post that there will be “..new versions of the Instapaper iOS and Android apps”. This is an exciting time for Instapaper users and the future looks great for the service.

Automatically Rename TV Shows with Hazel and TVNamer

2013-08-08T00:00:00Z

I download a lot of TV shows (all legal of course) and have been renaming the files using TVRenamer. After using TVRenamer manually for months I got fed up with having to do it, or the much more likely scenario happened where I would just leave them to build up in my downloads folder. I recently started using Hazel to automatically rename and organise my photos. This works well because Hazel simply changes the filename to the date they were taken. TV shows are a little more complex than that as they have season and episode numbers as well as titles. Enter TVNamer.

TVNamer is a command line utility that takes a TV episode with an ugly filename (show.name.3x20.720[HD].avi) and changes it to something much more readable (ShowName S03E20 - Episode Title.avi). To install TVNamer follow the simple instructions in the readme, it only takes a couple of minutes. Once it’s installed to can use it by simple typing:

tvnamer filename

TVNamer will then parse the file, look for episode information and, if it finds more than one result, will prompt you to choose the correct one and confirm the rename. When I tested this the correct result was always the first one which makes using Hazel to automate the process much easier.

If you’re not familiar with Hazel, it’s a preference pane for Mac that monitors folders and matches files based on rules much like iTunes smart playlists. You can then set actions to perform when your rules are matched such as move files, rename them or run shell scripts.

To setup automatic renaming, open Hazel, select the folder where your TV shows download to, then add a new rule. Obviously rules will entirely depend on the type of files you choose to download but personally I set Hazel to find any files that have the extension mkv, avi or mp4. Then choose to run a shell script on the matched files and choose “embedded script”.

Select edit script and paste in the following:

/usr/local/bin/tvnamer --batch "$1"

The –batch option tells TVNamer to automatically choose the first result and rename it and the $1 refers to the matched file Hazel found. To test your rule is working select the cog dropdown in the main Hazel screen and select "Run rules now". Any files that match your Hazel rule should be renamed.

Initially I found that Hazel can sometimes have issues with running TVNamer if you’re matching files within subdirectories of your downloads folder. To remedy this I have Hazel move matched files to another folder and rename them from there. Refer to this Tuts+ guide to find out how to use Hazel to move files automatically.

Hold Alt When Resizing to Center Windows on OS X

2013-03-20T00:00:00Z

Spotted this tip on Twitter (I can't remember/find who tweeted it, sorry!) and it blew my mind. When resizing a window in OS X, hold down alt. The window will stay centered on the screen. Amazing.

70Decibels and 5by5

2013-03-14T10:11:46Z

70Decibels is merging with 5by5 which is great news for everyone involved, including listeners. Myke has worked incredibly hard to get 70Decibels to where it is today, starting with The Bro Show and expanding to the packed list of shows now:

70Decibels is nearly 18 months old. It's amazing what has happened in that time and we all know that we owe it all to you, the listeners. Without you tuning in every week, getting involved, asking questions, promoting us and letting us know when we fall short, we wouldn't be here. I just want to thank you all from the bottom of my heart for everything you've done to get us to this point. All of us at the network cannot wait to share what comes next. Thank you all so much.

I'm not only a fan of 70Decibels and 5by5 but also, I'm glad to say, Myke's friend. I couldn't be happier for him and this merger is one step closer to him going full time as a podcaster extraordinaire. Myke and Dan announced and talked at length about the merger, as well as podcasting in general on CMD+Space 033.

Google Reader and Alternatives

2013-03-14T10:11:45Z

Google have announced that they're shutting down Google Reader come July 1st:

We launched Google Reader in 2005 in an effort to make it easy for people to discover and keep tabs on their favorite websites. While the product has a loyal following, over the years usage has declined. So, on July 1, 2013, we will retire Google Reader. Users and developers interested in RSS alternatives can export their data, including their subscriptions, with Google Takeout over the course of the next four months

They call it usage decline but it's more likely that most users are simply using it as a sync engine to access their feeds through apps like Reeder. Whatever the reasons, this leaves many of us at a dead end in terms of reading RSS. You can of course export your data and Dave Caolo has outlined the process on 52Tiger. Other have mentioned using services like Flipboard or Pulse but I've always found these apps to be a little bloated and they don't really fit with how I like to consume news. The only viable alternative as of right now is Fever. Fever is a self-hosted aggregator and is supported on iOS by the aforementioned Reeder as well as Sunstroke. Of course, being self-hosted means you're going to have to have somewhere to install it and at least some knowledge of server-side tech. MacStories have got a great tutorial to get you started. There is hope, however, in the form of Feed Wrangler a project by David Smith:

This project is already well along in development, with a working web interface and native apps. I was expecting to launch early this summer but Google has announced that they are closing down Reader July 1. That accelerates my plans and I am now working to get ready for public consumption as soon as possible.

Between Fever, Feed Wrangler as well as projects that haven't been announced yet June might not be so bad for RSS after all.

DIY Game Controller Rack

2013-03-11T10:00:00Z

Two Playstation 2, two GameCube, four N64, two Xbox, four Wii, two Guitar Hero. You get the idea, I have lots of controllers. So does Matt Gemmell. And I'm sure, so do a lot of other people. My solution for organising them is a fairly simple one, but I haven't seen it documented elsewhere on the web. So here it is.

I had an old DVD rack not being used for anything so I figured using that would be a good start (and avoid any cost to me). I purchased some blank DVD cases and popped them in every forth slot. This gave me enough spaces to house all of my controllers as well as a couple of spaces for Wii Nunchucks. I also left a larger space at the bottom for those damn Wii wheels and a mug which holds all of my controller extension cables, extra memory cards for the PS2 and GameCube.

For the Guitar Hero controllers, I put some screws in each side of the rack (measuring the width before, of course) and wrapped them in Cellotape although electrical tape, which I didn't have, would have been better. The Guitars slot nicely into these and hang out the way. I also stuck one screw in the front of the rack for the Wii Zapper.

And that's all there is to it.

I am a Tool

2013-03-05T17:46:00Z

As many of you noticed, moments ago my timeline (and yours) was filled with tweets from every single blog post I've ever written. I apologise, I am a tool. Pro tip: Import posts before setting up Wordpress to Twitter.

The Difference Between Fact and Trivia

2013-02-27T13:11:00Z

This morning I took a practice exam for one of the web units I’m studying. Most of the questions were fairly easy but one of them in particular annoyed me. The question was:

“PageRank is so named because it was created by Larry Page, not because it ranks pages”

I incorrectly marked this as false. When I asked how much trivia we would be asked in the exam, my lecturer told me (quite agressively) that the question is not trivia but a fact that is useful to know. I argued the counterpoint, saying a fact is something useful to developing my understanding of a specific topic or technology, in this case, PageRank. She disagreed.

Here is a quote from an archived version of a Google Fun Facts Page:

The basis of Google’s search technology is called PageRank™, and assigns an “importance” value to each page on the web and gives it a rank to determine how useful it is. However, that’s not why it’s called PageRank. It’s actually named after Google co-founder Larry Page.

The first part of that statement is the fact. The last sentence is trivia. It holds no bearing on my understanding of PageRank. Should we really be tested on trivial facts about Google, or any other company for that matter? In my opinion, no.

Rant over.