Bienvenue sur Double Slash, le podcast dédié aux outils et aux techniques pour le développement
web.
Bonjour à tous, bienvenue sur ce nouvel épisode de Double Slash.
Comme d'habitude, nous sommes avec Alex.
Salut Alex.
Salut Patrick, salut tout le monde.
Et donc c'est un épisode spécial News, l'épisode spécial News de février.
Donc on commence par une, alors j'avais envie de te poser une question.
Déjà, direct cache tout de suite.
Cache comme ça.
Je reviens là-dessus parce que suite à une discussion sur Twitter, en fait, il y avait
un gars sur Twitter qui posait la question est-ce qu'aujourd'hui c'est nécessaire
d'apprendre en fait les métaphrem work.
Donc qu'on parle de NUXT, NEXT tout ça.
Tu vois ?
Oui, évidemment j'ai répondu.
Voilà, et moi évidemment j'ai répondu que pour moi c'est quasiment indispensable
et que ça me semble un pensable aujourd'hui de faire une application sans un métaphrem
work.
Mais toi, qu'est-ce que t'en penses ? En fait, j'ai envie de te poser ces questions.
Qu'est-ce t'en penses de ça ?
La question c'est un applicatif.
C'est vraiment un applicatif.
Oui, une application avec une route, tout ça, avec des routes.
Ok.
Moi je dirais j'essaierai de trouver la bonne solution.
Mais en fait, il faut bien comprendre le problème pour trouver la solution parce que ce
qui est sûr c'est que si on n'a pas clairement défini le problème, en fait on va pousser
des solutions et c'est vrai que c'est très très ingénieur de dire ok là on pourrait
faire ta, on pourrait faire ça, on pourrait faire ça.
Et aujourd'hui on essaye de mettre du NEXT ou du NEXT ou des choses comme ça un peu
partout et je pense que parfois c'est un peu overkill.
Donc il faudrait clairement définir le scope du projet et à ce moment-là oui c'est
plus intéressant ou pas.
Mais si c'est pour faire un povestite internet avec deux pages et qui n'a pas pour vocation
dans le futur à évoluer, clairement peut-être que ça sert à rien de passer sur un métal.
Attends, parce que je n'ai pas donné tout le détail, c'est que…
Ah, le contexte.
Le contexte.
C'est justement une contexte, est-ce qu'il vaut mieux utiliser un métal framework pour
faire une app ou faire From scratch avec VIT ou ou autre comme ça ?
C'est ça ou peut-être la vraie question.
Ok.
C'est mal posé la question en fait.
Ok.
Alors dans ce cas-là, oui je pense que c'est bien plus intéressant de passer par un métal
framework parce qu'il y a beaucoup de choses qui sont déjà codées pour nous comme par
exemple un router où en fait on va rester sur les conventions, on met notre fichier directement
dans le bon dossier et ça va être automatiquement interprété en tant que page avec les petits
hooks qui vont bien, qui vont nous permettre de récupérer le pass, les query parametteurs,
tout ces choses-là.
Et le codé de scratch depuis le départ, j'ai du mal à voir l'intérêt à part ce
flagelé et s'infliger beaucoup de travail pour pas grand-chose.
Donc oui, si c'est de l'applicatif avec plusieurs pages qui a pour vocation en plus d'évoluer
dans le temps, c'est-à-dire qu'on ne connaît pas le scope du projet fini, on sait que
ça va évoluer mais on sait pas dans quelle direction.
Ah oui, je pense qu'on a tout intérêt à utiliser Nuxt si on vient de l'univers vu
ou Next si on vient dans l'univers réacte.
Mais ouais, faut pas s'infliger ça quoi.
Il faut vraiment être méga hardcore.
Donc oui, voilà ma réponse.
Ok, on est d'accord.
Je pense que, mise à part si vraiment tu as une application, alors c'est m'est arrivé,
il n'y a pas longtemps de faire une application sans route, etc.
Donc là, la limite, tu mets du vite un peu de vue, tout ça et ça va vite.
Enfin ça va vite, d'ailleurs.
C'est simple.
Mais c'est vrai que clairement, ça apporte beaucoup plus que...
Enfin, le métaphe mort qui apporte beaucoup de choses en fait.
Déjà, tu as un projet open source qui est supporté par plein de développeurs, il y a
plein de contributeurs, etc.
Donc toi tout seul dans ton coin, tu ne feras jamais aussi bien qu'eux.
Et en plus, le métaphe mort qui évolue.
Donc les mises à jour sur le...
Voilà, dans le temps en fait c'est plus simple, etc.
Enfin maintenant, c'est enfin...
Et tout l'écosystème aussi, en fait chaque métaphe mort qui a développé tout un écosystème
et donc pour profiter de cet écosystème, t'es obligé d'y rentrer.
Après, la vraie question en fait, c'est est-ce que tu veux faire un métaphe mort
qu'en fait, est-ce que ton applicatif, tu vas le mettre sur un métaphe framework
JS ou tu vas utiliser un symphony ou un Rails ou autre chose.
C'est ça la vraie question.
Si t'es obligé d'utiliser un métaphe framework JS ou en tout cas ton applicatif va être
full JS, est-ce que tu vas utiliser un métaphe framework ?
Moi je pense que oui.
Après, si tu veux pas faire de JS et tu veux faire un applicatif paterne MVC, bon peut-être
que t'as pas besoin d'utiliser Next ou Nuxt ou tout ça.
On est clair.
Mais ça, c'est une autre question.
C'est une autre question.
Bon, sinon on avait des retours d'auditeurs, ça se fait plaisir d'avoir un petit peu
d'échange et de retour d'auditeurs qui écoutent soit sur YouTube, soit sur les podcasts.
Et donc on avait un retour de Thibault Barra qui bosse chez MarbleLab.
MarbleLab, c'est une boîte française qui fait pas mal de trucs sur React, de libraire
Open Source, tout ça.
Il nous a parlé de Green Frame, en fait, c'est un projet Open Source qui permet d'essayer
de voir un petit peu l'impact carbone, tout ça, des sites web, des applications, tout
ça.
Donc le projet est Open Source, on peut l'utiliser, on l'installe Sensei et Like, on installe
sur l'ordi et tout ça.
C'est un docker, je ne sais plus exactement.
Et ça te donne l'impact en CO2, tout ça.
Et après, il y a un site où tu peux te brancher.
Là, il y a un service payant, mais tu n'es pas obligé de l'utiliser.
Donc voilà.
Donc j'ai testé, ça marche plutôt pas mal.
En plus, tu peux faire un scénario avec PlayWrite.
Donc tu peux faire un scénario, tu cliques là, tu scroll en bas, machin, tout ça.
J'ai essayé un petit peu.
Il y a un exemple sur la vidéo et c'est plutôt bien fait, ça marche bien.
Et après, je ne sais pas les résultats.
Alors j'ai testé avec trois sites, je n'ai pas eu les mêmes résultats entre Greenframe
et deux autres sites qui donnent des impacts carbone.
Donc bon, ça c'est encore un débat.
Après, est-ce que tous les résultats sont intelligibles pour la personne un peu l'ANDA
ou il faut déjà avoir une certaine culture de consommation et d'impact carbone, tout
ça ? En clair, est-ce que c'est ouvert grand public ou c'est quand même assez expert
sur l'interprétation des résultats ?
Sur l'acier et là, il te donne une ligne.
Donc ça va.
Ça te dit, ça fait 30 g de CO2 sur ce que tu as testé.
Donc c'est hyper simple, une ligne.
Après, sur le dashboard, d'après les copies d'écran, j'ai l'impression que ça donne
plus d'infos.
Mais là, c'est payant, donc je n'ai pas pu tester.
Ok.
Oui, c'est très simple.
C'est très simple à comprendre.
Ça te donne des indicateurs, combien de CO2 par visite, etc.
Donc, de toute façon, il fonctionne tout, c'est à peu près comme ça.
Combien de pollution ça fait par visiteur et puis voilà, c'est un impact.
A tester quoi.
Ça marche.
Ouais, à tester, ça s'installe facilement et puis c'est assez simple à utiliser.
C'est une commande assez facile à utiliser.
Ok.
Voilà pour ça.
Et ensuite, on a un autre contributeur qui suit à l'épisode des animations sur les
animations GES, non ? C'est ça ?
Et sur Youtube, sur Youtube, Malik Aisa qui nous a laissé un commentaire qui avait apprécié
l'épisode et qui nous a parlé de PopMotion.
Moi, je ne connaissais pas perso.
Peut-être que tu connais peut-être.
Pas du tout, non.
Non, non plus.
Voilà, qui a l'air d'être une librairie pour faire des animations GES aussi qui est
assez light et qui a l'air bien faite.
Donc voilà, on voulait en faire profiter à tout le monde PopMotion, on mettra les liens
dans les notes.
Excellent.
Après, on retrouve à peu près les mêmes fondamentaux qu'on évoquait, toujours la
même typologie, la même manière de faire.
Donc, yes.
Excellent.
Oui, c'est cool.
N'hésitez pas à venir commenter.
Envoyez nous même des mails si vous voulez ou des trucs comme ça.
Enfin, voilà, si il y a des choses intéressantes, on en parlera dans les épisodes.
Et même des sujets que vous voulez aborder, pourquoi pas?
Laissez-nous un commentaire et nous, on oriente aussi les épisodes là-dessus.
Carrement, ça fait super plaisir.
Yeah.
On parle de Eleventy qui passe en version 2.
Alors Eleventy, pour ceux qui ne connaissent pas, c'est le générateur de sites statiques
qui est basé en full.js et ça va générer des pages statiques.
Ouais, il fait aussi, alors maintenant, il y a aussi un du SSR qui est possible.
Enfin, il a beaucoup évolué.
OK.
Perso, j'ai jamais utilisé.
J'adore Eleventy.
Je trouve que le projet est génial.
La personne qui fait le projet est super aussi.
Par contre, j'ai jamais utilisé et je sais qu'il y a plein de modules, etc.
Tu peux faire du SSR, tu peux faire des webcomponents.
Il y a vraiment plein de choses.
Et là, il y a la version beta de la 2.0 qui est sortie, c'était fin janvier.
Et voilà, donc plein de nouveautés, donc il y a un post là-dessus.
Il y a plein de vidéos aussi.
Il y a une vidéo, des performances améliorées, le poids plus léger, etc.
Donc, un bon petit framework pour faire des sites statiques.
Mais je crois qu'à la base, le but premier, c'était de faire des sites rapides,
qui ont chargé hyper rapidement, hyper optimisé sur du HTML.
Pour générer...
Ça fait que...
Alors Eleventy ne génère que du HTML à la base.
C'est un générateur JGS qui génère du HTML, un peu comme Hugo, tout ça.
C'est vraiment 100% HTML.
Si tu veux mettre du JS, c'est toi qui doit le mettre.
C'est une action volontaire de ta part.
Yes.
Donc ça fait des sites hyper légers.
Enfin, c'est...
Et dans le même AKB, toujours en version 2,
tu as la version de Astro qui est sortie en version 2.
Là, est-ce qu'on pourrait dire que c'est un peu la même chose ?
C'est un générateur de sites statiques.
Non, ça n'a rien à voir.
Rien à voir ?
Je ne peux pas dire ça.
Bon, je retire immédiatement ce que j'ai dit.
Alors toi, tu l'avais testé Astro lors un live.
Exactement.
Tu avais pensé quoi d'Astro ?
Moi, je trouvais que ce qui était super intéressant,
c'est que pour des personnes qui viennent, justement,
d'un métaphamework de Next ou de Nuxt,
on s'y retrouve tout de suite sur le convention over configuration.
Donc on va dire, l'expérience utilisateur de créer ces composants, de créer ces pages,
c'est hyper fluide, ça marche tout de suite.
C'est hyper facile.
Et à la sortie, ça nous génère des fichiers HTML.
100JS ou avec JS, ça c'est le choix.
Et on va déclarer de manière vraiment explicite,
en disant, je veux que ça soit transporté dans le client,
ou ça je veux que ça soit interprété.
Donc on peut utiliser du JS comme on veut.
Deuxième avantage, c'est qu'il est totalement agnostique,
c'est-à-dire Android,
pardon, Android n'importe quoi, Angular, React, Svelte,
où en fait, on va utiliser la librairie JS que l'on souhaite
pour faire nos propres composants.
Et donc ça, en fait, ça c'était vraiment super agréable.
Et après ils ont le concept justement de Highland,
où en fait ils vont isoler vraiment dans le composant.
Et donc ça c'est intéressant.
Mais qu'est-ce qui amène la version 2 exactement ?
Plein de choses, plein de choses.
Ok.
Déjà il y a beaucoup de choses.
Tu vois, il y a un peu le résumé, la Vite 4, etc.
Donc forcément ils sont passés à Vite 4.
Ils ont amélioré le haut module Redoad au niveau du développement.
Ils ont un nouveau système, enfin un nouveau système.
Ils ont les erreurs en fait qui sont...
Alors j'ai regardé une vidéo ce matin justement.
Il y a un système d'erreur qui est hyper explicite.
Ça te dit exactement où il y a l'erreur, etc.
Il y a un super bien designé et tout, hyper propre.
Mais il faut magnifique.
Mais pour le coup, il faut lire le message d'erreur.
Non mais là tu peux te dire, c'est pour tout l'écran.
Ça tu peux même...
Tu as un lien pour ouvrir dans VS Code, etc.
Enfin c'est vraiment top.
Ça ils ont super bien bossé.
Il y a le Content Collection.
Donc ça c'est un truc qu'on retrouve un peu partout.
D'ailleurs dans l'Eventy, dans X Content, tout ça.
Donc c'est de faire des collections à partir de fichiers Markdown.

