Double Slash

Heureux de vous retrouver pour ce nouvel épisode. Nous allons parler d'un documentaire sur Node.JS, de Bun qui passe en version 1.1 et qui fonctionne avec désormais sur Windows, d'Angular et Wiz qui mergent pour le meilleur et pour le pire, de comment debugger dans le navigateur avec Copilot. Mais aussi de Solito, un mélange entre React Native et Next.JS, de Strapi 5 avec sa beta déjà disponible; De WebAwesome, une librairie de Web Components, d'une librairie Drag and Drop, de Laravel Herd enfin disponible sur Windows, de l'Interactivity API dans WordPress 6.5. Puis de Vito, une interface de déploiement pour gérer ses serveurs facilement, d'un défi pour créer un jeux de mini-golf lancé par Vjeux et enfin, une tendance web back pour éviter d'écrire du JS. Bonne écoute ! Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news-04-24/

Un épisode pour parler d'Apple qui fait marche arrière devant la commission européenne, de Rust de plus en plus présent dans nos outils, de la version de Tailwind 4 qui arrive en version alpha, de Laravel 11, d'Astro qui n'arrête plus de nous surprendre et pleins d'autres choses. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news-03-24/

Épisode news pour février 2024, nous évoquons jQuery en version 4, si, si ! Remix JS sort un mode SPA, Million.js, une nouvelle lib pour gérer les dates, un retour d'expérience sur Next.js et Apple qui veut tuer les PWA. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news-feb24/

Le sujet des CMS Headless est très vaste. Les solutions disponibles sont impressionnantes. Il y a une quantité d'acteurs importants. Et surtout, les offres sont toutes différentes. En mode Saas, auto-hébergé, Git based ! Comment faire son choix. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/cmsheadless/

Troisième épisode de news pour janvier 2024 ! Nous évoquons les nouveautés CSS, la sortie de la version 6 du framework JS Adonis, la version 14.1 de NextJS, le support de scrollbar width et color dans Chrome 121 et les inquiétudes de la communauté React pour l'avenir de React. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news24w3/

Épisode 2 de l'année 2024. Nous évoquons un outil de transformation bien pratique, un générateur d'interfaces pour Vue en mode IA, une web app pour tester les capacités PWA de votre navigateur, les nouveautés NHOST et le classement des projets Github 2023. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news24w2/

Le premier épisode de l'année 2024 ! La première série de nos épisodes codés en Rust. Des épisodes plus rapides mais beaucoup plus frais ! On évoque dans cet épisode, les mises à jour de Vue et de Nuxt entre les fêtes de fin d'année. Next qui teste LightningCSS. Et les framework monolithes qui se remettent au front. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news24w1/

Un épisode de news pour Noël 2023. Nous évoquons dans cet épisode plus court que d'habitude. La version 3.4 de Tailwind CSS. Storybook qui prend en charge les RSC dans sa version 8 alpha. Tastejs, une app développée sous différents frameworks. Enhance, un framework méconnu tout mignon ! Et json Hero, un outil pour visualiser les données JSON. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/newsnoel23/

Un épisode de news pour décembre 2023, le dernier de l'année 2023. Nous évoquons dans cet épisode les dernières sorties, Vite JS, Astro, PHP. Nous parlons des écosystèmes JS et PHP. Vous retrouverez également des articles et outils à utiliser au quotidien pour vos développements. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news12_23/

Dans cet épisode, nous allons évoquer le côté obscur de notre métier. Faire du développement à destination des emails ! Nous allons commencer par la partie templating, puis nous évoquerons les plateformes en lignes, les frameworks, les pièges à éviter et nous finirons par un retour d'expérience dans le secteur du e-commerce. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/dev_email/

Un épisode news pour novembre 2023. On parle des dernières conférences en cette fin d'année, la Next JS Conf, Open AI. Mais aussi le retour en force d'Angular. Et aussi des tools et des tips CSS. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/newsnov23/

Un épisode dédié au SEO et plus particulièrement sur l'arrivée des IA dans le SEO. Qu'est-ce que cela change. Peut-on tirer parti des IA pour améliorer son SEO. Pouvons-nous générer du contenu de qualité avec les IA ? Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/seoia/

