Designing for non-rectangular browser windows


A smartphone in the shape of a triangle.

How I miss the days when phone manufacturers were innovative. Nowadays everything is just a boring black rectangle. How to end a frontend developer's career pic.twitter.com/AYsI0pghh5 — Tawanda Nyahuye👨‍💻 (@towernter) May 6, 2022 I imagine that this (concept) device would probably just put the browser only on one row / column. Probably sensible, but utterly…

Continue reading →

Different ways to do separators in horizontal text


The HTML5 Logo.

Quite often on the web, you'll see a set of "things" with a separator between them. For example, at the top of this post, you'll see Thing 1 | Something Else | Another Thing. This provides clear visual separation between logical groups. But there are a couple of problems. Firstly, the separator character may not…

Continue reading →

Edit this blog post!


Me wearing a Google Glass headset

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 can add more…

Continue reading →

-webkit-text-stroke and emoji


Group of emoji.

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:…

Continue reading →

Pure CSS Corner Banner


Scratching my own itch. Here's how to make a "beta" ribbon in CSS. Place this HTML at the end of your document: <hr id="beta" aria-label="Warning this page is a beta."> (Doesn't have to be <hr> - use whatever makes sense in your design.) Then, add this CSS: #beta { float: left; top: 1.5em; left: -3em;…

Continue reading →

Adding a language tag to image elements


Text in a mixture of Chinese and English.

(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,…

Continue reading →

You don't need external assets in an HTML file


The HTML5 Logo.

(Written mostly to settle a good-natured disagreement.) One of the great advantages of HTML is that it can call on external resources. Your index.html can load a style.css and display a picture.jpg. But... it doesn't have to use external resources. (I know this isn't news to some of you - but everyone has to start…

Continue reading →

You can't print this blog post


A hand-held pink cube with paper coming out of it.

Update! It's fair to say no one liked this idea - so I've reverted it. Thanks for all the feedback 🙂 Do you ever see those daft email footers which say "Please consider the environment before printing this email." Like, who the fuck is still printing out their emails? Anyway, a few years ago I…

Continue reading →

How to fake AVIF thumbnail images


AVIF is the hip new image format. It is born out of video compression technology. Modern video streaming services have a complicated relationship with multiple resolutions. A video is usually encoded several time - for high, medium, and low bandwidths. When you start streaming, your playback device usually picks the lowest quality stream to start…

Continue reading →

Making Time More Accessible


Dev tools showing the HTML code behind the BBC news site.

There's an HTML element called <time>. It is a semantic element. That means robots can read and understand it. For example, if my code says: <p> The concert is <time datetime="2020-12-24">tomorrow</time> </p> Then the computer knows the specific date I'm talking about. A browser could offer to add the event to your calendar, or a…

Continue reading →