Panda CSS : la nouvelle solution de styling CSS-in-JS

Paul: [00:00:00] et bien salut à tous! Salut Baptiste et de nouveau dans un épisode de Parlons Dev euh bientôt euh un podcast qui ne va plus être seulement tech mais on va parler d'actualité une chaîne d'information faire concurrence à B F M TV car aujourd'hui dans cet épisode principalement on va parler de panda C S S alors pourquoi je parle d'actualité?

Car c'est un sujet qui fait un peu controverse sur la twittosphère je ne sais pas si c'est un terme à la X F. Du coup, sans tph c'est un peu un peu bien vieux ça mais sur

Baptiste Devessier: LinkedIn ouais

Paul: mon dieu euh mais donc il s'agit bien de panda C S S euh dont t'avais parlé donc t trois point G G T O Euh dans une de ces vidéos d'une d'un article qui avait fait enfin du même que tu avais écrit Baptiste, c'est exact et donc c'était une opportunité de visibilité tout à fait mérité que tu as totalement euh bah prise et c'est tout à fait légitime.

Donc je pense qu'on va un peu aborder ce sujet là. Mais euh voilà, c'était c'était pour [00:01:00] introduire PS S S. Que que tu apprécies particulièrement. Mais avant ça, comment vas-tu Baptiste? Quels sont tes petits sujets du moment ou qu'est ce qui qu'est ce qui te fait vibrer?

Baptiste Devessier: Bah écoute, ça va bien. Euh je sais pas si on a trop le droit d'en parler mais j'ai occupé mes derniers jours à monter une vidéo spéciale de Parlons d'Ève qui sortira Je ne sais pas si avant ou après cet épisode là, mais une vidéo un peu concept.

Avec Paul, nous avons retrouvé, euh deux de nos amis développeurs et nous avons essayé de modéliser des des objets réels avec des HT M L. Et du C S S. et avec plus ou moins de réussite pour certains

Paul: oui, surtout surtout, au moins de notre côté. En tout cas ce qui nous concerne ici oui, surtout si tu mets vraiment que le le premier exercice en tout cas enfin bref, c'était vraiment une histoire de tester un peu.

Nos

Baptiste Devessier: invités sont bien meilleurs que nous sur le format qu'on leur a proposé.

Paul: Voilà donc on va a HT M L C S S c'est zéro sur vingt en tout cas me concernant mais euh ça, ça sera l'occasion d'en refaire un et de de prouver que voilà on sait on sait apprendre [00:02:00] aussi

Baptiste Devessier: le parlons d'Eve n'est pas si nul que ça.

Voilà, il

Paul: faudra redorer l'honneur. Quoi ça ça ça on verra quand est-ce que ça sort et sous quel format? Exactement? Mais oui en effet, c'est c'est vrai qu'on attendait ça récemment. C'était bien sympa bah c'est cool

Baptiste Devessier: et nous avons tous les deux utilisé panda S S S d'ailleurs pour faire alors c'est vrai

Paul: euh plus exactement le me concernant de nouveau j'ai jamais réellement euh usé de PS s S en conditions réelles quoi soit d'entreprise soit de projet euh long terme, on va dire euh, dans cet exercice, les seules choses dont j'ai tiré c'était la méthode.

C S S et peut-être deux trois pour faire euh pour prédisposer des des des styles tels que

Baptiste Devessier: et cetera ce qui s'appelle les avec voilà,

Paul: c'est ça qu'est-ce! donc euh, comment tu veux t'organiser mon cher Baptiste tu? On commence directement dans le vif du [00:03:00] sujet à savoir qu'est ce que panda C S S Oui ou tu nous trouves une transition toute amenée euh plus relative à la

Baptiste Devessier: transition Notre chère transition tu l'as dite c'est qu'est ce que PS S S pour ceux qui ne savent pas mais qui nous écoutent quand même.

et Ben PS S s si je peux commencer, c'est une solution de assez récente. C'est du C S S N J S pour appeler ce qu'est le C S S N J S. C'est le fait de styliser donc ces éléments euh directement avec le euh dans des dans des fonctions euh souvent comme il faut appeler des fonctions pour créer des des composants ce genre de choses avec P A S S S.