Un épisode news pour octobre 2023. On parle des dernières avancées en matière de navigateur. Mais aussi des conférences WebFlow, Vite JS et Ruby on Rails. On mentionne également les dernières versions de Remix, Front Commerce et Surreal DB. Bien entendu, on ne peut pas faire un épisode sans parler d'IA. Et nous terminerons par les prochaines conférences à suivre. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/newsoct23/

Un épisode [Remix] sur TailwindCSS. Nous avions déjà fait un épisode sur l'outil TailwindCSS, le numéro 7, sorti en 2020. Comme ce magnifique outil a évolué depuis, nous voulions refaire un épisode dédié pour réexpliquer le fonctionnement et l'écosystème autour de ce dernier. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/tailwind23/

Un épisode news pour septembre 2023. On parle de la sortie de Bun, la grosse bombe de la rentrée. Mais aussi de la V3 d'Astro, de la fin probable de Gatsby, de React encore et toujours, de Meilisearch qui intègre la puissance de l'AI, des prochaines versions des browsers, de librairies de components. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/newssept23/

Dans cet épisode spécial news de l'été, nous allons revenir sur la Laracon US 2023 et les principales annonces sur l'écosystème Laravel. Nous évoquerons également Astro 2.9 qui intègre les Views Transition. Nous parlerons de Bases de données avec des services compatibles Edge et des ORM. Nous passerons rapidement sur la Tailwind Connect et les annonces de cette conférence. Nous finirons par quelques news rapides avant de prendre quelques vacances en août. Bonnes vacances et on se retrouve en septembre. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/sumnews23/

Dans cet épisode, nous allons évoquer le système de stockage de données Redis. Alex, s'intéresse et travaille avec Redis depuis quelques mois. Il a découvert tout un tas de fonctionnalités que beaucoup d'entre nous ignorent. En effet, pour une majorité, Redis est utilisé pour mettre en cache des données brut. Un épisode de podcast qui devrait vous donner envie d'en savoir plus sur Redis ! Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/redisdead/

Un épisode news pour juin 2023 un peu plus long que d'habitude pour prolonger le plaisir. Nous allons évoquer Apple qui s'occupe enfin de Webkit (Safari), de React.js qui se retrouve dans la polémique avec les servers components. Évidemment de CSS. De services d'envoi d'emails. De Netlify connect. De PHP qui prépare sa version 8.3. De Zod, de Javascript, etc.. Un épisode riche en news ! Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news06_23/

Dans cet épisode, nous avons le plaisir de recevoir Ludovic Guénet qui est le créateur passionné de la chaine YouTube @LaravelJutsu. Dans ses vidéos, Ludovic parle principalement de Laravel et de son écosystème. Avec lui, nous allons découvrir le framework Laravel qui dès le départ à adopté une philosophie proche du framework Ruby on Rails. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/laravel/

Dans cet épisode de notre podcast, nous abordons les dernières nouveautés dans le monde des navigateurs, telles que la nouvelle propriété CSS `text-wrap balance`, l'exécution des WebContainers sur Safari, iOS et iPadOS, ainsi que la fonctionnalité CSS nesting dans Safari TP et Chrome. Nous discutons également des mises à jour de Qwik, de l'amélioration du support pour Nuxt chez Vercel, des nouvelles fonctionnalités de Next.js et des réactions aux React Server Components. De plus, nous mentionnons les anniversaires de WordPress (20 ans) et les nouvelles ressources dans les mondes de Laravel, CodeSandbox et Deno. Enfin, nous présentons des outils intéressants tels que le pense-bête pour les commandes Git et Spline, une sorte de Figma pour la 3D. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news05_23/

Nous avions déjà fait des épisodes où nous parlions de Web Performance par rapport aux Core Web Vitals de Google et également des épisodes sur les animations CSS et JS. Mais il nous manquait un épisode dédié sur la Web Performance en général. C'est chose faite avec cet épisode. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/webperf/

