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: https://shkspr.mobi/blog/wp-content/uploads/2023/02/fucking-stupid-css-encryption-lol.mp4 Type the password and the page…
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 getting confused. OK, what can we do with this little vector? The first thought is to u…
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 Prototyping". A website which looked vaguely hand-drawn. As though it were scraps of paper and…
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,760💬 162♻️ 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 a few bonkers devices. Here's a daft concept phone with a punch-hole camera cutting out its screen…
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", which isn't very user friendly. Similarly, robots may not attach the correct semantics to the…
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 preference. Dev Tools If you want to do this on a one-off basis, open up the Dev Tools and click on t…
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 has a pink outline! Nifty! But what happens if you apply to emoji? Smile 😁, Star ⭐, Melon 🍈 Nothing…
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 */ transform: rotate(-45deg); background: red; color: white; font-weight: bold; …
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? With the awesome power of SVG and Emoji! As pointed out by Lea Verou, SVGs can contain Emoji. Which…
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 Outer window size snaps back: What's going on? According to the specification: 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. They'd stuck of loads of my posts (and other people's posts) on a mood board. Because I'm a digital fu…
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 hide behind overflows. Websites though, ah! That's where the problem begins. Lots of websites think…
Continue reading →