Tu es...
On écrit notre...
On écrit tout.
Mais là il y a un système qui est tout automatique.
Ok.
On écrit notre contenu directement sur Markdown.
Et tu as des fonctions qui te permettent de générer des listes, etc.
Ils utilisent Zod pour valider les schémas des Markdown.
Juste ça c'est pas mal du tout.
Zod c'est vraiment pas mal en fait.
Et il y a un nouveau, c'est Libreed rendering.
Voilà.
Donc un peu à l'image de Next, tout ça.
Tu peux re-rendre derrière des pages.
Enfin là, c'est...
Après...
Il y a un peu...

Je crois qu'il va falloir qu'on fasse un épisode sur les modes de rendu.
Parce qu'aujourd'hui ça devient hyper compliqué de comprendre tous ces modes de rendu
entre du statique, du SSR, du hybrid, du serveur component.
Je pense que ça peut être super intéressant de faire un épisode là-dessus.
Mais...
Ouais, ouais, c'est clair.
De toute façon c'est prévu.
Libreed rendering, ce qu'il faut bien comprendre en fait, et c'est expliqué juste là à l'écran,
c'est que sur les sites.
Alors eux, ils sont partis du principe.
Alors sur la version 1, je la fais vite fait, tu pouvais faire du SSR,
mais c'était soit tu faisais du statique, soit tu faisais du SSR.
Je crois que tu pouvais pas choisir l'un ou l'autre, c'était pas mélanger.