Bienvenue dans cet épisode de notre podcast dédié aux dernières actualités en développement web et technologie. Nous allons notamment parler de l'annonce de Svelte 4 passant sur pnpm au lieu de npm, du nouveau site de Meilisearch basé sur Next.JS 13, TailwindCSS et Radix_UI, ainsi que de la sortie de Playwright en mode UI. Nous verrons également comment AWS CodeWhisperer se positionne par rapport à GitHub Copilot et découvrirons de nouveaux outils tels que Infisical et FFFuel. Enfin, nous examinerons deux articles récents qui proposent une réflexion intéressante sur l'avenir du développement web "The End of Frontend Development" de Josh Comeau et "Is React the New WordPress?" de Sean C. Davis. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news4-23/

Bienvenue dans notre épisode de podcast consacré aux bases de données en 2023 ! Rejoignez-nous pour découvrir les dernières tendances dans le monde des bases de données, de SQL à NoSQL, en passant par les bases de données distribuées et les nouvelles générations de bases de données comme NewSQL. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/newdb/

Dans cet épisode spécial news pour mars 2023, nous évoquons un retour d'expérience avec Astro, Strapi qui sort une version cloud et ajuste ses prix, TypeScript 5.0, WordPress Radicle, la nouvelle doc React, etc.. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news_mars_23/

Un épisode spécial WordPress. Nous allons parler de l'outil, faire un état des lieux sur l'utilisation de WordPress. Puis nous allons essayer de comprendre pourquoi WordPress est tellement détesté par des développeurs en général. Dans la seconde partie de l'épisode, nous allons regarder ensemble comment developper avec WordPress en 2023 d'une façon plus moderne. Quelles sont les outils pour mieux travailler. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/wordpress/

Dans cet épisode spécial news de février 2023, nous évoquons Eleventy V2 beta, Astro 2.0, Gatsby JS qui passe chez Netlify, le documentaire React à voir et de l'open-source évidemment. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news_fev23/

Dans cet épisode, nous avons le plaisir de recevoir Christophe Chaudier. Ce dernier est le créateur de la communauté des "Compagnons du DevOps". Christophe propose également du mentorat, afin de vous accompagner sur les problématiques en DevOps. Et pour finir, il fait partie de l'équipe qui propose Froggit, une plateforme intégrée DevOps made in France. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/compagnons-du-devops/

Dans cet épisode spécial news de janvier 2023, nous évoquons Forestry, HTTPIE, Nuxt, ... Nous revenons également sur les classements 2022. Les repository sur GitHub via RisingStars et aussi un retour rapide sur "State of JS" 2022. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news_janv23/

Dans cet épisode, nous avons le plaisir de recevoir Adrien de Peretti. Il fait partie de l'équipe Core du projet "Medusa JS" en tant que "Senior Software Engineer". Adrien est également coauteur du framework Nest JS. Il possède donc des bases très solides en développement JavaScript. Avec lui nous allons parler de la solution open source, Medusa JS. Une solution e-commerce qui prétend être une alternative à Shopify. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/medusa/

Dans ce dernier épisode de l'année 2022, une épisode spécial news, nous évoquons Vite.js 4, Prestashop 8, Angular 15, Sveltkit 1.0, Supabase. Également une liste de tutos pour s'occuper durant les vacances et quelques news. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news_dec22/

Dans cet épisode, nous recevons Arnaud Ligny (Consultant fonctionnel & technique web, expert e-commerce), pour parler de Cecil, le générateur de site statique. Nous évoquerons aussi le langage PHP, l'évolution et quel est le niveau de maturité aujourd'hui de ce langage qui arrive à sa version 8.2. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/cecil-static-php/

Nous recevons Guillaume Briday, lead Developer chez Per Angusta. Avec lui, nous allons échanger sur Ruby on Rails, la philosophie du framework et le retour en force du monolithique dans le monde du web. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/ruby-on-rails/

Dans cet épisode spécial news de novembre 2022, nous évoquons Next 13, Turbopack, Gatbsy 5, Gatbsy Valhalla, WordPress 6.1 et les conférences qui ont eu lieu dernièrement. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news-novembre-2022/

Nous recevons Sébastien Lorber, qui est mandaté par la société Meta (FaceBook) sur le projet docusaurus. Sébastien gère aussi une newsletter hebdomadaire sur React et son écosystème. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/docusaurus/

Un épisode spécial en live pour le cinquantième épisode du Podcast. Nous revenons sur l'évolution depuis le début et le futur du podcast. Nous répondons aux questions posées sur le chat en direct et les questions posées via twitter. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/episode-50/

