01.About02.Experience03.Projects04.Skills05.ContactTech.Watch resources
Technology watch

2024/09

2024/09/11

Version support policy and ESLint v8.x end of life
The support for the v8 ends in October 2024. Team should migrate to v9 with flat config. ESLint partners with HeroDevs to provide support on EOL versions.
This week in React#200đź“ťArticle
Replacing React code with CSS :has selector
Another article on the :has selector with use cases specific to React, such as highlighting elements in a table, managing focus, styling fieldset based on the state of its input, etc.
This week in React#200đź“ťArticle
The Undeniable Utility Of CSS 
Great article showing interesting use cases of the :has pseudo-class, such as preventing a document to scroll if a modal is opened. It might remain simpler to write some styling using JS in some cases.
This week in React#200đź“ťArticle
Modern Data-Fetching in React
Comparison of data-fetching strategies such as client-side with useEffect, useQuery, with a React Router loader, the Next and Remix approaches and a deep dive in RSC. .
This week in React#200đź“ťArticle
Vitest cheat sheet
Great cheatsheet summarizing Vitest matchers, specific mocking patterns and use cases.
This week in React#200đź“ťArticle
React and FormData
The FormData type is not enough used even if it’s really powerful. It has some constraints in TypeScript which we can easily bypass using libraries like zod.
This week in React#200đź“ťArticle
Tailwind v4 alpha demo
Quick presentation of how the JS config file is no longer needed and everything can be configured within the global.css file directly.
This week in React#200đź“ąVideo

2024/09/04

Inside ECMAScript: JavaScript Standard Gets an Extra Stage
The TC39 committee has updated the process for JavaScript standardization, making it faster and smoother to roll out new features. A new stage, 2.7, has been introduced to reduce redundant work in producing a complete test suite, allowing proposals to advance more smoothly to Stage 3. Large proposals sometimes face challenges, leading to revisions and rework, but the introduction of Stage 2.7 aims to streamline the process and reduce wasted effort.
This week in React#199đź“ťArticle
Blending Markdown and React components in NextJS
Exploration of MDX to be able to embed React components in Markdown files, while also supporting metadata. It thus enables interactive and rich content alongside traditional Markdown text. Files are stored on git directly instead of using a database to benefit of the static server-side rendering features provided by Next. .
This week in React#199đź“ťArticle
The Complete Developer Guide to React 19, Part 2: New Enhancements
2nd part of this article, mainly focused on React 19 improved error reporting, ref passed as default prop, simplified context consumption, initial value for useDeferredValue hook.
This week in React#199đź“ťArticle
The Complete Developer Guide to React 19, Part 1: Async Handling
Great article summarizing React 19 beta stable features aimed at enhancing state management, error handling, and async operations. Great examples of useTransition, useOptimistic, use, RSC and Server Actions.
This week in React#199đź“ťArticle
What the heck is atomic state management?
The author explores the concept of atomic state management and its implementation using Jotai, a library that simplifies the API for managing state in React applications. He can’t recommand Jotai yet since bad atomic states split can cause many rerenders and be bad for performance.
This week in React#199đź“ťArticle
Using Server Functions and Tanstack Query
TanStack Start makes is possible to interact with TanStack Query and TanStack Router to perfectly deal with data fetching, redirections, etc. Using “server functions”, it enables prefetching, suspended queries, and is typesafe.
This week in React#199đź“ťArticle
Build-time Components
Article showing how RSC can be improve both UX and DX on an example of MDX users willing to increase the interactivity of content. Comparison with client-components and Rehype plugin.
This week in React#199đź“ťArticle

2024/08

2024/08/28