La base c'est une fonction C S S. euh qui prend un objet comme paramètre. Et dans cet objet on définit toutes les propriétés C S S qu'on veut définir comme je sais pas la la colore du texte et ce et euh l'avantage de cette fonction C S S euh. Le premier en tout cas, c'est que cette [00:04:00] fonction est elle utilise des types forts de ce qui permet donc de ne de n'être sûr que euh enfin qu'uniquement des propriétés connues sont spécifiées, mais surtout que des valeurs euh uniquement valides sont sont précisées pour par exemple la couleur Euh PS S S vient avec une configuration de base avec des couleurs dans le précepte comme tel C S S le fait par exemple quatre cent ces choses ce genre de choses là.

donc la fonction C S s permet d'auto compléter et de s'assurer que seules des couleurs, des valeurs connues sont utilisées. Voilà une une des spécificités et et à savoir que cette

Paul: configuration aussi est dynamique, c'est-à-dire que le typage est aussi euh adaptable à ta configuration interne de PC S S sauf

Baptiste Devessier: erreur et c'est très important à préciser, c'est que effectivement c s s est fait pour être configurable.

et euh la configurable euh n'altère en rien la [00:05:00] Donc si tu viens définir de d'autres couleurs ou même supprimer celle de du prép de base, tu peux tout à fait. Et donc ça c'est l'avantage principal de de prendre la C S S par rapport à d'autres solutions. C S S N S. euh le le deuxième qu'il faut mentionner tout de suite après parce qu'il est vraiment il va de pair avec PS S S et la c'est le fait que ce soit une solution.

Par exemple. C'est une solution de uniquement disponible c'est-à-dire que les styles sont créés dans le navigateur quand le javascript a été chargé et a été exécuté S S s au contraire. utilise un un pour analyser tous les styles de d'une application et déterminer comme le fait S S. Ça analyse le code, ça comprend quel quel style généré et derrière ça génère du C S S.

Qui peut être utilisé dans n'importe quel environnement, que ce soit astro avec du côté [00:06:00] serveur ou même dans une application vite qui fonctionne avec réac que quoi?

Paul: Voilà en fait pour D S S S c'est vraiment une quasiment t'entends quoi par ça? c'est-à-dire que techniquement. Euh quand t'as buildé ton truc ton projet il diagnostique du fait qu'il a été buildé par P D S S S c'est du C s s quoi Après j'imagine qu'il y a quand même un utilitaire c PS s s qui existe.

Euh je ne sais pour quelle raison je ne sais pas si ça te parle, mais c'est

Baptiste Devessier: une effectivement une caractéristique assez importante de prendre S S S. C'est que euh, si on compare avec tel S S. Qui lui pour le coup n'est présent qu'au euh enfin oui C S S euh marche de cette façon là euh le le le analyse l'intégralité de la base et euh essaie de déterminer quelles classes sont utilisées.

Donc pour ça ça fait vraiment un match sur des exacts ça regarde si la classe B G quatre cent est présente ou pas, si elle est présente [00:07:00] ça génère le s s S correspondant. Mais au il y a rien il y a rien parce que c'est que des des classes. et il y a des des cas d'usage euh auxquels on est plus vite confronté que que prévu, comme par exemple le fait de créer des composants avec des variants.

Euh j'entends par là par exemple un composant on veut pouvoir définir un composant de type euh je sais pas avec des couleurs différentes et pour faire ça, le meilleur qui soit pour ne pas avoir à créer soi-même plein de de petits enfin du code pas forcément très maintenables et un peu arbitraire quoi.

C'est chacun qui fait sa propre tambouille à chaque fois dans chaque projet. Ben euh un assez euh assez utilisé c'est le donc l'idée c'est de définir euh tous les types de variants avec euh les styles de base et chaque variant pouvant redéfinir des styles. Par exemple mon alerte, je sais qu'il y aura toujours [00:08:00] du horizontal, du vertical sauf que les couleurs changent selon le variant.

Donc quand c'est du ça va être rouge quand c'est du succès ça va être du vert et le ce principe-là permet de de définir ça d'une meilleure manière et donc pour relier et panda ne le supporte pas parce que ça, ça nécessite du J S. Il y a des qu'on peut mettre en plus, mais c'est pas du à la à l'inverse pendant le S S supporte ça.

Voilà

Paul: d'accord d'accord, mais c'est vrai qu'avec on pourrait entendre certains détracteurs et ce qui est tout à fait légitime, dire que en effet, la l'auto-complétion qu'on peut retrouver chez Panda dans l'I D E enfin tout ce qui va être le confort de développement pour n'importe quel développeur. Euh existe en réalité aussi avec plein d'adon disponible sur la de différents i d e tels que le prêt ou tout ce qui va être autocomplete de classe, voire même [00:09:00] euh de Enfin, tu déclares un peu tes tes classes à la à la volée dans ton dans ton dans ton ou peu importe et tu fais un petit et ça te fait un format et ça te remet tout dans un ordre déterministe, ce qui évite les collisions ou euh des risques à l'inst de si si jamais tu fais des des dynamiques

