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.
A dozen years go by, it turns out we can do things a lot differently and a lot better. Here a `scroll` event is entirely replaced by HTML and CSS features and much better performance.
Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!
If you put your custom properties (tokens) for every component in an @layer, then overriding them is never a fight.
The attribute `hidden=”until-found” can be quite useful in HTML, but we’ll need another unexpected bit of CSS to ensure space is reserved.
You might think of the view() function as used in scroll-driven animations, but really it just pairs @keyframes animation with the current position of an element.
In Part 2 of the series on using Cloudflare with Web Apps, the focus is on setting up a database and addressing key issues like performance and connection management.
Lumis looks like a pretty sweet new syntax highlighter tool. Powered by Tree-sitter, of which I can vouch for its speed and power. I like how many runtimes it supports, almost encouraging server-side use, which is the best place for the job when you can pull it off.
There is a famous document from the CSS Working Group that lists the historical mistakes in the design of CSS. It contains stuff like how box-sizing: border-box; should have been the default, which is why a lot of us still put that in starter stylesheets.
Declan Chidlow took a step I’ve never seen anyone take before in making a library to fix the mistakes. A “novelty” they call it, which… yes. Users probably shouldn’t be paying a runtime cost for this stuff; we should just work around it as we have since forever. But it’s a hilarious idea taken all the way home. Plus, it’s on Tangled, so it might be an excuse to figure out how the heck all that works. (Declan has their own reset too, btw.)
Mat Marquis details the good-and-dangerous of a new method which we can just make a screenreader say something.
There’s a brand new
ariaNotify()method — defined by the Accessible Rich Internet Applications (WAI-ARIA) 1.3 Specification — that provides you with a means of programmatically triggering narration in a screen reader. It accepts a string as its first argument, and an optional configuration object as its second:
document.ariaNotify("Hello, World.");Code language: JavaScript (javascript)In the past, exotic tangos with aria-live were required. The dangerous part is that, in becoming too easy, it will do more harm than good, like an alert("Click here to open the navigation."); So like Mat Says:
So just be cool about this, okay? Okay.
The WebKit gang did a good job with The Field Guide to Grid Lanes showcasing what kind of layouts are now achievable with display: grid-lanes;. Basically: Masonry layout, with arbitrary column widths, and proper tabbing order, is now progressive-enhanceable and HTML/CSS only.
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!
Master.dev 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.