Voir le profil

React Hebdo #50: Remotion, Bedrock, Fusuma, Gatsby, ReactNative, CSS variables/transitions, TypeScript...

React Hebdo #50: Remotion, Bedrock, Fusuma, Gatsby, ReactNative, CSS variables/transitions, TypeScript...
Par Sébastien Lorber • Numéro #50 • Consulter en ligne
Bonjour à tous!
Cette semaine, Remotion fait la une et permet de créer des vidéos en React!
Le boilerplate Next.js de Max Stoiber devrait aussi intéresser les startupers et autres indie hackers :)
J'ai trouvé 2 articles intéressants sur les variables CSS. On voit de plus en plus une tendance à déplacer le theming du context React vers CSS.
J'ai l'impression que Gmail n'aime pas trop mon nom de domaine reacthebdo.fr
🙏 Pour soutenir la newsletter 🙏: recommandez la autour de vous! Dans votre entreprise, école, communauté… Cela a vraiment un impact pour moi et me permet de continuer sur le long terme.
Bonne lecture!
Chat React Hebdo (Discord)

React
Remotion: Write videos in React
C'est la grosse innovation React de la semaine! Un renderer React qui permet de générer des videos MP4 avec du code! On peut utiliser des assets (CSS, SVG…) et toute la puissance de React (composition, hooks…) pour coder ses videos, y compris fetcher des données via un CMS pour les inclure dans ses videos! J'ai envie de tester ça et voir si j'arrive à générer une video à partir d'une édition de ma newsletter :)
Le trailer est impressionnant, et a été réalisé avec Remotion (source). Il y a également un tutoriel vidéo de 2h, et vous trouverez pas mal d'autres resources partagées par Jonny Burger sur Twitter.
www.remotion.dev  •  Partager
Max Stoiber (Styled-Components, React-Boilerplate…) lance un boilerplate pour créer un SaaS basé sur Next.js et une stack moderne. Produit payant ($150) mais ça peut largement valoir le coup.
bedrock.mxstbr.com  •  Partager
Je découvre cet outil avec la sortie de sa v2. Permet de créer des présentations à partir de fichiers Markdown MDX. Dans la même catégorie que Spectacle et MDX-Deck.
github.com  •  Partager
Gatsby dévoile sa nouvelle intégration WordPress v4, entièrement réécrite, et basée sur WPGraphQL. A lire également, Jason Bahl qui travaillait sur WPGraphQL à quitté Gatsby et va travailler chez WPEngine, ce qui ne devrait pas poser de problème car WPEngine travaille également sur une solution WordPress headless basée sur WPGraphQL.
www.gatsbyjs.com  •  Partager
Jobs
Une offre ci-dessous vous intéresse? Répondez à cet email!
Lazy: dev React senior - CDI remote 55/65k
Ponicode: dev JS/React - CDI Paris 40-65k (confirmé ou senior)
StartupFlow: dev Fullstack NodeJS/React - CDI Paris 45-60k
Smallable: dev React - CDI Paris 45/50k
Snapshift: dev React confirmé - CDI Paris 50/60k
Splio: dev Fullstack React/NodeJS senior - CDI Paris 60/70k
F4: dev NodeJS - CDI Paris 40/50k
ReactNative
SwiftUI renderer for React Native
Tomasz Sapeta présente la 2ème partie (voir 1ère partie) de ses travaux sur la création d'un renderer SwiftUI pour ReactNative, et publie le repository.
Il est probable que SwiftUI rattrape progressivement son retard sur UIKit et puisse être adopté par ReactNative. Cela permettrait d'implémenter des vues natives custom très facilement, cf l'exemple ci-dessus qui créé un composant natif rajoutant de l'ombre au children.
blog.swmansion.com  •  Partager
Nouvelle release qui apporte le support de React 17 et des améliorations d'accessibilité. Il y a également une nouvelle documentation, et des exemples CodeSandbox.
github.com  •  Partager
Aman Mittal propose une petite checklist pour améliorer les performances de vos applications React Native
blog.crowdbotics.com  •  Partager
Divers
An interactive guide to CSS transitions
Nouvel article interactif de Josh Comeau sur les transitions CSS. Même si vous connaissez déjà, vous apprendrez surement quelque chose de nouveau.
www.joshwcomeau.com  •  Partager
Christian propose d'utiliser les CSS variables partager les données entre JavaScript et CSS. Article court avec une démo intéressante.
christianheilmann.com  •  Partager
Maxime nous explique comment il a remplacé l'usage de context React pour le theming par des variables CSS, comment il utilise des valeurs partielles et dérive une palette de couleur à partir d'une variable CSS unique.
Article interactif, avec une belle démo qui permet de changer le theme de son blog dans la couleur de votre choix.
blog.maximeheckel.com  •  Partager
Une bonne analyse des tradeoffs de date-fns, Luxon et Day.js. Au final, il y a un usage pour les 3 librairies en fonction des contraites de votre projet (taille, support des timezones…).
www.skypack.dev  •  Partager
Les container queries CSS passent en phase de spécification (ce qui ne veut pas dire qu'on va les avoir pour tout de suite, mais ça avance!).
Feature très attendues, en particulier pour améliorer l'encapsulation des composants frontend, qui pourront exprimer des breakpoints responsive en fonction de la taille du composant plutôt que du viewport.
twitter.com  •  Partager
Sunil Pai met en avant les problèmes lié à l'import de fichiers CSS dans notre code JavaScript (souvent géré par un loader Webpack), et propose des solutions alternatives.
www.coolcomputerclub.com  •  Partager
Nouveauté qui fait parler d'elle sur HackerNews. Très pratique, permet d'ouvrir n'importe quel repo GitHub dans VSCode, directement dans le browser, en rajoutant “1s” à l'url GitHub
Exemple: https://github1s.com/facebook/docusaurus
github.com  •  Partager
Une application volontairement vulnérable, basée sur GraphQL, dans le but d'apprendre et se sensibiliser aux problématiques de sécurité liées à GraphQL.
github.com  •  Partager
Arrivée de belles améliorations, en particulier sur les tuples, et les messages d'erreur de compilation devraient devenir plus facile à lire (en affichant les type alias. avec des noms explicites).
devblogs.microsoft.com  •  Partager
Avez-vous aimé ce numéro ?
Sébastien Lorber

Chaque semaine, je vais t'envoyer les nouvelles pertinentes pour un(e) dev React et React-Native, et tu vas gagner du temps sur ta veille.

Je pars du principe que tu es déjà à l'aise avec React, et ouvert(e) d'esprit: on parle aussi de NodeJS, TypeScript, Jamstack, CSS, Serverless, Flutter, Svelte, mobile...

🙏 Pour me soutenir: recommande la newsletter autour de toi.

Si vous ne voulez plus recevoir les prochaines mises à jour, vous pouvez vous désabonner ici.
Si on vous a fait suivre cette lettre d'information et que vous l'aimez, vous pouvez vous y abonner ici.
Propulsé par Revue
Lambda Scale - SIRET 82951115300027