Newsletter WEB : Veille technologique – août 2022

Newsletter estivale [compliquée à écrire avec cette chaleur étouffante]. J’espère que tout le monde n’est pas en vacances et que vous serez nombreux sur LinkedIn !

Ce mois-ci on parle du nouveau challenger sur le ring des runtime JS : Bun ! Avec une couverture complète du petit nouveau. On parle aussi de VSCode Server (le futur), Vite 3, NestJS 9, Docusaurus 2.0. Côté vidéos un excellent talk sur les –css-attributes, et du live coding ASMR (construction de site moderne), et côté articles comment attaquer avec du phishing, sélecteur :has, et SOLID en React.

Bonne lecture et bonnes vacances,

LES NOUVEAUTES

❤️🔥 Bun

No alt text provided for this image
No alt text provided for this image

Alerte nouveau runtime JS ! Après Deno qui a fait pas mal de bruit ces derniers mois, on a un nouveau challenger nommé Bun. Sa particularité (mis à part d’avoir un logo mignon) est qu’il ne tourne pas avec V8 (le moteur derrière Node, Chrome, Electron, …) mais avec JavaScriptCore (le moteur OpenSource d’Apple dérivé de KDE KJS, derrière Safari). Il est écrit en ZIG, et “tout” est inclus (runtime, bundler, package manager, sqlite client, web server, etc), il essaie d’être le plus compatible possible avec NodeJS pour en devenir son remplaçant.

Pas mal de ressources pour couvrir le sujet :

VSCode

Update bien sympa pour VSCode avec ENFIN du 3 way merge directement dans VSCode, nouvelle UI pour le command center, do not disturb mode, minimap, mais surtout … VSCode SERVER !

Nous en parlions dans une newsletter précédente, le futur est peut être les environnements de dev dans le cloud, et c’est ce vers quoi Microsoft se dirige avec VSCode Server, ce qui peut permettre par exemple d’avoir un environnement de développement sur … son iPad !

VSCode 1.69

📹 VSCode Server Release Blog

📹 Vidéo de présentation VSCode Server (5mn)

Storybook 7.0 Sneak Peek

Storybook 7.0 Sneak Peek

Pas une release officielle. Juste un petit teaser pour voir à quoi Storybook 7 va ressembler.

Storybook sneak peek

Vite 3

Décidément on parle beaucoup de Vite ces temps-ci, après Vitest le mois dernier et la v2 de vite en février, la v3 de Vite est (vite 🥁) arrivée.

Au menu :

  • Une toute nouvelle documentation, générée avec VitePress, générateur de site statique (SSG) pour Vue
  • Mise à jour des templates Vite
  • Mise à jour du CLI (default ports, aesthetics, …)
  • Amélioration du fonctionnement derrière un proxy
  • Amélioration des performances
  • ESM par défaut pour les builds SSR
  • Pas mal de features experimental (HMR Partial, …)
  • Réduction du bundle en taille
  • Bugfixes

Release Blog

📹 C’est quoi vite ? (séance de rattrapage vidéo en 100 secondes)

📹 Apprenez Vite avec Evan You (vidéo 13mn)

Github Copilot

GitHub Copilot, l’IA d’auto-complétion de code est officiellement lancée. Vous aurez 60 jours gratuits puis l’IA de GitHub vous coutera 10$/ mois, gratuite pour les étudiants ainsi que les mainteneurs open-source. Compatible avec la suite JetBrains, VSCode, NeoVim, et Visual Studio.

Release Blog

Site officiel

NestJS 9

Le framework pour NodeJS annonce sa nouvelle majeure.

  • REPL
  • Configurable Module Builder
  • Switch le driver de redis de redis à ioredis
  • Upgrade des libs (fastify 4 support, drop node 10)
  • Nombreux fixs et améliorations

Release Blog

Migration Guide

🔥 Docusaurus 2.0

Docusaurus v2.0

Le générateur de site statique React orienté documentation et utilisé par les plus grands (Snapchat, Ionic, Prettier, ReactNative, Jest, Figma, CRA, 1Password, …) sort enfin sa V2 (la tout de suite, pendant que je rédigeais cette newsletter) ! Réécrit intégralement de la tête aux pieds, il permet désormais plus de customisation grâce à un système de theming et MDX, nouveau système de plugin qui devrait animer les contributions, il y a énormément de nouvelles features (Agolia Search, PWA, i118n, SEO, TypeScript Support, etc). Le nombre de téléchargements par semaine dépasse déjà celui de la v1 et le SSG rattrape petit à petit son concurrent direct .. GatsbyJS !