Baptiste Devessier: travail en équipe si par exemple je fais je reprends le travail dans un composant de quelqu'un et qu'en fait il avait pas le il avait pas les bons outils pour pour ordonner les les classes si moi je l'ai bah ça va le modifier tout à fait et c'est pas terrible tout à fait.

Je préfère dans l A P R avoir juste les changements nécessaires et là c'est c'est des sources de

Paul: conflits. Euh oui ça complète comme plein d'autres existent en réalité hein mais tout comme le le format des des imports et cetera on a toujours tous eu des P R Euh en fait le la personne est passée sur plein de fichiers, elle fait des petits mais en réalité bah elle fait un ou peu importe à un moment donné.

et on se retrouve avec une paire qui a une dizaine de fichiers alors que fondamentalement il n'y en a que trois qui ont qui ont vraiment muté et qui nécessitent une. [00:10:00] Donc ça c'est des problèmes de peu importe, il y a plein de ça peut se situer à plusieurs degrés, mais c'est sûr que c'est une surcharge de ces outils là.

Donc la plus value aussi là dedans. En tout cas dans dans dans un travail d'équipe je trouve avec PS S S. C'est cette centralisation et le fait que bon bah c'est on installe P D S S S Et puis voilà quoi. on est, on est prêt à travailler en équipe là-dessus, si il faut, c'est c'est fait ça, c'est cool quoi.

Ça, ça rentre dans

Baptiste Devessier: l'outil apporte vraiment énormément de de enfin de de sous outils, si je puis dire, c'est que PS S S. C'est vraiment une, une trousse à outils avec plein de choses à l'intérieur pour faire plein de de de choses différentes. Donc il y a cet aspect vraiment juste. Mettre une couleur ou ou un sur un élément il y a aussi la partie qui est implémentée de base et pour ceux qui veulent aller encore plus loin sur CV a c'est ça hein?

CV a ouais absolument l'acronyme Ouais l'acronyme absolument Et euh le CV a est même poussé un peu plus loin avec la notion de [00:11:00] S V A. Euh c'est la différence, c'est que c'est pour représenter plusieurs sous-parties d'un composant euh avec le même CV a et l'intérêt par exemple si je prends un cas pratique, euh si je reprends mon badge dans mon badge, j'ai effectivement le le conteneur, mais j'ai aussi le titre.

J'ai aussi le texte secondaire. Ce genre de chose peut être une icône et euh toutes ces toutes ces choses là, ce sont des sous composants de mon composant. Euh badge alerte et euh l'intérêt des S V A c'est de définir tout ça au même endroit. Parce que tu veux que ces choses-là changent euh en même temps que que tout le reste.

Par exemple la couleur du texte euh principal et la couleur du texte secondaire doivent changer toujours en même temps selon la variance Euh si euh mon mon enfin pardon si mon mon composant alerte, il est en erreur, tous les textes vont changer. donc [00:12:00] l'intérêt du S V A c'est de tout grouper. Euh tout ce qui peut changer euh en même temps au au même endroit, c'est un des c'est l'intérêt même si ça complexifie un peu le code.

Et je sais que certaines personnes ne pas si j'essaie

Paul: de reformuler, ça veut dire en gros tu peux synchroniser plusieurs CV a dans un S V A. C'est ça,

Baptiste Devessier: c'est c'est tout à fait ça. et euh pour en pour montrer un peu plus l'intérêt parce que dit comme ça c'est euh ouais être pas très évident mais l'intérêt c'est que parfois des variants par exemple euh je sais pas la couleur et la taille et bien ces variants peuvent être combinés pour certaines propriétés.

Euh si par exemple je veux que selon la couleur et selon la taille, j'applique un différent et ben je dois faire une combinaison de ces deux variantes. Donc c'est pas seulement les variants couleurs, les variantes taille qui sont gérées séparément. C'est aussi les variants couleur et taille qui sont gérées conjointement et pour faire un genre de de produit cartésien.

[00:13:00] ou euh selon les deux entrées j'ai un résultat différent donc ça le CV a le support et c'est d'autant plus vrai pour les S V A où tu veux que selon des variants euh qui sont qui sont composés et selon les sous parties de ton composant tu veux appliquer des styles différents Donc l'intérêt du du S V A c'est pour pousser ce genre de choses plus loin et ne pas être limité par par l'outil voilà et faire du code enfin l'idéee c'est vraiment tout ce qui peut changer.

