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 →
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 →
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 →
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 →
