Convert DOI to a HTML5 / Schema citation

by @edent | # # # # #
The DOI logo.

This is a quick and dirty way to turn a DOI (Digital Object Identifiers for academic papers) into an HTML & Microdata citation. I use this to power my Citations page. Schema.org is a Microdata standard which allows machines to read your HTML and create semantic relations between documents. Here's a minimum viable citation: <blockquote…

Continue reading →

Creating an "Organization of Cartographers for Social Equality" map with OpenStreetMap

by @edent | # # # # | 1 comment | Read ~276 times.
Map of the world, south up, stretched.

If you've seen that episode of The West Wing, you'll remember this scene: I'm not a paying member of the OCSE, but I fully support their aims. Because messing around with maps is fun. So, can I build a web-first maps which is South-up, Pacific-centred, and Peters-projected? Here's what I managed to do using OpenLayers…

Continue reading →

Introducing the new HTML element - welcome <clippy>!

by @edent | # # # # | 13 comments | Read ~46,463 times.

Hello! It looks like you're writing a blog post - would you like help with that? chuckles Me and my colleagues at Microsoft have decided that the world needs more Clippy - the adorable animated paperclip. To help with that, we're bringing a new feature to Edge 6.0. Web Developers can now use <clippy> to…

Continue reading →

Adding Sign Language to HTML5 video

by @edent | # # # | 5 comments | Read ~269 times.
Video with overlay.

I watched this video from my colleagues in NHS England - it's the first time I've seen a Sign Language overlay on a Twitter video. Need help fast, but not sure what to do? Go straight to https://t.co/8VfK81f9u3 . To find out more about NHS 111 including how to use the NHS 111 BSL interpreter…

Continue reading →

Automatic preview image based on screenshot

by @edent | # # # | 3 comments | Read ~539 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 ~220 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 ~517 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 ~284 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,895 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 →