en même temps doit être localisé au même endroit. C'est un peu ce principe fondamental

Paul: et le le principe de classe mais aussi euh enfin je veux dire c'est des paradigmes qui ne s'applique pas qu'à PS S S Non

Baptiste Devessier: tout à fait c'est des choses qui ont été créées avant S S S euh CV A c'est même le nom d'une librairie qui est utilisable avec plein de solutions tel S S du C S N.

Ce que je vois donc euh donc voilà, c'est c'est devenu un [00:14:00] utilisé par par pas mal de solution de

Paul: mais donc c'est-à-dire que là euh demain j'ai envie de faire du CV a sur je ne peux pas le faire nativement. Il faudrait que j'ai quand même une intégration un peu ou que j'utilise un outil qui me permette de le faire de manière très idiomatique.

Cependant avec S S S. Du coup, il existe un vraiment un enfin je sais pas un ça s'appelle aussi ça s'appelle

Baptiste Devessier: pas c'est pas un parce que un S S S. c'est une fonction euh qui qui la fonction? C S S. En gros, t'appelles la fonction C S S, mais avec des valeurs par défaut. C'est c'est l'idée du du donc avec S S S.

Il y a plein de pour implémenter des des des enfin des assez communs comme par exemple une grille un composant quoi? Pardon une une grille, une grille S S s. ou euh je sais pas faire un faire d'un élément un un rond ce genre de chose. Euh c'est des qui sont implémentés avec mon S S S Et encore [00:15:00] une fois si vous avez des besoins spécifiques sur votre projet pour le s s S étant configurable permet aussi de créer ses propres qui sont qui sont ensuite disponibles partout dans l'application.

Paul: D'accord Et si tu devais enfin très rapidement ou grossièrement peu importe. mais me donner plus ou moins les les les principaux de de panda C s s qui font ce que tu consommera le plus dans ton application Imaginons voilà du coup les est-ce qu'il existe d'autres d'autres principes vraiment fondamentaux.

Euh à l'outil

Baptiste Devessier: voilà à titre très personnel. Euh j'ai pas utilisé PS S S encore pendant un an. C'est un outil que j'ai utilisé depuis deux mois maintenant je pense Ah oui oui majoritairement on utilise la fonction C S S c'est vraiment la base c'est pour euh à chaque fois qu'on veut quelque chose fonction c S s euh mais euh les je m'en sers aussi pas mal par exemple pour faire du ou du euh ça je m'en sers pas [00:16:00] mal Euh sinon CV a voilà c'est vraiment les trois choses que j'ai utilisé principalement jusque là pour pour mes petits besoins.

et encore le CV a comme j'ai, j'ai pas fait beaucoup de composants réutilisables, c'est surtout pour des composants réutilisables hein le CV A c'est euh je sais pas pour un bouton pour euh pour un badge tout ça qui sont utilisés à plein d'endroits de l'application, ça permet de le faire très correctement et d'avoir du du code qui soit facile à changer et facile à lire.

parce que pour revenir très rapidement au S V A, même si c'est pas la fonctionnalité principale de tel enfin de PS S S. C'est vraiment quelque chose d'un peu niche. La l'intérêt principal du S V A, c'est que quand on définit des composants complexes avec des sous composants, si on veut faire cette idée de, de styles qui sont euh, qui sont définis par rapport à plusieurs variants, à la combinaison de plusieurs variants.

on arrive avec du code compliqué à maintenir parce que c'est dans des composants très qu'on vient faire [00:17:00] ces sur la combinaison des variantes. Là, avec la définition du S B A, on a vraiment une API Euh qui est qui est normalisée pour faire ça? Et c'est facile de comprendre comment les choses sont définies et de l'échanger ensuite.

Voilà, je voulais juste revenir là-dessus, c'est

Paul: important, ça centralise vraiment le style,

Baptiste Devessier: ça centralise le style Sors de ta vue. c'est ça, tu le, tu le sors de ta vue, tu sors tous les styles qui sont susceptibles de changer. Donc c'est pas obligé de de faire un enfin de définir dans dans son S V A l'intégralité de ses styles, Mais c'est euh, c'est toutes les choses principales, on peut les mettre dedans.

Voilà, tout ce qui doit être changé peut facilement l'être grâce au S V A. Mais vraiment je. Je ne veux pas passer plus de temps là-dessus que c'est un d'accord donc c'était un

