Semaine 22
10 modern Node.js runtime features to start using in 2024
Est-ce que vous connaissez bien Node ? Voici une liste avec des exemples de ce que l’on peut faire Node nativement (sans librairie) : lancer des tests unitaires, mock, watch, .env, permissions, …
https://snyk.io/fr/blog/10-modern-node-js-runtime-features/
Fontsource
Pour vos polices d’écriture web, vous utilisez surement Google Fonts ? En alternative, il y a Fontsource qui propose les polices d’écriture en package npm. Ainsi ça reste en local et c’est facile à mettre à jour. Il est possible aussi de télécharger en dur ou de passer en mode CDN.
The Modern Guide For Making CSS Shapes
Article assez complet pour créer des formes géométriques en pure CSS. Pas forcément utile tous les jours, mais pratique pour faire des masques sur des images (sans SVG) ou faire des onglets de tabulation tout joli.
https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
Comprehensive guide to JavaScript performance analysis using Chrome DevTools
Exemple d’optimisation de code JavaScript via le DevTools de Chrome. On y voit l’utilisation de l’onglet Performance jumelé à l’onglet Sources pour améliorer les temps de rendu.
https://blog.jiayihu.net/comprenhensive-guide-chrome-performance/
Kuto, a reverse JS bundler
Et si on optimisait l’output d’un bundler comme Webpack ou Vite ? C’est ce que Sam Thorogood s’est dit (et fait). Avec Kuto, on mange le bundle une premiere fois, on sépare les bouts de code en deux catégories : avec ou sans side effect. Tout le code sans side effect est alors à mettre en cache pour une longue durée. A la 2eme visite du client et nouveau bundle, on ne recharge que le nécéssaire qui change le contenu, et non le coeur qui en soit n’a pas bougé. Il serait possible de réduire de 71% (base de 3Mo d’un projet React) ainsi le téléchargement du client suite à un nouveau bundle. A voir si cette méthode de split deviendra ou non une nouvelle norme.
How we used esbuild to reduce our browser extension build times by 90%
Toujours dans l’optmisation, mais cette fois dans le temps de build, les personnes de chez 1Password nous expliquent comment ils ont réduit de 90% leur temps de build via esbuild.
https://blog.1password.com/new-extension-build-system/
Athena Crisis is now Open Source
Suite au financement à hauteur de $10,000, Christoph Nakazawa a rendu open-source le code de son jeu Athena Crisis (dispo sur Steam). Attention seul le coeur du code du jeu est open-source. Tous les assets graphiques / musiques ne sont pas disponibles et certaines parties, comme la partie serveur, ont été omis. Le jeu a été fait en full React.
https://cpojer.net/posts/athena-crisis-open-source
City In A Bottle - A 256 Byte Raycasting System
Pour les amoureux de code “illisible”, cet article nous explique comment arriver à ce rendu en si peu de code, étape par étape.
https://frankforce.com/city-in-a-bottle-a-256-byte-raycasting-system/
Updates
- Astro 4.9 — https://astro.build/blog/astro-490/
- Deno 1.44 — https://deno.com/blog/v1.44