 Bonjour à tous, du coup on va être ensemble pendant les 40 prochaines minutes et on va dîner aussi. Donc on va parler de frontes, essentiellement, de CSS. Petite de la conférence comme bien dit Paul, je n'aime pas écrire du CSS depuis je t'aime mieux. Si vous voulez juger du jeu de mots, vous pouvez. On va commencer par une petite présentation des familles, comme d'habitude. Qui je suis ? J'ai Thomas de Neulin. Certains me connaissent parce que ça fait 10 ans que je fais du WordPress. Enfin que je suis dedans en tout cas. Pour ceux qui ne me connaissent pas, aujourd'hui je suis directeur technique du coup de WP Ambrella. Qui est une solution de gestion de sites multiples. Donc généralement ceux qui ont beaucoup de clients. Vous avez deux sites, c'est beaucoup. Enfin c'est plusieurs, vous pouvez l'utiliser et c'est vachement pratique parce qu'on centralise tout ce que vous voulez faire. Des updates, des backups, etc. Voilà pour la présentation. Et en tant que développeur, je fais du back, du front, des DevOps, de la base de données, de la frappe, tout. Puisque je suis tout seul. Enfin on est deux sur WP Ambrella mais je suis le seul tech. Du coup je fais un peu de tout et du CSS. Et ce n'est pas vraiment le CSS que j'aime pas parce que dans la frappe je n'aime pas le CSS. Mais ce n'est pas le CSS que j'aime pas. C'est plutôt comme une autre qui est très bien. Sinon elle serait plus là. Le fait qu'elle réagit le web avec le HTML depuis le début. Et ce n'est pas prêt de changer. C'est surtout qu'en fait j'ai besoin de produire. Donc tout développeur, voilà il y en a quand on est des flemmards, etc. Il faut, on veut faire le moins de code. C'est bien moins de code, moins de bug. Ça c'est une vérité. C'est vrai tout le temps. Donc moi ma problématique c'est que j'ai besoin de produire le plus vite possible de manière qualitative. Et le CSS c'est une stack qui aujourd'hui devient plus en plus efficient grâce à des technologies qui sont irrégées. Donc on va faire un petit retour à le futur. J'ai mis 10 ans parce que faut un chiffre. On va pouvoir monter à 12 depuis l'existence du CSS si vous voulez. Mais globalement comment s'est produit l'évolution du web et du CSS ? On va dire 10 ans. Désolé s'il y a un truc c'était 11 c'était pas grave. Contre quelque chose grossi, c'est à peu près vrai tout le temps. Et d'ailleurs partie à partie c'est une conne qui est technique mais aussi l'idée c'est de faire la philosophie un peu tout ça. Et vous vous transmettre les idées. Contre quelque chose grossi, une équipe, une stack, etc. Il faut des méthodologies. Ça c'est indéniable. C'est-à-dire que dès lors que vous passez de 1 à 2, vous avez une augmentation de 100%, il va falloir se mettre en accord. Les CSS il y a subi. C'est-à-dire qu'il y a plus en plus de demandes, de plus en plus de besoins de sites web. Il y a 10 ans WordPress ne faisait pas plus de 40%. Aujourd'hui des demandes de WordPress et là en l'occurrence c'est pas que WordPress, le CSS. Il y en a tous les jours. Une méthodologie ça nous apporte quoi ? Ça nous facilite le développement, c'est pour faciliter le développement, la collaboration ou encore la performance. Et je parle pas de performance web, je parle de performance, l'efficience de votre productivité. Est-ce que vous êtes performants quand vous codez ou pas ? Les méthodologies qui sont arrivées, moi j'en connais surtout une mais je suis allé sur Wikipédia. Je connais le BEM. Je pense que c'est à peu près ce que tout le monde a entendu parler, mais il en existe en fait plein. L'OCSS, le ACSS, le O... le SMACSS, je sais pas si on vous dit vraiment ça comme ça, mais il y en a plein et vraiment elles existent, puisque même si vous vous utilisez le BEM, il y en a d'autres, ils utilisent d'autres choses. C'est une première recette qu'on a dans notre petite tambouille de CSS qu'on fait aujourd'hui. Après, il fallait choisir entre ce qu'on fait du laisse, du procès, cesse, du SS, cesse, du stylus et puis moi j'aime pas les points-vergules. Essayez que ça. Bref, ça c'est déjà un p'tit meekmak. Mais c'est pas tout. On s'est amusé à choisir des frameworks, j'appelle TEM. Le plus connu je pense, bootstrap. Pourquoi TEM ? Parce que c'est pas un utilitaire, généralement ils vous embarquent des composants. Donc en fait ils vous aident pas, ils vous aident mais ils vous aident dans le TEM qu'il a envie de vous faire faire. Le preuve des combats sur un site, oh c'est un bootstrap. Ça veut dire que c'est un TEM quelque part. Et je parle pas de TEM WordPress, je parle visuel. Il y en a d'autres, il y en a d'autres sur la chaîne. Donc vous choisissez celui que vous voulez. Tous ces choix, il n'y a aucun jugement et ils se font bien. Là c'est juste à fait. Et à travers tout ça, maintenant qu'on a tout cet embout, il faut bien s'organiser. Donc on a des outils de compilation. On va avoir Bower, Girl, Brunch, Grid, Webpack, Parcel, d'autres. Bower il y a un petit ouil parce que si vous l'utilisez, je vous conseille d'arrêter parce qu'il n'est plus maintenu. Et pas parce qu'il n'est pas bien. C'est les développeurs eux-mêmes qui en disent, allez sur Webpack. C'est marquant, pas juste d'accueil. Et il y en aura encore d'autres. Ça évolue tout le temps. Actuellement il y a TurboPack qui est excellemment bien. Du coup nous on utilise mais nativement puisqu'on fait d'une LGS. Donc une fois que vous avez tout ça, vous avez pas codé. Vous n'avez pas écrit CSS. Vous n'avez pas produit. Vous avez passé une semaine à configurer votre environnement. Donc ce n'est pas très efficient. Alors après on va dire, maintenant on va le faire en une heure. Oui mais t'as pris combien d'heures pour le faire en une heure ? Moi je veux qu'on s'intéresse à l'essentiel. Et c'est quoi l'essentiel quand on fait du CSS ? C'est de se concentrer sur la mise en page. C'est bien le seul but de pourquoi on fait du CSS. Ce n'est pas de se dire, j'ai une stack de dingue. Concrètement, moins j'en ai, mieux je me porte. Mais je vais pas contre les dépendances parce que quand vous avez 20 dépendances et qu'il faut les mettre à jour, bon courage. Et tout ça dans le but toujours le même, se faciliter le développement, la collaboration ou les performances de ce que vous faites. Basique, simple. C'est simple de faire compliqué mais c'est compliqué de faire simple. Donc je vais vous présenter Telwith CSS. Je ne vais pas vous faire un écueil complet de comment ça fonctionne. C'est la meilleure doc que j'ai vu toute ma vie comme celle de Stripe. Concrètement, si vous irez plus loin sur moi, je ne peux pas vous faire un cours en 40 minutes, 35 maintenant. Donc je vais vous faire un tour d'horizon de ce que c'est, le potentiel et surtout quel est le paradigme qu'il est en train d'amener. Et finalement ce sur quoi il va falloir penser quand vous allez faire du CSS. Après vous n'avez le droit de pas l'utiliser. Vous pouvez mais souvent on s'y rapproche. On s'y rapproche pour quoi donc on va déjà expliquer qu'est-ce que c'est comme framework. C'est un framework CSS utility first. Ça ne vient pas en contradiction avec le mobile first. Ça ne vient pas en contradiction avec ces éléments-là. Ça veut dire qu'au utility first c'est une boîte à outils. Je vais vous faire plein d'analogies et vous en aurez peut-être qui vont vous venir. Une boîte à outils ça vous permet de composer. Quand vous montez un meuble IKEA vous avez une boîte à outils et vous composez le meuble. Vous vous concentrez sur produire le meuble. Je vais faire un super marteau de la mort qui va me faire faire le meuble. La fin c'est un meuble. C'est le meuble qu'on regarde. Et c'est vrai vous prenez ce truc et vous le dupliquez dans toutes les idées que vous avez et c'est vrai. Et actuellement c'est un système globalement Web qu'on a, GIS etc. C'est ce paradigme de la composition donc c'est les technologies tournes autour essentiellement sur le fait de composer. Composition composer. Pas composer PHP, rien à voir. C'est vraiment le mot composer et que ce soit avec React, avec VU ou même d'autres fondamentaux algorithmiques comme le design paterne de la composition le truc existe depuis les années 90. Donc ce n'est pas nouveau. Mais ça existe et en fait dans les technologies globalement quand on fait du dev il y a des itérations. C'est à dire que le PHP a eu des itérations à la base PHP c'était un langage de templating comme tweak. Il faut se souvenir de ça. Aujourd'hui on tend vers un langage objet. Le GIS vous avez beau dire que oui il y a un nouvel libraire qui sort tous les jours. C'est vrai. Par contre il n'y a pas des frameworks matures, stables qui sort tous les jours. Ça c'est pas vrai. Il y a eu des itérations. Il y a eu la première une des premières itérations avec Babylon Humber Angular. Le sorti vainqueur c'est Angular. Et Humber il n'a pas un virage aussi. Mais Angular a fait son virage. Il a fait son virage quand React est vus dans des nanananans. Ce n'est pas bon ce que vous faites. Le paradigme qu'il faut adopter pour cette techno c'est la composition. C'est un fait. C'est comme la programmation object. Vous aimez ou vous n'aimez pas. Ça c'est votre choix mais ça existe. Je n'ai pas à fonction de comme ça. D'autres nets fonctionnent comme ça. Vous pouvez faire la programmation fonctionnelle mais c'est pas un mauvais langage. On en a besoin en certain moment. Ou de la programmation procédure. Donc ça c'est ce qu'il faut que vous ayez en tête. C'est que Talweed c'est une boîte à outils. Ce n'est pas des thèmes. Ils font des thèmes mais c'est une boîte à outils. Et à partir de là vous allez pouvoir composer. La recette. Parce que bon tout à l'heure on a vu d'autres belles tambouilles qui étaient monstrueuses. La recette de Talweed elle est simple. Une dépendance Talweed. Et une et une seule. Un seul fichier de config que vous n'avez même pas besoin de configuré nativement si vous n'avez envie de rien faire de plus. Ce qui s'appelle Talweed.config.js Allez le chercher celui-là. Et trois lignes d'import. Et c'est même pas vraiment des lignes d'import. Parce que c'est une instruction at Talweed. Qui permet juste de lui dire il en a besoin de 3. Un pour reset. Un pour je ne sais plus quoi. Vous les mettez les 3 si vous ne les mettez pas. Non je ne sais pas. Faut quand même faire des choses. Moi je vous donne un supplément fromage. C'est deux lignes de scripts. Qu'on verra c'est plutôt que de taper à chaque fois la ligne de commande. Vous faites un alias Dev et puis ça lance Talweed en mode Dev. Vous faites un alias Prod. Puis ce que vous voulez start. Puis ça fera un alias de Prod. Et c'est tout. À partir de là vous écrivez plus aucun CSS de votre vie. Puisque l'application d'un brella a 0% de CSS. Que ce soit notre site. Que ce soit notre application. 0%. Je n'en ai pas écrit depuis 2 ans. Et je fais des trucs qui marchent. Normalement. Et c'est en fait c'est ça qu'il faut réfléchir. C'est pas est ce que c'est Talweed qu'il faut prendre. C'est qu'est ce que permet Talweed et la philosophy Talweed qu'il faudrait suivre. Après vous prenez ce que vous voulez. Je parle beaucoup. Donc je vais vous parler de la recette et ça ressemble à ça. Donc si vous voulez ne plus écrire de CSS vous faites ça et vous arrêtez d'écrire du CSS de toute votre vie. La dépendance qu'on a tout en haut de Talweed il le faut bien. Les petits suppléments fromages d'AV buid qu'on a donc en Dev on watch. Le tir est W et en Prod on magnifie. J'ai pas Webpack J'ai pas SCSS. Bah non j'écris pas de CSS là j'ai le module de config que j'ai étendu et j'ai pris Marie seconde d'Arri. C'est les couleurs du site du WorldCamp et on fera un petit défi tout à l'heure pour vous montrer comment on va la récupérer. C'est pas facile. Pas si facile entre guillemets. Et les trois lignes entre guillemets d'un port enfin c'est les instructions de Talweed pour démarrer. C'est simple. Et je vous promets je ne vous vends pas du rêve. Donc on va s'intéresser maintenant à comment ça fonctionne derrière. Parce que c'est bien beau de pas écrire du CSS ou des choses à un moment donné. Sinon ça serait... on n'aurait plus de boulot. Donc comment ça fonctionne ? Le principe d'utility first c'est de vous fournir des classes. Les classes HTML. Une classe égal. Une propriété. Display block. Block. Display in line. In line. Et pour les deviner il n'y a pas besoin de sortir de l'accus de l'hôpital c'est le type. Vous pensez au type. Vous pensez à votre valeur et vous la mettez. On va prendre des exemples et on va partir de celui-là. On va faire un margin top. Alors je vais partir sur certains postulats. Attention vous pouvez avoir toutes les hypothèses que vous voulez. Oui mais mon client machin, mon designer. Après vous composez avec ce que vous avez. Mais là on parle d'un postulat pour vous montrer le potentiel. Donc le postulat c'est de dire que votre design system, si vous travaillez avec l'OM, la plus petite valeur de votre design system est de 0,25 REM. Qui comprenait le support à 2 pixels. Pour construire la classe thailouine que je dis construire c'est c'est un mémotechnique en fait. Vous allez sur la dog, vous la trouvez en instant. C'est juste en fait c'est l'habitude qui va se forger et après vous allez, ça va venir tout à fait naturellement. Donc margin top. MT. Évidemment. Et le 0,25 REM se transforme en 1. Ça c'est le design system de base de thailouine. Si votre designer a 1400 pixels vous pouvez l'étendre. Tout, tout, tout est configurable. Donc il n'y a pas de oui mais moi. Non, tout est configurable. Mais vraiment, c'est... On peut tout faire. Donc 1 c'est la plus petite fondération sur mes 0 pas ses 0. Donc 1 c'est le pif le plus petit. Donc si c'est le système le plus bas, c'est plus bas. Si vous mettez 2, je vous laisse dominer ce qu'il se passe. x2 Si on met 8, x8. Et tout ça vous les avez. Après, peut-être que là vous faites pour là, j'ai pas envie de ne pas lucher la configuration pour changer mon design système et puis moi je vais possèder des pixels parce que le designer il s'est trompé. Il a mis 19 et 20 et c'est jamais carré. Donc je vais pas... C'est difficile de créer votre design system. Ça marche. On reprend le margin top et vous voulez 11 pixels cette fois-ci. MT. Et valeur. Et là, les crochets, il faut les garder. Il faut pas les enlever. Quand vous allez mettre des crochets dans les valeurs de Thailweed, ça va lui permettre de lui faire comprendre qu'il doit créer une classe dédiée avec cette valeur-là en margin top. Donc si vous faites ça MT 11 pixels, la classe n'existe pas. On verra pas. Ne cherchez pas de feuilles d'ostine, il n'y en aura pas. Il va écouter vos fichiers. Il va regarder, il va dire, oh il m'a mis une classe MT-11 pixels. Et il va vous créer la classe dédiée. MT-11 pixels dans laquelle il va mettre margin top de points en pixels. Donc je vais pas écrire de CSS. Et c'est vrai à peu près pour tout. Comme je vous le disais, vous pouvez étendre littéralement tout. Vous pouvez changer ces couleurs, vous pouvez tout changer. Il a représenté aussi toutes les classes. Enfin toutes les instructions CSS. Et donc globalement quelques exemples un peu plus qu'on peut voir. Et la doc est long, long, long, long parce qu'il faut faire toutes les instructions. Donc je vais pas faire un exemple exhaustif. C'est juste pour vous montrer la facilité en fait d'appréhension. Si on prend les marges M margin vous mettez ensuite ce que vous voulez. T top, R right, L left, B bottom. Vous voulez toutes les marges, vous mettez T pour tirer. Et après vous faites ce que vous voulez. Donc là MB5, MB tirer, là je mets 4 pixels, je mets le M3, M4, une marge 4. Et on s'en fout de la valeur. C'est pas la valeur l'important qui est derrière. C'est la représentation que vous pouvez vous en faire. L'important c'est de lire M4 sur la divre pour comprendre que la divre a une marge. Dans toutes les classes que vous écrivez vous pouvez pas le deviner. C'est pas possible. Sauf si vous avez fait ça. Et donc dans ce cas-là vous faites le paradigme donc l'utiliser Taluit. Pour la couleur, la couleur du texte, la texte, tiré, la couleur. Donc texte blue 500. Taluit fonctionne et mais vous faites ce que vous voulez. Moi, dans ma conflit tout à l'heure, j'ai mis primary, seconde d'arrêt. Donc si je voulais ma couleur primaire, texte tiré, primary. Et par des fois, Taluit a molte couleurs qui pondèrent ensuite sur des dégradés de 50. Ça démarre à 50, après ça fait 100. Et après ça va jusqu'à 900 par tranche de 100. Donc 50, 100, 200, 300, 450, 600, 700, 800, 900. Et nous, en vrai là, la couleur, c'est BG indigo 600. Voilà. C'est facile. Et une fois qu'on l'a en tête et qu'on pose toute la journée dessus, bah en fait, c'est quoi la couleur ? Je sais pas, c'est indigo 600. Mais ne me demandez pas les exodésimals, je ne le connaîtrai pas. Et concrètement, on s'en fout. Si vous voulez gérer l'opacité, je vais vous dire qu'il peut tout faire, c'est que la texte blue 500 slash 25, c'est-à-dire qu'il divise par 25 l'exodésimale, donc il crée une opacité de 25%. Taille du texte, texte tiré, bah la taille de votre texte SM, LG, XL, donc small, large, MD, medium. Ouais, ça me paraît assez... entre guillemets du bon sang, j'aime pas trop ce terme, mais c'est le cas. Et j'ai regardé tous les états, hover, machin. Et là, par exemple, c'est exemple afteur de point de teint, tiré, valeur, toujours gardé en esprit, peut-être décroché, ça va être une valeur qui va piquer l'étoile. Ça, bah par exemple, vos petits labels avec le petit étoile récroyeur, quand vous voulez saisir un peu seulement, il faut que l'email, il doit être saisi, donc vous mettez l'étoile. Il y en a qui font ça en CSS et qui créent un afteur, et ils disent dans le content de l'afteur, on met l'étoile et comme ça, ça fait la petite étoile sur tous les labels. Bah vous avez créé ça et ça le fait. Donc vous avez même plus d'un de le mettre avec du PHP ou ce que vous voulez. Donc, là je vous vois venir. Il y en a partout. Oui, il y en a partout. Mais c'est facile. Alors désolé, j'espère que vous voyez assez bien. Mais en fait, il y en a partout, mais c'est littéralement facile de lire ça parce qu'en fait, vous ne lisez plus que votre HTML, parce que de toute manière, c'est à lire, il n'y a pas de CSS. Mais si on le lit, vous allez pouvoir vous représenter ce qui est appliqué au DIV. Donc si on prend celle-là, mt36 lg2.mt44 et ma margin Tom 36, un poids de 36, on s'en fout des pixels. C'est le poids 36, c'est beaucoup. C'est 36 x 1, c'est-à-dire qu'il y a une bonne marge. Lg2. Ça veut dire qu'en large, donc en écran large, on est à mt44. Donc là, il y a un phénomène de responsive. De partout, on met mt36, et dès qu'on passe en large, on met du 44. Celle-là, cette DIV, cette section, elle est en relatif avec un overflow hidden. C'est facile à lire. Elle a un bac grande de 600 de bleu, pt, padding tom, padding bottom. SM, donc en small, on passe en grec 32. Donc le padding top et bottom est plus petit en normal. Et dès qu'on passe en small, il est plus grand, il est à 32. C'est la seule chose qui nous intéresse. Et là, vous pouvez vous visualiser si bien qu'on peut, ce qui est en train de se produire. Cette section, elle a un fond bleu. C'est vrai. Si vous mettez tôt-tôt l'après-line, vous ne le savez pas. Et si vous nommez super bien WP, tiré blog, tiré monte, tiré, tiré BEM, je ne sais plus quoi, vous ne vous en souvenez pas non plus. Parce que vous vous en souvenez quand vous travaillez sur le projet, mais qu'on revenait six mois plus tard, vous ne vous souvenez plus du design. Et vous vous en cognez, littéralement, de la valeur d'exadissimal de vos couleurs. Vous vous en cognez parce que c'est variabilisé. Et maintenant, les variables sont natifs en 16, donc si en plus vous faites les choses bien, vous faites deux points en haut et vous mettez des variables. Donc il y en a partout. C'est vrai. Mais c'est pas mieux. Ça, c'est aussi du WorldCamp. Félicitations à Florian quand même, parce qu'il est très bien. Et le HTML et le CSS, c'est très bien. Mais quand je dis c'est pas mieux, c'est qu'en fait, ce qu'on fait aujourd'hui, c'est littéralement pas mieux. Je vous mets au défi. Donc moi, tu as dû aller me palucher pour aller trouver des couleurs de la fonte biétrie et du programme. Donc là, j'ai la surbrayance sur le SPAN programme. Donc c'est WP, tiré blog, tiré navigation, tiré item, underscore, underscore label, et certains font du BEM autrement. Mais là, ça fonctionne comme ça. Ok, ça m'avance à rien. Je ne sais pas qui est la couleur du truc. Je le sais parce que je suis surbrayé et que je sais ce qu'il y a en train d'être fait. Donc c'est qu'un cheminement d'esprit. C'est de l'efficience, de la performance dans votre code, enfin dans votre productivité. Donc j'ai cliqué dessus. Tu dis bah, il va avoir la couleur. Alors, non, non, inérite. Ça m'aide. Non, non. Elle est là. Elle est variabilisée. Ouais, j'ai toujours pas l'exam. En fait, je m'en fous. C'est pas grave. Et ben, tal ou huit, vu qu'une classe égale, une propriété, bah vous cliquez dessus, vous l'avez. Donc, dans le pire des cas, vous n'avez même pas 2 ans d'ouvrir votre console ici pour savoir quelle couleur est appliquée. C'est bleu, c'est raide, c'est yellow, c'est machin. C'est votre couleur. Et si vous voulez l'exam décimal, bah en fait, il n'y a jamais d'inérite. Il n'y a pas besoin. Puisqu'il y a plus d'un, le phénomène de cascade est largement diminué. Et donc ça aussi, on y verra un peu plus tard. Une gamme de performance naturelle. Souvenez-vous, basique, simple, et on fait de la composition. C'est-à-dire que les classes qu'on fait aujourd'hui, vous composez strictement rien. Vous normalisez votre esprit. Mais vous ne composez pas. Puisque demain, quand vous revenez, vous aurez appris d'autres trucs, puis on vous aura dit que le BEM, finalement, on met un tiré, un an tiré, tiré, puis vous changez de manière de boite. Et puis ils mettent des underscores. Et puis il y en a... Donc en fait, ce n'est pas standard. Talouid, c'est un paradigme. C'est standard. Alors oui, bootstrap est standardisé, mais il n'est pas standardisé pour bootstrap. C'est-à-dire que c'est class. Button, ça veut rien dire. C'est toujours la... Je vais être grossier toujours le même... le même merde. Mais button, vous savez toujours pas ce qu'il y a sur le bouton. Il est bleu, il est yellow, il est bleu, il est bleu, il est bleu, il est bleu, il est bleu, il est yellow, il a du focus, il n'y a pas de focus. On ne sait toujours pas. Et soit dit en passant, bootstrap, qu'est-ce qu'ils ont fait depuis le Talouid? Ce que Talouid existe depuis 5 ans, en 1er novembre 2017, ce n'est pas nouveau. Depuis que Talouid v2 a explosé, parce que là, ils ont littéralement explosé l'escore. Qu'est-ce qu'a fait bootstrap? C'est vachement bien ce qu'ils ont fait Talouid. Étonnamment, ils font pareil. Parce que c'est pas le fait que bootstrap ou Talouid est meilleur à l'un que l'autre. Le paradigme et sa marche, la preuve, le pattern de composition en objet, il existe depuis les années 90 si on l'utilise. Si il ne marchait pas, il existerait plus. Ou alors, on l'utiliserait plus. Et donc, c'est comme de la musique. Je fais du piano depuis fort longtemps. Alors, tout le monde ne compose pas et vous crée des partitions, mais en fait, on dit quoi quand on fait de la musique? On compose. Ça veut dire ce que ça veut dire. La musique, vous avez des notes, vous avez des valeurs, vous avez d'autres vicieuses. Et après, vous créez une partition. Et malgré tout ça, malgré le fait que ça soit génial, parfois, il y en a quand même partout. Mais c'est pas grave. C'est pas grave parce que vous avez les outils pour comprendre la partition. Donc, si vous avez des musiciens dans la salle, vous reconnaîtrez qu'il y a quand même beaucoup de notes. S'il y a des fans d'anime, c'est la partition d'un raveau dans Tokyo Ghoul. Ça pique. Mais une fois que vous écoutez la musique, c'est magnifique. Mais là, trop bien, j'ai passé 4 heures. Mais ça marche. Et nous, on s'en concentre sur quoi, sur l'essentiel et l'essentiel, c'est la mise en page. C'est pas d'écrire une feuille de style. C'est... Donc, la composition avec WordPress parce que tout ça, c'est bien beau. Mais comment on fait? Et bien WordPress, en fait, de fait, nous fournit déjà des choses. Sans qu'on le sage, vraiment. La template hiérarchie, sans le savoir, c'est composer. Et l'autre fonction magique qui est géniale, c'est Get Template Part. Et ça, c'est la page d'accueil de WP-1. Voilà, on la composait. Donc pourquoi on la compose? Get Header, je vais récupérer mon composant Header. Alors oui, c'est le fichier d'Ederp.hp, mais c'est un composant au final. Vous avez composé votre page avec le Header. Vous avez composé votre page avec le footer. Et ensuite, on a réfléchi par section. Donc vous avez le V-Roll, les partenaires, les features, les testimonials, etc. Après, il faut coder à l'intérieur, évidemment. Je ne dis plus à code plus, il dit juste qu'on n'a pas besoin d'écras de CSS. Et il y a un autre copain que beaucoup de gens aiment. Gutenberg. Vous composez. Et je suis quand même gentil, c'est que vous enlevez Gutenberg et vous pouvez mettre n'importe quel page du builder. C'est vrai. Puisque l'élémentateur, c'est la composition de page. Je n'utilise pas d'un point de divise que vous voulez. Vous composez vos pages. C'est une notion qu'on a déjà devant les yeux et qu'on n'a juste pas. On ne s'en est pas rendu compte qu'en fait, on pouvait s'en servir de cette manière. Comment procéder ? Parce que maintenant, c'est bien beau. Là, je vous montre une page. C'est une page test qu'on pourrait avoir tout à l'heure. C'est un peu de temps pour la démo. Dommage, on ne voit pas la bordure du bouton. Sacré rétro. Il fait des trucs au focus. Il a un ouvert. Il a des trucs qui lui persilent. Il a un icône. Donc ça, c'est un bouton sur ma page d'accueil. Et il y en a un autre. C'est exactement le même qui est impossible de voir la différence. Puisque c'est exactement le même. Par contre, ils sont utilisés de deux manières différentes. Et c'est ce que je vous vous présente pour que vous abordiez la problématique avec WordPress. Ici, donc c'est dans le code littéralement dans l'index.php ou font de page, je ne sais plus. Un de deux. Et là, c'est un bloc que t'emmerdes. Et c'est exactement le même. Et je n'ai écrit le code qu'une seule fois et 0% de CSS. Il est vraiment stylé le bouton. Et c'est ça qui est pratique. Et en fait, une fois que vous avez standardisé ça, vous pouvez facilement faire du élément tort. Créer un bloc custom, je pense qu'on peut faire ça, et reprendre le bouton. Vous avez qu'une seule chose à faire et on va voir un peu de code. Et c'est une console CSS, mais on ne verra pas de CSS. Ça, c'est le bouton. Donc, si on se concentre sur l'architecture de mon projet, j'ai un dossier component, je suis trop petit, j'ai un dossier bloc. Bloc, c'est pour gluten d'air. Après, vous le nommez comme vous voulez, on s'en fout. Component, c'est parce qu'en fait, quand on parle de composition, on fait des composants. Et comment s'appellent les trucs sur React, donc c'est vraiment, c'est vraiment philosophie, c'est pas autre chose. Là, j'ai mon bouton avec le truc qu'il y en a partout, mais si on le lit, on le représente visuellement. Group, ça, ça va être pour les over, je crois, ce qui gère des trucs sur l'over. Je ne connais pas tout par coeur, c'est long. Mais inline flex, ring 1, ça va mettre un petit effet d'anneau derrière le bouton, item center, c'est pour les flex. Aligne item center, bah, c'est item center. Round it full, je vous laisse deviner, on fait le bord de radius en full, du PY, Y, Y c'est haut et bas, X c'est gauche, droite. Ça ne va pas changer. Donc PY2, BX4, texte SM, il est petit, focus outline 1, ring slide 200, text slide 700, ah oui, un petit taparté. Là, en plus, vous voyez les couleurs, parce qu'ils ont une extension qui vous permet de savoir ce qui se passe, en plus. Donc c'est génial. Et surtout, ils vous disent, ah, attention, on a tué des classes, mon gars, t'as mis bloc et ça marche pas les deux ensemble. Focus, donc quand on a le focus, on voit qu'il va être focus visible, quand il est visible, on va voir qu'on va avoir un outline blue de 600 et quand il est visible, le ring slide, il passe en 300, etc., etc. Ça, c'est le tailweed. Ça, c'est votre sile. Et vous avez le fichier PHP, donc j'ai appelé c'est le bouton secondaire, secondary. Et je l'envoie des arguments à ce bouton. Donc son lien, son texte et potentiellement un icône. Si je n'ai pas le lien ou je n'ai pas de texte, on arrête, et là, on fait notre petite logique PHP pour faire notre truc. Donc si qu'il y a un icône, je vais rajouter un span pour faire une margin 9 de 3, comme ça, on espace l'icône du texte et puis on affiche le texte ou sinon on affiche le texte. J'ai fait une petite fonction pour standardiser dans mon code, c'est facile. Au moins, si quelqu'un veut récupérer un composite en bouton, il fait get button. Il me dit le type, secondaire, secondary. Et il passe les arguments. On a donné le lien, le texte. Et si t'as un icône, tant mieux, tant de poste pour obligatoire. Donc ça, c'est la petite non obligatoire et plutôt pratique. Et après, vous n'avez plus qu'à utiliser cette fonction. Donc soit dans votre code, soit dans un bloc. Là, on est dans le bloc. Donc ça, c'est un bloc. En beaucoup, c'est un bloc ACF et on peut très bien étendre les blocs natifs. Donc moi, là, j'ai fait un vrai bloc, c'est nul. Florian Truchot me dirait étendre le bloc natif et il a raison. Donc bloc, je récupère mes informations du bloc. Et go get button avec les infos. C'est terminé. J'ai un bloc ACF. Et dans le index.php, ouais, c'est en plus ce que je fais dans index, eh ben, go get button et là, j'ai mis en dur les informations, mais ça marche. Ça montre que vous pouvez même développer rapidement vos petits trucs. Donc vous avez fait des blocs sans avoir fait de Gutenberg ou pas. Vous n'avez toujours pas écrit de CSS et vous avez une page plutôt sympa. Et à la fin, on fait des trucs comme ça. Ça, c'est notre application et dans tout ce que vous voyez là, il n'y a pas une seule ligne de CSS. Comme ici, il n'y a pas une seule ligne de CSS pour plus. Je n'en vois plus l'intérêt. On en était là, donc c'est une interface 0% de CSS. Donc le mode ordre à retenir, composé. Soyez des musiciens, soyez ce que vous voulez, montez des meubles, mais composé. Une fois que vous standardisez plus en plus vos éléments, c'est-à-dire que là, le get button faut le faire donc ceux qui me disent, moi, j'ai déjà toute ma stack. Oui, mais t'as passé combien de temps à faire ta stack? On fait la même chose, créer votre standard avec ça et vous allez faire disparaître littéralement la CSS de votre... Et là, c'est un exemple d'un composant soit en voilà. Donc moi, j'ai des composants qui s'appellent système dans lesquels j'ai des sous-composants. Donc j'ai des bugs, j'ai des titles, j'ai des descriptions. Je peux même lui passer des paramètres. Je n'écris plus vu que maintenant c'est standardisé. Je n'écris même plus les classes. Je connais mon design system. Il y a un espacement, je vais en bas, je mets Space Bottom et il va me rajouter la classe qu'il faut pour faire l'espacement que j'ai demandé. Nous, on est sur une valeur de 8. Bon, ben voilà. Mais j'ai plus besoin de la savoir. Et ça crée le style. Enfin, ça crée les composants extra. En gros, pour conclure, c'est des petites choses à retenir et cette citation, c'est sur le... le site de Telui. Et je trouve que c'est assez vrai. Best practices don't actually work. Et vous aurez beau mettre en place un peu toutes les bonnes choses. Ça marche pas forcément. C'est-à-dire que là, l'exemple du CSS, c'est ce que j'ai voulu vous faire, m'a dire, comprendre. Enfin, à la fin, si vous n'utilisez pas Telui, ben, c'est pas grave. Moi, ça ne me change pas ma vie. Mais ce qui serait intéressant, c'est que vous pensiez à cette philosophie-là. Ce que vous serez plus efficient et c'est un standard facile margin top qui remette TM au lieu d'MT, franchement. C'est un non-sense. Donc, si il faut retenir des choses, c'est une boîte faoutille, prête pour n'importe quel design système, parce que elle est extensible à volonté. Nos limites. Il y avait encore des limites dans Telui 2. Il y avait encore des petites limites en 3 points de quelque chose. Honnêtement, ils ont toutes levé, je crois. Vous n'aurez jamais à écrire une solide de CSS en trop. Pourquoi ? Telui est nativement optimisé. Vous ne pourrez jamais être plus optimisé que Telui, puisqu'il n'écriera jamais plus que ce dont vous avez besoin. Si vous avez des blogs dans vos phases de style, comptez le nombre de fois que vous l'avez écrit. Il l'a écrit qu'une fois, parce qu'il n'y a qu'une classe de bloc. Donc, il vous avait forcément le CSS le moins lourd possible. Vous n'avez même pas besoin d'un plugin de cache quelconque pour faire votre boulot à votre place, puisque lui, il va le faire. Il va vous enlever les classes que vous n'utilisez pas, évidemment. Il ne va pas vous charger des classes que vous n'avez pas. Donc déjà, par rapport à bootstrap, là, il met une tartine. Et il y a la question de performance qui dit, ouais, mais là, il y a plein de classes. Alors je vous arrête tout de suite. Avant que le DOM HTML soit alourdi parce que vous avez rajouté trois classes, vous avez le temps de voir venir. Par contre, ce qui est intéressant, c'est le chargement de votre feuille de style. Ça, c'est un peu mieux. Puisque il n'y a plus de cascade en tant que tel. Donc, le moteur n'a pas besoin de rendre. Quand on a vu le truc tout à l'heure, c'est ah, je mets couleurs, ah, je mets trucs, ah, je mets trucs, ah, je mets trucs, ah, je mets trucs, je mets tous les états CSS donc que vous fassiez des transformations, des ouvertes, des focus, des afteurs, des contentes, des bifards, un truc qui n'existe pas encore, bah il gère Dark mode gérénatiquement. Et on est presque à peu près sûr de comment ça fonctionne. Dark de point, ça marche. Gère les filles donc les transformations. Une extension Taluit CSS IntelliSense pour vous accompagner sur votre idée. Au début, je l'utilisais pas. Et en fait, c'est quand même vachement pratique parce que des fois, Taluit CSS IntelliSense, donc bah, il prend la dernière. Donc là, c'est pas très utile. Voilà. Petite démo ou pas. Si le ou pas, c'était parce que je savais pas si j'allais être 40 minutes, mais là, on est... bah, il restait 5 minutes. Parfait. Si vous voulez intervenir durant la démo, vous pouvez. Comme ça, c'est aussi question, question, réponse. Et en démo, ce que je vous propose, c'est de me faire en si possible 3 minutes un bloc ACF avec plus de... Je vais juste le récupérer, du coup, merci. Alors, on voit... non, on va pas. Donc ça, c'est la petite page à bâner. Si je fais n'importe quoi. Ah, OK. Donc là, on est prêt. Oui, il faut. Il faut utiliser un ordinateur. Ça va pas marcher. Taluit.local. Très sécurisé. Non. Non. Non. Non. Donc, on va aller sur ACF. Qu'est-ce qu'il est là ? Un new. Je sais pas ce qu'on peut faire, honnêtement. Il n'a qu'une idée comme ça. Enfin, on va aller à la belle. On va dire, à la belle partielisée ou à... une carte. Ah mais du coup, on n'a pas besoin de DCF en tant que tel. On va coder du Taluit. Enfin, du Taluit. On va faire du design. Ah mais, je vais passer en recopie d'écran. Non, je vais pas. Parce que comme ça, je dirais ce que je fais. Je dirais pas besoin de me tourner. Écran principal. Parce qu'on fait la recopie. Bon. Je suis pas très douloureux. Affichage étendu. Ouais, c'est bon. Vous voyez ce que je fais, là ? Terminé. Hop. Donc globalement, donc je vais me balader avec mes deux trucs. On va switcher assez rapidement. On va se mettre sur l'index. On va pas s'embêter. Mais, on va faire une section, je sais pas, bleu. Enfin, des trucs classiques, quoi. Tout ce qu'on connaît. Voilà, des trucs comme ça, par exemple. Pour vous montrer à peu près la vitesse d'exécution et le fait qu'on fasse pas de CSS. Désolé, c'est pas pertinent, mais ça va faire à peu près. Donc, on va se positionner ici parce qu'on est en dessous du bouton. Là, on est sur... Donc là, on est au milieu. Donc là, on a un conteneur aussi. Donc, on va se mettre en dessous. On va faire déjà notre BG-Boot. 500. Parce qu'on va un BG-Boot 500. Et comme on a des grosses marges en haut et en bas, on va faire un PY que 20. Et ça fait à peu près 200. Ensuite, on va mettre un H2. Hello World. Donc là, globalement, qu'est-ce qu'il y a à se passer? On va avoir un... Déjà, on a produit une autre avec une espèce de bombe. Et le World faudrait qu'il soit centré. Attention, je ne dis pas que c'est parfait à ce que je vais faire. C'est juste pour vous montrer le truc. Globalement, on va simuler une sorte de conteneur. Donc, un conteneur, comment on pourrait faire, on va lui donner une max width. On va, je sais pas, lui donner 7XL. Donc, c'est déjà vachement large. Et lui aussi, on va le centrer. MX Auto. Pour faire le centrage. Le conteneur, ça marche ou ça marche pas? Parce que ce que je fais, ça marche même pas bien. Est-ce qu'il bubile? Oui, c'est moins bubile. Qu'est-ce que j'ai fait? Max, il est gratuit? Ah, mais c'est pas assez. C'est trop grand. Ça peut être ça. Voilà, voilà. Parfait. 7XL, c'était trop gros. Donc là, j'ai 2XL, donc on voit qu'il est... pas hyper large ou plus, mais voilà, on va dire que c'est un autre conteneur. Ça fait effet de conteneur. Vous n'avez pas besoin de créer la classe conteneur, on s'en fout. Vous faites un composant conteneur dans lequel vous composez dedans. C'est ça qu'il faut retenir. C'est pas le fait d'écrire ces trucs. On va rester à 3, c'est un peu plus haut. Lui, on va le grossir. Donc, texte... 4XL. Alors, on va faire un truc. On va même faire SM 4XL. Donc, on se molle, il sera en 4XL. Et en large, on va le mettre en texte 7XL. Je crois que... Là, vous voyez, Ntelinsense qui travaille avec moi, comme donner les trucs. Et là, en mobile ou tout le reste, on va juste mettre texte 7XL. Lui, on va le centrer et on va le rendre blanc. Voilà. Et donc, on a déjà notre responsive qui va ajuster la taille du texte. C'est vraiment pour vous montrer vite fait le potentiel. Vous voyez, la logique est abordée. Et on a déjà un truc qui arrive. On va pas forcément aller plus loin parce que vous avez peut-être des questions quand même. Mais, là, ce que je viens de faire, c'est pour aller vite. Typiquement, cette page-là, Agencies, un freelancer qu'on a là. Avec tous les composants qu'on avait, etc. Montre en main 1 heure. Et il n'y a pas de CSS. Et ce n'est pas pour vous vendre des trucs. C'est pour vous vendre des trucs. C'est pour vous vendre collaboration, efficience, performance, méthodologie. C'est tout. Et... Je ferai ma petite dédicace à Rémi Corson. Avec qui on s'est appelé il y a 2 semaines, à peu près. Il a fait 800 km juste pour voir la conf. Il a attaqué ce paradigme sans... Alors, je crois que tu connaissais Talweed. Mais, en tout cas, il a développé quelque chose lui-même qui a abordé cette philosophie. Donc, moi, ma première réponse, c'est baritiliste Talweed. Mais, en fait, ce qui est génial, c'est qu'en ayant fait ça, il a compris tout le cheminement qui s'est produit pour ce petit détremort. Après que vous l'utilisez, vous l'utilisez pas, vous aimez, vous n'aimez pas. C'est un jugement. C'est pas le but. Mais, ça vous permet, théoriquement, de gagner en productivité, mais littéralement, et surtout, vous avez une stack en moins. Et Verediq, quand vous avez beaucoup de lignes de code, vous êtes content de ne pas avoir géré l'évolution de Webpack, l'évolution de CSS, l'évolution de votre truc, l'évolution de la config de Webpack. Là, vous avez rien à faire. Et je vous montre juste, et après, on passe aux questions. Donc CSS, ils vont pas me croire, mais s'il n'y en a pas. Steel, il est là. Donc là, on est d'accord. C'est pas optimisé. On fait NPM Run. Je crois que j'ai mis Build. 837 millisecondes. Plutôt pas mal. Voilà, terminé. Et ce CSS, c'est littéralement optimisé pour tout ce qui vient de voir. Voilà. Si vous avez des questions. Merci Thomas. Dans quelques minutes, est-ce qu'il y a quelques questions ? Bonjour. Du coup, moi, je me pose une question. C'est qu'on mélange le fond et la forme comme sur Bootstrap. Et moi, c'est quelque chose qui me dérange profondément. Donc après, je comprends le paradigme, la philosophie et tout. Mais donc, c'est quelque chose qui me dérange. Et notamment, les couleurs. Enfin, on arrive à lire de HTML. Ok, très bien. Mais au niveau des couleurs, on les définit donc en dur. Quelque part, imaginons que mon client, il avait sa charte qui était bleue et d'un coup elle passe en rose. Je sais comment je me retappe tous mes fichiers. Ah bah non. Non, non, non. Je suis remplacé. T'as le 8 points configs. Si on a dit que c'est sa boubleuse étant sa primarie, vous la changez ici, ça change partout. Ah oui, du coup, on n'utilise pas bleu, machin chose, on reste le sur une main. Non, non, ça, c'est ce qui vous fournit de base. Il vous fournit de base une palette de couleurs monstrueuses qui généralement répond à peu près tous les besoins. Mais effectivement, moi, je produis plus de sites. Donc, j'ai pas la problématique de me dire est-ce que c'est la bonne couleur. Mais quand on est sur une production de sites, vous le standardisez à votre, à vos goûts, couleur, etc. Si vous fonctionnez tout le temps avec primarie, gardez primarie. Si vous voulez une classe button, faites une classe button. Mais en fait, vous n'allez pas la coder, vous allez définir en fait vos outils. C'est un peu au moment de monter un meuble, est-ce qu'on a besoin d'un marteau ou pas? Ok, et par rapport au mélange de la fond et de la forme, des recommandations du W3C, ce genre de chose. Ça, c'est un, j'invite dire, c'est vraiment pas pour vous spécifiquement, mais c'est ultra personnel, c'est-à-dire, c'est un peu le débat, espace, table. Concrètement, moi, je m'en fiche et que ça soit quelqu'un qui le gère pour moi. C'est comme pour le CSS, je n'ai pas parlé, mais il y en a qui ont pris le délire d'ordonner les propriétés. Alors, ceux qui font la main bien joué pour perdre du temps. Mais en fait, si vous voulez le faire, tant mieux, c'est votre besoin de méthodologie et l'enfaut. Mais prenez des outils qu'ils le font pour vous, parce qu'il y en a qui le font. Donc si vous voulez mais ça ne changera strictement rien d'avoir de réficience. Par contre, ce qui va changer, c'est si vous le faites à la main, alors qu'il y a des outils qui peuvent le faire. Et pourquoi pas ? Vraiment, pourquoi pas ? Le but n'est pas de dire que c'est bien ou pas bien et donc mélanger le point de la forme, je trouve que c'est un débat de ce style ou à la fin, je pourrais pas aller aussi vite si je faisais pas ça. Et là, ça me permet d'aller plus vite. C'est stable, c'est mature, je produis. En fait, j'ai que des points positifs pour moi, ça reste de l'état du débat à la fin. J'ai pas eu de problème de performance. Là, je me serais posé des questions. J'aurais d'autres problèmes, c'est problématique. Voilà, c'est pour ça que je serais pas trop quoi répondre sur le souci. Il y en a, ils n'aiment pas réagre parce qu'ils pensent qu'on fait du HTML avec du JS. Enfin, c'est le principe. En fait, il y a des débats partout. Il y en a qui vont mettre du HTML dans les temples de PHP. Alors qu'il y en a, oui, mais faire un récroyeur du HTML, oui. En fait, c'est vraiment l'enjeu à la fin du truc. Merci pour ta réponse. Malheureusement, on est un peu pris par le temps. Je vois qu'il y a quand même beaucoup de questions. C'est un sujet qui a l'air de bien vous intéresser. N'hésitez pas à en discuter avec Thomas après la conférence. Il y a aussi du temps, donc voilà, n'hésitez pas.