Paul: peu voilà après le souhait de faire des des très génériques pourtant vers un système bah c'est toujours une bonne chose, mais c'est sûr que lorsqu'on vient à faire [00:18:00] propagation de propriétés un peu alambiquée avec dix mille boulé un qui permettent d'afficher plus ou moins du style dynamique dans une arborescence de bah, ça devient vite infernal alors que si t'as un seul qui est en fait bah quel est l'état stylistique et fonctionnel qui en découle de mon ensemble d'application?

Enfin de mon ensemble de euh c'est tout de suite beaucoup plus déjà compréhensible pour le développeur, mais maintenables parce que on ne fait plus évoluer un élément de style sur une condition mais sur un état global. Euh de de toute l'interface de ce qu'on voit. après euh enfin c'est c'est ça semble logique et ça ne me choque pas venant de toi euh c'est un c'est plus ou moins la même plusvalue côté fonctionnel ce que que je peux retrouver à qui est d'exporter ta logique en dehors de ton et la seule chose que tu viens faire dans ton c'est interagir et transpirer l'état de ta ta machine et exposer bien sûr sont des p aille entre très gros guillemets à savoir bon bah quelles actions je vais pouvoir persévérer là-dedans persévérer non persister plutôt même si persévérer est une bonne chose, tu et je ne sais pas si t'as entendu parler.

Enfin je suis sûr que [00:19:00] oui mais euh de style et qui est aussi sauf erreur euh une solution C I S s N J S qui a été donc je crois, développé par Facebook en tout cas qui fait le style sur Facebook actuellement? Euh d'ailleurs première question j'ai aucune, aucune idée. Je ne sais pas si toi non plus je vais pas te prendre au dépourvu mais sais-tu si c'est aussi compatible ou

Baptiste Devessier: les avantages sont sont les mêmes c'est vraiment de faire du S S N J S qui soit au Euh l'API est très différente de s.

Elle se rapproche énormément de ce qu'on fait avec. Et comme avec Paul, on a tous les deux développé sur une application, dans un cadre pour un projet scolaire. Voilà, on peut en parler et avec la façon dont on définit les styles euh c'est avec une une il y a un qui permet de créer des des avec pareil une une auto complétion pour les noms et pour les pas [00:20:00] pour les valeurs mais pour les noms donc c'est vraiment une fonction qui prend un objet en paramètre, on définit chaque propriété et cetera.

Mais euh l'idée de c'est d'avoir le même genre d'a P I. Euh et donc il y a pas de il y a pas de billet, il y a pas de S B A contrairement à prendre de la S S S, c'est d'avoir quelque chose de très simple et j'ai cru comprendre avec très peu de configuration c'est-à-dire que contrairement à la S S S, c'est pas configurable.

au même point. Voilà, après j'ai d'accord vraiment d'avis Euh donné péjoratif

Paul: ou mélioratif? Non? Bah de toute façon c'est jamais ni blanc ni noir n'est jamais si simple hein c'est vrai, mais d'accord c'était pour pour avoir une idée parce que c'est vrai que c'est les deux choses qui qui font un peu parler Et c'est quand deux deux débutants ou deux ignorants parlent de ces deux sujets.

Euh ce qui coupe assez court en général c'est non mais moi je vais plutôt m'intéresser à ce que fait Facebook parce que c'est plus durable machin ce qui est ce que j'entends surtout dans le monde de l'entreprise. Mais c'est dommage de parfois s'arrêter à des a priori comme ça. Et [00:21:00] à savoir que il y a plein de techno qui sortent de l enfin quasiment toutes, et qui sont ensuite ensuite maintenu et par des des plus grosses boîtes.

Ouais,

Baptiste Devessier: absolument. Et puis euh. si Facebook développe ça en interne, c'est pour aussi ses propres besoins. Après sait très bien qui qui qui est l source mais c'est comme réact c'était fait pour les besoins euh internes de Facebook. Pas besoin d'utiliser pour chaque projet sur lequel on bosse quoi c'est pour faire une

Paul: non là c'est sûr ça encore c'est un autre débat mais je suis d'accord avec

Baptiste Devessier: toi.

Moi je préfère sortir le je trouve très adapté. Ouais ma

Paul: foi tu me diras ouais

Baptiste Devessier: pourquoi pas? Il faut juste avoir deux devops pour le maintenir mais le mec

Paul: et euh ça c'est un autre sujet aussi. Moi je réfléchis toujours dès que je vois une techno un peu comme ça. Euh, c'est d'une certaine manière une certaine forme de crédibilité.

