Double Slash Double Slash

Un épisode de rentrée en format "news". Nous revenons sur les annonces qui ont eu lieu durant l'été 2021. GitHub Copilot Du pair coding avec une AI ! Principalement disponible sur VSCode, GitHub Copilot est une assistance formée sur des milliards de lignes de code public. Elle complète votre code au fur et à mesure que vous écrivez.
Elle apprend en analysant votre code et vous suggère la complétion de votre code. Vous êtes libre d'accepter ou non la suggestion.
Encore en version technical preview, vous pouvez l'essayer en allant sur cette page : https://copilot.github.com/ GitHub Dev Passer en mode “édition” grâce avec la touche "." ! Quand vous êtes dans un repository sur github.com, il vous suffit d'appuyer sur la touche "." de votre clavier pour passer sur github.dev et éditer le projet sur un VSCode en ligne.
Vous pouvez importer vos settings et travailler comme si vous étiez dans votre VSCode installé sur votre ordinateur.
Les notes de cet épisode sont créées directement sur github.dev Alpine JS 3 La version de la maturité ! Fin mai, c'est déroulé l'alpine day. https://alpineday.com/watch.Nous vous recommandons de visionner les différentes présentations.
Suite à ça, la version 3 d'AlpineJS est sortie. Dans la foulée, un nouveau site et une nouvelle documentation. Petite Vue WTF Evan ! Quand Evan You fait un side project, ça donne petite-vue.
Directement inspiré d'AlpineJS, petite vue (avec l'accent) est une petite librairie qui pèse seulement 6Kb.
Une grosse majorité des méthodes provenant de VueJS sont disponibles. Elle permet de créer des éléments interactifs dans une page web sans devoir installer une plus grosse librairie. Vue 3 La bêta que l'on utilise tous en prod ! La version 3.2 vient de sortir avec des nouveautés et des grosses améliorations de performance.
Lire ici le post de la version 3.2 : https://blog.vuejs.org/posts/vue-3.2.html Nuxt 3 Plus c'est long, plus c'est bon ! La version 3.2 vient de sortir avec des nouveautés et L'attente est longue, mais le travail est immense pour l'équipe de Nuxt Lab.
La conf Nuxt Nation vient de passer avec une présentation et la timeline du travail pour sortir la version 3 de Nuxt.
La première version bêta publique est annoncée pour le 12 octobre 2021.
Le travail est immense pour l'équipe, car en plus de réécrire totalement la version 3 en TypeScript, il faut maintenir la version 2 et sortir des nouveaux modules. À l'image de Nuxt Image sorite courant juin 2021 !
En quelques lignes, la version 3 de Nuxt, c'est : Compatible Vue 3 Très compatible avec TypeScript (comme Vue 3) Un nouveau moteur Nitro, très performant et capable de faire de l'incrémentale. Un bundle de prod hyper performant et cross plateforme. Strapi 4 On reprend tout depuis le début ! La version 4 de Strapi est en développement. Une grosse majorité de fonctionnalités est repensée.
Voici les principales évolutions : Nouvelle interface d'admin Nouveau système de plugin Nouveau Database Layer Nouvelle API REST et GraphQL Système de migration Système de hook pour étendre Strapi Au-delà de la version 4, Strapi a annoncé un changement de pricing :
https://strapi.io/blog/introducing-user-based-pricing-for-strapi-enterprise-edition Astro JS Faire l'inverse des autres ! Astro est un générateur de site statique qui par défaut, ne met aucun JavaScript dans le navigateur.
Vous pouvez développer vos templates avec le langage ".astro" mais aussi avec vos frameworks JS préférés : lit, Vue, React, Preact, Svelte ou Solid. Astro compile sans problème avec plusieurs frameworks.
En cas d'utilisation d'un component créé avec Vue par exemple, il est rendu par défaut sans interaction, juste en HTML. Ensuite, vous pouvez choisir différents modes d'hydratation pour le rendre interactif : load, visible, idle, only.
Il gère également tous les assets (css, etc.).
Encore en version bêta, il semble très prometteur. Outil recommandé Fig Podcast présen

