Bienvenue sur Double Slash, le podcast dédié aux outils et aux techniques pour le développement
web.
Bonjour à tous, on se retrouve sur un nouvel épisode de Double Slash, donc épisode numéro
7.
Aujourd'hui on va parler de CSS et plus précisément de Tywin.
Donc comme d'habitude, Alex est avec nous.
Salut Alex !
Salut à tous !
Le sujet du jour, c'est un framework CSS.
Toi tu es habitué à l'utiliser, enfin en tout cas tu le connais.
Moi pas du tout, donc le but du jeu, je pense aujourd'hui de l'épisode, ça serait évident.
Je pense qu'il faudrait que tu essaies de me le vendre, en fait, de me convaincre de l'utiliser.
Parce que j'avoue que l'essai de framework, je suis un petit peu refroidi depuis quelques
temps, j'ai plus trop l'habitude d'en utiliser.
Donc, quel est l'intérêt ?
T'es plutôt adept de tout faire à la main, de tout contrôler et tout ça ?
Bah ouais, en fait je trouve qu'avec les... disons qu'aujourd'hui en 2020 avec Fletsbox,
Grid, etc.
Je vois plus trop l'intérêt d'utiliser un framework.
Et avec Post-SS derrière qui te mouline tout ça, avec Autoprefixer et tout.
Donc c'est tellement simple aujourd'hui que... ouais, quel est vraiment l'intérêt d'utiliser
un framework ?
Bah...
Ok, d'accord.
Ok, et ben je vais partir en fait depuis la base.
En fait, je vais pas essayer de te vendre Tywin CSS, je vais juste te parler de Tywin
CSS et quel est son paradigme, comment il fonctionne et tu vas voir que, en fait, tu
verras par toi-même l'intérêt ou pas.
Ok.
Alors déjà, Tywin CSS, ce qu'il faut comprendre c'est... ouais, c'est un framework, ok, mais
c'est pas qu'un framework, on va dire c'est pas un framework comme les autres, on va dire
c'est pas du bootstrap ou du material design où on va avoir des choses qui sont un peu
toutes prêtes, des cards ou des boutons, et on fait, on appelle notre classe BTN et tout
de suite, hop, c'est designé, le problème c'est que ce type d'approche, elle est correcte
si tu ne change pas trop du cadre.
En clair, si tu fais un truc où tu n'as pas trop de custom, ça marche.
Le problème de ça c'est que tu vas vite arriver, on a connu ça au départ avec bootstrap
où tous les sites se ressemblaient possible parce qu'ils avaient, ils utilisaient tous
bootstrap, donc on avait tous le même style.
Maintenant, quand on a un peu l'habitude des frameworks, on arrive sur un site, on peut
facilement voir quels frameworks ils ont utilisé ou pas.
Mais en fait ça dépend du niveau de la boîte, si la boîte est vraiment établie, ils ont
mis en place un design system, des choses comme ça, voilà, c'est que du custom et
il y a une certaine uniformisation.
Et c'est ça qui est intéressant, ça va être l'uniformisation.
Sauf que quand on est tout seul ou quand on est en toute petite équipe, on ne va pas
avoir spécialement un designer qui va faire un design system où tout va être une sorte
de nomenclature où tous les espaces sont identiques, les polices sont identiques,
donc soit on se le fait nous-mêmes en tant que dev et on fait tout nos styles et on garde
toujours une certaine consistance, mais ça représente beaucoup de travail.
Et en fait l'avantage de Taïwine, c'est comme ça que Adam Watan, qui est le créateur,
l'initiateur du framework le présente, lui en fait il dit c'est une API pour design
system.
En clair, c'est un framework où déjà on ne va pas taper une ligne de CSS.
On ne tape plus aucun CSS et tout va se faire en fait avec des classes et des classes qu'on
appelle utilitaires.
Le truc qu'on connaît facilement, qui a été intégré dans pas mal de frameworks
autres, c'est le fameux M-2 qui correspond en fait à margine intégrale de 50% de E-M.
Et en fait on a une sorte de graduation comme ça avec MT, donc c'est margin top, tiré
2 ou 4 de 1 E-M.
Et en fait ça, l'avantage d'utiliser ça, on va pouvoir mettre des marges très très
rapidement et surtout le margin top 1 E-M, on va peut-être le taper 50 fois si on le
fait en CSS.
Ce code là, il va être utilisé par plein de composants ou à plein d'endroits dans
le site, mais il est écrit en dur souvent plusieurs fois.
Donc déjà on va l'écrire en dur, la référence de margin top, elle est écrite qu'une seule
fois.
En fait c'est...
Est-ce qu'ils ont découpé chaque propriété comme ça en micro-class en fait ou c'est
un peu le principe ?
Absolument.
En fait tout est en class, donc tu vas avoir tous les spacing, donc les margines,
les padding, padding top, padding bottom, donc ils ont découpé tout, tout, tout.
Les grèces de fonte de super light à super bold, les lettres, pareil le letter spacing,
ils vont avoir une grade de 1, 2, 3, 4, 5, 6 et tu vas avoir comme ça tout, mais vraiment
toutes les propriétés CSS possibles.
Donc par exemple pour un display flex que tu parlais tout à l'heure, au lieu de faire
un display flex tu vas juste mettre la classe flex, flex tiré colonne, c'est équivaut en
fait à flex direction colonne.
D'accord.
Flex tiré start.
Donc en fait ce qui va te permettre en fait ça va, tu vas pouvoir écrire très très
très rapidement.
Vraiment tu gagnes vraiment un temps parce qu'en fait quand tu écris ton markup, en
fait en même temps tu le design et tu le design avec une certaine consistance parce
que c'est toujours toujours la même chose.
Donc ça c'est en fait lui il part du principe que maintenir du CSS c'est quand même difficile,
ça amène quand même des problèmes.
Par contre maintenir du markup, enfin du HTML c'est quand même beaucoup beaucoup beaucoup
plus facile.
Donc ça c'est, on va dire c'est la base de Tywin.
Alors c'est pas un nouveau concept.
Je crois que le premier commit il est en juillet 2017.
Aujourd'hui ils ont, il y a 24 000 stars sur GitHub, il y a plus de 2000 commits, c'est
une licence MIT.
Il y a tout un écosystème qui s'est greffé autour de ça.
Donc ouais c'est un framework quand même qui est vraiment en place et je pense qu'il
est mature pour passer, pour s'y intéresser.
Par contre ouais c'est un changement de paradigme quoi.
Après je sais pas toi tu utilises des conventions spécifiques, les BEM, les SMACs, tout ça
là ou pas tant.
Ouais j'ai utilisé un peu tout.
Maintenant aujourd'hui je suis plutôt dans le, je crois que c'est plutôt BEM aujourd'hui
ce que j'utilise, attends c'est comme, je sais même plus les noms en fait.
Si tu veux j'utilise le nom de component.
Notif, notif, heading, notif, heading.
Ouais voilà c'est ça, avec des tirées ou des underscores.
Notif, contente.
Voilà.
Ouais on a tous un peu notre façon d'écrire les classes mais ouais j'utilise un petit
peu le nom du, enfin en gros le component puisqu'en plus comme je peux dire acte on
est vraiment sur les componentes donc tu as le nom du component, underscore, si c'est
le aide ou un truc comme ça et après, enfin voilà tu découpes.
Après c'est vrai qu'à une époque on faisait ça pour vraiment séparer et reconnaître
un petit peu la fonction de la classe etc.
Après on a moins de problèmes quand tu commences à utiliser du réacte ou tu as les classes
qui se génèrent un petit peu automatiquement avec les CSS modules ou des trucs comme ça
donc tu as moins de problèmes de classes qui se rendent dedans.
Ouais il y a différentes façons mais ça je crois qu'aujourd'hui c'est plutôt BEM
qui est utilisé.
Il me semble.
Mais en majorité.
Ouais après je suis complètement d'accord avec toi et je trouve que maintenant toute
cette convention de nommage elle perd un petit peu de plus en plus de sens pour moi quand
on utilise des composants quoi parce que tout va être dans le composant après tu vas pouvoir
scoper ton CSS à l'intérieur de ton composant ou pas mais en fait si tu veux avoir une sorte
de portabilité de tes composants et pouvoir les utiliser un peu partout tu vas tout intégrer
dedans quoi.
Donc en fait ton CSS il va être dans ton composant et avoir des conventions de nommage
comme ça à notif par exemple tu fais une notif adding, une notif contente.
En fait c'est juste à l'intérieur de ton composant donc tu vas avoir tout ton code qui
va être centralisé au même endroit dans ton composant du coup ça met une complexité
supérieure et quand je dis complexité c'est que les conventions de nommage c'est toujours
compliqué tu vois comment ça s'appelle est-ce que c'est explicite et vu que la durée de
vie et c'est d'un tonscope de composants moi ça me dérange pas tellement de mettre plein
de classes le seul problème que j'y vois c'est après en termes de lecture ou quand tu
commences à mettre 20, 30 ou 20 aines de classes parce que tu as des propriétés tu vas
displey flex, justify content bah ça va être justify center, item center, border 02 par exemple
et border, tiré, bg avec la couleur et tout ça donc tu vas commencer à avoir beaucoup de classes
ça tu vas perdre en lecture et là dessus je te l'accorde c'est assez gênant par contre ce que
tu peux faire après en fait c'est étendre taïwine et en fait juste le déporter c'est à dire dans
ton composant tu vas l'appeler avec ta convention de nommage que tu veux btn ou notif
ou ce que tu veux et dans ta partie css de ton composante tu vas faire point btn et tu vas
appliquer les classes de taïwine et donc en fait tu vas juste déporter ce qui fait que dans ton
markup, dans ton html tu as juste les infos de ta classe mais toutes tes propriétés css elles sont
déportées sur taïwine qui sont déportées dans ton scope de css donc au final avec une
approche composante c'est pas c'est pas gênant quoi mais en fait c'est le gros travers que
en fait beaucoup de gens critiquent taïwine en disant ouais mais c'est une récession quoi on revient
à écrire limite le style dans le html comme à l'époque où on faisait style égal et puis on
mettait notre css pur je pense que c'est pas du tout ça et maintenant on fait quand même de plus en
plus de composants donc en fait c'est pas enfin moi ça me gêne pas tellement de devenir de venir
tout mettre à l'intérieur du composant quoi c'est vrai moi j'ai l'impression en fait quand je
regarde les exemples tout ça j'ai un peu l'impression que oui alors déjà dans un premier
temps on n'est pas écrire de css moi ça me dérange un peu parce que j'aime bien écrire au css déjà
il y a beaucoup de gens moi j'adore écrire au css après c'est cool t'as toutes les propriétés
qui représentait par une classe mais est-ce que c'est pas oui comme tu dis d'éporter le css dans
le html en fait via des classes est-ce que c'est c'est ouais alors je comprends le gain de vitesse
au niveau de l'écriture puisque une fois que tu connais tes classes par coeur et du coup tu
travailles que dans un seul fichier html tu n'as pas besoin de naviguer entre le css et html ouais
il y a des avantages ça après ouais c'est ça fait quand même beaucoup de classes qui s'additionnent
dans le dans un component dans un tag html j'ai l'impression quand même non ça a l'air de
faire des trucs à rallonge avec complet complet complet et c'est en ça où je pense qu'il passait
un certain nombre de classes pour gagner en lecture bah tu mets tout ça dans une classe
btn et tu viens appliquer toutes ces toutes les classes que t'as mis de taiwin tu viens les mettre
en mode apply mais cette classe vient hériter de toutes les anciennes classes et comme ça
ouais j'ai pas trop compris comment ça fonctionnait tu vas nous expliquer un peu déjà comment
fonctionne taïwine parce que là j'ai pas je n'ai pas compris comment on pouvait en capsuler ça
dans une classe en fait toi tu peux tu peux étendre les propriétés et de taiwin parce que à
un moment donné ok ils ont pensé à on va dire à 95% mais toi tu veux tu veux créer toi-même des
des choses bah t'as la possibilité d'étendre ton framework et donc tu vas pouvoir le customiser si
tu veux donc si tu veux rajouter un sphé un spacing que tu as passe tu veux changer ta couleur si tu
veux rajouter une couleur tu peux l'étendre et ta différente approche pour pour l'étendre soit tu
viens étendre les fonctionnalités propres de taïwine ou tu viens ajouter des composants et ces
composants là en fait et si tu crées par exemple une classe composants ou une classe btn pour reprendre
le fameux bootstrap si tu viens créer une classe btn tu as à l'intérieur de ton de cette classe css tu
vas pouvoir en fait utiliser un apply tu vois c'est comme si en sas ça venait hériter d'une autre
classe tu vas faire apply et tu vas écrire en dur toutes tes toutes tes classes taïwine ce qui fait
que ta classe btn va hériter de toutes les classes de taïwine ce qui fait qu'en termes de lecture
t'as juste déporté dans ton t dans ton css si tu veux le faire tu en fait tu n'as pas écrit
display flex t'as juste écrit flex en fait c'est c'est comme en sas avec l'héritage en fait tu
viens hériter de toutes ces classes d'accord ouais je parle mieux en fait j'ai trouvé l'exemple
à ce que tu es en train d'expliquer sur le site ouais c'est ouais je comprends mieux maintenant
avec l'exemple sous les yeux je vois avec le apply ils ont ils font l'exemple d'un bouton
bleu et ils font un apply bg blue 500 text white font bold donc voilà ok oui ok donc oui c'est je
comprends dans ce cas c'est mieux ouais parce que du coup tu peux créer ta petite
composante qui va parce que finalement en fait moi le truc c'est pourquoi j'utilise
framework ou alors pourquoi enfin c'est que la plupart du temps on utilise à peu près les
mêmes choses quoi des boutons des alers des trucs comme ça et c'est quasiment sur une chose donc
une fois que tu as commencé à faire ton petit truc en sas avec tes mixin des choses comme ça tu
les réutilises de projet en projet donc c'est vrai que pourquoi je vais m'embêter à me créer une
dépendance avec un framework tu vois le truc mais après effectivement je vois qu'avec taïwine tu
peux créer tes petits composants de boutons et après voilà les réutiliser de projet en projet c'est
aussi ça l'intérêt c'est à chaque fois de réutiliser de projet en projet bon ouais ok non
c'est c'est bien d'avoir les deux possibilités en tout cas de pour la pour le quand tu commences
exactement ouais et pour moi c'est c'est hyper important justement de pas de pouvoir étendre
et de pouvoir réutiliser ces choses là de projet en projet sinon en fait on recote la
roue à chaque fois et bon c'est c'est super c'est super rousant quoi après tu t'es gros adeptes de
sas et avec quoi tu t'es fin pourquoi tu utilises sas alors je suis gros attention alors je suis de
moins en moins adeptes non j'utilise sas depuis quelques années parce qu'il y a pas mal de trucs
moi j'aime bien le après c'est décrité mais tu sais de scoper c'est des hérites je sais pas
comment on appelle ça d'ailleurs c'est le tu sais quand tu écris une classe et après tu rajoutes
dedans le vidéo ou image tu es comment ça t'as tu viens nester ouais nester voilà c'est ça
n'est-ce que tu viens nester les éléments entre eux ça je trouve ça super parce que c'est c'est
pratique après ça devient vite le bordel donc on avait conseillé de jamais aller trop loin
profondeur parce qu'après ça devient édisible mais il y a ça plus les mixings plus les variables
etc c'est ça c'est vraiment pratique pour ça après c'est tout compilé aujourd'hui j'utilise un
peu moins ça c'est mes derniers projets je suis plus passé sur du post css post css ou je rajoute
quelques prédites un pré processeur un post process ouais en gros ouais c'est ça voilà donc du
coup j'ai commencé à utiliser quelques plugins auto pré fixer il est il est obligatoire
j'ai envie de juste magique après deux trois trucs on esté tout ça je le dis aussi puis voilà je
mixe un petit peu mais c'est déjà le c'est plus simple au niveau du la config et puis je trouve
ça un peu plus light et bah bonne nouvelle patrick bonne nouvelle avec taïwan css tu peux
utiliser post css bien sûr avec tes imports tes auto pré fixer et ton post css nested ok
donc tu peux tu peux faire une migration super super rapidement donc facile donc pour le coup
il n'y a pas de sas et tu peux tout faire en post en post css par contre il y a un truc qui était
pas mal je pense que tu te disais peut-être des mixin pour gérer tes enfin je sais pas si tu
te dises des mixin pour tes mediacoiris ou pas oui oui j'ai utilisé les mixin j'ai un mixin que j'utilise
pour les mediacoiris enfin je crois que j'aime plug-in ou un mixin enfin j'ai salé pas les projets mais
j'avais deux temps ouais parce que j'aime pas récrire tout quoi tu as une medium et tout le temps la
même chose donc ouais bien sûr et bonne nouvelle sur taïwan en fait il a il gère aussi tout le tout
côté responsif avec des des des un objet qui s'appelle les screens en fait où tu viens
par donc ouais en fait tu tu viens tu viens de définir ta largeur d'écran et donc par défaut
bien sûr c'est mobile first comme beaucoup de comme beaucoup de framework et après tu vas
avoir sm md lg xl et donc par définition tu as une une valeur en pixel absolue et celle-ci
bien sûr elle est customisable tu peux la faire évoluer par contre tu vas pouvoir utiliser sm
2. et tes classes tes classes tes ouai tes classes taïwan en clair ça veut dire que par exemple
sur mobile tu fais un display flex et dès que tu passes sur tablette par exemple et ben tu vas
faire sm tirer bloc ce qui fait que à partir de ce média query en fait tu vas appliquer tu vas
supprimer la classe flex et tu vas appliquer la la la un display bloc juste dans les classes comme ça
c'est comme si tu rajoutais un vrai un préfix à ta classe donc ton préfix ça va être sm 2. donc ça
veut dire que toutes les classes que tu vas mettre derrière ces deux points ne vont s'appliquer que
en mode sm ou en ou que dans à partir de l'écran de taille md de taille lg que tu as défini ou que
tu as utilisé par valeur par défaut donc en fait ça bah ça te donne en fait un contrôle absolu
sur ton responsif quoi. ouais du coup tu écris plus de média query aussi dans css du coup de toute
façon tu fais pas de css mais je me dis quoi. mais non tu fais plus de css donc disais ouais ok c'est
cool mais tu vois les valeurs je les écris où et donc du coup oui tu les écris à l'intérieur de ton
de ton markup et tu vas aussi avoir des des comment des variantes par exemple sur le over
tu dis bah mais moi je veux en fait que quand je passe ma souris au dessus de mon btn là je vais
faire mon point btn over et je veux que ça fasse quelque chose donc soit tu le fais en css avec on
va dire non tu le fais via ta classe de ton composant avec ton apply et tout ça où tu as mis
ton over ou si tu veux le faire directement dans ton markup bah tu vas faire over de point et tu
change ta valeur de background par exemple le truc est un peu classique c'est soit tu prends un bouton
plus foncé ou plus clair mais tu vas faire un over de point bg raid tirer 600 un truc comme ça
et tu vas modifier ta couleur de background que sur la que sur le over ok et donc sur sur
on va dire sur toutes les les variantes t'en a vraiment plusieurs pour justement bah créer
toutes toutes toutes les possibilités en fait parce que bah ouais t'as donc ta over ta first child
ta last child ta les trucs père un père en fait tu vas avoir plein de plein comme ça de de
de de variantes où tu peux justement appliquer uniquement sur certaines sur certains tu peux
mixer les variantes et les les breakpoints et md ça ou pas tu sais il est à la con je sais même pas
ça sert à quelque chose mais en fait je veux que que sur mon mobile je veux que le over je t'avoue
je je sais pas je sais pas tu vois j'avoue j'ai pas testé tu vois le truc facile c'est ouais le
over le focus le active le disable le visite et le fertile last child odd et et même le group
over ça c'est pas mal le group focus en fait c'est quand tu mets une propriété groupe par exemple
typique c'est quand tu es sur sur sur des cartes en fait bah tu veux qu'un élément un enfant par
exemple il vienne aussi changer sa propriété et bah avec le le le groupe over tu vas pouvoir
faire ça donc ouais non ça ça mène quand même un niveau de de de customisation et de
une finesse de paramétrage qui est quand même hyper hyper fine et assez intéressante et
ça me semble pas mal après je te coupe mais est ce que toi tu l'as utilisé déjà plusieurs fois est
ce que les est ce que c'est facile à retenir en fait toutes les toutes les propriétés les classes
en fait est ce que c'est des non logiques en fait et que du coup bah une fois que tu as travaillé
alors les les les les conventions de nommage sont vraiment vraiment facile tu vois sur le le le
padding c'est un truc que tu vas faire souvent p est tiré machin donc ça c'est c'est plutôt c'est
plutôt facile margine par aille margine top mt donc en fait une fois que t'as le pattern ok ça
ça va relativement vite après tu veux faire un background rouge et bah c'est bg tirer red tirer la
valeur qui va de 100 à 900 en fait tu vas avoir une certaine intensité ouais au niveau des
des couleurs tu vas avoir neuf neuf niveau de couleur ce qui te donne en fait un niveau de de de
intensité de couleurs et ça c'est plutôt c'est plutôt pas mal si tu veux rester dans dans le
même scope quoi sinon en vrai c'est toujours pareil si si quand si t'as pas un designer qui t'as
fait un truc nickel bah tu vas vite te retrouver limité et le danger c'est de faire des trucs qui
sont pas très très jolis et harmonieux l'avantage de rester dans ces scopes de couleurs bah c'est
plutôt facile d'ailleurs adam wadhan et son pote steve chez plus son nom là ils ont fait un
bouquin qui s'appelle refactoring ui que j'invite tout le monde à acheter alors qu'il n'est pas
donné pour un pdf on est d'accord mais qui est super intéressant justement où il vient il vient
écrire des règles de design et moi qui n'est pas un background de designer avec cette fibre on va
dire vraiment artistique et tout ça en fait il vient écrire des règles en disant voilà si
vous respectez ces règles là votre truc il sera harmonieux et ça sera facile quoi et justement
il utilise des règles comme ça pour les couleurs pour les fonds de size les les lines à hight ou
les choses comme ça et tout ça est automatiquement accessible depuis thai wing du coup en respectant
toutes toutes ces règles on a quelque chose d'harmonieux facile et et ouais et rapide à
implémenter quoi donc c'est c'est en ça ou c'est plutôt plutôt intéressant par contre ouais
alors question tu sais bien qu'on reçoit des designs des fois avec des couleurs un peu spécifiques
donc il y a des couleurs qui sont déjà inclus dans thai wing mais est-ce qu'on peut rajouter des
couleurs tout ça ou enfin j'imagine que c'est possible absolument en fait c'est il faut vraiment
voir ça comme une base et en fait c'est vraiment un système ouvert où tu peux rajouter autant de
trucs que tu veux pour l'instant le seul la seule chose où je ne suis pas encore super convaincu
c'est leur système d'implémentation de grid ils font un truc mais ça me ça ne me convient pas
donc c'est le seul bémol que je mettrai aujourd'hui mais je pense que ça
c'est en fait faire un framework pour du grid c'est un non sens je pense donc en fait c'est
peut-être la seule le seul moment où quand je vais construire mon layout quand je vais construire ma
page je vais faire du du css pur avec les grids où je vais définir toutes mes mes mes mes sizes
mais où est ce que ça commence où est ce que ça s'arrête quel est le comportement ça
ça sera fait en css pure en grid et tout le reste ça sera fait avec thai wing et du coup
aujourd'hui c'est le seul bémol que je vois par contre c'est complètement étendable et customisable
à ta guise quoi et en plus il ya tout un écosystème qui s'est mis par exemple tu veux créer
justement vu que les couleurs sont basées sur une une déclinaison de neuf couleurs du plus
light au plus au plus au plus foncé en fait il ya plein de petits de petits sites qui se sont
mis en mode bah tu donnes ta couleur de référence qui correspond au milieu donc à la 500 et à la
valeur 500 que c'est de 100 à 900 plus légers au plus foncé et tu donnes ta valeur de 500 et lui
automatiquement il te vient générer la couleur avec toutes les avec toutes les déclinaisons il te
donne le petit snippet de code que tu intègres dans le thai wing point config point js et tu viens
étendre les propriétés de thai wing avec la couleur que tu viens que tu viens lui donner et donc
bah ouais ça te permet d'avoir un niveau de customisation assez assez intéressant sur quoi
ça le site c'est un site c'est un site qui donne les couleurs comme ça oui oui oui bah en fait
j'ai trouve alors je mettrai le lien dans la doc de tête je suis incapable de te le dire mais ouais
je le retrouverai en fait il ya il ya comme je disais il ya une grosse communauté qui s'est mis en
place derrière il ya un site qui s'appelle osom thai wing css justement on va avoir plein de petits
plugins qui viennent étendre les fonctionnalités de thai wing je pense surtout aux formulaires
ou à très vite on va arriver sur des trucs un petit peu plus complexes il ya beaucoup d'exemples
qui sont fait donc des codes perne et ou des codes sandbox dans tous les sens avec thai wing où
justement ils montrent comment ils ont intégré c'est pas mal aussi sur l'accessibilité tu vois
sur respect des des bonnes pratiques tu vois il ya un anti alias il ya enfin il ya des choses comme
ça ou d'entrée de jeu dès que tu mets ta wing css tu remets tout à zéro tu remets tout à zéro
dans ton navigateur par exemple on le sait tous mais sur chrome en fait naturellement ton body il
prend de la marge parce que c'est c'est c'est chrome qui te dit moi je te force à mettre de
manière naturelle et il vient aussi interpréter les hachins les h2 les h3 il met en fait des espèces
d'applications de style sur sur les balises communes et et quoi un style par des fois excuse
merci et c'est exactement ça lui ta wing il met tout à plat et tout est tout est identique quoi ce
qui fait que tu as vraiment un contrôle absolu et surtout tu n'as pas de parasite tu vois sur les
si tu décides d'utiliser nav bar à site section en fait t'as pas d'application de style par
défaut quoi donc ça déjà c'est c'est plutôt c'est plutôt bien et ils ont ouais pour revenir sur
l'idée première qui était à toute la communauté en fait il ya il ya plein de de de systèmes
fin de petits plugins pour venir étendre et apporter des solutions directes par exemple sur les
select sur sur les sur les inputs si on veut vraiment customiser le truc par contre ça reste que
du html et du css donc si on veut intégrer le javascript à l'intérieur bon bah c'est à nous de le
faire de manière à la main quoi mais c'est celle là où moi je trouve c'est super intéressant c'est
que on a déjà en fait c'est un ouais moi je vois vraiment ça comme un api pour un design
système quoi on a on a on a des références on a un niveau de customisation qui est hyper élevé
et c'est ça en fait qui moi qui m'intéresse c'est pour sortir un petit peu de de ces systèmes
ou ouais ton ton composant il est prêt il est prêt à être utilisé super par contre bah si il
fit pas parfaitement à ce que tu veux bah là c'est vraiment très compliqué quoi donc soit soit
il y a 20 000 propriétés soit il y a soit il y a 20 000 props pour venir modifier soit bah tu
peux pas quoi et alors il y a pas de secret pour moi mais enfin pour personne moi je suis plutôt
adeptes de vue et là je suis en train de de refaire des des des composants mais qui sont totalement
agnostiques sur le design et sur le markup pour venir extraire vraiment toute la partie comportementale
du clic et tout ça en utilisant des scopes des fins des slots scopés où en fait bah ouais je veux
mettre une réaction sur mon bouton bah j'appelle la la propriété que je veux sur le ad click et puis
et puis terminer ce qui fait que mes composants en fait sont totalement design ils sont neutres en
termes de design quoi et ça justement je peux appliquer mon design par défaut parce que j'ai déjà
fait mon petit composant avec toutes les classes css de taiwin mais il est customisable hyper rapidement
pour le faire matcher vraiment à ce que je veux quoi donc en fait c'est je trouve ça amène un
gros niveau de granularité et et surtout ça ne vous enferme pas dans un paradigme de par exemple
mat metal design ou des choses comme ça on a on peut vraiment contrôler tout ce qu'on veut quoi
et ça c'est ça en fait qui plaît beaucoup d'accord ouais je comprends ce que tu veux dire en fait ouais
parce que bootstrap tout ça effectivement les sites étaient tous pareil ensuite je sais que la version
4 après c'était c'est quand même une grosse révolution quand même parce que ça ça a amené un
limite des standards tu vois c'est ça en fait c'était une révolution un petit peu d'avoir des
frameworks css ça se faisait pas trop il y a eu bootstrap il y a eu je sais plus comment il s'appelait
là un qui était un peu un autre aussi fond fondation ouais fondation c'est un que j'utilise
c'est moi j'utilisais plus fondation et puis je n'étais pas trop fan de bootstrap après il y a eu
la version 4 de bootstrap là où justement on pouvait un peu plus toucher les variables ou ça
pour changer un peu les trucs par défaut donc un peu plus customisé bah le css tout ça mais voilà
c'est vrai que bah tiens et tu parlais de plug-in comment tu comment ça s'installe un plug-in sur
tywin en fait tu sais quoi c'est un package npm que tu installes tu rajoutes dans la config comment ça
fonctionne en fait c'est ça en fait tu tu veux par exemple utiliser le tywin custom form ou un
code depuis npm et dans ton fichier tywin c'est config.js tu as une clé en fait qui est plug-in
et là en fait tu viens faire ton requi de ton plug-in donc c'est assez simple en fait maintenant
sur les projets tu as un fichier tywin config.js ou dedans tu vas en fait spécifier toutes les
informations donc au départ il est vide c'est pas mal au départ moi sur le premier crash test
que j'ai fait avec tywin en fait t'as un truc qui s'appelle npx tywin exemple où je sais enfin
c'est marqué dans la doc en fait il te génère un fichier de config plein full en fait avec toutes
les propriétés ce qui te permet en fait de voir comment c'est construit comment tu peux l'utiliser
comment tu en fait comment tywin fonctionne quoi et ben avec ça tu comprends vraiment toutes les
valeurs par défaut et après en fait ben t'as une clé pour étendre donc tu peux tu peux venir rajouter
des nouvelles propriétés tu peux venir les modifier mais modifier les valeurs par défaut de
tywin c'est super dangereux parce que en fait tu tu vas te priver de quelque chose du coup on va dire
les best practices c'est plus détendre comme ça tu tu tu viens pas fait tu gardes le comportement
par défaut et tu viens le modifier si tu veux mais tu viens pas écraser écraser le truc et comme je
sais que t'es super piqui et super intransigeant sur la performance oui oui grosse et oui je l'attendais
et ouais ben ouais parce que tous ces framework class souvent c'est dégorer quoi en termes de
transport tu vas tu vas te râmer surtout là de tonnes de classe inutilisé en fait c'est un peu
exactement et ben ouais c'est complètement nul et bonne nouvelle en fait dans la dernière version
de tywin je crois que c'est 4 c'est 1.4 quelque chose là aujourd'hui on a un 4 6 mais je crois que
depuis un 4 il intègre de façon native purge css donc en clair quand t'es en dev tu vas pouvoir
utiliser toutes les toutes les classes et tu vas installer sur sur sur ta becan bah toutes les classes
ce qui te permet d'être hyper rapide et pouvoir faire ton test mais au moment de ton build en fait
tu vas lui dire bah tu vas regarder dans toutes les extensions par exemple qui sont en point vu ou point
jsx ou point point html point css et tu vas faire un diff entre les classes que moi j'ai appelé et
les classes qu'il ya dans tywin et si la classe elle n'est pas utilisée alors tu la dégages du bundle
et ce qui te permet en fait de descendre de manière drastique mais vraiment drastique ton
poids de css trimbal et aussi de ton nombre de couleurs utilisés parce que j'ai perdu le site je
m'en rappelle plus tout ce qui est pas utilisé je crois que css stats et ouais c'est je crois que le
site css stats de tête mais en fait tu ouais tu lui donnes ton css stats point com en fait tu lui donnes
le nombre de couleurs et en fait tu te rends compte que bah il ya beaucoup beaucoup beaucoup de
quand tu fais ton custom css souvent en sas le fameux ouais je te donne le blue et en fait je
fais 20% ou le lighter tu vois le lighten darken 20% ou quelque chose comme ça en fait tu viens créer
une nouvelle couleur et le fait d'utiliser des variables et après avec un pourcentage de la
variable tu viens créer une nouvelle couleur et en fait toutes cette toute toutes ces couleurs là
au moment de la compilation bah ça prend de l'espace quoi et l'avantage de rester sur un
framework on va dire sur sur des couleurs qui sont prédéfinies tu peux pas t'en sortir et surtout
si tu les as pas utilisé tu les trimbal pas au moment de ton bundle quoi et enfin au moment de ton
build tu tu elles sont dégagées quoi donc ça ça amène une grosse grosse niveau en termes de
perf évidemment c'est mimifié c'est optimisé c'est compressé c'est tout ce que tu veux tu vois au
moment de ton build mais ouais tu tu viens tu viens de travail tu en fait tu viens de trimbaler le css
uniquement que tu as besoin et comme tu as une certaine consistance sur ton margin top tire et 2
tu l'as peut-être utilisé 50 fois dans ton application sauf que tu n'as pas écrit si tu l'as
écrit qu'une seule fois donc tu le trimbal que une seule fois et tu l'appelles 50 fois si tu en
as besoin mais elle est écrit en dur qu'une seule fois or si tu fais on va dire ton bm classique
donc dans la notification si tu as marqué margin top 10 sur ta classe notif et si tu as fait un margin
top 10 dans ta classe dans ta classe je sais pas contente ou dans une autre classe tu as une margin
top 10 parce que tu veux de la consistance dans ton dans ton footer par exemple et bah t'auras
trois fois écrit dans ton css margin top 10 pixels tu vois le truc et donc en utilisant un framework
type taïwine bah tu et avec ton purge css bah tu viens éliminer ça quoi d'accord ouais
ok donc donc en termes donc en termes de perf donc en termes de perf à la fin ça fait quand même
la vie tu as vu toi les parce que je vois que il commencait 140 140 ouais jésib ouais
minifier 1500 kilos et en jésib 144 et t'as vu les chiffres une différence par rapport à une pure
je ça divise par deux ça dit ah ouais ouais project à fait alors oui complètement non c'est monstre
c'est monstre en fait pour pour te refaire tout l'historique moi j'avais j'avais vu sur le net
tout le monde parlait taïwine taïwine taïwine ouais ok bon c'est quoi c'est nouveau truc framework
css ouais bon allez c'est bon c'est quoi du coup je regarde vite fait je lis je travaille je parcours
la doc en travers tout je me dis ouais bon ouais y note pourquoi pas je sais pas ça me paraît
encore un nouveau truc ouais on va écrire 20 000 classes ça va être illisible tout et puis voilà
le temps passe le temps passe et et je sais pas pourquoi je retombe dessus et je me dis ah vas-y
je j'essaye je fais je fais un crash test où je prends une page une page html et je viens
apporter via via le cdn et je joue avec et je regarde et là je dis ah ouais ouais en fait c'est
c'est plutôt rapide en fait c'est c'est plutôt cool ça ça va vite alors évidemment la première
fois tu tu prends bah tu perds du temps sur donc ta la doc à côté et tu codes avec la doc à côté
la doc est super bien faite tu as une barre de recherche avec algalia donc tu tu tapes ton
ton élément que tu cherches tu vois par exemple tu veux un align item bon bah comme ils m'appellent
ça bon ok c'est item tirer center baseline item ok donc une fois que tu intègres le truc
bah ça va relativement vite merci aussi l'extension dans vs code tu as un intelligence donc en
fait tu commences à taper il te donne le nom de la classe et les propriétés css qui vont être
appliqués donc en fait dans ton dans ton navigateur enfin dans ton éditeur enfin ouais dans vs code
t'as directement toutes les infos et et du coup non c'est c'est plutôt c'est plutôt pas mal donc
ça te permet en fait d'aller assez vite et de voir les propriétés qui sont appliquées derrière
derrière donc voilà sur les trucs un petit peu plus compliqué c'est-à-dire le letter spacing
ou les choses comme ça ouais bon là t'es obligé d'aller voir la doc après une fois que tu la
connais tu la connais quoi après autre problème enfin au problème que t'as au départ c'est ah ouais
mais les variantes donc les hovers les les last child les first child après ton responsive
mais ça t'as ta peça ça se fait relativement vite après t'arrives sur ouais mais moi je veux ma
propre couleur je veux ma propre fonte et puis au final bah tout est tout est marqué dans la doc
il y a énormément d'exemples dans la doc ce qui fait que tu comprends assez vite pareil c'est
sur une classe btn par exemple ok donc tu prends le système de applai après un niveau dessus tu
commence à vouloir nester par exemple enfin je sais pas si tu travailles beaucoup avec du markdown mais
c'est fin ouais moi je viens récupérer du markdown quand je fête et je viens appliquer mon markdown
sauf que bah là je viens interpréter du markdown donc en fait il faut que
quel est le meilleur pattern pour pour appliquer quoi donc moi je mets une classe markdown dans la
qu'elle toutes les tous les achats qui sont dans la classe markdown on viennent appliquer donc c'est
d'une st quoi donc bah une fois que t'as fait toute ta classe markdown avec toutes tes propriétés
achats h2 li p machin on va être un peu taf mais une fois que c'est fait bah ton markdown il est
il est il est designé et il est portable quoi tu peux le réutiliser sur un sur un autre projet
tu pourras le customiser tout ça donc une fois que tu tu explore tout ça mine de rien tout est dans
la doc donc c'est plutôt bien fait t'as beaucoup d'exemples comme je dis ouais tu joues avec ton ton
post css et bah tu fais ton build en fait tu vois sur si si tu utilises gritsum ou nukes par exemple
bah tu tu tu lances ton build et bah tu regardes le fichier css et tu vois pour moi sur un micro
projet où j'utilisais bah les niveaux de gris et les niveaux de violet c'était les deux couleurs
que j'utilisais on va dire les trucs classiques ouais c'est mon css il fait même pas deux cas quoi
c'est rien même pas ok même pas bon donc donc ouais c'est c'est c'est vraiment performant c'est
vraiment performant et tu tu vois une vraie un véritable un véritable bien quand tu purges
quoi ouais et avant c'était c'était une dépendance et maintenant ils l'ont intégré directement
dans taïwine quoi parce que en fait faire du taïwine sans faire de la purge clairement non c'est pas
non tu les limites c'est c'est un on sens quoi oui c'est trop lourd après c'est fin c'est le problème
de tous les fameurs framework c'est que tu te balades bah c'est problème de bootstrap je sais pas si
bootstrap insiste à la pure je mets fin ou ils ont enfin si c'est possible de le faire mais c'est en
fait en plus qu'à maintenant bootstrap c'était avec jQuery donc tu te travailles tu te traînes
balaque jQuery tu travailles des classes css inutilisées enfin tu te travois le mec arrive sur
ton site déjà il doit se télécharger des trucs qui servent à rien donc c'est ce qui est quoi des
frameworks mais il est que sur la log in take ouais voilà un truc qui va pas quoi c'est un peu ce qui
a détourné un peu je pense pas mal de gens des frameworks parce que voilà il y a un moment donné
si tu veux faire un site performant c'est pas normal de télécharger les choses inutiles donc
enfin d'imposer ça à ton visiteur bon après ça c'est un tu m'as tu m'as enfin bon écoutez
je t'avoue que je connaissais pas du tout taïwine tu m'as bien convaincu parce que c'est vrai que
bah il c'est un framework mais sans les inconvénients en fait du framework puisque bah déjà la purge
pouvoir nettoyer et faire des des fichiers de css de prod léger c'est pas mal t'as les classes mais
tu peux aussi créer tes propres classes avec le apply tu vois ça enfin la doc est bien faite
parce que là je regardais la doc en même temps elle est quand même assez complète effectivement
la recherche est enfin c'est aussi le point fort quand t'as un projet open source qui est robuste c'est
la doc quoi c'est de pouvoir retrouver toutes les infos qu'on veut donc ça c'est déjà un point fort
ouais j'avoue que ça me tente t'as beaucoup beaucoup d'exemples et et et et tayouis et adam a fait
beaucoup beaucoup de vidéos où il vient expliquer le pa pas le béaba quoi donc si t'as pas envie de
lire franchement tu regardes les vidéos et il a fait énormément de screencast où il explique
comment il comment il fait ça avec taïwine pareil il a une chaîne youtube où il achetait pas combien
de vidéos où en fait il il refait des sites classiques avec taïwine et et ouais il va il va super loin
il explique vraiment vraiment bien les choses quoi après appareil sur les images ou sur les les svg
le bah tu peut pareil les customs avec avec avec taïwine tu vas sur sur sur les les fil couleurs
sur les sur la la la la la la la size tout ça tu peux tu peux tout faire directement dans ton
markup et bah justement moi j'ai découvert le le pattern où tu prends ton fichier svg,
tu le mets dans un espèce de compresseur et qui va en fait le problème de mettre ton sv
de copy-paste, ton SVG dans ton mark-top, c'est que tu vas avoir je sais pas combien de lignes quoi.
Du coup ça devient difficilement lisible, donc soit tu viens le déporter dans un composant à part,
soit un petit pattern que j'ai trouvé justement, c'est de compresser le pass et en fait au lieu
d'utiliser que des valeurs numériques, ils utilisent des alphanumériques, du coup ça compresse,
ça réduit la taille de ton pass et du coup c'est beaucoup plus facile, plus léger, plus petit et
ils te virent toutes les balises qui ne servent à rien, ce qui fait que dans ton mark-top tu as
trois 4 lignes pour ton SVG, donc c'est pas gélant, ton icon est intégré directement dans ton mark-top
et tu utilises les classes pour la hauteur, la largeur, la couleur, la propriété over si
tu en as besoin, tu viens l'intégrer directement quoi, donc c'est le dernier point que je voulais
aborder sur les SVG, mais dans l'idée, pour te dire, je dis moi j'étais vraiment sceptique
et en fait quand tu commences à jouer avec, tu vois vraiment le gain de temps,
le niveau de custom que tu peux avoir et la perte à la sortie et une valeur qui est importante
pour moi c'est la développeur expérience, expérience de développeur plutôt sympa,
avec une doc en plus solide derrière, moi ça me suffit et ça me plaît vraiment,
et je t'invite fortement à essayer sur un petit projet et quand tu commences,
c'est comme tout quoi, au départ faut passer un petit peu la barrière, donc faire l'effort,
mais après ça va vraiment vite, c'est vraiment bien, c'est custom et c'est léger.
Ok bon, je sais pas, c'est clair que je vais...
C'est attesté, vraiment en fait c'est sortir de l'idée reçue,
je suis dit moi j'étais vraiment là dedans, encore un framework de plus,
c'est ça, encore un nouveau framework, encore le même truc,
c'est complètement une hype, voilà, qu'est ce qu'il y a quoi et en fait je voulais comprendre,
et en fait le fait d'essayer sur un micro projet, tu fais juste une page,
tu fais une landing page, voilà tu fais ton truc et au final,
enfin vraiment moi le premier truc qui m'a bluffé, c'est la vitesse à laquelle tu
design ton truc, ça va super vite, vraiment, vraiment, donc ouais faut essayer,
il y a pas le choix, les pays c'est l'adopter, j'ai l'impression,
donc je vais tester, tester assez rapidement, et juste pour revenir, on en parlait hier sur
Bootstrap 5 en version alpha qui a été annoncé, je crois que c'était hier, on est combien aujourd'hui,
il y a deux jours, le 16 juin version 5 de Bootstrap en version alpha et la grosse
nouveauté, enfin la grosse annonce c'est qu'ils enlèvent la dépendance de jikwari,
et en 2020, comment dire, il était temps, c'est pas mal, c'est pas mal, et puis ils ont fait,
ils ont dégagé le support d'internet explorer aussi, donc ça c'est aussi,
j'ai envie de dire aussi enfin, donc c'est pour moi c'est aussi un message,
Bootstrap, bon j'utilise plus tellement, mais après il est quand même encore beaucoup utilisé
par des développeurs, mais le fait qu'ils dégagent jikwari et qu'ils dégagent internet explorer,
je pense que c'est un signal en fait, enfin pour moi c'est, j'ai envie de dire,
c'est un signal quoi, c'est jikwari arrêter quoi, et puis internet explorer,
enfin moi j'ai encore des clients qui me demandent, enfin il y a pas une des dernières missions que
j'ai fait, c'était support d'E11, donc là aujourd'hui si jikwari dégage ça,
tu veux dire il n'y a plus d'excuses quoi, c'était plus obligé de le supporter,
et bah je sais pas, toi t'en penses quoi jikwari, bonne nouvelle quand même non ?
Ah non non, bien sûr, et je pense qu'on pourrait faire un épisode entier,
Oui bah de toute façon oui, on avait prévu le mort de jikwari, et c'est complexe, et je pense qu'on
mais ouais on prendra le temps d'en parler dans un épisode entier, mais je pense que c'était une
bonne chose que bootstrap via jikwari, après qu'est ce qu'ils annoncent sur bootstrap 5,
c'est quoi le nouveau truc ? Il change le style en fait, en gros,
a new look and feel, donc ils vont changer un peu le style des composants, tout ça,
qu'est ce qu'il y a d'autre, les customs propertises sur css, ou ça c'est un peu,
ouai, qu'est ce qu'il y a d'autre ? Bah écoute, ouais les formuleurs changent un peu,
Ouais après, bon à toute façon c'est peut-être en alpha,
Ouais c'est en alpha donc il y a plein de choses qui vont changer, mais il n'y a pas
des trucs révolutionnaires, c'est juste que à mon avis, ils vont adopter les nouvelles technos,
enfin voilà, un peu plus modernisé, un peu plus simple,
Il y a besoin de façon, je crois que la version 4 était sortie en 2017,
il me semble à tout comme ça, donc ça commence à tâter quoi.
Ouais, après la version 4 c'était la première version qui vient intégrer les flexbox,
je crois, ouais je sais plus, honnêtement je l'utilise plus depuis un moment donc,
Ouais non plus,
Voilà quoi donc, clairement, c'est intéressant, jquery je pense quand même pour revenir dessus,
c'est qu'il va falloir un bon moment avant de le voir disparaître et nettoyer un peu tout le web,
parce qu'il y en a vraiment partout quoi, d'ailleurs j'espère un jour que WordPress va le dégager aussi,
puisqu'il est par défaut, et que étant donné que WordPress est 30% des sites,
ça fait beaucoup de jquery sur le web, mais bon, dans quelques années j'espère que ça aura,
on aura nettoyé tout ça, parce que enfin, enfin enfin, enfin un épisode,
C'est une question de temps,
Ouais enfin un épisode spécial jquery, on peut faire un épisode,
carrément parce que vraiment pas à l'intérêt aujourd'hui d'utiliser, mais bon,
voilà voilà, donc bah concernant Tywin,
qu'est-ce qu'on pense, on a tout dit pour l'épisode ?
Ouais pour moi on a tout dit, donc non clairement il faut essayer,
je pense d'autant plus si on n'a pas trop la fibre design en tant que développeur,
ça nous permet de rester dans un cadre, et en fait ça nous apporte de la customisation
avec des valeurs persistantes, donc ce qui c'est plutôt pas mal,
donc non ça amène beaucoup facilité, rapidité, etc.
Donc non, non clairement il faut casser la barrière au départ,
et il faut vraiment tester, et puis après on voit peut-être que ça ne matche pas pour tout le
genre de choses.
T'avais quelques URL pour, je crois que des composants après l'emploi,
ou autre comme ça, qui s'adaptent ?
Ouais absolument, après Tywin CSS c'est vraiment, c'est open source,
par contre ils sont en train de construire une bibliothèque qui est payante,
mais bon, à côté, c'est un autre projet à côté qui s'appelle Tywin UI,
où pour le coup ils designent directement les composants avec Tywin,
mais enfin c'est vraiment un projet indépendant, donc si tu veux gagner du temps,
c'est un peu normal, les gars ils bossent déjà sur Tywin CSS,
il faut bien qu'ils gagnent un petit peu d'argent, donc un side project où ils vont avoir de notre service,
enfin c'est le minimum qu'on peut leur accorder.
Donc non, là-dessus c'est deux trucs différents,
après il y a aussi, je crois qu'ils ont plusieurs sur le projet,
un truc qui s'appelle TailBlock, blocks, on mettra les liens de toute façon,
mais pareil, lui c'est un peu le même concept que Tywin UI,
où ils viennent justement faire des composants avec Tywin,
et tu peux créer tes trucs copy-paste très rapidement, donc ça c'est plutôt pas mal.
Après il y a une bibliothèque qui s'appelle TywinComponent.com,
où là tu vas retrouver plein de composants, pareil, prêts à l'emploi,
par contre eux ils viennent intégrer du JavaScript,
donc parfois si tu es sur React, si tu es sur Vue,
moi personnellement je préfère avoir le composant designé,
et après c'est moi qui intègre, moi-même en JavaScript,
comme ça je fais mes propres choix et c'est un peu mieux.
Et il y a même un framework pour générer des emails basés sur Tywin,
et donc en fait tu vas designer ton email avec Tywin,
tu vas le lancer sur ton build et lui il va te générer tous les trucs,
parce que bon la création d'emails designé c'est hyper objet,
bien sûr, on adore ça, et pour le coup lui ça vient builder,
et il est conforme en fait à tous les navigateurs,
donc c'est un petit peu le MG ML en version Tywin,
donc c'est plutôt pas mal.
Personnellement je n'ai pas testé, donc il faudrait que je teste.
Après sur le site officiel, enfin sur le repo de GitHub,
il y a une section sur awesome Tywin,
qui pointe vers un autre repo GitHub,
pour le coup il y a tout référencé sur tout l'écosystème Tywin,
et là il y a beaucoup beaucoup de ressources,
mais carrément les deux trois plus gros c'est ça.
Le côté couleur c'est pas mal, générer tes couleurs,
générer tes gradients aussi,
si tu veux faire des backgrounds avec des gradients,
ou tu veux faire des bordus en même avec des gradients,
il y a des plugins pour faire ça,
je suis dit il y a vraiment tout un écosystème,
mais un niveau de customisation qui est assez fort avec des extensions.
Ok, c'est bien puisque c'est important d'avoir une grosse communauté.
Ça réconforte en fait de l'utiliser,
de se dire que ce n'est pas un projet qui va disparaître d'ici un an,
il y a une grosse communauté dans tous les cas.
Là on est, enfin je te le dis, il y a plus de 24 000 stars sur GitHub,
il y a 2000 comites, le truc il y a plus de trois ans,
il y a tout un écosystème autour,
donc clairement on n'est pas sur le framework de trois étudiants
qui sortent du dune école et qui font leur truc un peu ésotérique,
et tout.
Non, là c'est vraiment solide, c'est vraiment solide,
c'est implémenté partout, sur plein de sites en prod,
pour le coup il est largement mature pour pouvoir s'y pencher de manière
vraiment sérieuse et commencer à jouer avec pour voir le potentiel,
et peut-être ça matche, peut-être ça ne matche pas, et c'est pas grave,
mais en tout cas faire un micro projet avec pour voir le potentiel et voir comment ça marche,
moi ça m'a permis de casser des barrières, en fait je pensais être des problèmes,
alors que ça n'était pas, clairement.
D'accord, bon, ok.
Bah écoute, nickel, mais écoute, mais non c'est à toi de faire un truc en taïwine.
Je suis chaud comme d'adresse, non, non j'ai bien envie.
Nickel.
Bon bah écoute, on va arrêter pour l'épisode,
je pense qu'on a bien résumé tout ça, et puis on se retrouve dans un prochain épisode
pour le développement, et normalement ça sera du SEO,
d'après ce que j'ai programmé.
Exactement, on sera avec Nicolas qui nous parlera du SEO,
de toutes les best practices aujourd'hui,
quand en 2020, et comment en tant que dev, on peut intégrer
toutes les bonnes pratiques SEO directement à la conception,
pour éviter de refaire des choses qui peuvent être faites directement quand on développe notre site.
Yeah, bon nickel.
Absolument.
Bon bah on vous dit tout ça bientôt, ciao.
Ciao ciao, merci à bientôt.