Mais concrètement, ces nouvelles technos là, c'est super pour aborder les nouveaux [00:22:00] projets, commencer de nouvelles choses et cetera c'est le moment de se faire plaisir et cetera. Et moi je me demande si toi je sais pas, tu conseillerais l'idée c'est pas de conseiller mais comment tu imaginerais une migration?

Oui euh alors sans trop non plus euh anticiper je veux peu importe si ça vient de si ça vient d'une solution native de d'un sas ou peu importe um vers une utilisation de C S S est-ce que c'est quelque chose que tu conçois est-ce, que tu vois vraiment une plus value dans l'immédiat de de ou plutôt tu dirais non non mais c'est vraiment un truc qu'il faut faire de

Baptiste Devessier: Concernant ça, je pense que il est possible de de faire n'importe quelle migration après le le coût est toujours calculé et euh voilà, ça dépend vraiment d'où on part quoi si?

Euh si j'avais une application avec t C S S. Je suis pas sûr que je la migre sur panda parce que les avantages sont quand même similaires. J'ai pas de j'ai pas un avantage de performance par exemple. à partir sur du S S s quoi si? Euh par contre j'étais sur du [00:23:00] avec une un très gros site et pas mal de pages qui mettent du temps à à charger parce que j'ai beaucoup de styles qui sont en javascript dans le navigateur.

Euh je peux comprendre que l'avantage de passer sur PS S S serait plus présent. Voilà. Mais euh, si je j'ai pas vraiment d'expérience dans la migration du S S S euh, mais par contre un outil que j'ai utilisé puisque je suis l'euro détenteur de le le kid composant de la boîte qui développe S S et j'utilise pour chacun de mes projets avec S S.

J'ai ça fait des années que je ne développe qu'avec and S S euh pardon pour le lapsus qu'avec pour euh pour mes projets euh perso et même pour mes pour mes clients. Mais euh donc j'utilise pour la grande majorité de mes projets et euh Alexandre Stamer qui est le cocréateur de PS S S. a créer des outils pour passer par exemple de vers [00:24:00] panda de vers panda il a crée des euh et sûrement même des sûrement utilisables aussi en pour faire des migrations à plus haute échelle.

Ah d'accord des des outils qui euh qui prennent donc du qui transposent ça vers du P du panda après la fiabilité par exemple, tu pla-, tu prends ton code J S X avec des classes et ça te génère la même chose avec du panda. Donc à la place du qui est un t'as la fonction

Paul: quoi d'accord après du coup tu perds le la granularité de la configuration globale.

Enfin ce que je veux dire c'est que t'as si t'as si t'as une Enfin si t'as vraiment une une, une intégration au de par ta configuration, tu peux pas le enfin n'importe quel outil que tu ne pourra pas l'anticiper. C'est sauf si il accepte la la conf Techniquement, ça ça dépend du niveau de gra du truc mais ça me paraît c'est la question.

Mais

Baptiste Devessier: ouais d'accord, mais euh dans l'idée, je pense que ta configuration tu [00:25:00] peux la mi vers du panda sans trop de soucis parce que Les deux outils sont configurables, contrairement à du Styx. L'idée, c'est que tu puisses configurer toutes tes couleurs, tous tes tous les de par exemple je ne sais pas du P X quatre P X six derrière si tu veux utiliser la même valeur avec PS S S qui est pas forcément vrai.

C'est à dire que avec PS S S. On peut aussi mettre un p X deux points entre guillemets quatre mais je je comme ça, je ne saurai pas dire si c'est exactement la même valeur que que que. Mais si jamais vous avez besoin de ce genre de chose euh pour de p c'est c'est tout à fait possible. La configuration est là pour ça.

voilà d'accord

Paul: Donc ça, il y a quand même des outils de de transpiration

Baptiste Devessier: qui existent. Oui après la fiabilité toujours Et oui, mais c'est comme tout. Mais c'est parce que ça pour pour parler d'un cas précis euh que j'ai eu et que par exemple il y a des choses qui n'existent pas avec PS S S euh twin par exemple, à [00:26:00] cette notion de ring pour mettre un genre de autour de ces éléments.

Sauf que ça n'utilise pas la propriété, ça utilise une Je crois que ça utilise un le pseudo élément pour positionner. Euh alors là, c'est à confirmer vraiment je je peux dire n'importe quoi, mais l'idée c'est que ça n'utilise pas. Ça utilise une autre propriété pour définir le R autour d'un bouton. S S S n'a pas ce support natif ça supporte.

