Ben Frain — Web developer, author, and educator creating books, video courses, and YouTube content focused on responsive web design, modern CSS, frontend workflows, and practical techniques for building high-quality websites.
46 articles from this blog
A technical guide on implementing CSS scroll indicators for tables with colored backgrounds using modern animation-timeline and grid techniques.
A guide to customizing VS Code to highlight only the active indent guide using a color customization workaround.
A detailed review of the MoErgo Go60, a premium split ergonomic keyboard with wireless capability, programmable keys, and built-in trackpads.
A detailed review of the Kinesis mWave, an ergonomic mechanical keyboard, covering its features, programmability, and typing experience.
iOS26 Safari's theme-color and tab-tinting feature is broken when using fixed-position elements like modals, causing unwanted color changes.
Explains a workaround using @supports with a proxy feature to conditionally apply CSS @starting-style animations in supported browsers.
A front-end developer explores the basics of View Transitions API for creating smooth animations between DOM states using HTML, CSS, and JavaScript.
A CSS tutorial explaining how to center items in a container while ensuring they become left-aligned and scrollable when they overflow.
A tutorial on creating a pure CSS donut-shaped countdown timer using conic gradients and masks, compatible with any background.
A comparison review of Bose Ultra Open and Huawei FreeClip open-ear headphones, focusing on design, comfort, sound quality, and value.
A developer compares CSS autocomplete behavior in VSCode, Neovim plugins, and Sublime Text, arguing Sublime's handling of semicolons is superior.
A guide to manually managing multiple Node.js versions using shell aliases and downloaded binaries, without relying on NVM or other version managers.
A detailed review of the Keychron Q14 Max, a premium mechanical keyboard with a unique left-side number pad and Alice layout.
A technical analysis comparing CSS Grid and Flexbox performance, finding no significant speed difference in modern browsers.
A detailed review of the updated Advantage360 Pro Signature Edition ergonomic mechanical keyboard, covering build quality, new features, and personal user experience.
A personal experiment comparing a 42-key mechanical keyboard to larger models, focusing on the use of layers to reduce physical keys.
A guide to performing project-wide find and replace operations in Neovim using Telescope, Quickfix, and the cfdo command.
A detailed review of the Keyboardio Model 100, a premium split mechanical keyboard with a wooden case, programmable keys, and custom sculpted keycaps.
A developer shares their challenging journey learning SwiftUI, comparing it to web frameworks and detailing the initial struggles and eventual breakthroughs.
A clever CSS technique for creating rounded gradient borders that work with semi-transparent or blurred backgrounds, using masks and pseudo-elements.