Un épisode avec un invité, Ivan Enderlin, co-fondateur de Wasmer. Une runtime open-source pour executer Web Assembly coté serveur. WebAssembly est un type de code qui peut être exécuté dans un navigateur web. Langage de bas niveau, il est proche de l'assembleur et il permet d'atteindre des performances proches des applications natives (par exemple écrites en C/C++) tout en fonctionnant sur le Web. WebAssembly est pensé et conçu pour fonctionner en lien avec JavaScript. Ivan Enderlin, nous explique comment Web Assembly fonctionne et pourquoi il faut s’intéresser à cette techno qui devient de plus en plus populaire. Ivan Enderlin : https://twitter.com/mnt_io et https://twitter.com/wasmerio Les liens de l'épisode : WebAssembly, https://webassembly.org/ Wasmer, https://github.com/wasmerio/wasmer Yew Rust Web Framework, https://yew.rs/ AssemblyScript, https://www.assemblyscript.org/ wasm-pack, https://github.com/rustwasm/wasm-pack/ wasm-bindgen, https://github.com/rustwasm/wasm-bindgen The Rust and WebAssembly book, https://rustwasm.github.io/docs/book/ Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz

Dans cet épisode, nous allons parler d'un retour d'expérience sur un projet de site statique qui doit comporter un grand nombre de pages. Le context Sur le papier, les sites statiques c'est l'idéal pour avoir un site rapide et sécurisé. Mais quand est-il pour un site avec beaucoup, beaucoup de pages ? Un site de média publie un grand nombre d'articles au quotidien et les articles ne sont plus retouchés par la suite. Des pages statiques sont donc l'idéale pour ce type de site.
Est-il possible de gérer un processus de publication et de déploiement utilisable. Comment se passe le déploiement d'un site avec beaucoup de page. Plusieurs questions en suspens avant la réalisation d'un prototype fait en début d'année 2021. Cet épisode fait suite à un article publié sur le site jamstatic.fr Les liens de l'épisode : https://craftcms.com/ https://nextjs.org/ https://nuxtjs.org/ Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz

En juin 2021, Google introduit de nouveaux indicateurs de performance pour les sites web. Ils annoncent qu'ils sont désormais pris en compte dans les critères pour le classement dans le résultat de recherches. On constate une panique générale des propriétaires de site web alors que Google avait prévenu depuis un moment que la vitesse de chargement serait de plus en plus prise en compte. Si vous êtes propriétaire d'un site WordPress créé avec un builder, vous pouvez vous inquiéter ! Mais attention, cela peut toucher tous les sites. N'oubliez jamais, rien n'est automatique et votre site sera rapide uniquement si vous faites en sorte qu'il le soit ! Dans cet épisode, nous détaillons les 3 indicateurs et comment améliorer le score d’un site sur chaque critère : Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) 1 - Largest Contentful Paint (LCP) Moins de 2.5 secs pour charger le plus gros élément visible dans le viewport. Une image, une image dans un svg, une vidéo, élément avec background-image, élément avec du texte.
Pour la majorité des sites, c'est une image (hero image) Pour trouver l'élément, Dev Tools (chrome) > Preformance (run) > dans la timeline "Timing" trouver le bloc "LCP" Serveur optimiser la réponse du serveur (cache, code..) Images les images doivent être responsive (afficher différentes images en fonction de la largeur du device). limiter les formats des images, notamment pour les grands formats réduire le poids des images et utiliser webp si possible utiliser loading sur les images pour différer le chargement Fonts limiter et optimiser les polices utiliser "font-display: swap" et avoir des polices de fallback Scripts tiers limiter les scripts tiers (GA, etc..) optimisations réduire le poids des fichiers JS réduire le poids des fichiers CSS supprimer le CSS inutilisé utiliser la technique du critical CSS defer chargement du CSS si possible. Pour les éléments non visibles. async ou defer sur les scripts non nécessaires au chargement Bonus utiliser les preconnect preload les éléments importants (image hero, fonts) 2 - First Input Delay (FID) Le temps pour que la page soit utilisable (clique sur un lien ou un bouton par exemple)
Principale coupable, les fichiers JS. Le poids et le temps de parsing. réduire la taille des fichiers JS Pour limiter le temps de parsing des fichiers. limiter les scripts tiers (GA, etc..) Pour limiter les requêtes et le temps de parsing des fichiers. 3 - Cumulative Layout Shift (CLS) Dev Tools (chrome) > Performance (run) > Dans timeline "experience", trouver le bloc "Layout Shift" Stabilité des éléments dans la page. Insertions de pub, de bannière ou une hydratation qui est longue peut décaler le contenu. Attention aux images qui peuvent décaler le contenu une fois chargé. définir la taille des images et des vidéos. (16:9, height * 16/9) ne pas insérer des éléments entre d'autres éléments au chargement de la page (pub, banner) Réserver l'espace pour les éléments dynamiques, utiliser des skeletons pour les images (bloc bg gris par exemple) définir la place pour les éléments "embed" (pub, vidéo, etc..) Les liens de l'épisode : Un hack plutôt efficace https://web.dev/vitals/ PageSpeed Insights https://gtmetrix.com/ Ligthouse Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz

