Skip to main content

πŸ“¨ #124: FLIP, Lifecycle, Next.js, TypeScript, Vanilla-Extract, LiveView, Remix, GitHub, Race Conditions, Fontpie, Remotion...

Β· 7 min read
SΓ©bastien Lorber

Hi everyone!

After a few intense weeks, the React ecosystem slows down a bit in terms of major announcements.

We still have some very good articles coming out. The TypeScript plugin for Next.js looks awesome!

The GitHub Universe conference has ended. GitHub seems to be using React more and more, on some views, and also via GitHub Blocks based on MDX.

πŸ’‘ Check this newsletter on Twitter - visual format 🎨


To support me:

Don't miss the next article!


    πŸ’Έ Sponsor​

    FlyCode Makes React Apps Editable without coding, Git based

    FlyCode Makes React Apps Editable without coding, Git based

    FlyCode (YC S22) makes React web apps editable in minutes so Product and UX teams can iterate and release products faster, so they don't have to wait on (or consume) developer time.

    FlyCode reads your regular React code and finds Texts, Images, Design tokens and Analytics event, then it let's non-coders collaborate and edit them and send back a pull request (they don't need access to GitHub!)

    • Saves development time
    • No code integration, it just reads your code!
    • GitHub based, a bot is scanning the code and creates pull requests
    • Use your own stack and components
    • Retain codebase ownership

    You can get started here: flycode.com/developers


    βš›οΈ React​

    Inside Framer's Magic Motion

    Inside Framer's Magic Motion

    A great interactive article that explains what a layout animation is. It greatly deconstructs the FLIP technique which allows to make this kind of transition perform better via CSS transforms (position, scale). We recreate the layout animation system of Framer Motion step by step.

    On the same subject, I recommend to read also Everything about Framer Motion layout animations.


    Timeline of a React Component With Hooks

    Timeline of a React Component With Hooks

    An interactive diagram that demonstrates the lifecycle of a React component, including hooks, refs, and DOM updates/paint (not available on mobile). Also includes a quiz to test your knowledge, and many quotes/references.


    Next.js 13

    Next.js 13 TypeScript Plugin

    Shu Ding is working on a TypeScript language service plugin (source) that significantly improves Next.js DX by bringing docs, new errors and autocompletion on top of Next.js and Server Components conventions. This compensates nicely the inability to type exports from an ES module in TypeScript, a feature much requested by framework authors.


    Writing Performant CSS with vanilla-extract

    Writing Performant CSS with vanilla-extract

    An exhaustive article about vanilla-extract, the no-runtime CSS-in-JS library based on TypeScript by Mark Dalgleish (creator of CSS Modules). Mention also its atomic CSS overlay Sprinkles. Examples based on React: reproduction of a Tailwind UI component. Many comparisons with Tailwind and other CSS-in-JS solutions. Well, it looks powerful, but not so simple indeed πŸ˜… We'll have to study this further.


    Don't miss the next article!


      πŸ’Έ Sponsor​

      refine - 100% open-source, headless React framework for building CRUD apps

      refine - 100% open-source, headless React framework for building CRUD apps

      refine seamlessly works with any custom design or UI framework you favor. For convenience, it ships with ready-made integrations for Ant Design, Material UI, Mantine, and Chakra UI. It eliminates the repetitive tasks demanded by CRUD operations and provides industry-standard solutions for critical parts like authentication, access control, routing, networking, state management, and i18n.


      πŸ“± React-Native​


      πŸ§‘β€πŸ’» Jobs​

      πŸ§‘β€πŸ’Ό Product Engineer at Causal, Remote/London/NY, $150-250k

      Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

      πŸ§‘β€πŸ’Ό G2i - 100% Remote React Native Jobs

      We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

      πŸ’‘ How to publish an offer?


      πŸ”€ Other​


      🀭 Fun​

      Meme - BREAKING: JavaScript has been banned from Twitter for impersonating a real programming language.

      Don't miss the next article!