Là, c'est résolu.
Aujourd'hui tu peux faire des pages en statique et des pages en SSR.
Et but principal évidemment, c'est de pouvoir générer des sites
avec des gros volumes de pages.
Toujours le même problème.
Et ouais.
Donc en fait, tu vas pouvoir garder ta structure statique sur des pages qui
sont pas rendues, qui ont peu d'évolution et garder de la fresher
quand tu en as besoin avec un rendu serveur, quand là tu as besoin d'avoir
quelque chose de beaucoup plus d'inévitables.
C'est de toute façon, c'est obligatoire.
Et tous, ils sont venus, Gatmy, Next, tout ça.
Tous, tous, tous quoi.
Ils sont objets, ils sont objets parce que quand tu as un site de 20 ou 30 000 pages,
tu peux pas le générer comme ça en déploiement.
Donc il faut ce type de système pour pouvoir générer les pages à la demande.
Yes.
Mais ouais, astro top, très, très, très bien.
Cool. Tu parles de, t'as dit le mot Gatsby, gros changements sur Gatsby.
Ils sont pas Gatsby, en fait, la boîte, la Gatsby Incorporation.
A été racheté par Netlify.
Alors ça, c'était la bombe.
Je crois que personne ne s'y attendait, en fait.
Si en fait, s'il y avait un peu des rumeurs,
je crois qu'il y avait quelques rumeurs, mais c'est sorti comme ça.
BAM, le 1er février, Netlify, racheté Gatsby Inc.
Et à mon avis, on n'a peut-être pas le montant de l'acquisition, là.
J'ai eu une information, on n'a peut-être pas l'information après,
peut-être que si on cherche, on l'aura.
Mais après, ce qui est sûr, c'est que ça va amener beaucoup,
beaucoup de choses chez Netlify.
Et en fait, là, aujourd'hui, Netlify, ils ont fait beaucoup,
beaucoup d'acquisitions sur des boîtes pour agriger de la data.
Et donc, je ne suis pas du tout surpris que Gatsby se fasse
phagocité par Netlify, parce qu'il n'y a pas,
je ne sais pas s'il t'avait déjà joué avec toutes les features
qu'ils ont qui s'appellent The Graph, ou en fait,
sur GraphQL, sur Netlify, tu pouvais agriger GitHub, Spotify, tout ça.
Et donc là, en fait, ça va complètement dans la même lignée
de Gatsby, parce qu'on avait parlé sur un épisode précédent,
précédent, justement, où Gatsby a vachement développé son compte hub.
Voilà là.
Alors, il faut bien préciser, Gatsby, le framework reste open source.
OK. Et ce qu'ils ont acheté, c'est bien la société mère.
C'est donc Gatsby Cloud, le Valala, le système de hub, tout ça, machin.
Et d'ailleurs, ce qui les intéresse beaucoup,
et ce qu'ils expliquent dans l'article,
c'est vraiment Valala qui les intéresse.
Et il m'a semblé entendre, alors j'écoutais un podcast ce week-end,
comme quoi ils allaient abandonner, en fait, leur Graph, justement,
en Netlify au profit de Valala.
OK.
Il me semble, je crois que c'est la fin.
C'est bien, quoi.
Ah, c'est balo quand même, parce que c'était cool,
juste avoir une API Stripe en GraphQL directement, en trois clics.
Ouais, mais ça sera la même chose, en fait.
En fait, Valala, c'est un peu la même chose, quoi.
Tu auras des... c'est un compte hub qui transforme tout en GraphQL, quoi.
OK.
Donc c'est exactement ce qu'ils faisaient, sauf que Gatsby l'avait fait, quoi.
Donc c'était encore en version entreprise.
Le Valala, mais apparemment, ça marche très, très bien.
Donc, et puis ils étaient très... en fait, Gatsby,
le Gatsby Cloud est super bien fait, en fait.
OK.
Il est très adapté à Gatsby, tu vois, le framework,
mais il est hyper performant en train de déploiement, etc.
Donc ils sont très forts là-dessus, donc je pense que ça les a super intéressés.
D'accord.
À suivre, pour l'agrégation de Gatsby, en tout cas, c'est ça.
Après, ce n'est pas étonnant, parce que Gatsby, tu vois, c'était...
Enfin, dès le début, les créateurs avaient dit que,
enfin, le but des créateurs, c'était de revendre un jour ou l'autre.
Donc, tu vois, enfin, tu vas me dire,
toutes les startups veulent faire ça,
ils me sortaient un moment donné, mais là, c'était vraiment clairement annoncé, quoi, tu vois.
Donc, bon.
OK.
Voilà.
Les y sont.
Ça marche.
C'est fait.
Pour ceux qui ont suivi,
il y avait une chaîne qui s'appelle...
C'est OnyPot, un truc comme ça, c'est ça?
Oui, Onylat.
La chaîne YouTube.
Et ils font pas mal de reportages.
Il y avait déjà le reportage sur Evanue, le créateur de Vue.
Et là, ils ont sorti la version pour React,
où ils retracent un peu la jeunesse de React.
Ouais, c'est ça, c'est l'histoire de React, en fait.
Et c'est... Il est très intéressant.
Je recommande même des gens qui font pas du React, tout ça, ou n'importe quoi.
C'est hyper intéressant, parce que ça remonte très, très loin dans l'histoire.
Tu vois, vers 2010, 2011, 2012, tu vois.
Ou vraiment, Facebook se posait des questions, voilà.
C'est au début, je sais pas si tu te souviens,
Facebook était parti sur du...
Acheter la Mail5, ils voulaient pas faire d'applications.
Et donc, ils avaient mis tout le paquet sur les web-app,
en fait, avec JS, etc.
Et donc, ils avaient un frère mort qui avait écrit Réintern, qui s'appelait Bolt.
Enfin, je vais pas vous faire... Je vais pas spoiler le reportage, mais...
Mais non, on va regarder YouTube.
Et donc, c'est hyper intéressant, parce que tu vois...
Super reportage.
Pourquoi ils sont arrivés là, et pourquoi ils ont fait ça, etc.
Non, c'est hyper intéressant. Franchement, c'est chouette à regarder.
Cool.
Et... Allez, on lance le pavé dans la main.
Il y a quelqu'un, Arnaud, le Mercier, qui écrit un blog,
un blog post, quoi.
Et il dit, vas-y, on supprime webpack des projets symphonies.
C'est un peu osé, non ?
Non, j'ai vu pas ces trucs, alors j'ai trouvé ça.
Alors, au début, je me suis dit, mais qu'est-ce qu'il fait ?
Alors, en fait, je me suis dit, ouais, en même temps, il a pas tort, c'est peut-être pas mal.
En fait, il aime pas JS, lui, à la base.
Parce qu'il vient de...
Ouais, il vient du monde PHP, quoi.
Ouais, on va dire ça, et puis ça l'embête d'utiliser des tooling nodes, etc.
Ah, il l'a maintenir et tout ça. Donc il a fait un article là-dessus.
Il explique, en fait, comment concatener les fichiers JS, etc.
CSS, tout avec PHP, en fait.
Donc il montre la méthode avec du symphonie comment gérer CSS et JS
qu'avec du PHP, sans tooling nodes, etc.
Sans webpack et tout. C'est pas mal, c'est intéressant.
Puis voilà, pour ceux qui sont intéressés là-dessus, on mettra le lien.
J'ai trouvé l'idée marrante.
Donc, un tooling pure PHP, on va dire,
et sans JS.
Et surtout sans maintenance, parce qu'on fait que du PHP.
Ça marche. Sans JS fatigue.
Ouais, ouais.
Mais pour ceux qui sont fin NRV en JS et qui veulent rester sur
sur du tooling JS, il y a Volar qui prend en fait un nouveau départ
et une nouvelle extension et qui évolue vers quelque chose de beaucoup plus
agnostique. C'est un peu la tendance, parce que Volar, pour refaire un peu
l'historique, c'est l'extension de vue 3
où en fait dans VS Code, on va avoir une extension qui va nous permettre
de l'auto complétion et des snippets,
la coloration syntaxique, toutes ces choses-là.
Par contre, là, le projet prend une autre dimension.
Ouais, à priori, grosse dimension puisque Volar, en fait, ils ont séparé
le code, en fait. Et il y a un core.
Volar.js, c'est un core en fait du framework qui sera framework agnostique
et donc qui peut être utilisé pour d'autres frameworks comme React, Angular, etc.
Et donc c'est hyper intéressant parce que ça va permettre de faire des outils
de développement à partir de ça.
OK, donc c'est vraiment un outil pour développer des outils pour faire du code.
Ouais, c'est ça. C'est du toolkit framework.
Ouais. C'est ça.
Donc, voilà, il y a des exemples comme tu avais à l'instant.
C'était l'engage tool starter.
Donc c'est vraiment le template pour commencer à construire un langage pour
voilà, faire des frameworks.
Il y a déjà des exemples, je crois, pour Angular, pour Svelte.
Donc, voilà, ça va permettre de développer des outils équivalents à Volar
que vous connaissez sur vue pour d'autres frameworks qui seront dans les codes.
Du tooling de tooling de tooling.
Ouais, tout le monde.
Des frameworks.
Ouais, en même temps, voilà, ça
ça fait aussi partie du jeu.
Yes, on parle de l'out house 10.
Donc l'out house qui est l'extension, on va dire.
Ouais, la fonctionnalité chez Chrome pour venir
au on va dire mesurer la performance et le SEO, l'accessibilité.
Et là, ça passe en version 10.
Version 10, oui, on est là.
Ouais, oui, version 10 avec des nouveautés, tout ça.
Il y a des apparemment et le score, il va changer un petit peu avec cette version.
Je n'ai pas testé encore.
Par contre, quand tu vas dans le système en ligne, en fait, il est encore en version 9, 9.8, je crois.
Donc, on n'a pas encore les résultats équivalents.
Mais ça, c'est pour la ciel, il y a déjà passé la 10.
Et je crois que non, même l'extension, navigateur, je n'ai pas passé la 10.
Donc, l'évolution et le petit changement de calcul.
C'est le petit truc qui fait trembler tout le monde.
Ouais.
Ouais, après, c'est difficile d'avoir 100.
Et mais, enfin, même nous, les premiers, on se prend au jeu d'aller essayer,
d'aller gratter des points.
Après, c'est quand même hyper didactique où il nous explique justement qu'est-ce qui fait que
on a un mauvais score ou en tout cas, qu'est-ce qui nous pénalise.
Et comme il nous donne aussi des pistes pour l'améliorer.
Après, il faut aussi raison garder.
C'est sûr que sur un site où il y a deux composants et trois pas, voilà, trois assètes.
Bon, c'est facile d'avoir 100, quoi.
Par contre, une fois qu'on a un site pensé pour les humains et un peu
avec des animations, tout ça, pour aller chercher des points, ça va être beaucoup plus compliqué.
Et surtout, attention, c'est Lighthouse, tout ça, c'est des justes, des indicateurs.
C'est pour nous, les devs, pour tester et voir le score qu'on a.
Mais Google calcule différemment.
Donc parce que, apparemment, j'ai entendu qu'il y en a qui trichaient, en fait,
pour avoir des 100 et puis sauf que non, ça marche pas comme ça.
C'est plus complexe.
OK. Bon, maintenant, on laisse.
Maintenant, on laisse.
Maintenant, vous savez.
Non, mais c'est pas de toute façon.
C'est pas parce que.
Alors, si t'as déjà 85, 90, 80, même, on va dire, c'est déjà très bien, quoi.
Vous prenez pas la tête à monter à 100.
Et puis, c'est pas parce que vous avez 100 que forcément, le site va être mieux référencé.
Il va avoir un meilleur SEO, tout ça.
C'est pas aussi simple, en fait.
OK.
Et si on s'amusait à faire du node, à avoir un node.js runtime directement dans le.
Dans le browser.
Il y a.
Pour être.
Bah, ça, ça, c'est code sandbox.
Alors, code sandbox, c'est un truc qui permet de coder dans le navigateur et puis de.
Dans BND, de mettre dans les pages du code, en fait, pour en embed.
Et ils ont maintenant, on peut carrément faire du langage serveur.
Dedans.
Et ouais, tu peux faire du node dans ton navigateur.
Donc on peut.
On peut mettre des des mots directement.
Exécutable.
En fait, c'est vraiment un idéux qui est qu'on peut intégrer dans nos pages,
dans nos sites internet.
Et là, on peut directement mettre un snippet.
Node qu'on pourra exécuter.
Ouais, notre autre ou Dino.
Dino.
Ah ouais, OK.
Ah ouais, tout ce qui est langage serveur, vraiment.
Mais c'est eux, ils ont quand.
Comment s'appelle?
Ils ont, ils ont vraiment travaillé là-dessus rapidement, en fait, dès que.
OASM, OASM, ils étaient disponibles en fait.
Ils ont bossé à fond dessus pour faire tourner justement.
Tous les rentables.

