css demo HowTo HTML5 · 2 comments · 150 words · Viewed ~1,484 times
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); } …
Continue reading →
(Written because I couldn't find an easy guide online.) Here's the code (formatted for readability): <time datetime="{{page.first_published_at|date:"c"}}"> {{page.first_published_at|date:"j F Y"}} </time> You can also use last_published_at if it is a page which has been updated. WHY?!??! Semantics. HTML5 contains the <time> element. The contents of it show up as normal running text, but…
Continue reading →a11y accessibility HTML5 Open Source WordPress · 2 comments · 200 words
In order to provide a video playback UI, WordPress uses the excellent MediaElement library. Recently, I discovered a slightly annoying flaw - I couldn't see the play button! Here's a screenshot of the video UI. In the middle of this screenshot is a white play button. I have trouble seeing it, because the video's background colour is predominantly white. The issue is with the…
Continue reading →design equality gender HTML5 · 15 comments · 600 words · Viewed ~899 times
I was signing up to a website the other day, and it wanted to know my title. Here are the options it offered me: Look, I get it. If I'm ever daft enough to undertake a PhD and masochistic enough to complete it - I am going to demand that everyone addresses me as Doctor Who Doom Octopus. But why this ordering? Why distinguish between male and female doctors? Let's see if the source code holds…
Continue reading →accessibility HTML5 usability · 3 comments · 450 words · Viewed ~685 times
HTML is magic. It comes with all sorts of great usability and accessibility features. But people often ignore them or misuse them. Take a look at these checkboxen: If you click on this label, nothing happens. If you click on this label, the checkbox will toggle This is important. Tapping on tiny squares is hard for lots of people. Whether they have visual impairments, motor issues, or just…
Continue reading →css HTML5 images Web Development · 9 comments · 550 words · Viewed ~2,147 times
WebP is the hip new image format on the scene. It offers unrivalled image compression at superior visual quality. But, in my opinion, it is deficient compared to JPG in one significant aspect. It doesn't have a progressive mode. Progressive mode is useful because it can quickly load a low resolution preview of an image, and then gradually improve its quality. WebP, by contrast, just loads up…
Continue reading →browsers css CSS Naked Day HTML5 · 4 comments · 300 words · Viewed ~1,459 times
Half-a-dozen years ago, I proposed that web developers spend one day a year browsing without JavaScript. It's a great way to see how the web works when things break. Similarly, April 9th is CSS Naked Day. A chance to throw off the shackles of good design, and see the raw beauty of your HTML. Today is intended for websites to remove their own style sheets - as this blog has done. The idea…
Continue reading →HTML5 images standards web · 9 comments · 400 words · Viewed ~333 times
Noodling thoughts. The humble <img> element is one of the oldest parts of HTML. It allows you to put a static image in a document. Later revisions allowed for animated images - like GIFs. And the <map> element made parts of the image clickable. But what about interactive images? Like panoramas and photospeheres? Here's a 360° image. You can drag it to see all around. That uses the …
Continue reading →Bug Bounty HTML5 Responsible Disclosure security · 550 words · Viewed ~887 times
The HTML5 specification is complicated. I've been an author on it, and even I couldn't tell you all the weird little gotchas it contains. Between that and "idiosyncratic" browser engines, it's a wonder the world wide web works at all. Let's talk about the humble <meta> element. As its name suggests, it contains metadata about the document. A typical element might look like this: <meta…
Continue reading →api citation HTML5 python schema.org · 650 words · Viewed ~255 times
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 itemprop="citation" itemscope…
Continue reading →HTML5 maps NaBloPoMo OCSE OpenStreetMap · 2 comments · 600 words · Viewed ~653 times
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 - an Open Source web maps library which is pretty hackable. Get started …
Continue reading →google HTML5 standards web · 15 comments · 750 words · Viewed ~47,425 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 call up an animated virtual assistant. I've spoken to several people in Microsoft, and we …
Continue reading →