Aller au contenu principal

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

· 8 minutes de lecture
Sébastien Lorber

Salut à tous !

Après quelques semaines intenses, l'écosystème React revient sur un rythme un peu plus calme.

On a tout de même de très bons articles qui sortent. Le plugin TypeScript pour Next.js à l'air top.

La conférence GitHub Universe s'est terminée. GitHub semble utiliser de plus en plus React, sur certaines vues, et aussi via GitHub Blocks basé sur MDX.

💡 Consulter cette newsletter sur Twitter - format visuel 🎨


Pour me soutenir:

Ne manque pas le prochain article !


    💸 Sponsor

    FlyCode rend votre app React éditables, sans code - basé sur Git

    FlyCode rend votre app React éditables, sans code - basé sur Git.

    FlyCode (YC S22) rend les applications web React modifiables en quelques minutes afin que les équipes produit et UX puissent itérer et sortir des produits plus rapidement, sans avoir à attendre (ou consommer) le temps des développeurs.

    FlyCode lit votre code React et trouve les textes, les images, les design tokens et les événements analytics, puis il permet aux non-codeurs de collaborer, de les modifier et de renvoyer une demande de modification (ils n'ont pas besoin d'accéder à GitHub !).

    • Gain de temps de développement
    • Pas d'intégration de code, ça lit simplement votre code !
    • Basé sur GitHub, un robot analyse le code et crée les pull requests
    • Utilisez votre propre stack et vos propres composants
    • Gardez le contrôle de votre base de code

    Vous pouvez commencer ici: flycode.com/developers


    ⚛️ React

    Inside Framer's Magic Motion

    Inside Framer's Magic Motion

    Un super article intéractif qui explique ce qu'est une animation de layout. Il déconstruit la technique FLIP qui permet de rendre ce type de transition performant via le CSS transform (position, scale). On recréé le système de layout animations de Framer Motion pas à pas.

    Sur le même sujet, je recommande de lire aussi Everything about Framer Motion layout animations.


    Timeline of a React Component With Hooks

    Timeline of a React Component With Hooks

    Un diagramme intéractif qui démontre bien le cycle de vie d'un composant React, incluant les hooks, refs, et updates/paint du DOM (pas dispo sur mobile). Inclus également un quizz pour tester ses connaissances, et de nombreuses citations/références.


    Next.js 13

    Next.js 13 TypeScript Plugin

    Shu Ding travaille sur un TypeScript language service plugin (source) qui améliore significativement la DX de Next.js en apportant de la doc, des nouvelles erreurs et de l'autocomplétion au dessus les conventions Next.js et Server Components. Cela compense l'impossibilité de typer les exports d'un module ES en TypeScript, feature très demandée par les auteurs de frameworks.


    Writing Performant CSS with vanilla-extract

    Writing Performant CSS with vanilla-extract

    Un article exhaustif sur vanilla-extract, la librairie CSS-in-JS sans runtime basée sur TypeScript de Mark Dalgleish (créateur des CSS Modules). Mentionne également sa surcouche atomic CSS Sprinkles. Exemples basés sur React: reproduction d'un composant Tailwind UI. Nombreuses comparaisons avec Tailwind et d'autres solutions CSS-in-JS. Bon, ça a l'air puissant, mais pas si simple 😅 Il va falloir étudier ça plus en profondeur.


    Ne manque pas le prochain article !


      💸 Sponsor

      refine - framework React "headless" 100% open-source pour créer des apps CRUD

      refine - framework React "headless" 100% open-source pour créer des apps CRUD

      refine fonctionne de manière transparente avec n'importe quel design ou framework UI. Pour plus de commodité, nous proposons des intégrations prêtes à l'emploi pour Ant Design, Material UI, Mantine et Chakra UI. refine élimine les tâches répétitives nécessaires pour créer des apps CRUD et fournit des solutions standardisées pour les parties critiques comme l'authentification, le contrôle d'accès, le routage, les appels réseau, la gestion des états et l'i18n.


      📱 React-Native


      🧑‍💻Jobs

      🧑‍💼 Premier Octet - Développeurs(euses) React - Paris

      Nous cherchons des développeurs(euses) JavaScript passionnés. Vous interviendrez en développement sur des projets variés et motivants, à la fois serveur et front (React, Nest, Next), et éventuellement mobile (React Native).

      🧑‍💼 Masteos - Lead ReactJS - Hybride ou Remote - 75-90k€

      Masteos réinvente l’expérience de l’investissement locatif, en proposant un parcours entièrement dématérialisé et un accompagnement de haut niveau aux particuliers qui souhaitent acheter un bien pour le louer.

      💡 Comment publier une offre d'emploi ?


      🇫🇷 En français

      💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !


      🔀 Autre


      🤭 Fun

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

      Ne manque pas le prochain article !