Filtrer des données Django avec HTMX

Session du 25 février 2023 à 13h30

Pratique & Live Coding

Développement Web & Frameworks

Frontend & UI

Deviens membre Premium

Cette session de mentorat est réservée aux membres Premium. Rejoignez-nous pour accéder à toutes les rediffusions des sessions de mentorat !

Premium

+100h de formations
+180 exercices de code
+100h de mentorats en rediffusion
20 projets
Mentorats groupés hebdomadaires
Support individuel avec nos mentors

Découvrir les formules

Voir le détail des fonctionnalités

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.

Rechercher dans la transcription

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 dev c'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 se dit bon bah je vais refaire un truc que ce soit la première fois quand on crée une nouvelle fonctionnalité 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 plus qu'on continue toujours d'apprendre des choses par exemple là parce que je vais vous montrer aujourd'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 site que j'ai un petit peu refait après etc mais entre la v1 d'il y a 3-4 ans maintenant et aujourd'hui il 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 suis en train de refaire les images donc j'ai passé toute l'après-midi hier à me mettre à jour sur tous les trucs d'accessibilité parce que moi j'étais encore resté aux tout simples images source 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ément toujours minimisées etc etc et donc voilà là j'ai commencé à refaire des modèles pareil sur les images 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 upload to qui va changer le dossier donc comme j'ai une petite fonction pour faire ça et puis après on met 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 quart d'heure au lieu de passer cinq minutes donc on se dit bah je vais juste copier-coller c'est pas grave 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 dit bon en fait merde j'ai 15 fois le même code je vais essayer de refactoriser le truc etc et de faire 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 ceci d'ailleurs qu'il faut pas avoir peur de faire les choses là en fait au début j'avais fait des modè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 le nom de la formation j'avais appelé ça name le champ donc c'était formation point name ça faisait du 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 de blog qu'un nom de blog on a le nom d'une formation mais le titre d'une formation je sais pas enfin voilà 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 et unique modèle de carte pour tout sur le site avant j'avais des modèles pour les articles de blog des 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 un peu différents donc là j'ai tout uniformisé et le problème c'est que bah du coup quand on fait mon 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 tu retournes title ou des trucs comme ça mais c'est pas voilà c'est pas c'est pas ultra ultra pratique donc 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 planifier parce que de toute façon un moment on va changer des choses et là voilà moi je suis en train de tout 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 vont chopper quelques bugs on peut jamais tester 100% d'une application donc c'est normal qu'il y ait des petits bugs du genre donc voilà pour le pour l'introduction et oui Céline du coup et l'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 etc et vu que justement ça change tout le temps enfin c'est malheureusement c'est mais c'est bon je sais 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 moi je étant dans ce côté création je peux le très bien comprendre c'est comme quand on fait une quand 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 voitures etc et c'est déjà tellement de problématiques que après bah forcément quand on rajoute les problè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 va y avoir 5000 vélos qui vont passer et des fauteuils roulants va y en avoir 10 donc malheureusement malheureusement 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ï à full stack 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 un lecteur il y a quelques options dans les profils un blog c'est pas énorme mais en fait tous les petits 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 pages d'admin de pouvoir éditer le blog tu as les les du coup l'éditeur de texte donc juste sur un truc qui 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-être vu dans le profil maintenant c'est un peu plus justement j'utilise htmx pour naviguer d'une page à 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 mot de passe donc je me dis bon c'est pas grave au pire il ya une ou deux personnes qui vont dire j'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'ai oublié mon mot de passe je veux modifier mon mot de passe je modifie mon mail après il ya les mails 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 des trucs assez tentaculaires voilà donc assez blablaté je vais retrouver mon projet PyCharm voilà alors je 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 ouais entire screen hop et vous je vais vous mettre de l'autre côté ok donc c'est bon vous voyez bien tout 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 normalement c'est tout bon super ok donc ce que je vais vous montrer c'est deux choses principalement trois choses 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 moi j'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 en javascript 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 beaucoup plus compliqué qui permet du coup d'avoir ce qu'on appelle des SPA single page application qui moi je 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 à utiliser une énorme bibliothèque avec toute une façon de penser en fait juste pour avoir ce cet aspect de page 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 tout le front-end passe à travers ça alors que ces petites bibliothèques comme alpine et htmx c'est des bibliothèques qui vont pouvoir se rajouter un petit peu qui vont pas totalement du coup annihiler 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 langage de template donc là ça va être dans ce cas ci le langage de template de django mais htmx ça marche 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 peur aussi c'est d'ailleurs je viens de m'en rendre compte en fait en l'expliquant que ce soit tailwind alpine 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 trois ces 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 tailwind après des trucs comme ça qui sont directement dans le html et ça fait un petit peu peur après moi 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 comprend en fait que c'est un contexte un peu javascript à l'intérieur de ça sinon en fait vous avez vous 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 justement collapser certaines choses vous pouvez lui dire je crois dans les préférences je sais plus où du plugin 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 un petit peu ce qu'on aurait si on n'avait pas du tailwind à l'intérieur avec voilà une section tu vois j'ai fait attention c'est l'une j'ai fait un petit peu accessibilité section main etc 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 besoin en fait de de faire du de passer d'un truc à un autre c'est à dire de passer du html au fichier javascript 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 veux modifier le css je vais dans mon fichier css et je suis pas en train de tout modifier au même endroit 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 plus quand on va dans son fichier css on va avoir le nom d'une classe et puis bah du coup il va falloir faire 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 directement tellement 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 sais que cette propriété ici elle est juste pour cette section et elle va pas aller impacter d'autres trucs 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 à chaque fois qui est vraiment le truc moi qui m'énervait un point pas possible en web c'est que l'on se disait 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 se pose même plus la question je veux changer un truc sur ce h1 bah je vais ici dans ma classe je change 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 mettre vert à 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 petit peu vu j'en ai parlé assez régulièrement c'est donc pour faire un petit peu voilà de la modification 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'est un petit peu si on pouvait faire un rapprochement similaire à ce qu'on pourrait faire avec du vue 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'est c'est beaucoup beaucoup beaucoup plus léger justement c'est des bibliothèques qui vont juste vous permettre de faire ça précisément et qui vont pas comme je disais vous enfermer dans 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 les si je vais sur duckstring du coup dans les options de filtres en fait j'avais deux possibilités j'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'est parce 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 pas mettre fonction je dois bien avoir un truc fonction voilà donc en fait auparavant je faisais tout en javascript justement j'avais des attributs sur chaque carte qui déterminait qui expliquait en fait 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 ça faisait 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'est voilà ça nécessite de faire toute l'implémentation au niveau javascript peut-être qu'à terme je le ferai avec alpine justement je me suis posé la question en attendant ce que je fais c'est qu'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 les quiz c'est pas trop gênant sur les formations vous l'avez peut-être vu c'est un petit peu long donc voilà 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 faire beaucoup de requêtes en fait parce que dans chaque formation je vais aller regarder qu'est ce que vous avez regardé ou pas etc et donc c'est ça qui va déterminer si vous êtes en train de regarder une 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 % donc tu 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'optimise là dessus mais du coup ça me permet tu vois d'aller faire une requête sans que j'ai besoin de recharger 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'est que si là en fait tu vois je vais sur quiz ça change dans l'url ça met tab quiz si je désactive justement 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 vais retomber exactement sur cette page ici avec les filtres qui sont appliqués donc ça c'est assez pratique 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 lier tout ça avec alpine donc là alpine vous voyez c'est ça me permet en fait comme je disais de faire 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 ici on va enlever ça je vais le faire d'abord en javascript pour vous montrer donc là on va enlever tout ç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 sur une page web en faisant getElementById ou querySelector et en mettant comme ça voilà le hashtag 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é il peut y avoir des effets de bord mais moi je trouve ça assez pratique je le savais pas donc si je vais ici 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 montrer ici donc là vous voyez je peux faire title et il va me retrouver le title et donc là je peux changer 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 bouton quand on fait un clic je vais aller exécuter fou et ici on va changer les classlist de ça donc on va 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 jamais où on en est donc non c'est pas ça justement c'est des parenthèses et après des hop donc vous 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 un classlist.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à je pourrais 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 faire une 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 javascript beaucoup de if, elif etc et donc ce qu'on peut faire à la place c'est un petit peu le même le 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éfinir donc en fait vous les définissez à différents endroits là si je le définis dans au niveau de cette 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 de cette 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 et je vais peut-être le désactiver il va m'embêter sinon donc on peut binder on peut dire cette classe 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 peut mettre juste les deux points et ça va faire la même chose et ça va s'ajouter aux classes que vous 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 garder ici mon texte excel mon font bold dans mon bouton je vais remettre click me et ici on peut dire donc si 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 en javascript on met un point d'interrogation et ensuite on met voilà deux conditions comme ça donc 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 green 400 à part défaut on a dit que red était false donc on va utiliser cette classe donc j'actualise et 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 faire justement un at click cette fois donc le at ça permet de lier des événements qui vont se passer donc ç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'est un peu comme le quand on faisait le un clic justement donc là je vais dire at click on va tout 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 de red 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 vous montrer aussi j'ai un petit une petite extension qui me permet d'afficher justement les éléments donc 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 changer et ma classe ici elle va réagir donc vous voyez tout ça est dynamique c'est vraiment red ici au dé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 faisait que je l'utilisais pas forcément je me disais bon ça rajoute une dépendance et finalement ça fait quand 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'aller faire des fonctions ailleurs etc on fait tout ici si là encore on a besoin de changer quelque chose bah 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 classes comme ça juste en mettant deux points classe et en faisant ça il y a même des façons encore plus 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 seulement non pas ça c'est le net comme ça voilà si red est vrai alors tu mets texte red 400 donc là si je 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 vraiment très très raccourci donc ça c'est ça c'est du javascript c'est pas des trucs il y a plein de notations 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 fonction de valeur ça fait que voilà finalement quelque chose qui est assez restreint et qui est très pratique 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 ma tête j'avais regardé vite fait en fait si vous allez sur la page de alpine c'est ce qu'ils vous disent 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 ça a 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 un petit 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 django donc là ce que je pourrais faire justement c'est plutôt que de mettre click me je pourrais dire x 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 que là on pourrait dire justement on pourrait refaire ce truc là de dire le texte est rouge et le texte est 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 pousse le truc un petit peu plus loin bah ça permet de faire des trucs assez intéressants il y a des il 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 soit dé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 des valeurs bah si toutes les valeurs sont vraies tu montes la carte et sinon tu la tu la caches donc là 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 petite transition 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 prends je sais pas créer un blog ici c'est ce que j'utilise voilà pour changer pour changer de trucs 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 truc de notification ici est fait avec alpine donc vous voyez il ya plein de petits trucs comme ça qui sont 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ègres dans une valise de script ouais alors en fait souvent c'est plus en fait on va faire comme un 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 dogstring c'est dingue ça c'est les balises qui permettent d'inclure du link voilà c'est ça link j'oublie toujours 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 ça et 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 terme de 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 rouge donc tu peux faire du style inline comme ça tu peux mettre des scripts tu peux mettre d'ailleurs un 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-être qu'il faut je sais plus là ça doit être aussi parce que du coup je sais pas lequel a précédence sur 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.addEventListenerDomContentUpdate si je me souviens bien là je fais un petit peu de mémoire j'ai pas j'ai pas copilot pour m'aider justement 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 tu vois 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 justement comme 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 defer par 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 parce que soit tu vas avoir un truc inline justement que tu as mis ici qui va écraser quelque chose ou parce 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 tous ces trucs là tout comme justement sur react je vois tellement d'étudiants qui se lancent directement sur react alors qu'ils connaissent à peine javascript si vous utilisez telle oui que ce 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 faire des requêtes ajax déjà en javascript pour voir justement comment ça marche qu'est ce que c'est etc 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 vous n'allez pas vraiment savoir pourquoi c'est cool comme je dis même moi en fait justement qui faisait dé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 risque c'est voilà c'est que si vous partez tout de suite sur tellwind déjà en plus bah c'est ça vous n'allez pas 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 alpine alors qu'en fait non ça c'est du javascript il y a des trucs par contre dans alpine qui sont spé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 de déjà faire sans librairie sans rien pour bien maîtriser les bases pour bien les comprendre pour 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 marche comme ça et je ne sais pas trop à comprendre pourquoi ça marche comme ça et il y a l'approche où 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 etc etc et du coup bah si vous voulez modifier des choses vous pouvez le faire et c'est d'ailleurs petite 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'image c'est dans générique voilà là je suis en train de faire du coup un field custom pour gérer toutes les 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 voulais faire c'est qu'à chaque fois en fait que je vais uploader une image je veux qu'elle soit compressée automatiquement 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 qui me optimise du coup qu'il enlève toutes les métadonnées pas utiles et qui compresse un petit peu 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éphone ou sur un écran 4k retina etc il va utiliser différents formats d'image si vous regardez sur votre 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 veux pas avoir à le faire à chaque fois que j'uploade une image je veux pas avoir à créer automatiquement tout ç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 qui hérite de image field et là vous voyez il y a plein de choses où c'est vraiment du très custom c'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 parce que dans les gestions d'image il y a plein de trucs où des fois il va en fait il va avoir un fichier 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 pas encore sauvegardé donc il faut aller trouver quel est l'endroit où ça va vraiment sauvegarder et 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érents save donc le save il se fait vraiment ici donc c'est à ce moment là que je peux vraiment aller sauvegarder 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 fichier qui 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 les super comment fonctionne Django que vous n'avez pas peur justement d'aller regarder comment ça marche ici qu'est ce qui fait ok là il y a des trucs privés donc ça c'est des trucs qu'il faut 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 manipuler les 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èque mais à 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ès simple 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 fonctionne pour 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 juste faire une liste on va dire pourquoi Python est super et de façon totalement non biaisée on va dire 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 simplement faire une petite boucle for blog post, post in ça, and for et on va mettre un h1 text-white post 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 peu toujours avec javascript css html c'est que il y a dix milliards de façons et ils sont de cloches diffé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 etc tout ça ça va marcher et après il y a les préférences de chacun et après il y a les gens qui 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 trop si l'article doit être dans le main ou le main dans l'article et dans la section etc bon en tout cas 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 les articles de blog et je vais faire bah justement je vais mettre un input ici on va mettre un input 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 pour m'afficher juste les articles de blog donc c'est un petit peu justement ce que j'ai fait dans les options 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ête ici pour afficher en fait en fonction de ma query les articles de blog par exemple si j'ai pourquoi je 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 le back-end pour que ça fasse une requête et que ça envoie justement cette donnée ici dans mon input pour 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 plein de plein plein de petites choses qui se passent comme ça et ce que je pourrais faire donc de façon trè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 un petit formulaire tout simple un form et ici on va justement faire un bouton qui va être type submit on 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 faire comme ç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 votre code c'est à dire que là en fait vous voyez je récupère les blocs post ici je mets dans le contexte tout ç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 allez retourner juste des parties du html donc vous allez devoir retourner uniquement cette partie avec les articles filtrés et donc le problème c'est qu'actuellement comme c'est dans le fichier index 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étail pour justement pouvoir dire ici bah j'ai un bloc un bloc bloc post par exemple et pouvoir après donner 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 ça permet 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 dire ici bloc post et ici je vais en fait déplacer ça donc on va prendre tout ça on va le mettre ici et je 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. Bon j'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 include il a accès au contexte donc je suis même pas forcément obligé de le mettre comme ça je rafraî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 en fonction de ce contexte ici mais là ce que je vais commencer à faire c'est justement séparer un petit 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 vais prendre les post je vais les mettre là et je vais dire donc je vais filtrer cette liste je vais dire if 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 rediffusion mais je vais essayer quand même de finir le truc et puis après je pourrais repasser sur tout le truc 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 être sensible à la casse donc normalement non c'est pas contains vous voyez là je commence à mélanger du 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 que je vais faire c'est que on va dire à la place de ça on va dire post égal get blog post et le query donc 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 il manque quelque chose donc je peux dire par défaut on va mettre on va mettre query égal à none et on 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 donc là je peux appeler ça comme ça même si j'ai pas de query j'actualise normalement on va récupérer tous 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'on ferait je vais agrandir un petit peu ici pour qu'on voit l'url donc on ferait justement un at 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 petit peu il ya le get qui est le dictionnaire des paramètres qu'on met dans l'url et le get c'est le 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 voyez j'ai une erreur parce qu'on va essayer de récupérer une valeur d'une clé dans un dictionnaire qui n'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 le mettre 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 de debug 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 pourquoi on 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 oui c'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 et puis en plus ah non non il y a une pause oui c'est ça post ok vous pouvez évaluer des choses ici donc 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 effectivement que 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 je mettais un p majuscule il le mettait en minuscule mais après ça le faisait pas sur les postes donc voilà 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 donc on avance on a bien notre query pour l'instant donc ça se fait directement dans l'url maintenant ce 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é par défaut si vous mettez rien dans l'action ça va rediriger vers la page sur laquelle vous êtes mais 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'il va se baser du coup sur le nameInput donc là on va mettre java et ouais ok je me disais pourquoi il 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à donc là 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 on peut mettre autofocus ici comme ça il va avoir le focus directement et on va mettre un placeholder aussi 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 ça effectivement c'est exactement ça donc là je vais revenir un petit peu sur tout ce qui se passe 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 je récupère les postes je les passe au contexte ensuite on arrive ici on a notre formulaire donc avec 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 me permet donc ça c'est grâce au name avec le query là il m'embête parce qu'il n'a pas de label normalement 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'accord ok c'est bon donc voilà j'ai mon index je retourne là ok donc normalement tout est bon et maintenant donc 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 faire c'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'est ce que je fais avec alpine qu'est ce que je fais avec htmx là on va vraiment faire une requête donc 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 figure que vraiment ce à quoi sert le framework donc là je vais dire htmx trigger alors que je me souviens 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 type get à 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 enlever le méthode voilà donc jusque là normalement c'est bon donc ça ça permet juste de dire voilà tu vas faire 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érifie si je fais tac, filtre ok donc là vous voyez on a bien la requête qui est effectuée donc on n'a mê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'est dire qu'est ce que vous allez remplacer donc le htmx-get il fait juste dire fait une requête vers telle 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 appeler post 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 unique donc là ça veut dire que j'ai un seul endroit sur ma page qui contient cette balise avec l'id post et 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 que justement si je mets pourquoi je filtre là vous voyez en fait on inclut toute la page dans ça ici 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 haut alors attendez j'ai mon form ça c'est bon section main article et ma page complète et 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é une page dans la page donc là c'est pas du tout ce qu'on veut non on veut juste afficher on veut juste 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 les request.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ête c'est quelque chose c'est des choses que vous pouvez trouver dans les inspections ici justement voilà si je vais là vous avez le voilà voilà request headers vous avez des headers pour la ré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 allez voir justement que si je refais ma requête donc hop je reviens là j'affiche ça désolé il y a des trucs 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 et si je vais là vous voyez qu'il y a des trucs en plus on a hx target donc on a les informations de 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 dans toutes les requêtes htmx donc ce qui est intéressant c'est que ça va me permettre de distinguer ici en fait 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'appelle hx request voilà c'est ça copie non c'est pas la valeur que je veux moi c'était non tant pis je voulais 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 faite par par htmx donc ça veut dire que on veut pas retourner toute la page on veut juste retourner les 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 être envoyé justement pareil avec avec la requête si on va voir dans les dev tools la voyez le hx current 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ôt que de retourner tout l'index ici on va faire la même chose avec un return render mais cette fois on 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 parce qu'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 toute la 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 suis planté pourquoi j'avais écrit c'est pas ouf donc vous voyez là quand je fais une requête htmx donc 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 quand j'actualise la page ici j'ai les trois articles et on va le voir si je fais inspect hop si j'inspecte si 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 plus compliqué 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 à true donc ça en fait ce que ça va faire c'est que ça va ça va ça va en vous enfin ça va mettre à jour l'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 a bien l'url qui est mis à jour donc ça c'est pratique parce que comme je vous disais du coup si 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 on va 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'actualise j'ai bien python ici comme ça je sais qu'elle était la requête directement avec ça ici et donc 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 pourrais mettre du alpine avec ça est-ce qu'il y aurait intérêt à mettre du alpine je réfléchis qu'est ce 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'avais les 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 parce qu'en fait donc ça c'est le la partie si je retourne sur docstring je l'ai ici voilà donc c'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îchir en fait l'url justement ça fait plein de changements ici sur le sur le css et ça affiche un 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 je suis quand même content c'est qu'en fait si je fais il ya plein de trucs qui se passent ici c'est assez 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 bouton il s'active donc dès qu'il ya un changement en fait sur un input ici le bouton s'active et je peux 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 dit vous 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 fait quand même ok bon bah vous voyez il y a des bugs encore comme je disais c'est compliqué mais donc l'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 et il y avait justement le add class vous voyez avec le active tab général active donc ça changeait en fonction 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 true et normalement je pense d'ailleurs que je pourrais simplifier ça parce que soit vous pouvez mettre en 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 non parce que ça va chercher autre chose non c'est pour ça là c'est différent parce que ce truc ici 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 plein de choses ici mais c'est pour ça du coup j'utilisais un peu un mix des deux pour à la fois changer les classes 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 gratuit alpine en fait c'est que tu as des composants dans tous ces trucs là sont gratuits heureusement c'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 sponsors il a quand même des gros sponsors dont jetbrains mais alpine en fait lui effectivement c'est un peu 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 fait leur but c'est que leur librairie soit le plus utilisé parce que c'est pas juste une librairie qu'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 sur twitter et vous pouvez aller lire justement dans tous les essayes là dessus c'est très intéressant en 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 vous montrais 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'est bordel pas possible donc là l'idée c'est de revenir à un truc beaucoup plus simple et donc ces 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 serait beaucoup beaucoup plus difficile à être adopté déjà quand c'est gratuit open source c'est compliqué de pousser des trucs comme ça donc ce qu'ils font en fait c'est souvent des modèles donc 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 tailwind voilà pourquoi pourquoi ils ont fait tailwind et quelle est la logique derrière tout ça et par contre 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 pareil avec avec alpine il a fait exactement le même modèle ça je l'ai acheté d'ailleurs aussi ré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 formation en fait donc c'était très cool pour moi qui me plongeait à fond dedans de voir comment il faisait ses composants et j'ai réutilisé quasiment tel quel justement son composant de notification qui 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 pouvez utiliser la bibliothèque il ya tout ce qu'il faut la documentation est super bien faite vous pouvez tout 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 vous pouvez contribuer et vous pouvez aussi contribuer je sais plus quelle librairie j'ai vu récemment c'était très intéressant c'était je sais plus c'était un gars justement qui était à c'était quoi 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 15 000 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 tiers de mon salaire d'avant pour pour continuer à le développer et en fait il est passé par github sponsor 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à je dois avouer que de ce que j'ai vu apparemment c'est quand même bien foutu parce que justement vous 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 sur sur github donc c'est marrant d'ailleurs vous pouvez voir les l'idée c'est voilà c'est il y a eu 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 le le cti ici est très intéressant si your top dependencies sur le fait qu'en fait il ya des dé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 ça qu'ils passaient leur soirée dessus et que en fait limite les gens leur parlait mal en mode ça marche 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 gueule avec ç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 peu d'argent à ça parce que je suis très dépendant déjà du truc et j'y crois beaucoup etc alpine 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épendant de tel truc bah si j'ai envie c'est un peu égoïste aussi tout simplement de se dire mon projet dépend de 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 coup bah je sais plus quelle était cette librairie mais le gars du coup il avait réussi à monter à 10 ou 12 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 juste github 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 les sessions de mentora parce que P a souvent du code aussi qui fait donc je vais essayer de vous mettre ce 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 disclaimer ouais 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îchissement de 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és qui 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 trucs qui élargissent un petit peu votre horizon et qui vous permettent justement aussi de voir que ces solutions 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ête qu'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ée pour que vous puissiez revoir ça plus lentement si vous le souhaitez. Merci beaucoup, ciao ciao. Salut.

Rechercher sur le site

Lance une recherche parmi les centaines de ressources disponibles sur le site.

Inscris-toi à Docstring

Pour commencer ton apprentissage.

Tu as déjà un compte ? Connecte-toi.