Un épisode avec 2 invités : Thomas cofondateur et Marin développeur Core de MeiliSearch. Nous allons parler de ce moteur de recherche open source et du langage Rust. MeiliSearch est un moteur de recherche open source.
Développé sur le langage Rust pour la partie Core, il est possible de le connecter à de multiples autres langages pour l'utiliser sur votre projet. Sans avoir besoin de coder en Rust, vous pouvez alimenter le moteur avec vos data et effectuer des recherches pour les afficher sur votre site.
Vous pouvez installer un serveur facilement via des services comme Digital Ocean par exemple. Ainsi vos données vous appartiennent et vous gérez vous-même votre service de recherche. Vous avez également un coût mensuel maitrisé. Historique : C'est lors d'un stage chez un gros acteur du e-commerce français qu'ils sont confrontés à la difficulté d'implémenter un moteur de recherche. Ils réalisent une première version lors du stage avec le langage GO.
Plus tard, vers fin 2018, l'aventure continue avec une nouvelle version basée sur Rust. Rust Dans l'épisode, nous parlons aussi du langage Rust. Petit retour d’expérience de nos deux invités qui utilisent le langage au quotidien pour en savoir un peu plus sur Rust. Nous vous laissons découvrir MeiliSearch et Rust plus en détail en écoutant l'épisode numéro 23 avec nos invités: Thomas,@totolapaille Marin, @Marinpostma Les liens de l'épisode : MeiliSearch Doc Le slack Le github Getting started twitter Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz

Les bundlers (générateur de bundle), on les utilise au quotidien. Ils sont indispensables dans les outils des développeurs front et ils ont beaucoup évolué.
Nous passons en revue les principaux bundlers les plus utilisés et surtout nous parlons des nouvelles générations de bundler. Pourquoi on utilise des bundlers : Limiter les requêtes, minifier et éviter de polluer le scope global (window). Avoir un code plus propre découpé en module. Et une réutilisation du code. Avant les bundlers: Immediately Invoked Function Expression (IIFE). Plugin jQuery qui s'appelait à travers jQuery Les principaux types de modules : CommonJS: module.exports = ...; UMD (Universal Module Definition): ESM (EcmaScript Modules): compatibilité 92% https://caniuse.com/es6-module Browserify (js + plugin pour autre fichier) première release en 2011. Uniquement JS. Permettait de créer des modules avec require/module.exports: http://browserify.org/ Brunch (js, css, etc..) simple, peu de config, skeleton: https://brunch.io/ Webpack (js, css, ...): https://webpack.js.org/ Rollup: Top pour faire des packages. Capable de compiler en differents types (CommonJs, AMD, IIFE) https://rollupjs.org/guide/en/ Nouvelle génération de bundler Snowpack: En mode dev, pas de bundle. Recharge uniquement le fichier modifié. En production, par défaut, il fait une optimisation optionnelle, mais on est toujours sur du ESM. On peut ajouter des plugins (webpack, Rollup) pour faire un seul fichier. https://www.snowpack.dev/ Rome: https://github.com/rome/tools Vite: Fais beaucoup de choses "out of the box”. Le mode dev est en ESM. Divise en 2 modules: le code source de l'app et les dépendances. Il prébundle les dépendances, car elles changent peu lors du dev. Le code source est en ESM. Fais un bundle (sans ESBuild mais avec Rollup) pour la production pour le moment. https://vitejs.dev/ ESBuild (Go) vraiment jeune pas encore prêt pour la production. Par contre extrêmement rapide et très prometteur. https://esbuild.github.io/ WMR: https://github.com/preactjs/wmr Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz