Automatic preview image based on screenshot

by @edent | # # # | 3 comments | Read ~513 times.

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… Continue reading →

Limitations of HTML's title element

by @edent | # # # # | 7 comments | Read ~196 times.
The raw HTML displays in the tab.

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… Continue reading →

Updating all the examples in the HTML5 Spec

by @edent | # # | 3 comments | Read ~502 times.
A screenshot showing the difference between two text files.

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… Continue reading →

Using canvas to shrink images for Google Cloud Vision

by @edent | # # #
The HTML5 Logo

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… Continue reading →

textarea placeholder bug in Firefox

by @edent | # # # # | Read ~234 times.
Screenshot - the text is rendered on a single line

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… Continue reading →

Mapping in HTML - a proposal for a new element

by @edent | # # # # | 17 comments | Read ~4,864 times.
Two men are confused by a paper map

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… Continue reading →

How I built a responsive & semantic "Contact Me" page in under 16KB

by @edent | # # # # # # | 1 comment | Read ~8,449 times.

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… Continue reading →

Password Hashing In The Browser

by @edent | # # # | 7 comments | Read ~2,616 times.

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… Continue reading →

Malicious Use of the HTML5 Vibrate API

by @edent | # # # # # # # # | 43 comments | Read ~101,574 times.

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… Continue reading →

Should < img > Deprecate "height" and "width"?

by @edent | # # # # # # | 1 comment | Read ~597 times.

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… Continue reading →