Terence Eden. He has a beard and is smiling.

Terence Eden’s Blog

Theme Switcher:

Should browsers remember 2FA codes?

· 5 comments · 550 words · Viewed ~402 times


In HTML, the autocomplete attribute is pretty handy. The HTML autocomplete attribute is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements. autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the …

To download this page, click here

· 5 comments · 350 words · Viewed ~1,994 times


The HTML5 Logo.

💾 Download this page! What's going on behind the scenes? Here's the code. Note - it doesn't require thousands of imported NPM libraries, a complex Docker set-up, or any AI-on-the-blockchain. <a href="" download="this.html">Download this page</a> HTML 5 introduced a new attribute for the anchor element - download. Rather than having to set your server up with Content Disposition headers - yo…

The unreasonable effectiveness of simple HTML

· 57 comments · 700 words · Viewed ~69,733 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. The security guards on the door are cautiously indifferent to anyone…

I know how many microphones and cameras you have

· 8 comments · 300 words · Viewed ~416 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 mics. No audio or video will be sent until the user agrees. But some…

A (terrible?) way to do footnotes in HTML

· 13 comments · 700 words · Viewed ~6,251 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, A. L. Randall, R. J. J. Biol. Chem. 193, 265–275 (…

Introducing DOI2HT.ML - the simple semantic citation server

· 4 comments · 250 words · Viewed ~364 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. I've built a simple website that turns any DOI into a semantic…

If HTML5 Were British

· 12 comments · 550 words · Viewed ~957 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. Although that also allows traitorous American spelling for some keywords. HTML …

Introducing Slowww - the slow web server

· 21 comments · 300 words · Viewed ~83,173 times


A digital watch.

This experiment has now ended. The code is available on https://gitlab.com/edent/very-slow-website 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 http://slowww.rf.gd - but you'll need to be patient. This delivers a page at about 175 …

The usability of HTML elements

· 4 comments · 550 words · Viewed ~4,069 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 a user and teacher of HTML. If you know of anyone who has looked into this more deeply, I'd love to know. Let's take a…

Adding Web Monetization to your site using Coil

· 3 comments · 550 words · Viewed ~252 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. &lt;meta name=&quot;monetization&quot; content=&quot;$ilp.uphold.com/ieELEKD7epqw&quot;&gt; That's it. You should replace my uphold address…

Interactive HTML Trees with no JavaScript and no CSS

· 3 comments · 650 words · Viewed ~4,942 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 if you're not interested in that strand of the conversation. Older…

Better Keyboard Buttons in CSS

· 2 comments · 150 words · Viewed ~1,444 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); } …