Bienvenue sur Double Slash, le podcast dédié aux outils et aux techniques pour le développement
web.
Bonjour à tous et à toutes, bienvenue sur ce nouvel épisode de Double Slash, épisode
numéro 60, si je me trompe pas.
Comment ça va Alex ? C'est la forme ?
Ouais, carrément.
Écoute, super content de revenir en plus pour un épisode qu'on a déjà fait et donc
là on le refait mais d'une certaine manière donc je suis super content de parler de Tailwind
CSS.
Ouais, épisode spécial Tailwind comme tu dis.
Donc quoi on avait fait l'épisode, c'était le numéro 7 donc ça date un petit peu,
vu qu'on est au 71 là aujourd'hui.
On a multiplié par 10 le nombre d'épisodes.
Donc c'était en 2020, c'était un des premiers épisodes, on était encore peut-être confinés
et je pense que je sais pas ou peut-être que je suis rentré après deux confinés.
Ouais, ouais je pense.
Et donc pour rappel, bon faut l'écouter parce que c'est toujours intéressant d'écouter
un petit peu un épisode qui a quand même trois ans.
À l'époque moi je connaissais pas du tout Tailwind, toi tu le connaissais et je l'utilisais,
tu m'as présenté, expliquais comment ça fonctionnait.
Donc depuis Tailwind a fait quand même un petit peu accrosé ce mouvement, il a évolué
aussi beaucoup, il a inspiré d'autres librairies, enfin voilà c'est vraiment, on peut dire quand
même que Tailwind a un petit peu rémolytionné le front.
On y pose CSS, ça c'est clair.
Après voilà on va discuter aussi de ceux qui ne sont pas trop fans, tout ça, pourquoi.
Ah ouais, de toute façon c'est un sujet qui est quand même assez clivant chez les
designers, enfin chez les gars qui font du front sur l'intégration.
Il y a des pros, il y a des contres.
Après on est comme souvent dans le dev, on est proche du dogme et de la religion.
Après ce qui semble intéressant néanmoins c'est quand même de savoir comment ça
fonctionne, qu'il est le paradigme de Tailwind CSS et de bien comprendre l'étonnant les
aboutissants et puis après on teste, on a fait son choix, on aime ou on n'aime pas,
mais au moins on sait de quoi on parle, on sait comment ça fonctionne, ça me parait important.
Ouais carrément. Alors je sais pas comment on pourrait appeler ce type d'épisode,
c'est un peu la première fois qu'on fait ça, un épisode où on repart d'un sujet qu'on avait
déjà évoqué, on peut les nommer, les remixes ou un truc comme ça, je sais pas.
Ouais on pourrait après on va réaborder des concepts qu'on a déjà évoqués,
riches aussi de toute l'expérience qu'on a depuis avec. Tu vois on a passé beaucoup plus de projets,
on a fait beaucoup plus de projets sur Tailwind, aussi bien toi que moi et donc on pourrait
aussi mettre en exergue ce qu'on utilise, ce qu'on n'utilise pas, ce qui a beaucoup évolué et ce
qui nous saoule. A l'imiste ce que je te propose on pourrait peut-être déjà commencer par définir
le vrai concept de Tailwind en fait, c'est quoi, c'est quoi son approche ?
Tu veux te coller ou ? Ah je veux bien m'y coller. Ok, aucun problème. En fait le concept de Tailwind
c'est d'avoir une approche utilitaire des classes. En fait il part du principe que quand on va faire
une carte, un poste ou n'importe quel élément, un composant HTML, en fait on va utiliser quasiment
tout le temps les mêmes propriétés. Je pense par exemple à Display Flex, Margin Top, Padding Bottom
et l'idée au moment où on va construire notre site et on va exporter notre site, en fait on va
avoir la propriété, on va avoir écrit dans notre code peut-être 40 fois, 50 fois le mot display
de point flex. Donc ils partent du principe qui disent bah en fait on va supprimer tout ça, on va
supprimer et on va condenser le CSS et on va lui donner une classe qu'on va appeler flex et qui va
référer à la valeur display flex. Ce qui fait que quand on va dans notre HTML on va taper flex, ça
va appeler la valeur display flex. Ce qui fait que premier bénéfice en fait on va supprimer tout le
code qui est appelé 2, 3, 4, 5 fois mais surtout on ne va plus taper de CSS, on ne va plus écrire du
tout du CSS en fait tout le design et on va dire la structuration, la forme de la page va être
faite directement depuis les classes et donc tout va être dans le HTML et c'est ce qui lui vaut en
fait plein de critiques. En gros au lieu d'écrire pour un élément un conteneur on va écrire
display flex, on met tout simplement dans la classe le mot-clé flex qui applique display flex
directement dessus donc c'est quelque chose qui est déjà créé au niveau de Théo-Inc CSS,
c'est qu'on n'a pas à faire, nous on peut utiliser déjà toutes ces utility classes qui sont
existantes et voilà, flex call, il y a plein de mots-clés qui sont relativement facile à apprendre
parce que c'est très proche de la propriété CSS en fait donc elles sont faciles à retenir.
Ouais c'est assez comme intuitif en fait, voilà flex ça va renvoyer display flex, si on veut faire
un texte write et bah ça va renvoyer text write, enfin il y a plein de choses comme ça qui sont
assez intuitifs et après on va mettre un bg tirer red 500, ça va dire on va appliquer la
background couleur red avec un degré de couleur on va aborder le point des couleurs tout à l'heure
par contre il y a vraiment toutes les grandes familles, c'est à dire toute la typographie qui
va être, qui va être à voir ces classes spécifiques, on va avoir les fonds, les tailles, les boxes,
on va avoir tout ce qui est background, on va avoir toutes les gradients de couleur
bien sûr les flex, les grides et on va aussi avoir tous les pseudo-éléments,
et donc c'est en ça où ça va être intéressant parce qu'on peut vite être limité si on
utilise pas, enfin si on a un code simple on va dire en CSS ça peut largement suffire par
contre très vite on va dire ah bah moi j'ai des pseudo-éléments, j'ai des over,
j'ai des médias query tout ça et en fait ils ont vraiment pensé de la librairie en fait qui nous
permet en fait d'utiliser des pseudo, tous les pseudo-éléments en fait sont disponibles aussi
via en fait le pseudo-éléments de point la valeur qu'on va lui attribuer.
Ça c'est puissant parce que ça fait gagner beaucoup de temps en fait tu en termes d'écriture
en fait tu fais un lafter de point, before de point, après pour les états c'est over,
focus etc donc c'est assez simple, moi ce que je trouve hyper puissant surtout qui nous fait
énormément gagner de temps c'est les classes pour les query, les médias query, les médias query,
voilà les SM, le MD, le LG, XL etc en fonction de la taille de l'écran que l'on peut customiser
mais on en reparlera après, ça c'est un gain de temps énorme par rapport à écrire médias query,
max-weeds etc machin donc ça c'est voilà, à ce niveau là c'est vraiment en fait c'est clairement
le disait taille 8 css ça ne dispense pas de connaître le fonctionnement du css en fait
il faut quand même comprendre comment ça fonctionne, des display flex, flex call etc
exactement moi je pense que même tu ne peux pas faire, tu peux pas faire l'économie d'avoir un
minimum de compétences en css, de savoir comment ça fonctionne parce qu'il y a des développeurs
qui sont css, enfin anti css ils veulent même pas en entendre parler, ok à vrai voilà c'est pas
grave c'est pas gênant néanmoins c'est pas parce qu'on va mettre taille 1 css que tout de suite ça
va être, ça va magique, ça va devenir hyper simple non ils font quand même comprendre qu'est ce
que taille win va faire derrière le capot et il y a cette oui il y a cet apprentissage de toutes
les classes par contre ouais par exemple les médias query ou les over ou tous les pseudo-éléments
c'est d'une fluidité super facile et en termes de gain de productivité c'est juste
hallucinant par contre c'est vrai que ça met une petite barrière à l'entrée de bien connaître
ses classes je pense par exemple sur un display grid ou là ça peut être un petit peu plus complexe
déjà il faut déjà être bien familiarisé avec le concept de grid parce que faire des grids en
taille win dès le départ ouais c'est un petit peu complexe quoi il faut vraiment bien comprendre
le fonctionnement mais mais ça se fait en fait ça se fait un autre point qui est important et qui
a été mis en avant en fait par le concepteur de taille win toute l'équipe vraiment la personne
maître c'est adam watan qui est vraiment le pionnier c'est lui qui a lancé ça en fait lui ce
qui voulait aussi c'était à avoir une sorte de consistance en fait on peut très vite en fait
quand on a une grande liberté sur le css maître peut-être un endroit du 17 17 pixels à un autre
endroit du 16 à un autre endroit c'est du 18 et donc en fait ça vient on peut très vite se retrouver
avec plein de tailles différentes et on perd un petit peu en de manière de consistance en fait
dans le dans le code et lui en fait il présente tellouin vraiment comme une sorte d'api pour le
design en fait c'est une sorte de c'est c'est toujours strict et ils ont fait un choix sur les
tailles par exemple de prendre des dégradés et des multiples de quatre à savoir que quatre en
fait c'est égal à 1 e m et donc si on déclare si la base en fait dans notre fichier et par défaut
il est de 16 pixels donc notre taille e m notre référence de base c'est 16 pixels donc 1 e m
correspondra à 16 pixels et et après en fait on va avoir toutes les subdivisions 2 1 2 3 4 4
est égal à 1 m et donc en fait ça nous donne une granularité et surtout si on vient changer pour
x raison on passe la référence en 18 parce qu'on fait le choix on n'est pas obligé de tout recoder
on n'est pas obligé de tout reprendre et en fait tout se met à jour automatiquement donc on a une
consistance à travers du code et surtout sur la aussi sur l'évolution ça reste toujours
consistant donc pour un dev en fait bah c'est vachement plus facile de maintenir son css parce
que c'est un c'est un problème alors si c'est bien fait les prôves on dit oui mais on n'a pas besoin
si on fait ça bien c'est propre oui oui mais c'est pas toujours le cas c'est pas toujours bien fait
parce que c'est comme c'est difficile de d'entretenir correctement son css en tout cas
télouin est plus facile à entretenir après alors si je peux me permettre je te corrige un poil
oui corrige moi c'est pas des e m c'est des r m pardon tu fais bien de corriger c'est des rem
voilà la différence c'est que c'est le e m prend il y a un héritage du parent en fait alors que le
r m c'est le route m en fait qui donc la référence à mettre voilà part toujours de cesse pixel
qui le réglage par défaut des broseurs et ouais tu parles de pixels aussi donc pareil on met pas
de pixels dans un css à moins que ça soit un truc intégré dans un widget etc mais la plupart du
temps utiliser les r m ou les e m pour avoir pour pas bloquer les zooms en fait tout simplement parce
qu'il y a des gens qui ne voient pas bien en fait qu'ils zooms leur écran donc c'est pour ça
que sont passés parti sur les r m ouais est ce que tu es ce qu'utilisais c'est intéressant parce
qu'en fait ça a voulu une convention en fait c'est une convention au niveau du css les classes on
les connaît les change pas je pense que taïouine depuis la version 1 n'a quasiment pas changé il
rajoute des classes parce que évidemment css s'évolue tant mieux et c'est vrai que peut-être dans la
version 5 6 7 j'en sais rien taïouine il y aura toujours ces mêmes classes en fait donc tu frais
les mises à jour ça ne changera rien en fait en niveau de ton ton code alors moi j'avais déjà
une critique enfin j'ai une personne peut-être tu la connais d'ailleurs c'est pas grave
elle a le droit tu vas se décider de comprendre des qui je parle qui critiquait et c'est à juste
titre parce que les intégrateurs sont assez les puristes intégrateurs aimes bien séparer le html
du css on parle toujours de style séparé du contenu donc moi j'ai une réponse déjà pour ça alors
c'est quoi sa question et c'est quoi son problème avec taïouine son problème c'est que taïouine
dans fait tu et c'est pas que elle mais je pense à pas mal de gens qui qui a acquis sa pose problème
c'est d'avoir en fait ce css qui est intégré dans le html donc du coup la plupart du temps tu peux
te passer d'avoir des feuilles de style css tu vraiment joues avec les classes et donc tu as
cette sorte de mélange entre le style et le html contenu style ce qui est ce qui tu veux les
conventions des intégrateurs de base qui depuis le début du web c'est on ne mélange pas le style
avec le contenu c'est pour ça qu'on a créé css etc pour séparer les deux il y a même des mecs
qui ont fait encore pire ils ont fait du css in js css aussi donc mettre une amende à telle wing
pour ça je trouve ça un petit peu dur après la critique qu'on dit souvent c'est oui on n'arrive
pas à lire effectivement c'est vrai que quand tu rajoutes plein d'éléments tu vois le over sur le
focus sur le md voilà t'as tout une application de classe sur des médias query ça peut faire
parfois des classes à rallonge ça c'est possible ça c'est possible il faut pas le nier néanmoins si
vraiment ça te dérange et ça te pollue ton html tu peux en fait telle wing a une fonctionnalité
pour ça tu peux en fait déporter toutes tes classes utilitaires dans une classe que toi tu as
nommé par exemple tu l'appelles post title post tiré title et dans cette classe que tu viens
déclarer donc point post tiré title tu ouvres tes tes braquettes et là en fait tu viens utiliser un
mot qui s'appelle apply et en fait tu vas hériter de toutes les classes utilitaires de taïouine ce
qui fait que tu peux si tu veux vraiment dissocier ton html du css si vraiment tu veux le faire tu peux
le faire après c'est une critique que j'ai déjà entendu il ya une réalité aussi c'est que quand
tu utilises des composants alors personnellement je la majorité de mes applications je fais plus
de l'applicatif et je suis souvent sur des frameworks js et donc j'ai une majorité de composants et
donc à l'intérieur de ce composant j'ai vite de faire des composants avec 300 400 lignes donc la
taille de de ces classes ne sont pas non plus j'arrive pas à avoir des lignes monstrueuses donc
en termes de lecture ça me ça me va ça me va et ça m'arrive de faire des apply mais j'ai jamais
été vraiment bloqué par ça ouais alors moi je pense déjà c'est que parce que j'avais réfléchi à
cette question tu en avais discuté ouais pour moi c'est déjà en fait en fait c'est juste
c'est mental en fait parce que finalement si tu réfléchis bien le contenu est déjà séparé
du style en fait puisqu'en fait on applique des classes donc qui est la même chose que si
il y a des fichiers css séparé donc pour moi c'est pas vraiment mélangé après c'est ce type de
mélange en fait entre le html et le css avec les classes c'est propre aussi aux applications comme
tu dis il y a des compagnons donc tout est mélangé des compagnons d'éretonnomes etc et surtout
comme tu dis le apply voilà si vraiment tu as un problème avec ça tu peux le faire moi j'utilise
beaucoup en fait j'utilise beaucoup de apply et tu sais pourquoi pour des éléments en fait quand
tu utilises des cms ou des frameworks ou n'importe quoi ou tu n'as pas vraiment accès à toutes les
classes à tous les éléments où il y a déjà des classes qui sont appliquées bah tu peux cibler
une classe et faire un apply et lui appliquer des éléments I win dessus donc à ce niveau là je
pense que c'est une question fondée oui après il ya une autre objection qu'on entend encore
aussi c'est ouais mais moi je fais du custom custom et donc ça rentre pas dans les cases de tail
win donc je veux faire du du full custom la majorité du temps en fait quand tu regardes en
fait non tu ne connais pas assez bien tail win donc tu ne trouves pas ce que tu as besoin mais dans la
majorité des cas c'est ça et si vraiment il te faut du custom full custom en fait depuis je crois
que c'est depuis la version 3 ou c'est de manière native en fait tu peux faire ce qu'ils appellent du
just in time c'est à dire que tu vas pouvoir déclarer en dur dans ta dans tes classes je prends un
exemple de couleur tail win vient avec un dégradé de couleur donc ils ont nommé plein de couleurs
pour ceux qui sont sur youtube vous pouvez voir toutes les couleurs qu'il y a et pour les autres
imaginez que vous avez toutes les couleurs et il ya un dégradé de couleur de 50 à 950 comme valeur
avec quelque chose de très très très léger et quelque chose de très sombre et en fait ils ont
ils ont tout un dégradé de couleur et là le le designer me dit ouais mais moi je veux
telle couleur spécifique ok bobby détends toi on va faire un bg tirer et là on ouvre les
crochets et on met la valeur en hexadecimal de la couleur spécifique qu'il veut donc en fait
tail win a compensé ce on va on va dire n'a pas compensé à à donner la possibilité à l'utilisateur
de d'injecter du code css à la volée au dernier moment et donc c'est pour ça qu'ils ont sorti
leur leur leur slogan enfin le truc ils appellent le just in time et en fait ce qui donne une énorme
configuration et du full custom donc l'argument de dire moi je veux un truc particulier ça ne
tient plus non plus ouais alors ouais dans dans ce cas précis c'est valable si tu as un élément
avec une seule fois cette couleur par contre évidemment dans les bonnes pratiques mais
la couleur dans les configurations et parce que après tu vas galérer à faire des chercheurs
en placé dans tous les films bah ouais mais j'ai oublié ce que je voulais dire après le just in
time ouais c'est ça je voulais revenir sur le just in time parce que j'ai eu un étoque de l'épisode
7 en fait taille 8 avait un fonctionnement complètement différent d'aujourd'hui en fait c'est à
dire que ça chargait tout le css donc toutes les classes donc on faisait ton tu faisais ton
application n'importe quoi et ensuite tu avais un pur jeu qui était appliqué et qui enlevait tout ce
qui était pas utilisé ouais mais aujourd'hui c'est l'inverse en fait avec le just in time en fait
il va créer il va ajouter les classes au fur et à mesure que tu les utilise en fait donc si tu
les utilise pas elles sont pas ajoutées en fait ils ont complètement changé le système et donc
ça c'était une grosse émotion par contre en termes de dev tu as quand même accès à tout tant que tu
devs quoi voilà tu as accès à tout par contre voilà c'est il ya plus de purge à la fin tout ça
c'est uniquement intégré donc c'est pour ça aussi qu'ils ont pu intégrer ces fonctions avec
les crochets là où on fait des valeurs dynamique ou aléatoire enfin ce que tu veux et qui sont créés
à la volée en fait et ça c'est ça a été une grosse révolution de chez plus qu'est à raison
je crois que c'est la version 3 mais je ne sais pas il me semble en fait je crois que c'était une
feature dans la version 2 et ça a été natif dans la version 3 ça c'est une puissance incroyable
ouais ouais et parce que là où c'est smart justement c'est que ce concept de display flex en
fait il n'est déclaré qu'une seule fois donc après ce n'est qu'il y a des références à cette valeur
ce qui fait que le poids de ton cms de ton css va être vraiment ridicule et donc en termes de perte
parce que on voit quand même une tendance aujourd'hui où la perte en fait c'est quand même important
et c'est très bien en tout cas tellouine aide justement à éviter de trimbaler du css qui n'est
pas utilisé ou plus utilisé le cas classique c'est en supprimer des pages mais le css reste dans un
coin et ça n'a pas été mis à jour ce qui fait que le css n'est pas utilisé et donc et donc là
avec ce type de configuration on supprime tout le css inutilisé donc entre un bal moins de
code donc c'est beaucoup plus rapide et très très très très très très bon argument que tu viens de
sortir parce qu'en fait c'est vrai que la dette technique en fait au niveau des css est très
compliqué à gérer parce que tu sais jamais en fait la classe elle est encore utilisé ou pas et là
en fait ça te s'entendrait pour ce problème en fait puisque ça dégage automatiquement et
ouais je voulais répondre aussi vous faites que tout à l'heure aussi je veux faire du moi je fais
le css super custom machin tellouine ne vous empêche pas de faire du css normal aussi en fait tu peux
très bien ralentir css ou l'autre tu peux mélanger les deux sans problème en fait régulièrement de
faire une classe avec un apply et en dessous de rajouter quelques lignes de css parce que taïouine ne
gère pas encore le texte rap balance par exemple en ce moment et ça arrive là mais ça ne gère
pas correctement donc tu rajoutes dessous et voilà ça marche normalement quoi en fait il n'y a pas
des limitations et tu vois sur ce que je disais sur l'épisode 7 donc il ya très longtemps ou
justement sur mes layouts en fait j'utilisais encore display grid pour faire mes propres pour
en fait je le fais plus en css pur je le fais avec tellouine parce que j'ai pris l'habitude en
fait d'utiliser leur convention et donc ouais je fais mon schéma mental avec mes lignes et mes
grilles des machins et et et ça passe et ça marche plutôt plutôt bien en fait un truc aussi
qui est intéressant pour pour ceux qui veulent customiser encore tellouine ils disent oui mais
les couleurs en fait c'est pas les couleurs exactes que je veux en fait on a la possibilité d'étendre
la configuration de tellouine et de rajouter nos propres couleurs ce qui fait qu'on va
continuer à utiliser la convention de tellouine donc bg tirer red mais on décide que notre valeur
de rouge en fait on veut un rouge particulier on va pouvoir ajouter cette couleur là et on va
aussi pouvoir ajouter des en fait il ya tout un écosystème qui s'est mis autour de de de de
tellouine on va en parler encore de cet écosystème mais là en fait on a des décides qui nous
permettent en fait de créer une palette qui est compatible avec tellouine donc on lui donne
notre couleur primaire ok ça je veux cette couleur là et en fait ça va venir nous exporter une palette
de 50 à 950 comme puissance comme valeur et après on l'exporte et donc soit on l'exporte en
exadécimal soit en tous les fichiers en rgb en fima ou en tout ça et on peut l'intégrer directement
dans notre fichier de de configuration de tellouine il est automatiquement interprété et de la même
manière pour on a quelque chose pour les pour les couleurs on a la même chose pour les fonds
c'est donc c'est à dire ok je vais déjeuner je décide que tout mon texte est dans une certaine
fonte et tous mes h1 h2 h3 et tous mes endings sont d'une certaine fonte voilà de la même manière
on va les intégrer dans la fin dans le fichier de configuration et pouf choc à pic ça fait ça
marche tout nickel effectivement on peut tout tout configurer en fait on peut tout étendre et
tout configurer tu parles de gris donc on peut aussi créer des des colonnes spécifiques avec des
tailles et tout ça donc on peut vraiment étendre en fait il n'y a pas de limitation en fait avec
la h1 en fait il n'y a aucune limitation tu peux tout customiser tout ça vraiment voilà par contre
la seule limite que je vois moi c'est c'est vrai que parfois en fait au départ du moins tu te sens
hyper frustré parce que tu sais faire en css tu sais ce que tu veux le rendu tu m'étris son
truc mais t'arrives pas à l'injecter dans tellouine et en fait tu vois t'as ce côté un peu
frustration où il faut que tu passes par ton fichier de config pour faire la déclaration tout et ça
peut souler en fait tu vois ça peut ça peut être un frein parce qu'il faut bien comprendre le
système de bien comprendre comment ça marche et une fois que t'as pris l'effort et que tu
maîtrises bien ouais là je te rejoins complètement sky is limite quoi t'as plus de limite tu fais ce que
tu veux vraiment tu rajoutes comme tu veux et de la même manière tu viens profiter de là du côté
systématisation du truc tu vas systémique tu vas tu viens créer un système par exemple la grosse
tendance en ce moment c'est les les les les bordeurs avec les des néons tu vois des choses un peu
comme ça et ben en fait tu vas pouvoir l'intégrer directement dans tellouine et tu fais du néon
avec n'importe quelle couleur des trucs animés tout tu fais une fois et c'est toute la partie en
dire un petit peu plug-in extension de de de tellouine ou en fait là tu peux vraiment faire
tout ce que tu veux quoi ouais après la config elle est ouais ta raison c'est un peu de fois c'est un
peu frustrant mais après ça dépend si tu veux réutiliser en fait ce que t'as configuré pour
d'autres projets ou pas et ouais et ouais ça prend du temps mais c'est réutilisable derrière
parce que tu peux mettre aussi voilà tes animations tout ça dans ton config dans ta
config donc il y a plein de choses ouais ok et est ce qui est ce qu'il y a un autre point aussi c'est
que en fait dans ton fichier de config potentiellement ton ton avec le même fichier markup avec ton
même fichier application de style tu vas changer tes paramètres et ça va automatiquement en fait
modifier ton style et donc s'il y a plein de librairie de composants qui se sont fait là dessus
et on va peut-être en parler un petit peu plus tard mais c'est c'est très puissant pour la
réutilisation du code justement mais c'est ça bon déjà déjà bien brossé alors taïouine qui
ce que c'est etc les classes et tout ça customisable pour ceux qui n'ont jamais utilisé taïouine on
va partir sur une partie bah comment ça s'utilise et comment ça s'installe en fait
ça va carrément alors comment ça s'installe bah c'est assez simple tu peux même sur une page
html tu peux importer alors je vous conseille pas de faire ça mais c'est déconcé pour tester
tu prends une ligne et tu l'importes depuis ton cdn et tu peux tu peux directement l'intégrer
directement sur ton sur ton sur ta page html pour un projet en prod faut pas faire ça on est d'accord
c'est bien écrit tu as le talent gameplay cdn exactement c'est que pour jouer avec là ça
ouais ouais mais ça nous permet en fait de tout de suite pouvoir sur une page html classique
on ouvre son éditeur de code on rajoute la ligne script cdn taïouine et bim c'est parti on a accès
à toutes les classes et on peut on peut jouer on peut configurer le truc sans passer par le fichier
de config on n'a même pas besoin de faire ça après on peut si on veut commencer à faire un petit peu
de config on peut après le mieux en fait bah c'est d'utiliser ils ont ils ont fait une petite
si elle a une sorte de si elle a une sorte de si elle a une sorte de si elle a une sorte de si elle a
il met en fait on va installer la dépendance taïouine donc soit en java script pur soit en fait ils ont
aussi créé tout un écosystème avec tous les frameworks donc qu'on fasse du laravelle du next
du angular du remix du rubien relz du symfo du météor ils ont créé en fait les
directement le le des packages en fait avec un bundle spécifique avec tous les composants qui
suffisent à faire marcher tellouign css et souvent en fait la plupart du temps on va lancer soit on
va générer un fichier on va lancer une ligne de commande qui va générer un fichier tellouign
config ou en fait au moment où on fait l'install ça va automatiquement créer ce fichier de config
et c'est et c'est dans ce fichier de config qu'on va ben mettre toute notre fichier de
configuration donc ce qui est sûr c'est que il y a tout un écosystème qui s'est mis pour justement
faciliter l'installation de de tellouign et pour le coup le site de la doc est trop bien fait on
explique ça vraiment hyper facile donc il faut donc il faut il faut nod ou bonne ah ouais
ouais bien sûr sur sa machine il faut un environnement bien yarn bonne encore donc c'est vrai que
les intégrateurs qui sont pas forcément à l'aise avec ce genre d'outils c'est jamais évitant donc
il faut voilà obligatoirement ce genre d'outils java script sur la machine locale comme tu le disais
si vous voulez tester là vous avez jamais testé des wing vous n'avez pas forcément une machine
avec note tout ça joue avec le cdn amusez vous voilà pour apprendre les classes etc et après
ouais donc la taïouine c l i qui permet voilà de compiler etc machin souvent si vous l'utilisez
avec post cs aussi donc y a un compiler c'est quelque chose qui qui ajoute des plugins voilà si vous
l'utilisez du sas si vous l'utilisez des auto pré fixeur va tout le temps de truc comme ça à savoir
que post cs est intégré dans taïouine ouais c'est ce que j'allais dire en fait un nativement
il est en fait il est inclus c'est pas espèce de chose qu'on installe en plus il est il est inclus
dans le paquette je crois donc donc tous les donc tous les auto pré fixeur ou les choses comme ça
on peut on peut l'utiliser à tout de box quoi voilà et dans la prochaine version ce que j'ai lu
pas longtemps en fait puisque moi j'essayais de passer sur le lightning css le nouveau truc super
rapide en ce moment par le cul de vitesse de façon et ils expliquaient que comme post cs c'est un peu
comme le problème avec vite en fait parce que vite aussi utilise en interne post cs donc pareil
pour passer à lightning c'est un peu compliqué mais taïouine dans les prochaines versions donnera
la possibilité d'utiliser on a hitté css donc ça c'est pas mal aussi on gagne encore en performance
yes et pour le coup il y a aussi quelque chose qui est quand même pas mal qui est intéressant à
utiliser c'est la configuration dans notre éditeur de code en fait à et bah ouais en fait qu'on
utilise en fait vs code ou inter intelligent il ya une il y a une en fait une extension qui a été
développée alors je crois que c'est par la communauté mais je suis pas sûr à vérifier en
fait qui va nous apporter un truc mais ultra pratique en fait c'est l'auto complétion ce qui fait
que si déjà on connaît un peu du css ok je vais faire du flex donc je vais commencer à taper flex
et là tout de suite on va voir en fait un menu déroulant qui va nous afficher toutes les possibilités
et et quand on va choisir on va poser notre souris ou le curseur on va voir aussi la propriété css
qui va être appliqué à travers la classe qu'on a choisi ce qui fait que en termes de découverte
en fait on peut facilement découvrir des classes au fur et à mesure qu'on tape du code quoi et
donc enfin je vais pas dire que c'est indispensable c'est chez mais ouais c'est impossible de pas
une fois que tu as goûté à ça tu peux pas couper exactement et le classe t'attend que ça s'ouvre
en fait et ça s'ouvre pas donc c'est non c'est même si on les connaît toutes à un moment donné
des fois tu as un petit trou de mémoire ou quoi ouais c'est sûr et que tu n'utilises pas souvent
tu vois tu vas t'appeler le début et puis ça va sortir et donc auto complétion ça va aussi
appliquer des règles de lint donc on a un linting en fait où on par exemple ça va si on a
affiché un display flex et un display bloc donc c'est flex et bloc ça va appliquer un display
flex et un display bloc bah là en fait notre grâce à l'extension il va nous il va nous
mettre un petit sous ligne en mode et mec là tu demande deux choses qui enfin ça marche pas
donc pour voir les erreurs c'est hyper pratique pareil on va pouvoir aussi passer la souris au
dessus de la classe pour voir quels quels sont les propriétés qui sont qui sont affichés
pratique pour détail ça pardon comme pratique pour détail quand tu sais plus carrément des
fontes texte texte xl c'est quoi attend je me souviens plus c'est 20 pixels ou pas ouais et
il ya un truc mode au départ qui m'a un peu soulé c'était justement l'application en fait de
prétilleurs qui venaient en fait organiser les classes dans un certain ordre au départ ça me
soulé et en fait c'est vachement logique donc ils vont en fait regrouper ok il va mettre les
paddings en premier après il va mettre tout ce qui est fonte après il va mettre tout ce qui est
background après il va mettre tout ce qui est over après tout ce qui est médiacquéerie et donc
il y a une certaine logique à ça et c'est plutôt pas mal je trouve au départ j'étais plutôt
réfractaire ça me soulait et à l'usage je me rends compte qu'en fait c'est pas si mal que ça
toi aussi un petit peu réfractaire au début non mais en fait ça c'est c'est perturbant
t'as pas l'habitude tout mais au final ça amène quand même des choses plutôt plutôt sympa c'est
super important pour une cohérence dans un projet en fait quand t'as plusieurs devs que les classes
soient arrangées de la même façon et j'avais même notre enfin je sort un peu de taïwine mais j'avais
même travaillé sur des projets où le lead front avait mis un outil pour classe dans le css normal
ça classait par ordre les propriétés en fait comme ça ça garde vraiment une cohérence
sur le css ça c'est super important dans un projet où il ya plusieurs devs en fait
yes et donc ouais ça c'est quand même des outils qui sont quasiment indispensable si on veut
commencer jouer avec et en fait pour profiter de toute l'expérience qui apporte tel win c'est
quand même pas mal donc il faut il faut faire cet effort de d'installer d'info sur sa machine
comme ça en fait on voit vraiment le potentiel quoi mais grave c'est obligatoire de façon
ça fait tu peux pas bosser sans c'est clairement impossible ça me pas difficile ça parle de
taïwine mais il ya plein d'outils comme ça qui sont voilà c'est obligatoire comme pourvu tout ce que
tu veux ouais pardon alors après qu'est ce qu'on enchaîne alors on avait une petite rubrique voilà
déjà parlé de la performance pour le gain de temps on a parlé en gagnant du temps quand tu connais
les classes voilà tu t'écrit tes classes hyper rapidement tu les connais par coeur on a tu répète
pas les choses ouais performance on a un petit peu parlé mais c'est clairement très très très
performant parce que au niveau du poids déjà moi je sais que j'ai des projets de site complet
toi c'est pareil mais franchement j'ai quoi j'ai 20 ou 40 cas de css quoi il n'y a que dalle
par exemple sur les les spacing en fait où ils vont appliquer un un divider en clair entre tous les
éléments on veut mettre un petit peu d'espace et on veut mettre une barre donc avant on disait bah
ouais en fait on va mettre un bordur à droite et le dernier on ne le met pas donc en fait on avait
la possibilité de faire ça ok le dernier élément du li par exemple et bah il a bordur non tu vois
ok on pouvait faire ça mais là en fait t luin en fait apporte une vision qui est sympa il dit ok sur
ce groupe de donc ils vont y on va le mettre ça sur le parent et tous les tous les enfants en fait
on va appliquer une petite un petit un espèce de divider entre chaque élément ce qui fait que
on peut faire des trucs hyper stylés mais aussi bien sur l'axe x donc à l'horizontale que sur l'axe
y et là ça commence à être super super stylé et de la même manière pareil si on veut un espace
entre tous les entre les éléments mais pas le premier et pas le dernier pareil on a une propriété
que ça appelle space x 1 2 3 voilà on choisit et en fait ça va appliquer de l'espace entre les
éléments alors les puristes vont dire ouais mais on peut faire ça en flex avec un space between
et tout le monde oui oui sauf que tu as des trucs pour le coup le fait de t'imposer ce flex là peut
être va va t'obliger en fait à mettre plus de dives tu vois et donc le fait d'avoir quelque
chose nativement qui te le gère c'est quand même plutôt sympa et en fait ils ont pensé à plein de
petits petits cas qui en css pur va parfois être assez compliqué à mettre en place et là en fait
on a une classe utilitaire qui va nous faire ça tout seul et qui va faire tout le calcul pour nous
et ça j'avoue que c'est quand même super sympa parce que tu pour le coup des bordeurs tu vois
t'évites t'évites d'écrire du code en plus avec un last child ou des trucs comme ça exactement
donc voilà on est en un moins de code encore voilà plus performant et pareil sur les animations
en fait ils vont avoir des petites animations qui sont toutes prêtes prêtes à l'emploi là pour le
coup à l'image on voit animate spin bon bah ça va automatiquement en fait faire tourner l'élément
donc voilà on met un icône ou un svg et on lui applique la classe animate spin et bah tout de suite
ça tourne voilà ça nous évite c'est les trucs hyper classiques mais hyper confortables pareil un
petit ping de spools et de la même manière on peut aussi créer nos propres animations qu'on vient
intégrer à ta wing mais nativement c'est déjà ça vient avec pas mal pas mal d'infos quoi
on voit l'écran les trucs qui sont pour les loader par exemple ouais c'est le truc un peu un peu
classique sur tous les projets quoi ouais voilà c'est c'est c'est clair et donc là on vient appliquer
le spin on lui met une hauteur de 5 une marge une largeur de 5 et on lui met un margin r donc il
correspond à margin right donc c'est m r tirer 3 donc 0 75 de rem donc au départ on fait les calculs
on est là et puis après en fait ça devient tellement facile et fluide que on on on calcule plus
quoi c'est ok je sais que ça c'est du 16 à peu près voilà ça vient assez assez rapidement
yes yes yes on va parler des plugins parce que évidemment évidemment il y a des
comme toute librairie qui se respecte il ya des plugins ouais en fait il y a mais en même temps
c'est bien parce que ça veut dire qu'il y a un écosystème c'est que la librairie ne correspond pas
à tous les use case possible imaginable mais il y a la communauté qui est assez impliqué pour justement
en fait créer des extensions mais ça veut dire aussi que la librairie a été conçue par définition
où il ya une API ouverte qui nous permet en fait de libre de créer en fait ces extensions là c'est
plus guine pour le coup donc non c'est plutôt c'est plutôt sympa ouais alors la plus connue la plus
connue qu'on utilise sur beaucoup de projets même si des fois j'ai du mal un petit peu à l'utiliser
mais typographie ah la typo ok ouais ouais ouais ouais ouais mais c'est important en fait donc
non mais c'est super important en fait le plugin typographie va vraiment appliquer des règles
sur la facilité de lecture et va en fait va vraiment favoriser la facilité de lecture d'un
texte pour optimiser pour la lecture mais surtout en fait pour du contenu qui n'a pas été écrit
par le développeur je pense par exemple au cms soit on va sortir du html soit on va sortir du
du du du du markdown ou voilà un autre type de données mais en tout cas on n'a pas accès aux
contenus en fait parce que le contenu ça a été délivré par quelqu'un d'autre et donc on va
styliser en fait les éléments qu'on va récupérer donc là un exemple typique on va récupérer du
markdown et en fait on va appliquer les règles de typographie donc les h1 h2 h3 h4 p machin
enfin tous les les éléments on va dire basique et on va leur donner un certain style ce qui nous
permet en fait de pouvoir styliser du contenu qu'on ne maîtrise pas ouais donc prose et après tu
alors ta prose de base je crois ta prose lg prose excel en fait ce qui voilà qui change la taille de
police etc mais c'est vrai que ça c'est assez épuisant parce que sur un tu l'appliques sur un texte
et automatiquement il est formaté et voilà tout est nickel super joli et tout et t'as rien fait parce
que on est tous d'accord pour dire qu'il ne faut surtout jamais donner accès à son client à ça
parce que au bout de au bout de l'un mois c'est sa peintre noël il a mis c'est un scène n'importe
quoi donc lui il rentre son texte et nous on est garant du du design et de la qualité on va dire
visuel du rendu donc grâce à ce plugin là en fait on peut styliser tout comme on veut yes yes
yes donc ça super important c'est surtout le markdown comme tu dis ça c'est vraiment le markdown
ensuite on a un autre qui est très utilisé bah le forme forme taïwine css formes qui nous
met en forme les formulaires aussi pour le pour le coup les formulaires ça peut vite être très
long et très compliqué quoi ouais alors alors on est on est quand même pas sur un truc du style
mais c'est pas formaté comme bootstrap on a pas un truc je sais plus les classes mais c'est beaucoup
plus en fait il n'y a pas rien à changer quasiment au niveau du formulae non c'est quasiment
enfin on n'a rien à rajouter il va automatiquement interpréter les input text input dite type
voilà donc donc ça c'est c'est plutôt c'est plutôt confort et c'est pareil enfin les
les éléments brut c'est un peu violent après on on ira tout à l'heure parler des libéraries
justement qui viennent augmenter un petit peu un petit peu tout ça mais pratique quand tu as
juste voilà un petit formulaire sur un site pas envie de balancer une librairie bah tu mets le
formes et il te met en forme ton formulaire de contact très rapidement très simplement
et tu peux customiser un petit peu plus voilà donc c'est hyper pratique celle là ça n'a d'autre
pas des des plugins j'utilise des fois ou non je sais que j'ai fait un plugin pour pour cet effet
néon là que j'avais vu en fait sur ouais ouais je me suis je me suis craqué un peu mais en fait
j'avais suivi un mec sur youtube justement qui expliquait comment on pouvait interagir avec
ces plugins là et comment on pouvait justement créer nos propres plugins et en fait là la
pays est juste trop bien faite quoi donc ça te permet de faire des trucs quand même quand même
assez assez plus et en respectant toutes les conventions mais pour le coup une fois de plus la
doc est vraiment bien faite voilà d'accord c'est vrai qu'on parle pas beaucoup mais la doc est
super bien faite il ya moteur de recherche tu trouves vraiment facilement les choses moi j'avais
un plugin j'avais à un moment j'ai fait j'utilise un système qui permet de styliser les barres de
scroll voilà ah ouais ok ah j'ai jamais fait ça ouais ouais parce qu'en fait sur sur mac et bah
ouais la barre de scroll est super jolie mais quand tu vas sur windows c'est très très moche donc
ça te permet d'avoir une homogénieité entre les les bars de scroll en fonction des brosers
des os ça c'est pas mal et puis j'ai vu qu'il y avait une night night wind aussi qui permet de
gérer un peu plus alors même si c'est géré en natif le dark dark mode tout ça ouais plus un peu
le truc plus loin en fait là pour le pour le coup c'est c'est vraiment bien géré en natif
toute la partie dark mode tu peux tu peux customiser au petit du bas en mode normal c'est
white et en dark de point bah tu appliques tel tel tel classe ce qui fait que bah tu donnes la
possibilité à l'utilisateur de basculer dans un dark mode ou pas donc donc non ouais pour le coup
et je prends je pense que pendant longtemps ça ça a été un plugin et je pense que maintenant
c'est intégré de manière native c'est possible je pense hein j'ai trouvé ça sur un article
peut-être un peu ancien mais mais pour le coup maintenant c'est c'est incorporé quoi yes yes
ok ensuite alors ah tips en tricks ouais après comme comme comme plein de de manière de faire
en fait et comme bon dev qui se respecte on va essayer de tordre un petit peu le modèle
c'est à dire ok on va commencer à faire des trucs un peu yolo et parfois en fait bah y'a y'a
plus ou moins des bonnes manières de faire et et donc il y a des choses comme on voit à l'écran
par exemple on y a des personnes qui se sont dit ouais on va pouvoir interpoller en fait les les
variables à la volée c'est à dire le bg est tiré red tiré 300 bah en fait si c'est si j'ai une
erreur je vais mettre red si j'ai une validation par exemple je pense à un formulaire je mette du
green et donc bah on vient interpoller la classe et on vient bouger juste red ou green et en fait ça
on se rend compte que ça marche pas en termes de compilation ça marche pas c'est pas une bonne
pratique donc en fait il y a plein de de de baisse practice en fait qu'on pourrait utiliser pour
justement garder toute la flexibilité sans pour autant en fait casser le fonctionnement de de
taille win quoi ouais parce que c'est vrai qu'on a pas expliqué comment en fait taille wing
quand il va compiler en justin time il va aller dans les fichiers chercher les classes en fait qui
existent dans les fichiers jis css html tout ce que tu veux et à partir de là il va générer le
fichier de classe qui correspond donc le bg red 500 là il va le générer parce qu'il l'a trouvé dans
ce fichier mais si tu mets bg et la variable de couleur et dynamique bah il va pas trouver le bg red
500 tu vas comprendre pourquoi bah ton bg red il s'affiche pas en fait donc c'est pour ça que là
au début de l'article qui était spiq qu'il faut bien mettre bg tiré red tiré 500 plutôt que ça
pour qu'en fait l'intégralité de la classe soit bien importé au moment où tu l'appelles et
où tu en as besoin quoi que taille win la tronf quoi parce que sinon il a un bon
après il y a une solution mais c'est pas très pratique c'est de dans le fichier de config tu as
un white list où tu peux mettre des classes comme ça bg red 500 par exemple tu lui dis celle-là tu
la mets d'office en fait en fait ouais c'est c'était le pattern anti purge en fait c'est un peu
ça quoi ouais ouais ouais ouais je vois je vois bon après c'est en fait c'est je pense que là on
est sur déjà des cas d'usage qui sont un petit peu plus poussés et pour des personnes qui sont
des qui ont déjà utilisé taille win et ok ils sont déjà un peu en train de tordre le modèle
je pense avec la maturité qu'à le framework enfin ouais la librairie je pense que ce que vous
êtes déjà en train de faire il ya des gens qui l'ont déjà fait donc qui ont déjà été confrontés
à ce problème là donc il ya grande chance qu'il ya déjà une solution qui a été trouvée pour
pour le cas ouais je voyais sur article aussi la classe groupe qui est hyper pratique aussi
ah ouais ça par contre ça c'est magique c'est quand on veut spécifique pas par exemple pour un
hover par exemple je veux que quand je hover le texte en fait c'est toute la carte qui qui change
bah grâce à cette fonctionnalité de groupe je vais pouvoir faire ça mais hyper facilement quoi
voilà sans gs en gs bah de toute façon c'est un peu la tendance quand même de de supprimer le gs
quoi de parce que le css devient de plus en plus puissant et donc on peut appliquer des choses
nativement en css la compatibilité des brosers on n'arrête pas de le dire sur le podcast mais la
compatibilité la compatibilité des brosers augmente l'implémentation de spécifiquement plus en
plus rapide donc on passe de plus en plus de choses dans le css et on trimballe moins de gs
grosso modo c'est un peu la tendance quand même
oui donc on a avoir on avait deux articles là tu vois où ils expliquent comment écrire un peu
plus efficacement sans répéter le code tout ça machin donc ça on met on mettra les liens après
il y en a plein sur le web mais voilà des façons d'écrire proprement taïwine parce que forcément
à un moment donné on écrit un peu salement donc éviter de répéter les choses tout ça c'est
pour le coup ouais c'est déjà un niveau un petit peu plus poussé quoi c'est quoi je vous
ai déjà familiarisé avec l'intégralité des conventions de nommage des classes voilà vous
savez comment les appeler mais ça peut être intéressant aussi de faire ça de suite pour éviter
en fait de partir sur des trucs un petit peu trop yolo quoi yolo mais on apprend des rêves vites
c'est tellement facile à apprendre des cas de visage un peu plus poussé quoi
complet
tak tak la partie goy group bah ouais c'est exactement ce qu'on disait à imite on peut peut-être
partir sur un peu tout l'écosystème qui s'est développé tout autour je pense surtout à des
librairies de composants qui ont été développées je pense surtout à tel win UI qui en fait la
librairie de composants officiels de l'équipe de de tel win et je pense je crois vraiment que ça
était le le le rocket start quoi enfin c'est le truc qui a fait que ça a vraiment explosé c'est
quand ils ont sorti cette librairie de composants parce qu'ils ont sorti des composants pour vues alors
en html pur en réacte et en vue avec une une certaine on va dire élégance et une
flexibilité quoi donc nativement on avait des composants qui étaient hyper proches et
applicables quasiment instantanés copier coller et après on modifiait le texte mais toutes les
toutes les boîtes qui voulaient aller assez vite en fait pouvaient créer des composants ou des
landing page assez assez rapidement et ils avaient structuré ça en différents voilà on a
différentes sections héros on a des call to action on a des exemples de composants de pricing
et donc après bon quand on alloeille en fait hyper de quoi c'est hyper c'est hyper clean parce que
oui c'est hyper clean comment s'appelait le livre rappelle moi c'est refactoring ui voilà
qui était basé et c'est cette équipe en fait qui fait ces composants qui sont hyper
propres la marche qui va bien la taille qui va bien c'est super pro quoi ouais et puis et surtout
c'est applicable direct quoi et là pour le coup on va sur le site sur le produit on va dire e-commerce
voilà on a on a quelque chose de basique ça marche et on a le code et là on voit le on
voit le code directement en html je veux le mettre en réacte ou en vue bam j'ai automatiquement le
composant avec ma balise script tout et après c'est à moi de venir variabiliser les informations
que j'ai besoin mais je clique sur le bouton copier là et c'est collé c'est fait quoi donc donc
non très très très propre par contre c'est payant voilà ce que j'ai bien ouais et bah ouais mais à
un moment donné on gagne beaucoup beaucoup de temps c'est super stylé c'est propre je pense
que maintenant il y a quasiment aussi bien en open source gratos mais à l'époque parce que celle-ci
elle a au moins deux ans moi je sais que j'avais sorti je l'ai acheté j'ai sorti la carte bleue
parce que ça m'a fait gagner un temps de ma boule et la qualité rendue du client
elle était là oh non mais c'est super enfin je me rappelle d'une client elle disait non mais la
landing page était super propre l'explication tout nickel et derrière sur l'app base ouais c'est
vachement c'est vachement propre et on a un niveau aussi bien marketing qu'un niveau applicatif donc
là on voit des inputs des inputs sélectes des radio box on a même des composants de
signing donc vraiment le login password truc classique qu'on fait je sais pas combien de fois
quand on fait dès l'applicatif et à la fin on en a marre de faire un formulaire de login quoi et là
les sont propres bon c'est quand même top quoi ouais bah après passer la carte c'est pas
je pense que si tu as prendre un designer un web designer on importe il y a aussi un coup donc
voilà bien sûr à mettre côte à côte c'était intéressant aussi de passer sur les librairies
comme ça qui sont un petit peu payantes mais pas forcément et d'ailleurs je rebondis petit instant
si vous aimez podcast en fait vous pouvez nous soutenir donc comme on a déjà plusieurs personnes
qui nous soutiennent donc on les remercie déjà tous les mois de nous soutenir mais si vous voulez
soutenir le podcast parce qu'en fait on fait ça ben ben évoluement entre guillemets tous les deux
voilà ça nous presque ça nous coûte de l'argent donc si vous aimez le podcast c'est vous voulez
qui continue à durer ça va déjà plus de trois ans et bah soutenez nous sur le site du podcast
doudletireslash.dev et voilà c'est une petite contribution à 1€ 5€ 10€ comme vous voulez
ce que vous pouvez mais voilà on vous remercie d'avance quoi.
Un grand merci à vous. Pour revenir sur ces tailweeds il y a d'autres possibilités aussi
il y a d'autres on va dire librairies qui se sont développées la première c'était UI qui était
là on va dire l'officiel et après on a eu toutes celles un petit peu plus communautaires il y a
vu l'engouement qu'ils ont eu et pareil de l'open source aussi il y a on a enfin on les a pas tous
listés ici parce que il y a des gens qui prendra vraiment beaucoup beaucoup beaucoup et maintenant
limite c'est devenu un standard quoi et c'est là où c'est fort c'est que de plus en plus de librairies
composants ok on va faire une librairie de composants pour react on va faire une librairie
librairie de composants pour pour vue pour angular ils vont directement le choix va être fait en tailweed
ouais direct et c'est chat cdn
ouais chat cdn ui qui est une librairie de composants est-ce que eux ils utilisent taïwine ou pas
bonne question c'est peut-être écrit quelque part je sais pas du tout
customise je sais pas du tout si si celle ci est basée sur sur taïwine ou pas
dans la doc peut-être dans la doc dans l'intro si pas si il y a une introduction
d'autres compétences ça je vois pas le mot clé taïwine alors css variable ou taïwine css
et donc c'est là où ils ont été forts je trouve c'est que une grosse partie des librairies de
composants maintenant en fait se sont basés là dessus donc en fait c'est devenu des des ouais
des des mecs qui sont dans le game et c'est super solide quoi et tu vois je me je me je
m'en rappelle d'une conversation qu'on avait sur un épisode président on se disait
ouais mais est ce que taïwine un jour va pas mourir quoi tu vois non non c'est pas vraiment
ça c'était une réflexion et que j'ai toujours d'ailleurs mais finalement le projet justement
sur lequel j'avais la réflexion je suis quand même parti sur taïwine mais ok non non la réflexion
c'est que dans un temps j'ai des projets à maintenir en fait dans le temps qui sont qui ont
deux trois quatre ans et t'as utilisé des choses à l'époque qui sont pas forcément maintenues
aujourd'hui tout ça et tu dois tenter de débarrasser et là ça devient compliqué en fait pour le
cas de taïwine en fait on intègre totalement en fait les classes css dans le code de l'application
et ce qui va être difficile en fait d'en sortir donc c'est pour ça tu me fais rebondir là dessus
c'est que c'est vrai que des librairies ui avec basé sur taïwine il y a des tonnes et il y en a
pleurs le web mais juste attention attention à celle que vous choisissez choisissez les enrunes
qui sont que voilà vous êtes sûr que ça va durer dans le temps qu'il y a plusieurs versions
qui a une bonne équipe de dev derrière une bonne communauté parce qu'effectivement si tu l'intègres
dans ta application et bah dans deux trois ans peut-être ça sera hyper complexe d'en sortir
et il faudra peut-être refondre toute l'application donc c'est il y a des choix à un moment donné
faut bien réfléchir avant de se lancer dedans parce que c'est ça peut être compliqué des années
suivantes quoi yes carrément autre autre point qu'on n'a pas abordé moi il y a celle ci que
je voudrais quand même parler qui est des ui que j'ai pas mal utilisé pour le coup qui est totalement
agnostique de il n'y a pas de c'est pas des réactes c'est pas du vue c'est vraiment application html
telle win et le concept c'est de de simplifier donc pour les personnes qui justement qui
veulent pas avoir des classes à rallonge en fait ils ont repris les conventions un petit peu qu'on
connaît on va un bouton le la norme sur ou sur bootstrap je crois que c'est bootstrap qui a
implémenté ça c'est btn voilà btn et ça vient appliquer toutes les règles du bouton ce qui fait
que on revient sur un truc hyper lisible mais sous le capot ça utilise telle win et de la même
manière on peut customiser en fait ces boutons là on reprend les mêmes conventions quoi btn btn
primarie mais la customisation s'est faite avec avec telle win avec on reprend toujours la même
chose le fichier de config et et la base et l'avantage c'est que là en fait on a on a
différentes thèmes et donc on a différentes couleurs différents environnement des trucs
un peu agressifs des trucs par exemple le site le site du podcast en jaune comme ça et en fait
avec une simple application de thème en fait on vient vraiment changer tout le l'apparence graphique
du site et donc ça c'est super bien et on a dans ce site là en fait un espèce de générateur
de de thème donc on peut vraiment customiser en choisie notre couleur primaire notre notre
secondaire et ainsi de suite si on veut des choses un petit peu plus arrondies et ça vient nous
générer notre thème ce qui fait qu'on peut facilement on revient sur déployer du code et
avoir une certaine de consistance et réutiliser ces composants et ne faire que appliquer du style
en fait ouais ouais c'est un peu basé sur le design token tu vas voilà tu as des tokens qui
représentent des couleurs tout ça des armes qui tu vas modifier qui vont modifier tout le thème
et pour le coup ils utilisent pas mal de de de ouais de propriété pure css pour justement
en fait diminuer la quantité de gs quoi mais ouais celle ci je l'ai que je l'aime pas mal en
fait parce que je l'ai utilisé et donc ça me paraissait intéressant il ya il ya une toute
nouvelle alors pour le coup elle est hyper récente elle date de quelques jours elle est sortie
ça s'appelle l'unard ui et là par contre je sais pas comment on pourrait qualifier le truc il
joue vraiment sur le côté hyper élégant et sur sur de de de de l'animation quoi c'est à
dire au scroll là on a un mix entre de de l'animation et du design et là pour le coup on a un effet
scroll il me semble que c'est apple casse à en fait on a un texte qui qui est en qui est en gris
en opacité très très faible et au fur et à mesure qu'on scroll le mot par mot en fait ça vient
basculer en blanc et donc ça fait un effet un peu de révélation au scroll donc c'est c'est une
batterie pareil de composants qui vont venir un interférer et mettre un petit peu plus de motion
et d'animation au scroll il n'y a pas beaucoup d'exemples enfin il n'y a pas beaucoup de composants
par contre c'est ultra ultra ultra léché quoi c'est clean c'est clean c'est pas une
migration c'est simple j'ai pas vu le code mais le rendu il est excellent ouais c'est c'est
super propre c'est vraiment joli donc non c'est vraiment c'est vraiment classe par contre il n'y
c'est ouais je dis ça date de quelques jours mais je trouve qu'en termes de délégance on passe
en certains cap quand même ouais c'est clair ouais c'est autre chose mais vraiment sur sur de l'animation
tout ça c'est assez pas mal c'est pas mal cette petite nidouerie ça va vite faire des choses avec
bah carrément carrément écoute patrick on est on commence à être pas trop mal on a un peu
fait le tour de de de tailouine et de toutes les possibilités est ce qu'on a oublié quelque
chose ouais ok on a oublié quoi on a oublié un truc alors ça c'est déroutant si je sais pas
suivi de l'actualité mais c'est très récent aussi c'est le c'est vert celle qui a sorti v0
ouais voilà ok j'avais pas mis dans les notes et je viens de y penser en fait ouais qui est un
naïe qui génère en fait des éléments encore basés sur taïouine pareil voilà et sur un moteur
de enfin un prompt en fait ce qui m'a tapé fait moins formuleurs le newsletter il va te générer
un formulaire component avec taïouine qui va bien tout ça et je viens de dire que tu as déjà
accès toi non pourquoi tu voudrais et non non je suis évidemment c'est sûr fin j'ai mis mon email
déjà il y a pareil quand c'est sorti mais le concept est quand même assez sympa et on peut on
peut déjà voir en fait comment ça s'articule en mode v0 ce que ça sorti en v1 et c'est
enfin non c'est le code et tout c'est vraiment assez c'est assez impressionnant donc à tester
mais c'est aussi un peu déroutant parce que tu dis mais waouh c'est ouais non c'est ça c'est
pas un code généré et quand je l'ai vu je me dis ouais en fait c'est pas dégueulasse quoi
enfin c'est moins d'être dégueulasse tu vois j'avais peur qu'on soit un petit peu proche de tous
les les les drag and drop qu'on avait des les wizzy wigs en fait qui venaient te générer une
chier de code et ça générait du code et des codes et du code et des codes et des lignes et des
en fait j'avais un petit peu peur de ça et au final quand tu regardes le fichier réacte bah en fait
il n'est pas dégueulasse et après sur le rendu html bah en fait il est en corrélation avec avec le
réacte mais non c'est c'est hallucinant et ouais je pense qu'en termes de de vitesse d'exécution
de toute façon il va falloir qu'on fasse un épisode dédié sur lia dans notre métier dev
ça c'est clair mais là on a la preuve une fois de plus que ouais les lignes vont bouger quoi et
après ça reste quand même dans l'inspiration parce que tu les tapes tu as fait le truc qui te sort
voilà un truc après tu l'adapte mais exactement mais après pour pour pour recouper sur sur l'épisode
tellouin là en fait on a on a du code qu'on peut réutiliser par contre si on ne sait pas
interpréter p y 12 en fait on sait pas à quoi ça va correspondre on sait pas conteneurs qu'est-ce que
ça qu'est-ce que ça va faire qu'est-ce que donc là pour le coup si on veut tirer profit de l'amélioration
qui est en train d'arriver on se doit en fait de connaître tellouin pour le coup ouais carrément
j'ai pas tu vois j'avais pas fait gaffe qu'il y avait une ligne de commande pour intégrer le
component dans ton projet j'ai pas testé c'est intéressant à tester pour comment il
m'intègre en fait ce qui rajoute un component correspond pour tester bien je à avoir quoi mais
c'est ça c'est ça ça promet de bonnes choses pour au moins ouais faire des scaffold hyper rapide
quoi donc non cool cool patrick on arrive au bout de notre épisode taïouin on ne saurait que trop
vous conseiller de jouer avec de tester d'essayer et moi même j'étais hyper réfractaire au départ
j'étais en mode non mais c'est bidon machin et en fait moi je trouve que tellouin c'est quand même
tester c'est quasiment l'adopter quoi mais au moins si vous l'avez testé vous avez
argument à dire non et à vous mettre une farouche opposition mais vous avez de la matière
testez-le juste sur une toute page à la con et vous allez voir c'est quand même super bien quoi
oui d'accord testé c'est l'adopter merci patrick merci à tout le monde d'être resté je suis
au bout de l'épisode pensez à nous être un petit commentaire parler du podcast à vos collègues
et si vous êtes prêts à nous soutenir ça nous fera extrêmement plaisir à très vite patrick
ciao ciao à tous et à tous retrouver double slash sur le plateforme de podcasts préférés et
sur le site internet du podcast 3w.slash-podcast.fr sur le site vous allez retrouver tous les liens
d'épisode les références évoquées durant l'émission