Ben Frain – author and web developer
It was not part of their blood, It came to them very late With long arrears to make good, When the English began to hate. They were not easily moved, They were icy-willing to wait Till every count should be proved, Ere the English began to hate. Their voices were even and low, Their eyes [ ]
I had to make a modal recently, it happened to be in React, so some of what follows is React specific, but the principles are all good ol' CSS/HTML and JavaScript, so don't necassarily go running just because I'm using React here . wait, where are you going? Come back Oh well, just you left I [ ]
Imagine a HTML table, with alternating rows with different background colours. The table content overflows the container on the right but on a mobile browser, with no obvious scrollbar, there is no affordance to know the table is overflowing. I want to have a shadow/indicator on the side of the table that is overflowing the [ ]
You can watch the YouTube version of this review here. I ve reviewed the Bose Ultra Open and Huawei Free Clip earbuds before, and subsequently tried the SoundPEATS PearlClip Pro as a cheaper alternative. But the much cheaper PearlClips just didn t do it for me. However, when SoundPEATS asked if I wanted to try a pair [ ]
Long term readers may wonder – VS Code, Ben? Really? Let s not getting into that now, instead, just the issue before us. The problem before us is that we want to highlight just the active indent guide of the code in the editor. By default, VS Code highlights both the active indent level, and also, [ ]
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 buy right now. I m no MoErgo fanboy – in my review of their Glove80 I was pretty clear that there were areas I felt the Glove80 fell short. I feel [ ]
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 the features, and then I ll get to my thoughts on it. Features The mWave is a ergonomic mechanical keyboard that will set you back $119. Unlike [ ]
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 websites. This matters because their current manner of providing the appropriate color for tab-tinting doesn t work either. Aside: You could also set the theme color value in the [ ]
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 s been many months in the making, and as ever, I learnt heaps in the process. If you want a bang up to date resource on the latest [ ]
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 for the level of support we need. In this case, I know that @starting-style came out in Safari 17.5, and at the same time, text-wrap-style was introduced in Safari [ ]
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, I wanted to understand them a little more and start making use of them in production. I imagine I am where most working front-end devs are at this point; aware [ ]
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 watch the video of this review here: https://youtu.be/P4CnC4ZQyo0?si=8UQxaS_yyvjxEeD1 BenQ asked me if I wanted to try out their ScreenBar Pro or ScreenBar Halo. I knew nothing about either, [ ]
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, from left to right (first item flush with the left hand side of the container, overflowing items go off the right). Here is where I started: The problem div [ ]
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 me. Today, I want to document how it can solve another. What if you want a countdown ‘donut timer’, the sort of UI used throughout iOS to indicate a download [ ]
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 out walking I have been using Air Pods. However, I find them very frustrating. If I knock them scratching my ear, they drop out. If I pull [ ]
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 declarative nature lends itself to strumming out a bunch of property/value pairs that an autocomplete can often do the heavy lifting for. 3-4 keystrokes gets you the equivalent of 20-30 characters. [ ]
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 installer everytime and re-install. You want a quicker way of loading the relevant version. The crux of this approach is installing two or more different [ ]
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 interesting quirk; a number-pad on the wrong side of the keyboard. I’ve been looking at Alice layouts for a little while, these kind of split but not actually split [ ]
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 the course? The short version of this post, is that you can purchase the course here: https://www.packtpub.com/en-us/product/responsive-web-design-with-html5-and-css-9781835887028 What is this course about? Over the years, and different [ ]
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. Well, not for the scenario I tested anyway. The tests I took 200 elements with a nested element. The DOM for each was like this: div [ ]
Want the video version? Find it on YouTube here: https://youtu.be/1hqwPiRHLtQ?si=bMroc6eVd0chQbU0 I originally reviewed the Advantage360 Pro back in November of 2022. And that was an overwhelmingly positive review. But not without some grumbles. For example, the configuration software on the Pro version was extremely clunky, and there was also Bluetooth connection issues at times. Since [ ]
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 number of keys. I’d long held the belief that I couldn’t sensibly get by with less than about 55 keys but never put the theory to the test. This [ ]
I have a fix for the perennial problem with position: sticky and overflow. Well, my perennial problem anyway. What is the problem, Ben? Position sticky is defined like this at MDN: is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level [ ]
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 format like csv or txt. In those instances there will be times when you want to do a find and replace across multiple files. How can we do that [ ]
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 YouTube channel here. Setting it apart from most keyboards, is that it is made primarily from wood; you can choose walnut, as I did, or a lighter coloured maple. [ ]
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 is a sliver of light in my comprehension. Just enough to give me the confidence to write this here, thinking there may be more posts [ ]
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 background. Finally, I came across this: https://forum.freecodecamp.org/t/how-to-make-a-css-border-gradient-with-transparent-background/571903/2 My pen https://codepen.io/benfrain/pen/KKEemKd is a fork of Lasse’s original from that post. I’ve not seen…
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 using Neovim, with the cmp auto-complete plugin, the little icons for the different kind of completions would show up in different sizes; even two versions of the same [ ]
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 year and a half later hear we are. The Defy keyboard from Dygma, is a split, programmable, columnar layout, hotswap keyboard that you can use wired or wireless with either RF [ ]
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 chained animations? by Ben Frain (@benfrain) on CodePen. I’m using WAAPI to run a series of animations. My reduction moves the box to the right, waits [ ]
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 worth documenting. I was trying to use the new CSS @property inside a lit/web component and couldn’t figure out what I was doing wrong. In this case [ ]
When working with lit.dev templates, very occasionally I find myself needing a reference to DOM elements that are being created inside a loop. Typically, this will be when I need to run animations on them and need a reference to them to do so. Suppose our render function looks like this: render() { return html` [ ]
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 difficult conceptually, I just couldn’t find all the correct pieces in one place… When you work with lit.dev there may be times when you need animate elements. [ ]
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 opened an issue at the CSS Working Group issues here, so add your thoughts: https://github.com/whatwg/html/issues/9936#issuecomment-1818385368 Imagine an interface. In it, there is a button. You click the [ ]
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 doesn’t use Choc switch spacing, and it’s not even wireless. But I absolutely love it. By the way, you can view the video version [ ]
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 concerns to higher-ups explaining that said narcissist is abusing their position and exhibiting narcissistic tendencies. This is an inconvenient and difficult possibility for higher-ups to contemplate or deal with, so these [ ]
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 Internet didn’t exist, I could not be fully effective with Neovim. Day to day, mundane editing tasks? Sure. But fully proficient? Like off the top of my head write the [ ]
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 lovely centered column, in the width of your choosing with spell checking enabled. Open a markdown (*.md) file, and go ‘Settings Settings Syntax Specific’ and you will [ ]
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 of the keyboard halves to allow a more natural angle between the wrist and where the hand sits while typing. The Moonlander keyboard from ZSA has some degree [ ]
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 infuriating. If that is you, and you just want to see if the solution works, do this: Download the Logitech options software. I know, really? Yes, [ ]
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 technique when I want to show a basic updating worm of data but don’t want to add an extra library. I’m using a bunch of stubbed data here to [ ]
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 color depth, or measuring of response time or any of that stuff you will find it a ‘proper’ review. This is about hands on, what is this [ ]
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’re thinking about de-soldering the stock keys of the Kinesis Advantage360, and soldering in your own, don’t. There, can’t be any clearer than that, can I? I broke my [ ]
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 crucially, switch between applications too. Want to watch a video version of this? It s on my YouTube channel here: https://youtu.be/s6vIP_1GrE4 So, as I have things currently, I [ ]
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 install NPM packages globally. Like many large workplaces, mine has strict rules on what you can and can’t ‘use’ when it comes to your text editor and associated [ ]
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 collating Neovim tips I’ve picked up along the way. Here, in no particular order, are a bunch of ‘Power User’ tips. Up and down through wrapped text If you [ ]
If you’d rather watch a video version, you can watch it here The Glove80, from MoErgo, joins a growing list of split, programmable, ergonomic keyboards. So how does the Glove80 stack up against the likes of the Advantage 360 from Kinesis and the Moonlander from ZSA? The short version is, this is a very comfortable [ ]
This is the written version of this YouTube review. This is a review of the Kinesis Advantage 360 Pro. A wireless, split, programmable ergonomic keyboard that cost around £550 to get my hands on here in the UK. Just let that settle in a minute. £550. For a keyboard. It doesn’t wash the dishes or [ ]
This is the written version of this YouTube review. I’ve built 4 Dactyl Manuforms, or similar variants, so far, and I’ve been using them for about 8 months. Dactyl’s are kind of considered the gold-standard of home made ergonomic keyboards and for the most part I’ve been really enjoying mine. However, a few weeks back, [ ]
I had to create something along these lines (pun intended) recently; a line that animates to nothing with ‘something’ on the end; as an exercise of the reader, maybe you can make it the fuse on a bomb, as it burns towards the explosion, ‘Wile E. Coyete’ style! To the best of my knowledge, Polygon [ ]