You can't. There is no way to use CSS to apply a style to every letter "E". It simply can't be done. At least, that's what they want you to think… What if I told you there was a secret and forbidden way to target specific characters in text and apply some styles to them? As part of my experiments in creating a "drunk" CSS theme, I thought it would be useful to change the presentation of s…
Continue reading →
I recently read a brilliantly provocative blog post called "This website has no class". In it, Adam Stoddard makes the case that you might not need CSS classes on a modern website: I think constraints lead to interesting, creative solutions […]. Instead of relying on built in elements a bit more, I decided to banish classes from my website completely. Long time readers will know that I'm a big f…
Continue reading →
I am vain. I like to know which of my blog posts have "done numbers". I get a little thrill knowing that an old post I wrote has been read by someone in a land I've never visited. I'm curious and want to know if a newsletter has linked to me. At the same time, I don't want to know too much about people. I don't want to stalk them around the web. I refuse to care how long they spend with me. I…
Continue reading →
Let's say that you've visited a website and want to share it with your friends. At the bottom of the article is a list of popular sharing destinations - Facebook, BlueSky, LinkedIn, Telegram, Reddit, HackerNews etc. You click the relevant icon and get taken to the site with the sharing details pre-filled. The problem is, every different site has a different intent for sharing links and…
Continue reading →
Code Golf is the art/science of creating wonderful little demos in an artificially constrained environment. This year the js1024 competition was looking for entries with the theme of "Creepy". I am not a serious bit-twiddler. I can't create JS shaders which produce intricate 3D worlds in a scrap of code. But I can use slightly obscure JavaScript APIs! There's something deliciously creepy about…
Continue reading →
Back in 2020, Andy Bell introduced me to the idea of grouping attribute values. You've probably seen something like this before: <article class="card-section-background1-colorRed" ></article> A single class over-encumbered by all sorts of things. The more modular way to write this would be: <article class="card section box bg-base color-primary" ></article> That's pretty good! Each…
Continue reading →
It is a truth universally acknowledged that a programmer in possession of some HTML will eventually try to parse it with a regular expression. This makes many people very angry and is widely regarded as a bad move. In the bad old days, it was somewhat understandable for a PHP coder to run a quick-and-dirty preg_replace() on a scrap of code. They probably could control the input and there wasn't …
Continue reading →
Consider these two HTML elements: <div class="a b">…</div> <div class="a b">…</div> Is there any semantic difference between them? Is there any way to target one but not the other? In other words, are they logically different? I think the answer is no. On every browser I've tested, both are the same. Whether using JS or CSS, there's no difference between them. You could replace every \n wit…
Continue reading →
I like to highlight bits of code on my blog. I was using GeSHi - but it has ceased to receive updates and the colours it uses aren't WCAG compliant. After skimming through a few options, I found Tempest Highlight. It has nearly everything I want in a code highlighter: PHP with no 3rd party dependencies. Lots of common languages. Modern, with regular updates. Easy to use fun…
Continue reading →
HTML elements can have attributes. For example id, class, src, alt, and many others. These attributes can contain values - an img element's src attribute has a value which is a link to an image. An id attribute's value is a single string. But some attributes can contain multiple values. Here's a thought experiment for you. Consider these two HTML elements: <p class="alpha bravo charlie">………</p> …
Continue reading →
The faithful old GeSHi Syntax Highlighter hasn't seen an update in a many a long year. It's a tried and trusted way to do server-side code highlighting - turning a myriad of programming languages into beautiful HTML & CSS. A few weeks ago, I noticed someone had proposed an update to its HTML rendering. The changes were mostly adding in new element names. PHP has been updated several times…
Continue reading →
I'm delight to announce the first release of my opinionated HTML Pretty Printer for new versions of PHP. Grab the code from Packagist Contribute on GitLab There are several prettifiers on Packagist, but I think mine is the only one which works with the new Dom\HTMLDocument class. Table of ContentsWhatHowLimitationsWhyNext Steps What This takes hard-to-read HTML like: <!doctype…
Continue reading →
