Stefano Magni articles - 49 total
How Preply improved INP on a Next.js application (without React Server Components and App Router)
This article has been originally posted on Preply's engineering blog. To improve our two most...
The Implementation Details of Preply’s Design System Visual Coverage (part II)
This article has been originally posted on Preply's engineering blog. Implementing the coverage...
Visual coverage: Why and How Preply Measures the Impact of the Design System (part I)
This article has been originally posted on Preply's engineering blog. We implemented a custom way to...
Production-grade gradient bordered, transparent, and rounded button
There are a lot of articles out there on making gradient-bordered buttons, but the ones I read do not...
Some things I learnt from working on big frontend codebases
Until now (May 2024), I had three experiences working on very big front-end (React+TypeScript)...
Frontend Platform use case - Acting before a real Product need
This article is about what happens when you anticipate Platform activities before a real company need...
Frontend Platform use case - Enabling features and hiding the distribution problems
Like other similar products, Hasura is distributed and can be consumed in a lot of different ways,...
Frontend Platform use case - Creating a roadmap without a Product Manager
How we created a roadmap for the Frontend Platform team without clear expectations. Photo by Mitch...
Hasura E2E tests chronicles, February 2023
I joined Hasura in May 2022, and one of my first tasks was to fix the E2E tests of the Hasura...
Improving UI tests' code with debugging in mind
UI tests are made up of a lot of steps and should accomplish three main things, but two of them are...
One long E2E test or small, independent ones?
While speaking about testing a CRUD app, how should we organize the "create", "modify", and "delete"...
Improving Hasura's Internal PR Review process
During 2022, thanks to Haystack, we realized our Pull Requests stayed open, on average, for seven...
Decouple the back-end and front-end test through Contract Testing
Context I (a Front-end engineer, keep it in mind) recently championed an initiative aimed...
Re-building a branch and telling a story to ease the Code Review
What tools I use and how I proceed when I am done with the code and I am about to open a PR? I...
A Case History: Analysing Hasura Console's code review process
How a code review process can be speeded up? What are the practices we can follow to get PRs merged...
Hasura Console UI coding patterns: Testing
This is a non-exhaustive list of the coding patterns the Hasura Console's front-end team follows....
My take on Snapshot Testing
It's true that Snapshot Testing got a lot of traction in recent years in the frontend world due to...
Keeping TypeScript Type Guards safe and up to date (a simpler solution)
This article is about improving the solution shared by Michal Szorad in his TypeScript: Keeping Type...
The challenges of rendering an OpenLayers map in a popup through React
RouteManager is a Route Optimization Software for delivery businesses, heavily based on maps. We...
Speed up E2E tests for Vite-based apps
Before Vite we used long bundling waitings, and applications loaded instantly in the browser. Now,...
RouteManager UI coding patterns: Redux Saga
This is a non-exhaustive list of the coding patterns the WorkWave RouteManager's front-end team...
How I ease the next developer reading my code
Recently, I jumped on the codebase of a small product of ours (an integration with Shopify) to...
From unreadable React Component Tests to simple, stupid ones
Here are the rationales, the mental process, and the patterns at the base of the refactor of some old...
How I strive for XState machine, types, and tests readability
I recently drove an internal XState Working Group, where every participant has to implement a simple...
Support the Reviewers with detailed Pull Request descriptions
Is it worth investing hours describing what a bunch of lines of code do? Who will benefit? The...
RouteManager UI coding patterns: Immutability
This is a non-exhaustive list of the coding patterns the WorkWave RouteManager's front-end team...
RouteManager UI coding patterns: React Hooks
This is a non-exhaustive list of the coding patterns the WorkWave RouteManager's front-end team...
RouteManager UI coding patterns: React
This is a non-exhaustive list of the coding patterns the WorkWave RouteManager's front-end team...
RouteManager UI coding patterns: TypeScript
This is a non-exhaustive list of the coding patterns the WorkWave RouteManager's front-end team...
RouteManager UI coding patterns: Arrays
This is a non-exhaustive list of the coding patterns the WorkWave RouteManager's front-end team...