Something that should have been obvious with adding tags but I didn’t think of until after the fact: There is now a tag page showing all the tags used on the website, ordered from most ot least used. I also added some more tags and went back and retagged a lot of posts.
After a year I have finally added a functioning tagging system. I had been tagging posts already but they were pretty much non-functional, just sitting at the bottom looking pretty. Now every post has some category icons under it. Mouseover each for titles if it’s unclear what they’re meant to be. As well as posts the tag pages include reviews and gallery exhibits.
When I post reviews to my blog I include a star rating in the title with star characters like this: ★★★☆☆
I want this not to be a mess for screen readers so I decided to wrap them in spans with ARIA labels like this: <span aria-label="3 stars">★★★☆☆</span>
But trying to look more into accessibility I am finding people saying that aria-label should only be used on interactive elements or elements with a specific role assigned and not general text but then I am not sure what alternative to use here to make this work better. Does anyone have any specific suggestions for what to do here or good general guides on accessibility to read?
Also is there any practises over labelling things that are correct names but that screen readers are probably going to struggle with. E.g. the new Gundam show is officially called “Mobile Suit Gundam GQuuuuuuX” which I understand is meant to be pronounced something like “G-Quacks” or labelling “Kevin Can F**k Himself” to be clearly pronounced without the censoring.
Another weird question I’ve thought of: Does having a span in the middle of a word (e.g. if yo were doing some decorative text on just part of a word for whatever reason) fuck up accessibility? Or even bolding or italicising parts of words? Like if I write unimportant to indicate I am emphasising that part of the word?
I have done some tweaks to fonts on the site. In particular I optimised the fonts I use for headings on the homepage using the pyftsubset command in Font Tools to consist only of the characters needed to display the text used on the site and no more. This should reduce the download footprint of the site a bit.
I don’t remember who I saw link to pyftsubset originally so can’t give credit for where I saw it, unfortunately.
The story so far: I was using Cusdis to provide a comments section for the bog but it proved to be broken and unmaintained so I replaced it with a self-hosted instance of Comentario.
I am going to walk through what I did to set up Comentario and import old comments from Cusdis. This is not a guide and the scripts that are posted below have serious problems that should be fixed before being used and I am not going to be the one to do that and you would obviously need to change any references to oakreef.ie to your own site.
First of all I needed to have an address to host the Comentario instance at. I chose a new subdomain at comments.oakreef.ie and had to update my Let’s Encrypt certificates to cover that new subdomain. I did not save the commands I used to do that but it was pretty straightforward to do from the command line.
Then I installed Docker on my server and following Damien’s example with a few tweaks I created my docker-compose.yml and secrets.yaml files.
version: '3'
services:
db:
image: postgres:17-alpine
environment:
POSTGRES_DB: comentario
POSTGRES_USER: {INSERT POSTGRES USERNAME HERE}
POSTGRES_PASSWORD: {INSERT POSTGRES PASSWORD HERE}
ports:
- "127.0.0.1:5432:5432"
app:
restart: unless-stopped
image: registry.gitlab.com/comentario/comentario
environment:
BASE_URL: https://comments.oakreef.ie/
SECRETS_FILE: "/secrets.yaml"
ports:
- "5050:80"
volumes:
- ./secrets.yaml:/secrets.yaml:ro
postgres:
host: db
port: 5432
database: comentario
username: {INSERT POSTGRES USERNAME HERE}
password: {INSERT POSTGRES PASSWORD HERE}
Changing the ports configuration to 127.0.0.1:5432:5432 means that the Postgres database is only accessible from the server locally and not publicly available. I also don’t have an email setup for the Comentario instance currently.
Launching the instance is then just a matter of:
sudo docker compose -f docker-compose.yml up -d
Then I needed to modify my Nginx config to direct comments.oakreef.ie to the Comentario instance running on port 5050.
server {
server_name comments.oakreef.ie;
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/oakreef.ie/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/oakreef.ie/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
location / {
proxy_pass http://127.0.0.1:5050;
proxy_redirect off;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $server_name;
proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;
add_header Cache-Control "private";
}
}
Once there were a few comments on the new system I used the export feature in Comentario to get a JSON file and looked at how Comentario defined comment data in that. I also manually went through all the comments on the old system and made a basic CSV file of all of them with the author name, date posted, the URL of the post the comment was on and the text of each comment. I then wrote this Python file to take the exported Comentario comments—named basedata.json—and the CSV with the old Cusdis comments—comments.csv—and exported a new file with the combined data in the Comentario format.
There are some problems with this!
import csv
import json
from datetime import datetime, timezone
from dateutil.parser import parse
from pprint import pprint
from uuid import uuid4
now = datetime.now()
pages = {}
site_url = 'https://oakreef.ie'
date_format = "%Y-%m-%dT%H:%M:%SZ"
my_id = "ADMIN USER UUID"
with open('comments.csv', newline='') as csv_file:
csv_reader = csv.reader(csv_file, delimiter=',', quotechar='"')
for row in csv_reader:
author, date, url, text = row
date = parse(date)
if url not in pages:
pages[url] = {
'comments': []
}
pages[url]['comments'].append({
'author': author,
'date': date,
'text': text
})
with open('basedata.json') as json_file:
data = json.load(json_file)
domainId = data['pages'][0]['domainId']
for url, page in pages.items():
page_id = str(uuid4())
data['pages'].append({
'createdTime': now.strftime(date_format),
'domainId': domainId,
'id': page_id,
'isReadonly': False,
'path': url,
})
for comment in page['comments']:
comment_id = str(uuid4())
data['comments'].append({
"authorCountry": "IE",
'authorName': comment['author'],
'createdTime': comment['date'].strftime(date_format),
"deletedTime": "0001-01-01T00:00:00.000Z",
"editedTime": "0001-01-01T00:00:00.000Z",
"html": f"\u003cp\u003e{comment['text']}\u003c/p\u003e\n",
'id': comment_id,
'isApproved': True,
'isDeleted': False,
'isPending': False,
'isSticky': False,
'markdown': comment['text'],
"moderatedTime": comment['date'].strftime(date_format),
'pageId': page_id,
'score': 0,
'url': f'{site_url}{url}#comentario-{comment_id}',
'userCreated': '00000000-0000-0000-0000-000000000000',
"userModerated": my_id
})
with open('import.json', 'w') as import_file:
json.dump(data, import_file)
When that was done I put it away for a while as I wasn’t feeling well and eventually came back to do replies. I, again, manually went through all replies I had made to comments on the old system and made a CSV file with the reply date, URL of the page, the UUID of the parent comment as it existed in the new Comentario system, the UUID of the page the parent comment is on in teh new Comentario system and the text of the reply.
Two things are important to note about this:
import csv
import json
from datetime import datetime, timezone
from dateutil.parser import parse
from pprint import pprint
from uuid import uuid4
now = datetime.now()
site_url = 'https://oakreef.ie'
date_format = "%Y-%m-%dT%H:%M:%SZ"
my_id = "ADMIN USER UUID"
data = {
"version": 3,
"comments": [],
}
with open('replies.csv', newline='') as csv_file:
csv_reader = csv.reader(csv_file, delimiter=',', quotechar='"')
for row in csv_reader:
date, url, parent_id, page_id, text = row
date = parse(date)
comment_id = str(uuid4())
data['comments'].append({
"authorCountry": "IE",
"createdTime": date.strftime(date_format),
"deletedTime": "0001-01-01T00:00:00.000Z",
"editedTime": "0001-01-01T00:00:00.000Z",
"html": f"\u003cp\u003e{text}\u003c/p\u003e\n",
"id": comment_id,
"isApproved": True,
"isDeleted": False,
"isPending": False,
"isSticky": False,
"markdown": text,
"moderatedTime": date.strftime(date_format),
"pageId": page_id,
"parentId": parent_id,
"score": 0,
"url": f'{site_url}{url}#comentario-{comment_id}',
"userCreated": my_id,
"userModerated": my_id
})
with open('reply-import.json', 'w') as import_file:
json.dump(data, import_file)
One last thing is that Comentario doesn’t allow GIF avatars, but I like my sparkly Jupiter. After looking at the Postgres database I could see that user avatars are simply stored as binary data in the table cm_user_avatars with three sizes avatar_l, avatar_m and avatar_s corresponding to 128×128, 32×32 and 16×16 pixels, respectively, so I made some GIFs in the appropriate sizes, converted them to binary strings, and overrode the avatar_l and avatar_m entries in the cm_user_avatars table manually (I left the avatar_s as a JPEG).
UPDATE cm_user_avatars SET avatar_m = '\xBINARY_DATA_HERE' WHERE user_id = 'UUID_HERE';
This seems to work without any problems and my avatar in my own comments section is sparkly now.
That’s it I hope I don’t have to worry too much about this setup again for some time.
I have finally set up a replacement for Cusdis. Following Damien’s example I have set up a self-hosted instance of Comentario.
You can comment with or without setting up an account. If you create an account please don’t forget your password because I do not have an email account set up for it to send out password resets but also please don’t reuse a password because you should not trust me with that.
I will try to transfer old comments from Cusdis over but that won’t happen immediately.
I have also set up a page that has all my bog posts without the stuff syndicated from other sites mirroring the existing Atom feed that does that.
Small little bit of Javascript added to the site for navigation with Vim-style keyboard shortcuts. Ctrl+→ and Ctrl+← will navigate to the previous and next post, respectively. This will work on both pages for individual posts and on main bog page and also on pages for podcast episodes and gallery exhibits.
Cusdis appears to not be refreshing my monthly comment allowance so I am not able to approve any new comments. I reported this issue a week ago but I think that the developer is not currently working on the project. I may look into getting up a self-hosted version set up and migrating all existing comments to it but I am not sure when I’ll be able to get that done.
I made some updates to the site yesterday, including a smaller feed at /beag.atom1 that only includes posts I write for this site itself, not the ones copied from my Letterboxd, Serializd, Backloggd or Fediverse accounts or things that I repost. Update: It will still include reposts.
I also added some art to the Transy page by Kate Barrett that I had forgotten to.
Otherwise it was mostly some layout and styling tweaks and fixes. Text in dark mode should be a bit brighter now, there’s custom text selection colours and on the homepage there’s one new 88×31 pixel button and an infobox telling you to install an adblocker if you don’t have one.
Beag is Irish for “small”. ↩
Vols.: I, II, III, IV, V, VI, VII, VIII, IX, X
Doing another one of these. I still intend on doing rebogs as well and I’ve added some more styling to make reposts stand out from my own words and make a more clear divide between them.
Devereaux digs into the origin of the phrase “bread and circuses”.
So the surface reading seems clear: he is putting the Roman people on blast for letting their authority over public affairs be taken away, usurped by emperors who promise them bread and circuses (we’ll come to if this is an accurate representation of the history in a moment). They used to have all of this power, the power to bestow offices and armies, but now they cower fecklessly in the wake of imperial slaughter and arbitrary rule.
Except, of course – wait a minute – isn’t the theme of this passage that power is an unwise thing to ask for? The theme of the whole poem is that you shouldn’t be asking the gods for these sorts of things!
Also from Devereaux.
Instead, where real armors evolve against threats, fictional armors evolve as a visual language, borrowing the design elements of other fictional armors far more often than they dip into their own historical exemplars, with the result that the whole thing sort of devours itself.
Fiction referencing exclusively other works for fiction rather than looking to the world is something I think about as well from time to time.
Goldwag reviews a book from the man who coined the word “robot”.
The novel starts with Captain van Toch, a Czech sea-captain in the service of a Dutch trading company, stumbling upon an isolated community of giant amphibians in the Dutch East Indies, living on a single tiny island, their numbers culled constantly by sharks. Van Toch realizes that they’re trainable, and extremely intelligent, and has the idea to plant colonies of them across the Pacific to work as pearl divers. After his death, the Pacific Export Company transitions from luxury goods to mass labor, selling newts across the world as an undersea work force capable of hydraulic and maritime engineering, which results in Newts settling most of the world’s coastlines and becoming an integral part of the global economy. “So now we find the salamanders on the road to their finest flowering; but the human world, too, is enjoying unprecedented prosperity. New continental coasts are being feverishly constructed, new dry land is emerging from where shallows used to be; artificial air support islands are springing up in the middle of the ocean.” (Newts, pg. 165). For all the absurdity, however, Čapek treats his topic seriously. We’re given footnotes, citations, discussions of legal dilemmas and cultural disputes, discourse on the economic impact of newt labor and how it affected different nations and groups, taxonomies on newt evolution and biology. It doesn’t feel like a cheap trick or a gimmick because it’s all done with such care.
In short, to acknowledge transmasculinity, a society would have to first admit that manhood—just like womanhood—is a social class and not a ‘natural’ category. Its people would have to acknowledge that the desire for independence and self-actualization exists within all of us and is not, in fact, stored in the balls.
Thorn outlines very well the fundamental ideological problems in the N.H.S. and how trans healthcare is handled that I think apply very well to the H.S.E. here in Ireland as well.
There are even more serious charges. The coroners’ reports into the deaths of Sophie Williams and Alice Litman said lack of gender affirming care contributed to their deaths. That is to say, it is a matter of publicly recorded fact that the NHS’ failure to provide gender affirming care has contributed to the deaths of patients. Nobody at NHS England has resigned or faced consequences.
Of course panic, misinformation, and mistrust take hold in these conditions! Of course people come to believe the NHS are making secret plots behind closed doors! These conditions are entirely of the NHS’ own making. Slapping a famous trans person’s face on a new outreach program does nothing to address them. As I told Colonel Korn, if the NHS wants to increase trust they should start by apologising.
But the Colonel expressed his bind to me the same way every other NHS senior official I’ve spoken to has. The Department of Health and Social Care tells the NHS how they have to spend their money. The mandate they get from the Health Secretary tells them what services they have to commission: if it says “Ten more transplant wards,” they need ten more transplant wards, and that’s that. If it says “Spend £90m pathologizing trans people,” that’s what he has to do.
This point bears underlining: every single person I have spoken to in the NHS- from local GPs to the National bosses- told me they are powerless. There is nobody at any level of the organisation who takes responsibility for the state the service is in and the suffering it is causing. Every single person blames the person above them, even the man at the top.
Followup from the first of these posts.
In my last post, I succesfully made a bluetooth/wifi Magic Wand Plus. Unfortunately, though, I completely bypassed the original Hitachi board, which happens to be where all the buttons and LEDs are attached, so it was only usable remotely. To make the physical controls work again, I could either make my own copy of the Hitachi’s board, with buttons and LEDs in the same places, or somehow reprogram the original board and make it do my bidding.
The first option requires a lot of measuring, which I find really annoying to do. So, let’s hack the Hitachi’s microcontroller!
I love economic forces.
MongoDB’s popularity among managers during its peak was largely down to the idea that you no longer needed a database expert. Just throw the data into the document DB puddle and let your existing less-specialised developers handle it. The promise of the document database during the peak of their hype was that you didn’t need to employ as many specialists.
Electron, PhoneGap, and React Native promised to let companies replace their expensive platform specialists with more commodified generalists.
Standardisation in web development lowers costs, increases predictability, and makes the various browsers more interchangeable. It’s a hedge that reduces the individual market power of each browser, but usually in equal degree while increasing the value of the overall web, leaving each browser vendor better off as a result. Their market share might not increase but they have a bigger cut of a larger pie. Incompatibility tends to drive developers and companies to other platforms, reducing the overall pie.
Standardisation of labour, conversely, does not benefit labour.
Everybody hates A.I! Here’s another reason to.
Whatever happens to Python or pip is likely to eventually happen to more projects or more frequently. I am concerned mostly about maintainers that are handling this in isolation. If they don't know that AI-generated reports are commonplace, they might not be able to recognize what's happening before wasting tons of time on a false report. Wasting precious volunteer time doing something you don't love and in the end for nothing is the surest way to burn out maintainers or drive them away from security work.
Seth Larson
Seeing as I dusted off Pico-8 again recently here’s a little post about doing palette swaps in it.
The concept of a palette swap is drawing something with a different set of colors. It’s a good way to get more mileage out of your PICO-8 sprites. There are a bunch of things you can do with palette swapping
- create variations on a character
- make simple looping animations
- fade in or out of a scene
- simulate day/night cycles
But what does this mean for us as programmers? How do we represent the concept in code?
Technical website bullshit, but something I’ve been meaning to look at setting up for this site too.
Bots I block fall into one of the following categories:
- Bots that only serve to power adtech on other sites. My site has no ads, but I allow bots such as Google’s AdsBot.
- Intellectual property snitches. I forbid robots that scan for plagiarism, trademark/copyright violations, brand protection, etc.
- Robots that power invasive background checks that border on cyberstalking.
- Scrapers that build datasets to train Generative AI (GenAI), such as large language models (LLMs). I don’t block search clients used by GenAI research assistants; I only block scrapers used to train GenAI models.
I used to be one of the people who “corrected” people about the word Gaelic. I am sorry.
The Irish Language was referred to as both Gaelic and Irish until the Republic was formed. “Irish” was mainly used by academics; “Gaelic” was used by the common people.
The Republic chose “Irish” over “Gaelic” for political/nationalistic reasons.
Dahl started an Instagram account in 2023 that parodied tradwife content creators, after her own account was banned by the platform multiple times. Tradwife content (short for “traditional wife) is fetish content, even if the “wife” isn’t showing skin. It’s a fantasy, and always has been, even when it was used to sell ovens to 1960s homemakers.
Kim is the person who taught me that judging a homeless person for wanting to buy alcohol or cigarettes is utter folly. When you’re homeless, the nights are cold, the world is unfriendly, and everything is painfully uncomfortable. Whether you’re sleeping under a bridge, in a tent, or at a shelter, it’s hard to rest easy. You are likely to have injuries or chronic conditions that bother you persistently, and little access to medical care to deal with it. You probably don’t have much healthy food.
In that chronically uncomfortable, over-stimulating context, needing a drink or some cigarettes makes fucking sense. As Kim explained to me, if you’re laying out in the freezing cold, drinking some alcohol may be the only way to warm up and get to sleep. If you’re under-nourished, a few smokes may be the only thing that kills the hunger pangs. And if you’re dealing with all this while also fighting an addiction, then yes, sometimes you just need to score whatever will make the withdrawal symptoms go away, so you can survive.
A cute story about Star Wars: Battlefront.
But it wasn’t just that it was super difficult and took a long time. The hilarious part of all of this is that the fact that there was still a battle going on outside meant that the number one reason we didn’t get to destroy the shield bunker was that the match had ended. The AI armies we were ignoring went on fighting their war and reached a conclusion before we were able to deal enough damage to the damn thing.
The 88×31 buttons on the homepage are now shuffled on load :)
I’ve been testing how I want to handle rebogs on this site.
The previous post was rebogged entirely manually. I wrote a post in the normal format for Jekyll and defined metadata for the rebog information to link back to Freja’s website and display her avatar. Now I have to figure out how I want to streamline that process.
For posts syndicated from Letterboxd and such I have a setup where when I build the site there’s some code that checks those feeds and processes them into their own special folders that then get processed and added into the list of posts.
For rebogs though I think I’m going to do it differently and write a script, probably in Python, that I can run from my command line and give a link to a post that will attempt to parse the content of it then write it to a file directly into the same folder as my normal posts but with the extra metadata I’ve defined for for rebogs.
Continuing to crib from Natalie I have finally gotten around to trying out webmentions for this site.
I had bookmarked her posts on it and made notes and was going to get around to implementing it myself when I thought “hey I’m using Jekyll has a webmentions plugin already been made for Jekyll?” and the answer was of course it had. Adding it was very straightforward and hopefully it works out of the box.
The previous version of this site was originally just the gallery and it included an Atom feed honestly mostly just because I wanted to understand better how RSS worked and it was an interesting and fun thing to make. When I made the bog instead of retiring the old feeds I added a new one and then made a combined one that had everything and as I’ve reorganised things this has become a pain.
And the gallery is a record of past things I’ve worked on. The dates listed are retroactive. Even when I add new things they’re usually pretty heavily back-dated. It’s not really an appropriate use of an RSS feed. You shouldn’t really be adding things that have dates months or even years in the past. And when I add something there now I’m probably going to have a post about it anyway. So I’ve decided to simplify things. I am going to remove the other feeds and redirect them to the one for the bog. If I add something to the gallery there’ll be a post about it and obviously the two podcasts have their own feeds. Because they’re podcasts and that’s how podcasts work.
I bookmarked a couple of posts from Natalie ages ago about h-entry and have finally gotten around to marking up my posts with them.
Hopefully I didn’t mess anything up and everything parsable now. I should have done this sooner as it was fairly simple but better late than never.
Now I have that set up as well as syndicating posts from my Backloggd and Letterboxd feeds. Next steps in trying to get set up to be part of the sociable web: Webmentions and figuring out how I want to handle rebogging individual posts.
Is there any spec or common practise for providing content warnings in an RSS/Atom feed?
This post demonstrates custom CSS that won’t display in RSS readers.
One of the things that Cohost taught me is that CSS is actually fun. Styling a website is a really lovely form of self-expression and I have been really enjoying styling this this website1. And I thought I’d highlight some of the things I’ve done.
The site has two different colour schemes for dark mode and light mode. I much prefer the dark mode one but I generally use dark mode for everything I can. The dark mode has a cool, blue palette while the light mode uses a warmer colour scheme with oranges and peach colours. Most of the colours I used are picked from the Pico-8 palette.
There is a gradient as you scroll down the page in both colour schemes ending in a different footer images2. In dark mode stars also come out as you scroll down.
External links and internal links have different colours3 and also some links have special decorations. If I link to the atom feed for the bog or my page about Snolf they have little Nintendo dialogue icons appended to them or if I link to Transy it uses the typeface that she talks in: Hobo.
This applies whenever those specific things are linked to and I don’t need to do anything special with this post to apply them.
The site also has custom cursors based off of old Windows cursors. If you mouse over the above links you might have noticed that there are also different cursors depending on what type of link they are.
For the Irish language portions of my site I use Mínċló GC from Gaelċlo instead of Crimson Text which is used for English text. I also use it for the title of The Bog because using silly fancy text for headings is fun. Other examples: Gallery is Tate Regular, The the Ring Podcast uses Some Rings and a bunch of other fonts I use for titles on my homepage are references to Sonic the Hedgehog because of course they are.
The most important part of any site is 88×31 pixel buttons, obviously, to which I have a crippling addiction. I’ve copied some CSS from Hyphinett to embiggen them when you mouseover them and also set rendering mode to pixellated to keep them nice and crispy.
If you have your browser set to prefer reduced motion the mouseover effect is disabled and all the animated buttons are replaced with static ones.
For sites that don’t have buttons I use a little 88×31 image of a little piece of paper that I tore up with the names rendered on top slightly askew in Cinema Calligraphy.
The homepage divides into multiple columns depending on the screen width. Other pages generally have a single-column layout with navigation elements on either side that collapse to the top of the page if the screen is narrow enough, like on mobile. The avatar for the bog also snaps to the top on narrow screens and otherwise sits beside posts and scrolls with the page.
Gallery pages have sets of links next to/under the title that all change to the site’s link hover colour when mouseovered. This applies is applied to images using a combination of -webkit-filter sepia and hue-rotate. This also changes with light and dark mode. Projects with git repos have an icon here that expands into an info box with the git repo address.
And sometimes I just do little bespoke things for pages, such as the vertical Ogham text on the Cló Piocó-8 page. Trivia: Ogham is one of the few scripts that is written bottom-to-top.
I also have some custom CSS for printing. I don’t really plan on printing pages from this site nor do I expect anyone else to, but it was fun to play with. Colour is drained out of styling to save on coloured ink, links are instead underlined and the addresses they point to appended after them in brackets. Videos and audio players are hidden, the link icons in gallery pages are turned into a bullet point list under the header and the comment box is hidden.
Printing is just one alternative way I like to think about how my site could be displayed. While I don’t test the site with Netscape Navigator4, I do read back over posts in my RSS reader and sometimes check the site in the terminal-based web browser Lynx.
Again I don’t really expect people to be navigating this site in the terminal but it does make me mindful of how the site functions in terms of pure HTML content elements without the fancy styling and I think it’s important to keep it understandable and navigable in that mode too. That is how the site is going to be parsed by accessibility tools. I also try to have as little Javascript involved as possible as well and not use it to render page content5.
At the top of this post there is a little infobox warning. There is CSS to make this eye-catching but it’s also defined as an <b> element so that even in the absence of CSS it will display bold and be a little attention-grabbing.
On gallery pages, and especially on podcast episode pages, there is a credits/links section at the bottom of the page in smaller text. There is a heading about this section saying “Credits” but it’s hidden by CSS as I thought the page flowed better without it. It’s still there for if the page is being read without CSS and the styling can’t be used to differentiate it as a separate element from the main page text as clearly.
I used to some invisible horizontal rules across the page, set to not display using CSS, that would divide the header and footer of the site from the main content to try and make it read cleaner in situations where there was no CSS. That was before I simplified the site layout somewhat and took out the more divided header and footer areas with links in them that the site used to have.
That’s all that I can think of off the top of my head. Bye.
concept: rewrite a bunch of my website code to split out sections from each other more cleanly so I can more easily make small posts with less effort
result: oh god oh fuck everything is broken and I have way to many unstaged changes what was I in the middle of doing a week ago before I went on holiday if I want to post anything I need to stash fifty files and change branches which takes several minutes right now
Though honestly that describes the situation more a week ago than right now. I do have the podcast processing stuff finished now and I just need to do similar rewrites with the Pico-8 processing. That should🤞🏻 be easier now that I have done the podcast stuff and can base what I do on how I handled that.
I am trialling a comments section using Cusdis. There should be a comment section below this and every other bog post as well as every entry in the gallery.
This means most pages on here now use Javascript which makes me a little sad but maybe it is worth it.
Or maybe I will just decide to remove this again! We’ll see.
In any case feel free to say hello in a comment below.
A different GIF will displayed below depending on your browser’s prefers-reduced-motion and
prefers-color-scheme settings. There’s four different possibilities:
I hadn’t used prefers-reduced-motion before but I saw a chost from Kore linking
to a blog post about accessibility and GIFs and decided I wanted to follow it but
I also didn’t want to have to manually write the HTML code for it each time.
Thankfully programming is the art of being tactically lazy and I can put some effort in up front and
solve an interesting problem once and then let my site generator handle it automatically from then on.
Also thankfully I had done something like this before after taking inspiration how Luna’s blog handles images. I don’t have high D.P.I. images but I do have different dark and light mode versions of images for the The “the Ring” Podcast series tracker chart and the Dracula International diagram I made.
The way I had initially done that was, characteristically, a mess. I wrote a custom custom Liquid tag to handle it which meant that instead of actually using the existing, basic Markdown syntax I had to put images into my posts with something like this:
{% image /bog/images/easóg.gif %}
So revisiting this to include prefers-reduced-motion options I decided to do it differently this time.
A way that would allow me to just type the normal Markdown syntax and let my code handle everything else.
The next step was to look into how to extend and customise Jekyll’s Markdown parsing and output but that sounds hard and I didn’t want to do that so I just used a regular expression1:
/((!!?)\[([^\[\]]*)\]\((.*?) *("([^"]*)")?\))/
This runs against the raw Markdown before it’s parsed into HTML and pulls out the link, alt text and title. That last part is also a big improvement over the custom tag I previously made as that didn’t support alt text or titles at all.
The code then takes the link and checks if there are any alternative versions listed in
the site’s static file list like easóg.dark.gif, easóg.static.gif or easóg.dark.static.gif.
when writing a new post now I don’t have to do anything extra other than have those other versions
with the right naming scheme in the same folder as the original image.
From there it it compiles it into HTML and replaces the original Markdown in the document:
<picture>
<source srcset="/bog/images/easóg.dark.gif" media="(prefers-color-scheme: dark) and (prefers-reduced-motion: no-preference)" />
<source srcset="/bog/images/easóg.gif" media="(prefers-reduced-motion: no-preference)" />
<source srcset="/bog/images/easóg.dark.static.gif" media="(prefers-color-scheme: dark)" />
<img src="/bog/images/easóg.static.gif" alt="A white cat" title="Easóg" loading="lazy" />
</picture>
Well, actually it does something else too. You might have noticed in the regular expression up above I am actually checking for an optional, second exclamation mark at the start of the image tag. That’s my own extension of the syntax. If I’m doing my own parsing I might as well go wild with it. If there are two exclamation marks at the start of the tag it also wraps the image in a link to itself and adds an extra class:
<a href="/bog/images/easóg.static.gif" class="dynamic-image-link">
<picture>
<source srcset="/bog/images/easóg.dark.gif" media="(prefers-color-scheme: dark) and (prefers-reduced-motion: no-preference)" />
<source srcset="/bog/images/easóg.gif" media="(prefers-reduced-motion: no-preference)" />
<source srcset="/bog/images/easóg.dark.static.gif" media="(prefers-color-scheme: dark)" />
<img src="/bog/images/easóg.static.gif" alt="A white cat" title="Easóg" loading="lazy" />
</picture>
</a>
The classes are to enable a little bit of Javascript2 to swap out the destinations of the links on the fly when swapping if the user’s media preferences change. Whichever one you currently see in the browser is the one you’ll go to if you click on it.
I might review the double bang syntax if I can figure out something that could be added to the tag that would get stripped out and ignored by a normal Markdown parser for better compatibility. If only Markdown had comments.
Is this a robust solution? Absolutely not! Will I eventually run into annoying weird cases that make me bang my head against the wall as a result of this? I already have! While writing this very bog post! Because the regular expression cannot tell that the markdown code example I have above is not meant to be parsed and turned it into HTML, making it impossible to show the before part of the before and after. Did this make me go back and implement this in a better way? No!
I added some metadata to this post telling it do disable my custom image parsing, made the parser skip doing anything if it finds that metadata on a page and then hardcoded the example at the top of this page. That’s right: This post isn’t actually using the one thing it’s meant to be demonstrating!
