A Little Bit of CSS Shine for the Wayback Links

More in the little web joys of selk tinkering. Rewards you never get by pouring your houghts into some packaged medium sized substack of a LinkedIn space.

Self-stylin; as it were.

Way back in the pre lock down era of January 2020 I added a little bit of CSS to this blog thang that put a small icon adjacent to any hyperlinks to the internet archive. This is, as on an ongoing basis, I find more links other sites from here have bit the 404 dust or just have been clearcut by a discarding of entire sites. Iften when I am rummaging around the corners of CogDogBlog, I find old posts with missing feature images, malformed HTML, and more often than not– ye new dead links.

So it seemed worthy to have a visual indicaor of links to the Internet Archive’s Wayback Machine. The CSS I used as based on some early 2000s stuff when I wanted to make clear links to PDFs or other file formats. So a nifty gizmo is you can create a CSS class that snags hyperlinks o specific sites. My style I added in 2020 used a little image stuffed in my server pile:

There was nothing wrong with it, but as sometimes the internets spit out something you were not looking for, in Mastodon I was combing though the local feed of my instance at https://cosocial.ca/ . For some reason this caught my eye where this person was making clear their Wikipedia links. It was similar, but looked a bit more modern than mine, so I was curious to style my own styles.

I updated my CSS to use a svg icon that was a whopping 2k but also uses the :after subclass or whatever its called to append the icon after a link.

Could I have asked ChatGPT to do this for me? Of course, but why? Where’s the craft in that? Why prompt for stuff I can do? I want to keep the rusty code muscles limber.

So what the beans does it do? Well, for an example, I recently was combing the Wayback for an Australian publication from the mid 2000s that I remember an issue of the Knowledge Tree written by my colleague Nancy White, (do you see what it does?) this maybe in the first days I got to know someone I was fortunate enough to work with, visit, and add to my friend circle. I emailed it to Nancy, and as one did often in those days, she blogged about it.

For me, I like having this visual indicator of how much of a blog post I have managed to keep partly alive by nurturing the dead links with archived ones. You can see a lot of the icons on the oldest post I have with links to the Wayback machine, a 2003 moldy oldie on “Comment Blogging” (what comes around, I might come back for that).

Not sure what this matters, but I derive small satisfaction in tinkering under the hood of the machine.

Update

As expected, ChatGPT (cheap 3.5 version) was first able to provide more or less what my old code did. When I asked it to improve to use the :after pseudo class it belched out an ugly blob of CSS. I knew it would be a waste of time and for 2 queries I expended 0.004kW of electricity.

Featured Image: Mine. Human generated. My dad’s old shoe shine box. Dad’s Shoe Box flickr photo by cogdogblog shared into the public domain using Creative Commons Public Domain Dedication (CC0)

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon