The transition to the Rust version of the React Compiler for the 1,036-file React Router codebase resulted in a significant speed increase, improving build times from 14.3 seconds to 0.81 seconds. The...

In defense of the girliest programming language.

New posts from front-end blogs, newsletters and podcasts, gathered in one place. Every post belongs to its author: a short excerpt here, the full post on their site.

Straw.Page is the world's simplest website builder. Create unique websites from your mobile device.

YouTube video by Kevin Powell

It’s annoying when your browser zooms if a button is rapidly tapped. There’s actually a really simple fix and no, you don’t have to prevent all zooming with a meta tag!

Chrome 154 adds support for responsively-sized iframes, letting an iframe size itself based on the intrinsic size of its embedded document.

It's an interesting and potentially useful trick to have an element know where it is on a grid. That's tricky enough when the items are in one row/column, but what about when they span?

A box-shadow is an obvious choice for an inner glow of an element to highlight it. But with some fancy masking, we can use any overlay style we want.

We can animate an element along the border edge of another element to random positions... pretty easily? Might as well be a cute dog.

Motion-Primitives is an open-source UI kit to make beautiful, animated interfaces, faster. Built for React, Next.js, and Tailwind CSS.

Community-made library of free and customizable UI elements made with CSS or Tailwind. It's all free to copy and use in your projects. Uiverse can save you many hours spent on building & customizing U...

A collection of beautifully designed, accessible, and customizable map components. Built on MapLibre GL. Styled with Tailwind CSS. Works with shadcn/ui.

A library of spring-driven micro-interactions for web apps. Copy the CSS or React, tune the physics, ship the motion.

The web will calcify without voices sharing what they know.

YouTube video by General Musings with Kevin Powell

The Feature Carousel again, with no JavaScript. The row is a scroll-snap container, and every card runs its animations on its own <code>view-timel

Select a card to open it. Opening is one aria-expanded flip wrapped in document.startViewTransition(): the card and its frame stretch to the new heigh

Masonry.js was famous for creating, uh, Masonry layouts. But it did something else, too: animate fluid grids. Here's a way to get that in native CSS as well as the layout.

YouTube video by Kevin Powell

A code demo by Rob created on CodePen

A visual refresh with a background that changes colour according to the time of day, using the new Temporal API along with CSS custom properties that blend into each other.

A code demo by Rob created on CodePen

An ornamental game loading screen built from a reference animation in plain HTML and CSS, with no JavaScript anywhere. The band resolves out of a poin

The whole point of auto-fit and auto-fill is that you aren't saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

Measure style recalculation, invalidation, and selector matching performance across browser engines using Chromium’s PerfTestRunner and Puppeteer.

Thanks to some very modern CSS, we can visually replicate the logic of scrollbars. Then make them actually functional.

A code demo by Rob created on CodePen

This is Part 1 of a two-part series about cross-document view transitions, going over all the gotchas, from ditching the deprecated way to opt into them to a little-known 4-second timeout.

We're a while off from being able to leverage ::checkmark with checkbox styling, but here's a decent way to get the styling control you want, while preserving the useful parts of the native input element.

YouTube video by General Musings with Kevin Powell

Just how much does TTFB matter when it comes to front-end performance?

So here is the plan: Fork it on CodePen, or screenshot your browser! https://codepen.io/editor/ivorjetski/pen/01a07dcf-a1e8-7ab6-aea1-aa98135803b3 - Mess with the code - Draw something amazing live in the browser and screenshot it - Hack to pieces and create a monster Send me your art! Add the tag #ledart on CodePen or @ me on X, Bluesky, Insta or where ever, find me and @ me. @ivorjetski My next video will feature all the best and maddest creations. Good luck! Your time starts now! P.s. you can find a bit more info here: https://dev.to/ivorjetski/css-led-art-challenge-5e6b And as usual, video, music and art all produced by me @ivorjetski Or just say hi: https://linktr.ee/ivorjetski

YouTube video by Syntax

YouTube video by Kevin Powell

It's an interesting and potentially useful trick to have an element know where it is on a grid. That's tricky enough when the items are in one row/column, but what about when they span?

Because I haven't published anything to it since August 31. And no one else has either. That's not a super long time to go silent but it is for a site that

A code demo by Rob created on CodePen

We're joining Shopify to give Tailwind a stable long-term home where it will be actively maintained for the millions of people who depend on it.

Friendly articles and tutorials for front-end web developers. ❤️

The new Speculation Rules API is incredibly powerful, but we can do so much more! By taking a layered approach, we can add more progressive functionality.