This is quite the epitome of yak-shaving! Suppose you have an article written in HTML. The basic layout might be something like: <body> <main> <article> The content of your article ... Pretty standard. Now suppose you let users add comments to the article. I have two questions: Where in the tree should they go? What HTML element should be used to group them? It is, I think, a question where reasonable parties can justifiably come to distinctly different…
Continue reading →
As regular readers will know, I love adding Semantic things to my blog. The standard WordPress comments HTML isn't very semantic - so I thought I'd change that. Here's some code which you can add to your blog's theme - an an explanation of how it works. The aim is to end up with some HTML which looks like this (edited for brevity): <li itemscope itemtype="https://schema.org/Comment" itemid="#246827"> <article> <time…
Continue reading →
This is a regular HTML page. But if you click or tap on the text, you will be able to edit it!HTML is magic! This isn't a fancy styled <textarea>, it's a <div> element which uses the contenteditable global attribute.There are some nifty features - depending on your browser.You canadd more bulletsby pressing enterHow 🆒 is that?!Same goesfor numbered listsclick here and type a new lineSplelcheck is enabled using spellcheck="true" so ya myte cee som wigggly rred linees underr sertin wordz.You can e…
Continue reading →
Inspired by John Hoare at the Dirty Feed blog - I've asked the British Library to assign my blog an International Standard Serial Number (ISSN). An ISSN is an 8-digit code used to identify newspapers, journals, magazines and periodicals of all kinds and on all media–print and electronic. Why? Shut up. OK. It turns out that lots of people cite my blog in academic papers - so I wanted to make it slightly easier for scholars of the future to use metadata to trace my vast influence on Human …
Continue reading →
The CSS property -webkit-text-stroke is a curious beastie. MDN gives a big scary warning saying "Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web." And yet, it works everywhere. All modern browsers support it. Except on Emoji. Here's how it work. -webkit-text-stroke: pink 1px; draws a pink outline around text. This has a pink outline! Nifty! But what happens if you apply to emoji? Smile 😁, Star ⭐, Melon 🍈 Nothing…
Continue reading →
I've recently launched TweeView - a new way to visualise Twitter conversation threads in 2D and 3D. Sadly, I don't have a Virtual Reality system - feel free to buy me one! - but I have the next best thing. A web browser! Demo! Using the awesome power of A-Frame, here's a demo of how to view a conversation object as AR. Play! You can play with it yourself at TweeView.ml/ar. You will need to download this AR target image. It works best printed onto matt white paper, then mounted on card. …
Continue reading →
When someone on Twitter mentions my blog, the WordPress WebMentions plugin automatically fetches those Tweets and turns them into comments on the blog post. It looks something like this: That is pretty cool - but has one slight problem. If someone changes their Twitter avatar, or deletes their account, the image disappears and I'm left with a broken image. Booo! So, how do we fix this? With the awesome power of SVG and Emoji! As pointed out by Lea Verou, SVGs can contain Emoji. Which…
Continue reading →
Whenever I open Twitter in a new tab on my phone, the page layout looks weird for a few seconds. It starts out looking like the desktop view and then, after a few seconds, it snaps back to the mobile view. What's causing this? Try opening this link to a window size detector in a background tab. Then visit that tab. On Chrome, this is what I see. If I hit the refresh button on that tab, the Outer window size snaps back: What's going on? According to the specification: The…
Continue reading →
Did you know - WordPress Markdown supports footnotes? There is some documentation but I thought I'd write a slightly more comprehensive guide. The code is pretty simple. Write [^1] where you want your first footnote link to appear. Then, later in the document, write [^1]: The text of the note. It doesn't matter what number you put inside the [^…], WordPress automatically generates a sequential number when displaying the links. For example, this one is [^3] In order to keep your thoughts s…
Continue reading →
(You may already know this, but I didn't. Every day is a school day.) HTML has the concept of the lang attribute. It allows you to say that a specific element contains text in a specific human language. For example, this page starts with: <html lang="en-GB"> That says the entire page is written in English, with the sub-type of Great Britain. This means your browser might offer to translate the page, if that isn't a language you can read. Or it might read the page aloud in a …
Continue reading →
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 browser as to the type of information expected in the field. …
Continue reading →
💾 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 - you can tell the browser that a click should result in a download, ra…
Continue reading →
