What's the most malicious thing you can do with an injected HTML heading element?


The HTML5 Logo.

A bit of a thought experiment - similar to my Minimum Viable XSS and SVG injection investigations. I recently found a popular website which echoed back user input. It correctly sanitised < to &lt; to prevent any HTML injection. Except… It let through <h2> elements unaltered! Why? I suspect because the output was: <h2>Your search…

Continue reading →

Paper Prototype CSS


An HTML table - every element is askance.

Introducing Paper Prototype CSS. When I first started designing the OpenBenches website, I wanted to make it look deliberately crappy. I didn't want the people testing it getting too hung up on what it looked like. I've found that some beta testers can only focus on whether the colours are right, or if things should…

Continue reading →

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 →

Howto: Stop Firefox Forcing Dark Mode on Websites


Firefox dev tools. A pop up informs you that the colour scheme can be toggled.

Here's how to stop Firefox automatically turning on dark-mode for websites. In the address bar, type in about:config and press ⏎ and accept the warning it gives you. Add a new value ui.systemUsesDarkTheme set it to type number and pick one of the following: 0 to tell websites to always use the light theme. 1…

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 →

Replacing broken avatar images with background SVG Emoji


Group of emoji.

When someone on Twitter mentions my blog, the WordPress WebMentions plugin automatically fetches those Tweets and turns them into comments on the blog post. It looks something like this: That is pretty cool - but has one slight problem. If someone changes their Twitter avatar, or deletes their account, the image disappears and I'm left…

Continue reading →

What's the window size of a background tab?


The Outer window size is zero by zero.

Whenever I open Twitter in a new tab on my phone, the page layout looks weird for a few seconds. It starts out looking like the desktop view and then, after a few seconds, it snaps back to the mobile view. What's causing this? Try opening this link to a window size detector in a…

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 →