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 →
Those whom the gods would send mad, they first teach recursion. PHP 8.4 introduces a new Dom\HTMLDocument class it is a modern HTML5 replacement for the ageing XHTML based DOMDocument. You can read more about how it works - the short version is that it reads and correctly sanitises HTML and turns it into a nested object. Hurrah! The one thing it doesn't do is pretty-printing. When you call…
Continue reading →
There's a new Web Standard in town! Meet WebMonetization - it aims to be a low effort way to help users passively pay website owners. The pitch is simple. A website owner places a single new line in their HTML's <head> - something like this: <link rel="monetization" href="https://wallet.example.com/edent" /> That address is a "Payment Pointer". As a user browses the web, their browser takes …
Continue reading →
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 →
