Modern CSS Round-Out Tabs – Frontend Masters Blog
We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.| frontendmasters.com
TanStack Start is one of the most exciting full-stack web development frameworks I’ve seen. I’ve written about it before. In essence, TanStack Start takes TanStack Router, a superb, strongly-typed client-side JavaScript framework, and adds server-side support. This serves two purposes: it gives you a place to execute server-side code, like database access; and it enables […]| Frontend Masters Boost RSS Feed
I’m just hearing about the closedby="any" attribute/value for <dialog>. HTML popovers have this “light dismiss” behavior where you can “click outside” to close them, but not dialogs (until this). I forked a previous demo to try it and it works great (in Chrome & Firefox, just waiting for Safari). I’ve been using a custom <ClickOutsideDetector […]| Frontend Masters Boost RSS Feed
In A Progressive Enhancement Challenge, I laid out a situation where the hardest thing to do is show a button you never want to show at all if the JavaScript loads and executes properly. I wrote of this state: It seems like the ideal behavior would be “hide the interactive element for a brief period, […]| Frontend Masters Boost RSS Feed
When you've got two buttons with two different looks (and no cursor), how do you know which one you're about to activate? You'll need to be careful with the design.| Frontend Masters Boost RSS Feed
All sorts of inputs have little microphone buttons within them that you can press to talk instead of type. Honestly, I worry my daughter will never learn to type because of them. But I get it from a UX perspective, it’s convenient. We can put those in our web apps, too. Pamela Fox has an […]| Frontend Masters Boost RSS Feed
Should have done 150.| Frontend Masters Boost RSS Feed
I liked this bit of JavaScript trivia from Cassidy Williams. There is a clear answer, and it’s something worth making sure you understand before heading into a job interview that involves JavaScript.| Frontend Masters Boost RSS Feed
Will Mendes has a bit of CSS to highlight accessibility issues on HTML elements. Things like missing alt text and labels that aren’t linked properly to inputs. If you want to try it out quick on a website, I wrapped it in a little injection JavaScript so you could paste it in the console wherever. […]| Frontend Masters Boost RSS Feed
We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.| frontendmasters.com
CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations.| Frontend Masters Boost RSS Feed
I admit I’ve never once used a Git Worktree. But Nick Taylor has a pretty good intro that compels me. (Nick credits bashbunni for her own intro). Git worktrees let you check out multiple branches from the same repository simultaneously, each in its own working directory. Instead of constantly switching between branches with git checkout, you […]| frontendmasters.com
Cursor is an AI-focused VS Code fork. Here's Steve Kinney with a nice overview of what it offers and how to start getting help out of it right away.| frontendmasters.com
If you thought 2024 was packed with amazing new CSS, well, you're right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.| frontendmasters.com
(Only Safari Technical Preview!) Awfully cool `random()` is coming in CSS. The design possibilities are quite cool.| frontendmasters.com
All the browsers DevTools have a way of emulating color modes. The are essentially faking the system preference at the application level. Here's where those controls are located and another nice tool.| frontendmasters.com
You can get your hands on ranges of text in JavaScript, then apply a named| frontendmasters.com
You can keep it chill and just use HTML email to apply a nice typeface, reign in the line length, use real links, and honor dark mode.| frontendmasters.com
TanStack Router is a comprehensive JavaScript framework for client-side applications, emphasizing type-safe routing and navigation. It includes nested layouts and efficient data loading.| frontendmasters.com
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 […]| frontendmasters.com
“Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things.| frontendmasters.com
JavaScript Frameworks generally do a lot of DOM handling for you, but doing it yourself can be the most performant option, and there are quite a few best practices.| frontendmasters.com
CSS developers got the ultimate dream: container queries. But now that they are here, are we actually reaching for them as much as we thought we would?| frontendmasters.com
My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t […]| frontendmasters.com
If you find yourself removing a border from an element that has a border and are tempted to use border: 0 , border: none, or outline: none, I’d urge you to stop for a moment and reconsider. It’s like the old G.K. Chesterton saying about fences: Do not remove a fence until you know why […]| frontendmasters.com
Safari 17.4 dropped an interesting an unexpected feature, a native UI toggle switch control! It’s so new it’s not even in the HTML spec yet. While that might be a blocker for your project, you can use it today as a progressive enhancement on top of the standard checkbox input.| frontendmasters.com
You want a quick web performance win at work that’s sure to get you a promotion? Want it to only take five minutes? Then I got you. Capo.js is a tool to get your| frontendmasters.com