Interface Segregation Principle in React
This pattern is not satisfied when passing a whole object as prop even if the component only uses some attributes. We should only pass needed props and avoid prop drilling, with for instance composition. .
This week in React#198đź“ťArticle
Mastering Micro-Frontends With RSpack and Module Federation
Great video in which Jack Herrington shows how to use components from a MFE into another MFE. He even shows how a React app can mount a Vue component exposed by another MFE. All that using RSpack config and Module Federation.
Otherđź“ąVideo
Why is CSS-in-JS slow?
Great article with illustrations showing why traditional CSS-in-JS libraries are slow, increasing a lot the waterfall chain of steps the browser must carry out. Compiled CSS-in-JS avoid this concern and behave “as if” a basic static stylesheet was shipped within the bundle.
This week in React#198đź“ťArticle
Never Call new Date() Inside Your Components
For components to be easily tested, we should avoid initializing states with impure functions like new Date() or Math.random() what makes them impure components. We could instead pass those default state values as props instead. Using the context would be more elegant to me.
This week in React#198đź“ťArticle
Multipart Namespace Components: Addressing RSC and Dot Notation Issues
Namespace components like <Card.Header> can be implemented in different ways. Some of those ways will prevent tree shaking and be problematic for RSCs. Using named ES exports is a way to use this pattern and still benefit of bundler optimisations. Chakra and Radix implement them this way.
This week in React#198đź“ťArticle
Everything about Google Translate crashing React (and other web apps)
Explanation of how Google Translate updates apps DOM, and how it interferes with React reconciliation. The article shows reproduction examples for a better understanding. Discussion of the encountered issues such as displaying wrong data or even app crashs. There is sadly no good solution for now.
This week in React#198đź“ťArticle
Error handling and retry with React Server Components
Using simple <ErrorBoundary> components, using a retry button in the fallback UI, it is possible to “retry rendering” the errored component using Next’s router.refresh() in a transition. Actually, it reloads the whole page, but it seems to the user than only the component was reloaded.
This week in React#198đź“ťArticle
How To Create An NPM Package
Great article by Matt Pocock illustrating best practices to create an NPM package in mid-2024, with Prettier, tsup, vitest, GitHub Actions, Changesets, support for ESM and CJS, etc.
Node Weekly#545đź“ťArticle

2024/08/21

NodeJS Evolves
Discussion about the latest features in Node.js such as native support of TypeScript, .env parsing, built-in test runner, watch mode, SQLite integration, glob support, top-level await.
Syntax#811🎧Podcast
Branded Types
Branded types can be really useful to enforce type differences between structurally identical types. It makes it possible to narrow down types, using type predicates or assertion functions. Sometimes, other practices should be preferred such as union types, template literals or wrapper utils. Branded types are key if you want to strengthen your type system. Prices are not just numbers, nor is an amount of time, so protect your functions by narrowing down the types you accept.
This week in React#197đź“ťArticle
Good Refactoring vs Bad Refactoring
Refactoring code is not always a great idea, at least when not refactoring correctly. This article illustrates different examples of good and bad refactoring with some advices and principles, such as keeping the same coding style, avoiding unnecessary abstractions, avoiding inconsistencies, not changing the actual code behaviour, understanding the business context, etc.
This week in React#197đź“ťArticle
Generate a PDF in React
Great video showing three ways of creating PDFs from a React application: using html2pdf.js, with react-pdf and finally through Puppeteer.
This week in React#197đź“ąVideo
How to Build a React Hook That Handles Sequential Requests
Using a handy React hook and an AbortController, we can make sure to discard pending sequential requests to only keep the latest one, thus making sure to avoid useless load and only show up-to-date data to the user.
This week in React#197đź“ťArticle
useStateObject: A Simple, Convenient API Around useState
Proposal of a wrapper hook over useState to deal with one single state object and handling merge/reset/set actions.
This week in React#197đź“ťArticle
Building Swipe Actions component with React and Framer Motion
Detailed implementation of a component handling swipe actions like on lists on mobile or in Apple Mail to mark an email as read. It satisfies A11y but I wonder if this component is discoverable enough on web platforms.
This week in React#197đź“ťArticle
Tips from 8 months of TanStack/Router in production
Swizec Teller explains some patterns and principles he’s been using since day one working with TanStack Router, i.e. when using loaders, supsended queries, queries, etc.
This week in React#197đź“ťArticle
Synchronizing State In React
Synchronizing a parent component state with one of it’s child can be done easily without necessary using a useEffect but instead using the key prop.
This week in React#197đź“ťArticle
React is (becoming) a Full-Stack Framework
With the raise of RSC and Server Actions, React is no-longer a front-end library and can more and more be considered full-stack!
This week in React#197đź“ťArticle
From React to Effect
The Effect library is quite complex to learn but this article makes a great parallel with how React works to make it easier to apprehend. In both libraries, the code we write is like a blueprint which is what the code should do without actually executing it. Then the library we use will execute it, such as Effect or React.
This week in React#197đź“ťArticle

