Feed - Ben Frain

Review: MoErgo Go60, a split ergonomic and fully programmable keyboard 🔗

I’m going to call this from the start. The Go60 is the best travel-friendly split keyboard, perhaps even the best all-around split keyboard, you can b [...]

Review: Kinesis mWave mechanical ergonomic and programmable keyboard 🔗

If you want to take some first steps into the mad rabbit hole of ergonomic keyboards, I can recommend the Kinesis mWave. Let me give you a rundown of [...]

iOS26 Safari theme-color/tab-tinting with fixed position elements is a mess 🔗

In iOS26, Safari dropped support for/broke theme-color; the meta tag you coud add to your head to get colored bits at the top and bottom of your websi [...]

New Book: Responsive Web Design with HTML5 and CSS, 5th Edition 🔗

I’m happy to announce a new, bigger than ever, 5th edition of the best-selling book, Responsive Web Design with HTML5 and CSS. Where can I buy it? It’ [...]

Use @supports with a proxy feature/value for features you can’t test for (@starting-style) 🔗

You can’t use @supports to feature test for @starting-style. But what we can do, is use another, different property value pair, that is a good proxy f [...]

First adventures in View Transitions 🔗

Until recently I had taken only the most cursory look at View Transitions. Now they are in Safari too, and therefore viable across multiple platforms, [...]

Review: Benq Screenbar Pro and Halo lightbars. The kit you never knew you needed! 🔗

Introduction Let me tell you about a piece of hardware, I never thought I needed, but now wouldn’t be without. It’s a ScreenBar from BenQ. You can wat [...]

Center items in a container, and make then left aligned when they overflow 🔗

I wanted a number of items, centered horizontally in a container, and when there are too many items to fit, the items should overflow the container, f [...]

A single element CSS donut timer/countdown timer, that can sit on any background 🔗

During last year, I championed how you can use rounded gradient borders with any background. This approach has solved a great many UI challenges for m [...]

Review: Open Ear Headphones – Bose Open Ultra v Huawei FreeClip 🔗

You can watch the YouTube version of this review here When I’m at my desk, typically, I use over the ear Bower and Wilkins Px7 headphones. When I’m ou [...]

In search of the perfect autocomplete for CSS 🔗

Forget about any of your AI nonsense, I’m talking good ol’ autocomplete. CSS differs than most other frontend languages/dialects I write in that its d [...]

Managing multiple versions of node, without NVM or additional tools 🔗

So, you are in a situation where you have to use specific versions of Node, but don’t have access to NVM or N. Its a pain to do the clicky-clicky inst [...]

Review: Keychron Q14 Max Alice 96 Key mechanical keyboard 🔗

Watch this review on YouTube if you prefer? The Keychron Q14 Max is premium mechanical keyboard that can be run wired or wirelessly and has an interes [...]

NEW VIDEO COURSE: Responsive Web Design with HTML5 and CSS 🔗

For the last year I have been working hard on the video version of my best-selling book, Responsive Web Design with HTML5 and CSS. Where can I take th [...]

Is CSS Grid really slower than Flexbox? 🔗

Search for ‘is CSS Grid slower than Flexbox’ and you’ll find a few posts explaining that it is. In my experience, even if it was, it is not anymore. W [...]

Review: Advantage360 Pro Signature Edition 2024 mechanical ergonomic keyboard 🔗

Want the video version? Find it on YouTube here: https://youtu.be/1hqwPiRHLtQ?si=bMroc6eVd0chQbU0 I originally reviewed the Advantage360 Pro back in N [...]

More Keys or Fewer Keys for mechanical keyboards 🔗

I a 42-key keyboard for a couple of months to see how it compares to keyboards like the Glove80 and Advantage360; keyboards with nearly double the num [...]

Yes! You can use position: sticky and overflow together 🔗

I have a fix for the perennial problem with position: sticky and overflow. Well, my perennial problem anyway. What is the problem, Ben? Position stick [...]

Neovim – how to do project-wide find and replace? 🔗

There are plenty of occasions when using an LSP to ‘rename’ a symbol isn’t possible. Perhaps you are amending JSON files, or some other basic data for [...]

Review: Keyboardio Model 100, split, wooden, mechanical keyboard 🔗

The Model 100 is a split, ergonomic, programmable keyboard from Keyboardio Want to watch the video version of this review? You can watch it on my YouT [...]

