Newsletter WEB : Veille technologique – Avril 2022

Au menu du mois d’avril … Arnaques CPF, OpenSource Ukrainien, React 18, DevOps Conf JS, CodeSandbox et bien d’autres !

Je vous invite à jeter un œil même si vous n’êtes pas développeur web (RH, DevOps, Backend, …) des fois je parle de sujets un peu plus légers ! 

– Yohan Dahmani

❤️🇺🇦 Projets open-source made in Ukraine  

Depuis la dernière newsletter la guerre s’est malheureusement déclarée entre la Russie et l’Ukraine. L’Ukraine est très investie dans l’open-source (plus que ce qu’on l’imagine), je suis tombé sur ce repo qui répertorie tous les projets open-source ukrainiens qui ont leur créateur ou une majorité de contributeurs Ukrainiens. C’est l’occasion de les mettre en lumière. 

Parmis eux il y a notamment Ansible, Javascript Algorithms, Leaflet, Chokidar ou encore pnpm ! 

Made in Ukraine 

❤️🎥Bonjour, c’est le centre CPF, vos droits vont expirer monsieur 

Vous avez forcément, comme moi, été démarchés par téléphone ou SMS par des sociétés frauduleuses qui en veulent à votre capital CPF ! Ce petit reportage sur YouTube nous explique comment est-ce qu’on en est arrivé là, et les business derrière ces démarchages intempestifs. 

CPF : Arnaques, harcèlement téléphonique… et zone grise – Enquête  

🕹 Wordle, mais pour les libs JS : Jazle ! 

C’est le même principe que le très célèbre Wordle, mais avec des libs JS (c’est dur). 

WEB : Jasle quest

Jazle.quest   

LES NOUVEAUTES

❤️React 18 

Énorme release pour React, de gros changements under-the-hood avec une nouvelle méthode de rendering concurrentielle : le rendu peut être mis en pause, interrompu, et reprendre (attention activer cela peut casser certains comportements et il est conseillé de l’utiliser via des librairies ou frameworks). Cette version inclus également de nouveaux hooks (useId, useTransition, useDefferedValue, …), automatic batching, et plein d’autres (Suspense, Transitions, changements sur le Strict Mode, …). 

Release Blog – Upgrade Guide – Changelog 

Gatsby Conf 2022 

Le framework React a tenu sa conférence annuelle fin mars. Nouvelles feature côté Gatsby Cloud (leur offre payante) : Image CDN, Incremental Deploys, On-premise GitHub. Côté framework de nouveaux starters, support de TypeScript, fixing trailing slashes. 

Gatsby Conf 2022 recap 

Electron 18 

Comme tous les deux mois, Electron release une nouvelle version majeure. Upgrade vers Chromium 100, NodeJS 16.13, et V8 10.0. Quelques features : Nouveaux formats pour .setBackgroundColor, ajout de .setCodeCachePath, ‘focus’ et ‘blur’ pour WebContents, substitution menu roles pour MacOS et bien plus. 

⚠️ Fin du support pour Electron 14.x, il est temps d’upgrade si ce n’est pas fait. 

Aucun texte alternatif pour cette image

Electron 18 Release blog 

State of front-end survey 

Et oui .. encore une « state of survey », celle-ci se concentre uniquement sur le front-end, je vous invite à aller y répondre (ça dure ~8mn) les questions sont assez pertinentes, pour le moment ~4500 personnes on déjà répondu. Hâte de voir les résultats !! On en parlera ici bien évidemment.  

State of Frontend 

TypeScript 4.6 

Le superset de JavaScript sort une nouvelle version mineure mais pas avare en features. Nouvelle target es2022, on peut désormais appeler super() après du code dans les constructeurs, improved recursion depth check, plus d’erreurs TS détectables dans VSCode, et bien plus 

Release Blog 

❤️🎥 DevOps conf 

Web : DevOps conf

Je l’ai zappée le mois dernier. Une conférence DevOps gratuite avait lieu autour de l’écosystème JS. Il y avait des intervenants assez pertinent comme Vercel, Datadog, GitHub, Microsoft, Vite, Bit, Sentry, Sonar, … Elle a eu lieu le 24 et 25 mars en ligne. Trouvez ci-dessous toutes les rediffusions des lives, au programme : Monorepos, Yarn, Pnpm, Vite, Testing, et bien d’autres !! À checker absoluement si vous évoluez dans un environment DevOps orienté JS. 

Rediffusions  

🎥 CodeSandbox (beta) 