2024/08/14

Dependency injection in React - How to Manage Dependencies in Your React App for Cleaner and Easier to Maintain Code
Dependency Injection is a common pattern in some BE/FE frameworks (Nest, Angular, etc.), but there is no native way to do it in React. It is possible to do it with Context but it is quite handy. It makes it easier to test components without the injected side-effects logics at the expense of code simplicity.
This week in React#196đź“ťArticle
An approach to optimizing TypeScript type checking performance
Optimizing TypeScript type checking performance can be rough. This article proposes the BAM methodology: Branch / Adjust / Measure. Benchmarking is key to measure whether a change is beneficial in terms of performance.
This week in React#196đź“ťArticle
Node.js Takes Steps Towards Removing Corepack
Explanation of the steps and discussions which may suggest that Corepack will no longer be included in Node.js and will become completely independent again. Corepack and Yarn maintainers are requested to participate more actively to Node.js PMWG sessions.
This week in React#196đź“ťArticle
Building an App with Next.js and Electron with Server Components Support
Running a Next.js server for an Electron application is doable with a little trickery. It enables RSC support and it is even possible to send events from the Next.js server to the Electron app.
This week in React#196đź“ťArticle
Why I Don't Like Enums
Matt Pocock explains we using enums in TypeScript should be avoided: numeric and string enums behave differently in certain situations (double key-value mapping for numeric enums, etc.). It’s not possible to substitute enums by shape which makes it different from JavaScript’s behavior.
LinkedInđź“ťArticle
Common Causes of Memory Leaks in JavaScript
Explanation of common memory leaks causes including improperly managed variables, global objects, event listeners not removed, closures capturing variables, unmanaged callbacks, wrong usage of bind(), and circular references. Example of a stress test and how to profile it in Node.js.
This week in React#196đź“ťArticle
How Jotai Was Born
The Jotai’s author has been working on several state management libraries before ending writing that latter.
This week in React#196đź“ťArticle
A deep dive on forms with modern React
Really great article by Kent C. Dodds explaining in details how the React 19’s useFormStatus, useActionState and useOptimistic hooks simplify the way we deal with forms.
This week in React#196đź“ťArticle

2024/08/07

CSS Components: Tailwind, Panda, Scoped, Modules, Classes, Variables, CSS-in-JS and Sprinkles!
Thoughts and comparison on different styling strategies, and under what circumstances one approach might be preferred over another.
Syntax#807🎧Podcast
Frontend Security Checklist
Explanation of common security issues with possible solutions: XSS, CSP, CSRF, IDOR and environment variables.
This week in React#195đź“ťArticle
Build your own React state management library in under 40 lines of code
Creation of a custom store thanks to the useSyncExternalStore hook, and improvement ideas such as using immer to update nested state properties.
This week in React#195đź“ťArticle
Avoiding premature abstraction with Unstyled React Components
Anticipating component styling is a bad practice. In this example, a button component is turned into a headless abstraction which does not prematurely abstract styling. It makes it possible to reuse the component with a custom style if needed.
This week in React#195đź“ťArticle
GitHub Vitale -
A new Notebook technology has been created by the GitHub Next team. Based on Vite, it might be useful to craft a single React component, explore an API, etc.
This week in React#195đź“ťArticle
Using Notion as my CMS with Next.js
The author uses Notion to write posts, and then converts those posts to Markdown file. He then renders those posts, which prevents to be locked-in with Notion and make it possible to switch to an alternative solution in the future, provided it converts posts to Markdown.
This week in React#195đź“ťArticle
Common Sense Refactoring of a Messy React Component
Refactoring a large form component can be done pretty easily by extracting sub-components based on conditional rendering branches, use custom hooks and helpers, rely on library to avoid boilerplate (react-query, zod, etc.). It improves clarity, maintainability and makes the code easier to understand for everyone.
This week in React#195đź“ťArticle
Introducing XState Store
XState Store is a more opinionated alternative to Zustand. In the store, it separates states from transitions, it is event-driven, etc.
This week in React#195đź“ťArticle
What’s New for JavaScript Developers in ECMAScript 2024
Non-technical review of the changes in the latest ECMAScript 2024 version, including Promise.withResolvers, new groupBy static methods on Maps and Objects, unicode handling, locks on async code, etc.
Node Weekly#543đź“ťArticle