Release Blog

Article de 1Password qui vante les mérites de Docusaurus

Autre releases : ESLint 8.20

DIVERS

❤️ CSS Attributes Talk

Nous utilisons tous les –css-attributes, mais est-ce qu’on les exploites à 100% de leur potentiel ? Cet excellent talk est présenté par Lea Verou, qui par la même occasion a release l’outil (rety) qu’elle a développé pour faire des présentations “live coding”, il suffit juste d’appuyer sur play.

[Slides] – Rety (outil live coding)

❤️ Construction d’un site web Next.js + TailWind (ASMR)

Fresh in depth (45mn)

Nous avons parlé de Fresh le mois dernier, ce framework web qui utilise Deno (alternative à Node). Ci-dessous une vidéo très complète de Jack Herrington, qui rentre dans le détail de l’architecture au cœur de Fresh, Islands.

Today’s old tbh 😳

No alt text provided for this image

LES RECOMMANDATIONS D’ARTICLES

Comment synchroniser des curseurs entre navigateurs (en)

Si vous avez déjà utilisé Miro, vous avez déjà surement vu les curseurs de vos collègues s’agiter sur votre écran … Mais alors est-ce que c’est facile à faire ça, synchroniser des curseurs ? (spoiler : non)

Wikimedia (Wikipedia group) utilise désormais Video.js (en)

Video.js vient remplacer Kaltura qui rendait service à l’encyclopédie connue de tous depuis près de 7 ans. Cet article aborde les coulisses de cette transition.

❤️ L’histoire de Meteor, le framework pionnier (en)

Le créateur des sondages “State of JS” et “State of CSS”, Sacha Grief, nous raconte l’histoire (et son histoire) avec Meteor, le framework qui a tracé le chemin pour les frameworks d’aujourd’hui. Je connaissais pas du tout, étant trop jeune, et c’est super intéréssant !!

SOLID en React

C’est deux articles qui se complètent. Un dénonce le problème de l’introduction des hooks de React, qui selon lui violent les principes de SOLID, en place depuis de nombreuses années. Le second article lui explore comment appliquer les principes SOLID à React (et aux hooks), aborde les bonnes et mauvaises pratiques …

Peut-on admettre que les hooks React étaient une mauvaise idée ?! (en)

Comment appliquer les principes SOLID en React ? (en)

L’introduction du selecteur CSS :has permet de nouvelles choses (en)

On en a parlé ici quand c’est sorti, le selecteur :has est tout neuf, et les gens découvrent de nouvelles façons de l’utiliser.

use useState less, use useReducer more. (en)

useReducer est pas assez utilisé, ou alors mal. Il y a plein de manière de l’exploiter qui permettent d’écrire un code plus clair et concis.

Comment analyser les parts de marché des packages npm ? (en)

Cet article passe en revue les solutions et les outils exploitables qui permettent de déterminer l’utilisation d’un package npm : npmjs.comnpm-stat.comnpmtrends.com, GitHub dependencies, sondages, … Comment exploiter ces données ?

Expression vs Statement : Quelle différence ? (en)

  • Une définition
  • Une astuce pour déterminer si un bloc de code est une expression ou un statement
  • Exemple pratique

❤️ Retour d’expérience : Tentative de phishing d’une société (fr)

Il y a souvent des campagnes de prévention au phishing, mais quand on essaie, si on s’y prend bien, ça fonctionne. C’est ce que l’auteur a essayé de faire sur une société française et il explique comment il s’y est pris.

Thinking in effects (en)

La documentation beta de React, en cours de réécriture a une nouvelle page nommée “Thinking in Effects” qui explique comment switcher son esprit de “penser en cycle de vie” à “penser en effects”. La page n’est pas encore terminée et est en cours de rédaction.

Les essentiels pour un frontend performant (en)

Quelles sont les différentes méthodes pour éviter de bloquer le main thread ? Partie 1 d’une suite d’articles sur la performance du frontend (partie 0 déjà sortie abordant le rendering cycle).

TP Construction d’une web app moderne (en)

React 18, Vite, Netlify Functions, wouter, Nightwatch et GitHub Actions.