Typically, buttons are either pressed or they aren’t. But as long as you handle it accessibly, you can make a group of radio inputs look like a multi-state button with some CSS trickery.
A halftone is a pattern of dots that vary in size and spacing. It’s a printing technique that you normally don’t see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!
I find this hard to remember and it’s come up for me a few times lately so I’m writing it down gosh darn it! The individual corner border-radius values, like border-top-right-radius (which is hard enough to remember on its own) have logical property versions, meaning that should the flow of the document change, the border […]
A CSS Custom Property can be used to tweak colors darker when shown on light and lighter when shown on dark, making them pop in both cases.
TanStack Query, or react-query, simplifies client-side data fetching with features like caching, automatic re-fetching, and error handling. It integrates smoothly with TanStack Router, allowing efficient prefetching and loading states using hooks like useSuspenseQuery.
TanStack Router is one of the most exciting projects in the web development ecosystem right now, and it doesn’t get nearly enough attention. It’s a fully fledged client-side application framework that supports advanced routing, nested layouts, and hooks for loading data. Best of all, it does all of this with deep type safety. This post […]
One approach to color modes it to do it all in CSS with prefers-color-scheme media queries and/or the light-dark() function. A user toggle can be a future improvement.
In 2024, A Book Apart closed its doors after publishing a much-loved collection of more than 50 brief books for people who make websites. The rights to each book have reverted to the authors — hi, that’s us — and we’ve put together this semi-official directory to help you find our books in their new homes.
My own book on SVG is in there, which I chucked on my own website and wrote about here.
Kevin Powell pitted several AI models against each other in a video focused on CSS questions and found Claude to be the best. I think a ton of coding usage of AI is in VS Code which leans Microsoft Copilot which uses GPT-4o by default although you can change it in the UI, so it might be worth giving others a shot. I like how using different models is pretty developer friendly these days.
I’ve seen Gemini do pretty decently particularly when you help it along with a custom “Gem” where you can explain in more detail exactly who you are and what you’re looking for. I know ChatGPT also has custom instructions which will likely improve things there too, or at least good for a prank. (Another good front-end-y custom prompt here.)
I’ve seen AI do some pretty horrible summarizations of content lately, particularly Apple Intelligence trying to summarize a handful of texts on my phone, but generally that’s a thing AI does pretty well. Since we all should know truncation is not a content strategy, using AI to do it as part of responsive design isn’t the worst idea, so long as you’re checking it closely.
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSS
Jen Simmons introduces the hot-off-the-presses background-clip: border-area; which can produce some pretty compelling and real-world designs with a few lines of sensible CSS.
I suspect our recent background-clip trickery would be simplified with this new value because we wouldn’t have to put a fake background over the padding-box to get the effect.
It’s a fun idea to do a full-on March-Madness style-playoff bracket for choosing a coding font. Still a Monolisa guy myself.
Here's our page on guest writing. It's a win-win-win!
Frontend Masters Donates to open source projects. $363,806 contributed to date.