2024/07

2024/07/31

Please Stop Using Barrel Files
Barrel files are files just exporting everything from other files. It might be useful when building a library, but it will most likely introduce circular imports. It should be avoided in application code that is not meant to be shared externally.
This week in React#194đź“ťArticle
Exploring a useState-like API with Zustand: A Fun Experiment
Experiment of writing an access layer on top of Zustand to return a tuple like [state, setState].
This week in React#194đź“ťArticle
React Owner Components
Owner components create the JSX and can pass props to it, while Parent components just wrap them. Client Components cannot own Server Components but can accept them as children. This is because RSC can’t rerender on the client for instance when a state changes.
This week in React#194đź“ťArticle
Dissecting Partial Pre Rendering
Explanation of how PPR combines the advantages of all the other rendering strategies.
This week in React#194đź“ťArticle
Flags as code in Next.js
The new @vercel/flags/next package makes it possible to use feature flags why decoupling the code from the flags provider. In Next.js, we can compute those flags server-side to avoid spinners and blinks on the client. It also operates on static pages and PPR. Using the Edge Config makes it possible to swap flags without redeployment.
This week in React#194đź“ťArticle

2024/07/24

A Complete Introduction to Web Components
Web Components are framework-agnostic, lightweight, and fast. Even if they lack some frameworks features such as data-binding and state management, they appear to be useful when sharing components across different frameworks.
Otherđź“ťArticle
How to choose the best rendering strategy for your app
Interesting overview of different rendering strategies (SSG, SSR, ISR, CSR), their advantages and drawbacks. Experimental PPR (Partial Prerendering) can be used on top of those strategies. With Next.js, we can opt-in those techniques on a component level, thus making it possible to have a customized rendering strategy for each app. Using latest techniques such as RSC or Suspense makes apps future-proof, thus enabling to adopt soon-to-come strategies.
This week in React#193đź“ťArticle
Fine-grained Markdown
Interactive article showing how the codehike library makes it possible to decorate Markdown content to improve its rendering in React.
This week in React#193đź“ťArticle
DRY – the common source of bad abstractions
Over-abstraction is a common mistake that causes issue when the abstracted feature evolves and requires customization. Use composition to get a greater flexibility.
This week in React#193đź“ťArticle
Do not pass DTOs to UI components
Providing the back-end payload types directly to components will couple the UI to the API, thus imposing a more complex refactoring when types change. Moreover, it most probably imposes passing more data than needed to components. Instead, we should always create tailored types to only match what components need.
This week in React#193đź“ťArticle
Use useId() Instead Of Hand-Making IDs
Manual IDs for handling forms or access DOM elements can’t guarantee uniqueness and randomly generated uuid() can be error-prone during hydratation. We must instead use useRef() to access DOM elements and useId() to create unique form field IDs.
This week in React#193đź“ťArticle
Data Fetching with Server Actions in Next.js
Even if not the official solution, fetching data from a client component using Server Actions is very practical, even if it has some pitfalls such as running on sequential POST queries.
This week in React#193đź“ťArticle
Web Dev Simplified - How To Debug React Apps Like A Senior Developer
Nice video showing how to setup the debugger with VSCode for React or Next applications, as well as nice advices for taking the best of the React DevTools.
This week in React#193đź“ąVideo
Monorepos! Workspaces, pnpm, turborepo + more!
Interesting discussion about monorepos, package managers and the similarities and differences between build systems such as Turborepo, Nx, Lerna, etc.
Syntax🎧Podcast

