Each pseudo element plays a distinct role in how the view transition animates. The browser does most of the heavy lifting though, which makes it a little hard to see what’s actually happening under the hood.
A deep dive into producing an interpolated “gradient” of colors from just two provided colors.
:has() makes quantities queries both easier and more powerful. We can alter how a grid is laid out and where the children go. Or, we can just blast it into a carousel.
The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.
After you’ve got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.
We’ve got @scope in CSS now, and it’s got it’s uses. But the concept of scope in CSS is a wider idea.
This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.
Hot off the presses! Firefox Nightly adds the new :heading pseudo! Easily style all headings, or use nth-child-like AnB syntax to select a range of headings! Needs
Keith Cirkellayout.css.heading-selector.enabledflag enabled.
Microsoft is working on “gap decorations” and have put together a nice playground to explore them, and I had a play. The idea is drawing lines where gaps would be, rather than empty space. It’s really quite well done with lots of control (do they hit the edges or stop short? do they overlap or not? which direction is on top? etc).
To see them as of right now, you need to open Chrome Canary with a flag. Not one of the about://flags flags, but a command-line flag. I had never done that before, but it basically means drilling into the .app to launch from inside it with the flag.
/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-features=CSSGapDecoration
It all really makes me want to be able to style grid areas without needing to place an HTML element there to do it.
Feels notable that Iterator helpers have become Baseline Newly available. The gist is that you can map and filter on stuff that was annoying or impossible to before. I’ll copy Jeremy Wagner’s example:
const posts = document.querySelectorAll("ul#specific-list > li")
.values()
.filter(item => item.textContent.includes("kiwi"));
// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
console.log(post.textContent);
}Code language: JavaScript (javascript)I thought Ashley Willis did an excellent job explaining the role in What Is Developer Advocacy? (2025 Edition).
We’re still here to serve developers. And we’re still doing the messy, meaningful work of bridging the gap between what a company thinks developers want and what developers actually need.
I liked the perspective that it’s actually better for a developer advocate to be a little removed from day to day development at the company itself:
… our value often comes because we’re not too close to the implementation. We can see the experience from a developer’s point of view. We notice when onboarding is confusing, when SDKs are missing critical examples, when the documentation skips the “hard but honest” parts.
Some Q&A from Brian Rinaldi on the topic is interesting as well.
Developer news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.