[{"data":1,"prerenderedAt":4730},["ShallowReactive",2],{"i-ic:outline-arrow-upward":3,"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E":8,"podcasts-count-4":16,"podcasts-4":17,"i-material-symbols:home":4596,"i-ic:baseline-play-circle-filled-white":4598,"Brand_bAcjTzQpW6OVpFK319jfMki97vH1GrZiqHmeI7Xg4o":4600,"Duration_PRYhFSjufPCI0ZdHmd1E3NXOSiQQt16OGdRJlD2HfE":4605,"Duration_UHifrLZ1qp2xZohTSLjgP5XiDcO8aXB2xBuRVNlEs2I":4610,"Duration_YbePfnfO8NXlUIvWEi5DNTxs76mQ6o0JB2eyoBFJnI":4615,"Duration_sReQcLDXE4mCvRKni83CYQsrQAgJTj1UrQbTvCFS6qE":4620,"Duration_AjW0PwbCjJ4Hv04Pr1WuspnivTXfz1j92ZedAaz05Y":4625,"Duration_XqAo2Gfor3bpCmpAtshF1NWso31pCPtHUqwH8N2oM":4630,"Duration_CJnxrd7sY1COZLndrRR5qvGTxltDd4pKMQ2amK9kgg":4635,"Duration_0gsEgWX01FlsLHbH2ESG0B71ddCMbo7KGqZqimwbqg":4640,"Duration_wKKgRyCTHddxfJbnaMcMrjF0crxwM3cUOjzXQBzRogM":4645,"Duration_pRTniOxYbO5WqOX4EVx2QqBpy4Bm8V28F2Y46UALRg":4650,"Duration_cxeoNS8xRErq0NXWsQchEzBfLIrRiedOOnoam7YPao":4655,"Duration_rESxoTDbOJUNni40fZXXj4aOS6nlqne63iq4CW0KeZc":4660,"Duration_mdrfWbRUrjANk2iQOH2YTVYtPT3BijdpOhnxWzg":4665,"Duration_WgGnuiFb1Zop6T6toT3qxvKNXseuhygg30dFvK1E":4670,"Duration_eO8E8wOtXiVW2pmFyOB5tSsRx7K7xefBEavrTCXHRw":4675,"Duration_OaBT5oji4n5zkmw7gDlQwMezbXLpfKDogHSkNY9i4":4680,"Duration_6nP0X53yv6Ese0NdTMHXddEKA0XSp8oxzAC2x8Vqg":4685,"Duration_mwiZa9drJxXNI2mN22a44ccJftXCLfJHixhnXPV0K3I":4690,"Duration_e0yO2gUfaMFYPhuGNrs15FiF4upm0dGatQah2R5Onc":4695,"Duration_zFERfvRfqKLRyS0tlgvfEciALMl1PFY4fQyG8DTJE":4700,"Duration_vofnmZv8FavnX2znxGJ9tUZOhSlEEAXBwoFJLFkmgU":4705,"Duration_6HuxauKq4C7gSFX0RkVKpXeBtMVU4wK0M7X4em06yU":4710,"Duration_cn1uaw4BpDGNSxljgtLvIrpILTQVQd5sSgRKlHI2bcE":4715,"Duration_aNIQBne6S5uyhi0pVe5ntpEW7hZepSEMEbOyIKEyvI4":4720,"Duration_cLTQiv9PBsNJNsaNnKTJrFI8lLwgsUgvwgoAVkBkhc":4725},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z\"\u002F>",["Island",9],{"key":10,"result":11},"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E",{"head":12},{"style":13},[14],{"innerHTML":15},":where(.i-mdi\\:github){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'\u002F%3E%3C\u002Fsvg%3E\")}",136,[18,277,326,634,702,922,999,1313,1454,1564,1794,1931,1966,2153,2367,2419,2620,2688,3589,3664,3740,3805,3873,3989,4232],{"id":19,"title":20,"author":21,"body":22,"categories":251,"description":253,"dsSlug":254,"duration":255,"episodeArtwork":256,"episodeNumber":257,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":261,"meta":262,"navigation":263,"path":264,"publicationDate":265,"season":266,"seo":267,"status":268,"stem":269,"subtitle":270,"tags":271,"videoLink":275,"__hash__":276},"podcasts\u002Fpodcasts\u002F061.news_mars_23\u002Findex.md","Les News pour mars 2023","Double Slash",{"type":23,"value":24,"toc":234},"minimark",[25,30,41,69,73,79,82,90,94,100,103,107,114,125,129,135,138,142,148,151,155,162,166,173,177,184,188,195,199,206,210,217,220,224,231],[26,27,29],"h2",{"id":28},"astro-retour-dexpérience","Astro, retour d'expérience",[31,32,33,34,40],"p",{},"Après avoir refait le site ",[35,36,37],"a",{"href":37,"rel":38},"https:\u002F\u002Fwww.goodmotion.fr",[39],"nofollow"," avec Astro (2.0), Patrick fait un retour son usage du framework.",[42,43,44,48,51,54,57,60,63,66],"ul",{},[45,46,47],"li",{},"Première chose, Astro génère une MPA (multiple page application) et non pas SPA (single page application)",[45,49,50],{},"Astro génère de base des pages avec .md, .mdx ou .astro",[45,52,53],{},"La syntaxe des templates .astro est top !! ❤️ JSX like, props, slot..",[45,55,56],{},"La compilation des js et css est optimisée. Dans les fichiers .astro, on a la partie template, les scripts et les styles. Très semblable à vue, svelte par exemple",[45,58,59],{},"Bonne gestion de TypeScript. Affichage des erreurs très clair, prompt (Astro Bot) quand on ajoute des plugins astro (tailwind par exemple) qui aide à configurer.",[45,61,62],{},"La compilation est très rapide.",[45,64,65],{},"Nouveau système d’optimisation des images en natif (en expérimentation)",[45,67,68],{},"Et zéro JS par défaut  !!",[26,70,72],{"id":71},"strapi","Strapi",[31,74,75],{},[35,76,77],{"href":77,"rel":78},"https:\u002F\u002Fstrapi.io\u002Fpricing-cloud",[39],[31,80,81],{},"Mise à jour des prix pour la version self-hosted\nAprès un échange avec Jim Laurie (avec qui nous avons fait l’épisode 21 en mars 2021), voici son retour :",[42,83,84,87],{},[45,85,86],{},"Cloud : il ne faut pas la comparer à un PaaS. La version Cloud se place en face d’un contentfull. Sauf que tu gardes le contrôle de ton code source et le contrôle de la customisation. Puis un hosting solide avec CDN, mail et CI\u002FCD en natif. + Accès au support car automatiquement Entreprise.",[45,88,89],{},"Strapi Self-hosted : changement de prix, release RBAC (Role based Access Control) dans la 4.8\nLa Community édition devient super intéressante.",[26,91,93],{"id":92},"rust-bundler","Rust Bundler",[31,95,96],{},[35,97,98],{"href":98,"rel":99},"https:\u002F\u002Fwww.rspack.dev\u002F",[39],[31,101,102],{},"Bundler écrit en Rust compatible Webpack",[26,104,106],{"id":105},"chrome-111","Chrome 111",[31,108,109,110],{},"Les nouveautés de Chrome 111\n",[35,111,112],{"href":112,"rel":113},"https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Fnew-in-chrome-111\u002F",[39],[42,115,116,119,122],{},[45,117,118],{},"View Transitions API",[45,120,121],{},"CSS Color Level 4 (CSS now supports high definition displays, specifying colors from HD gamuts while also offering color spaces with specializations)",[45,123,124],{},"New color devtools.",[26,126,128],{"id":127},"decap-cms","Decap CMS",[31,130,131],{},[35,132,133],{"href":133,"rel":134},"https:\u002F\u002Fwww.netlify.com\u002Fblog\u002Fnetlify-cms-to-become-decap-cms\u002F",[39],[31,136,137],{},"Netlify CMS devient Decap CMS et passe chez une agence partenaire de Netlify",[26,139,141],{"id":140},"typescript-50","TypeScript 5.0",[31,143,144],{},[35,145,146],{"href":146,"rel":147},"https:\u002F\u002Fdevblogs.microsoft.com\u002Ftypescript\u002Fannouncing-typescript-5-0\u002F",[39],[31,149,150],{},"Restructuration autour des modules ECMAScript. Conséquence, npm install 46% plus petit en moyenne, temps de build 10 à 25% plus rapide.\nLes décorateurs deviennent la norme ECMAScript.",[26,152,154],{"id":153},"arrow-js","Arrow JS",[31,156,157,158],{},"Librairie de 2kb pour ajouter de la réactivité et créer des components avec 2 fonctions.\n",[35,159,160],{"href":160,"rel":161},"https:\u002F\u002Fwww.arrow-js.com\u002F",[39],[26,163,165],{"id":164},"nouvel-doc-react-js","Nouvel Doc React JS",[31,167,168,169],{},"La nouvelle doc de React sort de la beta !\n",[35,170,171],{"href":171,"rel":172},"https:\u002F\u002Freact.dev\u002F",[39],[26,174,176],{"id":175},"cheatsheet-pinia","Cheatsheet Pinia",[31,178,179,180],{},"Un petit cheatsheet Pinia, le store officiel pour Vue.js 3.\n",[35,181,182],{"href":182,"rel":183},"https:\u002F\u002Fpbs.twimg.com\u002Fmedia\u002FFrgsHvqWcAEN9Ka?format=jpg&name=4096x4096",[39],[26,185,187],{"id":186},"histoire-de-la-réactivité","Histoire de la réactivité",[31,189,190,191],{},"MIŠKO HEVERY écrit un article sur l'histoire de la réactivité.\nÇa passe par Flex, backbone.js, Angular 1, Knockout, React...\n",[35,192,193],{"href":193,"rel":194},"https:\u002F\u002Fwww.builder.io\u002Fblog\u002Fhistory-of-reactivity",[39],[26,196,198],{"id":197},"dont-be-fooled-by-serverless","Don't be fooled by serverless",[31,200,201,202],{},"DAVID HEINEMEIER HANSSON explique que comme toujours, il n'y a pas une solution pour tous les projets. Et donc le serverless, n'est pas la réponse à tout !\n",[35,203,204],{"href":204,"rel":205},"https:\u002F\u002Fworld.hey.com\u002Fdhh\u002Fdon-t-be-fooled-by-serverless-776cd730",[39],[26,207,209],{"id":208},"wordpress-radicle","WordPress Radicle",[31,211,212,213],{},"Starter projet WordPress qui embarque une structure avancée de projet et aussi tous les outils : Acorn, Bedrock, Bud, Sage et Trellis\n",[35,214,215],{"href":215,"rel":216},"https:\u002F\u002Froots.io\u002Fradicle\u002F",[39],[31,218,219],{},"Sort à la fin du mois. Dispo pour 80$",[26,221,223],{"id":222},"web-api-check","Web API Check",[31,225,226,227],{},"Verifier les API directement dans son navigateur :\n",[35,228,229],{"href":229,"rel":230},"https:\u002F\u002Fwebapicheck.com\u002F",[39],[31,232,233],{},"Bonne écoute !",{"title":235,"searchDepth":236,"depth":236,"links":237},"",2,[238,239,240,241,242,243,244,245,246,247,248,249,250],{"id":28,"depth":236,"text":29},{"id":71,"depth":236,"text":72},{"id":92,"depth":236,"text":93},{"id":105,"depth":236,"text":106},{"id":127,"depth":236,"text":128},{"id":140,"depth":236,"text":141},{"id":153,"depth":236,"text":154},{"id":164,"depth":236,"text":165},{"id":175,"depth":236,"text":176},{"id":186,"depth":236,"text":187},{"id":197,"depth":236,"text":198},{"id":208,"depth":236,"text":209},{"id":222,"depth":236,"text":223},[252],"Technology","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..","DS_061_news_03_23",2509,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fc_scale,q_80:444,w_300\u002Fv1679433180\u002Fepisode\u002FART_61_news03_h42zrh.png",61,"full","md",null,[],{},true,"\u002Fpodcasts\u002Fnews_mars_23","2023-03-22",1,{"title":20,"description":253},"published","podcasts\u002F061.news_mars_23\u002Findex","É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...",[272,273,274],"cms","static","rust","PifnPdrBiXU","bAgo8sjg16vuI76V79dRWBk1aLnSTWL3L9npB0FcVZM",{"id":278,"title":279,"author":21,"body":280,"categories":310,"description":311,"dsSlug":312,"duration":313,"episodeArtwork":314,"episodeNumber":315,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":316,"meta":317,"navigation":263,"path":318,"publicationDate":319,"season":266,"seo":320,"status":268,"stem":321,"subtitle":260,"tags":322,"videoLink":324,"__hash__":325},"podcasts\u002Fpodcasts\u002F060.wordpress\u002Findex.md","WordPress en 2023",{"type":23,"value":281,"toc":308},[282,288,306],[31,283,284],{},[285,286,287],"strong",{},"Erratum : Dans l'épisode, Patrick parle de PHP 6.2, c'est évidemment une erreur. Il voulait parler de PHP 8.2. Sachant que PHP 6 n'a jamais existé. C'est WordPress qui sort en version 6.2 prochainement.",[289,290,292],"info",{"type":291},"warning",[31,293,294,295,298,299,301,302],{},"Un article a été écrit parallèlement à cet épisode. Toutes les infos sont dans l'article.",[296,297],"br",{},"\nVous pouvez retrouver cet article ici :",[296,300],{}," ",[35,303,304],{"href":304,"rel":305},"https:\u002F\u002Fdouble-slash.dev\u002Farticles\u002Fwordpress-2023\u002F",[39],[296,307],{},{"title":235,"searchDepth":236,"depth":236,"links":309},[],[252],"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.","DS_060_wordpress",3901,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fc_scale,w_400\u002Fv1678223532\u002Fepisode\u002FART_60_wordpress_bi52j9.png",60,[],{},"\u002Fpodcasts\u002Fwordpress","2023-03-08",{"title":279,"description":311},"podcasts\u002F060.wordpress\u002Findex",[323],"wordpress","DrGIoa8pp84","-MoWOX0UvFh8FbLn64nZ3R58PjmwI-AmB5BetUs7XJc",{"id":327,"title":328,"author":21,"body":329,"categories":614,"description":615,"dsSlug":616,"duration":617,"episodeArtwork":618,"episodeNumber":619,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":620,"meta":621,"navigation":263,"path":622,"publicationDate":623,"season":266,"seo":624,"status":268,"stem":625,"subtitle":626,"tags":627,"videoLink":632,"__hash__":633},"podcasts\u002Fpodcasts\u002F059.news_fev23\u002Findex.md","Les News pour février 2023",{"type":23,"value":330,"toc":584},[331,335,338,346,349,357,361,366,374,378,386,390,398,402,410,414,428,432,440,444,452,456,464,468,472,480,484,488,496,500,504,512,516,520,528,532,546,550,558,562,570,574,582],[26,332,334],{"id":333},"les-retours-dauditeurs","Les retours d’auditeurs",[31,336,337],{},"Suite à l’épisode news décembre Thibault Barrat qui bosse chez Marmelab, nous a parlé de leur outil pour évaluer les sites :",[42,339,340],{},[45,341,342],{},[35,343,344],{"href":344,"rel":345},"https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Fgreenframe-cli",[39],[31,347,348],{},"Également, suite à l’épisode Animation JS, Malik Baba Aïssa, nous a parlé de \"popmotion\"",[42,350,351],{},[45,352,353],{},[35,354,355],{"href":355,"rel":356},"https:\u002F\u002Fgithub.com\u002Fpopmotion\u002Fpopmotion",[39],[26,358,360],{"id":359},"les-news","Les news",[362,363,365],"h3",{"id":364},"eleventy-v2-en-beta","Eleventy V2 en beta",[42,367,368],{},[45,369,370],{},[35,371,372],{"href":372,"rel":373},"https:\u002F\u002Fwww.11ty.dev\u002Fblog\u002Feleventy-v2-beta\u002F",[39],[362,375,377],{"id":376},"astro-20","Astro 2.0",[42,379,380],{},[45,381,382],{},[35,383,384],{"href":384,"rel":385},"https:\u002F\u002Fastro.build\u002Fblog\u002Fastro-2\u002F",[39],[362,387,389],{"id":388},"gatsby-inc-passe-chez-netlify","Gatsby Inc. passe chez Netlify",[42,391,392],{},[45,393,394],{},[35,395,396],{"href":396,"rel":397},"https:\u002F\u002Fwww.netlify.com\u002Fpress\u002Fnetlify-acquires-gatsby-inc-to-accelerate-adoption-of-composable-web-architectures\u002F",[39],[362,399,401],{"id":400},"le-documentaire-sur-lhistoire-de-reactjs-à-voir-absolument","Le documentaire sur l'histoire de React.js à voir absolument",[42,403,404],{},[45,405,406],{},[35,407,408],{"href":408,"rel":409},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=8pDqJVdNa44",[39],[362,411,413],{"id":412},"un-outil-pour-faire-des-services-de-collaboration","Un outil pour faire des services de collaboration",[42,415,416,422],{},[45,417,418],{},[35,419,420],{"href":420,"rel":421},"https:\u002F\u002Fliveblocks.io\u002Fblog\u002Fliveblocks-collaborative-experiences-in-days-not-months",[39],[45,423,424],{},[35,425,426],{"href":426,"rel":427},"https:\u002F\u002Fvercel.com\u002Ftemplates\u002Fnext.js\u002Fliveblocks-starter-kit",[39],[362,429,431],{"id":430},"volar-js-new-beginning","Volar JS,  new Beginning",[42,433,434],{},[45,435,436],{},[35,437,438],{"href":438,"rel":439},"https:\u002F\u002Fblog.vuejs.org\u002Fposts\u002Fvolar-a-new-beginning.html",[39],[362,441,443],{"id":442},"lighthouse-passe-en-version-10","Lighthouse passe en version 10",[42,445,446],{},[45,447,448],{},[35,449,450],{"href":450,"rel":451},"https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Flighthouse-10-0\u002F",[39],[362,453,455],{"id":454},"faire-tourner-nodejs-dans-le-browser","Faire tourner Node.js dans le browser",[42,457,458],{},[45,459,460],{},[35,461,462],{"href":462,"rel":463},"https:\u002F\u002Fcodesandbox.io\u002Fblog\u002Fannouncing-sandpack-2",[39],[26,465,467],{"id":466},"articles","Articles",[362,469,471],{"id":470},"comment-supprimer-les-tools-js-et-utiliser-uniquement-php","Comment supprimer les tools JS et utiliser uniquement PHP",[42,473,474],{},[45,475,476],{},[35,477,478],{"href":478,"rel":479},"https:\u002F\u002Fcodedesign.fr\u002Ftutorial\u002Fsupprimer-webpack-projets-php-symfony\u002F",[39],[26,481,483],{"id":482},"learn","Learn",[362,485,487],{"id":486},"apprendre-les-bases-des-images","Apprendre les bases des images",[42,489,490],{},[45,491,492],{},[35,493,494],{"href":494,"rel":495},"https:\u002F\u002Fweb.dev\u002Flearn-images\u002F",[39],[26,497,499],{"id":498},"open-source","Open Source",[362,501,503],{"id":502},"core-js","Core-js",[42,505,506],{},[45,507,508],{},[35,509,510],{"href":510,"rel":511},"https:\u002F\u002Fgithub.com\u002Fzloirock\u002Fcore-js\u002Fblob\u002Fmaster\u002Fdocs\u002F2023-02-14-so-whats-next.md",[39],[26,513,515],{"id":514},"browsers","Browsers",[362,517,519],{"id":518},"css-nesting-natif","CSS nesting natif",[42,521,522],{},[45,523,524],{},[35,525,526],{"href":526,"rel":527},"https:\u002F\u002Fjavascript.plainenglish.io\u002Fits-2023-and-native-css-nesting-is-coming-4adbc50e4fa7?gi=e2aef32666f5",[39],[362,529,531],{"id":530},"leading-trim","Leading trim",[42,533,534,540],{},[45,535,536],{},[35,537,538],{"href":538,"rel":539},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-inline-3\u002F#leading-trim",[39],[45,541,542],{},[35,543,544],{"href":544,"rel":545},"https:\u002F\u002Fcodepen.io\u002Fshadeed\u002Fpen\u002FgOjNQJp\u002Fb270be014b7c5141fba29e519698d477",[39],[362,547,549],{"id":548},"animation-sur-display-none","Animation sur display none",[42,551,552],{},[45,553,554],{},[35,555,556],{"href":556,"rel":557},"https:\u002F\u002Fcodepen.io\u002Fyisi\u002Fpen\u002FRwBzqGE",[39],[362,559,561],{"id":560},"safari-164-beta-1","Safari 16.4 beta 1",[42,563,564],{},[45,565,566],{},[35,567,568],{"href":568,"rel":569},"https:\u002F\u002Ftwitter.com\u002Ffirt\u002Fstatus\u002F1626332953633603586?s=61&t=hb9Fi3VVimBrtnkMXtzIcA",[39],[26,571,573],{"id":572},"tools","Tools",[42,575,576],{},[45,577,578],{},[35,579,580],{"href":580,"rel":581},"https:\u002F\u002Fuicolors.app\u002Fcreate",[39],[31,583,233],{},{"title":235,"searchDepth":236,"depth":236,"links":585},[586,587,598,601,604,607,613],{"id":333,"depth":236,"text":334},{"id":359,"depth":236,"text":360,"children":588},[589,591,592,593,594,595,596,597],{"id":364,"depth":590,"text":365},3,{"id":376,"depth":590,"text":377},{"id":388,"depth":590,"text":389},{"id":400,"depth":590,"text":401},{"id":412,"depth":590,"text":413},{"id":430,"depth":590,"text":431},{"id":442,"depth":590,"text":443},{"id":454,"depth":590,"text":455},{"id":466,"depth":236,"text":467,"children":599},[600],{"id":470,"depth":590,"text":471},{"id":482,"depth":236,"text":483,"children":602},[603],{"id":486,"depth":590,"text":487},{"id":498,"depth":236,"text":499,"children":605},[606],{"id":502,"depth":590,"text":503},{"id":514,"depth":236,"text":515,"children":608},[609,610,611,612],{"id":518,"depth":590,"text":519},{"id":530,"depth":590,"text":531},{"id":548,"depth":590,"text":549},{"id":560,"depth":590,"text":561},{"id":572,"depth":236,"text":573},[252],"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.","DS_059_newsFev23",2821,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fc_scale,w_300\u002Fv1677015062\u002Fepisode\u002FART_59_news_fev_zzflor.png",59,[],{},"\u002Fpodcasts\u002Fnews_fev23","2023-02-22",{"title":328,"description":615},"podcasts\u002F059.news_fev23\u002Findex","Épisode spécial news pour février 2023, nous évoquons Eleventy, Astro, Gatby chez Netlify, le documentaire React, ...",[628,629,630,631],"astro","devtools","js","performance","eXWk-LdcgDw","spX1NeSHiPp-PkyyxQDpJ2rUFn7VAxeEFsLSqdIzghk",{"id":635,"title":636,"author":21,"body":637,"categories":670,"description":671,"dsSlug":672,"duration":673,"episodeArtwork":674,"episodeNumber":675,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":676,"meta":692,"navigation":263,"path":693,"publicationDate":694,"season":266,"seo":695,"status":268,"stem":696,"subtitle":697,"tags":698,"videoLink":700,"__hash__":701},"podcasts\u002Fpodcasts\u002F058.compagnons-du-devOps\u002Findex.md","Culture DevOps avec Les Compagnons du DevOps",{"type":23,"value":638,"toc":667},[639,642,645,649,665],[31,640,641],{},"Avec notre invité, nous allons dans un premier temps, définir ce qu'est le DevOps. Quel est l'intérêt d'avoir un DevOps dans son équipe. Comment se former au DevOps.\nNous évoquerons également la place actuelle des GAFAM dans nos infrastructures.",[31,643,644],{},"Bref, si vous voulez en savoir plus sur le DevOps, cet épisode est fait pour vous !",[26,646,648],{"id":647},"notre-invité-christophe-chaudier","Notre invité : \"Christophe Chaudier\"",[42,650,651,658],{},[45,652,653],{},[35,654,657],{"href":655,"rel":656},"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fcchaudier\u002F",[39],"LinkedIn de Christophe Chaudier",[45,659,660],{},[35,661,664],{"href":662,"rel":663},"https:\u002F\u002Ftwitter.com\u002Fc_chaudier",[39],"Twitter de Christophe Chaudier",[31,666,233],{},{"title":235,"searchDepth":236,"depth":236,"links":668},[669],{"id":647,"depth":236,"text":648},[252],"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.","DS_058_devops",3490,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fc_scale,h_200\u002Fv1675722040\u002Fepisode\u002FART_58_devops_qm268q.png",58,[677,680,683,686,689],{"title":678,"url":679},"Chaîne YouTube \"Compagnons du DevOps\"","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCauIDghddUNu6Fto1nR9Bmg",{"title":681,"url":682},"Le podcast \"Compagnons du DevOps\"","https:\u002F\u002Fradio.compagnons-devops.fr\u002F",{"title":684,"url":685},"Les Compagnons du DevOps","https:\u002F\u002Fwww.compagnons-devops.fr\u002F",{"title":687,"url":688},"Collectif de freelance","https:\u002F\u002Flydra.fr\u002F",{"title":690,"url":691},"Le SaaS Froggit","https:\u002F\u002Ffroggit.fr\u002F",{},"\u002Fpodcasts\u002Fcompagnons-du-devops","2023-02-07",{"title":636,"description":671},"podcasts\u002F058.compagnons-du-devOps\u002Findex","Culture DevOps avec Christophe Chaudier des Compagnons du DevOps",[699],"devops","j0h-hI_2ixU","qPfZCwcfN-R2rH5rYin9ZANHOUnAAffwkbO6G45xKEg",{"id":703,"title":704,"author":21,"body":705,"categories":887,"description":888,"dsSlug":889,"duration":890,"episodeArtwork":891,"episodeNumber":892,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":893,"meta":912,"navigation":263,"path":913,"publicationDate":914,"season":266,"seo":915,"status":268,"stem":916,"subtitle":917,"tags":918,"videoLink":920,"__hash__":921},"podcasts\u002Fpodcasts\u002F057.news_janv23\u002Findex.md","Les News pour janvier 2023",{"type":23,"value":706,"toc":867},[707,711,715,723,726,740,744,750,754,760,764,770,774,780,784,790,797,801,805,811,815,821,825,831,835,839,845,849,855,859,865],[26,708,710],{"id":709},"quoi-de-neuf-dernièrement","Quoi de neuf dernièrement ?",[362,712,714],{"id":713},"forestry","Forestry",[31,716,717,722],{},[35,718,721],{"href":719,"rel":720},"http:\u002F\u002Fforestry.io\u002F",[39],"Forestry.io"," end of life 22 mars.",[31,724,725],{},"Les alternatives :",[42,727,728,734],{},[45,729,730],{},[35,731,732],{"href":732,"rel":733},"https:\u002F\u002Fstaticjscms.netlify.app\u002F",[39],[45,735,736],{},[35,737,738],{"href":738,"rel":739},"https:\u002F\u002Fspinalcms.com\u002F",[39],[362,741,743],{"id":742},"circle-ci-piraté","Circle CI piraté",[31,745,746],{},[35,747,748],{"href":748,"rel":749},"https:\u002F\u002Fcircleci.com\u002Fblog\u002Fjan-4-2023-incident-report\u002F",[39],[362,751,753],{"id":752},"comment-vendre-des-packages-npm","Comment vendre des packages npm.",[31,755,756],{},[35,757,758],{"href":758,"rel":759},"https:\u002F\u002Fnpm-kiosk.remotion.dev\u002F",[39],[362,761,763],{"id":762},"les-propriétés-logiques-css","Les propriétés logiques CSS",[31,765,766],{},[35,767,768],{"href":768,"rel":769},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2022\u002F12\u002Fdeploying-css-logical-properties-on-web-apps\u002F",[39],[362,771,773],{"id":772},"intelligence-artificielle-pour-les-api","Intelligence artificielle pour les API",[31,775,776],{},[35,777,778],{"href":778,"rel":779},"https:\u002F\u002Fhttpie.io\u002F",[39],[362,781,783],{"id":782},"roadmap-nuxtjs-2023","Roadmap Nuxt.js 2023",[31,785,786],{},[35,787,788],{"href":788,"rel":789},"https:\u002F\u002Fnuxt.com\u002Fvision-2023",[39],[31,791,792,793],{},"Durant l'enregistrement de cet épisode, l'équipe de Nuxt a publié la version 3.1.0 ",[35,794,795],{"href":795,"rel":796},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Fv3.1.0",[39],[26,798,800],{"id":799},"sondages-et-classements","Sondages et classements",[362,802,804],{"id":803},"top-languages-utilisés-en-2022","Top languages utilisés en 2022",[31,806,807],{},[35,808,809],{"href":809,"rel":810},"https:\u002F\u002Foctoverse.github.com\u002F2022\u002Ftop-programming-languages",[39],[362,812,814],{"id":813},"packages-et-repositories-2022","Packages et repositories 2022",[31,816,817],{},[35,818,819],{"href":819,"rel":820},"https:\u002F\u002Frisingstars.js.org\u002F2022\u002Fen",[39],[362,822,824],{"id":823},"state-of-js-2022","State of js 2022",[31,826,827],{},[35,828,829],{"href":829,"rel":830},"https:\u002F\u002Fstateofjs.com\u002Fen-us\u002F",[39],[26,832,834],{"id":833},"les-tools","Les tools",[362,836,838],{"id":837},"optimisations-des-fonts-et-du-cls","Optimisations des fonts et du CLS",[31,840,841],{},[35,842,843],{"href":843,"rel":844},"https:\u002F\u002Fgithub.com\u002Fdanielroe\u002Ffontaine",[39],[362,846,848],{"id":847},"typage","Typage",[31,850,851],{},[35,852,853],{"href":853,"rel":854},"https:\u002F\u002Fzod.dev\u002F",[39],[362,856,858],{"id":857},"on-se-demande-encore","On se demande encore !",[31,860,861],{},[35,862,863],{"href":863,"rel":864},"https:\u002F\u002Fgithub.com\u002Fpomber\u002Fplaceholdifier",[39],[31,866,233],{},{"title":235,"searchDepth":236,"depth":236,"links":868},[869,877,882],{"id":709,"depth":236,"text":710,"children":870},[871,872,873,874,875,876],{"id":713,"depth":590,"text":714},{"id":742,"depth":590,"text":743},{"id":752,"depth":590,"text":753},{"id":762,"depth":590,"text":763},{"id":772,"depth":590,"text":773},{"id":782,"depth":590,"text":783},{"id":799,"depth":236,"text":800,"children":878},[879,880,881],{"id":803,"depth":590,"text":804},{"id":813,"depth":590,"text":814},{"id":823,"depth":590,"text":824},{"id":833,"depth":236,"text":834,"children":883},[884,885,886],{"id":837,"depth":590,"text":838},{"id":847,"depth":590,"text":848},{"id":857,"depth":590,"text":858},[252],"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.","DS_057_news0123",3054,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fc_scale,w_200\u002Fv1674596590\u002Fepisode\u002FART_56_news_01-23_chid7j.png",57,[894,896,898,900,902,904,905,906,907,908,909,910],{"title":895,"url":895},"https:\u002F\u002Fstaticjscms.netlify.app",{"title":897,"url":897},"https:\u002F\u002Fspinalcms.com",{"title":899,"url":899},"https:\u002F\u002Fcircleci.com\u002Fblog\u002Fjan-4-2023-incident-report",{"title":901,"url":901},"https:\u002F\u002Fnpm-kiosk.remotion.dev",{"title":903,"url":903},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2022\u002F12\u002Fdeploying-css-logical-properties-on-web-apps",{"title":778,"url":778},{"title":788,"url":788},{"title":809,"url":809},{"title":819,"url":819},{"title":829,"url":829},{"title":843,"url":843},{"title":911,"url":911},"https:\u002F\u002Fzod.dev",{},"\u002Fpodcasts\u002Fnews_janv23","2023-01-25",{"title":704,"description":888},"podcasts\u002F057.news_janv23\u002Findex","Épisode spécial news pour janvier 2023, nous évoquons Forestry, HTTPIE, Nuxt, State of JS et quelques tools...",[273,699,919,629],"css","YpyTUZn6IUo","TUO8FtVOlDz69MxlhJcY19anZVZd9dMEat1l9wHQMdg",{"id":923,"title":924,"author":21,"body":925,"categories":978,"description":979,"dsSlug":980,"duration":981,"episodeArtwork":982,"episodeNumber":983,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":984,"meta":987,"navigation":263,"path":988,"publicationDate":989,"season":266,"seo":990,"status":268,"stem":991,"subtitle":992,"tags":993,"videoLink":997,"__hash__":998},"podcasts\u002Fpodcasts\u002F056.medusa\u002Findex.md","Medusa JS, l'alternative headless e-commerce open-source",{"type":23,"value":926,"toc":974},[927,931,934,949,953,956,972],[26,928,930],{"id":929},"medusa-js","Medusa JS",[31,932,933],{},"Une solution e-commerce qui prétend être une alternative à Shopify.\nMedusa est entièrement basé sur du code JavaScript\u002FTypeScript. La solution se veut composable. Vous pouvez ajouter des briques selon les besoins. De base, une fois installé, vous pouvez directement utiliser l'API pour implémenter un e-commerce sur votre code front.\nTout se passe en headless, donc via des appels à l'API de Medusa.\nDe plus, Medusa offre une très bonne expérience développeur.\nVous avez à disposition des starters pour tester la solution. NextJS, Gatsby, etc.",[42,935,936,942],{},[45,937,938],{},[35,939,930],{"href":940,"rel":941},"https:\u002F\u002Fmedusajs.com",[39],[45,943,944],{},[35,945,948],{"href":946,"rel":947},"https:\u002F\u002Fgithub.com\u002Fmedusajs",[39],"Github Medusa JS",[26,950,952],{"id":951},"notre-invité-adrien-de-peretti","Notre invité : Adrien de Peretti",[31,954,955],{},"Senior Software Engineer pour Medusa JS",[42,957,958,965],{},[45,959,960],{},[35,961,964],{"href":962,"rel":963},"https:\u002F\u002Ftwitter.com\u002Fperettiadrien",[39],"Twitter d'Adrien",[45,966,967],{},[35,968,971],{"href":969,"rel":970},"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fadriendeperetti",[39],"Linkedin d'Adrien",[31,973,233],{},{"title":235,"searchDepth":236,"depth":236,"links":975},[976,977],{"id":929,"depth":236,"text":930},{"id":951,"depth":236,"text":952},[252],"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.","DS_056_medusa",2921,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fc_scale,w_200\u002Fv1673194437\u002Fepisode\u002FART_56_medusa_una5ps.png",56,[985,986],{"title":930,"url":940},{"title":948,"url":946},{},"\u002Fpodcasts\u002Fmedusa","2023-01-09",{"title":924,"description":979},"podcasts\u002F056.medusa\u002Findex","Medusa JS, une solution e-commerce open-source en full headless, l'alternative à Shopify",[994,995,996],"medusajs","ecoomerce","headless","r-RLxCmDRKg","-NRXdBq79wGsv6ESYm6kzbAcao8LWq-70WGB8OqyJlE",{"id":1000,"title":1001,"author":21,"body":1002,"categories":1278,"description":1279,"dsSlug":1280,"duration":1281,"episodeArtwork":1282,"episodeNumber":1283,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":1284,"meta":1301,"navigation":263,"path":1302,"publicationDate":1303,"season":266,"seo":1304,"status":268,"stem":1305,"subtitle":1306,"tags":1307,"videoLink":1311,"__hash__":1312},"podcasts\u002Fpodcasts\u002F055.news_dec22\u002Findex.md","Les News pour décembre 22",{"type":23,"value":1003,"toc":1265},[1004,1008,1012,1018,1021,1038,1041,1056,1059,1070,1074,1080,1083,1087,1090,1096,1099,1108,1112,1115,1121,1129,1133,1139,1142,1146,1183,1187,1232,1236,1245,1247,1263],[26,1005,1007],{"id":1006},"les-dernières-releases","Les dernières releases",[362,1009,1011],{"id":1010},"vitejs-v4","Vite.js V4",[31,1013,1014],{},[35,1015,1016],{"href":1016,"rel":1017},"https:\u002F\u002Fvitejs.dev\u002Fblog\u002Fannouncing-vite4.html",[39],[31,1019,1020],{},"5 mois après la version 3, la version 4 arrive !\nDe plus en plus de dev et de framework adoptent Vite.js :",[42,1022,1023,1026,1029,1032,1035],{},[45,1024,1025],{},"Astro",[45,1027,1028],{},"NuxtJS",[45,1030,1031],{},"Qwik",[45,1033,1034],{},"Prise en charge dans Storybook",[45,1036,1037],{},"Deno supporte Vite",[31,1039,1040],{},"Les nouveautés de cette version :",[42,1042,1043,1046,1053],{},[45,1044,1045],{},"Rollup 3 (simplification des assets,améliorations et vitesses)",[45,1047,1048,1049,1052],{},"Nouveau plugin ",[285,1050,1051],{},"React"," SWC pour remplacer Babel",[45,1054,1055],{},"package Vite plus petit 14Mb contre 18Mb",[31,1057,1058],{},"Breaking changes:",[42,1060,1061,1064,1067],{},[45,1062,1063],{},"CSS import string",[45,1065,1066],{},"Dot env",[45,1068,1069],{},"Prise en charge des browsers change.",[362,1071,1073],{"id":1072},"angular-v15","Angular V15",[31,1075,1076],{},[35,1077,1078],{"href":1078,"rel":1079},"https:\u002F\u002Fblog.angular.io\u002Fangular-v15-is-now-available-df7be7f2f4c8",[39],[31,1081,1082],{},"Principalement des améliorations d’expériences dev et de simplification. Évidemment plus performant.",[362,1084,1086],{"id":1085},"prestashop-8","Prestashop 8",[31,1088,1089],{},"Sortie le 16 octobre 2022 !",[31,1091,1092],{},[35,1093,1094],{"href":1094,"rel":1095},"https:\u002F\u002Fbuild.prestashop-project.org\u002Fnews\u002Fprestashop-8-0-0-available\u002F",[39],[31,1097,1098],{},"Après la version 1.7, prestashop passe à la 8 (on enlève le 1.). Gros nettoyage du code, passage sous symfony 4.4, twig 3, etc..",[31,1100,1101,1102,1107],{},"2 versions désormais : prestashop project (open-source sur github) et ",[35,1103,1106],{"href":1104,"rel":1105},"https:\u002F\u002Fprestashop.com",[39],"prestashop.com"," (payante avec compte et addons essentials)",[362,1109,1111],{"id":1110},"sveltekit-10","Sveltekit 1.0",[31,1113,1114],{},"Sortie le 14 décembre 2022",[31,1116,1117],{},[35,1118,1119],{"href":1119,"rel":1120},"https:\u002F\u002Fsvelte.dev\u002Fblog\u002Fannouncing-sveltekit-1.0",[39],[31,1122,1123,1124,1128],{},"2 ans de développement, pour rappel, Rich Harris est entré chez Vercel en novembre 2021. ",[35,1125,1126],{"href":1126,"rel":1127},"https:\u002F\u002Fvercel.com\u002Fblog\u002Fvercel-welcomes-rich-harris-creator-of-svelte",[39],"\nPoint fort de Svelte, code compilé très petit et code simple, facile à comprendre.",[362,1130,1132],{"id":1131},"supabase-launch-week-6","Supabase Launch Week 6",[31,1134,1135],{},[35,1136,1137],{"href":1137,"rel":1138},"https:\u002F\u002Fsupabase.com\u002Fblog\u002Flaunch-week-6-wrap-up",[39],[31,1140,1141],{},"New Docs passage de docusaurus à Next JS\nImage resizing\nMulti-factor authentication (MFA)\nCustom Domains\nPoint in time recovery\nGraphql via pg_graphql",[26,1143,1145],{"id":1144},"soccuper-pendant-les-vacances","S’occuper pendant les vacances",[42,1147,1148,1155,1162,1169,1176],{},[45,1149,1150,1151],{},"Flex blox tuto interactif ",[35,1152,1153],{"href":1153,"rel":1154},"https:\u002F\u002Fwww.joshwcomeau.com\u002Fcss\u002Finteractive-guide-to-flexbox\u002F?ref=refind",[39],[45,1156,1157,1158],{},"Tuto Tailwind avancé : ",[35,1159,1160],{"href":1160,"rel":1161},"https:\u002F\u002Fwww.protailwind.com\u002Ftutorials",[39],[45,1163,1164,1165],{},"Tuto Typescript : ",[35,1166,1167],{"href":1167,"rel":1168},"https:\u002F\u002Fwww.totaltypescript.com\u002Ftutorials",[39],[45,1170,1171,1172],{},"Tuto Git : ",[35,1173,1174],{"href":1174,"rel":1175},"https:\u002F\u002Fwww.youtube.com\u002F@DeliciousInsights\u002Fplaylists",[39],[45,1177,1178,1179],{},"Tuto Angular de Lior Chamla : ",[35,1180,1181],{"href":1181,"rel":1182},"https:\u002F\u002Fyoutu.be\u002Fvr8-bSIT9iE",[39],[26,1184,1186],{"id":1185},"news-en-vrac","News en vrac",[42,1188,1189,1196,1203,1210,1218,1225],{},[45,1190,1191],{},[35,1192,1195],{"href":1193,"rel":1194},"https:\u002F\u002Fwptavern.com\u002Fnew-wordpress-sandbox-project-demos-test-drive-themes-and-plugins-in-the-browser",[39],"PHP dans le browser avec WASM",[45,1197,1198],{},[35,1199,1202],{"href":1200,"rel":1201},"https:\u002F\u002F2022.stateofcss.com\u002Fen-US\u002F",[39],"Résultats State of CSS",[45,1204,1205],{},[35,1206,1209],{"href":1207,"rel":1208},"https:\u002F\u002Fwww.ecoindex.fr\u002F",[39],"Retour du site Ecoindex",[45,1211,1212,1213,1217],{},"Svelte sur Spotify page, Reuters, Bloomberg, New York Times et apple music web : ",[35,1214,1215],{"href":1215,"rel":1216},"https:\u002F\u002Fbeta.music.apple.com\u002F",[39],"\nÀ noter l'utilisation de marko sur apple.music",[45,1219,1220,1221],{},"Doc de React Beta : ",[35,1222,1223],{"href":1223,"rel":1224},"https:\u002F\u002Fbeta.reactjs.org\u002Fapis\u002Freact",[39],[45,1226,1227],{},[35,1228,1231],{"href":1229,"rel":1230},"https:\u002F\u002Fstorybook.js.org\u002Fblog\u002Fintegrate-nextjs-and-storybook-automatically",[39],"Storybook dans Next.js",[26,1233,1235],{"id":1234},"articles-à-lire","Articles à lire",[42,1237,1238],{},[45,1239,1240],{},[35,1241,1244],{"href":1242,"rel":1243},"https:\u002F\u002Fwww.alsacreations.com\u002Farticle\u002Flire\u002F1884-deux-annees-avec-tailwind-quel-bilan.html",[39],"Retour sur Tailwind",[26,1246,573],{"id":572},[42,1248,1249,1256],{},[45,1250,1251],{},[35,1252,1255],{"href":1253,"rel":1254},"https:\u002F\u002Fconsole-ninja.com\u002F",[39],"Console Ninja",[45,1257,1258],{},[35,1259,1262],{"href":1260,"rel":1261},"https:\u002F\u002Fcomponents.ai\u002Fu\u002Fsystem\u002Fcl5a97rxe001209ldetuczj0x",[39],"components.ai",[31,1264,233],{},{"title":235,"searchDepth":236,"depth":236,"links":1266},[1267,1274,1275,1276,1277],{"id":1006,"depth":236,"text":1007,"children":1268},[1269,1270,1271,1272,1273],{"id":1010,"depth":590,"text":1011},{"id":1072,"depth":590,"text":1073},{"id":1085,"depth":590,"text":1086},{"id":1110,"depth":590,"text":1111},{"id":1131,"depth":590,"text":1132},{"id":1144,"depth":236,"text":1145},{"id":1185,"depth":236,"text":1186},{"id":1234,"depth":236,"text":1235},{"id":572,"depth":236,"text":573},[252],"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.","DS_055_news_dec22","xxxx","https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fv1671657438\u002Fepisode\u002FART_55_NEWS_DEC22_xomvhh.png",55,[1285,1287,1289,1291,1293,1295,1297,1298,1300],{"title":1286,"url":1153},"Flex blox tuto interactif",{"title":1288,"url":1160},"Tuto Tailwind avancé",{"title":1290,"url":1167},"Tuto Typescript",{"title":1292,"url":1174},"Tuto Git",{"title":1294,"url":1016},"Vite.js 4",{"title":1296,"url":1078},"Angular 15",{"title":1086,"url":1094},{"title":1299,"url":1119},"Sveltkit 1.0",{"title":1132,"url":1137},{},"\u002Fpodcasts\u002Fnews_dec22","2022-12-22",{"title":1001,"description":1279},"podcasts\u002F055.news_dec22\u002Findex","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...",[1308,1309,1310],"tuto","vite","svelte","pn5mrVAVJik","twVR0jHtLQs0Bwiqg7BHbmPqj5hoBJQ5zXLVaqBk6S8",{"id":1314,"title":1315,"author":21,"body":1316,"categories":1432,"description":1433,"dsSlug":1434,"duration":1435,"episodeArtwork":1436,"episodeNumber":1437,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":1438,"meta":1444,"navigation":263,"path":1445,"publicationDate":1446,"season":266,"seo":1447,"status":268,"stem":1448,"subtitle":260,"tags":1449,"videoLink":1452,"__hash__":1453},"podcasts\u002Fpodcasts\u002F054.cecil-static-php\u002Findex.md","Générer un site statique avec PHP grâce à Cecil",{"type":23,"value":1317,"toc":1427},[1318,1322,1333,1339,1346,1353,1358,1372,1376,1383,1393,1396,1399,1403,1425],[26,1319,1321],{"id":1320},"cecil-php","Cecil PHP",[31,1323,1324,1325,1328,1329,1332],{},"Cecil est un ",[285,1326,1327],{},"générateur de site statique"," complètement créé avec le langage ",[285,1330,1331],{},"PHP",".",[31,1334,1335,1336,1338],{},"Il est pensé pour être centré sur le contenu. Ce qui veut dire que vous n'avez pas l'obligation de faire du code ",[285,1337,1331],{}," pour construire un site avec Cecil.",[31,1340,1341,1342,1345],{},"Tout est basé sur des fichiers ",[285,1343,1344],{},"markdowns",". Vous écrivez votre contenu dans ces fichiers et automatiquement, Cecil va vous générer les pages correspondantes.",[31,1347,1348,1349,1352],{},"Les seuls prérequis sont de savoir utiliser un minimum la console de votre ordinateur pour utiliser la ",[285,1350,1351],{},"CLI"," de Cecil pour installer et générer votre site.",[31,1354,1355],{},[285,1356,1357],{},"Beaucoup de choses sont incluses d'origine :",[42,1359,1360,1363,1366,1369],{},[45,1361,1362],{},"SEO",[45,1364,1365],{},"Optimisation des images",[45,1367,1368],{},"RSS",[45,1370,1371],{},"multilingues",[26,1373,1375],{"id":1374},"les-sites-statiques","Les sites statiques",[31,1377,1378,1379,1382],{},"Cecil génère des sites ",[285,1380,1381],{},"purs statiques",". C'est-à-dire, qu'il génère des fichiers HTML que vous allez poser sur un serveur simple ou un CDN.",[31,1384,1385,1386,1388,1389,1392],{},"Vous n'avez pas besoin d'avoir ",[285,1387,1331],{}," sur votre serveur pour faire tourner ",[285,1390,1391],{},"Cecil",".\nLes fichiers HTML sont ce qu'il y a de plus simple, de plus rapide et de plus sécurisé.",[31,1394,1395],{},"Par contre, évidemment, si vous avez une modification de votre contenu ou un ajout de page, il faudra régénérer votre site et remplacer les fichiers HTML sur votre serveur.",[31,1397,1398],{},"Heureusement, il y a des systèmes automatisés pour cela que vous pouvez mettre en place.",[26,1400,1402],{"id":1401},"notre-invité-arnaud-ligny","Notre invité : Arnaud Ligny",[42,1404,1405,1412,1419],{},[45,1406,1407],{},[35,1408,1411],{"href":1409,"rel":1410},"https:\u002F\u002Ftwitter.com\u002FArnaudLigny",[39],"@ArnaudLigny",[45,1413,1414],{},[35,1415,1418],{"href":1416,"rel":1417},"https:\u002F\u002Fgithub.com\u002FArnaudLigny",[39],"github.com\u002FArnaudLigny",[45,1420,1421],{},[35,1422,1423],{"href":1423,"rel":1424},"https:\u002F\u002Farnaudligny.fr\u002F",[39],[31,1426,233],{},{"title":235,"searchDepth":236,"depth":236,"links":1428},[1429,1430,1431],{"id":1320,"depth":236,"text":1321},{"id":1374,"depth":236,"text":1375},{"id":1401,"depth":236,"text":1402},[252],"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.","DS_054_cecil",3366,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fc_scale,w_400\u002Fv1670322954\u002Fepisode\u002F54-artwork_xw7clo.png",54,[1439,1441],{"title":1391,"url":1440},"https:\u002F\u002Fcecil.app",{"title":1442,"url":1443},"arnaudligny.fr","https:\u002F\u002Farnaudligny.fr",{},"\u002Fpodcasts\u002Fcecil-static-php","2022-12-07",{"title":1315,"description":1433},"podcasts\u002F054.cecil-static-php\u002Findex",[1450,273,1451],"php","jamstack","QdP5KWwyPo4","DsBJWn9DxH8ie3d8lY3-VuoZZeyo0vmOf05noorDI-c",{"id":1455,"title":1456,"author":21,"body":1457,"categories":1524,"description":1525,"dsSlug":1526,"duration":1527,"episodeArtwork":1528,"episodeNumber":1529,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":1530,"meta":1553,"navigation":263,"path":1554,"publicationDate":1555,"season":266,"seo":1556,"status":268,"stem":1557,"subtitle":1558,"tags":1559,"videoLink":1562,"__hash__":1563},"podcasts\u002Fpodcasts\u002F053.ruby-on-rails\u002Findex.md","Ruby on rails, le développement intuitif",{"type":23,"value":1458,"toc":1519},[1459,1463,1466,1469,1472,1475,1483,1487,1490,1494,1517],[26,1460,1462],{"id":1461},"ruby-on-rails","Ruby on Rails",[31,1464,1465],{},"Ruby on Rails (RoR), est un framework web open-source écrit en Ruby.",[31,1467,1468],{},"Il suit le pattern modèle-vue-contrôleur (MVC).",[31,1470,1471],{},"Il propose une structure qui permet un développement rapidement et intuitif.",[31,1473,1474],{},"Les 2 principes de base du framework :",[42,1476,1477,1480],{},[45,1478,1479],{},"Don't repeat yourself : Ne pas répéter plusieurs fois le même code",[45,1481,1482],{},"Convention over configuration : configurer uniquement si c'est nécessaire. Tous les éléments ont un comportement par défaut",[26,1484,1486],{"id":1485},"hotwire","HotWire",[31,1488,1489],{},"Hotwire est une approche alternative pour créer des applications Web sans utiliser beaucoup de JavaScript en envoyant du HTML au lieu de JSON sur le réseau.\nCela permet aux pages un premier chargement rapide et cela conserve le rendu des modèles sur le serveur et permet une expérience de développement plus simple et plus productive dans n'importe quel langage de programmation, sans sacrifier la vitesse ou la réactivité associées à une application traditionnelle à page unique.",[26,1491,1493],{"id":1492},"notre-invité-guillaume-briday","Notre invité : Guillaume Briday",[42,1495,1496,1503,1510],{},[45,1497,1498],{},[35,1499,1502],{"href":1500,"rel":1501},"https:\u002F\u002Ftwitter.com\u002Fguillaumebriday",[39],"@guillaumebriday",[45,1504,1505],{},[35,1506,1509],{"href":1507,"rel":1508},"https:\u002F\u002Fwww.youtube.com\u002Fplaylist?list=PLZnobmDTM15k9rKN00BlvaNM-jUQSlS2S",[39],"Vidéos : Introduction à Hotwire",[45,1511,1512],{},[35,1513,1516],{"href":1514,"rel":1515},"https:\u002F\u002Fgithub.com\u002Fguillaumebriday\u002Fmodern-datatables",[39],"Modern datatables",[31,1518,233],{},{"title":235,"searchDepth":236,"depth":236,"links":1520},[1521,1522,1523],{"id":1461,"depth":236,"text":1462},{"id":1485,"depth":236,"text":1486},{"id":1492,"depth":236,"text":1493},[252],"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.","DS_053_ror",3140,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fv1669149502\u002Fepisode\u002F53_artwork_xft7uy.png",53,[1531,1532,1535,1537,1539,1540,1542,1544,1547,1550],{"title":1502,"url":1500},{"title":1533,"url":1534},"Linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fguillaumebriday",{"title":1536,"url":1536},"https:\u002F\u002Fguillaumebriday.fr",{"title":1538,"url":1538},"https:\u002F\u002Fwww.per-angusta.com\u002Ffr\u002F",{"title":1516,"url":1514},{"title":1541,"url":1507},"Introduction à Hotwire",{"title":1462,"url":1543},"https:\u002F\u002Frubyonrails.org",{"title":1545,"url":1546},"37 signals","https:\u002F\u002F37signals.com",{"title":1548,"url":1549},"Hotwire","https:\u002F\u002Fhotwired.dev",{"title":1551,"url":1552},"DHH","https:\u002F\u002Ffr.wikipedia.org\u002Fwiki\u002FDavid_Heinemeier_Hansson",{},"\u002Fpodcasts\u002Fruby-on-rails","2022-11-23",{"title":1456,"description":1525},"podcasts\u002F053.ruby-on-rails\u002Findex","Un épisode sur Ruby on Rails, la philosophie du framework et le retour du monolithique.",[1560,1561],"ruby","rubyonrails","y_LfDYbzcYk","k7_E4Jnfisza5NsW_lwD0EIMViv-LeBpNuZNQCoIvdk",{"id":1565,"title":1566,"author":21,"body":1567,"categories":1734,"description":1735,"dsSlug":1736,"duration":1737,"episodeArtwork":1738,"episodeNumber":1739,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":1740,"meta":1784,"navigation":263,"path":1785,"publicationDate":1786,"season":266,"seo":1787,"status":268,"stem":1788,"subtitle":1735,"tags":1789,"videoLink":1792,"__hash__":1793},"podcasts\u002Fpodcasts\u002F052.news-novembre-2022\u002Findex.md","Les News pour novembre 2022",{"type":23,"value":1568,"toc":1722},[1569,1573,1576,1580,1588,1593,1597,1614,1618,1623,1627,1647,1650,1660,1664,1681,1685,1690,1693,1696,1700,1720],[26,1570,1572],{"id":1571},"next-13","Next 13",[31,1574,1575],{},"On pose les bases du futur de Next.js et de React.\nNext 13 est utilisable avec l’ancien système de page.",[362,1577,1579],{"id":1578},"_2-gros-changement-obligatoires","2 gros changement obligatoires :",[42,1581,1582,1585],{},[45,1583,1584],{},"Link (on a plus besoin d’utiliser l’ancre en enfant. Enfin !!)",[45,1586,1587],{},"Image (utilise l’API native des browsers, plus efficace et rapide)",[31,1589,1590],{},[285,1591,1592],{},"Il y a un codemod pour migrer les projets sur les 2 changements.",[362,1594,1596],{"id":1595},"new-app-directory-beta","New App directory (Beta) :",[42,1598,1599,1602,1605,1608,1611],{},[45,1600,1601],{},"Layout (juste le contenu est updaté pas le layout)",[45,1603,1604],{},"Server component (Moins de JS dans le browser !)",[45,1606,1607],{},"Streaming (rendu progressif et incrémental) Avec les servers components, permet de rendre les éléments qui ne fetch pas de data directement et les autres une fois que les data sont arrivés.",[45,1609,1610],{},"Data Fetching dans les components. N’importe quel component peut fetcher des data\nSSG, SSR, ISR en une seule API ⇒ fetch (API étendu dans NextJS) réglage du cache et revalidate.",[45,1612,1613],{},"Nouveau plugin TypeScript (better suggestions and auto-complete)",[26,1615,1617],{"id":1616},"turbopack","TurboPack",[31,1619,1620],{},[285,1621,1622],{},"Attention, il est en alpha !",[362,1624,1626],{"id":1625},"fonctionnement-global","Fonctionnement global :",[42,1628,1629,1632,1635,1638,1641,1644],{},[45,1630,1631],{},"Écrit en Rust",[45,1633,1634],{},"Pas d’ESM en dev contrairement à ViteJS",[45,1636,1637],{},"Pas de compatibilité avec l’écosystème WebPack",[45,1639,1640],{},"Que dev pour le moment. Le build n’utilise pas turbopack",[45,1642,1643],{},"Système de Memory Cache. Dans le futur, cache persistant via file ou remote",[45,1645,1646],{},"Pour le moment, que NextJS, Svelte prévu et pour les autres c’est en discussion",[31,1648,1649],{},"En gros, il passe en cache les fichiers et recompile le bundle avec le cache. Si un fichier change, il update le cache que de ce fichier et recompile avec le cache des autres fichiers.",[42,1651,1652],{},[45,1653,1654,1659],{},[35,1655,1658],{"href":1656,"rel":1657},"https:\u002F\u002Fgithub.com\u002Fyyx990803\u002Fvite-vs-next-turbo-hmr\u002Fdiscussions\u002F8",[39],"Réaction d’Evan You"," -> Evan test réellement la différence entre Turbopack et Vite.",[26,1661,1663],{"id":1662},"gatsby-5","Gatsby 5",[42,1665,1666,1669,1672,1675,1678],{},[45,1667,1668],{},"Slice API : Permet de créer des slices : Header, Footer, Layout et de déployer uniquement les éléments qui changent.",[45,1670,1671],{},"Partial Hydratation (Beta) via React Server Component",[45,1673,1674],{},"Head API",[45,1676,1677],{},"Script component",[45,1679,1680],{},"Node 18 et React 18",[26,1682,1684],{"id":1683},"gastby-valhalla-content-hub","Gastby Valhalla Content Hub",[31,1686,1687],{},[285,1688,1689],{},"Pour le moment que dispo pour les Entreprises",[31,1691,1692],{},"C’est un agrégateur de sources comme on peut trouver dans Gatsby mais via un service accessible via le net.",[31,1694,1695],{},"On peut donc concentrer plusieurs sources de différents services pour l’interroger avec une API GraphQL",[26,1697,1699],{"id":1698},"wordpress-61","WordPress 6.1",[42,1701,1702,1705,1708,1711,1714,1717],{},[45,1703,1704],{},"Cache query !!",[45,1706,1707],{},"Extend query loop block",[45,1709,1710],{},"Typographie Fluide (clamp)",[45,1712,1713],{},"WebP",[45,1715,1716],{},"Gutenberg → Améliorations de blocs",[45,1718,1719],{},"etc…",[31,1721,233],{},{"title":235,"searchDepth":236,"depth":236,"links":1723},[1724,1728,1731,1732,1733],{"id":1571,"depth":236,"text":1572,"children":1725},[1726,1727],{"id":1578,"depth":590,"text":1579},{"id":1595,"depth":590,"text":1596},{"id":1616,"depth":236,"text":1617,"children":1729},[1730],{"id":1625,"depth":590,"text":1626},{"id":1662,"depth":236,"text":1663},{"id":1683,"depth":236,"text":1684},{"id":1698,"depth":236,"text":1699},[252],"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.","DS_052_news_nov22",3334,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fv1668525076\u002Fepisode\u002FSquare_news_52_jaxnyp.png",52,[1741,1744,1747,1750,1753,1756,1758,1761,1763,1766,1769,1772,1775,1778,1781],{"title":1742,"url":1743},"Node Security releases","https:\u002F\u002Fnodejs.org\u002Fen\u002Fblog\u002Fvulnerability\u002Fnovember-2022-security-releases\u002F",{"title":1745,"url":1746},"Npm 9.0.0","https:\u002F\u002Fgithub.blog\u002Fchangelog\u002F2022-10-24-npm-v9-0-0-released\u002F",{"title":1748,"url":1749},"Deno 1.28","https:\u002F\u002Fdeno.com\u002Fblog\u002Fv1.28",{"title":1751,"url":1752},"Next.js 13","https:\u002F\u002Fnextjs.org\u002Fblog\u002Fnext-13#introducing-turbopack-alpha",{"title":1754,"url":1755},"Turbopack","https:\u002F\u002Fturbo.build\u002Fpack\u002Fdocs\u002Fcore-concepts",{"title":1663,"url":1757},"https:\u002F\u002Fwww.gatsbyjs.com\u002Fgatsby-5\u002F",{"title":1759,"url":1760},"Gatsby Valhalla","https:\u002F\u002Fwww.gatsbyjs.com\u002Fproducts\u002Fvalhalla-content-hub",{"title":1699,"url":1762},"https:\u002F\u002Ffr.wordpress.org\u002F2022\u002F10\u002F12\u002Fguide-des-changements-techniques-de-wordpress-6-1\u002F",{"title":1764,"url":1765},"Node conf EU 2022","https:\u002F\u002Fwww.youtube.com\u002Fplaylist?list=PL0CdgOSSGlBaULAdbribJiENfXxPW0aLQ",{"title":1767,"url":1768},"ViteConf 2022","https:\u002F\u002Fviteconf.org\u002F2022\u002Freplay",{"title":1770,"url":1771},"The component gallery","https:\u002F\u002Fcomponent.gallery\u002F",{"title":1773,"url":1774},"DevToys (window)","https:\u002F\u002Fdevtoys.app\u002F",{"title":1776,"url":1777},"DevUtils (mac)","https:\u002F\u002Fdevutils.com\u002F",{"title":1779,"url":1780},"Trash CLI","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftrash-cli",{"title":1782,"url":1783},"Content Layer","https:\u002F\u002Fwww.contentlayer.dev\u002F",{},"\u002Fpodcasts\u002Fnews-novembre-2022","2022-11-16",{"title":1566,"description":1735},"podcasts\u002F052.news-novembre-2022\u002Findex",[1790,1791,323],"next","bundler","Pze8XficOfA","9xRx1v9Lg6QCkOcdBOgNqDJFXg1-fdvDg3zcOxyRNXI",{"id":1795,"title":1796,"author":21,"body":1797,"categories":1893,"description":1894,"dsSlug":1895,"duration":1896,"episodeArtwork":1897,"episodeNumber":1898,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":1899,"meta":1921,"navigation":263,"path":1922,"publicationDate":1923,"season":266,"seo":1924,"status":268,"stem":1925,"subtitle":1926,"tags":1927,"videoLink":1929,"__hash__":1930},"podcasts\u002Fpodcasts\u002F051.docusaurus\u002Findex.md","Docusaurus et React Hebdo",{"type":23,"value":1798,"toc":1888},[1799,1803,1806,1809,1812,1815,1829,1833,1836,1852,1859,1866,1873,1877,1886],[26,1800,1802],{"id":1801},"docusaurus","Docusaurus",[31,1804,1805],{},"La documentation est une chose primordiale dans le succès d'un projet open source (ou pas)",[31,1807,1808],{},"À la base, les équipes de Meta (Facebook) avaient besoin de pouvoir générer des sites de documentation facilement et rapidement pour tous les projets qu'elles créaient.",[31,1810,1811],{},"C'est comme ça que Docusaurus est né !",[31,1813,1814],{},"Docusaurus est un générateur de site basé sur React. Tout est disponible pour générer un site complet rapidement.",[42,1816,1817,1820,1823,1826],{},[45,1818,1819],{},"Le contenu est basé sur le système MarkDown. Donc facile à gérer.",[45,1821,1822],{},"Le multilingue est possible, pratique pour un projet international.",[45,1824,1825],{},"Le versionnage est possible pour garder une documentation pour chaque version de votre projet.",[45,1827,1828],{},"Et la recherche est facilement paramétrable (Algolia)",[26,1830,1832],{"id":1831},"la-newsletter","La newsletter",[31,1834,1835],{},"Une newsletter hebdomadaire qui traite de React et de tout son écosystème.\nCette newsletter est disponible en 2 langues (FR, EN) :",[42,1837,1838,1845],{},[45,1839,1840,1844],{},[35,1841,1842],{"href":1842,"rel":1843},"https:\u002F\u002Freacthebdo.fr",[39]," (FR)",[45,1846,1847,1851],{},[35,1848,1849],{"href":1849,"rel":1850},"https:\u002F\u002Fthisweekinreact.com",[39]," (EN)",[31,1853,1854,1855],{},"Le contenu est aussi disponible sous forme de tread sur Twitter : ",[35,1856,1857],{"href":1857,"rel":1858},"https:\u002F\u002Fslo.im\u002Fthread",[39],[31,1860,1861,1862],{},"Il est possible de sponsoriser cette newsletter : ",[35,1863,1864],{"href":1864,"rel":1865},"https:\u002F\u002Fthisweekinreact.com\u002Fsponsor",[39],[31,1867,1868,1869],{},"Toutes les stats de la newsletter : ",[35,1870,1871],{"href":1871,"rel":1872},"https:\u002F\u002Fwww.indiehackers.com\u002Fproduct\u002Ffrench-react-newsletter",[39],[26,1874,1876],{"id":1875},"notre-invité-sébastien-lorber","Notre invité : Sébastien Lorber",[42,1878,1879],{},[45,1880,1881],{},[35,1882,1885],{"href":1883,"rel":1884},"https:\u002F\u002Ftwitter.com\u002Fsebastienlorber",[39],"@sebastienlorber",[31,1887,233],{},{"title":235,"searchDepth":236,"depth":236,"links":1889},[1890,1891,1892],{"id":1801,"depth":236,"text":1802},{"id":1831,"depth":236,"text":1832},{"id":1875,"depth":236,"text":1876},[252],"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.","DS_051_docusaurus",2611,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fv1667301483\u002Fepisode\u002F51_EpArtwork_ndarop.png",51,[1900,1901,1903,1905,1908,1910,1912,1915,1918],{"title":1885,"url":1883},{"title":1533,"url":1902},"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fsebastienlorber",{"title":1904,"url":1904},"https:\u002F\u002Fsebastienlorber.com",{"title":1906,"url":1907},"Reacthebdo","http:\u002F\u002Freacthebdo.fr",{"title":1909,"url":1849},"ThisWeekInReact",{"title":1802,"url":1911},"https:\u002F\u002Fdocusaurus.io\u002F",{"title":1913,"url":1914},"Github Docusaurus","https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fdocusaurus",{"title":1916,"url":1917},"Showcase Docusaurus","https:\u002F\u002Fdocusaurus.io\u002Fshowcase",{"title":1919,"url":1920},"Tuto Docusaurus","https:\u002F\u002Ftutorial.docusaurus.io\u002F",{},"\u002Fpodcasts\u002Fdocusaurus","2022-11-02",{"title":1796,"description":1894},"podcasts\u002F051.docusaurus\u002Findex","Le projet Docusaurus et la newsletter React Hebdo avec Sébastien Lorber",[1801,1928],"documentation","xzB3TGeENEU","SznO3WcxMN3JBWa_rBPxT5HwQfShBnRzNAxBKsDxQsY",{"id":1932,"title":1933,"author":21,"body":1934,"categories":1949,"description":1950,"dsSlug":1951,"duration":1952,"episodeArtwork":260,"episodeNumber":1953,"episodeType":258,"explicit":6,"extension":259,"guid":260,"links":1954,"meta":1955,"navigation":263,"path":1956,"publicationDate":1957,"season":266,"seo":1958,"status":268,"stem":1959,"subtitle":1960,"tags":1961,"videoLink":1964,"__hash__":1965},"podcasts\u002Fpodcasts\u002F050.episode-50\u002Findex.md","Épisode spécial 50 en live",{"type":23,"value":1935,"toc":1947},[1936,1939,1942,1945],[31,1937,1938],{},"Un épisode spécial en live pour le cinquantième épisode du Podcast !",[31,1940,1941],{},"Nous revenons sur l'évolution depuis le début et le futur du podcast.\nNous répondons aux questions posées sur le chat en direct et les questions posées via twitter.",[31,1943,1944],{},"Un épisode un peu différent et en live.",[31,1946,233],{},{"title":235,"searchDepth":236,"depth":236,"links":1948},[],[252],"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.","DS_050_live50",3872,50,[],{},"\u002Fpodcasts\u002Fepisode-50","2022-10-27",{"title":1933,"description":1950},"podcasts\u002F050.episode-50\u002Findex","Un épisode spécial en live pour le cinquantième",[1962,1963],"50","double slash","BIOsPqlePZM","af7I3xv7DlLoj6KITLZwen3sLCoOaf9mNN8hddgk_E4",{"id":1967,"title":1968,"author":21,"body":1969,"categories":2136,"description":2137,"dsSlug":2138,"duration":2139,"episodeArtwork":260,"episodeNumber":2140,"episodeType":258,"explicit":6,"extension":259,"guid":2141,"links":2142,"meta":2143,"navigation":263,"path":2144,"publicationDate":2145,"season":266,"seo":2146,"status":268,"stem":2147,"subtitle":2148,"tags":2149,"videoLink":2151,"__hash__":2152},"podcasts\u002Fpodcasts\u002F049.news-octobre-22\u002Findex.md","Les News pour octobre 2022",{"type":23,"value":1970,"toc":2121},[1971,1975,1982,1986,1993,1997,2003,2007,2014,2018,2025,2029,2036,2040,2054,2056,2063,2067,2073,2077,2084,2088,2095,2099,2105,2107],[26,1972,1974],{"id":1973},"typescript-fête-ses-10-ans","TypeScript fête ses 10 ans",[31,1976,1977],{},[35,1978,1981],{"href":1979,"rel":1980},"https:\u002F\u002Fdevblogs.microsoft.com\u002Ftypescript\u002Ften-years-of-typescript\u002F",[39],"Ten Years of TypeScript - TypeScript",[26,1983,1985],{"id":1984},"php-version-82-rc3","PHP Version 8.2 RC3",[31,1987,1988,1989],{},"Version finale le 24 novembre 2022\n",[35,1990,1991],{"href":1991,"rel":1992},"https:\u002F\u002Fstitcher.io\u002Fblog\u002Fnew-in-php-82",[39],[26,1994,1996],{"id":1995},"stenope-générateur-statique-php-pour-symfony","Stenope Générateur statique PHP pour Symfony",[31,1998,1999],{},[35,2000,2001],{"href":2001,"rel":2002},"https:\u002F\u002Fstenopephp.github.io\u002FStenope\u002F",[39],[26,2004,2006],{"id":2005},"lightning-css","Lightning CSS",[31,2008,2009,2010],{},"Compilateur CSS moderne et rapide\n",[35,2011,2012],{"href":2012,"rel":2013},"https:\u002F\u002Flightningcss.dev\u002F",[39],[26,2015,2017],{"id":2016},"token-css","Token CSS",[31,2019,2020,2021],{},"Concept CSS basé sur le design Token. A suivre..\n",[35,2022,2023],{"href":2023,"rel":2024},"https:\u002F\u002Ftokencss.com\u002F",[39],[26,2026,2028],{"id":2027},"gatsby-v5-alpha","Gatsby V5 (Alpha)",[31,2030,2031,2032],{},"Partial Hydration via React serveur component\n",[35,2033,2034],{"href":2034,"rel":2035},"https:\u002F\u002Fwww.gatsbyjs.com\u002Fblog\u002Fgatsby-v5-alpha-is-here-and-its-pretty-exciting\u002F",[39],[26,2037,2039],{"id":2038},"redwood-v3","Redwood V3",[31,2041,2042,2049,2050,2053],{},[2043,2044,2045],"span",{},[35,2046,2047],{"href":2047,"rel":2048},"https:\u002F\u002Fcommunity.redwoodjs.com\u002Ft\u002Fredwood-3-0-0-is-now-available\u002F3989",[39],"\n(",[35,2051,2047],{"href":2047,"rel":2052},[39],")",[26,2055,72],{"id":71},[31,2057,2058,2059],{},"Support des customs fields !\n",[35,2060,2061],{"href":2061,"rel":2062},"https:\u002F\u002Fdocs-next.strapi.io\u002Fdeveloper-docs\u002Flatest\u002Fdevelopment\u002Fcustom-fields.html",[39],[26,2064,2066],{"id":2065},"nhost","NHost",[31,2068,2069],{},[35,2070,2071],{"href":2071,"rel":2072},"https:\u002F\u002Fnhost.io\u002Flaunch-week",[39],[26,2074,2076],{"id":2075},"kinsta","Kinsta",[31,2078,2079,2080],{},"Nouveau service de hosting en beta ",[35,2081,2082],{"href":2082,"rel":2083},"https:\u002F\u002Fkinsta.com\u002Fhelp\u002Fkinsta-application-database-beta\u002F",[39],[26,2085,2087],{"id":2086},"papanasi","Papanasi",[31,2089,2090,2091],{},"The Universal UI Library\n",[35,2092,2093],{"href":2093,"rel":2094},"https:\u002F\u002Fpapanasi.js.org\u002F?path=\u002Fstory\u002Fdocumentation-introduction--page",[39],[26,2096,2098],{"id":2097},"web-perf-mobile","WEb Perf Mobile",[31,2100,2101],{},[35,2102,2103],{"href":2103,"rel":2104},"https:\u002F\u002Fwww.journaldunet.com\u002Fsolutions\u002Fdsi\u002F1192875-classement-webperf\u002F",[39],[26,2106,573],{"id":572},[42,2108,2109,2115],{},[45,2110,2111],{},[35,2112,2113],{"href":2113,"rel":2114},"https:\u002F\u002Fjsoncrack.com\u002F",[39],[45,2116,2117],{},[35,2118,2119],{"href":2119,"rel":2120},"https:\u002F\u002Fjsonhero.io\u002F",[39],{"title":235,"searchDepth":236,"depth":236,"links":2122},[2123,2124,2125,2126,2127,2128,2129,2130,2131,2132,2133,2134,2135],{"id":1973,"depth":236,"text":1974},{"id":1984,"depth":236,"text":1985},{"id":1995,"depth":236,"text":1996},{"id":2005,"depth":236,"text":2006},{"id":2016,"depth":236,"text":2017},{"id":2027,"depth":236,"text":2028},{"id":2038,"depth":236,"text":2039},{"id":71,"depth":236,"text":72},{"id":2065,"depth":236,"text":2066},{"id":2075,"depth":236,"text":2076},{"id":2086,"depth":236,"text":2087},{"id":2097,"depth":236,"text":2098},{"id":572,"depth":236,"text":573},[252],"Un épisode en format \"news\". Nous revenons sur les différentes news des dernières semaines que nous avons retenues","DS_049_news10_22",2549,49,"d8ed6a024ed27ed3ea1b218ff3714763",[],{},"\u002Fpodcasts\u002Fnews-octobre-22","2022-10-13",{"title":1968,"description":2137},"podcasts\u002F049.news-octobre-22\u002Findex","Un épisode en format \"news\" pour le mois d'octobre 2022",[1450,919,630,2150,699],"typescript","jJT14P0u5E8","nJK9Ukeibw134eEuufoeLvX0Mq1a6GCw2un88D1G03A",{"id":2154,"title":2155,"author":21,"body":2156,"categories":2350,"description":2351,"dsSlug":2352,"duration":2353,"episodeArtwork":260,"episodeNumber":2354,"episodeType":258,"explicit":6,"extension":259,"guid":2355,"links":2356,"meta":2357,"navigation":263,"path":2358,"publicationDate":2359,"season":266,"seo":2360,"status":268,"stem":2361,"subtitle":2362,"tags":2363,"videoLink":2365,"__hash__":2366},"podcasts\u002Fpodcasts\u002F048.seo-2022\u002Findex.md","SEO 2022 avec Dan Bernier",{"type":23,"value":2157,"toc":2346},[2158,2161,2164,2168,2188,2192,2197,2246,2250,2271,2275,2299,2303],[31,2159,2160],{},"Dans cet épisode nous allons parler de SEO. Dan Bernier va nous expliquer comment bien faire du SEO en 2022.",[31,2162,2163],{},"En tant que dev, nous sommes souvent focalisés sur la vitesse de chargement et le score de lighthouse.\nMais 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.\nChaque 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.",[362,2165,2167],{"id":2166},"retrouvez-dan-bernier","Retrouvez Dan Bernier",[42,2169,2170,2176,2182],{},[45,2171,2172],{},[35,2173,2174],{"href":2174,"rel":2175},"https:\u002F\u002Ftwitter.com\u002FdanYdan_fr",[39],[45,2177,2178],{},[35,2179,2180],{"href":2180,"rel":2181},"https:\u002F\u002Fwww.danbernier.fr\u002F",[39],[45,2183,2184],{},[35,2185,2186],{"href":2186,"rel":2187},"https:\u002F\u002Fwww.ineolab.fr\u002F",[39],[362,2189,2191],{"id":2190},"les-liens","Les liens",[2193,2194,2196],"h4",{"id":2195},"les-experts-à-suivre","Les experts à suivre",[42,2198,2199,2211,2218,2225,2232,2239],{},[45,2200,2201,2202,2206,2207],{},"Paul Sanchez ",[35,2203,2204],{"href":2204,"rel":2205},"https:\u002F\u002Ftwitter.com\u002FSeoblackout",[39]," et Mathieu Gheerbrant ",[35,2208,2209],{"href":2209,"rel":2210},"https:\u002F\u002Ftwitter.com\u002FBlackMelvyn",[39],[45,2212,2213,2214],{},"Stéphane Madaleno ",[35,2215,2216],{"href":2216,"rel":2217},"https:\u002F\u002Ftwitter.com\u002Fsmadaleno",[39],[45,2219,2220,2221],{},"Fred Doeurf Bobet et sa chaîne ",[35,2222,2223],{"href":2223,"rel":2224},"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCiT_aPGfrfKhk37evgxOA8w",[39],[45,2226,2227,2228],{},"Jérôme Pasquelin ",[35,2229,2230],{"href":2230,"rel":2231},"https:\u002F\u002Ftwitter.com\u002FJeromePasquelin",[39],[45,2233,2234,2235],{},"Yannick Bouvard alias Yeca ",[35,2236,2237],{"href":2237,"rel":2238},"https:\u002F\u002Ftwitter.com\u002Fyeca",[39],[45,2240,2241,2242],{},"Daniel Roch ",[35,2243,2244],{"href":2244,"rel":2245},"https:\u002F\u002Ftwitter.com\u002Frochdaniel",[39],[2193,2247,2249],{"id":2248},"actualités","Actualités",[42,2251,2252,2259],{},[45,2253,2254,2255],{},"Le live de l’actu web by SEO Camp aussi dispo en replay : ",[35,2256,2257],{"href":2257,"rel":2258},"https:\u002F\u002Fwww.youtube.com\u002Fc\u002FSEOCAMP",[39],[45,2260,2261,2262,2266,2267],{},"Les 2 sites à connaître pour démarrer dans le SEO : ",[35,2263,2264],{"href":2264,"rel":2265},"https:\u002F\u002Fwww.webrankinfo.com\u002F",[39]," et ",[35,2268,2269],{"href":2269,"rel":2270},"https:\u002F\u002Fwww.abondance.com\u002F",[39],[2193,2272,2274],{"id":2273},"outils","Outils",[42,2276,2277,2288],{},[45,2278,2279,2280,2266,2284],{},"Outils d’analyse de logs : ",[35,2281,2282],{"href":2282,"rel":2283},"https:\u002F\u002Ffr.oncrawl.com\u002F",[39],[35,2285,2286],{"href":2286,"rel":2287},"https:\u002F\u002Fseolyzer.io\u002Ffr\u002F",[39],[45,2289,2290,2291,2266,2295],{},"Outils de test de perf utiles pour le SEO : ",[35,2292,2293],{"href":2293,"rel":2294},"https:\u002F\u002Fpagespeed.web.dev\u002F",[39],[35,2296,2297],{"href":2297,"rel":2298},"https:\u002F\u002Fwww.dareboost.com\u002Ffr",[39],[2193,2300,2302],{"id":2301},"formations-et-autres","Formations et autres",[42,2304,2305,2312,2319,2326,2333,2340],{},[45,2306,2307,2308],{},"La formation que j’ai faite en 2010 : ",[35,2309,2310],{"href":2310,"rel":2311},"https:\u002F\u002Fformation.ranking-metrics.fr\u002Freferencement-naturel",[39],[45,2313,2314,2315],{},"La Bible ",[35,2316,2317],{"href":2317,"rel":2318},"https:\u002F\u002Fwww.eyrolles.com\u002FInformatique\u002FLivre\u002Freussir-son-referencement-web-9782416005824\u002F",[39],[45,2320,2321,2322],{},"La Bible 2 par Google ",[35,2323,2324],{"href":2324,"rel":2325},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fbeginner\u002Fseo-starter-guide?hl=fr&visit_id=637999730573833486-2543267905&rd=1",[39],[45,2327,2328,2329],{},"Livre pour Wordpress : ",[35,2330,2331],{"href":2331,"rel":2332},"https:\u002F\u002Fwww.eyrolles.com\u002FInformatique\u002FLivre\u002Foptimiser-son-referencement-wordpress-9782212679878\u002F",[39],[45,2334,2335,2336],{},"Article ",[35,2337,2338],{"href":2338,"rel":2339},"https:\u002F\u002Fblog-fr.orson.io\u002Freferencer-son-site-seo\u002F32-experts-seo-livrent-3-techniques-de-referencement-2017",[39],[45,2341,2335,2342],{},[35,2343,2344],{"href":2344,"rel":2345},"https:\u002F\u002Fseosly.com\u002Fblog\u002Fseo-audit\u002F",[39],{"title":235,"searchDepth":236,"depth":236,"links":2347},[2348,2349],{"id":2166,"depth":590,"text":2167},{"id":2190,"depth":590,"text":2191},[252],"Un épisode avec un invité, Dan Bernier, consultant SEO Inéolab. Avec lui, nous allons parler de SEO et comprendre comment rendre son site indexable et référencé dans les résultats de recherche.","DS_048_SE0_22",4165,48,"b27962835b47b85a2bb5ed7d1b066a38",[],{},"\u002Fpodcasts\u002Fseo-2022","2022-10-05",{"title":2155,"description":2351},"podcasts\u002F048.seo-2022\u002Findex","Faire du SEO en 2022 avec Dan Bernier",[2364],"seo","rnJgwpqcB7M","lVjati9ADYZDI630GtJnjGkgGvd_R8ZiQ52HJit8dfg",{"id":2368,"title":2369,"author":21,"body":2370,"categories":2399,"description":2400,"dsSlug":2401,"duration":2402,"episodeArtwork":260,"episodeNumber":2403,"episodeType":258,"explicit":6,"extension":259,"guid":2404,"links":2405,"meta":2409,"navigation":263,"path":2410,"publicationDate":2411,"season":266,"seo":2412,"status":268,"stem":2413,"subtitle":2414,"tags":2415,"videoLink":2417,"__hash__":2418},"podcasts\u002Fpodcasts\u002F047.pwa_builder\u002Findex.md","PWA Builder avec David Rousset",{"type":23,"value":2371,"toc":2396},[2372,2375,2378,2382],[31,2373,2374],{},"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.",[31,2376,2377],{},"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.",[362,2379,2381],{"id":2380},"retrouvez-david-rousset","Retrouvez David Rousset",[42,2383,2384,2390],{},[45,2385,2386],{},[35,2387,2388],{"href":2388,"rel":2389},"https:\u002F\u002Ftwitter.com\u002Fdavrous",[39],[45,2391,2392],{},[35,2393,2394],{"href":2394,"rel":2395},"https:\u002F\u002Fwww.davrous.com\u002F",[39],{"title":235,"searchDepth":236,"depth":236,"links":2397},[2398],{"id":2380,"depth":590,"text":2381},[252],"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","DS_047_pwabuilder",4135,47,"6c738bb99bd1532edfaacef2377b7514",[2406],{"title":2407,"url":2408},"https:\u002F\u002Fwww.pwabuilder.com\u002F","https:\u002F\u002Fwww.pwabuilder.com",{},"\u002Fpodcasts\u002Fpwa_builder","2022-09-21",{"title":2369,"description":2400},"podcasts\u002F047.pwa_builder\u002Findex","Publier sa Progressive Web Apps sur les Stores",[2416],"pwa","ZqN1oJE4NcQ","hYkY5pghdkqpXyzKfK-7isvH9yymzSNk3JwibcXsYaE",{"id":2420,"title":2421,"author":21,"body":2422,"categories":2603,"description":2604,"dsSlug":2605,"duration":2606,"episodeArtwork":260,"episodeNumber":2607,"episodeType":258,"explicit":6,"extension":259,"guid":2608,"links":2609,"meta":2610,"navigation":263,"path":2611,"publicationDate":2612,"season":266,"seo":2613,"status":268,"stem":2614,"subtitle":2604,"tags":2615,"videoLink":2618,"__hash__":2619},"podcasts\u002Fpodcasts\u002F046.back-to-school-22\u002Findex.md","Back to school 2022",{"type":23,"value":2423,"toc":2591},[2424,2428,2434,2442,2446,2451,2471,2475,2480,2488,2492,2497,2505,2509,2514,2522,2526,2531,2535,2540,2546,2550,2564,2568],[26,2425,2427],{"id":2426},"chrome-support-web-framework","Chrome support Web Framework",[2429,2430,2431],"blockquote",{},[31,2432,2433],{},"Chrome distribue la monnaie !",[42,2435,2436],{},[45,2437,2438],{},[35,2439,2440],{"href":2440,"rel":2441},"https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Fframework-fund-2022\u002F",[39],[26,2443,2445],{"id":2444},"bunjs-la-nouvelle-runtime-javascript","Bun.js, la nouvelle runtime JavaScript",[2429,2447,2448],{},[31,2449,2450],{},"Bun explose les compteur !",[42,2452,2453,2459,2465],{},[45,2454,2455],{},[35,2456,2457],{"href":2457,"rel":2458},"https:\u002F\u002Fbun.sh\u002F",[39],[45,2460,2461],{},[35,2462,2463],{"href":2463,"rel":2464},"https:\u002F\u002Fdev.to\u002Fkhansa\u002Fbun-is-a-lightweight-all-in-one-javascript-runtime-19oe",[39],[45,2466,2467],{},[35,2468,2469],{"href":2469,"rel":2470},"https:\u002F\u002Foven.sh\u002F",[39],[26,2472,2474],{"id":2473},"deno-lautre-runtime-javascript","Deno, l'autre runtime JavaScript",[2429,2476,2477],{},[31,2478,2479],{},"Big Changes Ahead for Deno !",[42,2481,2482],{},[45,2483,2484],{},[35,2485,2486],{"href":2486,"rel":2487},"https:\u002F\u002Fdeno.com\u002Fblog\u002Fchanges",[39],[26,2489,2491],{"id":2490},"planetscale-service-de-database","PlanetScale, service de DataBase",[2429,2493,2494],{},[31,2495,2496],{},"Database serverless !",[42,2498,2499],{},[45,2500,2501],{},[35,2502,2503],{"href":2503,"rel":2504},"https:\u002F\u002Fplanetscale.com\u002Fblog\u002Fintroducing-the-planetscale-serverless-driver-for-javascript",[39],[26,2506,2508],{"id":2507},"temporal-proposition-tc39","Temporal, proposition TC39",[2429,2510,2511],{},[31,2512,2513],{},"Enfin une meilleur gestion des dates en natif !",[42,2515,2516],{},[45,2517,2518],{},[35,2519,2520],{"href":2520,"rel":2521},"https:\u002F\u002Ftc39.es\u002Fproposal-temporal\u002Fdocs\u002F",[39],[26,2523,2525],{"id":2524},"netlify","Netlify",[2429,2527,2528],{},[31,2529,2530],{},"Netlify sert la vis sur les repositories d'organisations !",[26,2532,2534],{"id":2533},"heroku","Heroku",[2429,2536,2537],{},[31,2538,2539],{},"Heroku stop les comptes gratuits",[31,2541,2542],{},[35,2543,2544],{"href":2544,"rel":2545},"https:\u002F\u002Fblog.heroku.com\u002Fnext-chapter",[39],[362,2547,2549],{"id":2548},"alternatives","Alternatives",[42,2551,2552,2558],{},[45,2553,2554],{},[35,2555,2556],{"href":2556,"rel":2557},"https:\u002F\u002Fcaprover.com\u002F",[39],[45,2559,2560],{},[35,2561,2562],{"href":2562,"rel":2563},"https:\u002F\u002Fcoolify.io\u002F",[39],[26,2565,2567],{"id":2566},"autres","Autres",[42,2569,2570,2577,2584],{},[45,2571,2572],{},[35,2573,2576],{"href":2574,"rel":2575},"https:\u002F\u002Fgithub.com\u002Fgraphql\u002Fgraphiql\u002F",[39],"GraphiQL 2",[45,2578,2579],{},[35,2580,2583],{"href":2581,"rel":2582},"https:\u002F\u002Fgitexplorer.com\u002F",[39],"Git Explorer",[45,2585,2586],{},[35,2587,2590],{"href":2588,"rel":2589},"https:\u002F\u002Fstellate.co\u002Fgraphql-edge-caching",[39],"GraphQL Cache",{"title":235,"searchDepth":236,"depth":236,"links":2592},[2593,2594,2595,2596,2597,2598,2599,2602],{"id":2426,"depth":236,"text":2427},{"id":2444,"depth":236,"text":2445},{"id":2473,"depth":236,"text":2474},{"id":2490,"depth":236,"text":2491},{"id":2507,"depth":236,"text":2508},{"id":2524,"depth":236,"text":2525},{"id":2533,"depth":236,"text":2534,"children":2600},[2601],{"id":2548,"depth":590,"text":2549},{"id":2566,"depth":236,"text":2567},[252],"Un épisode de rentrée en format \"news\". Nous revenons sur les annonces qui ont eu lieu durant l'été 2022.","DS_046_news_sept22",3097,46,"7e81ee153d82fb165e2112919c1b9bba",[],{},"\u002Fpodcasts\u002Fback-to-school-22","2022-09-07",{"title":2421,"description":2604},"podcasts\u002F046.back-to-school-22\u002Findex",[2616,2617,699],"bun","deno","D1IJ08_pYhA","zKbAzlToq5T1X65DFeJNX2hsXGeNS7p12VDVmk21yy0",{"id":2621,"title":2622,"author":21,"body":2623,"categories":2653,"description":2654,"dsSlug":2655,"duration":2656,"episodeArtwork":260,"episodeNumber":2657,"episodeType":258,"explicit":6,"extension":259,"guid":2658,"links":2659,"meta":2678,"navigation":263,"path":2679,"publicationDate":2680,"season":266,"seo":2681,"status":268,"stem":2682,"subtitle":2683,"tags":2684,"videoLink":2686,"__hash__":2687},"podcasts\u002Fpodcasts\u002F045.animeJS\u002Findex.md","Animations web avec JavaScript",{"type":23,"value":2624,"toc":2651},[2625,2628,2646,2649],[31,2626,2627],{},"Pour finir la série sur les animations dans le navigateur, on termine avec un tour d'horizon des solutions avec du JavaScript.",[31,2629,2630,2631,2634,2635,2638,2639,2642,2643],{},"On évoque les concepts de ",[285,2632,2633],{},"keyFrames",", de ",[285,2636,2637],{},"Staggering",", les ",[285,2640,2641],{},"Timelines"," ou autres ",[285,2644,2645],{},"Triggers",[31,2647,2648],{},"Puis on brosse le panel des solutions les plus connues et utilisées sur le Web.",[31,2650,233],{},{"title":235,"searchDepth":236,"depth":236,"links":2652},[],[252],"Dans cet épisode, nous allons expliquer comment faire des animations avec JavaScript, les concepts de base et les outils.","DS_045_animeJS",3030,45,"1d1141cbe5302cac1cd5a15b60db8696",[2660,2663,2666,2669,2672,2675],{"title":2661,"url":2662},"GreenSocks","https:\u002F\u002Fgreensock.com",{"title":2664,"url":2665},"Anime.js","https:\u002F\u002Fanimejs.com",{"title":2667,"url":2668},"Motion ONE","https:\u002F\u002Fmotion.dev",{"title":2670,"url":2671},"Auto animate","https:\u002F\u002Fauto-animate.formkit.com",{"title":2673,"url":2674},"React Framer Motion","https:\u002F\u002Fwww.framer.com\u002Fmotion",{"title":2676,"url":2677},"VueUse Motion","https:\u002F\u002Fmotion.vueuse.org",{},"\u002Fpodcasts\u002Fanimejs","2022-08-31",{"title":2622,"description":2654},"podcasts\u002F045.animeJS\u002Findex","Les solutions pour faire des animations en JS",[2685,630],"animation","rM4OMNDxYAM","cwStRHHpAm6IUlyfWwHh1OYQjpIekWu_4GtxD6FZ2ck",{"id":2689,"title":2690,"author":21,"body":2691,"categories":3572,"description":3573,"dsSlug":3574,"duration":3575,"episodeArtwork":260,"episodeNumber":3576,"episodeType":258,"explicit":6,"extension":259,"guid":3577,"links":3578,"meta":3579,"navigation":263,"path":3581,"publicationDate":3582,"season":266,"seo":3583,"status":268,"stem":3584,"subtitle":3585,"tags":3586,"videoLink":3587,"__hash__":3588},"podcasts\u002Fpodcasts\u002F044.animeCSS\u002Findex.md","Les animations avec CSS",{"type":23,"value":2692,"toc":3551},[2693,2697,2700,2824,2828,2831,2835,2838,2841,2875,2878,2882,2885,2888,2918,2921,2934,2937,2940,2943,2969,2972,3001,3005,3008,3057,3060,3143,3146,3150,3153,3156,3159,3162,3195,3310,3315,3319,3322,3325,3329,3332,3335,3338,3341,3344,3347,3350,3355,3358,3361,3364,3370,3373,3380,3384,3387,3419,3425,3429,3436,3440,3443,3446,3464,3466,3468,3508,3512,3527,3531,3545,3547],[26,2694,2696],{"id":2695},"animation-avec-css","Animation avec CSS",[31,2698,2699],{},"Tout commence avec un changement d’état d’un élément.\nChangement de couleur et de taille pour un bouton par exemple quand je passe dessus avec la souris.",[2701,2702,2705],"pre",{"className":2703,"code":2704,"language":919,"meta":235,"style":235},"language-css shiki shiki-themes synthwave-84","button {\n    width: 170px;\n    height: 35px;\n    background-color: #eee;\n}\n\nbutton:hover {\n    width: 200px;\n    height: 40px;\n    background-color: #ccc;\n}\n",[2706,2707,2708,2719,2735,2747,2760,2766,2772,2783,2795,2807,2819],"code",{"__ignoreMap":235},[2043,2709,2711,2715],{"class":2710,"line":266},"line",[2043,2712,2714],{"class":2713},"sfE7D","button",[2043,2716,2718],{"class":2717},"soy-K"," {\n",[2043,2720,2721,2724,2728,2732],{"class":2710,"line":236},[2043,2722,2723],{"class":2713},"    width",[2043,2725,2727],{"class":2726},"s2hdG",":",[2043,2729,2731],{"class":2730},"sSmKr"," 170px",[2043,2733,2734],{"class":2717},";\n",[2043,2736,2737,2740,2742,2745],{"class":2710,"line":590},[2043,2738,2739],{"class":2713},"    height",[2043,2741,2727],{"class":2726},[2043,2743,2744],{"class":2730}," 35px",[2043,2746,2734],{"class":2717},[2043,2748,2750,2753,2755,2758],{"class":2710,"line":2749},4,[2043,2751,2752],{"class":2713},"    background-color",[2043,2754,2727],{"class":2726},[2043,2756,2757],{"class":2730}," #eee",[2043,2759,2734],{"class":2717},[2043,2761,2763],{"class":2710,"line":2762},5,[2043,2764,2765],{"class":2717},"}\n",[2043,2767,2769],{"class":2710,"line":2768},6,[2043,2770,2771],{"emptyLinePlaceholder":263},"\n",[2043,2773,2775,2777,2781],{"class":2710,"line":2774},7,[2043,2776,2714],{"class":2713},[2043,2778,2780],{"class":2779},"s1ZOD",":hover",[2043,2782,2718],{"class":2717},[2043,2784,2786,2788,2790,2793],{"class":2710,"line":2785},8,[2043,2787,2723],{"class":2713},[2043,2789,2727],{"class":2726},[2043,2791,2792],{"class":2730}," 200px",[2043,2794,2734],{"class":2717},[2043,2796,2798,2800,2802,2805],{"class":2710,"line":2797},9,[2043,2799,2739],{"class":2713},[2043,2801,2727],{"class":2726},[2043,2803,2804],{"class":2730}," 40px",[2043,2806,2734],{"class":2717},[2043,2808,2810,2812,2814,2817],{"class":2710,"line":2809},10,[2043,2811,2752],{"class":2713},[2043,2813,2727],{"class":2726},[2043,2815,2816],{"class":2730}," #ccc",[2043,2818,2734],{"class":2717},[2043,2820,2822],{"class":2710,"line":2821},11,[2043,2823,2765],{"class":2717},[362,2825,2827],{"id":2826},"déclencher-les-changements-détats","Déclencher les changements d’états",[31,2829,2830],{},"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.",[362,2832,2834],{"id":2833},"transition","Transition",[31,2836,2837],{},"L’animation\u002Ftransition apparait dès que l’on ajoute la propriété “Transition\"",[31,2839,2840],{},"Pour déterminer les transitions entre 2 états :",[2701,2842,2844],{"className":2703,"code":2843,"language":919,"meta":235,"style":235},"transition: \u003Cproperty> \u003Cduration> \u003Ctiming-function> \u003Cdelay>;\n",[2706,2845,2846],{"__ignoreMap":235},[2043,2847,2848,2851,2855,2858,2860,2863,2866,2868,2871,2873],{"class":2710,"line":266},[2043,2849,2850],{"class":2717},"transition: \u003Cproperty",[2043,2852,2854],{"class":2853},"scrqX",">",[2043,2856,2857],{"class":2717}," \u003Cduration",[2043,2859,2854],{"class":2853},[2043,2861,2862],{"class":2717}," \u003C",[2043,2864,2865],{"class":2713},"timing-function",[2043,2867,2854],{"class":2853},[2043,2869,2870],{"class":2717}," \u003Cdelay",[2043,2872,2854],{"class":2853},[2043,2874,2734],{"class":2717},[31,2876,2877],{},"Marche sur quasiment tout : width, height, background, etc..",[362,2879,2881],{"id":2880},"transform","Transform",[31,2883,2884],{},"Mais dans l’idéal, il faut utiliser en priorité la propriété Transform. On reviendra sur la raison plus tard.",[31,2886,2887],{},"Transform c'est 20 propriétés de transformation.",[2701,2889,2891],{"className":2703,"code":2890,"language":919,"meta":235,"style":235},"transform: scale();\ntransform: translate()\ntransform: rotate()\ntransform: skew()\ntransform: perspective()\n",[2706,2892,2893,2898,2903,2908,2913],{"__ignoreMap":235},[2043,2894,2895],{"class":2710,"line":266},[2043,2896,2897],{"class":2717},"transform: scale();\n",[2043,2899,2900],{"class":2710,"line":236},[2043,2901,2902],{"class":2717},"transform: translate()\n",[2043,2904,2905],{"class":2710,"line":590},[2043,2906,2907],{"class":2717},"transform: rotate()\n",[2043,2909,2910],{"class":2710,"line":2749},[2043,2911,2912],{"class":2717},"transform: skew()\n",[2043,2914,2915],{"class":2710,"line":2762},[2043,2916,2917],{"class":2717},"transform: perspective()\n",[31,2919,2920],{},"Avec transform-origin, on peut créer des mouvements poussés",[2701,2922,2924],{"className":2703,"code":2923,"language":919,"meta":235,"style":235},"transform-origin: 0% 50%;\n",[2706,2925,2926],{"__ignoreMap":235},[2043,2927,2928,2931],{"class":2710,"line":266},[2043,2929,2930],{"class":2713},"transform-origin",[2043,2932,2933],{"class":2717},": 0% 50%;\n",[362,2935,2936],{"id":2685},"Animation",[31,2938,2939],{},"Passons maintenant aux vraies animations, celle qui peuvent tourner en boucle.",[31,2941,2942],{},"Il est tout à fait possible de faire des animations avec CSS.\nPour cela, il faut utiliser les propriétés animations :",[42,2944,2945,2948,2951,2954,2957,2960,2963,2966],{},[45,2946,2947],{},"animation-name",[45,2949,2950],{},"animation-duration",[45,2952,2953],{},"animation-timing-function",[45,2955,2956],{},"animation-delay",[45,2958,2959],{},"animation-iteration-count",[45,2961,2962],{},"animation-direction",[45,2964,2965],{},"animation-fill-mode",[45,2967,2968],{},"animation-play-state",[31,2970,2971],{},"Évidemment, il y a une écriture raccourcie pour toutes les propriétés :",[2701,2973,2975],{"className":2703,"code":2974,"language":919,"meta":235,"style":235},"animation: name duration timing-function delay iteration-count direction fill-mode play-state;\n",[2706,2976,2977],{"__ignoreMap":235},[2043,2978,2979,2982,2984,2987,2990,2993,2996,2999],{"class":2710,"line":266},[2043,2980,2981],{"class":2717},"animation: name duration ",[2043,2983,2865],{"class":2713},[2043,2985,2986],{"class":2717}," delay ",[2043,2988,2989],{"class":2713},"iteration-count",[2043,2991,2992],{"class":2717}," direction ",[2043,2994,2995],{"class":2713},"fill-mode",[2043,2997,2998],{"class":2713}," play-state",[2043,3000,2734],{"class":2717},[362,3002,3004],{"id":3003},"keyframes","Keyframes",[31,3006,3007],{},"Mais avant de pouvoir utiliser les propriétés ”animation”, il faut créer une timeline avec @keyframes :",[2701,3009,3011],{"className":2703,"code":3010,"language":919,"meta":235,"style":235},"@keyframes mymove {\n  from {top: 0px;}\n  to {top: 200px;}\n}\n",[2706,3012,3013,3024,3040,3053],{"__ignoreMap":235},[2043,3014,3015,3018,3022],{"class":2710,"line":266},[2043,3016,3017],{"class":2853},"@keyframes",[2043,3019,3021],{"class":3020},"sH7Js"," mymove",[2043,3023,2718],{"class":2717},[2043,3025,3026,3029,3032,3034,3037],{"class":2710,"line":236},[2043,3027,3028],{"class":2717},"  from {",[2043,3030,3031],{"class":2713},"top",[2043,3033,2727],{"class":2726},[2043,3035,3036],{"class":2730}," 0px",[2043,3038,3039],{"class":2717},";}\n",[2043,3041,3042,3045,3047,3049,3051],{"class":2710,"line":590},[2043,3043,3044],{"class":2717},"  to {",[2043,3046,3031],{"class":2713},[2043,3048,2727],{"class":2726},[2043,3050,2792],{"class":2730},[2043,3052,3039],{"class":2717},[2043,3054,3055],{"class":2710,"line":2749},[2043,3056,2765],{"class":2717},[31,3058,3059],{},"ou",[2701,3061,3063],{"className":2703,"code":3062,"language":919,"meta":235,"style":235},"@keyframes mymove {\n  0%   {top: 0px;}\n  25%  {top: 200px;}\n  50%  {top: 100px;}\n  75%  {top: 200px;}\n  100% {top: 0px;}\n}\n",[2706,3064,3065,3073,3086,3099,3113,3126,3139],{"__ignoreMap":235},[2043,3066,3067,3069,3071],{"class":2710,"line":266},[2043,3068,3017],{"class":2853},[2043,3070,3021],{"class":3020},[2043,3072,2718],{"class":2717},[2043,3074,3075,3078,3080,3082,3084],{"class":2710,"line":236},[2043,3076,3077],{"class":2717},"  0%   {",[2043,3079,3031],{"class":2713},[2043,3081,2727],{"class":2726},[2043,3083,3036],{"class":2730},[2043,3085,3039],{"class":2717},[2043,3087,3088,3091,3093,3095,3097],{"class":2710,"line":590},[2043,3089,3090],{"class":2717},"  25%  {",[2043,3092,3031],{"class":2713},[2043,3094,2727],{"class":2726},[2043,3096,2792],{"class":2730},[2043,3098,3039],{"class":2717},[2043,3100,3101,3104,3106,3108,3111],{"class":2710,"line":2749},[2043,3102,3103],{"class":2717},"  50%  {",[2043,3105,3031],{"class":2713},[2043,3107,2727],{"class":2726},[2043,3109,3110],{"class":2730}," 100px",[2043,3112,3039],{"class":2717},[2043,3114,3115,3118,3120,3122,3124],{"class":2710,"line":2762},[2043,3116,3117],{"class":2717},"  75%  {",[2043,3119,3031],{"class":2713},[2043,3121,2727],{"class":2726},[2043,3123,2792],{"class":2730},[2043,3125,3039],{"class":2717},[2043,3127,3128,3131,3133,3135,3137],{"class":2710,"line":2768},[2043,3129,3130],{"class":2717},"  100% {",[2043,3132,3031],{"class":2713},[2043,3134,2727],{"class":2726},[2043,3136,3036],{"class":2730},[2043,3138,3039],{"class":2717},[2043,3140,3141],{"class":2710,"line":2774},[2043,3142,2765],{"class":2717},[31,3144,3145],{},"Dans l'ensemble, c'est assez simple.\nOn peut tout utiliser dans les @keyframes mais attention aux performances !",[362,3147,3149],{"id":3148},"motion-path","Motion Path",[31,3151,3152],{},"3 propriétés qui permettent à un élément de suivre un tracé.",[31,3154,3155],{},"Le tracé a suivre : offset-path",[31,3157,3158],{},"Position de l’élément sur le tracé : offset-distance",[31,3160,3161],{},"La rotation de l’élément sur le tracé : offset-rotate",[2701,3163,3165],{"className":2703,"code":3164,"language":919,"meta":235,"style":235},"div {\n  offset-path: path('M10 10 H 180 V 180 H 10 Z');\n}\n",[2706,3166,3167,3174,3191],{"__ignoreMap":235},[2043,3168,3169,3172],{"class":2710,"line":266},[2043,3170,3171],{"class":2713},"div",[2043,3173,2718],{"class":2717},[2043,3175,3176,3179,3181,3184,3188],{"class":2710,"line":236},[2043,3177,3178],{"class":2713},"  offset-path",[2043,3180,2727],{"class":2726},[2043,3182,3183],{"class":2717}," path(",[2043,3185,3187],{"class":3186},"sFl1-","'M10 10 H 180 V 180 H 10 Z'",[2043,3189,3190],{"class":2717},");\n",[2043,3192,3193],{"class":2710,"line":590},[2043,3194,2765],{"class":2717},[2701,3196,3198],{"className":2703,"code":3197,"language":919,"meta":235,"style":235},"div {\n  animation: myMove 1s;\n}\n\n@keyframes myMove {\n  0% {\n    offset-distance: 0%;\n  }\n    40% {\n        offset-distance: 70%;\n    }\n  100% {\n    offset-distance: 100%;\n  }\n}\n",[2706,3199,3200,3206,3221,3225,3229,3238,3243,3255,3260,3265,3277,3282,3288,3300,3305],{"__ignoreMap":235},[2043,3201,3202,3204],{"class":2710,"line":266},[2043,3203,3171],{"class":2713},[2043,3205,2718],{"class":2717},[2043,3207,3208,3211,3213,3216,3219],{"class":2710,"line":236},[2043,3209,3210],{"class":2713},"  animation",[2043,3212,2727],{"class":2726},[2043,3214,3215],{"class":2717}," myMove ",[2043,3217,3218],{"class":2730},"1s",[2043,3220,2734],{"class":2717},[2043,3222,3223],{"class":2710,"line":590},[2043,3224,2765],{"class":2717},[2043,3226,3227],{"class":2710,"line":2749},[2043,3228,2771],{"emptyLinePlaceholder":263},[2043,3230,3231,3233,3236],{"class":2710,"line":2762},[2043,3232,3017],{"class":2853},[2043,3234,3235],{"class":3020}," myMove",[2043,3237,2718],{"class":2717},[2043,3239,3240],{"class":2710,"line":2768},[2043,3241,3242],{"class":2717},"  0% {\n",[2043,3244,3245,3248,3250,3253],{"class":2710,"line":2774},[2043,3246,3247],{"class":2713},"    offset-distance",[2043,3249,2727],{"class":2726},[2043,3251,3252],{"class":2730}," 0%",[2043,3254,2734],{"class":2717},[2043,3256,3257],{"class":2710,"line":2785},[2043,3258,3259],{"class":2717},"  }\n",[2043,3261,3262],{"class":2710,"line":2797},[2043,3263,3264],{"class":2717},"    40% {\n",[2043,3266,3267,3270,3272,3275],{"class":2710,"line":2809},[2043,3268,3269],{"class":2713},"        offset-distance",[2043,3271,2727],{"class":2726},[2043,3273,3274],{"class":2730}," 70%",[2043,3276,2734],{"class":2717},[2043,3278,3279],{"class":2710,"line":2821},[2043,3280,3281],{"class":2717},"    }\n",[2043,3283,3285],{"class":2710,"line":3284},12,[2043,3286,3287],{"class":2717},"  100% {\n",[2043,3289,3291,3293,3295,3298],{"class":2710,"line":3290},13,[2043,3292,3247],{"class":2713},[2043,3294,2727],{"class":2726},[2043,3296,3297],{"class":2730}," 100%",[2043,3299,2734],{"class":2717},[2043,3301,3303],{"class":2710,"line":3302},14,[2043,3304,3259],{"class":2717},[2043,3306,3308],{"class":2710,"line":3307},15,[2043,3309,2765],{"class":2717},[31,3311,3312],{},[285,3313,3314],{},"Bientôt supporté par Safari !!",[362,3316,3318],{"id":3317},"fps","FPS",[31,3320,3321],{},"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.",[31,3323,3324],{},"Chacune de ces cadres a un budget d'un peu plus de 16 ms (1 seconde \u002F 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.",[26,3326,3328],{"id":3327},"bien-animer","Bien animer !",[31,3330,3331],{},"Pour commencer, on va parler des étapes de rendu du page web (HTML, CSS).",[31,3333,3334],{},"Cela fonctionne comme un tunnel qui s'appelle pixels-to-screen pipeline :",[31,3336,3337],{},"0 - JavaScript : Trier, ajouter un élément dans le DOM, etc... Dans le cas où c'est JS qui déclenche un changement visuel.",[31,3339,3340],{},"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",[31,3342,3343],{},"2 - Layout (disposition) : Determination de la taille des éléments et placements dans le flux de la page",[31,3345,3346],{},"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.",[31,3348,3349],{},"4 - Composition : assemblage des layers entre eux pour composer la page",[31,3351,3352],{},[285,3353,3354],{},"Important",[31,3356,3357],{},"Les propriétés ne sont pas toutes appliquées aux mêmes étapes.\nwidth et height c'est au layout.\nbackgroud color c'est au paint.",[31,3359,3360],{},"Chaque étape déclenche les suivantes.",[31,3362,3363],{},"Changer la width d'un élément déclenche un layout > paint > composition.\nDonc plus de calcul et donc plus de temps.",[31,3365,3366,3367],{},"Dans l'idéal, il faut éviter de déclencheur du layout et du paint.\nEt donc, utiliser des propriétés qui déclenche que de la composition :\n",[285,3368,3369],{},"transform et opacity.",[31,3371,3372],{},"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.",[31,3374,3375,3379],{},[35,3376,3377],{"href":3377,"rel":3378},"https:\u002F\u002Fcsstriggers.com\u002F",[39]," pour vérifier ce que chaque propriété déclenche.",[362,3381,3383],{"id":3382},"will-change","will change",[31,3385,3386],{},"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.",[2701,3388,3390],{"className":2703,"code":3389,"language":919,"meta":235,"style":235},"body > .sidebar {\n  will-change: transform;\n}\n",[2706,3391,3392,3405,3415],{"__ignoreMap":235},[2043,3393,3394,3397,3400,3403],{"class":2710,"line":266},[2043,3395,3396],{"class":2713},"body",[2043,3398,3399],{"class":2853}," >",[2043,3401,3402],{"class":2853}," .sidebar",[2043,3404,2718],{"class":2717},[2043,3406,3407,3410,3412],{"class":2710,"line":236},[2043,3408,3409],{"class":2713},"  will-change",[2043,3411,2727],{"class":2726},[2043,3413,3414],{"class":2717}," transform;\n",[2043,3416,3417],{"class":2710,"line":590},[2043,3418,2765],{"class":2717},[31,3420,3421,3424],{},[285,3422,3423],{},"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.",[26,3426,3428],{"id":3427},"debug","Debug",[31,3430,3431,3432,3435],{},"DevTools onglet animation ",[2706,3433,3434],{},"CMD+P   > "," et performance pour analyser les animations.",[26,3437,3439],{"id":3438},"a11y","A11y",[31,3441,3442],{},"Il existe un media query qui permet au personne de spécifier qu’ils ne veulent pas d’animation.",[31,3444,3445],{},"Important pour ne pas imposer des mouvements sur l’écran à des personnes qui les refusent.",[2701,3447,3449],{"className":2703,"code":3448,"language":919,"meta":235,"style":235},"@media (prefers-reduced-motion: reduce) {}\n",[2706,3450,3451],{"__ignoreMap":235},[2043,3452,3453,3456,3459,3461],{"class":2710,"line":266},[2043,3454,3455],{"class":2853},"@media",[2043,3457,3458],{"class":2717}," (prefers-reduced-motion",[2043,3460,2727],{"class":2726},[2043,3462,3463],{"class":2717}," reduce) {}\n",[26,3465,2191],{"id":2190},[362,3467,467],{"id":466},[42,3469,3470,3476,3482,3488,3494,3501],{},[45,3471,3472],{},[35,3473,3474],{"href":3474,"rel":3475},"https:\u002F\u002Fweb.dev\u002Frendering-performance\u002F",[39],[45,3477,3478],{},[35,3479,3480],{"href":3480,"rel":3481},"https:\u002F\u002Fweb.dev\u002Fanimations-guide\u002F",[39],[45,3483,3484],{},[35,3485,3486],{"href":3486,"rel":3487},"https:\u002F\u002Fweb.dev\u002Fanimations-overview\u002F",[39],[45,3489,3490],{},[35,3491,3492],{"href":3492,"rel":3493},"https:\u002F\u002Fweb.dev\u002Fstick-to-compositor-only-properties-and-manage-layer-count\u002F",[39],[45,3495,3496],{},[35,3497,3500],{"href":3498,"rel":3499},"https:\u002F\u002Fwww.freecodecamp.org\u002Fnews\u002Fweb-animation-performance-fundamentals\u002F",[39],"Web Animation Performance Fundamentals – How to Make Your Pages Look Smooth (freecodecamp.org)",[45,3502,3503],{},[35,3504,3507],{"href":3505,"rel":3506},"https:\u002F\u002Fdassur.ma\u002Fthings\u002Fforcing-layers\u002F",[39],"Layers and how to force them — surma.dev (dassur.ma)",[362,3509,3511],{"id":3510},"cours","Cours",[42,3513,3514,3520],{},[45,3515,3516],{},[35,3517,3518],{"href":3518,"rel":3519},"https:\u002F\u002Fopenclassrooms.com\u002Ffr\u002Fcourses\u002F5919246-creez-des-animations-css-modernes",[39],[45,3521,3522],{},[35,3523,3526],{"href":3524,"rel":3525},"https:\u002F\u002Fwww.alsacreations.com\u002Ftuto\u002Flire\u002F1807-Motion-Path--introduction-aux-animations-CSS-modernes.html",[39],"Motion Path : introduction aux animations CSS modernes - Alsacreations",[362,3528,3530],{"id":3529},"créer-des-animations","Créer des animations",[42,3532,3533,3539],{},[45,3534,3535],{},[35,3536,3537],{"href":3537,"rel":3538},"https:\u002F\u002Fanimista.net\u002F",[39],[45,3540,3541],{},[35,3542,3543],{"href":3543,"rel":3544},"https:\u002F\u002Fanimate.style\u002F",[39],[31,3546,233],{},[3548,3549,3550],"style",{},"html pre.shiki code .sfE7D, html code.shiki .sfE7D{--shiki-default:#72F1B8}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .s2hdG, html code.shiki .s2hdG{--shiki-default:#B6B1B1}html pre.shiki code .sSmKr, html code.shiki .sSmKr{--shiki-default:#F97E72}html pre.shiki code .s1ZOD, html code.shiki .s1ZOD{--shiki-default:#D50}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .scrqX, html code.shiki .scrqX{--shiki-default:#FEDE5D}html pre.shiki code .sH7Js, html code.shiki .sH7Js{--shiki-default:#FF7EDB;--shiki-default-font-style:italic}html pre.shiki code .sFl1-, html code.shiki .sFl1-{--shiki-default:#FF8B39}",{"title":235,"searchDepth":236,"depth":236,"links":3552},[3553,3562,3565,3566,3567],{"id":2695,"depth":236,"text":2696,"children":3554},[3555,3556,3557,3558,3559,3560,3561],{"id":2826,"depth":590,"text":2827},{"id":2833,"depth":590,"text":2834},{"id":2880,"depth":590,"text":2881},{"id":2685,"depth":590,"text":2936},{"id":3003,"depth":590,"text":3004},{"id":3148,"depth":590,"text":3149},{"id":3317,"depth":590,"text":3318},{"id":3327,"depth":236,"text":3328,"children":3563},[3564],{"id":3382,"depth":590,"text":3383},{"id":3427,"depth":236,"text":3428},{"id":3438,"depth":236,"text":3439},{"id":2190,"depth":236,"text":2191,"children":3568},[3569,3570,3571],{"id":466,"depth":590,"text":467},{"id":3510,"depth":590,"text":3511},{"id":3529,"depth":590,"text":3530},[252],"Dans cet épisode, nous allons expliquer comment faire des animations avec CSS et comment optimiser les performances de vos animations","DS_044_animeCSS",2983,44,"b97a06a7fb0055a583db9b41f8fdcf7b",[],{"url":3580},"https:\u002F\u002Fchtbl.com\u002Ftrack\u002F79E812\u002Fdouble-slash.ams3.cdn.digitaloceanspaces.com\u002FDS_044_animeCSS.mp3","\u002Fpodcasts\u002Fanimecss","2022-08-19",{"title":2690,"description":3573},"podcasts\u002F044.animeCSS\u002Findex","Comment faire des animations avec CSS et optimiser les performances de vos animations",[2685,919],"opO05lQNKYA","nbkOorVo5fDfeDZjKqrjhB00IuXUeduoDVtEkjrhj3I",{"id":3590,"title":3591,"author":21,"body":3592,"categories":3647,"description":3648,"dsSlug":3649,"duration":3650,"episodeArtwork":260,"episodeNumber":3651,"episodeType":258,"explicit":6,"extension":259,"guid":3652,"links":3653,"meta":3655,"navigation":263,"path":3656,"publicationDate":3657,"season":266,"seo":3658,"status":268,"stem":3659,"subtitle":3660,"tags":3661,"videoLink":3662,"__hash__":3663},"podcasts\u002Fpodcasts\u002F043.three-js\u002Findex.md","Three.js avec Bruno Simon",{"type":23,"value":3593,"toc":3643},[3594,3598,3601,3605,3612,3615,3641],[26,3595,3597],{"id":3596},"threejs","Three.js",[31,3599,3600],{},"Three.js est une librairie JavaScript pour créer des animations 3D dans un navigateur web.\nThree.js peut être utilisée avec la balise canvas disponible avec HTML5 sans avoir besoin d'utiliser un plugin.",[26,3602,3604],{"id":3603},"bruno-simon","Bruno Simon",[31,3606,3607,3608],{},"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.\nBruno 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 : ",[35,3609,3610],{"href":3610,"rel":3611},"https:\u002F\u002Fthreejs-journey.com",[39],[31,3613,3614],{},"Pour retrouver Bruno Simon :",[42,3616,3617,3623,3630,3635],{},[45,3618,3619],{},[35,3620,3621],{"href":3621,"rel":3622},"https:\u002F\u002Ftwitter.com\u002Fbruno_simon",[39],[45,3624,3625],{},[35,3626,3629],{"href":3627,"rel":3628},"https:\u002F\u002Fbruno-simon.com\u002F",[39],"https:\u002F\u002Fbruno-simon.com",[45,3631,3632],{},[35,3633,3610],{"href":3610,"rel":3634},[39],[45,3636,3637],{},[35,3638,3639],{"href":3639,"rel":3640},"https:\u002F\u002Fgithub.com\u002Fbrunosimon",[39],[31,3642,233],{},{"title":235,"searchDepth":236,"depth":236,"links":3644},[3645,3646],{"id":3596,"depth":236,"text":3597},{"id":3603,"depth":236,"text":3604},[252],"Un épisode avec un invité, Bruno Simon, qui va nous parler de Three.JS. Une bibliothèque JavaScript pour créer des animations 3D.","DS_043_threejs",3070,43,"2568ae1e37264125f779764907d1c1b2",[3654],{"title":3610,"url":3610},{},"\u002Fpodcasts\u002Fthree-js","2022-08-10",{"title":3591,"description":3648},"podcasts\u002F043.three-js\u002Findex","Bruno Simon va nous parler de Three.JS. Une bibliothèque JavaScript pour créer des animations 3D.",[2685,3596],"_3yR4p-x7QQ","Kv6CkFO9BMGnN8ljZmxFX0LhJVklTGl_gGoKF2BRq7I",{"id":3665,"title":3666,"author":21,"body":3667,"categories":3716,"description":3717,"dsSlug":3718,"duration":3719,"episodeArtwork":260,"episodeNumber":3720,"episodeType":258,"explicit":6,"extension":259,"guid":3721,"links":3722,"meta":3731,"navigation":263,"path":3732,"publicationDate":3733,"season":266,"seo":3734,"status":268,"stem":3735,"subtitle":3736,"tags":3737,"videoLink":3738,"__hash__":3739},"podcasts\u002Fpodcasts\u002F042.lottie-svg-animation\u002Findex.md","Lottie, une solution pour les animations",{"type":23,"value":3668,"toc":3712},[3669,3673,3680,3684,3710],[26,3670,3672],{"id":3671},"lottie","Lottie",[31,3674,3675,3676,3679],{},"Lottie est un format open source d'animation vectorielle basé sur un fichier JSON.\nLe format a été créé par le département design de AirBnB.\nIls 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.\nPour le web par exemple, avec la librairie ",[2706,3677,3678],{},"lottie-web"," installée dans votre projet, vous pourrez afficher l'animation qui provient du fichier JSON.\nVous 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.\nPar 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.",[26,3681,3683],{"id":3682},"retrouvez-notre-invité-charly-martin","Retrouvez notre invité Charly Martin",[42,3685,3686,3692,3698,3704],{},[45,3687,3688],{},[35,3689,3690],{"href":3690,"rel":3691},"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fcharlymartin\u002F",[39],[45,3693,3694],{},[35,3695,3696],{"href":3696,"rel":3697},"https:\u002F\u002Fgithub.com\u002FCharlyMartin",[39],[45,3699,3700],{},[35,3701,3702],{"href":3702,"rel":3703},"https:\u002F\u002Flottiestudio.com\u002F",[39],[45,3705,3706],{},[35,3707,3708],{"href":3708,"rel":3709},"https:\u002F\u002Fcharlymartin.me\u002F",[39],[31,3711,233],{},{"title":235,"searchDepth":236,"depth":236,"links":3713},[3714,3715],{"id":3671,"depth":236,"text":3672},{"id":3682,"depth":236,"text":3683},[252],"Cet épisode fait partie d'une série de quelques épisodes dédiés à l'animation. Nous recevons Charly Martin pour parler de Lottie, une solution pour créer des animations SVG très avancées.","DS_042_lottie",2629,42,"8216e840e11ff0c76bc7207324afc1fa",[3723,3725,3727,3729],{"title":3724,"url":3724},"https:\u002F\u002Fairbnb.io\u002Flottie\u002F#\u002F",{"title":3726,"url":3726},"https:\u002F\u002Fgithub.com\u002Fairbnb\u002Flottie-web",{"title":3728,"url":3728},"https:\u002F\u002Flottiefiles.com\u002F",{"title":3730,"url":3730},"https:\u002F\u002Flottielab.com\u002F",{},"\u002Fpodcasts\u002Flottie-svg-animation","2022-07-27",{"title":3666,"description":3717},"podcasts\u002F042.lottie-svg-animation\u002Findex","Lottie, une solution pour les animations svg avancées [Animation Serie]",[2685,3671],"p0jcwBJOOpY","6cO0PnWvqNi8yDEfTXH2sFvnrER0-fKawgOZafo2iRs",{"id":3741,"title":3742,"author":21,"body":3743,"categories":3781,"description":3782,"dsSlug":3783,"duration":3784,"episodeArtwork":260,"episodeNumber":3785,"episodeType":258,"explicit":6,"extension":259,"guid":3786,"links":3787,"meta":3794,"navigation":263,"path":3795,"publicationDate":3796,"season":266,"seo":3797,"status":268,"stem":3798,"subtitle":3799,"tags":3800,"videoLink":3803,"__hash__":3804},"podcasts\u002Fpodcasts\u002F041.edge-computing\u002Findex.md","Edge computing, le serverless à la sauce CDN",{"type":23,"value":3744,"toc":3775},[3745,3749,3752,3756,3759,3763,3766,3770,3773],[26,3746,3748],{"id":3747},"le-serverless","Le serverless",[31,3750,3751],{},"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.\nVous le payez a l'utilisation, souvent en nombre de requête et durée de processing.\nCela permet de ne pas posséder de serveur et de la gestion qui va avec.\nCependant, 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.\nMais dans le cas, où votre site est international et qu'un visiteur se trouve loin de la France.\nLe temps de réponse s'allonge et la latence s'installe.\nPour 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.\nÉ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.",[26,3753,3755],{"id":3754},"les-cdn","Les CDN",[31,3757,3758],{},"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.\nLe réseau va automatiquement sélectionner le serveur le plus proche du visiteur pour réduire le temps de réponse.\nPour 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.\nCela marche parfaitement, mais uniquement pour des fichiers. Pas de logique, pas de traitement.",[26,3760,3762],{"id":3761},"les-edges-functions","Les edges functions",[31,3764,3765],{},"Les edges functions, sont des services serverless qui agissent comme des serveurs CDN.\nCela permet d'effectuer des traitements au plus proche des internautes.\nIl 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.\nCloudflare, fait tourner le moteur V8 par exemple. Le même que Chrome ou Node.JS. Netlify a basé ses fonctions edge sur Deno.\nCela permet d'avoir des temps de réponse plus rapide, car le cold start est ultra court par rapport à un serveur Node.JS.",[26,3767,3769],{"id":3768},"la-suite","La suite",[31,3771,3772],{},"Au-delà de faire des traitements quand on les appelle. Les edges functions sont capable de faire beaucoup plus.\nLes Frameworks sont en train d'évoluer et de s'adapter à cette nouvelle technologie.\nOn 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.\nFresh, un nouveau Framework, est également pensé pour tourner sur du edge.\nBref, le futur est en marche et il semble prometteur.",[31,3774,233],{},{"title":235,"searchDepth":236,"depth":236,"links":3776},[3777,3778,3779,3780],{"id":3747,"depth":236,"text":3748},{"id":3754,"depth":236,"text":3755},{"id":3761,"depth":236,"text":3762},{"id":3768,"depth":236,"text":3769},[252],"Dans cet épisode nous allons vous expliquer les grands principes du Edge Computing, son fonctionnement et son utilisation.","DS_041_edge",2571,41,"c246e26c028cfadb74ec559363a7e479",[3788,3791],{"title":3789,"url":3790},"Netlify Edge function","https:\u002F\u002Fwww.netlify.com\u002Fblog\u002Fdeep-dive-into-netlify-edge-functions",{"title":3792,"url":3793},"Cloudflare Workers'","https:\u002F\u002Fdevelopers.cloudflare.com\u002Fworkers\u002Flearning\u002Fhow-workers-works",{},"\u002Fpodcasts\u002Fedge-computing","2022-07-13",{"title":3742,"description":3782},"podcasts\u002F041.edge-computing\u002Findex","Edge computing, la simplicité du serverless et la rapidité du CDN.",[3801,3802,699],"serverless","edge","sy-cV7KzU6E","CSNeA4bxSQIK-IPp7kfgYwol5uQ2PTTbphx-s9DmXCw",{"id":3806,"title":3807,"author":21,"body":3808,"categories":3838,"description":3839,"dsSlug":3840,"duration":3841,"episodeArtwork":260,"episodeNumber":3842,"episodeType":258,"explicit":6,"extension":259,"guid":3843,"links":3844,"meta":3863,"navigation":263,"path":3864,"publicationDate":3865,"season":266,"seo":3866,"status":268,"stem":3867,"subtitle":3839,"tags":3868,"videoLink":3871,"__hash__":3872},"podcasts\u002Fpodcasts\u002F040.web-platform-2022\u002Findex.md","Les Web Platforms en 2022",{"type":23,"value":3809,"toc":3836},[3810,3819,3822,3825,3828,3831,3834],[31,3811,3812],{},[285,3813,3814,3815],{},"Les slides utilisés pour l'épisode ",[35,3816,3817],{"href":3817,"rel":3818},"https:\u002F\u002Fslides.com\u002Fgoodmotion\u002Fstate-of-web-platform",[39],[31,3820,3821],{},"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.\nEt 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.",[31,3823,3824],{},"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.",[31,3826,3827],{},"Dans cet épisode, nous passons en revue les importantes implémentations qui vont vraiment changer notre quotidien de développeur web.",[31,3829,3830],{},"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.\nÉ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.",[31,3832,3833],{},"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.",[31,3835,233],{},{"title":235,"searchDepth":236,"depth":236,"links":3837},[],[252],"Un passage en revue des implémentations futures et actuelles dans les navigateurs après la Google IO et la WWDC Apple.","DS_040_webapi22",2773,40,"ab1b72df509cb2a1ec871478816c4223",[3845,3848,3851,3854,3857,3860],{"title":3846,"url":3847},"Interop 2022: browsers working together to improve the web for developers","https:\u002F\u002Fweb.dev\u002Finterop-2022\u002F",{"title":3849,"url":3850},"State of CSS 2022","https:\u002F\u002Fweb.dev\u002Fstate-of-css-2022",{"title":3852,"url":3853},"What's new for the web platform","https:\u002F\u002Fyoutu.be\u002F5b4YcLB4DVI",{"title":3855,"url":3856},"Bringing page transitions to the web","https:\u002F\u002Fyoutu.be\u002FJCJUPJ_zDQ4",{"title":3858,"url":3859},"State of CSS","https:\u002F\u002Fyoutu.be\u002FXy9ZXRRgpLk",{"title":3861,"url":3862},"What's new in Safari and WebKit","https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2022\u002F10048",{},"\u002Fpodcasts\u002Fweb-platform-2022","2022-06-29",{"title":3807,"description":3839},"podcasts\u002F040.web-platform-2022\u002Findex",[3869,3870],"googleIO","WWDC","41oHH_opXKg","l-UvO-G-ksMJfCTTmU6Gn67RCX5_atgJ_OaNmYOjhx4",{"id":3874,"title":3875,"author":21,"body":3876,"categories":3971,"description":3972,"dsSlug":3973,"duration":3974,"episodeArtwork":260,"episodeNumber":3975,"episodeType":258,"explicit":6,"extension":259,"guid":3976,"links":3977,"meta":3978,"navigation":263,"path":3979,"publicationDate":3980,"season":266,"seo":3981,"status":268,"stem":3982,"subtitle":3972,"tags":3983,"videoLink":3987,"__hash__":3988},"podcasts\u002Fpodcasts\u002F039.news-juin-2022\u002Findex.md","Spécial news - Juin 2022",{"type":23,"value":3877,"toc":3969},[3878,3882,3967],[2193,3879,3881],{"id":3880},"les-news-évoquées-durant-lépisode","Les news évoquées durant l'épisode :",[42,3883,3884,3892,3900,3908,3916,3924,3932,3940,3948,3956,3964],{},[45,3885,3886,3887],{},"01:00 ",[35,3888,3891],{"href":3889,"rel":3890},"https:\u002F\u002Fblog.angular.io\u002Fangular-v14-is-now-available-391a6db736af",[39],"Angular 14",[45,3893,3894,3895],{},"03:47 ",[35,3896,3899],{"href":3897,"rel":3898},"https:\u002F\u002Fbetterprogramming.pub\u002Fatom-text-editor-is-dying-long-live-ides-3d1d35ff4e7e",[39],"Atom, va mourir le 15 décembre 2022 !",[45,3901,3902,3903],{},"06:02 ",[35,3904,3907],{"href":3905,"rel":3906},"https:\u002F\u002Ftauri.studio\u002F",[39],"Tauri en version 1.0",[45,3909,3910,3911],{},"08:34 ",[35,3912,3915],{"href":3913,"rel":3914},"https:\u002F\u002Fwww.cypress.io\u002Fblog\u002F2022\u002F06\u002F01\u002Fcypress-10-release\u002F",[39],"Cypress en version 10",[45,3917,3918,3919],{},"13:00 ",[35,3920,3923],{"href":3921,"rel":3922},"https:\u002F\u002Fhistoire.dev\u002Fguide\u002Findex.html",[39],"Histoire",[45,3925,3926,3927],{},"16:38 ",[35,3928,3931],{"href":3929,"rel":3930},"https:\u002F\u002Fblog.vuejs.org\u002Fposts\u002Fvue-2-7-beta.html",[39],"Vue version 2.7",[45,3933,3934,3935],{},"21:10 ",[35,3936,3939],{"href":3937,"rel":3938},"https:\u002F\u002Fgithub.com\u002Ffastify\u002Ffastify-dx\u002Fblob\u002Fmain\u002Fpackages\u002Ffastify-dx-react\u002FREADME.md",[39],"Fastify DX React",[45,3941,3942,3943],{},"28:50 ",[35,3944,3947],{"href":3945,"rel":3946},"https:\u002F\u002Ffresh.deno.dev\u002F",[39],"Fresh",[45,3949,3950,3951],{},"35:21 ",[35,3952,3955],{"href":3953,"rel":3954},"https:\u002F\u002Ftom.preston-werner.com\u002F2022\u002F05\u002F23\u002Fmajor-version-numbers-are-not-sacred.html",[39],"Redwood en version 2.0",[45,3957,3958,3959],{},"38:35 ",[35,3960,3963],{"href":3961,"rel":3962},"https:\u002F\u002Ffr.wordpress.org\u002F2022\u002F05\u002F04\u002Fguide-des-changements-techniques-de-wordpress-6-0\u002F",[39],"Wordpress 6",[45,3965,3966],{},"45:53 🎉🎉 IE11 n'est plus ! 🎉🎉",[31,3968,233],{},{"title":235,"searchDepth":236,"depth":236,"links":3970},[],[252],"Un passage en revue des news et releases de nos outils et technologies de développement web des dernières semaines","DS_039_news06_22",2962,39,"0f919ee6ee5c883b1253f2c584915dc9",[],{},"\u002Fpodcasts\u002Fnews-juin-2022","2022-06-22",{"title":3875,"description":3972},"podcasts\u002F039.news-juin-2022\u002Findex",[3984,3985,3986,2617,323],"tauri","cypress","fastify","eTBTWDVQ8EQ","sal3IAtKPvNdvbgCsrhIQ5copeg9_MM-AutfaOZ9qF8",{"id":3990,"title":3991,"author":21,"body":3992,"categories":4206,"description":4207,"dsSlug":4208,"duration":4209,"episodeArtwork":260,"episodeNumber":4210,"episodeType":258,"explicit":6,"extension":259,"guid":4211,"links":4212,"meta":4222,"navigation":263,"path":4223,"publicationDate":4224,"season":266,"seo":4225,"status":268,"stem":4226,"subtitle":4227,"tags":4228,"videoLink":4230,"__hash__":4231},"podcasts\u002Fpodcasts\u002F038.typescript\u002Findex.md","Doit-on utiliser TypeScript ?",{"type":23,"value":3993,"toc":4194},[3994,4000,4003,4015,4019,4022,4025,4028,4033,4036,4039,4047,4051,4056,4060,4063,4071,4078,4082,4090,4093,4099,4102,4108,4114,4117,4123,4129,4132,4136,4143,4147,4159,4166,4173,4177,4180,4184,4192],[31,3995,3996,3999],{},[285,3997,3998],{},"Précision sur les types et interfaces","\nDurant 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.",[31,4001,4002],{},"Les principales différences :",[42,4004,4005,4008],{},[45,4006,4007],{},"Les types ne peuvent pas être réimplementés et étendus",[45,4009,4010,4011],{},"Les interfaces peuvent être réassignées, ce qui provoque un fusion. Elles peuvent être implémentées contrairement aux types.\nNous vous renvoyons sur cette vidéo explicative : ",[35,4012,4013],{"href":4013,"rel":4014},"https:\u002F\u002Fyoutu.be\u002FsFNQeh5Oc08",[39],[26,4016,4018],{"id":4017},"typescript-cest-quoi-exactement","TypeScript c’est quoi exactement ?",[31,4020,4021],{},"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.",[31,4023,4024],{},"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.",[31,4026,4027],{},"Ce type de technologie est souvent appelé \"Superset\", un exemple très connu est SASS pour le CSS.",[31,4029,4030],{},[285,4031,4032],{},"Un language adoré par les dev Java, C++.",[31,4034,4035],{},"Nous allons écrire du code TypeScript qui sera ensuite transcompiler en Javascript.",[31,4037,4038],{},"Il a été créé en 2012 mais personnellement, j’ai entendu parler de typescript avec la sortie d’angular 2.",[31,4040,4041,4042,4046],{},"Avant l’utilisation de typescript, j’utilisais Flow (",[35,4043,4044],{"href":4044,"rel":4045},"https:\u002F\u002Fflow.org\u002F",[39],") projet FB. Et Babel, si je voulais utiliser des choses non présentes dans JS.\nExemple : les classes.",[362,4048,4050],{"id":4049},"important","Important !",[31,4052,4053],{},[285,4054,4055],{},"Le code est toujours compilé en JS. Le browser ne sais pas executer du TS. Pareil pour le coté serveur. Deno, convertie en JS.",[26,4057,4059],{"id":4058},"pourquoi-typescript","Pourquoi TypeScript ?",[31,4061,4062],{},"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.\nAutre 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.",[2701,4064,4069],{"className":4065,"code":4067,"language":4068},[4066],"language-text","2 + \"3\"\n\"23\"\n2 + \"lol\"\n\"2lol\"\n","text",[2706,4070,4067],{"__ignoreMap":235},[31,4072,4073,4074],{},"2 - Comme les tests, c’est une façon de contrôler et de valider son code\n3 - 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.\nEn 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.”\n4 - 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. ",[35,4075,4076],{"href":4076,"rel":4077},"https:\u002F\u002Fmedium.com\u002F@wujido20\u002Fruntime-types-in-typescript-5f74fc9dc6c4",[39],[362,4079,4081],{"id":4080},"principe-de-base","Principe de base",[31,4083,4084,4085,4089],{},"• Initialisation\nCréation du fichier tsconfig.json qui indique comment compiler le code. Avec target, on indique la version de JS. Mini ES5. Max ESNext. ",[35,4086,4087],{"href":4087,"rel":4088},"https:\u002F\u002Fwww.typescriptlang.org\u002Ftsconfig#target",[39],"\n• Extension des fichiers en .ts ou .tsx\n• Type\u002FInterface définir les types des variables, paramètres, retour de fonction, etc.\n• Les types c’est pour les définitions simples\n• Les interfaces, c’est une sorte de shape d’objet. On pour aller plus loin et faire de l’héritage, etc..\n• 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.\n• 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.",[31,4091,4092],{},"Exemple simple :",[2701,4094,4097],{"className":4095,"code":4096,"language":4068},[4066],"function identity\u003CT>(value: T): T {\n return value;\n}\n\nconst result = identity\u003Cnumber>(123);\n",[2706,4098,4096],{"__ignoreMap":235},[31,4100,4101],{},"Plus poussé :",[2701,4103,4106],{"className":4104,"code":4105,"language":4068},[4066],"function pickObjectKeys\u003CT, K extends keyof T>(obj: T, keys: K[]) {\n  let result = {} as Pick\u003CT, K>\n  for (const key of keys) {\n    if (key in obj) {\n      result[key] = obj[key]\n    }\n  }\n  return result\n}\n\nconst language = {\n  name: \"TypeScript\",\n  age: 8,\n  extensions: ['ts', 'tsx']\n}\n\nconst ageAndExtensions = pickObjectKeys(language, ['age', 'extensions'])\n",[2706,4107,4105],{"__ignoreMap":235},[31,4109,4110],{},[35,4111,4112],{"href":4112,"rel":4113},"https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-use-generics-in-typescript",[39],[31,4115,4116],{},"• 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.",[2701,4118,4121],{"className":4119,"code":4120,"language":4068},[4066],"const isArticle = (article: any): article is Article =>\n   typeof article === 'object' && article !== null &&\n   hasOwnProperty(article, 'title') && typeof article.title === 'string' &&\n   hasOwnProperty(article, 'views') in article && typeof article.views === 'number';\n",[2706,4122,4120],{"__ignoreMap":235},[2701,4124,4127],{"className":4125,"code":4126,"language":4068},[4066],"function padLeft(padding: number | string, input: string) {\n  if (typeof padding === \"number\") {\n    return \" \".repeat(padding) + input;\n  }\n  return padding + input;\n}\n",[2706,4128,4126],{"__ignoreMap":235},[31,4130,4131],{},"• Classes Usage très avancées des classes avec les éléments classiques : private, public, protected, readOnly, etc..\n• Decorator (toujours experimental) utiliser une fonction dans une classe, sorte d’héritage.",[362,4133,4135],{"id":4134},"tips","Tips",[31,4137,4138,4139],{},"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 ",[35,4140,4141],{"href":4141,"rel":4142},"https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fjsdoc-supported-types.html#type",[39],[26,4144,4146],{"id":4145},"inclure-les-dépendances-dans-son-projet","Inclure les dépendances dans son projet",[31,4148,4149,4150,4154,4155],{},"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.\nSinon pour les full JS, il faut ajouter un package de type.\nExemple : Lodash est en JS mais un package @type existe\n• ",[35,4151,4152],{"href":4152,"rel":4153},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flodash",[39],"\n• ",[35,4156,4157],{"href":4157,"rel":4158},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@types\u002Flodash",[39],[31,4160,4161,4162],{},"Definitely Typed, l’organisation @types, un repo à la base communautaire et automatisé pour ajouter les types des packages ",[35,4163,4164],{"href":4164,"rel":4165},"https:\u002F\u002Fgithub.com\u002FDefinitelyTyped",[39],[31,4167,4168,4169],{},"En dernier recours, il faudra déclarer les type pour un package, si rien n’existe.\nRepo pour vérifier les packages ",[35,4170,4171],{"href":4171,"rel":4172},"https:\u002F\u002Fwww.typescriptlang.org\u002Fdt\u002Fsearch",[39],[26,4174,4176],{"id":4175},"courbe-dapprentissage","Courbe d’apprentissage",[31,4178,4179],{},"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.\nC’est souvent un problème de définition de type un peu trop poussé.",[26,4181,4183],{"id":4182},"liens","Liens",[42,4185,4186],{},[45,4187,4188],{},[35,4189,4190],{"href":4190,"rel":4191},"https:\u002F\u002Fwww.typescriptlang.org\u002Fcheatsheets",[39],[31,4193,233],{},{"title":235,"searchDepth":236,"depth":236,"links":4195},[4196,4199,4203,4204,4205],{"id":4017,"depth":236,"text":4018,"children":4197},[4198],{"id":4049,"depth":590,"text":4050},{"id":4058,"depth":236,"text":4059,"children":4200},[4201,4202],{"id":4080,"depth":590,"text":4081},{"id":4134,"depth":590,"text":4135},{"id":4145,"depth":236,"text":4146},{"id":4175,"depth":236,"text":4176},{"id":4182,"depth":236,"text":4183},[252],"Un épisode sur les bases de TypeScript afin de vous convaincre d’utiliser TypeScript dans vos projets.","DS_038_ts",3385,38,"2c93ee325b9807e8e4c77ec0871af9e0",[4213,4215,4218,4220],{"title":4214,"url":4076},"Article Medium",{"title":4216,"url":4217},"Flow","https:\u002F\u002Fflow.org",{"title":4219,"url":4087},"TS config",{"title":4221,"url":4190},"TypeScript Cheatsheets",{},"\u002Fpodcasts\u002Ftypescript","2022-06-08",{"title":3991,"description":4207},"podcasts\u002F038.typescript\u002Findex","Doit-on utiliser TypeScript sur nos projets en 2022",[630,4229],"TypeScript","kVdeiE-hod0","EE_06mvdh79hJU5X6x9WZvEqymABfdz-kCMK_My6I1A",{"id":4233,"title":4234,"author":21,"body":4235,"categories":4581,"description":4582,"dsSlug":4583,"duration":4584,"episodeArtwork":260,"episodeNumber":4585,"episodeType":258,"explicit":6,"extension":259,"guid":4586,"links":4587,"meta":4588,"navigation":263,"path":4589,"publicationDate":4590,"season":266,"seo":4591,"status":268,"stem":4592,"subtitle":4593,"tags":4594,"videoLink":260,"__hash__":4595},"podcasts\u002Fpodcasts\u002F037.state-of-hosting-2022\u002Findex.md","Héberger une application web en 2022",{"type":23,"value":4236,"toc":4552},[4237,4246,4250,4254,4257,4261,4266,4270,4278,4282,4285,4289,4309,4313,4316,4333,4336,4341,4344,4347,4350,4384,4388,4398,4402,4405,4419,4422,4430,4433,4435,4438,4471,4475,4478,4481,4489,4492,4503,4506,4508,4511,4535,4539,4550],[362,4238,4240,4241],{"id":4239},"retrouvez-la-vidéo-de-lenregistrement-sur-le-youtube-de-doubleslash","Retrouvez la vidéo de l'enregistrement sur ",[35,4242,4245],{"href":4243,"rel":4244},"https:\u002F\u002Fyoutu.be\u002FzmE7EZp4vDM",[39],"le Youtube de DoubleSlash",[26,4247,4249],{"id":4248},"les-différentes-solutions-pour-héberger-une-application-web","Les différentes solutions pour héberger une application web",[26,4251,4253],{"id":4252},"les-offres-full-virtual-machine","Les offres Full Virtual Machine",[31,4255,4256],{},"Dans cette offre, vous louez un serveur brut. Une machine virtuelle qui fait partie d’un serveur.",[362,4258,4260],{"id":4259},"avantages","Avantages",[42,4262,4263],{},[45,4264,4265],{},"Permets d’aller très très loin dans les configs et les optimisations. Sans limite, sauf vos compétences.",[362,4267,4269],{"id":4268},"désavantages","Désavantages",[42,4271,4272,4275],{},[45,4273,4274],{},"Barrières à l’entrée assez élevée.",[45,4276,4277],{},"Demande de grosses compétences.",[362,4279,4281],{"id":4280},"utilisateurs","Utilisateurs",[31,4283,4284],{},"Les grosses équipes avec un gros budget. Une équipe ou une personne dédiée à la gestion des machines.",[362,4286,4288],{"id":4287},"quelques-exemples-de-services","Quelques exemples de services",[31,4290,4291,4292,4297,4298,4303,4304,1844],{},"• ",[35,4293,4296],{"href":4294,"rel":4295},"https:\u002F\u002Fwww.ovhcloud.com",[39],"OVH"," (FR)\n• Amazon Web Services \u002F Google Cloud Platform \u002F Microsoft AZURE \u002F Digital ocean (US)\n• ",[35,4299,4302],{"href":4300,"rel":4301},"https:\u002F\u002Fwww.infomaniak.com\u002Ffr\u002Fhebergement\u002Fpublic-cloud",[39],"Infomaniak"," (CH)\n• ",[35,4305,4308],{"href":4306,"rel":4307},"https:\u002F\u002Fwww.scaleway.com",[39],"Scaleway",[26,4310,4312],{"id":4311},"les-offres-paas-platform-as-a-service","Les offres PAAS (Platform as a service)",[362,4314,4260],{"id":4315},"avantages-1",[42,4317,4318,4321,4324,4327,4330],{},[45,4319,4320],{},"Très simple à mettre en place, configurer.",[45,4322,4323],{},"Intégration continue facile avec github action, circleci, etc..",[45,4325,4326],{},"Déploiement automatique possible. Certains services proposent même le déploiement des Pull Request.",[45,4328,4329],{},"Capacité d’auto scale. Augmentation des containers en cas de surcharge de trafic.",[45,4331,4332],{},"Multiples technos\u002Flangages.",[362,4334,4269],{"id":4335},"désavantages-1",[42,4337,4338],{},[45,4339,4340],{},"Attention aux réglages des autos scale des containers.",[362,4342,4281],{"id":4343},"utilisateurs-1",[31,4345,4346],{},"Les Startups et entreprises sans grosse équipe technique. Ou équipe qui ne veut pas gérer les serveurs.",[362,4348,4288],{"id":4349},"quelques-exemples-de-services-1",[31,4351,4352,4355,4356,4360,4361,4355,4365,4369,4370,4374,4375,4374,4380,4383],{},[35,4353,4354],{"href":4354},"fly.io"," (US)\n",[35,4357,4358],{"href":4358,"rel":4359},"https:\u002F\u002Fwww.heroku.com",[39]," (US) Salesforce\n",[35,4362,4363],{"href":4363,"rel":4364},"https:\u002F\u002Frender.com\u002F",[39],[35,4366,4367],{"href":4367,"rel":4368},"https:\u002F\u002Fjelastic.com\u002Fpaas-cloud-hosting\u002F",[39]," plusieurs sociétés utilisent cette interface. (US)\n",[35,4371,4372],{"href":4372,"rel":4373},"https:\u002F\u002Fwww.netlify.com\u002F",[39]," ( US )\n",[35,4376,4379],{"href":4377,"rel":4378},"https:\u002F\u002Fvercel.com",[39],"https:\u002F\u002Fvercel.com\u002F",[35,4381,2562],{"href":2562,"rel":4382},[39]," ( sur ton VPS )",[2193,4385,4387],{"id":4386},"france","France",[31,4389,4390,4394,4395,1844],{},[35,4391,4392],{"href":4392,"rel":4393},"https:\u002F\u002Fscalingo.com\u002Ffr",[39]," (preview PR dispo) (FR)\n",[35,4396,4397],{"href":4397},"www.clever-cloud.com",[26,4399,4401],{"id":4400},"les-services-bass-backend-as-a-service","Les services BASS (Backend as a Service)",[362,4403,4260],{"id":4404},"avantages-2",[42,4406,4407,4410,4413,4416],{},[45,4408,4409],{},"Très rapide, performances.",[45,4411,4412],{},"Possibilité d’auto scale.",[45,4414,4415],{},"Pas de serveur à gérer",[45,4417,4418],{},"plan gratuit généreux",[362,4420,4269],{"id":4421},"désavantages-2",[42,4423,4424,4427],{},[45,4425,4426],{},"Plus ou moins open source",[45,4428,4429],{},"À qui appartiennent les données ?",[362,4431,4281],{"id":4432},"utilisateurs-2",[31,4434,4346],{},[362,4436,4288],{"id":4437},"quelques-exemples-de-services-2",[31,4439,4440,4355,4444,4355,4448,4452,4453,4457,4458,4355,4462,4355,4466,4470],{},[35,4441,4442],{"href":4442,"rel":4443},"https:\u002F\u002Ffirebase.google.com\u002F",[39],[35,4445,4446],{"href":4446,"rel":4447},"https:\u002F\u002Fsupabase.com\u002F",[39],[35,4449,4450],{"href":4450,"rel":4451},"https:\u002F\u002Fnhost.io\u002F",[39]," (Sweden)\n",[35,4454,4455],{"href":4455,"rel":4456},"https:\u002F\u002Fappwrite.io\u002F",[39]," (ISR)\n",[35,4459,4460],{"href":4460,"rel":4461},"https:\u002F\u002Frailway.app\u002F",[39],[35,4463,4464],{"href":4464,"rel":4465},"https:\u002F\u002Fwww.8base.com\u002Fplatform",[39],[35,4467,4468],{"href":4468,"rel":4469},"https:\u002F\u002Fwww.back4app.com\u002F",[39]," (US)",[26,4472,4474],{"id":4473},"les-offres-serverless-pass-platform-as-a-service","Les offres Serverless Pass (Platform as a service)",[31,4476,4477],{},"Comme des Pass, mais en mode serverless. Pas de container, mais des apps.",[362,4479,4260],{"id":4480},"avantages-3",[42,4482,4483,4486],{},[45,4484,4485],{},"Très simple. Déploiement en quelques clics mêmes pour un non-Tech.",[45,4487,4488],{},"Auto déploiement par défaut.",[362,4490,4269],{"id":4491},"désavantages-3",[42,4493,4494,4497,4500],{},[45,4495,4496],{},"La plateforme doit prendre en charge la techno\u002Fframework du projet.",[45,4498,4499],{},"Service client parfois inexistant",[45,4501,4502],{},"La majorité est une surcouche à AWS",[362,4504,4281],{"id":4505},"utilisateurs-3",[31,4507,4346],{},[362,4509,4288],{"id":4510},"quelques-exemples-de-services-3",[31,4512,4513,4355,4517,4521,4522,4355,4525,4355,4529,4534],{},[35,4514,4515],{"href":4515,"rel":4516},"https:\u002F\u002Fworkers.cloudflare.com\u002F",[39],[35,4518,4519],{"href":4519,"rel":4520},"https:\u002F\u002Faws.amazon.com\u002Ffr\u002Famplify\u002F",[39]," (US) ",[35,4523,2525],{"href":4372,"rel":4524},[39],[35,4526,4528],{"href":4379,"rel":4527},[39],"Vercel",[35,4530,4533],{"href":4531,"rel":4532},"https:\u002F\u002Fwww.stormkit.io\u002F",[39],"Stormkit"," (Suisse)",[2193,4536,4538],{"id":4537},"surcouche-remote-aws","Surcouche remote AWS:",[31,4540,4541,4545,4546,4470],{},[35,4542,4543],{"href":4543,"rel":4544},"https:\u002F\u002Fwww.qovery.com\u002F",[39]," (FR)\n",[35,4547,4548],{"href":4548,"rel":4549},"https:\u002F\u002Fwww.flightcontrol.dev\u002F",[39],[31,4551,233],{},{"title":235,"searchDepth":236,"depth":236,"links":4553},[4554,4556,4557,4563,4569,4575],{"id":4239,"depth":590,"text":4555},"Retrouvez la vidéo de l'enregistrement sur le Youtube de DoubleSlash",{"id":4248,"depth":236,"text":4249},{"id":4252,"depth":236,"text":4253,"children":4558},[4559,4560,4561,4562],{"id":4259,"depth":590,"text":4260},{"id":4268,"depth":590,"text":4269},{"id":4280,"depth":590,"text":4281},{"id":4287,"depth":590,"text":4288},{"id":4311,"depth":236,"text":4312,"children":4564},[4565,4566,4567,4568],{"id":4315,"depth":590,"text":4260},{"id":4335,"depth":590,"text":4269},{"id":4343,"depth":590,"text":4281},{"id":4349,"depth":590,"text":4288},{"id":4400,"depth":236,"text":4401,"children":4570},[4571,4572,4573,4574],{"id":4404,"depth":590,"text":4260},{"id":4421,"depth":590,"text":4269},{"id":4432,"depth":590,"text":4281},{"id":4437,"depth":590,"text":4288},{"id":4473,"depth":236,"text":4474,"children":4576},[4577,4578,4579,4580],{"id":4480,"depth":590,"text":4260},{"id":4491,"depth":590,"text":4269},{"id":4505,"depth":590,"text":4281},{"id":4510,"depth":590,"text":4288},[252],"Dans cet épisode, nous évoquons les différentes solutions pour héberger une application web","DS_037_hosting",3873,37,"60f157f17c98ece17c1b550c6151d4f0",[],{},"\u002Fpodcasts\u002Fstate-of-hosting-2022","2022-05-25",{"title":4234,"description":4582},"podcasts\u002F037.state-of-hosting-2022\u002Findex","Comment héberger une application web en 2022",[],"P5EGw7PW0rqvExYdiFNIeeFqq1HvVa8W_Mr40Ku2_jQ",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":4597},"\u003Cpath fill=\"currentColor\" d=\"M4 21V9l8-6l8 6v12h-6v-7h-4v7z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":4599},"\u003Cpath fill=\"currentColor\" d=\"M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10s10-4.475 10-10S17.525 2 12 2m-2 14.5v-9l6 4.5z\"\u002F>",["Island",4601],{"key":4602,"result":4603},"Brand_bAcjTzQpW6OVpFK319jfMki97vH1GrZiqHmeI7Xg4o",{"head":4604},{},["Island",4606],{"key":4607,"result":4608},"Duration_PRYhFSjufPCI0ZdHmd1E3NXOSiQQt16OGdRJlD2HfE",{"head":4609},{},["Island",4611],{"key":4612,"result":4613},"Duration_UHifrLZ1qp2xZohTSLjgP5XiDcO8aXB2xBuRVNlEs2I",{"head":4614},{},["Island",4616],{"key":4617,"result":4618},"Duration_YbePfnfO8NXlUIvWEi5DNTxs76mQ6o0JB2eyoBFJnI",{"head":4619},{},["Island",4621],{"key":4622,"result":4623},"Duration_sReQcLDXE4mCvRKni83CYQsrQAgJTj1UrQbTvCFS6qE",{"head":4624},{},["Island",4626],{"key":4627,"result":4628},"Duration_AjW0PwbCjJ4Hv04Pr1WuspnivTXfz1j92ZedAaz05Y",{"head":4629},{},["Island",4631],{"key":4632,"result":4633},"Duration_XqAo2Gfor3bpCmpAtshF1NWso31pCPtHUqwH8N2oM",{"head":4634},{},["Island",4636],{"key":4637,"result":4638},"Duration_CJnxrd7sY1COZLndrRR5qvGTxltDd4pKMQ2amK9kgg",{"head":4639},{},["Island",4641],{"key":4642,"result":4643},"Duration_0gsEgWX01FlsLHbH2ESG0B71ddCMbo7KGqZqimwbqg",{"head":4644},{},["Island",4646],{"key":4647,"result":4648},"Duration_wKKgRyCTHddxfJbnaMcMrjF0crxwM3cUOjzXQBzRogM",{"head":4649},{},["Island",4651],{"key":4652,"result":4653},"Duration_pRTniOxYbO5WqOX4EVx2QqBpy4Bm8V28F2Y46UALRg",{"head":4654},{},["Island",4656],{"key":4657,"result":4658},"Duration_cxeoNS8xRErq0NXWsQchEzBfLIrRiedOOnoam7YPao",{"head":4659},{},["Island",4661],{"key":4662,"result":4663},"Duration_rESxoTDbOJUNni40fZXXj4aOS6nlqne63iq4CW0KeZc",{"head":4664},{},["Island",4666],{"key":4667,"result":4668},"Duration_mdrfWbRUrjANk2iQOH2YTVYtPT3BijdpOhnxWzg",{"head":4669},{},["Island",4671],{"key":4672,"result":4673},"Duration_WgGnuiFb1Zop6T6toT3qxvKNXseuhygg30dFvK1E",{"head":4674},{},["Island",4676],{"key":4677,"result":4678},"Duration_eO8E8wOtXiVW2pmFyOB5tSsRx7K7xefBEavrTCXHRw",{"head":4679},{},["Island",4681],{"key":4682,"result":4683},"Duration_OaBT5oji4n5zkmw7gDlQwMezbXLpfKDogHSkNY9i4",{"head":4684},{},["Island",4686],{"key":4687,"result":4688},"Duration_6nP0X53yv6Ese0NdTMHXddEKA0XSp8oxzAC2x8Vqg",{"head":4689},{},["Island",4691],{"key":4692,"result":4693},"Duration_mwiZa9drJxXNI2mN22a44ccJftXCLfJHixhnXPV0K3I",{"head":4694},{},["Island",4696],{"key":4697,"result":4698},"Duration_e0yO2gUfaMFYPhuGNrs15FiF4upm0dGatQah2R5Onc",{"head":4699},{},["Island",4701],{"key":4702,"result":4703},"Duration_zFERfvRfqKLRyS0tlgvfEciALMl1PFY4fQyG8DTJE",{"head":4704},{},["Island",4706],{"key":4707,"result":4708},"Duration_vofnmZv8FavnX2znxGJ9tUZOhSlEEAXBwoFJLFkmgU",{"head":4709},{},["Island",4711],{"key":4712,"result":4713},"Duration_6HuxauKq4C7gSFX0RkVKpXeBtMVU4wK0M7X4em06yU",{"head":4714},{},["Island",4716],{"key":4717,"result":4718},"Duration_cn1uaw4BpDGNSxljgtLvIrpILTQVQd5sSgRKlHI2bcE",{"head":4719},{},["Island",4721],{"key":4722,"result":4723},"Duration_aNIQBne6S5uyhi0pVe5ntpEW7hZepSEMEbOyIKEyvI4",{"head":4724},{},["Island",4726],{"key":4727,"result":4728},"Duration_cLTQiv9PBsNJNsaNnKTJrFI8lLwgsUgvwgoAVkBkhc",{"head":4729},{},1785405174781]