I found my old concert ticket stubs while cleaning up my old room at my parents' house, so I scanned them and pulled a @lynnandtonic by making a page for them: https://chriskirknielsen.com/music/concerts/ (had I been to more shows I wouldn't have undertaken this task, I'll tell you what! 😅)

In addition to dropping off a bag at a second-hand video game shop (it was worth more than I got but it's out of mind now), I put up listings for 60+ items, which was a chore (photos + descriptions, finding a suitable price…) but my brother helped a lot. We have sold… 6 items so far. 🫣 But that's 6 things no longer collecting dust, and money that can be used for… something! More games! (I kid but also trying to build a physical library of games so… not totally kidding 🙃)

When I went to see my parents, I went through a lot of stuff I had collected over the years (mainly video games, some rare/collector's items, and some CDs). I wish I could go back in time and tell younger Chris "You don't need that special edition!" or "That Steelbook is not as cool as you think it is".

I have been able to sell big ticket items over the years, and now it's down to the last "few" things. Nostalgia is one hell of a thing, and it was fun to reminisce, but it's just plastic. 👋

I updated how I generate my OG images to a single page (https://github.com/chriskirknielsen/dotcom-2024/blob/main/src/content/og.vto), thanks to @zachleat's single-page idea (https://www.zachleat.com/web/open-graph-easy-build/). I end up with 121 fewer files, nice. And the build times?

Before: 1x OG page per page
➡️ Local cold start (3x avg): 4.613s average
➡️ Netlify build: 31s

After: 1x OG page for all pages
➡️ Local cold start (3x avg): 4.637s average
➡️ Netlify build: 31s

~~Eleventy~~ BuildAwesome is just too freakin' fast to make any difference. 💀

Hey nerds: what's the best way to run an old PHP5+MySQL+Apache project on a Mac?
- XAMPP: latest is running PHP8 and replacing the build with PHP5 is… not accessible as a quick vanity project.
- MAMP: I already used up my free trial apparently trying to do this years ago? So not a viable solution.
- Devilbox: sounds promising but it's using Docker, smells like trouble.
Other options? FOSS preferred. Thanks! (I remember using WAMP on Windows, that was good!)

A friend of mine shared this list of public webcams to look at the #eclipse: https://jonty.github.io/2026_eclipse_webcams/

I might just have spent as much time on this specimen page than on the font itself but it's finally out in the world: Peritel, a nostalgia-fuelled retro typeface. I'll do a follow-up post on my blog at some point, soon-ish.

Test it out here — I'd love to hear your thoughts: https://chriskirknielsen.com/fonts/peritel/
#typeface #fontDesign

I wanted to gut-check a quick thing in @codepen , which has now launched its 2.0 editor. I just renamed a file from .css to .scss and it added the Sass block automatically. It could have been like "okay yeah go add the block yourself bozo" but no, it makes it easy. Far from the most impressive thing in the new editor but I love these kinds of details. Make it easy! Hell yeah!

Anyways this makes me appreciate foundries like Simple Bits where it's a licence that makes sense, and it's just easy.

There's a 100% chance these other foundries they won't get my business with a yearly licence. Their loss!

I was looking at fonts for a few hours last night — as one does — and a few I'd be really interested in buying. It's for my website, for one of the 8 themes, so, not really something I want to spend a fortune on, but still, I like nice fonts.

Well wouldn't ya know it, every single font I liked was offered as a yearly licence, always for big players. I don't have 250,000 visitors a month (maybe keep one zero, on a good month? I dunno I don't track on my website), I don't want to pay $120/yr!

Last night, I took notes to things to do on my website, and did them!
- Improved some UX on my /about page's synthesizer, it now has a persistent octave shift button.
- Added a static version of my 88x31 button in the footer to be used if `prefers-reduced-motion` is on — the media query drives the `picture>source+img` combo.
- Improved my /languages page to have a wavy, rainbow text at the end (also respects motion preferences), theme-adjusted colours set by @mia's trick: https://front-end.social/@mia/116173152156994216

My chaotic good trait is that if I am given an image of some text/logo where letters have their optical correction overshot cut off at the baseline (e.g. bottom of a U, a C, an O, etc.), I will find the original asset in Figma and re-export it with a little padding, and I won't tell anybody. Well, present company excluded, I guess. Shh! 🤫

Here's an example in the wild (where, ironically enough, the asset is an SVG that isn't cut, but the CSS on a non-retina display causes the same result!):

I wrote a quick post to praise #indie games, maybe you have a few you love with a passion that need more attention you'd like to share?
https://chriskirknielsen.com/blog/indie-games-are-worth-your-time/

I love a good 404 page, it tells you a lot more about a website than you'd think. A great example is this one from @tylersticka. `*chef's kiss*`

Y'all got any other fun #404 pages to share? (and I am aware of https://404s.design but I want to see _your_ favourites!)

Me writing a (mildly complex) regular expression 4 months ago to validate a user input:
"Haha fuck yeah!!! Yes!!"

Me debugging an obscure, arcane regular expression I wrote 4 months ago:
"Well this fucking sucks. What the fuck."

New post: Going Full Circle on #CSS Toggle Transitions

You know how when you toggle a `details` element a second time, the marker/indicator "rewinds" instead of completing the rotation, which isn't satisfying? Well, there may be a way…
PS: does not involve any of Kizu's CSS toggles
PPS: may be over-engineered

https://chriskirknielsen.com/blog/going-full-circle-css-toggle-transitions/

I know that Lighthouse scores can be gamed and you can have a score of 100 for Accessibility with the worst website ever (as @matuzo demonstrated: https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/), and I know that score is not whole story, buuuuut…

When a site I've worked on, and made lots of efforts to ensure is as accessible as I know how to make it, comes back from QA, and all the tested pages show a Lighthouse score of 100 in the Accessibility column, it makes me feel like I'm doing _something_ right. 😅

I would love for a media's `autoplay` attribute to respect `prefers-reduced-motion` to make some background videos less hostile to users (care to guess what I'm working on right now?).

I see @jaffathecake is already on the case in https://github.com/whatwg/html/issues/11605 and there's a few thoughts about compatibility — tough decision to make for sure.

I'd certainly be favour of something like `autoplay="auto|forced" where auto means no autoplay if the user has reduced motion preferences.

I created a #slashpage for my #slashpages last night, as one does: https://chriskirknielsen.com/slashes/

And because languages are a big part of my nerdy side, I created a new `/languages` page as well. I don't know what the requirements are to get that added to slashpages.net (hello @robb) but it would be very cool to read about other folks' linguistic lore!

Just realised my wall of text hides everything on mobile lol. Slapped on a close button, all typed via my phone. CodePen is definitely better on mobile with v2!