Un épisode en format "news". Nous revenons sur les différentes news des dernières semaines que nous avons retenues Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash TypeScript fête ses 10 ans Ten Years of TypeScript - TypeScript PHP Version 8.2 RC3 Version finale le 24 novembre 2022 https://stitcher.io/blog/new-in-php-82 Stenope Générateur statique PHP pour Symfony https://stenopephp.github.io/Stenope/ Lightning CSS Compilateur CSS moderne et rapide https://lightningcss.dev/ Token CSS Concept CSS basé sur le design Token. A suivre.. https://tokencss.com/ Gatsby V5 (Alpha) Partial Hydration via React serveur component https://www.gatsbyjs.com/blog/gatsby-v5-alpha-is-here-and-its-pretty-exciting/ Redwood V3 [https://community.redwoodjs.com/t/redwood-3-0-0-is-now-available/3989] (https://community.redwoodjs.com/t/redwood-3-0-0-is-now-available/3989) Strapi Support des customs fields ! https://docs-next.strapi.io/developer-docs/latest/development/custom-fields.html NHost https://nhost.io/launch-week Kinsta Nouveau service de hosting en beta https://kinsta.com/help/kinsta-application-database-beta/ Papanasi The Universal UI Library https://papanasi.js.org/?path=/story/documentation-introduction--page WEb Perf Mobile https://www.journaldunet.com/solutions/dsi/1192875-classement-webperf/ Tools https://jsoncrack.com/ https://jsonhero.io/ Podcast présenté par Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz

Un épisode avec un invité, Dan Bernier, consultant SEO et cofondateur de 410 Gone. Avec lui, nous allons parler de SEO et comprendre comment rendre son site indexable et référencé dans les résultats de recherche. Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash Dans cet épisode nous allons parler de SEO. Dan Bernier va nous expliquer comment bien faire du SEO en 2022. En tant que dev, nous sommes souvent focalisés sur la vitesse de chargement et le score de lighthouse. Mais il ne suffit pas d'avoir un site rapide ou d'optimiser la structure du site pour être bien référencé sur les résultats de recherches. Chaque pilier a son importance. Avec Dan, nous allons voir les principaux piliers du SEO et comment les respecter pour obtenir des bons résultats sur les moteurs de recherche. Retrouvez Dan Bernier https://twitter.com/danYdan_fr https://www.danbernier.fr/ https://www.410-gone.fr/ Les liens Les experts à suivre Paul Sanchez https://twitter.com/Seoblackout et Mathieu Gheerbrant https://twitter.com/BlackMelvyn Stéphane Madaleno https://twitter.com/smadaleno Fred Doeurf Bobet et sa chaîne https://www.youtube.com/channel/UCiT_aPGfrfKhk37evgxOA8w Jérôme Pasquelin https://twitter.com/JeromePasquelin Yannick Bouvard alias Yeca https://twitter.com/yeca Daniel Roch https://twitter.com/rochdaniel Actualités Le live de l'actu web by SEO Camp aussi dispo en replay : https://www.youtube.com/c/SEOCAMP Les 2 sites à connaître pour démarrer dans le SEO : https://www.webrankinfo.com/ et https://www.abondance.com/ Outils Outils d'analyse de logs : https://fr.oncrawl.com/ et https://seolyzer.io/fr/ Outils de test de perf utiles pour le SEO : https://pagespeed.web.dev/ et https://www.dareboost.com/fr Formations et autres La formation que j'ai faite en 2010 : https://formation.ranking-metrics.fr/referencement-naturel La Bible https://www.eyrolles.com/Informatique/Livre/reussir-son-referencement-web-9782416005824/ La Bible 2 par Google https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=fr&visit_id=637999730573833486-2543267905&rd=1 Livre pour Wordpress : https://www.eyrolles.com/Informatique/Livre/optimiser-son-referencement-wordpress-9782212679878/ Article https://blog-fr.orson.io/referencer-son-site-seo/32-experts-seo-livrent-3-techniques-de-referencement-2017 Article https://seosly.com/blog/seo-audit/ Podcast présenté par Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz

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

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

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

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

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

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

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

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

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

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

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

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

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

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