Building a Settings Component

In this episode of GUI Challenges, Adam Argyle builds a Settings Component with sliders and checkboxes. In this post I want to share thinking on building a Settings component for the web that is responsive, supports multiple device inputs, and works across browsers. Tons of CSS-knowledge in there: CSS Nesting CSS Grid Custom Properties for …

Three important things you should know about CSS :is()

Back in 2019 I shared how the CSS :is() selector will simplify things when writing CSS. What I didn’t know back then, and only have learnt quite recently, are these three important facts about CSS :is(): The selector list of :is() is forgiving The specificity of :is() is that of its most specific argument :is() …

HSL: a color format for humans

Over at the Cloud Four blog, Paul Hebert digs into HSL colors Colors on the web are confusing — but they don’t have to be! The HSL format makes it easy for humans and computers to work with color. Included are some nice CodePen-hosted Color Pickers, such as this one: See the Pen HSLA Color …

Easily write Twitter threads with ThreadStart

Whenever I write a Twitter Thread I carefully lay out my planned tweets in advance in a text editor. After manually adjusting my sentences to have tweetable parts, I tweet them out one by one. Quite a cumbersome work, where ThreadStart can do the heavy lifting for me instead: Creating a Twitter thread without guidance …

Too Many SVGs Clogging Up Your Markup? Try use

Good reminder by Georgi Nikoloff to have one (visually hidden) SVG that contains several layers, which you can then include further down in your code. SVG has a <defs> tag that lets us declare something like our graph footer just once and then simply reference it — using <use> — from anywhere on the page …

Manage your DNS from GitHub with DNSControl

In this post Sven Luijten uses DNSControl from within GitHub Actions to manage DNS: What if you could edit a JavaScript file with your desired DNS configuration, submit a pull request on GitHub, see a preview of the changes you are about to make, and when you merge it, have those changes be applied completely …

Debugging Layout Shifts

Over at web.dev, Katie Hempenius learns us how to identify and fix layout shifts using the Layout Instability API and the DevTools. What I take away from this is that you can easily spot them using DevTools: In the Rendering Panel you can enable an option to highlight areas of Layout Shift: To enable Layout …

Just-In-Time: The Next Generation of Tailwind CSS

Adam Wathan from Tailwind: One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even …