Struggling to learn SwiftUI 🔗

For the past ten days or so, I have been trying to gain some basic competency with SwiftUI. I have found it hard. Very hard. But I finally feel there [...]

How to create rounded gradient borders with any background in CSS 🔗

A solution! For many months I have been trying to find a decent solution to rounded gradient borders that allow a semi-transparent or blurred main bac [...]

How to get equal size icons in the cmp completion menu of Neovim with Kitty terminal 🔗

I’ve written a about my favourite Terminal emulator, Kitty, before. I am a big fan. However, there was one thing that was bugging me about it. When us [...]

Review: Dygma Defy, split, mechanical, programmable ergonomic keyboard 🔗

You can watch the YouTube version of this review here: https://youtu.be/fVpinjluogQ I joined the Kickstarter for the Dygma Defy back in July 2022. A y [...]

What’s the best way to reset WAAPI chained animations? 🔗

There are often times where I want to reset a sequence of chained animations I have made using WAAPI. Here is a reduction: See the Pen How to reset ch [...]

Using CSS @property inside shadowRoot (web components) workaround 🔗

Another adventure using lit and another little ‘Gotcha’ I picked up from the good folks on the lit Discord. This one was niche enough I felt it was wo [...]

Dynamically create a ref for items when iterating over them in lit.dev templates 🔗

When working with lit.dev templates, very occasionally I find myself needing a reference to DOM elements that are being created inside a loop. Typical [...]

Selecting and pausing running animations in Lit Web Components 🔗

The reason this post exists is because it took me sometime to figure this out, and there seems to be a lack of lit focused literature. It’s not diffic [...]

New Web APIs — a popover on top of a dialog element can’t be interacted with? 🔗

Update 20.11.23 — the current behaviour of not being able to interact with a popover above a modal dialog is ‘as spec’ but could maybe be tweaked. I o [...]

Review: ZSA Voyager, split, mechanical keyboard 🔗

This is a review of the Voyager from ZSA. It is a mechanical keyboard that costs over $350. It only has 52 keys, you can’t use MX switches in it, it d [...]

Russel Brand, narcissism, and a sadly common pattern… 🔗

A narcissist is given a pass in the workplace because they perform a useful function for higher-ups. People in a position below narcissist raise conce [...]

When it comes to text editors, I feel like Goldilocks 🔗

Falling between two stalls I often find myself torn between the approaches of traditional and modal text editors. I am now convinced that if the Inter [...]

Simple settings for writing and converting markdown with Sublime Text 🔗

Prettify your markdown There are dedicated markdown packages, but if you write in Sublime, here are some very simple tweaks you can make to get a love [...]

Review: The ZSA Platform tenting kit for the Moonlander keyboard 🔗

You can watch the video version of this review here Some users find a lot of comfort in tenting their split ergonomic keyboard – adjusting the pitch o [...]

Logitech MX Master 3/3s scroll wheel fix 🔗

You arrived here because you have a Logitech MX Master 3 mouse, and sometimes you try and scroll up and it just doesn’t do anything. I know, it is inf [...]

Building a line graph with CSS clip-mask 🔗

This isn’t a substitute for d3 or chart.js. It is however, a surprisingly simple and effective way of creating a line graph. I’ve used this clip-path [...]

Review: Dell 6K 32″ Monitor U3224KBA 🔗

If you’d rather see the video version of this review, you can watch it on YouTube here. This isn’t a technical review. There won’t be any testing of c [...]

I broke my keyboard! Swapping the key switches in the Kinesis Advantage360 Pro 🔗

I swapped out the switches in my Advantage360, my most expensive keyboard, and broke it. Want to watch the YouTube version? So, my advice is, if you’r [...]

HUGE macOS Productivity boost: Set-up simple, keyboard only, instant App switching and arrangement 🔗

I want to share a way of working, which, using just your keyboard enables you to not only move the windows of an application around with ease, but cru [...]

Adding to $PATH for a central location for Neovim/NPM tools 🔗

I needed a single location to install my LSPs and other NPM related tools for Neovim, which allows for ‘locked down’ versions and without the need to [...]

Neovim Power Tips: Volume 2 🔗

If you want to see the video version of this content, it’s on my YouTube channel here: https://youtu.be/yMs97o_TdBU. For the last year or so I’ve been [...]

Ben Frain