CodeSandbox (que je découvre) a réécrit l’intégralité de son programme pour proposer du « cloud development ». Cela permet de collaborer en temps réel à plusieurs sur un projet, permet d’avoir un environment prêt en quelques minutes dans son navigateur ou sur son iPad (par exemple pour tester une PR), c’est également compatible avec VSCode qui se connecte tout seul à l’environement cloud pour l’execution. La bonne nouvelle, c’est que c’est OpenSource ! Pour l’instant en early access. https://www.linkedin.com/embeds/publishingEmbed.html?articleId=8005656659883150918

 Site de présentation – Release Blog CodeSandbox Projects 

Interaction tests with Storybook (beta) 

Web : Storybook

On en a parlé dans la newsletter de février, Storybook vient de sortir en beta la possibilité d’écrire et d’éxecuter ses tests UI directement depuis Storybook, à l’aide de Jest, Playwright et Testing Library. Ce qui permet de concentrer toute l’UI à un seul et même endroit. 

On en a parlé dans la newsletter de février, Storybook vient de sortir en beta la possibilité d’écrire et d’éxecuter ses tests UI directement depuis Storybook, à l’aide de Jest, Playwright et Testing Library. Ce qui permet de concentrer toute l’UI à un seul et même endroit.  

Interaction Testing with Storybook 

Refonte de MDN (Mozilla Developer Network) Web Docs 

On a tous un jour utilisé la doc MDN, le site a subi une énorme refonte visuelle (darkmode et tout ça rigole pas), et introduit un nouveau modèle économique nommé MDN Plus. (pas encore disponible en France). 

Nouveau site MDN – Release Blog 

Cours Next.js officiel et gratuit 

Vous avez toujours voulu apprendre Next.js mais par flemme ou par manque de cours en ligne vous n’avez jamais sauté le pas ? Et bien c’est le moment ou jamais ! Next.js a sorti son cours officiel et très complet, il inclus également les bases de React, donc si vous n’avez jamais fais de React c’est aussi l’occasion. 

Next.js official course  

VSCode Mars 2022 

Web : VSCode

Une release particulière pour nous autre développeurs web car elle inclut la possibilité de récupérer les heap profiles afin d’analyser d’éventuels problèmes de performances directement dans VSCode. Elle inclut également le formattage de tous les formats de fichier CSS par défaut (pour ceux qui n’utilisent pas Prettier). 

VSCode Mars 2022 

❤️Les types arrivent nativement pour JS ? 

Aucun texte alternatif pour cette image

Une proposition (stage 0) a été faite par Microsoft pour intégrer dans JavaScript les annotations de type. Elles se comporteraient comme des commentaires, et faciliteraient les étapes de build de TS (il faudrait bien évidemment tout de même bundle son code pour la production). Prometteur ! 

Type syntax proposal blog 

🎥📝 LES RECOMMANDATIONS

Etat des lieux du Markdown (article, 🇬🇧) 

Si vous avez déjà utilisé le markdown, vous n’êtes pas sans savoir qu’il y a plein de markdowns différents, et qu’à chaque fois que vous utilisez du markdown sur un nouveau site, c’est différent de vos habitudes. Cet article très (très) complet nous explique comment on en est arrivés là, les différentes tentatives de standardisation, et le futur de celui-ci. 

🎥L’histoire de Next.js (🇬🇧) 

12 minutes pour connaître l’histoire du framework.

Flutter vs React Native (article, 🇬🇧) 

Oui oui … je sais, encore un article là dessus, mais il offre un point de vue super intéréssant avec un aspect un peu plus pragmatique sur l’aspect recrutement. 

❤️TypeScript Never (article, 🇬🇧) 

Si vous faites du Typescript vous avez surement déjà vu passer ce mot clé never, mais rare reste les personnes qui l’utilisent ou le comprennent, car il est souvent associé à des types complexes. On en parle pas assez et cet article lui est totalement dédié !! A quoi il sert, comment l’utiliser, tout y passe. 

Les erreurs courantes en débutant avec React (article, 🇫🇷) 

Si vous débutez en React, cet article vous évitera quelques allés retours sur Stackoverflow ! Je vous invite à explorer également le blog qui contient quelques articles intéressants (et en français). 

Rappels sur les bases de package.json (article, 🇬🇧) 

Si vous faites du JS il y a de grande chances que vous utilisez package.json, mais est-ce que vous savez réellement tout à son propos ? 😉 Cet article passe en revue toutes les propriétés du fichier. 

ESLint pour l’async (article, 🇬🇧) 

14 règles ESLint pour vous aider à écrire du code JS asynchrone. C’est pas toujours simple, il y a plein de pièges à éviter. Alors simplifiez vous la vie et installez ces règles sur vos projets ! 

❤️Améliorer les performances avec les stratégies d’hydratation de React : CDiscount (article, 🇬🇧) 

Le géant français nous propose un petit (gros) article sur l’importance des performances d’un site web, les problématiques que CDiscount à rencontré et les solutions. 

Améliorer les performances avec les tratégies d'hydratation de React