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. Isn't that cool! It is a native feature of Quartz's GraphView. How can I build something like that…
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 on my website. They're on the page, and a fragment links straight to the correct section of that…
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 like tables, footnotes, and - in some dialects - autolinks. Most of the time, when an author writes …
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 it works. Cursor Styles CSS allows us to change the icon displayed by a cursor. There are dozens …
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 lines Hurrah! But the name is, I think, slightly misleading. It doesn't only work on text. It will…
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 it in two specific places. Firstly, I set $this->footnote_counter = 0; in the initial config of the …
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 show phonetic pronunciation using hiragana. Because English is a composite language, it isn't always …
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 https://www.example.com The match will occur at the start of the string. To match more lazily, you can use a substring…
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 does embedding correctly. The full text is placed in a <blockquote>, with a link back, links to any…
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 html> <html> <head> </head> <body> <style> a { color: #f00; } </style> … Most mo…
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 programming language is used in an example? Here's how we might represent it in HTML: <pre> <code> …
Continue reading →
Dan Q very kindly shared his script to make WordPress do good HTML. But I couldn't get it working. Looking at the HTML it was spitting out, the meta generator said it was HTML Tidy version 5.6.0. That's quite old! I confirmed this by running: echo tidy_get_release(); Which spat out 2017/11/25. Aha! There are a few bugs in this version of HTML Tidy, some of which are fixed in later versions. Here's how to fix them. Auto Indent doesn't work. This is fixed by manually specifying "indent"…
Continue reading →