Euh après je pense que ce serait quelque chose à coder. Soi-même euh dans la configuration ou ailleurs pour ajouter cette notion S S S mais la migration vers du panda ne prend pas ça en compte à l'heure actuelle. Euh donc je dois faire les changements à la main. J'ai pas trop de solutions parfaite à recommander mais

Paul: mais t'as pas de transpiration vers vers

Baptiste Devessier: euh pour certains éléments qui sont disponibles avec mais pas avec

Paul: [00:27:00] panda ça oui d'accord c'est ça?

Non mais je croyais que il avait vraiment fait une copie de de la librairie Non non non c'est

Baptiste Devessier: un panda, non? C'est c'est moi mon mon ça c'est j'ai dès qu'on que je vais utiliser dans mon code. Euh je veux migrer ça vers du panda donc je le passe dans dans l'outil plus d'accord

Paul: d'accord. mais donc t'en as eu d'utiliser et c'est quelque chose que tu que tu utilises pour quand même accélérer tes devs entre

Baptiste Devessier: guillemets?

Ah oui oui je même si c'est pas parfait comme résultat c'est comme J PT je préfère avoir quelque chose qui me qui me fait la base même si c'est pas parfait et que que je termine quoi clairement

Paul: di brut? d'accord et je ne sais pas si tu veux revenir un peu aussi sur du coup la vidéo de Théo Ouais sur les différents points qui ont pu être évoqués pour ceux qui l'ont qui n'ont pas vu oui il

Baptiste Devessier: y en a.

Euh, je ne sais pas si tout le monde connaît Théo, même si c'est un il est pas mal présent sur un tech. Enfin pardon sur la scène Twitter et sur YouTube et YouTube Euh [00:28:00] même en réalité oui, c'est des des énormes il y a un peu partout. Mais euh c'est c'est un qui parle beaucoup de qui fait pas mal, de, de d'articles ou de projets qui sortent.

Et en l'occurrence j'ai sorti euh une sur PS s où j'expliquais ce que j'ai trouvé comme avantage à S S S. C'est que je comparais avec Twin. Euh mon article a eu plus de succès que prévu. J'ai été notamment dans la de Sébastien leur biais. Euh assez connu dans le monde de et de et pas à partir de ça. Euh Théo a remarqué ma mon article et en a fait une vidéo de réaction Euh donc euh il a tourné euh il a tourné ça il l'a sorti J'ai fait ma vidéo de réaction puisque dans sa vidéo il m'incitait à faire une à répondre en fait à ces ces éléments.

donc euh j'ai j'ai enregistré ma [00:29:00] réponse. On sélectionne quelques points de critiques parce que Théo était un peu critique envers S S S. Il n était pas convaincu par partout, il préférait aussi un petit peu l'a P de style plus simple et euh plus restreinte. Ouais que j'ai comme il a fait pas mal de critiques qui sont souvent faites par des gens qui découvrent de S S S.

j'ai essayé de faire d'une pierre deux coups euh, et donc de faire un peu une vidéo de réponse à ceux qui testent pour la S S S ou qui lisent la documentation et qui ne sont pas convaincus par par tout voilà. la vidéo a été pas mal, pas mal vue. Bon par rapport à à mes à mes stats habituels, moi je suis à l'heure actuelle à à mille sept cents vues et euh, soit un peu plus de soixante dix likes c'est pas bravo félicitations, je ne suis pas ouais non c'est stylé hein je suis pas mais voilà voilà M

Paul: service de la teque En tout cas ça c'est sûr.

Tu es une bête, une [00:30:00] bête, une

Baptiste Devessier: bête de tech, la belle et la bête, la belle étant princesses. Ah tu tu

Paul: es la belle alors? Ou alors je sais pas ou je ne sais pas où si tu t'es où. Je ne sais pas s'il y a un antagoniste dans la belle et la bête, mais

Baptiste Devessier: je m'en souviens plus

Paul: mais rien ne ne ne t'empêchera de de pratiquer du P D S S S.

Baptiste Devessier: Je n'en ai aucun doute. Et toi peut-être Paul Dino un peu Quel est ton avis sur S S S de ce que tu as pu en voir? Ouais alors

Paul: mon avis euh est que bah tout ce qui est strictement typé, bah ça me plaît par nature en tout cas. très beau. Enfin c'est un avis, c'est c'est plus sur le temps de la rigolade que je dis ça.

