Some of my blog posts are long. They have lots of HTML headings like <h2> and <h3>. Say, wouldn't it be super-awesome to have something magically generate a Table of Contents? I've built a utility which runs server-side using PHP. Give it some HTML and it will construct a Table of Contents. Let's dive in! Table of ContentsBackgroundHeading ExampleWhat is the purpose of a table of…
Continue reading →
I love ripping off good ideas from other people's blogs. I was reading Alvaro Graves-Fuenzalida's blog when I saw this nifty little force-directed graph: When zoomed in, it shows the relation between posts and tags. In this case, I can see that the posts about Small Gods and Pyramids both share the tags of Discworld, Fantasy, and Book Review. But only Small Gods has the tag of Religion. …
Continue reading →
Here's a knotty problem. Lots of my posts use URl Fragments. Those are links which start with #. They allow me to write: <a href="#where-is-this-a-problem>Jump to heading</a> So when someone clicks on a link, they go straight to the relevant section. For example, they might want to skip straight to how to fix it. Isn't that clever? Where is this a problem? This works great when someone is…
Continue reading →
Markdown is, I think it is fair to say, a frustrating "specification". It's origins are a back-of-a-fag-packet document and a buggy Perl script - and we've been dealing with the consequences ever since. There are now multiple Markdown parsers, each with their own idiosyncrasies. To make matters worse, there's a set of extensions popularly known as "Markdown Extra". Extra has support for things…
Continue reading →
How do you know where this link goes to? If you're on a desktop, you might notice that hovering your mouse over it displays the destination somewhere on your screen. If you're a geek, you could view the source-code of a page. Can we improve the experience for users? Here's an attempt. Try hovering your cursor over this link to a popular website. This is what it should look like: Here's how …
Continue reading →
A fun little CSS experiment! There's a new(ish) feature in CSS which allows you to set the way text is wrapped. Ordinarily, a long line of text might be split at an inopportune time. For example: This very long headline ends with a single word Having a dangling word doesn't always look great. Using text-wrap:balance would give us something like: This very long headline ends with balanced…
Continue reading →
As a dedicated and professional computer scientician, I believe that all indices must start at zero. Not one, not two, but zero. The zeroth element is sacrosanct to our creed; for in the beginning there was nothing. If you're using WordPress's JetPack, it uses an ancient version of Markdown Extra. You can either monkeypatch this, or install a separate Markdown plugin. I've patched my fork of…
Continue reading →
My name is Terence(/ˈtɛɹəns) Eden(ˈiːdən/). Modern HTML allows the user to use <ruby> to annotate text. This is usually used for furigana - which allows pronunciation to be placed above words. For example: "シン・ゴジラ (Shin Godzilla)" shows you how to pronounce both words if you are unfamiliar with kanji. The text can be any language or use any characters. In Japanese, it is quite often used to sh…
Continue reading →
Suppose you have lots of links on a page. You want to highlight the ones which point to example.com - is that possible in CSS without using JavaScript? Yes! This scrap of code will turn all those links red: a[href^="https://example.com"] { color: red; } Now, there are a few gotchas with this code. It matches the string exactly. So https://example.com will not match…
Continue reading →
It is sometimes useful to embed the contents from one website into another. For example, you may wish to quote a post from a microblogging site like Twitter, Threads, BlueSky, or Mastodon. All of them offer an "embed" button which will copy a snippet of code for you to paste into your website. Here's how they compare: BSky In my considered opinion, BlueSky is the only modern service which…
Continue reading →
I am a bear of very little brains sometimes. I had a site which, for various boring reasons, was printing a <style> element in the middle of the HTML's body. Because <style> is a metadata element, it should only appear within the <head> element. This is OK: <!doctype html> <html> <head> <style> a { color: #f00; } </style> </head> <body> … This is an error: <!doctype h…
Continue reading →
I'm a little bit obsessed with the idea of Semantic markup. I want the words that I write to be understood my humans and machines. Imagine this piece of code: print( "Hello, world!" ) Is that code example written in Python? C++? Basic? Go? Perhaps you're familiar enough with every programming language to tell - but most people aren't. Wouldn't it be nice to give an indication of what…
Continue reading →
