When you share a URl on services like Twitter and WhatsApp, they often display a preview image. This is usually accomplished by the author of the page selecting an image from the page, and adding it to the Page's metadata like this: <meta property="og:image" content="http://example.com/preview.png"/> (See the OpenGraph Protocol and Twitter's Guide for more detailed information.) But not…
Continue reading →
How much do you know about the humble <title> tag? It has been there since the earliest HTML specification. The 1995 spec says: There may only be one title in any document. It should identify the content of the document in a fairly wide context. It may not contain anchors, paragraph marks, or highlighting. Remarkably little has changed in the intervening decades. The modern HTML5 spec…
Continue reading →
I'm currently helping to edit the HTML5 specification. As part of our preparations for HTML5.3 I've started going through the provided examples and improving them. This blog post explains the what, why, and when of the process. You can follow along on GitHub. (As part of my job, I'm lucky enough to be on the W3C's Advisory Committee. This is a personal blog post. If you think my ramblings…
Continue reading →
I've started using Google Cloud Vision for running text detection on OpenBenches images. There's just one problem - Google limits the size of the files that it will accept to 4MB. Why? Who knows! Obviously, it's easy to shrink an image server-side, but how do we do it in the browser? First, let's take a bog-standard file chooser and add a <canvas> element. <input id="userFile" type="file"…
Continue reading →
The new Firefox is out! Powered by the ludicrous-speed quantum engine - it really is a marvel to behold. Unfortunately, there's a rather annoying bug in the way it renders placeholder text. Consider the following HTML: <textarea placeholder="In loving memory of Buffy Anne Summers She saved the world A lot..."></textarea> This should render a textarea (a multi-line input box) pre-filled with…
Continue reading →
This is a sketch of a proposal for a new HTML element to simplify displaying maps on a website. I'd like your comments and criticisms before I submit it. This is born out of my frustration of using different JavaScript mapping solutions - my phone has a mapping app, why do I need to share my location with a website and their mapping provider? At the moment, if I want to use Google Maps, or…
Continue reading →
Recently, I've become obsessed with the speed and efficiency of my web sites. I'm in the middle of slimming down this blog - but I thought I'd take a first attempt at my contact site - https://edent.tel/ A few weeks ago, the .tel registry released their domain restrictions - users can now host their site anywhere. I'd already experimented with about.me/edent as a contact site - but even that…
Continue reading →
There are rarely new ideas in cryptography - and I doubt this idea is particularly innovative - but I thought it would be worth discussing. When I want to log in to a system on the web, I have to send that system my password. It is (one hopes) encrypted in transmission, but once it arrives at the server there is a brief window where the server holds my password in plaintext. It then hashes it…
Continue reading →
There is a new API in town! HTML5 will (soon) let you make the user's device vibrate. What fun! Obviously, it's useful for triggering alerts, improved immersivness during gameplay, and all sorts of other fun things like sending Morse Code messages via vibration. At the moment, Chrome (and other Android browsers) ask for permission before accessing features such as geo-location, camera,…
Continue reading →
Image adaptation and resizing is a hot topic at the moment. With devices of varying screensize accessing your site, how do you ensure that the crappy 240*240 phone gets a reasonable experience while still making everything look gorgeous on the retina-busting iPad? One of the very first things we're taught in HTML school is that we should separate content and style. <span font="comic sans"…
Continue reading →