2024/07/17

pnpm documentation
Detailed documentation of the pnpm package manager, its commands, configuration options and the way it deals with workspaces. Interesting new catalog feature avoiding conflicts in monorepos with multiple packages sharing a same dependency.
Otherđź“šDocs
Sneaky React Memory Leaks: How the React compiler won't save you
Due to the use of functional programming and closures in JS, the React Compiler might introduce a memory leak that wouldn’t occur without it. The given example is when a component has callbacks depending on a large object which itself depends on the component states.
This week in React#192đź“ťArticle
TypeScript 5.5: A Blockbuster Release
TS 5.5 brings the inferred type predicates, enables RegExp syntax checking, support new Set methods, boosts performance and brings new configuration options such as isolatedDecorations, and many other improvements.
This week in React#192đź“ťArticle
What's coming next for ESLint
ESLint will be completely rewritten from scratch to adapt to current standards as its internal architecture is 11 years old, causing a huge tech-debt. It will be runtime & language agnostic, and more composable.
This week in React#192đź“ťArticle
Ecma International approves ECMAScript 2024: What’s new?
Object.groupBy() and Map.groupBy() method are very useful. Promise.withResolvers() reduces boilerplate when needing to configure promises after instantiating them. New RegExp matchers for unicode, String.isWellFormed() method, and other minor changes.
This week in React#192đź“ťArticle
5 Misconceptions about React Server Components
Even if RSC are the default in Next, Client Components should not be avoided when interactivity is necessary. Explanation of misconceptions and patterns to cross the client/server border.
This week in React#192đź“ťArticle
Secret Knowledge to Self-Host Next.js
Deploying a Next.js app out of Vercel is possible but not without some tradeoffs and configuration.
This week in React#192đź“ťArticle
How to protect against a security breach in React Server Components
Data validation at runtime (using zod for instance) is not sufficient and access control should be checked on any server action input, which should always be considered as hostile.
This week in React#192đź“ťArticle
Simplify Component Imports with TypeScript Namespaces
Wrapping components Props in a namespace we export can make it easier import both the component and the associated namespace in React.
This week in React#192đź“ťArticle
Remix - Fog of War
New API introduced in Remix to make the route manifest of an application grow as long as the user navigates by discovering reachable links and fetching route details progressively. It prevents huge manifests from being shipped to clients on initial page load for large applications.
This week in React#192đź“ťArticle
Vue.js Tutorial: Beginner to Front-End Developer
Really great video showing how to use Vue fundamentals to build a simple application. It explains both the Options and Composition APIs.
Otherđź“ąVideo

2024/07/10

A guide to reading and writing Node.js streams
Exploration of the fundamental concepts of Node.js streams, readable and writable streams, backpressure, errors handling, and advanced techniques like async iterators.
Node Weekly#540đź“ťArticle
5 Cool Chrome DevTools Features Most Developers Don’t Know About
Simple embedded features to replace the console.log() with logpoints, conditional breakpoints, watched expressions, etc.
daily.devđź“ťArticle
Is TypeScript Just A Linter?
TypeScript is more than just a linter, it’s a powerful language that improves a lot the experience of working with JavaScript, but behind it, it remains basic JavaScript.
LinkedInđź“ťArticle
Total TypeScript Essentials
Superb online book from Matt Pocock in which he goes in depth on many of the possibilities offered by TypeScript. I learned a lot of things, about many utility types, tsconfig options, generics, and many more. It even includes exercises with solutions!
LinkedInđź“™Book

