I recently saw Robin Moisson's method of password protecting a statically served HTML page. It's quite neat! But it does rely on JavaScript. That got me wondering if there was a way to encrypt a static page only using CSS? And... I think I've done it! I'll warn you now, this is a deeply stupid way to solve the problem. Here's a screencast of the demo in action: …
Continue reading →
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 < to prevent any HTML injection. Except… It let through <h2> elements unaltered! Why? I suspect because the output was: <h2>Your search for ... returned no results</h2> And, somehow, the parser was g…
Continue reading →
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 be placed on the left or right. So I wanted something which mimicked "Paper…
Continue reading →
How I miss the days when phone manufacturers were innovative. Nowadays everything is just a boring black rectangle. Tawanda Nyahuye👨💻@towernterHow to end a frontend developer's career pic.x.com/AYsI0pghh5❤️ 5,589💬 151🔁 006:19 - Fri 06 May 2022 I imagine that this (concept) device would probably just put the browser only on one row / column. Probably sensible, but utterly BORING! Let's imagine …
Continue reading →
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 be interpreted correctly by screen readers. They may read out "Vertical Pipe",…
Continue reading →
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 to tell websites to always use the dark theme. 2 to tell websites you have no p…
Continue reading →
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: pink 1px; draws a pink outline around text. This…
Continue reading →
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; position: absolute; /* or fixed if you want it to always be visible */ …
Continue reading →
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 with a broken image. Booo! So, how do we fix this?…
Continue reading →
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 background tab. Then visit that tab. On Chrome, this is what I see. If I hit the refresh button on that tab, the …
Continue reading →
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 went along to a blogging event where someone had printed out one of my blog posts. I was stunned. Th…
Continue reading →
I'm a weirdo - I fully admit that. As part of my home working set up, I use a vertical monitor. I read and write a lot of long documents - and this form factor suits me perfectly. I've been doing this for a long time. It is a natural part of my workflow. For anything longer than an email, it's the perfect orientation. Most Linux apps work just fine like this - although menu buttons tend to…
Continue reading →
