Terence Eden. He has a beard and is smiling.

Terence Eden’s Blog

Theme Switcher:

Working around an old and buggy HTML Tidy in PHP

· 250 words


The PHP logo.

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…

Named Alternates for WordPress

· 1 comment · 150 words · Viewed ~325 times


Screenshot of Lynx, the text browser, showing named alternates.

HTML documents have the concept of an alternate representation of the document. For example, a page's header might say: <link rel="alternate" type="application/rss+xml" href="https://shkspr.mobi/blog/feed"> That tells you there's an alternative representation of the page, what sort of content it is, and where it is located. That's nice. But it's hard for a browser to tell the user what that…

Accents and eBooks

· 2 comments · 300 words


The phrase "Swords of Qadisiyyah." But the combining macron over the letter "a" has been rendered as a separate dash.

By and large, the English language doesn't use diacritical marks. Even our loanwords are stripped of them; we drink in a cafe rather than the more pretentious café. This has a consequence for HTML and, by extension, eBooks. As a quick primer, modern computing gives us two main ways of displaying a letter with an accent. The first is simple - encode every single accented letter as a separate …

· 12 comments · 200 words · Viewed ~239 times


The Logo for WordPress.

While attending IndieWebCamp in Brighton a few weeks ago, a bunch of us were talking about blogging. What is post? What should it contain? What's optional? Someone (probably Jeremy Keith said: A blog post doesn't need a title. In a literal sense, he was wrong. The HTML specification makes it clear that the <title> element is mandatory. All documents have title. But, in a practical sense, he…

I can't use my number pad for 2FA codes

· 10 comments · 400 words · Viewed ~5,193 times


Computer number pad with the number 7 in the top left.

This has to be the most infuriating bug report I've ever submitted. I went to type in my 2FA code on a website - but no numbers appeared on screen. Obviously, I was an idiot and had forgotten to press the NumLock button. D'oh! I toggled it on and typed again. No numbers appeared. I switched to another tab, my numbers appeared when I typed them. So I was reasonably confident that my keyboard was…

Use CSS to boost the font size of emoji with no extra markup

· 10 comments · 750 words · Viewed ~1,049 times


Group of emoji.

I want to make emoji bigger than the text that surrounds them. At my age and eyesight, it can be difficult to tell the difference between 😃, 😄, and 😊 when they are as small as the text. Is there a way to use CSS to increase the font size of specific characters without having to wrap them in an extra <span> or similar? Yes! Although it is a bit of a hack. This relies on 3 CSS features: src: lo…

Using date-based CSS to make old web pages *look* old

· 9 comments · 750 words · Viewed ~8,306 times


Screenshot of an early BBC news website from the 1990s. The page looks old fashioned.

How do you know you're looking at an old website? You may have found a page which has lots of interesting information, but how can you tell it's a modern and relevant result? Some websites don't contain dates in their URls. There may not be a © date or publication date shown on the page. And the <meta> tags might not contain anything useful. If you're lucky, the site will look old fashioned: …

CSS only colour-scheme selector - no JS required

· 6 comments · 650 words · Viewed ~598 times


A light website with a photo of a kitten.

Yesterday I wrote about a lazy way to implement a manual dark mode chooser. Today I'll show you a slightly more sensible way to do it. It just uses CSS, no need for JavaScript. Here's a scrap of HTML which present a dropdown for a user to choose their colour scheme: <select id="colour-mode"> <option value="">Theme Selector</option> <option value="dark">Dark Mode</option> <option…

Laziest Possible Dark-Mode Toggle - Using :has() and invert()

· 3 comments · 300 words


A dark website with a photo of a kitten.

I'm not saying this is a good way to make a dark mode website. I'm not even saying it's a sensible way to do dark mode. But I'm pretty sure this is the laziest way of getting dark mode on your site. And it is all done with less than a handful of CSS rules. It relies on the new-ish :has() CSS pseudo class and the positively ancient filter() CSS function. Here's the code in all its glory: …

Hiding malicious commands in copy-and-pasted text

· 4 comments · 250 words · Viewed ~227 times


The HTML5 Logo.

Quite often websites will encourage you to copy and paste commands into your terminal. There are a variety of reasons why this is bad - not least because someone could hide malicious code. That's usually done with a bit of CSS to make the evil command invisible, or using Javascript to inject something unwanted into your keyboard. Here's method that I hadn't seen before. Copy this code and paste …

Improving the WordPress Comments Form with Client-Side Validation

· 2 comments · 250 words


The Logo for WordPress.

If you use WordPress's HTML5 comments, there's an annoying little gotcha. There's a four year old bug which prevents client-side form validation. HTML allows <input> elements to have a required attribute. In theory, that means the form shouldn't submit until the input is filled in. Sadly, WordPress uses novalidate on the form - as the name suggests it stops any validation. But! WordPress is…

The minimal-div minimal-span philosophy of this blog

· 8 comments · 800 words · Viewed ~329 times


HTML Source Code.

If you've ever learned Mandarin Chinese, you'll know about "measure words". They're the sort of thing that trip up all new learners of the language. While 个 (gè) can be used as a generic measure word, using it everywhere makes you sound like an idiot (according to my old teacher). So you learn to use 个 for people, 包 for packets, and 根 for things which are long and thin. English has a similar con…