Sébastien Lorber
Sébastien Lorber

Sébastien Lorber

This Week In React #124: FLIP, Lifecycle, Next.js, TypeScript, Vanilla-Extract, LiveView, Remix, Fontpie, Remotion...

This Week In React #124: FLIP, Lifecycle, Next.js, TypeScript, Vanilla-Extract, LiveView, Remix, Fontpie, Remotion...

Sébastien Lorber's photo
Sébastien Lorber
·Nov 16, 2022·

6 min read

Subscribe to my newsletter and never miss my upcoming articles

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 🎨


💸 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.



💸 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.

For even more fun, it's all there!

This Week In React - Fun Thread

Did you find this article valuable?

Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this