Ouais, toutes les rentables.
Mais tu vois, ils ont déjà du langage serveur qui dispose.
Et là, on voit quand même qu'il y a une tendance.
Et moi, je me pose la question si à terme, en fait.
On aura même plus VS Code en applicatif.
En fait, tout sera dans le navigateur et toute la puissance sera déportée.
Parce que là, on voit, OK, c'est sandbox, mais on voit aussi.
Codes sandbox sur ou code space ou des choses comme ça ou chez GitHub.
Ou en fait, c'est des machines, c'est des IDE qui sont complètement déportés sur des serveurs.
Et en fait, même avec un pauvre machine,
en fait, on va se connecter à la machine distante et notre IDE et notre environnement de dev.
En fait, ce sera totalement déporté sur le cloud.
Je ne sais pas si c'est la tendance de demain, mais en tout cas, on voit que technologiquement,
c'est de plus en plus abouti et de plus en plus possible.
Il y a un nouveau framework.
Alors, c'est une infrastructure, c'est une sorte de librairie qui s'appelle LiveBlock,
qui nous permet, en fait, de faire de l'expérience collaborative.
On peut intégrer ça hyper facilement grâce, en fait, à des composants qui sont tout près,
qui vont nous permettre d'insérer dans notre applicatif de la collaboration.
C'est ça ?
Oui, c'est un tout le kit, en fait, qui vient de sortir,
enfin, ils viennent de lancer le truc avec des compagnons et des exemples,
des start-ups, etc.
Qui permettent de faire des, comme on voit à l'écran, des petites flèches comme dans Figma,
tout ça, travailler en même temps, donc collaborer.
Tu peux faire une application de ce que tu veux.
Et avec leur service et leur tout le kit, tu peux faire de la collaboration sur des documents.
Enfin, ils ont plein d'exemples.
OK.
Pas mal.
Et ça, en fait, ça utilise leur système de, c'est quoi, c'est du WebSocket,
mais pour éviter d'avoir une infrastructure à maintenir,
on passe par leur infrastructure, c'est ça ?
Ouais, j'ai pas été à profondir autant que ça, mais c'est ça.
En fait, tu l'intègres.
Au lieu de te coltiner un serveur, une base, machin, tout ça,
pour essayer de faire des trucs collaboratifs, tu utilises leur service.
Et c'est plus simple, tu l'intègres.
Et puis, alors après les exemples, j'avais regardé vite fait les exemples de React,
tout ça, ils sont quand même costauds.
C'est pas trop lignes à intégrer.
Mais bon, quand tu veux faire des trucs collaboratifs, c'est jamais très simple.
Non, rien n'est simple.
Rien de toute façon, dans le code, la personne qui lui dit,
c'est simple, c'est pas vrai.
Yes.
Et pareil, le traitement des images, c'est toujours un problème.
C'est quand même assez fastidieux, même s'il y a aujourd'hui,
il y a plein de services qui nous permettent de
faire ça un peu automatiquement ou en tout cas qui nous facilite la vie.
Néanmoins, connaître les fondamentaux, c'est quand même pas mal.
Et là, il y a un article de Rachel Andrew, qui est en fait une,
il me semble qu'elle est anglaise.
Elle fait partie du corps qui écrit les specs du CSS,
qui a beaucoup œuvré pour l'implémentation des grides en CSS,
qui justement fait un article pour bien nous expliquer,
en fait, c'est une sorte de cours pour bien utiliser les formats, les compressions,
comment on gère les images avec la partie responsive et toutes les performances.
Donc, c'est ça, en fait, et tu as un lien, juste le premier lien,
le lien image, et tu as un cours, en fait.
En fait, c'est un cours web dev, c'est une plateforme qui te donne plein d'infos et des cours.
Il y a plein d'infos sur HTML, CSS, tout ça,
comment bien faire les images, comment charger correctement les pré-lôtes.
En fait, tout ce que tu veux, c'est une ressource vraiment à aller voir.
Il y a vraiment de quoi apprendre.
Et donc, là, ils ont fait une rubrique Learn images,
où il y a, voilà, tu apprends les formats, comment optimiser,
comment les responsives, comment ça marche, enfin, tout quoi,
comment charger plus rapidement, etc.
Les bases, en fait, c'est en fait cette plateforme,
c'est toutes les bases qui peuvent manquer à beaucoup de développeurs,
même des développeurs saignants, même des fois,
on apprend tous des choses dessus et moi aussi.
Et voilà, il ne faut pas hésiter à les faire.
Les fondamentaux, quoi.
Oui, les fondamentaux, comme on dit tout le temps,
les fondamentaux, la base.
Que dit la base ?
La base, c'est ça.
Et si on maîtrise la base, après, c'est tout de suite plus facile.
Et comme on dit toujours, faire de la magie, c'est bien,
mais comprendre la magie, c'est quand même vachement mieux.
Mais c'est clair.
Et ouais.
Yes.
Bon, toi, toi, toi.
On parle de corps, justement, les fondamentaux.
C'est quoi le corps ?
Yes.
Alors, alors, alors, c'est.
C'est un article qui est sorti.
Enfin, c'est un.
Ouais, en fait, c'est le fond.
C'est le créateur de corps.
Yes.
Donc, corps.
Yes, c'est une librairie qui contient plein de polyfil
qui sont utilisés dans énormément de projets de framework,
etc.
Et ça permet, quand ton navigateur prend pas en charge certaines
fonctionnalités, qu'il les prenne en charge.
Voilà.
C'est hyper utilisé.
Et en fait, le créateur du framework, alors, il y a,
il y a, c'est le créateur, mais il y a aussi des contributeurs,
mais c'est lui le plus gros contributeur.
Si tu vas dans les graffes des contributeurs, c'est,
enfin, c'est lui qui bosse, quoi.
En fait, c'est.
Voilà, il n'y a que lui.
C'est son projet, quoi.
C'est son projet.
Et donc, il a fait un très, très long article.
Parce qu'en fait, il est en galère.
Et en fait, voilà, je vous invite à le dire, il est très,
très long.
Mais son histoire, elle est incroyable.
Il a fait de la prison, machin.
Enfin, parce qu'il a eu un accident de voiture.
Il a, voilà, bref, je ne vais pas détailler.
Et il explique qu'en fait, le projet open source qui,
donc, il a créé, il est énormément utilisé.
Il fait voir les, tu vois, les Netflix et compagnie.
Des sociétés.
Netflix, IB, voilà.
Porn hub, Binance, Spotify.
Donc, des petits sites, quoi.
Des petits sites.
Ouais, des sociétés qui engrangent des millions, tu vois.
Et sauf qu'il explique qu'il y a personne qui donne de l'argent,
en fait.
Donc, on en revient toujours au même truc.
C'est qu'un projet open source qui est énormément utilisé
par des grosses sociétés et personne ne va mettre la main au porte-monnaie, en fait.
Donc, ça revient toujours au même truc, quoi.
Il faut soit contribuer au projet open source, soit financer ces gens qui,
voilà, qui corgissent.
C'est hyper important dans la communauté des frameworks, etc.
Ok.
Et pour le coup, en fait, l'article sans grand spoil,
c'est, il fait un appel au don en disant là,
moi j'ai besoin de pouvoir maintenir le projet de manière pérère.
Enfin, que le projet soit viable dans le temps,
il faut qu'il soit des contributeurs, soit de l'argent qui rentre, quoi.
C'est ça ?
Ouais, en fait, il explique version 3, c'est ça, actuellement.
Elle commence à dater un petit peu, que, ben, normalement,
il devrait commencer à faire une prochaine version.
Et que là, il se pose la question, est-ce que je continue ?
Est-ce que je continue pas, quoi ?
Parce que, si il ne peut pas en vivre, en fait,
en plus maintenant, il explique qu'il a une femme et un enfant, enfin, voilà.
C'est...
Voilà.
L'histoire, enfin, l'article est...
Mégalon, quoi.
Ouais.
Après, pour ceux qui nous voient sur la vidéo,
parfait, sur YouTube, mais en fait,
il y a une image qui résume parfaitement bien,
c'est qu'ils ont construit tout un empire,
donc toutes les sociétés qu'on a citées.
Et en fait, il y a une grosse pierre angulaire qui est Corgies,
et si demain, Corgies s'écroule, leur système,
et s'effondre aussi, quoi.
Donc, même en termes de pérennité,
c'est super dangereux pour ces grosses boîtes-là, quoi.
Ouais, en fait, ce dessin, là, c'est...
Il était sorti quand il y avait eu la grosse faille,
je ne sais plus sur quoi.
Tu sais, il y a une faille, je ne sais plus sur quoi, il y a quelques mois.
Et en fait, c'était un framework, c'est quoi, c'était Java.
C'était une libre qui était hyper utilisée sur tous les systèmes,
et qui avait une faille.
Et en fait, ils se sont rendus compte qu'en fait,
c'était un mec qui maintenait ce truc,
et que toutes les sociétés l'utilisaient, en fait.
Tu vois.
Et en fait, ce dessin était sorti,
parce qu'en fait, tu vois,
il y a juste le mec, il est tout en bas, tout petit,
il tient avec son petit morceau.
La pierre angulaire.
Il n'y a pas de finance, en fait.
Il n'y a pas de finance, et voilà.
Yes, compliqué, mais en tout cas, open source,
ce qui nous rappelle, en fait,
que chaque installation d'une dépendance
vient avec son lot de dépendance.
Et donc, il faut prendre en compte ça, quoi.
Quand on est...
C'est ça, et c'est ce qu'il explique aussi,
c'est que son projet, en fait, il est inclus dans des systèmes,
et qu'on ne le voit pas forcément, en fait.
Et que du coup, c'est pour ça
que les gens ne vont pas forcément donner des sous, tout ça.
Donc, voilà.
Juste, soit vous allez contribuer au projet,
soit essayer de financer,
ne serait-ce que des fois 1€ par mois, et c'est comme ça.
Ça suffit pour aider des gens comme ça.
Et...
Et je rebondis.
Vas-y Patrick.
Si vous voulez aider le podcast,
double slash, évidemment,
vous pouvez aussi, donc, sur la page soutenir,
sur le site.
Voilà, on a déjà deux contributeurs,
mais ne serait-ce que 1€ par mois,
ça nous suffit.
Un grand merci à eux pour leur soutien,
ça fait super plaisir, vraiment.
Vraiment.
Super plaisir.
On parle de CSS native,
qui va évoluer,
ou en fait, est-ce qu'on serait pas en train d'assister
à la mort du SAS,
ou du SCSS,
ou des choses comme ça,
avec ces nouvelles specs
qui vont sortir,
on va pouvoir naester le CSS
de manière native.
Ouais, de façon native,
si l'évolue est tant mieux.
Donc, ouais, petit à petit,
on aura peut-être plus besoin
de tous ces outils,
et on pourra écrire de façon native.

