News from June 2024
The terminal WARS begins! // Warp vs Wave
What terminal are you using on macos ? Ive recently switched to Warp less than a year ago and really like it, but Wave seems pretty interesting too. Discover the differences between the 2 and choose which one would be the best for your needs.
Visual testing: The greatest trick in UI development
And what if we were doing our tests directly in storybook ? What if just by using storybook we could write less tests. And what if visual testing with snapshots were the answer ? Storybook give us its point of view on theses questions in this article.
React 19's useOptimistic: EVERYTHING you NEED to know
Learn how optimistic updates will work in React 19. With a very simple todo app, Jack Herrington live code different ways to implement optimistic updates with the new hook useOptimistic, transitions, tanstack query or even zustand.
Creating a Reusable SubmitButton with UseFormStatus
Another article to discover the new useFormStatus hook in React 19, and how to use it to improve your UX with transitions.
Understanding React Compiler
A great theoretical article about transpilers, compilers, optimizers. What they are how they work, and mostly how React Compiler works.
The "SQL In React" Drama
Every time i see a post about rsc and sql requests inside a component, i always looks at the comments, to always see a lots of people choked by this new RSC pattern. Very often, people don't know that even inside a react component, this code only runs on server. Theo explains very precisely how it works, why it is secure, but also why it is only a pattern for prototyping and other patterns are preferable for production.
React for two computers
A great demo about why and how to make server components in javascript. In a 30 min live coding during the React conf, Dan Abramov just explains the needs behind server components. No react, no framework, just pure javascript. A great react from Theo is also available to helps us understand what going on.
Using React Query with Astro
How to store datas in astro ? By using React Query and Nanostores ! Little demo on how to implement this tools in Astro and and improve your islands.
React Form with Loading State (Pending Action)
Great tutorial to learn the new form hooks from React 19. useActionState, useFormStatus, but also useTransition to manage your form with actions.
How React 19 Almost Broke The Web
I hope you are not expecting react 19 to be released pretty soon. Although it is in release candidate state, some malfunctions are still discovered when tested by library developers. Here is a resume of how a small update about suspenses triggers data being fetched in waterfall instead of being parallelized.
Why You Should Use React Aria Components...
Presentation and demonstration of React Aria focused on 5 points : accessibility, user experience, styling, internationalisation and customisation.
How to build a RAG agent that is reliable & accurate
This is not a tutorial to install or train your own AI, but a very detailed description on how RAG are working, why they have issues to process existing data, and how they can learn and improve their knowledge database.
An interactive study of queueing strategies
Queues are everywhere.. In this article Sam describe how queues are working and what are the strategies to manage our queues to manage requests from client to servers. I rarely see so much work and exampled explanations in a blog article, this definitely make this one a must read !
Fix These 5 Things For Better Performance ("Quick" Reaction)
Few tricks to improve your website performances and loading time. You know probably know some of them (maybe even of all them), but a small reminder times to times never hurts
What is Open Source?
Do you know all open source licences and the differences between them ? CJ list and explain them all, so you will be able to choose the right one for your next project.
Communication Between Client Components in Next.js
a good article to list different ways to share state between components in Nextjs : contextes, query params, server states...
If You Cannot Name All 5 JS Scopes You Need To Watch This Video
I'm not a fan of this clickbait title, but the video is actually pretty interesting to understand about how javascript scopes are working. Where to define, access and override our constants and functions ? All the answers are in this short video.
How to Host Your Own Personal ChatGPT
Want to host your own Ai assistant for better performance or privacy ? Follow this tutorial to install llama3 and web ui on your computer
Figma AI is Here! + Other Amazing Updates – Figma Config 2024 – Figma Updates
Figma presented his version 3 with lots of new functionalities. Get a resume of updates, including AI prototyping and search, a new tool to make slides from your design system, a new redesign and tons of smaller updates.
Experimenting with React Server Components and Vite
Want to create a framework from scratch to learn how server component work ? If you have the time, this tutorial is exactly what you need.
Coolify Crash Course | Self Host 101 | Secure Set up
You love the simplicity of Vercel or Netlify hosting, but you want to self host your projects or avoid shady billing systems ? Coolify is the answer for you. It's a self hosting project, that allow you to manage your websites and benefits from github hooks and automatize building from git hooks.
I Ditched Prettier and ESLint (Here's Why)
Let's discover the origin of Biome, why and how it was created, but most importantly how to switch from eslint/prettier to Biome in a matter of minutes. In a real codebase, you will see how to configure Biome, migrate your existing linter rules, and use it on your files.
Astro Actions: the missing server action library
Great live coding during the last astro conference about the new server action feature. Discover how to create forms with validation, error management, type safety, progressive enhancement, and reactivity. I can't wait to test that !
Astro 4.10
Astro evolves pretty fast, and in this new release, we have performances improving at build, a new env module to manage your variables with a zod schema, and container api who allows to export components into strings. You can now, for exemple, use react component directly in a elixir page with an island. Very useful for non javascript developers.