J'ai pas d'avis concret quant à l'utilisation euh de nouveau en temps réel sur un vrai projet de PS S S Euh c'est c'est pas quelque chose qui me choque en tout cas c'est des trucs que que j'ai enfin pas que j'avais déjà vu mais euh c'est vrai que j'avais fait un peu de et cetera et je préfère toujours en réalité euh je le C s s N G S m'a toujours plus attiré que [00:31:00] que l'inverse.

même si Halloween

Baptiste Devessier: le J S S S je dis ça non t'as dit l'inverse du C S S N J S C'est quoi l'inverse du C S S I J S

Paul: Ah oui d'accord non non mais du coup c'est le on va dire

Baptiste Devessier: enfin en tout cas. Et qu'est ce que tu penses du fait d'écrire son C S S dans un fichier S S S qui est quand même la base? Ça, ça fait bien

Paul: longtemps que ça ne m'est pas arrivé.

Mais euh sache que ça arrive toujours après. Euh techniquement euh si tu travailles dans une une bien ficelée avec Après tout dépend de sur quel projet t'arrives ou s'il est bordé si c'est du ou pas. Mais euh d'écrire du du C S S. Vraiment très granulaire et très spécifique à chaque avec beaucoup de duplication de style et cetera c'est c'est c'est bon quoi ça va cinq minutes donc euh c'est ce qui arrive souvent lorsque tu fais du C S S dans dans des fichiers séparés ou lorsque tu arrives dans un projet qui a son fichier.

Euh euh HT m l enfin par exemple si je parle d'angler son son S S s sont d'autres S S S sans d'autres HT m l [00:32:00] et sans d'autres T S ou javascript, ça dépend de si t'as un projet typé ou pas. C'est pas des choses qui moi m'attirent en tout cas ça c'est sûr. donc euh, les outils comme S S S ou d'autres hein, il y en a plein enfin aussi.

Euh je parle d'un ancien temps peut-être mais en tout cas c'est des trucs qui m'attirent beaucoup plus et P D A S S S en fait partie et je je je ferai vraiment la main sur PS S S. Sans aucun doute un de ces quatre, mais j'ai pas d'avis en tout cas de toute façon en règle générale je ne je suis, je ne tranche jamais.

Je suis un peu la Suisse sur ce genre de sujet de ça, ça c'est c'est c'est idiot de dire non ou oui. Euh il y a des points forts, il y a des points faibles aussi. En tout cas il y a des détracteurs et il faut toujours savoir écouter les avis négatifs comme positif et savoir faire son choix en fonction quoi C'est il y a tout un chacun

Baptiste Devessier: Bah écoutez ceux qui nous ont écouté pendant cette cet épisode, on les invite à tester PS s S d'eux même même si euh aller voir

Paul: ta vidéo, réponse de de à Théo mais aussi d'aller voir la vidéo de Théo Si vous ne l'avez [00:33:00] pas fait, c'est intéressant.

Baptiste Devessier: C'est toujours intéressant d'entendre quelqu'un critiquer euh un outil tendance d'essayer de mettre ça en perspective quoi. Mais en tout cas carrément je pars avec un a priori positif de votre part si jamais testé pour la S S S. C'est un bon outil. Euh on ne l'a pas dit encore mais il est développé par la de chakra euh qui ont développé skra qui ont aussi développé J S Arc et PS S S euh est en fait euh Ah destiné à devenir la solution de des composants qui pour l'instant utilisent Euh C S S si je ne dis pas de bêtises Donc l'idée c'est à terme de remplacer ça par une solution pour améliorer les performances voilà

Paul: et aussi pour pouvoir les rendre plus facilement dans les et cetera.

Baptiste Devessier: Absolument oui c'est que ouais le gros intérêt de ton a S S S c'est que c'est euh c'est du javascript, ça peut être utilisé euh [00:34:00] aussi bien côté côté avec du huit et du réact, ça peut aussi utiliser côté avec du astro ou euh en mode hybride avec du du ça ça fonctionne, ça fonctionne bien, voilà et par défaut carrément

Paul: bah écoute, je te remercie Baptiste pour cette super présentation de cet outil qui te fait rougir absolument.

Baptiste Devessier: Et euh et puis c'est top.

Paul: Merci à vous de nous avoir écouté. euh on se retrouve une prochaine fois pour d'autres sujets. Euh qui nous qui nous font euh qui nous passionnent ou qui nous intéressent dans

Baptiste Devessier: dans l'actualité quoi. Merci à tous. Merci à toi Paul à bientôt Allez tiao!