Stefano Magni
@noriste.bsky.social
Passionate, positive-minded, Sr Front-end Engineer @ Preply (Design System) / Front-end advisor @ Plannix / ex Hasura (platform team), WorkWave (team leader) / Speaker / Instructor / Writer
Pinned
Stefano Magni
@noriste.bsky.social
· Nov 6
Visual coverage: Why and How Preply Measures the Impact of the Design System
We implemented a custom way to measure the impact of the Design System, and we measure it on user’s devices.
medium.com
My latest/most popular articles:
- Visual coverage: Why and How Preply Measures the Impact of the Design System (+ open source code) medium.com/preply-engin...
- Some things I learnt from working on big frontend codebases dev.to/noriste/some...
Full list+courses+talks github.com/NoriSte/all-...
- Visual coverage: Why and How Preply Measures the Impact of the Design System (+ open source code) medium.com/preply-engin...
- Some things I learnt from working on big frontend codebases dev.to/noriste/some...
Full list+courses+talks github.com/NoriSte/all-...
Small yet very useful testing suggestion!!!! 👏👏👏
📰 Today, I've got a practical testing tip for you. I've picked this one up relatively recently and I've been using it for testing anything async since. And I think you should use it, too!
Let's talk about the `.resolves` chaining in your assertions.
www.epicweb.dev/prefer-the-...
Let's talk about the `.resolves` chaining in your assertions.
www.epicweb.dev/prefer-the-...
Prefer the `.resolves` Chaining
Improve the error experience when testing asynchronous code with the `.resolves`/`.rejects` chaining.
www.epicweb.dev
November 24, 2025 at 4:51 PM
Small yet very useful testing suggestion!!!! 👏👏👏
I had so much fun chatting with Dan!!! 😍
🎙 New episode of Señors @ Scale is out!
This time with @noriste.bsky.social , Senior Front-End Engineer &
Tech Lead at Preply — we talk about scaling design systems, balancing perfectionism with pragmatism, and working in public.
Watch here 👇
youtu.be/DMF3dOcAbsM
This time with @noriste.bsky.social , Senior Front-End Engineer &
Tech Lead at Preply — we talk about scaling design systems, balancing perfectionism with pragmatism, and working in public.
Watch here 👇
youtu.be/DMF3dOcAbsM
Design Systems at Scale with Stefano Magni, Tech Lead at Preply
YouTube video by Neciu Dan - The Señor Developer
youtu.be
November 4, 2025 at 3:12 PM
I had so much fun chatting with Dan!!! 😍
> Sorry for the spam but I wanted to say kudos for the great storybook documentation 📷 I had to interact with several components for the first time and docs made it way easier.
Sharing the joy we received from a design system user ❤️
Sharing the joy we received from a design system user ❤️
November 3, 2025 at 4:05 PM
> Sorry for the spam but I wanted to say kudos for the great storybook documentation 📷 I had to interact with several components for the first time and docs made it way easier.
Sharing the joy we received from a design system user ❤️
Sharing the joy we received from a design system user ❤️
Unmissable talk for who works on DX and for everyone to understand how the dev tools you use can help your LLM workflow
Netlify CEO @biilmann.blog explains the critical shift from Developer Experience (DX) to the new paradigm of Agent Experience (AX), demonstrating how the next generation of web development tools must be built for AI agents to use effectively.
Full videos in comments 👇
Full videos in comments 👇
October 31, 2025 at 7:16 AM
Unmissable talk for who works on DX and for everyone to understand how the dev tools you use can help your LLM workflow
After a couple of weeks of using it, I can say that the user experience of the DX platform is neat and perfect...
October 25, 2025 at 1:13 PM
After a couple of weeks of using it, I can say that the user experience of the DX platform is neat and perfect...
You can't imagine how much time I spent encouraging engineers to do the same, sharing all the advantages I gained from writing, speaking, and teaching.
It's an advantage for companies too, I've recently given an internal talk at Preply about the hiring benefits with numbers.
x.com/joaoqalves/s...
It's an advantage for companies too, I've recently given an internal talk at Preply about the hiring benefits with numbers.
x.com/joaoqalves/s...
João Alves on X: ".@karpathy says the best way to learn is to build things. He’s right, but as engineers, we know that’s only half the story. Writing, teaching, or preparing a talk forces you to understand what you have built. That’s what this post is about. Link below 👇 https://t.co/zTW4WwUfMD" / X
.@karpathy says the best way to learn is to build things. He’s right, but as engineers, we know that’s only half the story. Writing, teaching, or preparing a talk forces you to understand what you have built. That’s what this post is about. Link below 👇 https://t.co/zTW4WwUfMD
x.com
October 22, 2025 at 1:03 PM
You can't imagine how much time I spent encouraging engineers to do the same, sharing all the advantages I gained from writing, speaking, and teaching.
It's an advantage for companies too, I've recently given an internal talk at Preply about the hiring benefits with numbers.
x.com/joaoqalves/s...
It's an advantage for companies too, I've recently given an internal talk at Preply about the hiring benefits with numbers.
x.com/joaoqalves/s...
Don't miss the latest, amazingly detailed, super in-depth Nadia's article 👏👏👏
React Server Components: do they improve performance or make it worse?
If your answer is “I’ve no idea 😅,” I wrote a deep-dive to answer that! Experiments and real numbers, CSR vs SSR vs RSC, same app + test setup.
Focus: initial load + data fetching.
www.developerway.com/posts/react-...
If your answer is “I’ve no idea 😅,” I wrote a deep-dive to answer that! Experiments and real numbers, CSR vs SSR vs RSC, same app + test setup.
Focus: initial load + data fetching.
www.developerway.com/posts/react-...
React Server Components: Do They Really Improve Performance?
A data-driven comparison of CSR, SSR, and RSC under the same app and test setup, focusing on initial-load performance and the impact of client- vs server-side data fetching (including Streaming + Susp...
www.developerway.com
October 22, 2025 at 10:39 AM
Don't miss the latest, amazingly detailed, super in-depth Nadia's article 👏👏👏
I've just applied @simonwillison.net 's Vibe Engineering for delivering a small GitHub Action 😊 simonwillison.net/2025/Oct/7/v...
Vibe engineering
I feel like vibe coding is pretty well established now as covering the fast, loose and irresponsible way of building software with AI—entirely prompt-driven, and with no attention paid to …
simonwillison.net
October 13, 2025 at 10:52 AM
I've just applied @simonwillison.net 's Vibe Engineering for delivering a small GitHub Action 😊 simonwillison.net/2025/Oct/7/v...
Nice morning surprise right after opening Slack 😍
October 13, 2025 at 7:28 AM
Nice morning surprise right after opening Slack 😍
This article contains what I'm re-learning working in a design system team (especially because of the a11y act), after a decade spent in web games and high interactive websites, then a decade on B2B complex apps ♥️
alfy.blog/2025/10/04/h...
alfy.blog/2025/10/04/h...
How Functional Programming Shaped (and Twisted) Frontend Development
alfy.blog
October 10, 2025 at 4:06 AM
This article contains what I'm re-learning working in a design system team (especially because of the a11y act), after a decade spent in web games and high interactive websites, then a decade on B2B complex apps ♥️
alfy.blog/2025/10/04/h...
alfy.blog/2025/10/04/h...
In case you missed that the same @storybook.js.org great DX is coming to React Native..... 😍
Of course, if you can't render your RN components with RN Web, you'll miss what you get from Chromatic but... @dannyhw.com is cooking, look at this bsky.app/profile/nori...
Of course, if you can't render your RN components with RN Web, you'll miss what you get from Chromatic but... @dannyhw.com is cooking, look at this bsky.app/profile/nori...
🆕 Building beautiful components faster with Storybook 9 and Expo
This guest post by @dannyhw.com covers how to:
• Add Storybook 9 to an Expo app
• Catalog UI states and share them with your team
• Distribute Storybook builds using EAS
• Reuse stories for automated tests
expo.dev/blog/storybo...
This guest post by @dannyhw.com covers how to:
• Add Storybook 9 to an Expo app
• Catalog UI states and share them with your team
• Distribute Storybook builds using EAS
• Reuse stories for automated tests
expo.dev/blog/storybo...
Building beautiful components faster with Storybook 9 and Expo
Learn how to set up Storybook 9 in your Expo app to build, test, and share React Native UI components faster and with less friction.
expo.dev
September 26, 2025 at 4:15 AM
In case you missed that the same @storybook.js.org great DX is coming to React Native..... 😍
Of course, if you can't render your RN components with RN Web, you'll miss what you get from Chromatic but... @dannyhw.com is cooking, look at this bsky.app/profile/nori...
Of course, if you can't render your RN components with RN Web, you'll miss what you get from Chromatic but... @dannyhw.com is cooking, look at this bsky.app/profile/nori...
Wait, what?!
The best end-to-end (Figma<>code) Design System, built by one of the most experienced design (and principal) engineer, that used to cost 1K$ because of its quality and completeness, that has plenty of happy clients... Is it now fully open-source? 🤯
x.com/blvdmitry/st...
The best end-to-end (Figma<>code) Design System, built by one of the most experienced design (and principal) engineer, that used to cost 1K$ because of its quality and completeness, that has plenty of happy clients... Is it now fully open-source? 🤯
x.com/blvdmitry/st...
Dima Belyaev on X: "When starting Reshaped, having a paid license kept me going but also felt wrong sometimes. I wanted to give back more to the community. After 5 years – it is finally happening. Reshaped React and Figma libraries are now open-source. https://t.co/1kOhDcBAde Get the links below ✨" / X
When starting Reshaped, having a paid license kept me going but also felt wrong sometimes. I wanted to give back more to the community. After 5 years – it is finally happening. Reshaped React and Figma libraries are now open-source. https://t.co/1kOhDcBAde Get the links below ✨
x.com
September 9, 2025 at 8:17 AM
Wait, what?!
The best end-to-end (Figma<>code) Design System, built by one of the most experienced design (and principal) engineer, that used to cost 1K$ because of its quality and completeness, that has plenty of happy clients... Is it now fully open-source? 🤯
x.com/blvdmitry/st...
The best end-to-end (Figma<>code) Design System, built by one of the most experienced design (and principal) engineer, that used to cost 1K$ because of its quality and completeness, that has plenty of happy clients... Is it now fully open-source? 🤯
x.com/blvdmitry/st...
I wrote about code reviews more than once ( see dev.to/noriste/supp... for example), and I definitely suggest Matthias' article to find key suggestions for reviewers endler.dev/2025/how-to-...
https://dev.to/noriste/suppor…
August 30, 2025 at 4:15 AM
I wrote about code reviews more than once ( see dev.to/noriste/supp... for example), and I definitely suggest Matthias' article to find key suggestions for reviewers endler.dev/2025/how-to-...
In 20 minutes, I didn't get to make react-scanner work with Oxc Parser (www.npmjs.com/package/oxc-.... but given that Oxc Parser claims that
> the AST conforms to @typescript-eslint/typescript-estree's TS-ESTree format.
It's just a matter of dedicating a bit more time 😍
> the AST conforms to @typescript-eslint/typescript-estree's TS-ESTree format.
It's just a matter of dedicating a bit more time 😍
www.npmjs.com
August 21, 2025 at 5:30 AM
In 20 minutes, I didn't get to make react-scanner work with Oxc Parser (www.npmjs.com/package/oxc-.... but given that Oxc Parser claims that
> the AST conforms to @typescript-eslint/typescript-estree's TS-ESTree format.
It's just a matter of dedicating a bit more time 😍
> the AST conforms to @typescript-eslint/typescript-estree's TS-ESTree format.
It's just a matter of dedicating a bit more time 😍
"What I Wish Someone Told Me When I Was Getting Into ARIA"
Definitely the best practical article I've ever read about ARIA 😍
www.smashingmagazine.com/2025/06/what...
via @stefanjudis.com of course 😎
Definitely the best practical article I've ever read about ARIA 😍
www.smashingmagazine.com/2025/06/what...
via @stefanjudis.com of course 😎
What I Wish Someone Told Me When I Was Getting Into ARIA — Smashing Magazine
[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is an inevitability when working on web accessibility. That said, it’s everyone’s first time learning ...
www.smashingmagazine.com
August 14, 2025 at 5:32 AM
"What I Wish Someone Told Me When I Was Getting Into ARIA"
Definitely the best practical article I've ever read about ARIA 😍
www.smashingmagazine.com/2025/06/what...
via @stefanjudis.com of course 😎
Definitely the best practical article I've ever read about ARIA 😍
www.smashingmagazine.com/2025/06/what...
via @stefanjudis.com of course 😎
Well, @storybook.js.org's Danny is cooking something veeeeeeery interesting 🤩
- Interaction tests function for React Native github.com/storybookjs/...
- Screenshot testing for React Native github.com/dannyhw/rn-s...
- Interaction tests function for React Native github.com/storybookjs/...
- Screenshot testing for React Native github.com/dannyhw/rn-s...
feat: experimental playfn by dannyhw · Pull Request #751 · storybookjs/react-native
Issue: #734
What I did
playfnexample.mp4
How to test
Please explain how to test your changes and consider the following questions
Does this need a new example ...
github.com
August 11, 2025 at 7:43 AM
Well, @storybook.js.org's Danny is cooking something veeeeeeery interesting 🤩
- Interaction tests function for React Native github.com/storybookjs/...
- Screenshot testing for React Native github.com/dannyhw/rn-s...
- Interaction tests function for React Native github.com/storybookjs/...
- Screenshot testing for React Native github.com/dannyhw/rn-s...
How do you (automatically) test your React Native components' a11y? Join the discussion on @storybook.js.org 's Discord channel 😊
discord.com/channels/486...
discord.com/channels/486...
Discord - Group Chat That’s All Fun & Games
Discord is great for playing games and chilling with friends, or even building a worldwide community. Customize your own space to talk, play, and hang out.
discord.com
August 8, 2025 at 9:38 AM
How do you (automatically) test your React Native components' a11y? Join the discussion on @storybook.js.org 's Discord channel 😊
discord.com/channels/486...
discord.com/channels/486...
Learning on the go: this Rating component (it's interactive, and it has tooltips for each star) is so "anonymous" (from an HTML perspective) that Axe can't even detect a11y violations 😅
August 8, 2025 at 9:18 AM
Learning on the go: this Rating component (it's interactive, and it has tooltips for each star) is so "anonymous" (from an HTML perspective) that Axe can't even detect a11y violations 😅
I'm now a sponsor of @stefanjudis.com because I want to support the incredible work he does with webweekly.email, that is my favorite newsletter nowadays 😍
👇
👇
Web Weekly — Your friendly web development newsletter
webweekly.email
August 8, 2025 at 3:44 AM
I'm now a sponsor of @stefanjudis.com because I want to support the incredible work he does with webweekly.email, that is my favorite newsletter nowadays 😍
👇
👇
Clear examples with a clean way to compose server and client components: data in RSCs, UI in Client components, nothing more 😊
New blog post on practical examples of server and client component composition, inspired by real projects!
We'll cover client wrappers with state, animations, and effects, as well as utilizing Suspense boundaries strategically.
aurorascharff.no/posts/server...
We'll cover client wrappers with state, animations, and effects, as well as utilizing Suspense boundaries strategically.
aurorascharff.no/posts/server...
Server and Client Component Composition in Practice | Aurora Scharff
In this blog post, I will show you how to compose client and server components effectively in React. We will explore patterns for keeping responsibilities clear, optimizing performance, and creating r...
aurorascharff.no
August 5, 2025 at 8:21 PM
Clear examples with a clean way to compose server and client components: data in RSCs, UI in Client components, nothing more 😊
I had some time to spare, and I read the nice Giovanni Pereira's accessibility handbook github.com/giovaninppc/... the React Native accessibility docs reactnative.dev/docs/accessi... ... 👇
GitHub - giovaninppc/AccessibilityHandbook: An iOS accessibility guide written in SwiftUI with examples in both SwiftUI and UIKit, and a Puzzle game to help learn more about accessibility features in ...
An iOS accessibility guide written in SwiftUI with examples in both SwiftUI and UIKit, and a Puzzle game to help learn more about accessibility features in iOS. - giovaninppc/AccessibilityHandbook
github.com
August 4, 2025 at 7:10 AM
I had some time to spare, and I read the nice Giovanni Pereira's accessibility handbook github.com/giovaninppc/... the React Native accessibility docs reactnative.dev/docs/accessi... ... 👇
I admit, I'm guilty for leaving bad todos in code 😅
sophiebits.com/2025/07/21/t...
Thanks @sophiebits.com for writing this small yet useful suggestion ♥️, and @maxiferreira.com for sharing!
sophiebits.com/2025/07/21/t...
Thanks @sophiebits.com for writing this small yet useful suggestion ♥️, and @maxiferreira.com for sharing!
TODOs aren’t for doing
sophiebits.com
July 29, 2025 at 3:15 AM
I admit, I'm guilty for leaving bad todos in code 😅
sophiebits.com/2025/07/21/t...
Thanks @sophiebits.com for writing this small yet useful suggestion ♥️, and @maxiferreira.com for sharing!
sophiebits.com/2025/07/21/t...
Thanks @sophiebits.com for writing this small yet useful suggestion ♥️, and @maxiferreira.com for sharing!
> In the Who Cares Era, the most radical thing you can do is care. In a moment where machines churn out mediocrity, make something yourself. Make it imperfect. Make it rough. Just make it.
From "The Who Cares Era" by dansinker.com
dansinker.com/posts/2025-0...
From "The Who Cares Era" by dansinker.com
dansinker.com/posts/2025-0...
The Who Cares Era | dansinker.com
dansinker.com
July 28, 2025 at 7:47 AM
> In the Who Cares Era, the most radical thing you can do is care. In a moment where machines churn out mediocrity, make something yourself. Make it imperfect. Make it rough. Just make it.
From "The Who Cares Era" by dansinker.com
dansinker.com/posts/2025-0...
From "The Who Cares Era" by dansinker.com
dansinker.com/posts/2025-0...
Now and then, I go to update UI Testing Best Practices, a collection of articles based on my own and Murat Ozcan experience when it comes to testing UIs 😊
github.com/NoriSte/ui-t...
(I feel guilty not to update it more frequently, given it has 1.7K stars 😅)
github.com/NoriSte/ui-t...
(I feel guilty not to update it more frequently, given it has 1.7K stars 😅)
GitHub - NoriSte/ui-testing-best-practices: The largest UI testing best practices list (last update: March 2023)
The largest UI testing best practices list (last update: March 2023) - NoriSte/ui-testing-best-practices
github.com
July 20, 2025 at 12:27 PM
Now and then, I go to update UI Testing Best Practices, a collection of articles based on my own and Murat Ozcan experience when it comes to testing UIs 😊
github.com/NoriSte/ui-t...
(I feel guilty not to update it more frequently, given it has 1.7K stars 😅)
github.com/NoriSte/ui-t...
(I feel guilty not to update it more frequently, given it has 1.7K stars 😅)
I love how getting your web content accessible makes a lot of CSS classes redundant 😊
July 12, 2025 at 1:43 PM
I love how getting your web content accessible makes a lot of CSS classes redundant 😊