2024/07/03

Warning: React 19’s use Hook Can Impact App Performance
The new use hook, when used in a wrong way, can imply network waterfalls or make queries run twice. Hoisting is often the solution. Presentation of great patterns to make use of this new hook.
LinkedInđź“ąVideo
11 Habits of Highly Effective Developers
Understand the business, curiosity, open mind, asking for help and helping, problem solving, having fun, work-life balance, empathy, attention to details, part of the community.
Syntax#778🎧Podcast
What’s Next for Next.js with Tim Neutkens
Discussion about the React Compiler and RSC. Detailed presentation of how to opt-in RSC without fully rewriting an app with the example of a single data-fetching component.
Syntax#785🎧Podcast
You Should Try Vue.js
Comparison between React and Vue.js, illustration of some use cases for which React is more boilerplate than Vue. The attendees also compare Next and Nuxt meta-frameworks.
Syntax#787🎧Podcast
State of JS 2023 Reactions
Discussion about the results of the global survey about the JS ecosystem. Positivity about Next and React decreases while its usage increases. Vite and Vitest received several awards.
Syntax#790🎧Podcast

2024/06

2024/06/26

Create npm package with CommonJS and ESM support in TypeScript
Step-by-step example of how to create a package with both CJS and ESM support in TypeScript, using two tsconfig files extending a common one.
Node Weekly#538đź“ťArticle
Beyond monospace: the search for the perfect coding font
Design oriented article explaining the features a font should satisfy to be well-suited for programing based on the brain perception of symbols.
Node Weekly#538đź“ťArticle
Goal Crafting
Objectives should be mesurable and meaningful, quantifiable and tied to addressing stakeholders needs, and push teams out of their confort zone.
Leadership in Tech#197đź“ťArticle
How To Use Google Sheets as a Database With React via Next.js
Great article describing how it is possible to use a Google Sheet as database in Next. This can be interesting when needing to share data with non-tech people.
This week in React#191đź“ťArticle
Is it ok to pass setState as a prop in React?
Quick article showing why passing a setState method as prop to child components is a bad practice and we must instead pass callbacks from the parent.
This week in React#191đź“ťArticle
Type-safe TanStack Query with OpenAPI
This great article shows how to generate types from an OpenAPI specification and create fully-typed React Query hooks.
This week in React#191đź“ťArticle
Communication Between Client Components in Next.js
This article compares three ways for distant client components to communicate: shared parent, query param or server-side.
This week in React#191đź“ťArticle
Web Workers, Comlink, Vite and TanStack Query
Comlink makes it easy to use web worker for heavy tasks, and using TanStack Query simplifies the interaction with Comlink’s worker promises.
This week in React#191đź“ťArticle
From Markdown to video
Using CodeHike and Remotion makes it possible to create dynamic videos from a Markdown file including transitions on code snippets.
This week in React#191đź“ťArticle
Component, colocation, composition: A note on the state of React
A quick explanation of how the state location has changed over time, from close to far from the rendering in components.
This week in React#191đź“ťArticle

2024/06/19

Conditionals on Custom Properties
Overview of the proposal to write conditions directly in CSS styles.
This week in React#190đź“ťArticle
Write SOLID React Hooks
Description of how to write React hooks satisfying the SOLID principles.
This week in React#190đź“ťArticle
How to compose JavaScript functions that take multiple parameters
Great article showing how it it possible to use function composition to create functions accepting only one parameter from multi-parameters functions.
This week in React#190đź“ťArticle
React & Codemod Announcement
New codemods have been announced to help migrating codebases to React 19.
This week in React#190đź“ťArticle
React 19 and Suspense - A Drama in 3 Acts
Summary of the breaking change on the suspended components management which created a controverse in the ecosystem, thus delaying the release of React 19.
This week in React#190đź“ťArticle

2024/06/12

Weak memoization in Javascript
Rather complex overview of the internals of the memoization process.
This week in React#189đź“ťArticle