2025: made stuff
2026: make more stuff 🧑🍳
15.01.2026 17:33
👍 165
🔁 8
💬 4
📌 2
2025: made stuff
2026: make more stuff 🧑🍳
Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays!
webkit.org/blog/17660/i...
Here is my idea with less of code
css-tip.com/tooltip-anch...
The trick is to play with the margin property to show/hide the arrows.
cc @una.im @bram.us
⚡Featured posts this week from Perf Links by WebPerformance Report:
⚡Featured posts this week:
✨ How to enrich RUM data in Datadog: @gokberknur.bsky.social
✨ Time to Brand Identity: @duffeh.bsky.social
✨ Core Web Vitals mystery: @tunetheweb.com
✨ Safari Tech Preview now supports INP: Apple
🙏 Special thanks to the authors!
#webperf
Dr. Jane Goodall filmed an interview with Netflix in March 2025 that she understood would only be released after her death.
amazing!
CSS uses a complex algorithm to decide how to animate transforms. If you get it wrong, as many folks do, you end up with an unnatural animation.
Here's how it works, and how to avoid the pitfalls.
jakearchibald.com/2025/animati...
DoomPDF – This is a Doom source port that runs inside a PDF file.
doompdf.pages.dev
Must reads for web developers - how modern browsers work:
1️⃣ bit.ly/browsers-pt1
2️⃣ bit.ly/browsers-pt2
3️⃣ bit.ly/browsers-pt3
4️⃣ bit.ly/browsers-pt4
and browser.engineering a free to read book on the topic
View Transitions Snippets: Getting all Animations linked to a View Transition
🔗 brm.us/view-transit...
🏷️ #ViewTransitions #JavaScript #Animations
This article is such a gem! And the talk at Performance.sync() was too:
youtu.be/E2E89NeBbEM?...
Animation frames is quite the theme of the year for me 😁. It was fun to record this talk 😀
Web performance calendar day 23 when @webx.bsky.social takes us on a dive into animation frames
calendar.perfplanet.com/2024/what-is...
Documentation: "Don't do this. This is a really bad idea."
Developer:
Web performance calendar day 9 with @ethangardner.com on how to relate performance efforts to our friends from ads, marketing and the C-level
calendar.perfplanet.com/2024/putting...
Fear not, you can have VDOM, hooks and signals for 8.35kb minzipped!
Complete CSS. Take your CSS skills beyond the next level. Available now with early bird launch discount. £189, down from £249.
After 15+ years of teaching, architecting & delivering CSS for global organisations & startups, I’ve collated that experience into an extensive course.
Complete CSS has taken nearly a year to produce and finally, it’s officially live for a limited Black Friday launch price of £189
complete-css.com
I've come to understand what's happening in frontend's decade-long failure to deliver decent user experiences as a sort of epistemic closure. I'm calling it "frameworkism", and the epicenter is now React. Here's a lot of words on why we should all reject it:
infrequently.org/2024/11/if-not-r…
My talk from this year's We Love Speed is on YouTube! 👇
In "Tight Mode: how browsers REALLY load web pages", I take a very deep/very nerdy dive into why browsers sometimes intentionally delay loading resources, why they all do it differently, and why they should *stop clowning around* 🤡
#webperf
It's a minor footnote in the trail of prevarications and half-truths that follow React everywhere it goes, but it's pretty incredible that the poster children are *this* bad given 2024 devices and networks:
treo.sh/sitespeed/www.in…
treo.sh/sitespeed/www.ai…
👨🔬 Experiment/Hack: Automatically triggered View Transitions thanks to MutationObserver
Instead of adding `document.startViewTransition` at various places in your JS, this uses a MutationObserver to watch for DOM mutations. When a mutation occurs, it gets undone and then reapplied wrapped in a VT.
Screenshot of my Bluesky profile, showing @nicolo-ribaudo.github.io as the handle
Developers, do you want to verify yourself here but don't have a personal domain? You can use your GitHub account! 🦋🐱
I temporarily renamed myself to @nicolo-ribaudo.github.io :)
a screenshot of a web application with two inputs, a drop down, two checkboxes, one button … underneath are 10 squares of dark to light green. underneath are Css custom properties, Sass variables, and json with relevant names and values
(one of) the other side project(s)
a simple tint/shade colour palette generator that
- converts hex (for now) to rgb, hsl, p3-display
- generates
- a colour palette
- CSS custom properties
- Sass variables
- JSON for Style Dictionary
(will also be able to add more than colours)
🙏🖤
The problem with how easy npm makes it to install something (and hide the impact of installing something) is that developers inadvertently end up with huge impactful dep trees. But we can do better!
app: "hello world"
terminal: 1259 packages added!
our design system build with stencil, but that was few years ago. Nowadays I see people are talking about lit more often, and mentioning design system built with lit. So I was wondering what sort of trades of we have it here when it comes to web-components library?
Hey everyone! I ended my #perfnow talk by asking you all to consider contributing to the broader #webperf community.
And one project I called out was e18e.dev. They're trying to connect together people working on JS packages performance (example below). Please consider joining their discord!
If you ever need to coordinate npm scripts you really should check out Wireit
Wireit is like the missing script runner for npm. It lets you describe script dependencies, inputs, & outputs; then runs scripts & deps in order and caches their output.
github.com/google/wireit
i didnt know you were at perfnow also! i could ask web component related questions 😂