Déjà avec les CSS VAR,
c'est déjà énorme.
On a gagné, après, c'est pas pareil,
entre les variables de SAS.
Mais, ouais,
plus il y aura des choses natives,
plus ça sera, on pourra se passer d'outils,
c'est clair.
Donc là, c'est déjà disponible,
mais derrière un flag,
donc ça veut dire que...
Ouais, ça veut dire qu'on...
Sur Chrome, ouais.
Ouais, sur Chrome,
on peut déjà utiliser ça.
Par contre, il faut le flagger,
donc pour l'instant,
c'est pas utilisable par tout le monde,
mais demain, en fait,
à terme, avec la mise à jour automatique
des navigateurs,
on augmentera largement
la possibilité de...
Ouais, ouais.
De faire ça, quoi.
Par contre, moi, je suis anti-nesting,
donc...
Je sais pas, toi.
Je déteste le CSS Nesté,
enfin, bref.
C'est illusif.
Alors, c'est...
C'est un débat.
C'est un débat.
Ouais, c'est ça.
On va pas ouvrir le débat aujourd'hui, en tout cas.
Allez, on reste sur du CSS
et le inside layout module level 3.
Wow, ça, tout de suite,
quand on lit ça,
ça a l'air super compliqué.
Clairement,
ça va consister en quoi ?
Non, là, c'est un draft.
C'est un draft, c'est dans ce draft.
En fait, il y a une propriété
qui s'appelle Leading Trim,
qui permet, en fait...
Alors, j'ai vu passer ça le jour,
et j'ai dit, tiens, c'est génial.
Ça permet de centrer un texte sur un bouton.
Et en fait, souvent, on a le problème.
Voilà.
Souvent, on a le problème,
tu fais un bouton
et tu sais pas pourquoi, en fait,
ton padding est en haut,
il est un peu plus petit que celui du bas
alors que tu as bien mis la même chose,
et tu comprends pas pourquoi,
alors tu essaies de régler la hauteur de l'ing,
ça, machin, mais ça marche pas.
Et donc, là, cette propriété,
va régler le problème, en fait.
Voilà.
C'est encore un draft,
mais...
demain, quand elle sera disponible,
on pourra régler simplement
le texte sur un bouton,
Leading Tree.
Ok.
Bon.
On en reparlera quand ça sortira
de manière...
Ouais, voilà.
De manière...
On va dire, native.
On mettra aussi
les exemples
directement
de ce que c'est.
Ouais, ouais, ouais.
Il y a 2 ou 3 codepans
qui justement utilisent ça
pour montrer un peu
ce que ça permet de faire.
Cette nouvelle propriété en CSS,
Leading Tree.
Ok.
Ouais, donc là, c'est encore un draft.
Et après, une fois que ça sera sorti
de draft, machin publié,
il faut encore clé
navigatorial imprimante,
donc c'est pas pour demain, comme.
Mais...
Bon.
Ça va être plus en plus vite, alors.
On regarde vers le futur, quoi.
On regarde vers le futur.
Ah oui, y a celle-là aussi.
Tiens, je vois que j'avais oublié,
tu vois, t'en as une sous les yeux, là.
On en avait...
Tu vois, on l'avait zappé, celle-là.
Ok.
Alors, c'est pareil.
En fait, tu sais, aujourd'hui,
tu vois, j'avais complètement zappé.
Quand tu fais un display non,
en fait, tu ne peux pas avoir d'animation,
parce que ton truc, il disparait,
en fait.
Et forcément, tu n'as pas...
Tu peux pas faire un Fading,
ou quelque chose comme ça.
Ouais, parce qu'en fait,
il n'est pas visible
sur le navigateur.
Enfin, il est dans le navigateur,
mais il n'est pas visible.
Et bien, justement,
ils sont en train de travailler dessus,
et c'est encore un flag sur Chrome.
Ok.
Et ça devrait marcher, en fait,
un de ces quatre,
ils sont en train de travailler dessus,
pour le rendre.
Et donc là, si tu cliques sur le close,
et bien, normalement,
il devrait disparaître avec une animation.
Ah !
Donc, en fait,
ton display non
et ton display...
ou display block,
en fait,
tu pourras animer
cette propriété là.
Donc, la disparition
de ton élément,
tu pourras l'animer, quoi.
Ok.
Ouais, tu pourras faire
un transition.
Donc, c'est en flag,
et...
ça devient natif, en fait.
Donc, tu pourras faire
une transition sur un display.
Ok.
Donc, ça, c'est ça, voilà.
Ça arrive sur Chrome,
donc, qui sait,
peut-être ça va arriver sur les autres.
Ouais, après,
ça arrive toujours...
ça arrive toujours à un moment donné,
mais il faut attendre, quoi.
Par contre,
il y a un truc qu'on a attendu
depuis très, très, très longtemps.
C'est
les notifications
sur iOS.
Donc, le web push, en fait,
pour les PWA.
Donc, les PWA, les Progressive Web App.
En fait,
un gros argument commercial
qui était contre les PWA,
c'est qu'il disait, oui,
on peut pas faire des notifications.
On peut pas faire des notifications.
Donc, commercialement,
c'était un frein.
Même si,
au plus profond de moi,
je pense que les notifications
sont un frein
à la productivité de ma boule,
et comment...
et comment
perturber ton cerveau
toutes les 10 minutes
avec un...
bon, ça, après,
c'est un autre débat.
Mais aujourd'hui,
dans la dernière beta
de iOS 4,
donc la beta 1,
on voit que
les web push, en fait,
sont arrivés directement
dans les...
pour les PWA
qui sont déjà installés.
Et donc, ça,
c'est...
ça, c'est juste
trop, trop bien, ça, en fait.
Enfin.
Enfin.

