Show cover of Double Slash

Double Slash

Double Slash, un podcast avec 2 animateurs qui se retrouvent pour discuter des outils et des techniques pour le développement moderne de site web et d’application web. Retrouvez-nous régulièrement pour parler de sujets variés tels que la JAMStack, l’accessibilité, l’écoconception, React JS, Vue JS et des retours d’expériences sur des implémentations. Également, des débats autour de sujets polémiques tels que la communication entre développeurs/designers ou comment avoir un discours compréhensible par les clients. Nous serons accompagnés de temps en temps par des invités experts dans leur domaine pour approfondir un sujet et avoir des retours d’expériences. Faites-nous vos retours par mail sur info@slash-podcast.fr

Titres

PWA Builder avec David Rousset
Un épisode avec un invité, David Rousset, program manager chez Microsoft et coauteur de BabylonJS. Avec lui, nous allons parler de PWA Builder, un service pour nous aider à publier les progressives web apps Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Dans cet épisode nous allons parler de PWA Builder, un service qui permet de "compiler" une Progressive Web App dans un package prêt à être publié sur un store d'application mobile. Nous allons également parler de la gestion des projets open-sources, comment instaurer la culture open-source dans une équipe et comment Microsoft a évolué sur l'ouverture aux communautés et à l'open-source. Retrouvez David Rousset https://twitter.com/davrous https://www.davrous.com/ Liens https://www.pwabuilder.com/ Podcast présenté par Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
68:55 21/09/2022
Back to school 2022
Un épisode de rentrée en format "news". Nous revenons sur les annonces qui ont eu lieu durant l'été 2022. Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Chrome support Web Framework Chrome distribue la monnaie ! https://developer.chrome.com/blog/framework-fund-2022/ Bun.js, la nouvelle runtime JavaScript Bun explose les compteur ! https://bun.sh/ https://dev.to/khansa/bun-is-a-lightweight-all-in-one-javascript-runtime-19oe https://oven.sh/ Deno, l'autre runtime JavaScript Big Changes Ahead for Deno ! https://deno.com/blog/changes PlanetScale, service de DataBase Database serverless ! https://planetscale.com/blog/introducing-the-planetscale-serverless-driver-for-javascript Temporal, proposition TC39 Enfin une meilleur gestion des dates en natif ! https://tc39.es/proposal-temporal/docs/ Netlify Netlify sert la vis sur les repositories d'organisations ! Heroku Heroku stop les comptes gratuits https://blog.heroku.com/next-chapter Alternatives https://caprover.com/ https://coolify.io/ Autres GraphiQL 2 Git Explorer GraphQL Cache Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
51:37 07/09/2022
Animations web avec JavaScript
Dans cet épisode, nous allons expliquer comment faire des animations avec JavaScript, les concepts de base et les outils. Retrouvez la vidéo de l'enregistrement sur le YouTube de DoubleSlash Pour finir la série sur les animations dans le navigateur, on termine avec un tour d'horizon des solutions avec du JavaScript. On évoque les concepts de keyFrames, de Staggering, les Timelines ou autres Triggers Puis on brosse le panel des solutions les plus connues et utilisées sur le Web. Bonne écoute ! Liens GreenSocks Anime.js Motion ONE Auto animate React Framer Motion VueUse Motion Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
50:30 31/08/2022
Les animations avec CSS
Dans cet épisode, nous allons expliquer comment faire des animations avec CSS et comment optimiser les performances de vos animations Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Animation avec CSS Tout commence avec un changement d’état d’un élément. Changement de couleur et de taille pour un bouton par exemple quand je passe dessus avec la souris. button { width: 170px; height: 35px; background-color: #eee; } button:hover { width: 200px; height: 40px; background-color: #ccc; } Déclencher les changements d’états Pour déclencher des animations, on peut utiliser les pseudo classes (focus, hover, etc.), ajouter des classes avec JS et utiliser "IntersectionObserver" pour déclencher l'animation quand l'élément devient visible. Transition L’animation/transition apparait dès que l’on ajoute la propriété “Transition" Pour déterminer les transitions entre 2 états : transition: ; Marche sur quasiment tout : width, height, background, etc.. Transform Mais dans l’idéal, il faut utiliser en priorité la propriété Transform. On reviendra sur la raison plus tard. Transform c'est 20 propriétés de transformation. transform: scale(); transform: translate() transform: rotate() transform: skew() transform: perspective() Avec transform-origin, on peut créer des mouvements poussés transform-origin: 0% 50%; Animation Passons maintenant aux vraies animations, celle qui peuvent tourner en boucle. Il est tout à fait possible de faire des animations avec CSS. Pour cela, il faut utiliser les propriétés animations : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state Évidemment, il y a une écriture raccourcie pour toutes les propriétés : animation: name duration timing-function delay iteration-count direction fill-mode play-state; Keyframes Mais avant de pouvoir utiliser les propriétés ”animation”, il faut créer une timeline avec @keyframes : @keyframes mymove { from {top: 0px;} to {top: 200px;} } ou @keyframes mymove { 0% {top: 0px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 200px;} 100% {top: 0px;} } Dans l'ensemble, c'est assez simple. On peut tout utiliser dans les @keyframes mais attention aux performances ! Motion Path 3 propriétés qui permettent à un élément de suivre un tracé. Le tracé a suivre : offset-path Position de l’élément sur le tracé : offset-distance La rotation de l’élément sur le tracé : offset-rotate div { offset-path: path('M10 10 H 180 V 180 H 10 Z'); } div { animation: myMove 1s; } @keyframes myMove { 0% { offset-distance: 0%; } 40% { offset-distance: 70%; } 100% { offset-distance: 100%; } } Bientôt supporté par Safari !! FPS La plupart des appareils actualisent aujourd'hui leurs écrans 60 fois par seconde. S'il y a une animation ou une transition en cours d'exécution, ou si l'utilisateur fait défiler les pages, le navigateur doit faire correspondre le taux de rafraîchissement de l'appareil et mettre en place 1 nouvelle image, ou cadre, pour chacun de ces rafraîchissements d'écran. Chacune de ces cadres a un budget d'un peu plus de 16 ms (1 seconde / 60 = 16,66 ms). En réalité, cependant, le navigateur a un travail de nettoyage à faire, donc tout votre travail doit être achevé à l'intérieur de 10 ms. Lorsque vous ne respectez pas ce budget, la fréquence d'images baisse et le contenu juge à l'écran. Ceci est souvent appelé Jank, et cela a un impact négatif sur l'expérience de l'utilisateur. Bien animer ! Pour commencer, on va parler des étapes de rendu du page web (HTML, CSS). Cela fonctionne comme un tunnel qui s'appelle pixels-to-screen pipeline : 0 - JavaScript : Trier, ajouter un élément dans le DOM, etc... Dans le cas où c'est JS qui déclenche un changement visuel. 1 - style calculation (calcul du style) : lecture du CSS et détermination des règles basées sur les sélecteurs pour pouvoir les appliquer sur les éléments 2 - Layout (disposition) : Determination de la taille des éléments et placements dans le flux de la page 3 - Paint (peinture( : Les éléments deviennent des pixels. Essentiellement toutes les parties visuelles des éléments. Le dessin est généralement effectué sur plusieurs surfaces, souvent appelées couches. 4 - Composition : assemblage des layers entre eux pour composer la page Important Les propriétés ne sont pas toutes appliquées aux mêmes étapes. width et height c'est au layout. backgroud color c'est au paint. Chaque étape déclenche les suivantes. Changer la width d'un élément déclenche un layout > paint > composition. Donc plus de calcul et donc plus de temps. Dans l'idéal, il faut éviter de déclencheur du layout et du paint. Et donc, utiliser des propriétés qui déclenche que de la composition : transform et opacity. Si vous devez utiliser une propriété qui déclenche la disposition ou la peinture, il est peu probable que vous puissiez rendre l'animation fluide et performante. https://csstriggers.com/ pour vérifier ce que chaque propriété déclenche. will change Si vous êtes obligé d'utiliser des propriétés autres que transform et opacity, vous pouvez spécifier au navigateur que l'élément va subir des transformations. body > .sidebar { will-change: transform; } Attention : will-change est conçu pour être utilisé en dernier recours afin d'aider à la résolution de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive. Debug DevTools onglet animation CMD+P > et performance pour analyser les animations. A11y Il existe un media query qui permet au personne de spécifier qu’ils ne veulent pas d’animation. Important pour ne pas imposer des mouvements sur l’écran à des personnes qui les refusent. @media (prefers-reduced-motion: reduce) {} Les liens Articles https://web.dev/rendering-performance/ https://web.dev/animations-guide/ https://web.dev/animations-overview/ https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/ Web Animation Performance Fundamentals – How to Make Your Pages Look Smooth (freecodecamp.org) Layers and how to force them — surma.dev (dassur.ma) Cours https://openclassrooms.com/fr/courses/5919246-creez-des-animations-css-modernes Motion Path : introduction aux animations CSS modernes - Alsacreations Créer des animations https://animista.net/ https://animate.style/ Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
49:43 19/08/2022
Three.js avec Bruno Simon
Un épisode avec un invité, Bruno Simon, qui va nous parler de Three.JS. Une bibliothèque JavaScript pour créer des animations 3D. Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Three.js Three.js est une librairie JavaScript pour créer des animations 3D dans un navigateur web. Three.js peut être utilisée avec la balise canvas disponible avec HTML5 sans avoir besoin d'utiliser un plugin. Bruno Simon Bruno est ce qu'on appelle, un créative Developpeur. Il créer des animations 3D très avancées qui s'approche de ce que l'on peut trouver dans le gaming. Bruno aime aussi partager, il a donc créé une formation en ligne qui permet à ceux qui sont intéressés d'apprendre Three.JS et son écosystème : https://threejs-journey.com Pour retrouver Bruno Simon : https://twitter.com/bruno_simon https://bruno-simon.com https://threejs-journey.com https://github.com/brunosimon Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
51:10 10/08/2022
Lottie, une solution pour les animations
Cet épisode fait partie d'une série de quelques épisodes dédiés à l'animation. Dans cet épisode, nous recevons Charly Martin pour parler de Lottie, une solution pour créer des animations SVG très avancées Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Lottie Lottie est un format open source d'animation vectorielle basé sur un fichier JSON. Le format a été créé par le département design de AirBnB. Ils sont créés un plug-in pour After Effects (Bodymovin) qui permet d'exporter les animations créées dans ce dernier sous un format lisible par des librairies disponibles sous différentes plateformes. Pour le web par exemple, avec la librairie lottie-web installée dans votre projet, vous pourrez afficher l'animation qui provient du fichier JSON. Vous l'avez compris, il est nécessaire de passer par After Effects pour créer l'animation. Cela peut être un frein à l'utilisation de Lottie. Par contre, si vous avez un Motion Designer dans votre équipe, vous allez pouvoir faire des animations très avancées qui sont quasiment impossibles à faire autrement. Liens de l'épisode https://airbnb.io/lottie/#/ https://github.com/airbnb/lottie-web https://lottiefiles.com/ https://lottielab.com/ Retrouvez notre invité Charly Martin https://www.linkedin.com/in/charlymartin/ https://github.com/CharlyMartin https://lottiestudio.com/ https://charlymartin.me/ Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
43:49 27/07/2022
Edge computing, le serverless à la sauce CDN
Dans cet épisode nous allons vous expliquer les grands principes du Edge Computing, son fonctionnement et son utilisation. Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Le serverless Un service serverless est un service que vous appelez, qui va exécuter le code qui lui est dédié (que vous avez écrit) et renvoyer une réponse. Vous le payez a l'utilisation, souvent en nombre de requête et durée de processing. Cela permet de ne pas posséder de serveur et de la gestion qui va avec. Cependant, lorsque vous créez une fonction serverless, vous sélectionnez une zone géographique. Si vous êtes en France, vous allez privilégier les lieux plus proches de vos internautes. Mais dans le cas, où votre site est international et qu'un visiteur se trouve loin de la France. Le temps de réponse s'allonge et la latence s'installe. Pour une poignée de fonction, cela peut éventuellement passer, mais si toute votre logique, voir votre site repose sur du serverless. Cela devient problématique pour les internautes loin de votre zone de serveur. Évidemment, il est possible de multiplier les serveurs pour servir en fonction du lieu géographique, mais cela ajoute une complexité que vous n'avez pas forcément envie de gérer. Les CDN Un serveur CDN (Content Delivery Network) fait partie d'un réseau réparti à travers la planète. Quand on utilise un CDN, c'est généralement pour des éléments statiques: Images, scripts, fichiers. Le réseau va automatiquement sélectionner le serveur le plus proche du visiteur pour réduire le temps de réponse. Pour une personne en Californie, les éléments statiques proviendront d'un serveur sur la cote Ouest des US. Pour une personne en Allemagne, c'est un serveur allemand qui répondra pour les éléments statiques. Cela marche parfaitement, mais uniquement pour des fichiers. Pas de logique, pas de traitement. Les edges functions Les edges functions, sont des services serverless qui agissent comme des serveurs CDN. Cela permet d'effectuer des traitements au plus proche des internautes. Il y a différent service disponible. Ils utilisent des runtimes différentes. C'est-à-dire que l'on ne retrouve pas forcément du Node.JS pour faire tourner JavaScript. Cloudflare, fait tourner le moteur V8 par exemple. Le même que Chrome ou Node.JS. Netlify a basé ses fonctions edge sur Deno. Cela permet d'avoir des temps de réponse plus rapide, car le cold start est ultra court par rapport à un serveur Node.JS. La suite Au-delà de faire des traitements quand on les appelle. Les edges functions sont capable de faire beaucoup plus. Les Frameworks sont en train d'évoluer et de s'adapter à cette nouvelle technologie. On peut citer, Nuxt 3 qui est capable de tourner sur des Cloudflare Workers. Oui vous avez bien lu, une application complète qui tourne sur un workers. Et donc, une application toujours générée au plus près du visiteur. Fresh, un nouveau Framework, est également pensé pour tourner sur du edge. Bref, le futur est en marche et il semble prometteur. Les liens Netlify Edge function Cloudflare Workers Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
42:51 13/07/2022
Les Web Platforms en 2022
Un passage en revue des implémentations futures et actuelles dans les navigateurs après la Google IO et la WWDC Apple. Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Les slides utilisés pour l'épisode https://slides.com/goodmotion/state-of-web-platform Pour la toute première fois, tous les principaux fournisseurs de navigateurs se sont réunis pour résoudre les principaux problèmes de compatibilité des navigateurs identifiés par les développeurs Web. Et cela se ressent déjà dans les évolutions de nos navigateurs. Les implémentations sont plus rapides et nous pouvons profiter plus rapidement des nouvelles fonctionnalités. En tant que développeurs web, nous devons nous tenir à jour sur les nouvelles fonctionnalités présentes dans les navigateurs afin de faire évoluer notre façon de coder et supprimer les hacks utilisés auparavant. Dans cet épisode, nous passons en revue les importantes implémentations qui vont vraiment changer notre quotidien de développeur web. Suite à la Google IO 2022, la conférence annuelle Google pour les développeurs, différentes vidéos ont été publiées pour présenter les nouveautés. Également, suite à la WWDC 2022, la conférence annuelle Apple pour les développeurs, différentes vidéos ont été publiées pour présenter les évolutions de Safari et de WebKit. Nous avons visionné ces vidéos pour vous faire un résumé des principales fonctionnalités implémentées ou qui vont être implémentées dans les navigateurs. Les liens des articles Interop 2022: browsers working together to improve the web for developers State of CSS 2022 Les liens des vidéos What's new for the web platform Bringing page transitions to the web State of CSS What's new in Safari and WebKit Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
46:13 29/06/2022
Spécial news - Juin 2022
Un passage en revue des news et releases de nos outils et technologies de développement web des dernières semaines Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Les news évoquées durant l'épisode : 01:00 Angular 14 03:47 Atom, va mourir le 15 décembre 2022 ! 06:02 Tauri en version 1.0 08:34 Cypress en version 10 13:00 Histoire 16:38 Vue version 2.7 21:10 Fastify DX React 28:50 Fresh 35:21 Redwood en version 2.0 38:35 Wordpress 6 45:53 🎉🎉 IE11 n'est plus ! 🎉🎉 Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
49:22 22/06/2022
Doit-on utiliser TypeScript ?
Un épisode sur les bases de TypeScript afin de vous convaincre d’utiliser TypeScript dans vos projets Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Précision sur les types et interfaces Durant l'épisode, on évoque la différence entre les types et les interfaces. Je dois préciser que l'on peut également faire des objets avec les types. Les principales différences : Les types ne peuvent pas être réimplementés et étendus Les interfaces peuvent être réassignées, ce qui provoque un fusion. Elles peuvent être implémentées contrairement aux types. Nous vous renvoyons sur cette vidéo explicative : https://youtu.be/sFNQeh5Oc08 TypeScript c’est quoi exactement ? En prenant la documentation officielle, TypeScript est un langage de programmation construit par-dessus Javascript et offrant de nouvelles fonctionnalités pour combler les manques. Créé par Anders Hejlsberg (concepteur du FW .net) pour Microsoft entre 2010 et 2012 (premiere version 0.8 en 2012), dans l'objectif de combler les manques de Javascript. JS est obligatoire pour le browser, seulement pour les gros projet, JS c’est pas simple. Le projet est open-source. Ce type de technologie est souvent appelé "Superset", un exemple très connu est SASS pour le CSS. Un language adoré par les dev Java, C++. Nous allons écrire du code TypeScript qui sera ensuite transcompiler en Javascript. Il a été créé en 2012 mais personnellement, j’ai entendu parler de typescript avec la sortie d’angular 2. Avant l’utilisation de typescript, j’utilisais Flow (https://flow.org/) projet FB. Et Babel, si je voulais utiliser des choses non présentes dans JS. Exemple : les classes. Important ! Le code est toujours compilé en JS. Le browser ne sais pas executer du TS. Pareil pour le coté serveur. Deno, convertie en JS. Pourquoi TypeScript ? 1 - Disposer de type : JavaScript est un language au typage dynamique. Dans les langages à typage dynamique, l'interpréteur attribue aux variables un type lors de l'exécution en fonction de la valeur qu'elles possèdent à ce moment. Autre exemple : Piège classique, les valeurs des champs de formulaire sont en texte. Pour provoquer des bugs pour les calcules avec des nombres par exemple. TypeScript te prévient en cas d’usage avec les types définis pour les éléments de formulaire. 2 + "3" "23" 2 + "lol" "2lol" 2 - Comme les tests, c’est une façon de contrôler et de valider son code 3 - Autocompletion et vérification des valeurs : Quand un projet devient gros avec beaucoup de fonction et de fichier, il devient difficile de se souvenir des paramètres de fonction, les valeurs, etc. En gros, avec TypeScript, c’est une sorte de pair programming. TypeScript vient régulièrement te taper sur l’épaule pour te dire : “Yep mon gars, là, ce que tu fais, ce n’est pas bon.” 4 - Travail avec les API. Cela permet de typer les réponses des API par exemple. On définit clairement la réponse et ensuite on peut être certain que notre code fonctionne correctement. https://medium.com/@wujido20/runtime-types-in-typescript-5f74fc9dc6c4 Principe de base • Initialisation Création du fichier tsconfig.json qui indique comment compiler le code. Avec target, on indique la version de JS. Mini ES5. Max ESNext. https://www.typescriptlang.org/tsconfig#target • Extension des fichiers en .ts ou .tsx • Type/Interface définir les types des variables, paramètres, retour de fonction, etc. • Les types c’est pour les définitions simples • Les interfaces, c’est une sorte de shape d’objet. On pour aller plus loin et faire de l’héritage, etc.. • Inférence TypeScript est capable de définir lui-même le type. À partir du moment où une variable est définie, il peut voir automatiquement le type. • Generic C’est une sorte de typage dynamique. On détermine à l’usage le type de la valeur. Ça offre plus de souplesse, car avec l’inférence, je ne suis pas obligé de typer. Il devine. Si le premier usage de la fonction envoie une string, alors le type est string. Exemple simple : function identity(value: T): T { return value; } const result = identity(123); Plus poussé : function pickObjectKeys(obj: T, keys: K[]) { let result = {} as Pick for (const key of keys) { if (key in obj) { result[key] = obj[key] } } return result } const language = { name: "TypeScript", age: 8, extensions: ['ts', 'tsx'] } const ageAndExtensions = pickObjectKeys(language, ['age', 'extensions']) https://www.digitalocean.com/community/tutorials/how-to-use-generics-in-typescript • Type Guard et Narrowing Permet comme avec du code JS, vérifier que la valeur est bien la bonne. Si tu utilises un union avec donc plusieurs types, il faut tester le type avant de l’utiliser. const isArticle = (article: any): article is Article => typeof article === 'object' && article !== null && hasOwnProperty(article, 'title') && typeof article.title === 'string' && hasOwnProperty(article, 'views') in article && typeof article.views === 'number'; function padLeft(padding: number | string, input: string) { if (typeof padding === "number") { return " ".repeat(padding) + input; } return padding + input; } • Classes Usage très avancées des classes avec les éléments classiques : private, public, protected, readOnly, etc.. • Decorator (toujours experimental) utiliser une fonction dans une classe, sorte d’héritage. Tips On peut inclure TS dans un projet JS. Pas obligatoire de faire 100% TS. AllowJS dans la config. Et on peut même utiliser les types à travers JSDoc https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#type Inclure les dépendances dans son projet De plus en plus de librairies sont écrites avec TS. Donc dans ce cas, les Definitions Types sont dans le package. Exemple: Vue 3 est 100% en TS. Donc les définitions sont générées à la compilation. Sinon pour les full JS, il faut ajouter un package de type. Exemple : Lodash est en JS mais un package @type existe • https://www.npmjs.com/package/lodash • https://www.npmjs.com/package/@types/lodash Definitely Typed, l’organisation @types, un repo à la base communautaire et automatisé pour ajouter les types des packages https://github.com/DefinitelyTyped En dernier recours, il faudra déclarer les type pour un package, si rien n’existe. Repo pour vérifier les packages https://www.typescriptlang.org/dt/search Courbe d’apprentissage Un peu difficile dès que l’on rentre dans du code plus complexe. Notamment sur les types. Parfois on passe du temps à chercher pourquoi il n’accepte pas tel type. C’est souvent un problème de définition de type un peu trop poussé. Liens https://www.typescriptlang.org/cheatsheets Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
56:25 08/06/2022
Héberger une application web en 2022
Dans cet épisode, nous évoquons les différentes solutions pour héberger une application web Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Les différentes solutions pour héberger une application web Les offres Full Virtual Machine Dans cette offre, vous louez un serveur brut. Une machine virtuelle qui fait partie d’un serveur. Avantages Permets d’aller très très loin dans les configs et les optimisations. Sans limite, sauf vos compétences. Désavantages Barrières à l’entrée assez élevée. Demande de grosses compétences. Utilisateurs Les grosses équipes avec un gros budget. Une équipe ou une personne dédiée à la gestion des machines. Quelques exemples de services • OVH (FR) • Amazon Web Services / Google Cloud Platform / Microsoft AZURE / Digital ocean (US) • Infomaniak (CH) • Scaleway (FR) Les offres PAAS (Platform as a service) Avantages Très simple à mettre en place, configurer. Intégration continue facile avec github action, circleci, etc.. Déploiement automatique possible. Certains services proposent même le déploiement des Pull Request. Capacité d’auto scale. Augmentation des containers en cas de surcharge de trafic. Multiples technos/langages. Désavantages Attention aux réglages des autos scale des containers. Utilisateurs Les Startups et entreprises sans grosse équipe technique. Ou équipe qui ne veut pas gérer les serveurs. Quelques exemples de services fly.io (US) https://www.heroku.com (US) Salesforce https://render.com/ (US) https://jelastic.com/paas-cloud-hosting/ plusieurs sociétés utilisent cette interface. (US) https://www.netlify.com/ ( US ) https://vercel.com/ ( US ) https://coolify.io/ ( sur ton VPS ) France https://scalingo.com/fr (preview PR dispo) (FR) www.clever-cloud.com (FR) Les services BASS (Backend as a Service) Avantages Très rapide, performances. Possibilité d’auto scale. Pas de serveur à gérer plan gratuit généreux Désavantages Plus ou moins open source À qui appartiennent les données ? Utilisateurs Les Startups et entreprises sans grosse équipe technique. Ou équipe qui ne veut pas gérer les serveurs. Quelques exemples de services https://firebase.google.com/ (US) https://supabase.com/ (US) https://nhost.io/ (Sweden) https://appwrite.io/ (ISR) https://railway.app/ (US) https://www.8base.com/platform (US) https://www.back4app.com/ (US) Les offres Serverless Pass (Platform as a service) Comme des Pass, mais en mode serverless. Pas de container, mais des apps. Avantages Très simple. Déploiement en quelques clics mêmes pour un non-Tech. Auto déploiement par défaut. Désavantages La plateforme doit prendre en charge la techno/framework du projet. Service client parfois inexistant La majorité est une surcouche à AWS Utilisateurs Les Startups et entreprises sans grosse équipe technique. Ou équipe qui ne veut pas gérer les serveurs. Quelques exemples de services https://workers.cloudflare.com/ (US) https://aws.amazon.com/fr/amplify/ (US) Netlify (US) Vercel (US) Stormkit (Suisse) Surcouche remote AWS: https://www.qovery.com/ (FR) https://www.flightcontrol.dev/ (US) Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
64:33 25/05/2022
Outils de web Analytics et Vie privée
Dans cet épisode, nous avons le plaisir de recevoir François Best pour des outils de web Analytics et la protection de notre vie privée Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Notre invité François Best https://francoisbest.com/, @fortysevenfx La solution analytics de notre invité : https://chiffre.io Les autres solutions pour sortir ou remplacer Google Analytics Open-source et possibilité d'auto hébergement : https://ackee.electerious.com/ https://plausible.io/ https://www.piratepx.com/ https://umami.is/ https://matomo.org/ https://posthog.com/ https://www.kokoanalytics.com/ solution pour WordPress Autres solutions https://usefathom.com/ https://simpleanalytics.com/ Repo qui liste plusieurs solutions https://privacyfocusedanalytics.netlify.app/ Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
66:42 10/05/2022
State of Front-end 2022
On discute et on commente les résultats du questionnaire "State of Front-end" Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Le state of Front-end 2022 vient d'être publié ! Quels sont les Frameworks front les plus utilisés et quels sont les plus détestés ? Les bonnes pratiques des developpeurs front-end. Quel éditeur de code est le plus utilisé ? Vous connaitrez les réponses en écoutant l'épisode. Sinon, vous pouvez vous rendre directement sur le lien de la page dédiée aux résultats : State of Front-end Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
67:48 27/04/2022
La chasse aux news - Avril 2022
Un passage en revue des news et releases de nos outils et technologies de développement web des dernières semaines Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Les news évoquées durant l'épisode : 00:00 Intro et présentation 01:08 La version 1 Redwood JS lancée officiellement le 4 avril https://v1launchweek.redwoodjs.com/ 03:44 L’équipe d’Astro lancera la V1 le 8 juin 2022 https://astro.build/blog/astro-1-beta-release/ 08:10 Liberez vos threads avec Party Town https://partytown.builder.io/ 11:34 React 18 disponible sur NPM https://reactjs.org/blog/2022/03/29/react-v18.html 23:42 "Heroku is too limiting and expensive. AWS is too complex.". Pilotez votre web app sur AWS avec Flight Control https://www.flightcontrol.dev/ 28:17 Blitz le framework fullstack React pivote pour devenir un toolkit framework agnostique. https://blitzjs.com/docs/blitz-pivot 30:55 Faites vos tests unitaires avec vitest https://vitest.dev/ 34:00 Nuxt 3 toujours en développement https://v3.nuxtjs.org/community/roadmap/ 38:17 L'écosystème de Supabase s'étoffe pour devenir de plus en plus complet https://supabase.com/ 47:29 Un projet compatible Storybook mais version light https://www.ladle.dev/ 49:12 Parcel v2.4.0 Nouveau parcer css (écrit en Rust) 100x plus rapides que CSSNano https://parceljs.org/blog/parcel-css/ 53:40 La roadmap de Tina CMS pour 2022 https://tina.io/blog/tinacms-2022/ 57:15 - Petit retour rapide sur le WordCamp Geneve 2022 Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
61:45 15/04/2022
Web3, bullshit ou révolution ?
Alex nous fait découvrir le Web3 et nous explique les fondamentaux de ce web décentralisé prometteur. Retrouvez la vidéo de l'enregistrement sur YouTube Le WEB 3.0, Pourquoi ? En 2008, le bitcoin voyait le jour. Suite à la crise des subprimes, Satoshi Nakamoto, publia un livre blanc sur le fonctionnement d'une monnaie cryptographique. Une monnaie avec un fonctionnement décentralisé. Le concept avait comme moteur principal : une économie s'affranchissant de tout organisme tiers, tel que les institutions financières. Aujourd'hui, le web3 part d'une même idée. Le web, tel que nous le connaissons, et aujourd'hui principalement détenue par les grands groupes américains. Le web3 serait un web décentralisé à l'image des cryptomonnaies avec des mécanismes basés sur des blockchains qui pourrait améliorer la sécurité et la confidentialité des données Le WEB 3.0, comment ça marche ? Alex nous explique comment le web peut tendre vers plus de transparence, confiance et résilience avec les architectures décentralisées. On parle de blockchain, et de toutes les technos sous-jacentes (NFT,...). Comment vont-elles jouer un rôle dans le futur de nos métiers de développeur. Bonne écoute ! Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
54:14 09/03/2022
Hasura, une API GraphQL qui assure !
Support de l'épisode Indy, la comptabilité des indépendants tout simplement. Synchronisation bancaire sécurisée, déclarations fiscales préremplies et télétransmises, support client avec réponse sous 4 minutes. Obtenez 2 mois gratuits avec notre code sponsor. Cliquez sur ici pour profiter du code Alex nous parle d'Hasura, un service qui permet de monter une API GraphQL à partir d'une base de données. Retrouvez la vidéo de l'enregistrement sur YouTube Hasura est un système qui vous permet de monter un API GraphQL facilement à partir d'une base de données. Le code est open source. Vous pouvez l'autohéberger sur un serveur ou l'utiliser via le service cloud proposé par la société éditrice. Dans le dernier cas, il faudra payer en fonction de votre forfait. Une fois installé, vous connectez votre base de données et Hasura génère les schemas qui correspondent à vos data. Il génère également les resolvers et toute la partie CRUD (create, read, update, delete). Vous n'avez plus qu'a consommer la data à travers une route API et vous concentrer sur votre application. Il gère aussi la partie autorisation en donnant accès à tel ou tel data. Mais attention, de base, tout est ouvert. Vous devez donc utiliser un système d'authentification pour sécuriser vos data. Nous vous laissons écouter l'épisode pour en savoir plus sur Hasura. Bonne écoute. Les liens de l'épisode https://hasura.io/ https://www.nhost.io/ Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz Support de l'épisode Indy, la comptabilité des indépendants tout simplement. Synchronisation bancaire sécurisée, déclarations fiscales préremplies et télétransmises, support client avec réponse sous 4 minutes. Obtenez 2 mois gratuits avec notre code sponsor. Cliquez sur ici pour profiter du code
45:25 20/01/2022
RedwoodJS avec Simon Gagnon
Support de l'épisode Indy, la comptabilité des indépendants tout simplement. Synchronisation bancaire sécurisée, déclarations fiscales préremplies et télétransmises, support client avec réponse sous 4 minutes. Obtenez 2 mois gratuits avec notre code sponsor. Cliquez sur ici pour profiter du code Dans cet épisode, nous avons le plaisir de recevoir Simon Gagnon en direct de Montréal (Canada) pour parler de RedwoodJS. Retrouvez la vidéo de l'enregistrement sur YouTube Redwoodjs est un framework basé sur les meilleurs outils autours de la librairie ReactJS. Vous avez à disposition des outils préconfigurés tel que : webpack Prisma Storybook Jest Fastify Pino Vous pouvez démarrer un projet ultra rapidement sans aucune configuration. Avec des lignes de commandes disponible dans votre console, vous pouvez créer facilement des éléments dans votre projet, tel que des formulaires, sections, services ou pages. Par exemple, avec la commande : yarn redwood generate page home Vous allez générer une page home et "Redwoodjs" va vous générer automatiquement la route, le template et la storie qui va avec. Redwood est un framework développé autour de la philosophie Ruby on Rails et tout est pensé pour vous faciliter et optimiser le développement. Cela vous permet de vous concentrer sur votre application au lieu de perdre votre temps à configurer, à choisir les outils ou à structurer votre projet. Bonne écoute :) Pour retrouver notre invité Simon Gagnon : @SimonCrypta Simoncrypta : https://simoncrypta.dev/ GitHub de Simon : https://github.com/simoncrypta Les liens de l'épisode https://redwoodjs.com/ @redwoodjs Github redwoodjs Discord redwoodjs Tutorial redwoodjs Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz Support de l'épisode Indy, la comptabilité des indépendants tout simplement. Synchronisation bancaire sécurisée, déclarations fiscales préremplies et télétransmises, support client avec réponse sous 4 minutes. Obtenez 2 mois gratuits avec notre code sponsor. Cliquez sur ici pour profiter du code
46:16 28/12/2021
Bit.dev avec Olivier Combe
Support de l'épisode Indy, la comptabilité des indépendants tout simplement. Synchronisation bancaire sécurisée, déclarations fiscales préremplies et télétransmises, support client avec réponse sous 4 minutes. Obtenez 2 mois gratuits avec notre code sponsor. Cliquez sur ici pour profiter du code Dans cet épisode, nous avons le plaisir de recevoir Olivier Combe pour parler du service Bitdev. Un service qui vous facilite le quotidien pour la gestion de vos components. Retrouvez la vidéo de l'enregistrement sur YouTube et Twitch Bit.dev est un outil pour le développement en mode component driven (CDD). Le “component-driven development” est une méthode qui consiste à développer indépendamment chaque components. Les components sont autonomes et peuvent être intégrés dans une app par la suite. À l’instar de Storybook, bien connu des développeurs React (Storybook est maintenant compatible sur plusieurs frameworks), Bit.dev permet de visualiser les components dans un playground. Mais le service offre des fonctionnalités beaucoup plus poussées : Il permet de partager les components entre différents projets facilement, car ils deviennent installables comme des dépendances. Il est possible de gérer des versions de components également et même de visualiser les versions sur l’interface. C’est donc un système bien pratique pour gérer un design système et une bibliothèque de composant dans une entreprise. Le service propose un compte “free” avec un seul scope privé et les autres en publics. Ensuite, les versions payantes des scopes privées unlimited. Angular 13 Dans cet épisode, nous profitons de l’expertise d’olivier pour parler rapidement d’Angular qui vient de sortir dans sa version 13 : changement du moteur de vue par défaut (Ivy) changement du package format update de l'API component arrêt du support de IE11 Pour retrouver notre invité Olivier Combe : @OCombe GitHub Olivier : https://github.com/ocombe Les liens de l'épisode https://bit.dev/ @bitdev Angular 13 NGX Translate Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz Support de l'épisode Indy, la comptabilité des indépendants tout simplement. Synchronisation bancaire sécurisée, déclarations fiscales préremplies et télétransmises, support client avec réponse sous 4 minutes. Obtenez 2 mois gratuits avec notre code sponsor. Cliquez sur ici pour profiter du code
62:27 06/12/2021
Nuxt.JS avec Sébastien Chopin
Dans cet épisode, nous avons le plaisir de recevoir Sébastien Chopin pour parler du framework Nuxt.JS qui arrive dans sa 3e version prochainement Sébastien Chopin est le cocréateur de Nuxt.JS (l'autre personne est son frère ;)). Avec lui, nous revenons sur l’histoire de la création de Nuxt.JS. Comment, pourquoi il a été créé et l’évolution du framework. Comment aujourd’hui, la société NuxtLab, qui est derrière le projet open source, réussit à se financer pour continuer à développer et promouvoir Nuxt.JS. Nous revenons également sur les principales fonctionnalités de Nuxt.JS 3. Un épisode très intéressant qui nous l’espérons va vous plaire. Sébastien Chopin : @Atinux L'histoire de Nuxt.JS Sébastien Chopin poussa son premier commit pour le projet Nuxt.js le 26 octobre 2016. L'idée de Nuxt.JS est née après la refonte d'un site e-commerce basé des technologies web open source moderne : Vue 2, Node.js et Webpack. À la création de Nuxt.JS, le rendu côté serveur des applications Vue.js relevait plus du hacking que d'une méthode officielle et le seul exemple disponible était publié par Evan You (Créateur de Vue.js) sur Hacker New. Malgré cela, les 2 frères Chopin relevèrent le challenge et Nuxt.JS était bien née ! Nuxt.JS Nuxt.JS est un framework open source. Il permet de développer des applications robustes et structurées grâce à une surcouche au-dessus de la librairie Vue.JS. Il permet de supprimer toute la partie configuration et de se concentrer sur la partie métier de votre application. Nuxt.JS permet également différents rendus de votre application : rendu serveur rendu uniquement client rendu complètement statique La version 3 est une grosse refonte du framework qui nécessite un gros travail de la part de l'équipe et de la communauté. Pour le moment, la version bêta a été rendue publique le 12 octobre 2021. Liens de l'épisode Nuxt.JS NuxtLabs GitHub Nuxt GitHub NuxtLabs Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
64:45 11/11/2021
Prisma ORM
Un épisode "explore" dans lequel Alex nous présente l'ORM Prisma Le son de Patrick est pas terrible, toutes nos escuses pour ça. Nous allons améliorer ça dans les prochains épisodes. Prisma ORM "V2, j’oublie la V1 et je reprends depuis le début !" Prisma est un ORM (object-relational mapping) open source écrit en Rust. Il est compatible JavaScript/TypeScript et Go. Au départ, Prisma dans sa version 1, était une sorte de générateur d'API. Vous lui donniez une DB et il vous donnait accès à des routes et une API graphQL pour récupérer les data. Après un virage à 180 degrés, la V2 n'a plus rien a voir avec la V1. Pour la V2, Prisma est désormais un ORM. Un ORM est un système qui vous permet de gérer les data d'une base de données en manipulant des objets. Les objets représentent les data et vous n'écrivez normalement jamais de query vers la base. Par exemple, pour une table "user", vous avez accès à un objet User et vous interrogez la base via cet objet. Il gère plusieurs systèmes de base de données : Postgres / Mysql / SQlite / SQLServer / MongoDB Prisma est présenté sou 4 modules : CLIENT / MIGRATE / STUDIO / DATA PLATFORM ( early stage ) Client Cette partie gère: la connexion avec les DB. le schéma des modèles la récupération des data et des queries Migrate Cette partie gère les migrations. Pour mettre à jour une DB en prod quand vous modifiez les modèles en développement. Studio Cette partie offre une interface de visualisation dans le style PHPMyAdmin, mais en beaucoup mieux ! Data Platform Un service en early stage pour gérer un DB via une interface cloud. Outil recommandé syncinc.so Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
57:36 19/10/2021
Back to school
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ésenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
61:57 17/09/2021
What the WASM !
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
37:26 12/07/2021
Un site statique de 11000 pages
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
38:59 21/06/2021
Audit des Google core web vitals
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. for(...) var link = document.createElement('link'); link.href = ... link.type = "text/css" ... document.getElementsByTagName('head')[0].appendChild(link) 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) img { width: 100%; height: auto; // aspect-ratio: 1/1; aspect-ratio: attr(width) / attr(height); } 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
44:41 02/06/2021
MeiliSearch, rustique à la française !
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
48:59 14/05/2021
Vite.., un bundler !
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). (function foo() { return bar; })(); Plugin jQuery qui s'appelait à travers jQuery (function ( $ ) { $.fn.greenify = function() { this.css( "color", "green" ); return this; }; }( jQuery )); Les principaux types de modules : CommonJS: require('..'); module.exports = ...; - AMD (Asynchronous Module Definition): ```js define(['dep1', 'dep2'], function (dep1, dep2) { //Define the module value by returning a value. return function () {}; }); UMD (Universal Module Definition): (function (root, factory) { if (typeof define === "function" && define.amd) { define(["jquery", "underscore"], factory); } else if (typeof exports === "object") { module.exports = factory(require("jquery"), require("underscore")); } else { root.Requester = factory(root.$, root._); } }(this, function ($, _) { // this is where I defined my module implementation var Requester = { // ... }; return Requester; })); ESM (EcmaScript Modules): compatibilité 92% https://caniuse.com/es6-module import toto from ...; export default ...; 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
46:39 19/04/2021
Strapi, le CMS headless open source 100% JavaScript avec Jim Laurie
Un épisode avec notre invité Jim Laurie, cocréateur et cofondateur de Strapi, un CMS open source 100% JavaScript Strapi est un CMS open source créé il y a environ 7 ans par 3 personnes lors de leurs études. Créé pour des besoins clients à la base, le projet a rapidement vu sa communauté augmentée et suscité un réel intérêt. Ce qui a poussé les créateurs a tenté l'aventure et continué le projet à la fin de leurs études. 7 ans plus tard, le CMS est a sa version 3.5, a réalisé 3 levées de fond. Plus de 30 personnes travaillent désormais chez Strapi et le projet est robuste. Basé 100% sur JavaScript, il tourne sur Node JS (koa) pour la partie back et utilise React JS pour la partie administration. Il vous permet de modeler votre API en fonction de votre besoin. De base, vous avez une API Rest disponible avec la gestion des accès. Vous pouvez également utiliser GraphQL pour appeler votre API. Bref, Strapi vous permet de monter rapidement et facilement une API. Nous vous laissons découvrir le CMS Strapi plus en détail en écoutant l'épisode numéro 21 avec notre invité: Jim Laurie, @laurie_jim Les liens de l'épisode : La Strapi Conf du 22 avril 2021 Roadmap Le slack Le github Le forum Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
74:17 08/03/2021
Fastify, le framework rapide pour Node JS avec Vincent Le Goff
Un épisode avec notre invité Vincent Le Goff qui contribue activement au projet Fastify. Un framework pour Node JS orienté vitesse et légèreté Fastify est un framework pour Node JS qui est principalement orienté sur la légèreté et la rapidité. Il offre une très bonne expérience développeur et un système de plugin puissant. Inspiré par Hapi et Express, il offre de très bonnes performances pour des grosses montées en charge. Nous vous laissons découvrir le framework plus en détail en écoutant l'épisode numéro 20 avec notre invité: Vincent Le Goff, https://github.com/zekth Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
50:13 24/02/2021
Jamstatic fr, Forestry.io et Tina CMS avec Frank Taillandier
Dans le première partie, nous allons parler de la communauté "Jamstatic FR" Une communauté qui souhaite réunir les personnes pour échanger autour des sites statiques, des services et des outils. Sur le site, vous pouvez suivre l'actualité de la JAMStack et du statique. Sur le slack, vous pouvez échanger avec d'autres acteurs de la communauté pour avoir des avis, des retours d'expériences. Vous pouvez également contribuer en écrivant des articles pour le site en ouvrant une PR sur le Github. La communauté "Jamstatic FR" accueillante se retrouve sur différents canaux : Le site internet : https://jamstatic.fr/ Le compte Twitter : @jamstatic_fr Le slack : https://jamstatic.herokuapp.com/ Le github : https://github.com/jamstatic Le podcast : https://anchor.fm/jamstatic/ Dans la deuxième partie, nous abordons Forestry.io et Tina CMS Forestry est un cms basé sur Git. Il se connecte à des services type Github, Gitlab pour éditer directement les fichiers dans le repository. Rien n'est stocké chez Forestry, dès que vous sauvez des valeurs dans l'administration Forestry, il effectue un commit sur le repository. L'administration de Forestry est assez claire et assez configurable. Tout est configuré sur un fichier stocké sur votre projet. Tina CMS est un système qui permet d'avoir une édition visuelle de votre contenu et directement sur votre site/app. Pour le moment, il est principalement orienté React JS mais il est prévu d'ouvrir à d'autre framework. Forestry croit beaucoup au projet Tina CMS et investit de plus en plus sur le projet. Nous vous laissons découvrir le service plus en détail en écoutant l'épisode numéro 19 avec notre invité: Frank Taillandier, https://twitter.com/FrankTLDR https://github.com/DirtyF Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
75:31 29/01/2021
Alpine JS, petit mais costaud !
Dans cet épisode, nous allons parler d'un framework innovant qui apporte un peu de nouveauté dans le monde des frameworks Javascript. Alpine JS est un framework léger (moins de 9kb) qui vient se placer entre les frameworks/libraries complets type Vue JS et jQuery/Vanilla JS. On peut l'utiliser facilement en insérant le script Javascript dans la page ou en installant le package npm. Il utilise une syntaxe qui s'inspire de Tailwind CSS et permet de créer des composants dynamiques facilement. Il est plutôt destiné à être utilisé sur des sites classiques. Un peu moins pour créer des applications complètes comme on peut le faire avec React ou Vue JS. Nous vous laissons découvrir Alpine JS plus en détail en écoutant l'épisode numéro 18. Les liens de l'épisode : Repo github Alpine JS Article sur Alpine JS Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz
37:00 11/01/2021