The unreasonable effectiveness of simple HTML

by @edent | # # # # | 46 comments | Read ~57,034 times.
The HTML5 Logo.

I've told this story at conferences - but due to the general situation I thought I'd retell it here. A few years ago I was doing policy research in a housing benefits office in London. They are singularly unlovely places. The walls are brightened up with posters offering helpful services for people fleeing domestic violence.…

Continue reading →

I know how many microphones and cameras you have

by @edent | # # # # # | 8 comments | Read ~315 times.
Web browser asking for permission to access microphones. On the page, the number of microphones is displayed.

A curious little data leak, but one I struggle to care about. Perhaps useful for a bit of fingerprinting? Websites can access your system's camera and microphone. That's how modern video conferencing works in the browser. In an effort to retain user privacy, the browser asks the user for permission to use the camera and…

Continue reading →

A (terrible?) way to do footnotes in HTML

by @edent | # # | 12 comments | Read ~5,234 times.
A very long footnote.

I've been thinking about better ways to display footnotes in eBooks. So this is my horrible and hacky way to display inline footnotes in pure HTML and CSS. No Javascript. Here's how it works: The most cited work in history, for example, is a 1951 paper <details> <summary>1</summary> Lowry, O. H., Rosebrough, N. J., Farr,…

Continue reading →

Introducing DOI2HT.ML - the simple semantic citation server

by @edent | # # # # | 6 comments | Read ~276 times.
Website Screenshot.

Academic citations are hard. One of the joys of the Digital Object Identifier System (DOI) is that every academic paper gets a unique reference - like: 10.34053/artivate.8.2.2. As well as always leading you to a URl of the paper, a DOI also provides lots of metadata. Things like author, publisher, ORCID, year of publication etc.…

Continue reading →

If HTML5 Were British

by @edent | # # # | 7 comments | Read ~386 times.
The HTML5 Logo.

If you've been around programming circles long enough, you'll probably have read the seminal "If PHP Were British". If not, go read it now. I'll wait. I love the idea of a non-American programming language. I'm aware that there are some, but I'm unaware of any which are in British English. Except, perhaps, BBC Basic.…

Continue reading →

Introducing - the slow web server

by @edent | # # | 20 comments | Read ~82,713 times.
A digital watch.

This experiment has now ended. The code is available on One thing most websites try to do is try to serve you the page as fast as possible. So I've decided to do the opposite. I've made a (toy) web server which goes as slow as humanly possible. You can visit it at…

Continue reading →

The usability of HTML elements

by @edent | # | 3 comments | Read ~3,887 times.
The HTML5 Logo.

Last week, I gave a talk at the Maps for the Web workshop. As part of the discussion, I talked about how some HTML elements are really easy for developers to use and understand, and others are hard. I'm not aware of any formal research on this - all I have is my experience as…

Continue reading →

Adding Web Monetization to your site using Coil

by @edent | # # # | 3 comments | Read ~183 times.
A tiny lego Storm Trooper eats a chocolate coin.

Recently, my blog was featured on Coil's list of monetised content. I'd like to take a little time to explain what Web Monetisation is, how to get set up with it, and what my thoughts are. Quickstart Stick this line in the <head> of your HTML page. <meta name="monetization" content="$"> That's it. You should replace…

Continue reading →

Interactive HTML Trees with no JavaScript and no CSS

by @edent | # # | 3 comments | Read ~3,071 times.
A Twitter conversation rendered as HTML.

Many text based conversations threads can be visualised as a tree. This is a follow-up to yesterday's blog post about Twitter conversation trees. Mailing list archives often use nested <ul> to show a conversation. That's fine, but has the major drawback of not being interactive. There's no way to collapse a branch of a tree…

Continue reading →

Better Keyboard Buttons in CSS

by @edent | # # # # | 2 comments | Read ~1,158 times.
A pet cat typing on a computer keyboard.

Here's a simple scrap of CSS which you can Ctrl+C and Ctrl+V kbd { border: .1em solid #aaa; border-radius: 15%; display: inline-block; padding: .1em .5em; background: linear-gradient(180deg, #fff, #fff, #fff, #ddd); user-select: none; cursor: pointer; color: #000; font-weight: bold; } kbd:hover { background: linear-gradient(0deg, #fff, #fff, #fff, #ddd); } Features Semantic use of the kbd…

Continue reading →