C'est le temps qu'on attend.
Ouais, c'est exactement ça.
Pour le coup, en fait,
c'est...
Maximeio...
Maximeio...
Oui, pas mal à dire.
Fiertman,
qui est un argentin
qui est, je pense,
la référence
en termes de PWA.
Deux-bosses.
Ouais, c'est lui.
En fait, on arrive tout de suite
sur son blog
dès qu'on fait des recherches
un peu poussées
sur des imprémentations
de paternes,
comment il a réussi
à implémenter.
Voilà, c'est...
Il a un blog
qui est hyper, hyper bien
documenté.
C'est lui qui fait
les formations
chez Fronten Master
pour, justement,
sur toutes les PWA,
tout ce qui est background,
service et tout ça.
Donc, c'est très, très, très, très, très, très, très,
très intéressant.
Et
il a fait un, justement,

un fil Twitter
qui est assez, assez détaillé,
assez poussé
avec plein de références.
Évidemment, on mettra le lien
dans les...
Ouais.
Mais tu vois,
il y a plein de choses qui arrivent
avec les web push.
Évidemment, c'est ce que
demandent souvent les clients.
Ouais, OK, je fais une PWA,
mais je fais des web push.
Ah bah, c'est pas possible
sur IOS.
Et là, bon, là, c'est le blanc,
en général.
Sinon, après,
tu vois, il y a d'autres trucs,
le badging, je pense que ça,
c'est le...
C'est, par exemple,
comme les emails, tu sais
que t'as un email
ou deux emails.
Un, deux, trois, quatre,
avec un numéro, quoi.
Ouais, voilà.
Je vois PWA,
installation, formes,
sortes, parties, browser.
Ça veut dire que Chrome
sur IOS va peut-être
pouvoir aussi faire
des plus WR en les installant.
Enfin, il y a plein de choses
qui arrivent, d'un coup,
là, c'est...
trop bon.
C'est bien.
C'est trop, trop bien.
Ça va être très, très bon, ça.
Ça, ça va être...
Ouais, ouais.
Non, mais clairement,
ça va être top.
Allez, on parle un petit peu
de...
de design,
parce que...
c'est joli à voir.
Alors,
on va pas rentrer
dans le débat pro
ou contre Tywin,
mais...
cet outil, en fait,
nous permet d'avoir
un dégradé de couleur
hyper...
hyper facile.
Ça s'appelle
Huey Color.
On rentre la couleur
qu'on a choisie
et ça nous fait
un dégradé automatique,
ce qui nous permet, en fait,
d'avoir des nuances
de cette couleur, là.
Plutôt facile
et super agréable, quoi.
Ouais, ouais.
L'intérêt, c'est
quand tu as
ton client en game chart graphique
avec une couleur...
voilà, des couleurs spécifiques,
tu peux
faire la palette, en fait,
utilisable dans Tywin
avec, voilà,
green sang, green 200,
machin ou la...
Et derrière, en fait,
on a...
on a aussi possibilité
de l'exporter directement
avec des variables
SCSS
ou
native CSS
ou même directement
pour importer
sur Figma
avec
un code SVG, quoi.
Donc, c'est pas mal.
C'est pas mal.
Quand tu veux faire des
effets sur les boutons,
tout ça,
opacité, enfin, là,
changer la couleur, tout.
Ça te le fait direct.
T'as toutes les couleurs
de Dispo.
Donc, c'est pratique.
Top.
Cool.
Et bien,
il s'est passé plein de choses.
Patrick, ce mois-ci.
Ouais, il s'en passe tout le temps.
Il s'en passe tout le temps.
Et, ouais,
on note...
Ouais, vas-y, pardon.
Et, en toute façon,
il se passe beaucoup de choses.
Il y a eu aussi la
vue conf,
la Amsterdam,
où ils ont annoncé pas mal de choses.
On fera des retours aussi
là-dessus
sur le prochain épisode
News.
Oui, carrément.
Cool.
Et bien,
écoute,
on a fait le tour
pour aujourd'hui.
On revient
avec plein d'autres épisodes.
Et puis,
un grand merci
à tous ceux
qui sont restés jusqu'au bout
de l'épisode.
Et on vous dit à bientôt.

Ouais, à bientôt.
Ciao.
Ciao, ciao.
Retrouvez double slash
sur le plateforme de podcasts préférés.
Et sur le site internet
du podcast
www.slash-podcast.fr
Sur le site,
vous allez retrouver
tous les liens de l'épisode,
les références
évoquées durant l'émission.