Frontend development is really not getting any easier lately… or is it?

From my perspective as a design engineer — someone who cares deeply about the user experience and is, let's be honest, less excited about backend plumbing — frontend tech is genuinely hard to keep up with. So many frameworks. So many competing paradigms. New tools every other week.

But here's the thing: there might be a whole bunch of ways to deliver HTML and CSS to a browser, but that deliverable is actually kind of agnostic of all that tech. Doesn't matter if you're on Next.js, SvelteKit, or rendering your WordPress site with PHP — the HTML and CSS that actually reaches your users is always the same.

That's why I love writing CSS.

I see a lot of very talented full-stack developers struggle with it. But to quote Kevin Powell (thank you for sharing all your wisdom 🙏) — I'm here to make you fall in love with CSS.

In recent years, CSS has had an avalanche of new features added to it. It's easy to lose track. So today I want to show you six of them that we're actually using on the Dinghy website, in production, right now — features that make for a great user experience and make my life easier at the same time.

Sine and Cosine for Circular Layouts Link to this headline

Trigonometry at work — no library needed. To position elements in a circle (like the magazine covers on Insights), you can use CSS sin() and cos() directly. Define an angle per item, multiply by a radius, and place it.

Why it matters: Before this, you were reaching for JavaScript or a third-party layout tool. Now it's a handful of CSS lines and pure math. Flexible, lightweight, zero dependencies.

Container Queries Link to this headline

Responsive components that react to their own size, not the viewport. A card inside a wide sidebar can look different from the same card in a narrow column — without media query gymnastics.

Why it matters: Your components become truly reusable. The layout decides the design, not the other way around. Grid-heavy pages like Insights get much more resilient and predictable.

Scroll-Driven Animations Link to this headline

Tie animations to scroll progress — natively, in CSS. No addEventListener, no requestAnimationFrame, no manual math.

Why it matters: Scroll-linked effects used to cost you a decent chunk of JavaScript and a lot of performance debugging. Now the browser handles the timing. Smoother, simpler, and declarative.

Clip-Path Link to this headline

Shape anything with a polygon and a list of points. On Insights, the newsletter preview has an envelope that opens on hover — the "flap" is a clip-path polygon, and animating two of its points on hover is all it takes to make it move.

Why it matters: Complex visual shapes used to mean SVGs, extra markup, or brittle positioning tricks. Clip-path keeps it in CSS, keeps it animated, and keeps it readable. And when you change the polygon on hover, the browser interpolates it smoothly.

View Transitions Link to this headline

Filter the Insights page by "Blog" or "Newsletters" and the cards glide into their new positions. They're full page navigations — unique URLs, real routing — but they feel like an animated tab switch.

The trick: give each item a unique view-transition-name. The browser snapshots the old and new layouts, matches elements by name, and animates the differences. In SvelteKit, it's literally one onNavigate call.

Why it matters: What used to require a custom animation system, shared layout state, and careful DOM management now needs almost no code. The platform figures out the "in between." The first time you see it work, it genuinely feels like cheating.

Popover API + Anchor Positioning Link to this headline

Menus, tooltips, dropdowns — all of them come with invisible complexity: toggle logic, escape key, click-outside, focus trapping, z-index management, accessibility. The Popover API handles all of that. Add popover="auto" to an element, point a button at it with popovertarget, and the browser does the rest. No JavaScript. No co-location required.

Anchor positioning then solves the where: even when the button and the popover are in completely different parts of the DOM, you can attach them with an anchor-name on the trigger and position-anchor on the popover. Then use anchor-top, anchor-bottom, anchor-center as real CSS values — instead of calculating pixel offsets from the viewport.

Why it matters: Accessible, robust overlays in a handful of HTML attributes. What used to be a side project in itself is now solved infrastructure.

All six of these are production-ready today. They don't require a framework, a library, or a clever abstraction on top. They're just the web platform, catching up to what we've been hacking around for years.

I'm making short deep-dive videos for each of these — more code, more detail. Let me know which one you want first. 👋