Session du 25 février 2023 à 13h30
Pratique & Live Coding
Développement Web & Frameworks
Frontend & UI
Deviens membre Premium magic_button
Cette session de mentorat est réservée aux membres Premium. Rejoignez-nous pour accéder à toutes les rediffusions des sessions de mentorat !
Premium
- check +100h de formations
- check +180 exercices de code
- check +100h de mentorats en rediffusion
- check 20 projets
- check Mentorats groupés hebdomadaires
- check Support individuel avec nos mentors
Filtrer des données Django avec HTMX
Live coding de la création d'un outil de filtre via un formulaire et l'URL (avec un paramètre "query"), en utilisant Django et une méthode classique, puis avec des outils comme HTMX et Alpine JS.
00:00:00 :Qu'est-ce qui va pas sur ma sémantique de navbar? Mais ouais non c'est fou à quel point on...Mais ça c'est bon c'est la malédiction, je sais pas, le problème le plus courant de devc'est vraiment de... comment dire... d'arriver à estimer les trucs et pour vous expliquer en gros
00:00:29 :en fait je... ah oui pour l'accessibilité oui d'accord. En fait c'est ça, c'est que souvent on sedit bon bah je vais refaire un truc que ce soit la première fois quand on crée une nouvellefonctionnalité ou généralement quand on l'a créé la première fois on essaie de bien le faire et c'est
00:00:46 :plus que du coup en fait on fait quelque chose et des fois on n'est pas... en fait c'est plusqu'on continue toujours d'apprendre des choses par exemple là parce que je vais vous montreraujourd'hui sur Alpine, AlpineJS, Htmx tout ça. Donc en fait c'est souvent ça, on a fait des trucs
00:00:58 :ou alors des fois là par exemple la 9 bar c'est le genre de choses que j'ai fait sur la v1 du siteque j'ai un petit peu refait après etc mais entre la v1 d'il y a 3-4 ans maintenant et aujourd'huiil y a plein d'autres choses que j'ai... que j'ai fait mieux que je... enfin voilà même quand ça
00:01:15 :fait dix ans qu'on code on continue de s'améliorer, de découvrir des trucs. Là par exemple je suisen train de refaire les images donc j'ai passé toute l'après-midi hier à me mettre à jour surtous les trucs d'accessibilité parce que moi j'étais encore resté aux tout simples imagessource avec le attribut alt et puis that's it et là du coup je sais que pour les performances
00:01:35 :il y a plein de trucs à améliorer parce que pour l'instant j'ai des images qui sont pas forcémenttoujours minimisées etc etc et donc voilà là j'ai commencé à refaire des modèles pareil sur lesimages en fait à chaque fois je faisais des image field et je commençais à répéter les choses et
00:01:56 :comme je dis en fait c'est ça c'est qu'au début on se dit bon bah en fait j'ai la méthode uploadto qui va changer le dossier donc comme j'ai une petite fonction pour faire ça et puis après onmet un image field sur un autre modèle donc on se dit bon allez je vais pas me remerder je vais
00:02:09 :juste copier-coller parce qu'au moment où l'on le fait on n'a pas envie de passer finalement un quartd'heure au lieu de passer cinq minutes donc on se dit bah je vais juste copier-coller c'est pasgrave je referai plus tard et on se retrouve à copier-coller un petit peu alors c'est deux
00:02:23 :lignes une fonction on le met à chaque fois et finalement arrive un moment où voilà on se ditbon en fait merde j'ai 15 fois le même code je vais essayer de refactoriser le truc etc et defaire un truc mieux et donc là c'est ce que je suis en train de faire c'est ce que je disais
00:02:36 :aussi justement je sais pas si vous avez vu dans la communauté là que justement c'est pour cecid'ailleurs qu'il faut pas avoir peur de faire les choses là en fait au début j'avais fait desmodèles il y a plein de modèles qui sont rajoutés on peut jamais tout prévoir en fait de base donc
00:02:52 :au début j'avais des formations ou bah par exemple le nom voilà par exemple pour une formation lenom de la formation j'avais appelé ça name le champ donc c'était formation point name ça faisaitdu sens pour moi et après quand j'ai fait le modèle pour les postes de blog bloc point name
00:03:10 :ça me semblait moins moins évident donc je l'ai appelé title puisque c'est plutôt un titre deblog qu'un nom de blog on a le nom d'une formation mais le titre d'une formation je sais pas enfinvoilà donc du coup j'avais des champs différents et je me retrouvais avec name pour certains title
00:03:23 :pour d'autres et donc là comme j'ai refait aussi pour refactoriser tout et pour avoir un seul etunique modèle de carte pour tout sur le site avant j'avais des modèles pour les articles de blogdes modèles pour les formations des modèles pour les cartes de quiz pour les exercices et à chaque
00:03:38 :fois c'était des trucs un petit peu différents qui se ressemblaient mais qui étaient tous unpeu différents donc là j'ai tout uniformisé et le problème c'est que bah du coup quand on faitmon modèle point name bah quand c'est un article de blog ou une formation bah ça marchait pas donc
00:03:52 :là on peut faire des propriétés qui vont dire si c'est un blog tu retournes point name sinon turetournes title ou des trucs comme ça mais c'est pas voilà c'est pas c'est pas ultra ultra pratiquedonc là en fait voilà j'ai commencé à tout tout changer les champs et comme je vous dis faut pas
00:04:07 :avoir peur de faire ça parce que que ce soit au début de voilà faut pas essayer tout planifierparce que de toute façon un moment on va changer des choses et là voilà moi je suis en train detout changer donc ça fait beaucoup de trucs à changer de trucs qui peuvent casser c'est pour
00:04:19 :ça que vous avez probablement vu pas mal de petits bugs même si les tests unitaires vontchopper quelques bugs on peut jamais tester 100% d'une application donc c'est normal qu'il y aitdes petits bugs du genre donc voilà pour le pour l'introduction et oui Céline du coup etl'accessibilité oui c'est effectivement malheureusement le truc qui passe un peu toujours
00:04:38 :à la trappe c'est déjà en fait tellement de travail de faire des trucs clean au niveau du code etcet vu que justement ça change tout le temps enfin c'est malheureusement c'est mais c'est bon jesais je m'en veux et c'est le cas pour 99% des sites c'est mais bon c'est enfin c'est pareil
00:04:59 :dans tous les domaines c'est comme quand vous avez c'est malheureux mais en même temps moije étant dans ce côté création je peux le très bien comprendre c'est comme quand on fait unequand on fait une station de métro ou quelque chose bah en fait on commence par se dire bah en
00:05:12 :fait il faut mettre une piste cyclable il faut ça il faut machin il ya les bus il ya les voituresetc et c'est déjà tellement de problématiques que après bah forcément quand on rajoute lesproblèmes d'accessibilité que ce soit sur le web ou ou en ou dans la vraie vie bah tout le temps
00:05:27 :c'est le c'est malheureusement le truc qui passe à la trappe parce que parce que bah des vélos vay avoir 5000 vélos qui vont passer et des fauteuils roulants va y en avoir 10 donc malheureusementmalheureusement on va on va privilégier de voilà sur le nombre et voilà donc c'est c'est malheureux
00:05:44 :que ce soit dans la vraie vie ou sur le web mais mais bon en même temps je je comprends pourquoiça c'est en place enfin ça en place c'est justement c'est pas en place et oui c'est l'inouï à fullstack quoi c'est fin c'est même sur une sur une petite sur tu vois docstring c'est pas un gros
00:06:05 :site mais en fait c'est fou à quel point au final quand on y pense il y a des formations il y a unlecteur il y a quelques options dans les profils un blog c'est pas énorme mais en fait tous lespetits trucs de bah juste sur le blog tu as affiché la page d'accueil du blog tu as affiché chaque
00:06:21 :article de blog tu as la newsletter dans le blog tu as les trucs le comment dire le les pagesd'admin de pouvoir éditer le blog tu as les les du coup l'éditeur de texte donc juste sur un trucqui paraît simple au début finalement ça se démultiplie par exemple sur là le truc qu'il
00:06:38 :faut que je mette sur les que j'ai pas encore fini sur les profils les j'ai refait vous avez peut-êtrevu dans le profil maintenant c'est un peu plus justement j'utilise htmx pour naviguer d'unepage à une autre sans qu'il y ait de refresh entre les tabs et j'ai pas encore fait le truc
00:06:53 :de la sécurité donc en fait là actuellement je pense pas que vous puissiez changer votre motde passe donc je me dis bon c'est pas grave au pire il ya une ou deux personnes qui vont direj'ai essayé de changer mon mot de passe ça marche pas mais voilà c'est des trucs où sur le profil
00:07:04 :il ya voilà changer votre nom votre bio ça va assez vite mais après quand il ya voilà j'aioublié mon mot de passe je veux modifier mon mot de passe je modifie mon mail après il ya lesmails qui sont envoyés avec ça avec les tokens il ya plein plein plein plein plein de trucs comme
00:07:15 :ça qui à chaque fois sont des fichiers python des fichiers html des mails potentiellement àchanger à modifier à s'assurer qu'ils sont bien envoyés etc donc ça fait très rapidement destrucs assez tentaculaires voilà donc assez blablaté je vais retrouver mon projet PyCharm voilà alorsje vais vous partager mon écran donc ce que je vais vous montrer aujourd'hui il ya plusieurs
00:07:41 :choses enfin il ya principalement une chose attendez hop partage je vais partager ouaisentire screen hop et vous je vais vous mettre de l'autre côté ok donc c'est bon vous voyez bientout fonctionne bien vous avez bien le son vous avez bien tout ok super et voilà ouais et comment
00:08:12 :je peux piner ça je trouve jamais les ok ouais c'est là un pin ok non c'est bon ok donc normalementc'est tout bon super ok donc ce que je vais vous montrer c'est deux choses principalement troischoses en fait je sais pas si j'aurai le temps de tout montrer je vais vous faire une toute petite
00:08:32 :introduction sur AlpineJS qui est une librairie qui se rajoute un peu à cette stack que moij'adore qui est donc du coup d'utiliser donc html j'en ai déjà parlé je pense que vous l'avez déjàvu un petit peu qui permet si on résume de faire des requêtes ajax très simplement et donc des
00:08:50 :requêtes ajax qu'est ce que c'est c'est tout simplement des requêtes que vous allez faire enjavascript qui vont aller chercher de l'information sur le serveur et qui vont vous les retourner doncça évite en gros d'avoir des rafraîchissements de page c'est un petit peu tout ce truc là sur
00:09:02 :lequel est basé react à un niveau beaucoup plus beaucoup plus évolué mais aussi du coup beaucoupplus compliqué qui permet du coup d'avoir ce qu'on appelle des SPA single page application qui moije trouve est poussé un peu trop à l'extrême j'ai une grosse vidéo youtube que je vais faire
00:09:20 :là qui est prévu pour parler de tout ça parce que voilà ça fait que l'on se retrouve à utiliserune énorme bibliothèque avec toute une façon de penser en fait juste pour avoir ce cet aspect depage qui se rafraîchit pas et cet aspect un peu ergonomique d'une application mais du coup ça
00:09:39 :nécessite forcément de tout passer à travers le filtre de react parce que c'est vraiment toutle front-end passe à travers ça alors que ces petites bibliothèques comme alpine et htmx c'estdes bibliothèques qui vont pouvoir se rajouter un petit peu qui vont pas totalement du coupannihiler je dirais votre front donc ça peut s'utiliser si vous utilisez php du c sharp peu
00:10:00 :importe ce que vous utilisez en backend et quel langage aussi vous avez en front comme langagede template donc là ça va être dans ce cas ci le langage de template de django mais htmx çamarche aussi avec les langages de template de php de rubis etc parce que finalement c'est des trucs
00:10:17 :qui sont directement sur le html là vous voyez en fait et c'est ça qui fait un petit peu peuraussi c'est d'ailleurs je viens de m'en rendre compte en fait en l'expliquant que ce soit tailwindalpine ou htmx donc là les trois librairies que j'ai mises en dépendance ici vous voyez d'ailleurs
00:10:34 :je vais grossir un petit peu le texte pour que je trouve un moyen de changer ça plus facilement àchaque fois je me fais avoir font ok c'est bon c'est suffisamment gros donc en fait ces troisces trois bibliothèques en fait elles vont être directement au niveau du html donc ça fait qu'on
00:11:01 :a souvent des trucs assez gros comme ça où il y a plein de classes que ce soit des classes tailwindaprès des trucs comme ça qui sont directement dans le html et ça fait un petit peu peur aprèsmoi j'ai installé une extension récemment qui s'appelle si je la retrouve en plugin donc j'ai
00:11:19 :installé le alpine.js support qui est pas mal ça permet d'avoir l'autocomplétion et il comprenden fait que c'est un contexte un peu javascript à l'intérieur de ça sinon en fait vous avezvous avez pas tout ça et il y a voilà je crois que c'est lui je crois ouais je crois que c'est
00:11:35 :lui html attribute folder vous avez le même sur vs code aussi et ça permet en fait de justementcollapser certaines choses vous pouvez lui dire je crois dans les préférences je sais plus où duplugin ce que vous voulez collapser donc moi je lui dis bah tout ce qui est classe tu collapse
00:11:53 :et je pourrais lui dire d'autres attributs donc là en fait ça me permet voilà de retrouver unpetit peu ce qu'on aurait si on n'avait pas du tailwind à l'intérieur avec voilà une sectiontu vois j'ai fait attention c'est l'une j'ai fait un petit peu accessibilité section mainetc donc voilà ça permet de collapser un petit peu les choses et donc ce qui est très intéressant
00:12:16 :avec tout ça c'est que c'est bah comme c'est directement dans le html on n'a plus besoinen fait de de faire du de passer d'un truc à un autre c'est à dire de passer du html au fichierjavascript au fichier css ce qui peut être pratique c'est vrai quand on commence on se
00:12:33 :dit c'est pratique parce que comme ça tout est bien isolé on a notre html d'un côté si je veuxmodifier le css je vais dans mon fichier css et je suis pas en train de tout modifier au mêmeendroit mais le problème c'est que ce qu'on appelle donc le separation of concern la séparation des
00:12:46 :concern des idées des concepts le problème c'est que bah du coup en fait des fois on sait plusquand on va dans son fichier css on va avoir le nom d'une classe et puis bah du coup il va falloirfaire des aller-retour entre notre html et notre css et des fois on sait plus et des fois en fait
00:13:03 :c'est ça aussi on est dans le dans le css on modifie quelque chose dans notre fichier css etça va aller impacter d'autres trucs ailleurs dans un html où on sait pas là on est directementtellement au plus proche que je sais que si je change le texte 3xl ici ça va le changer pour
00:13:16 :mon h1 et pas ailleurs et pareil un petit peu pour tout ça ici là j'ai mon xdata-reds donc je saisque cette propriété ici elle est juste pour cette section et elle va pas aller impacter d'autrestrucs ailleurs donc c'est voilà c'est très pratique on est tout vraiment au plus proche de ce qu'on
00:13:31 :utilise et il n'y a pas d'effet de bord qui arrive et on n'a pas aussi à se poser la question à chaquefois qui est vraiment le truc moi qui m'énervait un point pas possible en web c'est que l'on sedisait bah alors là je fais un composant un truc alors comment je vais nommer la classe css et
00:13:46 :puis et après bah voilà je vais potentiellement avoir des effets de bord etc là en fait on sepose même plus la question je veux changer un truc sur ce h1 bah je vais ici dans ma classe jechange je vais mettre ici texte xl à la place je sauvegarde je rafraîchis voilà le changement
00:13:58 :est fait pareil ici je vais modifier du coup quelque chose le texte est rouge on va mettrevert à la place hop je sais que voilà quand je clique ça va changer vert à la place donc voilàj'ai pas besoin de me poser de questions et ça fait qu'on développe beaucoup plus vite. Donc
00:14:14 :donc Tailwind c'est pour modifier le css ça je pense que vous l'avez probablement déjà un petitpeu vu j'en ai parlé assez régulièrement c'est donc pour faire un petit peu voilà de lamodification de style directement ici. Htmx ça va permettre donc de faire des requêtes ajax et
00:14:29 :Alpine ça permet comme vous le voyez ici de faire en gros du javascript avec des trucs comme ça c'estun petit peu si on pouvait faire un rapprochement similaire à ce qu'on pourrait faire avec duvue justement il ya des concepts comme le xxtext, xif des trucs comme ça si vous avez déjà fait
00:14:46 :du vue vous avez déjà vu ce genre de logique sauf que là l'intérêt en fait c'est que c'estc'est beaucoup beaucoup beaucoup plus léger justement c'est des bibliothèques qui vontjuste vous permettre de faire ça précisément et qui vont pas comme je disais vous enfermerdans un framework complet mais avec cette même flexibilité. Alors le ajax gabs c'est que par
00:15:09 :exemple tu vois et c'est ce que je vais vous montrer ici c'est ce que j'ai mis donc sur lessi je vais sur duckstring du coup dans les options de filtres en fait j'avais deux possibilitésj'ai historiquement je l'ai fait de deux façons sur duckstring donc là ici par exemple si j'agrandis
00:15:26 :un petit peu là tu vois dans les quiz quand tu décoches quelque chose ici si je veux voilàafficher juste les exercices intermédiaires tiens bah d'ailleurs voilà ça bug ou alors ah non c'estparce que je suis non je vais dire ajouter pas de oui ok donc c'est que j'ai juste pas de pas de
00:15:43 :quiz qui sont juste intermédiaires donc on va plutôt on va plutôt tester avec je sais pasmettre fonction je dois bien avoir un truc fonction voilà donc en fait auparavant je faisais tout enjavascript justement j'avais des attributs sur chaque carte qui déterminait qui expliquait enfait c'était quoi la difficulté les tags etc et du coup l'avantage c'est que ça me permettait de
00:16:08 :faire un filtre très rapide parce qu'il n'y avait pas de requêtes qui étaient envoyées en bac çafaisait juste aller lire le fichier html dire ok cette carte là elle a tel niveau de difficultétel tag donc ça match avec les filtres donc je l'affiche c'est pratique parce que c'est très
00:16:24 :rapide c'est un peu plus chiant et surtout vu mon niveau en javascript à implémenter et c'estvoilà ça nécessite de faire toute l'implémentation au niveau javascript peut-être qu'à terme je leferai avec alpine justement je me suis posé la question en attendant ce que je fais c'estqu'en fait à chaque fois que tu coches ou que tu décoches quelque chose ici ça va faire une
00:16:40 :requête sur le serveur le gros problème actuellement c'est que par exemple sur lesquiz c'est pas trop gênant sur les formations vous l'avez peut-être vu c'est un petit peu long doncvoilà je suis pas totalement satisfait de tout ça parce que là vous voyez il y a pas mal de temps
00:16:52 :de chargement notamment parce qu'actuellement sur la progression des formations ça va fairebeaucoup de requêtes en fait parce que dans chaque formation je vais aller regarder qu'est ce quevous avez regardé ou pas etc et donc c'est ça qui va déterminer si vous êtes en train de regarderune formation ou pas donc ça veut dire que pour toutes les formations ici il va aller regarder dans
00:17:10 :toutes les sections les sessions etc ce que vous avez regardé dire ok t'as regardé tant de % donctu es en train de regarder la formation etc donc ça fait beaucoup de requêtes et vu que bah voilàà chaque fois qu'on décoche quelque chose ici ça va faire ce travail là bah ça fait que c'est
00:17:24 :assez long donc c'est pas pas du tout optimal il y a beaucoup de trucs qu'il faut que j'optimiselà dessus mais du coup ça me permet tu vois d'aller faire une requête sans que j'ai besoin derecharger la page et ce qui est intéressant avec avec htmx c'est que ça ça paraît un petit détail
00:17:38 :mais c'est très important que ce soit pour le SEO ou pour vous quand vous partagez des pages c'estque si là en fait tu vois je vais sur quiz ça change dans l'url ça met tab quiz si je désactivejustement intermédiaire avancé là tu vois j'ai beginner 0, intermédiaire 0, advanced 3 et donc
00:17:56 :donc là en fait si je si j'actualise la page ou que je partage ce lien avec quelqu'un je vaisretomber exactement sur cette page ici avec les filtres qui sont appliqués donc ça c'est assezpratique et donc voilà donc c'est ça que me permet de faire htmx et donc je vais vous montrer un
00:18:12 :petit peu tout ça ici comme on peut faire justement une requête htmx et comment on peut aussi liertout ça avec alpine donc là alpine vous voyez c'est ça me permet en fait comme je disais defaire du javascript assez facilement je pourrais faire tout ce que je fais ici avec du javascript
00:18:30 :si je mettais un tag script ici je pourrais dire bah par exemple je vais vous montrer en fait icion va enlever ça je vais le faire d'abord en javascript pour vous montrer donc là on va enlevertout ça et on va mettre un id on va dire title j'ai découvert d'ailleurs récemment que on pouvait
00:18:52 :vous voyez on en apprend tous les jours voilà merci copilot on peut récupérer un élément surune page web en faisant getElementById ou querySelector et en mettant comme ça voilà lehashtag id mais quand on a un id on peut carrément faire directement title c'est assez drôle je le
00:19:10 :savais pas donc en fait on peut cibler des éléments directement alors c'est pas forcément conseillé ilpeut y avoir des effets de bord mais moi je trouve ça assez pratique je le savais pas donc si je vaisici par exemple je vais rafraîchir la page je fais inspect et je vais rapatrier ça ici parce que
00:19:29 :je l'avais mis sur mon autre écran et on va désactiver ça voilà je vais juste vous montrerici donc là vous voyez je peux faire title et il va me retrouver le title et donc là je peuxchanger par exemple.innerHTML égale à bonjour à la place et là vous voyez ça va changer donc
00:19:45 :vous voyez en javascript je peux faire ça et donc je pourrais dire ici par exemple le boutonquand on fait un clic je vais aller exécuter fou et ici on va changer les classlist de ça donc onva dire par exemple si donc on va faire un if if title.classlist.contains et je vais mettre
00:20:09 :les putains de crochets je déteste javascript il y a des trucs dans tous les sens on sait jamaisoù on en est donc non c'est pas ça justement c'est des parenthèses et après des hop doncvous voyez là il me propose un truc moi ce que je vais faire c'est je vais dire bah donc si ça
00:20:27 :contain et là on va mettre on va dire que si ça contain text-read 400 du coup on va faire unclasslist.remove et on va ajouter à la place text-green et on va faire l'inverse ici on va
00:20:46 :dire et là on va mettre add et là on va mettre add et là on va mettre remove voilà donc là jepourrais faire ça je suis pas sûr que ça va marcher je regarde hello world je clique ici voilàvous voyez donc je clique sur le bouton et ça va changer les classes en fonction de ça on pourrait
00:21:03 :probablement améliorer un petit peu ça ici mais vous voyez c'est à fait à chaque fois faut faireune fonction faut dire voilà est ce que si on a ça on pourrait regarder avec des data etc bon làvous voyez vous allez voir avec alpine justement on peut mettre ces data ici directement c'est ça
00:21:16 :qui est intéressant aussi donc voilà on pourrait s'en sortir mais ça ferait beaucoup de javascriptbeaucoup de if, elif etc et donc ce qu'on peut faire à la place c'est un petit peu le mêmele même fonctionnement mais direct en utilisant donc alpine que j'ai inclus ici dans mon head
00:21:30 :donc ce qu'on va faire c'est que ça va beaucoup fonctionner avec des variables qu'on va définirdonc en fait vous les définissez à différents endroits là si je le définis dans au niveau decette section là ça veut dire que tous les éléments qui sont que ce soit cet élément lui
00:21:43 :même et tous les éléments enfants ils vont avoir accès à cette variable donc là je la déclare àfalse et ce que je vais pouvoir faire après c'est faire des comportements différents en fonction decette valeur donc c'est ce que j'avais commencé à faire ici je peux dire bah le texte ici le h1
00:21:58 :on va lui dire on va pouvoir binder des éléments donc on peut faire xbind dire classe égale etje vais peut-être le désactiver il va m'embêter sinon donc on peut binder on peut dire cetteclasse ici en fonction du coup de cette valeur tu vas afficher quelque chose ou quelque chose
00:22:15 :d'autre et donc et ce xbind en fait on peut l'enlever c'est un petit peu redondant on peutmettre juste les deux points et ça va faire la même chose et ça va s'ajouter aux classes quevous avez existantes c'est aussi ça qui est intéressant ça va pas vous avez un mécanisme
00:22:30 :qui vous permet de dire remplace tout mais par défaut ça va s'ajouter donc là je vais garderici mon texte excel mon font bold dans mon bouton je vais remettre click me et ici on peut dire doncsi red et là vous allez voir c'est le l'opérateur ternaire c'est comme en python quand on dit if
00:22:46 :machin tu fais ça else truc c'est sur une seule ligne c'est exactement la même chose donc enjavascript on met un point d'interrogation et ensuite on met voilà deux conditions comme çadonc si red est vrai on va faire ça sinon on va faire ça ok donc on va dire que si red est vrai
00:23:05 :on va mettre texte red 400 et si red n'est pas vrai donc si il est false on va mettre texte green400 à part défaut on a dit que red était false donc on va utiliser cette classe donc j'actualiseet là j'ai mon texte voilà qui est bien vert et si je clique dessus là il se passe rien parce que
00:23:23 :pour l'instant j'ai rien fait mais je vais pouvoir justement connecter ça et donc là on va fairejustement un at click cette fois donc le at ça permet de lier des événements qui vont se passerdonc ça peut être des clics des changements quand vous changez quelque chose ça peut être key up si
00:23:37 :vous êtes sur des inputs par exemple donc là moi ça va être le clic que je vais écouter donc c'estun peu comme le quand on faisait le un clic justement donc là je vais dire at click on vatout simplement faire red égal différent de red not red en fait ça c'est comme si en python vous
00:23:51 :faisiez not red donc on va dire que quand on clique on inverse tout simplement la valeur dered donc si red est at true il va passer à false et vice versa et bah c'est tout normalement voilàsi je fais ça j'actualise je non ça ne marche pas si c'est bon c'était un problème de refresh
00:24:08 :donc là vous voyez hop je clique et ça va changer du coup la valeur de red et ça je vais vousmontrer aussi j'ai un petit une petite extension qui me permet d'afficher justement les élémentsdonc là vous voyez red il est true et si je clique il va passer à false donc le at click va juste
00:24:27 :changer la valeur de red pour la passer de true à false en fonction de sa valeur et juste la changeret ma classe ici elle va réagir donc vous voyez tout ça est dynamique c'est vraiment red ici audébut au chargement de la page c'est false donc il va se mettre en green et quand je clique ça
00:24:45 :va changer donc vous voyez tout ça en fait c'est pas forcément c'est ça au début qui me faisaitque je l'utilisais pas forcément je me disais bon ça rajoute une dépendance et finalement ça faitquand même beaucoup de choses à rajouter ici ici ici mais je me rends compte que c'est quand même
00:25:00 :beaucoup plus agréable à développer parce que voilà on n'a pas besoin à chaque fois d'allerfaire des fonctions ailleurs etc on fait tout ici si là encore on a besoin de changer quelque chosebah on va dire finalement c'est plus green c'est yellow donc voilà on est là encore très proche
00:25:14 :de ce qu'on fait et ça fait quand même moins de choses à écrire de pouvoir changer les classescomme ça juste en mettant deux points classe et en faisant ça il y a même des façons encoreplus raccourcies par exemple si vous voulez mettre quelque chose on va dire par défaut en fait on va
00:25:29 :dire que par défaut le texte il est en texte yellow 400 et on va dire hop tu le mets en rouge seulementnon pas ça c'est le net comme ça voilà si red est vrai alors tu mets texte red 400 donc là sije rafraîchis j'ai bien hello world et quand je clique voilà ça passe en rouge et quand je
00:25:49 :reclique du coup ça l'enlève et revient à sa valeur de départ donc vous voyez c'est vraimenttrès très raccourci donc ça c'est ça c'est du javascript c'est pas des trucs il y a plein denotations là dedans qui sont vraiment du javascript et c'est justement l'équivalent de faire ça avec
00:26:05 :rien après en fait en gros et vous avez l'inverse qui est ça si je me souviens bien donc là c'estça va être l'inverse en fait quand c'est false ça va être ça va mettre texte red et quand ça vaêtre true ça va être l'inverse donc vous avez voilà différentes notations mais voilà donc ça permet
00:26:21 :vraiment de faire des trucs ça plus le deux points classe qui permet de binder des classes en fonctionde valeur ça fait que voilà finalement quelque chose qui est assez restreint et qui est trèspratique donc voilà petite intro à alpine mais ça va beaucoup plus loin aussi c'est ça aussi que
00:26:35 :j'avais un petit peu j'avais pas vraiment j'avais pas comment dire pas exploré suffisamment dans matête j'avais regardé vite fait en fait si vous allez sur la page de alpine c'est ce qu'ils vousdisent en fait voilà ils vous disent bah c'est simple il y a 15 attributs 6 propriétés 2 méthodes
00:26:49 :et quand on commence à regarder on voit le x data x bind on se dit ok ah d'accord ok x bind class çaa l'air pratique le x clic ok puis après en fait là on se rend compte et c'est là où je m'étais unpetit peu trompé le x texte ça permet d'afficher un texte en fonction de valeur donc ça on se dit
00:27:03 :en fait bah souvent j'ai pas besoin de le faire parce que je le fais directement avec djangodonc là ce que je pourrais faire justement c'est plutôt que de mettre click me je pourrais direx texte égale red justement et là en fait ça va mettre la valeur de red donc si je reviens ici là
00:27:16 :j'ai false et quand je clique voilà ça va m'afficher la valeur donc ce qui est intéressant c'est quelà on pourrait dire justement on pourrait refaire ce truc là de dire le texte est rouge et le texteest jaune et donc là vous voyez finalement ça aussi ça peut être intéressant le texte est jaune
00:27:34 :le texte est rouge finalement on change un texte en fonction d'une valeur aussi et quand on poussele truc un petit peu plus loin bah ça permet de faire des trucs assez intéressants il y a desil y a les x show aussi qui est assez intéressant ça vous permet d'afficher ou de masquer des choses donc
00:27:50 :c'est aussi pour ça je vous dis je pense que je vais potentiellement refaire justement avec toutça mon système de filtre pour que justement j'ai des attributs qui soient sur mes cartes que ce soitdéclaré avec des variables ici sur chaque carte et que je puisse facilement en fait et à mon avis
00:28:04 :ça va être beaucoup beaucoup beaucoup plus facile cette fois ci qu'avec htmx de dire en fonction desvaleurs bah si toutes les valeurs sont vraies tu montes la carte et sinon tu la tu la caches donclà ce que je peux faire effectivement c'est dire x show égal red et là vous allez voir ça va
00:28:18 :carrément cacher le texte en fonction de la valeur de red et vous avez même ils ont vraiment pensé àtout c'est ça qui est assez incroyable vous avez x transition qui permet de rajouter une petitetransition et là vous voyez hop d'afficher de masquer le truc avec une petite transition c'est
00:28:35 :ce que j'utilise justement sur quand on va dans une formation c'est ce que j'utilise si je prendsje sais pas créer un blog ici c'est ce que j'utilise voilà pour changer pour changer detrucs donc voilà c'est très pratique ça fait une petite animation c'est cool pour ceux aussi là ça
00:28:55 :change grâce à ça c'est aussi c'est du alpine là quand vous ajoutez au favori et tout le trucde notification ici est fait avec alpine donc vous voyez il ya plein de petits trucs comme ça quisont assez cool ouais t'as une question gabe ouais est ce que en fait moi j'ai jamais utilisé encore
00:29:11 :pour l'instant mais du coup ça me ça fait bien envie en fait à la base java script tu l'intègresdans une valise de script ouais alors en fait souvent c'est plus en fait on va faire commeun fichier css en fait on va dire et je m'en souviens jamais c'est merde c'est relay style
00:29:31 :ça c'est le genre de truc tu sais où tu fais une fois je suis retourné voir sur dogstringc'est dingue ça c'est les balises qui permettent d'inclure du link voilà c'est ça link j'oublietoujours donc quand tu fais un link généralement tu mets ton style.css et justement le javascript
00:29:57 :ça va être avec un script justement mais ici tu vas dire script et tu vas mettre source c'est çaet tu vas dire je vais aller chercher script.js je sais plus c'est quoi le... je crois que c'est
00:30:10 :script souvent qui est utilisé par... enfin ça peut être n'importe quoi mais je parle en termede convention et donc en fait souvent tu as ton javascript justement qui est dans un fichier àpart après c'est un petit peu en fait comme justement les styles c'est tu vois tu peux
00:30:27 :mettre un style ici et dire background color red justement et là si j'actualise ça va être rougedonc tu peux faire du style inline comme ça tu peux mettre des scripts tu peux mettre d'ailleursun style aussi ici et dire par exemple tous les boutons ils vont avoir justement un background
00:30:45 :color de red, tu peux mettre du style ici aussi et là normalement non il se met pas peut-êtrequ'il faut je sais plus là ça doit être aussi parce que du coup je sais pas lequel a précédencesur tous les autres mais tu vois tu peux mettre du style et pour les scripts c'est pareil tu peux
00:31:05 :mettre un script ici et faire là si on fait un document.addEventListenerDomContentUpdatesi je me souviens bien là je fais un petit peu de mémoire j'ai pas j'ai pas copilot pour m'aiderjustement on va faire ça bonjour normalement si je me suis pas trompé là tu vois quand je vais
00:31:24 :actualiser si je vais voir dans le dans la console ici voilà j'ai bien bonjour qui s'affiche donc tuvois tu peux faire ça à différents endroits ça peut être dans un fichier c'est pareil ça peutêtre directement aussi dans ton html avec des balises comme ça ça va vraiment dépendre. Ok
00:31:38 :c'est le principe comme le css quoi tu ok. Tout ça c'est des fichiers qui vont s'imbriquer,se parler avec beaucoup de trucs à prendre en compte aussi sur la précédence le css justementcomme son nom l'indique c'est Cascading Style Sheet donc c'est vraiment il y a cette idée que
00:31:55 :c'est de hiérarchie et de choses qui peuvent se comment dire se serverider les unes les autresça c'est un truc qui peut causer pas mal de petits soucis si tu mets un script ici le deferpar exemple defer ça va le faire justement une fois que tout est chargé donc il y a plein de
00:32:10 :petits trucs comme ça qui peuvent faire que des fois tu vois pas ce que tu penses avoir parceque soit tu vas avoir un truc inline justement que tu as mis ici qui va écraser quelque chose ouparce que tu as d'autres choses qui sont définies après et tu ne vois plus donc ça peut causer pas
00:32:23 :mal de petits soucis comme ça. Donc mais après alors ouais petit disclaimer par contre pour tousces trucs là tout comme justement sur react je vois tellement d'étudiants qui se lancentdirectement sur react alors qu'ils connaissent à peine javascript si vous utilisez telle oui quece soit telle wind alpine htmx c'est un petit peu différent dans le sens où ouais mais même htmx
00:32:50 :tu vois donc comme je disais c'est des requêtes ajax ça faut vraiment je conseillerais de fairedes requêtes ajax déjà en javascript pour voir justement comment ça marche qu'est ce que c'estetc c'est toujours la même idée de voir quel est le bénéfice en fait même pour vous parce que si
00:33:03 :vous commencez directement à utiliser alpine vous allez dire ah oui ok c'est cool mais vousn'allez pas vraiment savoir pourquoi c'est cool comme je dis même moi en fait justement qui faisaitdéjà beaucoup de javascript il a fallu que je creuse et que je l'utilise et que je me rende
00:33:13 :compte que finalement il y avait des trucs qui sont intéressants pour l'utiliser donc le risquec'est voilà c'est que si vous partez tout de suite sur tellwind déjà en plus bah c'est ça vous n'allezpas avoir les bonnes bases tout ce que je vous montre ici vous voyez c'est pour ça que je
00:33:26 :l'expliquais vous pourriez croire que ah bah tiens ça c'est une façon de faire de faire de alpinealors qu'en fait non ça c'est du javascript il y a des trucs par contre dans alpine qui sontspécifiquement alpine justement comme les ad comme ça c'est pas des trucs que vous allez
00:33:42 :retrouver directement dans du javascript vanilla donc c'est pour ça que c'est bien important dedéjà faire sans librairie sans rien pour bien maîtriser les bases pour bien les comprendrepour ensuite savoir qu'est ce qui dépend de la librairie qu'est ce qui est natif vous allezêtre beaucoup plus apte à manipuler les choses après c'est un peu comme django aussi comme quand
00:34:01 :je vous montre django il y a l'approche où moi voilà je vous dis bah en fait le modèle il marchecomme ça et je ne sais pas trop à comprendre pourquoi ça marche comme ça et il y a l'approcheoù je vous montre comment ça marche dans le code source et je vous dis bah en fait c'est pas magique
00:34:13 :si ça marche comme ça c'est parce que là en fait ils vont modifier cette variable contexte etcetc et du coup bah si vous voulez modifier des choses vous pouvez le faire et c'est d'ailleurspetite parenthèse là dessus c'est exactement ce que je suis en train de faire justement je
00:34:26 :vais essayer de vous montrer avec comme ce que je vous disais là sur le refactoring d'imagec'est dans générique voilà là je suis en train de faire du coup un field custom pour gérer toutesles images donc avant par exemple si je vais dans la formation voilà ici vous voyez j'avais un truc
00:34:48 :thumbnail avec un image field qui est le truc par défaut de django mais là ce que je voulaisfaire c'est qu'à chaque fois en fait que je vais uploader une image je veux qu'elle soit compresséeautomatiquement et je veux qu'il me crée et c'est ce que je vais essayer de trouver aussi si je l'ai
00:35:03 :quelque part voilà je veux qu'en fait à chaque fois il me convertisse l'image en format webp quime optimise du coup qu'il enlève toutes les métadonnées pas utiles et qui compresse un petitpeu et qui me fasse justement et c'est ça que j'ai découvert hier qui est assez cool c'est avec
00:35:19 :le source set du coup dans l'image il va aller en fonction de si vous regardez sur votre téléphoneou sur un écran 4k retina etc il va utiliser différents formats d'image si vous regardez survotre téléphone il va utiliser l'image qui fait 13k ou si vous êtes dans un pays avec la 3g qui
00:35:33 :marche pas bien il va utiliser aussi cette image plutôt que d'utiliser l'autre et donc ça je veuxpas avoir à le faire à chaque fois que j'uploade une image je veux pas avoir à créer automatiquementtout ça donc j'ai essayé d'automatiser tous ces trucs là et donc là justement je passe par un
00:35:47 :où est-ce qu'il est générique générique générique voilà fields donc je crée justement un modèle quihérite de image field et là vous voyez il y a plein de choses où c'est vraiment du très customc'est à dire que je suis allé donc je suis allé voir dans le image field à quel endroit parce que
00:36:03 :c'est ça qui était assez compliqué c'est à quel endroit il sauvegarde concrètement l'image parceque dans les gestions d'image il y a plein de trucs où des fois il va en fait il va avoir unfichier image en mémoire mais il va pas le sauvegarder donc là on pense qu'on a l'image
00:36:15 :sur disque et qu'on peut aller créer des versions optimisées mais non en fait le fichier n'est pasencore sauvegardé donc il faut aller trouver quel est l'endroit où ça va vraiment sauvegarderet là vous voyez j'ai le image field et j'ai le image field file donc il y a le champ pour l'ORM
00:36:32 :de Django qui est vraiment le champ qu'on mettrait dans un justement dans un truc ici,models.imagefield et après il y a vraiment le champ image field file le fichier en tant que
00:36:43 :tel qui va être utilisé par ce champ image field et à chaque fois vous voyez il y a différentssave donc le save il se fait vraiment ici donc c'est à ce moment là que je peux vraiment allersauvegarder le fichier optimisé sur le disque alors que ici dans le image field il va juste
00:36:58 :aller avec le storage vérifier justement valider le nom du fichier vérifier s'il y a déjà un fichierqui existe ou pas. Donc il y a plein de petits trucs comme ça et c'est pour ça que en fait
00:37:08 :si vous allez si vous comprenez comment fonctionne l'orienté objet comment fonctionnent lessuper comment fonctionne Django que vous n'avez pas peur justement d'aller regarder comment çamarche ici qu'est ce qui fait ok là il y a des trucs privés donc ça c'est des trucs qu'ilfaut pas que je touche ça le check par contre je peux peut-être le level rider qu'est ce qui fait
00:37:25 :ici donc voilà vous allez comprendre ce qui se passe et vous allez vraiment pouvoir manipulerles choses. Donc c'est voilà une petite discrétion mais pour expliquer que c'est bien important quand
00:37:39 :vous comprenez les choses vous devenez vraiment senior et pas juste à utiliser une bibliothèquemais à vraiment comprendre comment elle marche et à pouvoir faire des choses plus intéressantes.
00:37:50 :Donc voilà donc je reviens ça va pour tout ça les petites questions n'hésitez pas.Donc maintenant je vais vous montrer un petit peu du côté htmx donc là c'est un truc très trèssimple ici vous voyez j'ai juste une vue qui retourne juste le fichier donc il n'y a vraiment
00:38:16 :rien de complexe qui se passe ici mais je vais vous montrer donc comment justement htmx fonctionnepour aller par exemple filtrer des éléments. Donc là ce qu'on va faire c'est que ici je vais faire
00:38:27 :justement un blog post donc là je vais pas passer avec de l'ORM ou quoi que ce soit je vais justefaire une liste on va dire pourquoi Python est super et de façon totalement non biaisée on vadire pourquoi java script c'est pas ouf et pourquoi Céline n'aime pas Java. On va rester d'actualité.
00:38:54 :Donc voilà on a des articles de blog je vais les passer ici et du coup ici je vais tout simplementfaire une petite boucle for blog post, post in ça, and for et on va mettre un h1 text-whitepost et je vais raper tout ça justement je vais faire de la app, j'ai passé pas mal de temps à
00:39:21 :me former aussi plus sur ça c'est compliqué tellement c'est ça qui m'énerve un petit peutoujours avec javascript css html c'est que il y a dix milliards de façons et ils sont de clochesdifférentes il y a dix milliards de façons de faire quelque chose déjà que ce soit en javascript
00:39:37 :html etc ou là je peux mettre un di, je peux mettre un article, je peux mettre un main etctout ça ça va marcher et après il y a les préférences de chacun et après il y a les gensqui vont vous dire il vaut mieux faire comme ça etc c'est donc en fait on peut passer vraiment des
00:39:51 :jours à lire tout ça et à se dire bon bah finalement je suis pas vraiment plus avancé je sais pas tropsi l'article doit être dans le main ou le main dans l'article et dans la section etc bon en toutcas je vais faire un petit background grey 800 et p6 voilà ok est-ce que ça ressemble à peu
00:40:08 :près à quelque chose voilà ok super et rounded lg ça va être sympa voilà donc là j'ai lesarticles de blog et je vais faire bah justement je vais mettre un input ici on va mettre uninput et on va dire que c'est query donc là j'ai un input et je peux taper des choses dedans et
00:40:31 :j'aimerais bien que du coup quand je tape quelque chose ici et bien ça filtre ces éléments pourm'afficher juste les articles de blog donc c'est un petit peu justement ce que j'ai fait dans lesoptions de filtre de docstring. Donc qu'est ce qu'il faut faire ici donc justement il faut il y a
00:40:49 :plusieurs choses il faut il y a plein de choses en fait il va falloir que j'aille faire une requêteici pour afficher en fait en fonction de ma query les articles de blog par exemple si j'ai pourquoije vais afficher juste celui là et celui là il faut que je récupère du coup ce qui est dans le
00:41:07 :input il faut que quand je tape des choses dans le input ça justement fasse une requête vers leback-end pour que ça fasse une requête et que ça envoie justement cette donnée ici dans mon inputpour que je puisse filtrer en conséquence. Il faut que ensuite j'affiche je change cet affichage ici
00:41:28 :pour afficher qu'est ce qui va être quels sont les articles de blog etc donc voyez il y a pleinde plein plein de petites choses qui se passent comme ça et ce que je pourrais faire donc de façontrès simple on va déjà j'ai déjà vous montré comment faire justement sans htmx comme ça juste
00:41:42 :avec un rafraîchissement de page on va se dire voilà je vais j'ai un input ici je vais faire unpetit formulaire tout simple un form et ici on va justement faire un bouton qui va être type submiton va dire filtrer donc je vais juste faire ça et on va faire un rafraîchissement de la page hop
00:42:06 :donc voilà je vais cliquer sur filtrer ça va rafraîchir et ça va filtrer donc on va le fairecomme ça on va voir petit à petit comment on va pouvoir justement rajouter de l'interactivité làdedans. Donc ça va vous montrer aussi des premiers trucs c'est que et c'est pour ceci que j'aime bien
00:42:20 :ces façons de faire c'est que ça va vous forcer en fait en faisant ces choses là d'isoler votrecode c'est à dire que là en fait vous voyez je récupère les blocs post ici je mets dans le contextetout ça je le fais dans la vue d'index et pareil pour mes post ici je les affiche directement dans
00:42:35 :la vue d'index et en fait l'intérêt de faire ça après avec htmx notamment c'est que vous allezretourner juste des parties du html donc vous allez devoir retourner uniquement cette partieavec les articles filtrés et donc le problème c'est qu'actuellement comme c'est dans le fichierindex je peux pas le faire parce que là il ya des librairies qui existent qui vous permettent de
00:42:54 :spécifier des blocs ça c'est un truc qu'il faudrait que je regarde un peu plus en détailpour justement pouvoir dire ici bah j'ai un bloc un bloc bloc post par exemple et pouvoir aprèsdonner en fait directement le fichier index html en lui disant bah prend le fichier index mais
00:43:09 :rend pas tout le fichier rend moi juste cette partie bloc post avec les informations donc çapermet de garder un seul fichier et après d'aller rendre juste des parties du fichier. Moi ce que
00:43:20 :je préfère faire ici là c'est lui dire ici donc on va faire un nouveau fichier html et on va direici bloc post et ici je vais en fait déplacer ça donc on va prendre tout ça on va le mettre ici etje vais pouvoir inclure ce fichier donc dans cette page ici pour l'instant je peux juste faire
00:43:38 :include et dire bah tu includes le bloc post.html avec bloc post qui est égal à bloc post. Bonj'ai nominé ça on va mettre on va l'appeler post on va enlever le bloc ça va être plus simple.
00:43:53 :Voilà ça va être un peu plus simple et ici on va mettre post et par défaut je crois que le includeil a accès au contexte donc je suis même pas forcément obligé de le mettre comme ça jerafraîchis voilà donc tout fonctionne donc là vous voyez j'ai juste déplacé tout ça dans un
00:44:10 :dans un fichier séparé je l'inclus ici donc quand j'actualise la page j'ai bien mes blocs post enfonction de ce contexte ici mais là ce que je vais commencer à faire c'est justement séparer unpetit peu les choses donc là je vais dire je vais faire une fonction ici qui va s'appeler get
00:44:27 :bloc post par exemple et on va passer le query. Là je vais faire mon option de filtre je vaisprendre les post je vais les mettre là et je vais dire donc je vais filtrer cette liste je vais direif donc on va faire une compréhension de liste. On va faire donc désolé je vais un petit peu vite
00:44:46 :mais le temps file si ça va trop vite je vous laisserai regarder plus lentement en rediffusionmais je vais essayer quand même de finir le truc et puis après je pourrais repasser sur tout letruc mais j'essaie d'avancer un petit peu. Donc là on va filtrer donc on va dire tu retournes
00:45:04 :les post for post in post if post.contains query et on va mettre en lower comme ça on va pas êtresensible à la casse donc normalement non c'est pas contains vous voyez là je commence à mélangerdu javascript avec le reste on va dire if ça in post. Voilà donc là ça va me permettre de filtrer
00:45:24 :les post for post in post if query in post. Normalement c'est bon voilà et donc là ce queje vais faire c'est que on va dire à la place de ça on va dire post égal get blog post et le querydonc c'est là qu'on va devoir récupérer le query par défaut donc si je viens là j'aurai pas
00:45:47 :forcément quelque chose dans le query donc si j'actualise la page vous voyez là justement ilmanque quelque chose donc je peux dire par défaut on va mettre on va mettre query égal à none eton va dire on va mettre les post comme ça on va dire if not query on va tout simplement retourner
00:46:08 :post. Ok donc là ça veut dire que ce qui me dit ici il est pas content. Ok c'est une sourcerie donclà je peux appeler ça comme ça même si j'ai pas de query j'actualise normalement on va récupérertous les post voilà donc c'est parfait et le query donc là je peux le récupérer depuis justement
00:46:29 :depuis le depuis l'url donc on va commencer par faire comme ça normalement c'est comme ça qu'onferait je vais agrandir un petit peu ici pour qu'on voit l'url donc on ferait justement unat query égal à pourquoi et le tout ce qui est passé dans l'url on peut le récupérer avec
00:46:49 :request.get et ça c'est un dictionnaire et donc je vais récupérer ça ça mélange toujours un petitpeu il ya le get qui est le dictionnaire des paramètres qu'on met dans l'url et le get c'estle get des dictionnaires donc on pourrait le faire aussi comme ça le problème c'est que si je fais
00:47:05 :ça ça va planter si jamais je mets rien dans le query donc là si je mets juste ça là vous voyezj'ai une erreur parce qu'on va essayer de récupérer une valeur d'une clé dans un dictionnaire quin'existe pas donc c'est pour ça que je préfère toujours mettre le get comme ça et on va dire
00:47:22 :on va même pas mettre non en fait on va juste par défaut voilà faire ça donc j'actualise voilàdonc là ça marche et on va passer query égal query on peut même le mettre inline non je vais lemettre comme ça je vais le séparer normalement ça devrait marcher normalement ça devrait déjà
00:47:42 :marcher si je fais query égal pourquoi non alors ça ne me retourne pas donc là ça doit être monça doit être mon filtre qui ne fonctionne pas if not query donc là on va faire un petit peu dedebug je vais relancer le site en debug j'actualise donc j'ai bien ma request donc là vous voyez on
00:48:04 :a notre get qui est un query dict donc là on récupère bien le query on récupère bien pourquoion va aller voir dans les postes les postes y récupère rien ok donc c'est bien à ce niveau làdonc je vais actualiser je vais rentrer dans le poste hop alors on a notre query le query est bon
00:48:24 :donc c'est vraiment effectivement aux fonctions de ça que ça marche pas là les postes sont ah ouic'est ça effectivement c'est ça c'est que je fais query lower mais j'ai pas fait le post.lower en
00:48:34 :fait il faut tout minimiser donc là effectivement ça c'est pratique on peut ici on peut faire ah etpuis en plus ah non non il y a une pause oui c'est ça post ok vous pouvez évaluer des choses icidonc là par exemple je peux faire post pas crochet 0 si je veux ça va me récupérer le premier et donc
00:48:53 :là effectivement on peut directement analyser ça si je fais ça tac ça me met bien effectivementque la liste est vide et là donc effectivement si je mets une post.lower ça devrait marcher
00:49:03 :voilà c'est ça effectivement bien vu Céline je faisais query.lower donc le query même si jemettais un p majuscule il le mettait en minuscule mais après ça le faisait pas sur les postes doncvoilà normalement c'est juste ça donc ça je peux faire un point lower ici et c'est tout bon et
00:49:22 :je vais relancer le serveur tac voilà donc là ça marche bien j'ai bien mon filtre qui est fait doncon avance on a bien notre query pour l'instant donc ça se fait directement dans l'url maintenantce que je vais vouloir faire c'est ici aller faire ça avec mon formulaire donc le formulaire
00:49:43 :le formulaire il est ici donc on va rediriger vers la vue d'index donc ça c'est pas obligé pardéfaut si vous mettez rien dans l'action ça va rediriger vers la page sur laquelle vous êtesmais c'est toujours mieux d'être explicite je trouve méthode on va dire que c'est un get justement
00:50:00 :et nameSeqQuery donc normalement si mes souvenirs sont bons en html ça devrait suffire parce qu'ilva se baser du coup sur le nameInput donc là on va mettre java et ouais ok je me disais pourquoiil me montre celui là mais c'est parce que j'ai javascript donc c'est bon donc là si je mets
00:50:19 :celine hop ça va me montrer ça ok bah c'est parfait donc là effectivement on a bien ce que je voulais,je grandis encore un petit peu pour qu'on voit bien et je vais grandir ça aussi donc voilà donclà on a bien notre query on a notre formulaire qui nous permet de filtrer en fonction de ça
00:50:37 :donc si je mets pourquoi c'est bon si je mets python c'est bon d'ailleurs petite astuce onpeut mettre autofocus ici comme ça il va avoir le focus directement et on va mettre un placeholderaussi recherche je peux mettre pourquoi j'appuie sur entrée ok celine ok javascript c'est bon ça
00:51:00 :marche c'est tout bon jusque là en gros tu fais une requête qui récupère tout ouais c'est çaeffectivement c'est exactement ça donc là je vais revenir un petit peu sur tout ce qui sepasse parce que je suis allé vite donc là l'url c'est bon donc voilà je récupère le query qui est
00:51:21 :dans l'url je filtre mes postes comme je vous dis j'ai fait une fonction séparée avec ça jerécupère les postes je les passe au contexte ensuite on arrive ici on a notre formulaire doncavec une méthode get ce qui permet d'envoyer les infos dans l'url contrairement au poste qui va
00:51:39 :envoyer avec la requête et vous n'aurez pas tout ça qui est visible dans l'url le input qui mepermet donc ça c'est grâce au name avec le query là il m'embête parce qu'il n'a pas de labelnormalement faut mettre un label pour on va dire query et pour il faut le lier à un id je vais
00:51:58 :mettre ça et là on va mettre recherche recherche recherche voilà c'est bon la recherche d'accordok c'est bon donc voilà j'ai mon index je retourne là ok donc normalement tout est bon et maintenantdonc on va voir comment on peut faire ça avec htmx donc htmx je l'ai inclus ici et htmx donc
00:52:28 :ça va fonctionner aussi avec avec des attributs qu'on va mettre ici donc là ce que je vais fairec'est que je vais le mettre dans le form on va dire hx donc c'est souvent préfixé par prefixépar hx donc ce que je vais faire c'est dire que c'est un peu comme alpine il ya des trucs qui se
00:52:45 :ressemblent justement c'est pour ça au début on les confond un petit peu on se dit mais tiens qu'estce que je fais avec alpine qu'est ce que je fais avec htmx là on va vraiment faire une requêtedonc c'est pour ça qu'il faut que j'utilise htmx je crois qu'il ya des moyens de faire des requêtes
00:52:56 :aussi avec alpine mais c'est plus du mode de l'utilitaire pour dans certains cas de figureque vraiment ce à quoi sert le framework donc là je vais dire htmx trigger alors que je mesouviens bien il ya non c'est htmx get pardon htmx get ça permet de faire une requête get justement
00:53:17 :donc ça va être l'équivalent voilà de ce qui se passe quand d'habitude quand on met un méthodeégal get et que on clique sur le bouton qui est de type submit ça va faire une requête de typeget à cette url ici avec les éléments ici donc là je vais faire un htmx-get et je vais le faire
00:53:38 :donc à cette même url index donc là je peux enlever le action je crois que je peux aussi enleverle méthode voilà donc jusque là normalement c'est bon donc ça ça permet juste de dire voilà tu vasfaire une requête ajax à cette url en l'état je suis pas sûr que juste avec ça ça marche parce
00:53:58 :que je crois qu'il faut quand même au moins spécifier un target alors j'actualise je vérifiesi je fais tac, filtre ok donc là vous voyez on a bien la requête qui est effectuée donc on n'amême pas besoin il m'embête pas alors c'est peut-être après dans le ici non même là il
00:54:15 :m'embête pas ok ok j'aurais pensé qu'il m'embête parce qu'en fait ce qu'il faut faire après c'estdire qu'est ce que vous allez remplacer donc le htmx-get il fait juste dire fait une requête verstelle page ensuite on va dire htmx-target et là c'est là où on va c'est l'endroit où on va
00:54:34 :remplacer ce qui est retourné par la requête donc là je vais faire un div que je vais appelerpost et je vais mettre mes blocs post là dedans et on va lui dire htmx-target c'est post donc làon met le symbole dièse parce que c'est un id donc un id il y en a qu'un seul avec ce nom par
00:54:54 :page vous pouvez pas avoir vous pouvez mais vous allez avoir des erreurs etc un id c'est uniquedonc là ça veut dire que j'ai un seul endroit sur ma page qui contient cette balise avec l'id postet je dis que la target là où je vais intégrer ce qui est retourné par cette url ça va être dans
00:55:11 :le post et là normalement ça devrait faire en l'état quelque chose d'assez bizarre parce quejustement si je mets pourquoi je filtre là vous voyez en fait on inclut toute la page dans çaici donc en fait et c'est pour ça qu'on a séparé les choses vous allez voir si je fais un inspect
00:55:28 :ici vous allez voir que dans le post voilà ici j'ai alors non ça doit être un niveau plus hautalors attendez j'ai mon form ça c'est bon section main article et ma page complèteet j'arrive pas à me repérer là oui non c'est ça on a le on a le double oui c'est ça ok voilà
00:56:00 :on a le double form voilà donc il ya il ya vous voyez il a intégré il a intégré il a intégré unepage dans la page donc là c'est pas du tout ce qu'on veut non on veut juste afficher on veutjuste afficher les articles donc là ça veut dire qu'il va falloir dans notre vue ici alors là il
00:56:17 :y a différentes choses qu'on peut faire ce qu'on peut faire c'est utiliser un header donc dans lesrequest.headers vous avez une entête, je cherche le mot en français, c'est des choses qui sont
00:56:29 :envoyées avec votre requête donc par exemple ça va être justement de quel type est la requêtec'est quelque chose c'est des choses que vous pouvez trouver dans les inspections ici justementvoilà si je vais là vous avez le voilà voilà request headers vous avez des headers pour laréponse et pour la requête et les deux peuvent être intéressants là vous voyez dans le headers
00:56:48 :j'ai plein d'informations sur voilà qu'est ce que ça accepte comme type de données etc et vous allezvoir justement que si je refais ma requête donc hop je reviens là j'affiche ça désolé il y a destrucs un petit peu partout là donc si je fais je vais clire ça pour que ce soit clair si je mets
00:57:10 :donc pourquoi j'appuie sur entrée là vous voyez j'ai une nouvelle requête qui a été effectuée etsi je vais là vous voyez qu'il y a des trucs en plus on a hx target donc on a les informationsde htmx qui dit que la target donc c'est ce qu'on avait mis ici voilà il m'indique c'est quoi la
00:57:25 :target il m'indique l'url et il m'indique hx request donc ça c'est un une entête qui est danstoutes les requêtes htmx donc ce qui est intéressant c'est que ça va me permettre de distinguer ici enfait qu'est ce qui est une requête htmx d'une requête non htmx tout simplement ce que je peux
00:57:42 :faire en fait c'est request.headers et récupérer donc hx je sais plus exactement comment il l'appellehx request voilà c'est ça copie non c'est pas la valeur que je veux moi c'était non tant pis jevoulais le je voulais le l'autre alors hx en majuscule et request donc hx-request comme ça
00:58:00 :donc si on a cette entête qui est présente ça veut dire que c'est une requête qui est faitepar par htmx donc ça veut dire que on veut pas retourner toute la page on veut juste retournerles articles donc là ça tombe bien parce que on a un template ici qui contient uniquement les
00:58:17 :articles donc on va pouvoir l'utiliser les posts ça ça change pas normalement parce que ça va êtreenvoyé justement pareil avec avec la requête si on va voir dans les dev tools la voyez le hxcurrent url et la requête on a bien le query qu'il y a dedans donc on va bien récupérer les
00:58:35 :postes comme il faut et ce qu'on va faire seulement ici c'est que à la place on va retourner plutôtque de retourner tout l'index ici on va faire la même chose avec un return render mais cette foison va retourner on va retourner uniquement le blog post et en contexte bah du coup on va lui
00:58:52 :passer les posts donc ça d'ailleurs on pourrait le faire après voilà on va le faire après parcequ'on a déjà notre contexte ici donc on n'a pas besoin de le redéfinir donc je viens là donc làon déclare notre contexte si on est en présence d'une requête htmx bah on retourne donc là je
00:59:10 :vais remettre contexte on retourne juste le blog post et sinon on retourne la page au complet doncça ça permet que si je vais donc si j'enlève ça j'actualise la page là j'ai bien j'ai bien toutela page qui s'affiche par contre si je fais une requête donc là on va mettre python je filtre
00:59:25 :là vous voyez j'avais écrit c'est pas ouf c'est ça que j'avais marqué ah oui pourquoi je me suisplanté pourquoi j'avais écrit c'est pas ouf donc vous voyez là quand je fais une requête htmxdonc j'appuie sur entrée là ça va bien me retourner uniquement ce template et ce que ça va faire et
00:59:43 :bien c'est que ça va le ça va l'insérer à la place de ce que j'avais ici donc au départ quandj'actualise la page ici j'ai les trois articles et on va le voir si je fais inspect hop si j'inspectesi j'arrive à le trouver ouais non pas lui mais voilà post donc là vous voyez on a les trois
01:00:01 :articles ici et si je tape donc javascript j'appuie sur entrée hop vous voyez automatiquement àl'intérieur de cette target il a modifié et il a remplacé vous voyez c'est vraiment pas pluscompliqué que ça et le dernier truc qui reste là qu'on n'a pas dans notre dans notre truc c'est
01:00:19 :le changement de l'url et ça là encore ils ont tout prévu vous avez hx push url égal à truedonc ça en fait ce que ça va faire c'est que ça va ça va ça va en vous enfin ça va mettre à jourl'url avec ce qu'on a mis ici et là dans ce cas si comme on a un formulaire et qu'on a le query
01:00:41 :ça va le mettre dans l'url donc là si j'actualise je vais faire javascript et là vous voyez qu'on abien l'url qui est mis à jour donc ça c'est pratique parce que comme je vous disais du coupsi vous passez l'url à quelqu'un si je rafraîchis la page bah du coup j'aurais bien exactement la
01:00:56 :même chose que ce que j'avais d'ailleurs on peut aussi remettre dans ce query ici dans le input onva mettre value égal request.get.query et on va le mettre comme ça voilà petite astuce pour que
01:01:14 :l'on retrouve bien le nom de ce qui est mis là donc si je mets à la place python j'actualisej'ai bien python ici comme ça je sais qu'elle était la requête directement avec ça ici etdonc si je mets py voilà tout se met bien à jour donc voilà normalement c'est tout bon et si
01:01:34 :j'enlève ça là je reviens bien avec ma recherche donc ça marche et alors là est-ce que je pourraismettre du alpine avec ça est-ce qu'il y aurait intérêt à mettre du alpine je réfléchis qu'estce que j'avais fait alors là ce que vous pouvez faire ouais non moi c'était assez spécifique je
01:02:01 :réfléchis n'hésitez pas si vous avez des questions en attendant je réfléchis comment sur docstring làje l'avais fait pourquoi moi c'était spécifique et qu'alpine ah oui c'était parce que j'avaisles tabs ah oui c'est ça ok je vais vous montrer voilà avec ça donc là vous voyez bon en fait
01:02:22 :j'avais ouais c'est ça j'avais je me souviens maintenant j'ai pas mal de trucs en plus parcequ'en fait donc ça c'est le la partie si je retourne sur docstring je l'ai ici voilà doncc'est ce que je vous disais sur le voilà ça ici quand j'ai les onglets maintenant voilà quand on
01:02:43 :clique il n'y a pas de rafraîchissement de page vous voyez ça va juste ça va juste rafraîchiren fait l'url justement ça fait plein de changements ici sur le sur le css et ça afficheun formulaire différent donc si on revient là vous voyez j'ai pas mal ah oui j'ai en plus un
01:03:02 :truc ça m'a pris beaucoup de temps à faire ça et c'est pas ultra clean au niveau du code mais jesuis quand même content c'est qu'en fait si je fais il ya plein de trucs qui se passent ici c'estassez compliqué et peut-être des moyens de le faire un peu mieux mais là en fait il y avait
01:03:14 :beaucoup de choses à prendre en compte là en fait si je modifie quelque chose vous voyez le boutonil s'active donc dès qu'il ya un changement en fait sur un input ici le bouton s'active et jepeux enregistrer une fois que je clique dessus il se remet en disable j'ai la notification ici
01:03:30 :et aussi là quand je modifie quelque chose du coup si je veux changer d'onglet bah du coup il me ditvous avez des changements donc je peux choisir d'annuler et ça ne marche pas vous voyez alorsça me change quand même ok bon bah vous voyez petit bug que je découvre alors ça ça doit être
01:03:46 :parce que je l'ai déjà fait normalement si je le fais une fois je clique cancel ah non ça le faitquand même ok bon bah vous voyez il y a des bugs encore comme je disais c'est compliqué mais doncl'idée c'était que voilà si vous avez des changements en fait ici et que vous changez de page
01:04:00 :bah du coup ça vous change pas de page et donc tout ça vous voyez pas mal de choses à faire etil y avait justement le add class vous voyez avec le active tab général active donc ça changeait enfonction de quand on clique il y a beaucoup de choses qui se passent ici il y a le push url
01:04:17 :justement donc là en fait en fonction donc moi je l'avais mis en dur ici vous pouvez mettre trueet normalement je pense d'ailleurs que je pourrais simplifier ça parce que soit vous pouvez mettreen fait vous pouvez mettre ce que vous voulez ça va le mettre dans l'url soit vous dites true et
01:04:30 :en fait ça va utiliser ce que vous avez dans le hx get et là du coup bah normalement ah nonparce que ça va chercher autre chose non c'est pour ça là c'est différent parce que ce trucici vous voyez j'avais une autre url en fait avant donc voilà moi je veux pas mettre je veux pas
01:04:46 :mettre profil slash général je veux juste passer par le query parameter bon bref il y avait pleinde choses ici mais c'est pour ça du coup j'utilisais un peu un mix des deux pour à la fois changer lesclasses les classes ici pour avoir le pop-up en cas de truc non sauvegardé pour le bouton il y
01:05:00 :avait beaucoup de choses en jeu ici donc donc voilà alors alors non gabe en fait c'est gratuitalpine en fait c'est que tu as des composants dans tous ces trucs là sont gratuits heureusementc'est des bibliothèques open source etc c'est des c'est des modèles qui sont assez cool c'est en
01:05:21 :fait htmx je crois pas qu'il ait quoi que ce soit qui soit payant je réfléchis bah il a des sponsorsil a quand même des gros sponsors dont jetbrains mais alpine en fait lui effectivement c'est unpeu comme tellwin tellwin c'est pareil tellwin si vous avez déjà suivi l'histoire de tellwin
01:05:40 :c'est assez assez cool parce que justement les gens qui font ça savent très bien que en faitleur but c'est que leur librairie soit le plus utilisé parce que c'est pas juste une librairiequ'ils font comme ça c'est vraiment des gens qui font des librairies parce qu'ils ont une vision de
01:05:52 :ce que ça devrait être, genre htmx le gars en parle énormément je le relaie assez souvent surtwitter et vous pouvez aller lire justement dans tous les essayes là dessus c'est très intéressanten fait voilà je vous avais déjà montré ça dans d'autres sessions de voilà who will win vous voyez
01:06:04 :il y a beaucoup de beaucoup de choses là dessus où vous voyez c'est exactement ce que je vousmontrais où en 2004 voilà on avait un modèle très simple avec le dom, le browser, un modèle,une vue voilà après on est allé avec justement les virtual dom, reax etc là ça devient un truc
01:06:20 :ultra compliqué où il y a des routers, des estates, des props, des machins, des api, des trucs, c'estbordel pas possible donc là l'idée c'est de revenir à un truc beaucoup plus simple et doncces gens là ont intérêt à ce que du coup leur librairie soit beaucoup utilisée donc s'ils
01:06:35 :mettaient un prix si c'était payant et pas open source bah ils savent très bien que ça seraitbeaucoup beaucoup plus difficile à être adopté déjà quand c'est gratuit open source c'estcompliqué de pousser des trucs comme ça donc ce qu'ils font en fait c'est souvent des modèlesdonc tailwind c'était pareil les gars qui ont fait tailwind si vous allez voir justement aussi sur
01:06:51 :les blogs etc ils vont peut-être plus au tout début ils vont vous expliquer d'où vient tailwindvoilà pourquoi pourquoi ils ont fait tailwind et quelle est la logique derrière tout ça et parcontre après ce qu'ils font donc tailwind c'est ce qu'ils ont fait ils ont fait un truc de composants
01:07:06 :donc là par contre c'est payant donc vous pouvez vous pouvez acheter des composants c'est pareilavec avec alpine il a fait exactement le même modèle ça je l'ai acheté d'ailleurs aussirécemment c'est 150 dollars un truc comme ça parce que ce qui est cool c'est qu'il ya des composants
01:07:22 :mais il explique aussi donc c'est un petit peu c'est à la fois des composants et une formationen fait donc c'était très cool pour moi qui me plongeait à fond dedans de voir comment il faisaitses composants et j'ai réutilisé quasiment tel quel justement son composant de notificationqui apparaît ici et que vous retrouvez du coup sur docstring qui est très bien foutu et justement
01:07:41 :il explique comment tout ça fonctionne donc donc voilà moi je trouve ça très cool vous pouvezutiliser la bibliothèque il ya tout ce qu'il faut la documentation est super bien faite vous pouveztout faire vous même et puis après ben en fait ils vendent si vous voulez avoir des cas concrets
01:07:55 :des formations plus précis sur des trucs ou carrément des composants déjà tout fait vouspouvez contribuer et vous pouvez aussi contribuer je sais plus quelle librairie j'ai vu récemmentc'était très intéressant c'était je sais plus c'était un gars justement qui était à c'étaitquoi merde je vais pas retrouver c'était une librairie en fait qui était mais c'est un gars
01:08:22 :en fait qui a fait qui était ingénieur chez google etc donc qui gagnait dans les 10 ou 15000 euros par mois et qui avait un projet open source à côté et qui a commencé à le faire età un moment il s'est dit bon en fait je vais travailler à temps plein dessus et au début il
01:08:35 :s'est dit bon bah ça va être compliqué comment je peux réussir à au moins avoir juste même un tiersde mon salaire d'avant pour pour continuer à le développer et en fait il est passé par githubsponsor donc apparemment ça marche très bien on peut beaucoup critiquer github sur plein de sujets
01:08:53 :et je critique aussi souvent sur tout ce qui a été fait avec microsoft etc mais sur ces trucs là jedois avouer que de ce que j'ai vu apparemment c'est quand même bien foutu parce que justementvous pouvez sponsoriser en fait des projets c'est un peu comme des qu'on appelle ça les tipeee ou les
01:09:09 :buy me a beer ou des trucs comme ça mais un peu plus institutionnalisé et du coup directement sursur github donc c'est marrant d'ailleurs vous pouvez voir les l'idée c'est voilà c'est il y aeu beaucoup de choses justement beaucoup de débats sur ces trucs là j'avais prévu une vidéo youtube
01:09:24 :là dessus justement sur le fait qu'il ya en fait beaucoup et c'est ça qui est voilà vous voyez lele cti ici est très intéressant si your top dependencies sur le fait qu'en fait il ya desdéveloppeurs open source qui faisait des librairies sur leur temps libre qui était utilisé par des
01:09:38 :mastodontes par facebook etc et ils se sont rendu compte en fait que voilà il gagnait rien avec çaqu'ils passaient leur soirée dessus et que en fait limite les gens leur parlait mal en mode çamarche pas rajoute tel truc etc et donc à un moment il y en a quelques uns qu'on a eu marre et
01:09:53 :qu'on fait des protestations des grèves on pourrait dire en modifiant le code et en disant voilàmaintenant c'est fini ça marche plus et tout et donc il ya plein de sites qui se sont cassé la gueuleavec ça parce que du coup la librairie marchait plus donc l'idée c'est ça c'est de voir voilà en
01:10:07 :fait moi pareil justement htmx je pense que probablement je vais un jour donner un peud'argent à ça parce que je suis très dépendant déjà du truc et j'y crois beaucoup etcalpine justement j'ai acheté aussi un peu pour ça dans le mode à la fois parce que ça m'intéressait
01:10:23 :aussi pour soutenir le projet donc c'est très cool de dire voilà j'ai un projet il est dépendantde tel truc bah si j'ai envie c'est un peu égoïste aussi tout simplement de se dire mon projet dépendde ces librairies donc j'ai envie que le mec qui passe ses soirées là dessus il puisse continuer à
01:10:40 :le faire donc je donne ne serait-ce que 10 euros par mois au truc pour que ça continue et du coupbah je sais plus quelle était cette librairie mais le gars du coup il avait réussi à monter à 10 ou12 000 euros donc presque autant que ce qu'il faisait avant donc un très bon salaire d'ingénieur
01:10:55 :similaire à ce que vous faites quand vous êtes à google etc mais du coup avec justegithub sponsor. Voilà pour la petite histoire. Donc voilà je vais essayer de vous mettre ça aussi
01:11:11 :justement c'est un truc qu'il faut que je rajoute pour que je puisse fournir les sources sur lessessions de mentora parce que P a souvent du code aussi qui fait donc je vais essayer de vous mettrece petit projet quelque part et je vais peut-être en profiter justement pour coder le truc pour
01:11:29 :mettre les sources sur les sessions de mentora. Est-ce qu'il y a des questions?Non tout va bien? Ok bah s'il n'y a pas de questions on va s'arrêter là et je vais remettre
01:11:47 :la rediffusion et les sources dans la journée. Ok donc comme je vous disais je redis le disclaimerouais Gabriel et tout. Après vraiment là on est vraiment sur de l'avancée. Il y a 10 milliards de
01:12:10 :choses à maîtriser avant de s'intéresser à ça. Vous pouvez faire, vous avez vu, un rafraîchissementde page c'est pas la fin du monde. Vous faites un formulaire, faites déjà des formulaires bien,
01:12:24 :des formulaires accessibles justement avec tout ce qu'il faut, renseignez-vous là-dessus,maîtriser HTML, CSS, Django etc. avant de vous lancer là-dedans. C'est plus pour vous montrer
01:12:33 :voilà des trucs qui peuvent être... Je sais qu'il y a quelques étudiants qui sont déjà bien avancésqui utilisent ce genre de librairie mais ils ne sont pas beaucoup non plus. Mais l'idée c'est
01:12:43 :aussi justement avec ces sessions de vous montrer un petit peu des trucs intéressants, des trucsqui élargissent un petit peu votre horizon et qui vous permettent justement aussi de voir que cessolutions là existent mais de commencer par le faire déjà, voilà comme tu dis Gab justement,Bootstrap, là je vous montre Tailwind, mais de se dire bon ok Tailwind existe, on va aller voir
01:13:02 :déjà ce qu'on peut faire avec du CSS, avec du HTML en sachant, en ayant dans un coin de notre têtequ'il y a peut-être d'autres solutions qui marchent pour plus tard qui sont intéressantes. Et en
01:13:11 :attendant voilà, vous vous assurez de consolider les bases aussi. Ok bon bah du coup... Ah ok.Ok ouais, bah ouais, n'hésite pas si tu as des questions, si tu veux qu'on regarde ça un jeudi,The Crow. Parce que ouais, cutie, il y a pas mal de choses à dire. Ouais ouais, c'est vraiment pas...
01:13:41 :Quand vous allez sur Django, après Django ou justement Alpine, tout ça, c'est des belles docs.Ok bon bah bon après-midi, bon week-end à tous et je vous mets la rediffusion dans la journéepour que vous puissiez revoir ça plus lentement si vous le souhaitez. Merci beaucoup, ciao ciao. Salut.
Aucune occurrence trouvée pour « ».
