Sur la version finale en prod, j'ai désactivé le auto next step car c'était pas du tout agréable comme UX au final. Et la version mobile m'a demandé beaucoup d'ajustements à cause de contrainre d'iOS qui ne permet pas de lancer une vidéo automatiquement sur mobile (il faut une première interaction avec l'utilisateur). Utilisez mon code BENJAMINCODE pour avoir -10% sur toutes les offres d'hébergement d'Hostinger et testez l'offre Business pour créer votre propre vitrine en ligne avec l'aide de leur IA : www.hostg.xyz/SHEfv
Salut Benjamin, pour le responsive je pense que tu n’as pas besoin d’utiliser deux vidéos. Tu peux faire en sorte que les vidéos et les div step soient dans la même div une par une et comme ça tu les mets en display flex et tu les passes en flex-direction column sur mobile
Oui très bien vu ! Ça m’arrangeait pas à l’époque avec la transition que j’avais prévu entre les vidéos mais vu que je n’utilise même plus de transition dans la version finale ça aurait été top et réduit beaucoup de complexité de faire comme tu le proposes !
Aucun problème ! Sinon j’ai eu une autre idée concernant la vidéo que t’as sortie il y a à peu près deux semaines, normalement je l’ai aussi mise sur la vidéo en question mais pour t’éviter de regarder encore une fois les commentaires, je te la remets ici : en ce qui concerne l'API de TH-cam, je ne sais pas exactement si tu peux le faire avec leur API, et, de plus, c'est une solution qui à court terme (environ une semaine je pense, même si je manque d'informations sur l'API) est vraiment nulle mais qui pourrait être vraiment intéressante à long terme, et pourrait te faire économiser énormément de jetons API : En gros, tu check pour chaque youtubeur la date de sortie des 5-6 dernières vidéos, tu peux ainsi établir une moyenne de la récurrence de sortie des vidéos du youtubeur concerné que tu stockes dans ta bdd, ainsi, plutôt que de vérifier pour chaque youtubeur tous les jours si une nouvelle vidéo est sortie, tu vérifies à l'aide de la récurrence que tu as stockée. Exemple : -Imaginons que Squeezie ait sorti ses 6 dernières vidéos avec une fréquence moyenne de 1 semaine sur celles-ci, alors, plutôt que de vérifier s'il en a sorti une le lendemain après avoir sorti sa 7ème, tu vas attendre 6 jours (je pense qu'une marge d'erreurs de 15-20 % serait judicieuse en prenant en compte le fait que la récurrence des vidéos peut varier), de ce fait tu économises un jeton API pour un youtubeur pendant 6 jours, et en appliquant cette technique pour chaque youtubeur, tu économises une quantité énorme de jetons ! Et, dès que t'as la nouvelle vidéo, tu stockes sa date de sortie directement, dans ta bdd pour réévaluer la fréquence de sortie des vidéos du youtubeurs concernés et ainsi de suite.
Je me ferais jamais à Vue je crois 🥲 Mais effet très cool 🙌 Petite remarque sur l'accessibilité (et sémantique): Au lieu de stack des divs tu peux utiliser une structure "ol>li" pour aider les screen readers à identifier la structure. Également un petit aria-current="step" (ou aria-expanded mais on perd la notion de steps) permet d'identifier celle qui est ouverte actuellement. Et enfin une petite nav clavier avec des focus facilement visibles et des sous-titres et on est au top 👌
Excellent challenge ! Pour le resize de la box, c’est pas joli de mettre une hauteur max fix surtout si on sait pas si le texte évoluera, à ce moment l’astuce c’est d’utiliser grid-template-rows qui passe de 0 à 1fr et hop c’est magique !
ca faisait longtemps que je n'avais pas regardé une de tes vidéos, mais le saint algorithme TH-cam m'a guidé. Super vidéo, c'est vraiment sympa de voir qqn faire des challenges de dev créatif comme ca, puis la forme de tes challenges est vraiment super cool, avec tantot de la voix-off, tantot un debrief sur le "present" de la video. Merci pour ce bon moment :)
Ah cool que t'aies kiffé cette segmentation ! C'est nouveau que je fasse des breaks toutes les 20 minutes ! Et j'ai bien aimé faire ça. Je trouve que ça structure mieux la vidéo !
j'adore ce type de vidéo. un challenge évoquant parfaitement le quotidien d'un développeur d'interface … on perd un temps monstre sur des pétouilles. Ceci étant méner l'enquete sur un bug … c'est ce qui est le passionnant avec les différentes optimisations
Bonjour Benjamin, tes stories me donnent le sourire et me rassurent sur mon approche du code. Passer du temps sur des détails qui peuvent me bloquer et le lendemain matin, la solution...
À force de voir ce genre de challenge, j'ai tellement envie d'en faire de mon côté. Bon pas du code (je me suis arrêté au HTML CSS), mais plutôt sur Figma, d'autant plus que la logique est très proche
Pour la progress bar verte, tu peux faire 2 éléments css, et la barre verte avec une transition sur la width, avec une durée qui correspond à la durée de la vidéo attachée
Salut ! Sympa la vidéo et je peux peut-être y apporter un peu de génie ^^ Pour les tailles de tes box à gauche, tu aurais du mettre le container en display: flex; et ensuite mettre les box en flex: 1 1auto; ça a pour effet de mettre tout à la même taille. Tu n'as plus qu'à jouer avec un v-if plutôt qu'une opacity sur tes élements à cacher. Pour un animation à l'apparition, @keyframes fait le taf sans prendre de perfs. Pour tes progress bar, j'aurais tenté de convertir ta duré en px. ton 100% de with correspond à x px. Plus qu'a faire la même chose pour le currentTime et le tour est joué. Pour tes vidéos en responsive: utilise les v-if ! De plus, tu auras moins de problème à gérer ton timer puisqu'il sera unique. Voilà ^^ Continue comme ça, hâte de voir comment Meetsponsors évolue
Super challenge ! Si tu veux profiter pleinement de Nuxt (technique de fainéant) mais tu n'es pas obligé d'importer tes composants, l'auto import le fait à ta place ! Tu peux même faire des sous-dossiers dans le dossier composants du style : un dossier app avec dedans un composant qui s'appelle header et quand tu vas écrire ça va te l'importer directement.Tu le sais probablement déjà mais en tout cas ça pourra servir à des gens
Hello ! Encore une vidéo sympathique ❤ J'ai bien aimé ce challenge ! En tant que dev qui utilise Nuxt, je me suis demander pourquoi tu utilisait pas les sous dossiers dans les components ? Ca te permettrai de structurer, normalement Nuxt gère seul les imports et ajoute au nom du component le préfix des dossiers, je trouve ça personnellement vachement pratique, vous en pensez quoi ? Autre question qui me passe par la tête, pourquoi pas utiliser le composant natif de Vue pour les transitions ? En tout cas, j'ai apprécier, top 👍
Je pense qu une bonne idee aussi sera de passer au step suivant apres la fin du step precedent cela rendra l experience encore plus fun merci bcp pour la video BG
C'est exactement pour ce type de vidéo que l'on m'a présenté ta chaîne. Donc j'adore, même si c'est pas trop mon domaine je suis plus backend, mais je m'intéresse un peu à tout. En tout cas ça me donne envie de coder haha.
Salut Benjamin, super vidéo, merci ! J'ai une suggestion : pourquoi ne pas implémenter un système d'onglets dans la version mobile avec des boutons en flex row et des divs en grow ? La barre de progression prendrait 100 % de la largeur de l'écran et le texte s'afficherait sous les onglets. Tu mettrais la vidéo en haut et la logique d'apparition et de disparition serait une carte qui se ferme vers le haut et s'ouvre vers le bas.
A 19:02 tu dis ne pas pouvoir inspecter confortablement le code car ca change avec l'animation. Tu peux aller dans l'onglet Sources de l'inspecteur et mettre en pause la page (F8), c'est vachement utile
Pour réduire la video, tu peux utiliser le composant MazExpandAnimation de mon DS "maz-ui". Et pour ta progress bar: Tu mets une animate function ease-linear, pour la duration 200ms par exemple, et donc il faut que tu updates la valeur de ta progress bar toutes les 200ms, sinon c'est ce qui rend le truc saccadé.
11:55 - Pour ton histoire de clavier, essai la disposition QWERTY LaFayette ! L'idée derrière tout ça : disposition QWERTY pour les francophones développeur (accents, accolades, crochets, ...) ! Je ne peux plus faire sans ! Dispo ANSI ou ISO sans soucis.
Hello Benjamin, très intéressante comme vidéo. Cependant, j'ai une petite question. Pourquoi ne pas avoir utilisé le système de transition intégré a Vue au lieu d'utiliser tailwind directement ? Tout en sachant que tu peux utiliser le système de transition intégré a Vue avec tailwind également. Je pense que tu aurais pu gagner entre 15 a 30 minutes, ce qui t'aurais permis de te focus sur la problématique de la progress bar. A l'occasion, je tenterais le challenge de mon côté ! Bien à toi.
En alternative à ton workaround du `max-height` (qui impose de définir une valeur max arbitraire) pour réaliser l'anim des accordéons, tu peux te pencher sur Framer Motion : comme animer des `display: block/none;` est relativement chiant, ils ont résolu le problème avec une lib de composants proche de GSAP, mais en plus light. Aussi, il me semble que passer par les propriétés `0/1fr` de CSS Grid est une alternative plus moderne, native et sans JavaScript
J’aimerais bien explorer d’autres domaines de l’informatique, l’ennui c’est que j’ai investi beaucoup dans l’environnement visual studio et c’est difficile de faire autre chose que du C# lorsqu’on a passé plus de 15 ans à l’utiliser. Ce n’est pas moi, les employeurs ne veulent pas me voir ailleurs. Le pire, c’est que dans mes projets personnels, j’utilise autre chose. Je me retrouve à étudier l’IA, les maths avec le parfait fit pour un analyste de données avec actuariats, informatique et génie logiciel. Je voudrais un travail sur la construction ou comme infirmière ou technicien médical parce que je trouve difficile de décrocher un emploi en informatique et c’est un vrai labyrinthe sur le terrain. Puis, j’ai fait de la mécanique pendant des années cela à rien donné. Dans mes classes de maths, j’étais celui qui se plantait sur le problème facile, dernier à finir ses examens et celui qui trouvait la réponse que personne trouvait. J’avais l’intuition pour trouver le meilleur chemin. En informatique, j’ai détesté mes collègues et moins ils sont formés pire ils sont. Présentement, je m’entraîne, fait du dessin anatomique et prépare un vlog en anglais. Est-ce que quelqu’un est passé par là. et connaît le chemin?
Aie aie aie Benjamin ! Comment tu as pu passé à coté d'un simple effet accordéon ! Pour fluidifier la barre de progression, personnellement ce que j'aurais fait, c'est plutôt définir une durée d'animation (CSS) égal à la durée de la vidéo, et étirer le width de la barre verte de cette manière. Ainsi toute la progression serait gérée en CSS, il n'y aurait pas de requête frame par frame sur le timer de la vidéo : car au final elle est autoplay et de ce que je vois, l'utilisateur ne peux pas la faire revenir en arrière ou la mettre sur pause (si ?). Enfin les 5 vidéos je sais pas si ça a un gros coût en terme de perf' et si la resource est download en opacity 0, mais je me demande si via Vue tu ne pouvais pas directement écouter l'évènement (resize) et checker la largeur par défaut de la page, pour ajouter/effacer des éléments video dans le DOM en fonction de ça. Très bonne vidéo en tout cas c'était sympa' !
Salut Benjamin il y a moyen de faire ce que tu voulais sans position absolut mais avec des grid. Je viens d'apprendre un nouveau nom pour mon métier merci. Moi je dis intégrateur front-end.
Retire la transition et le easing pour la barre de progression : le temps s'écoule linéairement, pas avec des amortissements. Ne fais pas non plus de troncage de la progression : la moindre milliseconde est importante pour une progression linéaire. Parce que le temps est comme en mathématique une fonction affine qui est continue et dérivable. Si tu fais un troncage de la progression, c'est comme si ta progression est équivalente à la fonction "partie entière" qui est représentée par une courbe en escalier et donc que tu fais des "sauts temporels". C'est pour cela que ta barre de progression a un effet saccadé.
Super intéressant ! par contre en prod y'a pas le passage automatique d'une step à l'autre, c'est normal ? D'un autre coté pour les personnes qui lisent doucement ce doit être plus agréable. Autre remarque, en terme d'accessibilité, certaines personnes (TDAH par exemple) n'aime pas les animations (cf RGAA 4.10), donc sois la possibilité de faire un stop sur la vidéo, sois de jouer avec la media query prefers-reduced-motion
Super challenge ! Bravo tu as géré 👌🏼 Juste je me posais la question : c’est toujours pas implémenté correctement sur mobile ? Car je viens de vérifier il n’y a pas l’auto-Play ni l’auto-skip des Steps
J’ai pas réussi à faire l’auto play sur iOS. Il me fallait forcément un humain qui click sur play de lui même une fois. Je sais pas pourquoi. Timizer a le même bug. Du coup je fix en laissant l’user lancer la première vidéo en cliquant sur play. Les suivantes se lanceront avec le clic sur la step. Et j’ai désactivé le auto next. C’était pas une bonne ux j’ai trouvé au final. Je préfère que l’user choisisse quand il passe à la step suivante
@@BenjaminCode oui c'est normal sur IOS malheureusement, mais en réalité c'est plutôt logique sur mobile tu veux éviter d'utiliser trop de data et du coup tu veux pouvoir choisir les vidéos que tu lances
avec framer motion j'arrive à faire un accordeon qui se déploie avec un bon easing. Mais sinon flex column avec transition sur le max-height mais çà risque de sauter, sinon en js tu calcul la taille originale du tiroir et transition sur le height
Je suis un peu surpris vu ton niveau par le manque de maitrise des effets CSS3. Je ne suis pas frontend, donc je ne veux pas faire genre j'ai la solution ultime et comme tu dis, le stress, le temps toussa toussa. Mais pk ne pas simplement mettre la max-height des blocks a 0 et mettre une animation CSS3 pour qu'ils grandissent? Je pense qu'il y aura un peu d'ajustements a faire sur les DOM children pour que ca ne jump pas n'importe comment. Bel exercice en tout cas, quand on voit ce que tu fais en 1h, on imagine ce que tu peux delivrer en 1 mois.
Pour la synchro de la video, tu pouvais juste mettre une animation css qui prend en duration la durée de la video et c'est tout (sauf si tu veux qu'on puisse naviguer dans la video pour aller a la fin ou au debut) 😀
Et si tu mets en pause ? Ce qui se passe quand je survole une step qui joue, je bloque la lecture pour que l’utilisateur puisse se focus sur le texte qu’il lit
@@BenjaminCode j'avais pas fait attention a ce comportement mais tu peux utiliser la propriété css animation-play-state: paused; ou animation-play-state: running;
Pour l'animation de la progressbar, tu aurais pu simplement faire une animation qui dure le temps total de la video (peut devenir problematique si la video peut etre mis en pause etc).
Je vais peut être dire une bêtise mais vu que t’as un clavier custom: ne peux tu pas intervertir les keycaps en mode azerty (en fonctionnant par cœur ou en rachetant les combinaisons qui ne marchent plus) et configurer le layout dans ta bécane en azerty ? 🤔
C'est hyper marrant le bidule IA de hostinger (bon d'accord c'est surtout marrant parceque j'ai fait celui de Odoo et que je vois qu'ils ont les mêmes soucis que moi) Mais je trouve quand même que leur output est pas hyper adaptée à des sites, c'est trop en dehors du contexte de ce qui aurait du ce trouver là, chez Odoo j'ai utilisé les placeholders genre "AN INTERESTING TITLE" pour lui donner du contexte sur la taille et l'objectif de chaque champ, je sais pas trop comment ils ont fait mais ça a pas l'air d'être ça
j'ai eu le meme probleme de la barre de progression en voulant coder un lecteur de music tout en svg la semaine derniere 😭 ca rassure d'etre moins seul
Sur la version finale j’ai désactivé le auto next pour faire tourner en boucle la vidéo. Je laisse à l’utilisateur le soin de passer la step 2 sinon c’était trop frustrant et énervant à l’usage. Chaque fois je me retrouvais à revenir en arrière pour pouvoir lire le contenu. Pas une bonne idée en fait le auto next
Et sur mobile, y a un behavior un peu chelou l'apparition de la vidéo se fait en 2 temps on dirait. je pense qu'il serait aussi intéressant de mettre un scroll-auto quand tu cliques sur mobile pour que la step soit en haut de ta page, histoire d'avoir vraiment un focus visuel dessus.
Concernant ton problème de autoplay de vidéo, je te conseillerais à la rigueur d'utiliser des GIF et de calculer la durée du GIF en fonction du nombre de frame qu'il y a 60FPS (frame/second)
alors pas utilisé GPT mais on voit la proposition de COPILOT à 5mins 25 s Mais ça ne change rien à la vidéo qui est super beau travail et merci pour cette vidéo ;)
Ouais j'ai pas dit que je désactivais Copilot ! Pour moi c'est deux trucs différents, copilot il complète ce que t'es en train d'écrire mais il t'expliquera pas si t'as un bug et il t'écrira pas touuuuut. Je peux plus coder sans. Non pas que je ne sais pas, mais comme je l'explique, je galère tellement avec mon clavier qwerty que je suis bien content que ça m'autocomplete les trucs plutot que de me les laisser écrire ahah
@@BenjaminCode sur VSC, PHPstorm je ne sais pas sur les autres IDE mais je pense que tu le sais déjà il y a une interface de dialogue avec copilot qui peux être pratique et yes je comprend le fait de partir du postulat que GPT et Copilot sont différent même si je suis plutôt pour dire que dans le fond c'est la même chose surtout que si je ne me trompe pas derrière Copilot c'est un model de GPT qu'il y à nan arrêter moi si je me trompe. En tout cas super intéressant à chaque fois tes vidéos me donne envie de faire du front alors que je préfère le Back mdr.
@@BenjaminCode soit if (currentStep.value >= steps.length) currentStep.value = 0, soit avec le if à l'endroit pour identifier l'exception dans le else. Soit liste chaînée. Ça me paraît plus explicite et élégant mais ce n'est que mon avis. Heureusement que les Number sont en 64 bits 🤪.
@charlesattend6340 bah le modulo c’est un truc et astuce vieux comme le monde et le number est finalement toujours compris entre 0 et 4 donc on s’en fiche de la base 64 ou que sais-je. A moins que je n’ai pas bien compris le problème !
Ben j'estime tout le bazar à deux jours, j'aime laisser le code lever. Et je n'utilise aucun FW j'écris des méga index.html le deuxième jour, après avoir dormir, j'ai fixé les briques nécessaire alors j'éclate tout proprement en fichiers js , CSS , etc dans une arborescence de PWA. 1h30 jamais de la vie. Voyons voir ça
Yo benjamin j'ai survoler les commentaire mais je n'ai pas vu de personne qui en parle donc je me permet, je suis aller sur meet sponsor pour regarder l'animation fini et j'ai remarquer que lorsque la vidéo se termine elle recommence au lieu de changer de bloc. Je ne sais pas si tu l'à fait exprès ou es un porblème qui viens de moi mais je me permet de te le faire remonter. Voila Bonne soirée.
![[ENGSUB] UNPRODUCTIVE DAY ใช้ชีวิต (เปื่อยๆ) ด้วยกัน 1 วัน! | OUROAD CLOSEFRiEND SS2 EP.9](http://i.ytimg.com/vi/pyYKZ3kra9w/mqdefault.jpg)
Sur la version finale en prod, j'ai désactivé le auto next step car c'était pas du tout agréable comme UX au final. Et la version mobile m'a demandé beaucoup d'ajustements à cause de contrainre d'iOS qui ne permet pas de lancer une vidéo automatiquement sur mobile (il faut une première interaction avec l'utilisateur).
Utilisez mon code BENJAMINCODE pour avoir -10% sur toutes les offres d'hébergement d'Hostinger et testez l'offre Business pour créer votre propre vitrine en ligne avec l'aide de leur IA :
www.hostg.xyz/SHEfv
Est-ce que tu utilise chatgpt payant quand tu veux générer du code ? C'est quoi les différences avec les chatgpt gratuit ?
Salut Benjamin, pour le responsive je pense que tu n’as pas besoin d’utiliser deux vidéos. Tu peux faire en sorte que les vidéos et les div step soient dans la même div une par une et comme ça tu les mets en display flex et tu les passes en flex-direction column sur mobile
Oui très bien vu ! Ça m’arrangeait pas à l’époque avec la transition que j’avais prévu entre les vidéos mais vu que je n’utilise même plus de transition dans la version finale ça aurait été top et réduit beaucoup de complexité de faire comme tu le proposes !
Aucun problème ! Sinon j’ai eu une autre idée concernant la vidéo que t’as sortie il y a à peu près deux semaines, normalement je l’ai aussi mise sur la vidéo en question mais pour t’éviter de regarder encore une fois les commentaires, je te la remets ici : en ce qui concerne l'API de TH-cam, je ne sais pas exactement si tu peux le faire avec leur API, et, de plus, c'est une solution qui à court terme (environ une semaine je pense, même si je manque d'informations sur l'API) est vraiment nulle mais qui pourrait être vraiment intéressante à long terme, et pourrait te faire économiser énormément de jetons API :
En gros, tu check pour chaque youtubeur la date de sortie des 5-6 dernières vidéos, tu peux ainsi établir une moyenne de la récurrence de sortie des vidéos du youtubeur concerné que tu stockes dans ta bdd, ainsi, plutôt que de vérifier pour chaque youtubeur tous les jours si une nouvelle vidéo est sortie, tu vérifies à l'aide de la récurrence que tu as stockée. Exemple :
-Imaginons que Squeezie ait sorti ses 6 dernières vidéos avec une fréquence moyenne de 1 semaine sur celles-ci, alors, plutôt que de vérifier s'il en a sorti une le lendemain après avoir sorti sa 7ème, tu vas attendre 6 jours (je pense qu'une marge d'erreurs de 15-20 % serait judicieuse en prenant en compte le fait que la récurrence des vidéos peut varier), de ce fait tu économises un jeton API pour un youtubeur pendant 6 jours, et en appliquant cette technique pour chaque youtubeur, tu économises une quantité énorme de jetons ! Et, dès que t'as la nouvelle vidéo, tu stockes sa date de sortie directement, dans ta bdd pour réévaluer la fréquence de sortie des vidéos du youtubeurs concernés et ainsi de suite.
Je me ferais jamais à Vue je crois 🥲 Mais effet très cool 🙌
Petite remarque sur l'accessibilité (et sémantique): Au lieu de stack des divs tu peux utiliser une structure "ol>li" pour aider les screen readers à identifier la structure.
Également un petit aria-current="step" (ou aria-expanded mais on perd la notion de steps) permet d'identifier celle qui est ouverte actuellement.
Et enfin une petite nav clavier avec des focus facilement visibles et des sous-titres et on est au top 👌
J’aime le fait que le challenge te soit utile pour ton SaaS, il y a un coté « inside » qui est top!
Excellent challenge !
Pour le resize de la box, c’est pas joli de mettre une hauteur max fix surtout si on sait pas si le texte évoluera, à ce moment l’astuce c’est d’utiliser grid-template-rows qui passe de 0 à 1fr et hop c’est magique !
Je valide j'ai eu le même soucis récemment
ca faisait longtemps que je n'avais pas regardé une de tes vidéos, mais le saint algorithme TH-cam m'a guidé.
Super vidéo, c'est vraiment sympa de voir qqn faire des challenges de dev créatif comme ca, puis la forme de tes challenges est vraiment super cool, avec tantot de la voix-off, tantot un debrief sur le "present" de la video.
Merci pour ce bon moment :)
Ah cool que t'aies kiffé cette segmentation ! C'est nouveau que je fasse des breaks toutes les 20 minutes ! Et j'ai bien aimé faire ça. Je trouve que ça structure mieux la vidéo !
j'adore ce type de vidéo. un challenge évoquant parfaitement le quotidien d'un développeur d'interface … on perd un temps monstre sur des pétouilles. Ceci étant méner l'enquete sur un bug … c'est ce qui est le passionnant avec les différentes optimisations
Bonjour Benjamin, tes stories me donnent le sourire et me rassurent sur mon approche du code.
Passer du temps sur des détails qui peuvent me bloquer et le lendemain matin, la solution...
J’adore ces challenges, merci de nous les faire partager
J’adore ce genre de vidéo, c’est sympa de pouvoir essayer en même temps que toi de réfléchir à comment implémenter un composant comme celui ci
Ça m'avait manqué tes challenges ! Top la vidéo !
J'ai trop kiffé et pourtant que je comprends 30% et c'est ça qui est beau
Toujours un plaisir de voir popper ta notif 🥰
À force de voir ce genre de challenge, j'ai tellement envie d'en faire de mon côté. Bon pas du code (je me suis arrêté au HTML CSS), mais plutôt sur Figma, d'autant plus que la logique est très proche
Benjamin,
J’adore quand tu fais des challenges ! J’adore te voir galéré. Saches que ça me motive moi à coder 🧑💻
Bien sûr que c'est le kiff de voir un peu de challenge front!
Pour la progress bar verte, tu peux faire 2 éléments css, et la barre verte avec une transition sur la width, avec une durée qui correspond à la durée de la vidéo attachée
Salut ! Sympa la vidéo et je peux peut-être y apporter un peu de génie ^^
Pour les tailles de tes box à gauche, tu aurais du mettre le container en display: flex; et ensuite mettre les box en flex: 1 1auto; ça a pour effet de mettre tout à la même taille. Tu n'as plus qu'à jouer avec un v-if plutôt qu'une opacity sur tes élements à cacher. Pour un animation à l'apparition, @keyframes fait le taf sans prendre de perfs.
Pour tes progress bar, j'aurais tenté de convertir ta duré en px.
ton 100% de with correspond à x px. Plus qu'a faire la même chose pour le currentTime et le tour est joué.
Pour tes vidéos en responsive: utilise les v-if ! De plus, tu auras moins de problème à gérer ton timer puisqu'il sera unique.
Voilà ^^
Continue comme ça, hâte de voir comment Meetsponsors évolue
Super challenge ! Si tu veux profiter pleinement de Nuxt (technique de fainéant) mais tu n'es pas obligé d'importer tes composants, l'auto import le fait à ta place ! Tu peux même faire des sous-dossiers dans le dossier composants du style : un dossier app avec dedans un composant qui s'appelle header et quand tu vas écrire ça va te l'importer directement.Tu le sais probablement déjà mais en tout cas ça pourra servir à des gens
Ah d'ailleurs, autant pour moi mais c'est probablement ton IDE qui te montre quand même les imports non ?
Bien joué de pondre ça en 1h30 déjà !! Et la musique de la nuit qui passe ds FF7 fut très nostalgique 😁
Hello ! Encore une vidéo sympathique ❤ J'ai bien aimé ce challenge ! En tant que dev qui utilise Nuxt, je me suis demander pourquoi tu utilisait pas les sous dossiers dans les components ? Ca te permettrai de structurer, normalement Nuxt gère seul les imports et ajoute au nom du component le préfix des dossiers, je trouve ça personnellement vachement pratique, vous en pensez quoi ? Autre question qui me passe par la tête, pourquoi pas utiliser le composant natif de Vue pour les transitions ? En tout cas, j'ai apprécier, top 👍
1/4 de la vidéo c'est de la pub quand même, ca fait un ratio encore pire que TF1, chapeau.
Je pense qu une bonne idee aussi sera de passer au step suivant apres la fin du step precedent cela rendra l experience encore plus fun
merci bcp pour la video BG
C'est exactement pour ce type de vidéo que l'on m'a présenté ta chaîne. Donc j'adore, même si c'est pas trop mon domaine je suis plus backend, mais je m'intéresse un peu à tout. En tout cas ça me donne envie de coder haha.
Content de voir un peu de Vue dans le youtube game francais ... ca changera un peu du monopole de la commu React
Salut Benjamin, super vidéo, merci ! J'ai une suggestion : pourquoi ne pas implémenter un système d'onglets dans la version mobile avec des boutons en flex row et des divs en grow ? La barre de progression prendrait 100 % de la largeur de l'écran et le texte s'afficherait sous les onglets. Tu mettrais la vidéo en haut et la logique d'apparition et de disparition serait une carte qui se ferme vers le haut et s'ouvre vers le bas.
A 19:02 tu dis ne pas pouvoir inspecter confortablement le code car ca change avec l'animation. Tu peux aller dans l'onglet Sources de l'inspecteur et mettre en pause la page (F8), c'est vachement utile
Pour réduire la video, tu peux utiliser le composant MazExpandAnimation de mon DS "maz-ui".
Et pour ta progress bar: Tu mets une animate function ease-linear, pour la duration 200ms par exemple, et donc il faut que tu updates la valeur de ta progress bar toutes les 200ms, sinon c'est ce qui rend le truc saccadé.
0:31 « Codé par un compère français aussi moustachu que moi, je ne pouvais qu'en apprécier le travail ». Il est marrant ce Benjamin
11:55 - Pour ton histoire de clavier, essai la disposition QWERTY LaFayette ! L'idée derrière tout ça : disposition QWERTY pour les francophones développeur (accents, accolades, crochets, ...) ! Je ne peux plus faire sans ! Dispo ANSI ou ISO sans soucis.
Si les accents sont un souci, utilisez le clavier états-unis international et le reste c'est des combinaisons de touches
@@dariusagbo4765 des combinaisons de touches ? Du genre ?
@@NsHtxZekoo par exemple, l'apostrophe ajoute un accent aigu sur les voyelles et une cédille au C. En d'autres termes, elle devient une touche morte
th-cam.com/video/Cg0YtwqyViI/w-d-xo.htmlsi=HqQJvjbK6vSPIdOf
Salut, très bonne vidéo. J'aimerai savoir dans ton ancien job réalisé quelque chose dans ce style la, ça t'aurais demandé combien de temps environ?
Hello Benjamin, très intéressante comme vidéo. Cependant, j'ai une petite question. Pourquoi ne pas avoir utilisé le système de transition intégré a Vue au lieu d'utiliser tailwind directement ? Tout en sachant que tu peux utiliser le système de transition intégré a Vue avec tailwind également. Je pense que tu aurais pu gagner entre 15 a 30 minutes, ce qui t'aurais permis de te focus sur la problématique de la progress bar. A l'occasion, je tenterais le challenge de mon côté ! Bien à toi.
C'est quel plug in qui met en couleur highlight les ?
Lorsque je vais sur meetsponsors, l'étape boucle. Je pensais que ça allait passer à la vidéo suivante :)
En alternative à ton workaround du `max-height` (qui impose de définir une valeur max arbitraire) pour réaliser l'anim des accordéons, tu peux te pencher sur Framer Motion : comme animer des `display: block/none;` est relativement chiant, ils ont résolu le problème avec une lib de composants proche de GSAP, mais en plus light. Aussi, il me semble que passer par les propriétés `0/1fr` de CSS Grid est une alternative plus moderne, native et sans JavaScript
Super challenge ! Cela donne envie d’essayer :)
J’aimerais bien explorer d’autres domaines de l’informatique, l’ennui c’est que j’ai investi beaucoup dans l’environnement visual studio et c’est difficile de faire autre chose que du C# lorsqu’on a passé plus de 15 ans à l’utiliser. Ce n’est pas moi, les employeurs ne veulent pas me voir ailleurs. Le pire, c’est que dans mes projets personnels, j’utilise autre chose. Je me retrouve à étudier l’IA, les maths avec le parfait fit pour un analyste de données avec actuariats, informatique et génie logiciel. Je voudrais un travail sur la construction ou comme infirmière ou technicien médical parce que je trouve difficile de décrocher un emploi en informatique et c’est un vrai labyrinthe sur le terrain. Puis, j’ai fait de la mécanique pendant des années cela à rien donné. Dans mes classes de maths, j’étais celui qui se plantait sur le problème facile, dernier à finir ses examens et celui qui trouvait la réponse que personne trouvait. J’avais l’intuition pour trouver le meilleur chemin. En informatique, j’ai détesté mes collègues et moins ils sont formés pire ils sont. Présentement, je m’entraîne, fait du dessin anatomique et prépare un vlog en anglais. Est-ce que quelqu’un est passé par là. et connaît le chemin?
Oui encore des challenges !
toujours aussi cool tes videos
Aie aie aie Benjamin ! Comment tu as pu passé à coté d'un simple effet accordéon !
Pour fluidifier la barre de progression, personnellement ce que j'aurais fait, c'est plutôt définir une durée d'animation (CSS) égal à la durée de la vidéo, et étirer le width de la barre verte de cette manière. Ainsi toute la progression serait gérée en CSS, il n'y aurait pas de requête frame par frame sur le timer de la vidéo : car au final elle est autoplay et de ce que je vois, l'utilisateur ne peux pas la faire revenir en arrière ou la mettre sur pause (si ?).
Enfin les 5 vidéos je sais pas si ça a un gros coût en terme de perf' et si la resource est download en opacity 0, mais je me demande si via Vue tu ne pouvais pas directement écouter l'évènement (resize) et checker la largeur par défaut de la page, pour ajouter/effacer des éléments video dans le DOM en fonction de ça.
Très bonne vidéo en tout cas c'était sympa' !
Salut Benjamin il y a moyen de faire ce que tu voulais sans position absolut mais avec des grid.
Je viens d'apprendre un nouveau nom pour mon métier merci.
Moi je dis intégrateur front-end.
Retire la transition et le easing pour la barre de progression : le temps s'écoule linéairement, pas avec des amortissements. Ne fais pas non plus de troncage de la progression : la moindre milliseconde est importante pour une progression linéaire. Parce que le temps est comme en mathématique une fonction affine qui est continue et dérivable. Si tu fais un troncage de la progression, c'est comme si ta progression est équivalente à la fonction "partie entière" qui est représentée par une courbe en escalier et donc que tu fais des "sauts temporels". C'est pour cela que ta barre de progression a un effet saccadé.
C'est exactement ce que je voulais lui dire pendant que je regardais la vidéo, son fix avec avec les transitions et le easing m'a rendu fou x)
Super intéressant ! par contre en prod y'a pas le passage automatique d'une step à l'autre, c'est normal ? D'un autre coté pour les personnes qui lisent doucement ce doit être plus agréable.
Autre remarque, en terme d'accessibilité, certaines personnes (TDAH par exemple) n'aime pas les animations (cf RGAA 4.10), donc sois la possibilité de faire un stop sur la vidéo, sois de jouer avec la media query prefers-reduced-motion
Pour ton histoire de clavier, je te conseille le layout qwerty canadien, qui ajoute les accents ;)
bonjour, j'ai pas compris benjamin suduku c'est un plugin ? merci
Super challenge ! Bravo tu as géré 👌🏼 Juste je me posais la question : c’est toujours pas implémenté correctement sur mobile ? Car je viens de vérifier il n’y a pas l’auto-Play ni l’auto-skip des Steps
J’ai pas réussi à faire l’auto play sur iOS. Il me fallait forcément un humain qui click sur play de lui même une fois. Je sais pas pourquoi. Timizer a le même bug. Du coup je fix en laissant l’user lancer la première vidéo en cliquant sur play. Les suivantes se lanceront avec le clic sur la step. Et j’ai désactivé le auto next. C’était pas une bonne ux j’ai trouvé au final. Je préfère que l’user choisisse quand il passe à la step suivante
@@BenjaminCode oui c'est normal sur IOS malheureusement, mais en réalité c'est plutôt logique sur mobile tu veux éviter d'utiliser trop de data et du coup tu veux pouvoir choisir les vidéos que tu lances
Pour ton clavier, perso j'utilise le qwerty lafayette qui est un layout pour clavier US orienté dev francophone
salut ya encore le laboratory sur meetsponsors
avec framer motion j'arrive à faire un accordeon qui se déploie avec un bon easing. Mais sinon flex column avec transition sur le max-height mais çà risque de sauter, sinon en js tu calcul la taille originale du tiroir et transition sur le height
Bravo Benjamin Code tu es très fort et très beau
Merci Henrix, je te retourne les compliements au nombre de deux.
@@BenjaminCode Une douce poésie qui charme mille peuples
Top le challenge !
Je suis un peu surpris vu ton niveau par le manque de maitrise des effets CSS3. Je ne suis pas frontend, donc je ne veux pas faire genre j'ai la solution ultime et comme tu dis, le stress, le temps toussa toussa. Mais pk ne pas simplement mettre la max-height des blocks a 0 et mettre une animation CSS3 pour qu'ils grandissent? Je pense qu'il y aura un peu d'ajustements a faire sur les DOM children pour que ca ne jump pas n'importe comment.
Bel exercice en tout cas, quand on voit ce que tu fais en 1h, on imagine ce que tu peux delivrer en 1 mois.
Oui c’est chouette ce format, et il y a des perles dans les commentaires.
Bonjour, super vidéo.
On peut animer le display none maintenant avec transition-behavior
Pour la synchro de la video, tu pouvais juste mettre une animation css qui prend en duration la durée de la video et c'est tout (sauf si tu veux qu'on puisse naviguer dans la video pour aller a la fin ou au debut) 😀
Et si tu mets en pause ? Ce qui se passe quand je survole une step qui joue, je bloque la lecture pour que l’utilisateur puisse se focus sur le texte qu’il lit
Avec une variable css que tu contrôles dans le js ?
@@BenjaminCode j'avais pas fait attention a ce comportement mais tu peux utiliser la propriété css animation-play-state: paused; ou animation-play-state: running;
@@thomasvillard7927 ouais
Pour le clavier prend un format ISO comment ça tu pourras mettre du azerty 🤔
Tu es un bon développement il faudrait que tu agence certaine bout de code pour mieux exceller
Pour l'animation de la progressbar, tu aurais pu simplement faire une animation qui dure le temps total de la video (peut devenir problematique si la video peut etre mis en pause etc).
C’est pour cette raison que je l’ai pas fait. Je voulais qu’au survol de la step la vidéo se pause. Donc c’était pas viable ! Mais j’y ai pensé
salut question bete , pour vue et pas react ? sinon nice video.
Je vais peut être dire une bêtise mais vu que t’as un clavier custom: ne peux tu pas intervertir les keycaps en mode azerty (en fonctionnant par cœur ou en rachetant les combinaisons qui ne marchent plus) et configurer le layout dans ta bécane en azerty ? 🤔
C'est hyper marrant le bidule IA de hostinger (bon d'accord c'est surtout marrant parceque j'ai fait celui de Odoo et que je vois qu'ils ont les mêmes soucis que moi)
Mais je trouve quand même que leur output est pas hyper adaptée à des sites, c'est trop en dehors du contexte de ce qui aurait du ce trouver là, chez Odoo j'ai utilisé les placeholders genre "AN INTERESTING TITLE" pour lui donner du contexte sur la taille et l'objectif de chaque champ, je sais pas trop comment ils ont fait mais ça a pas l'air d'être ça
cool 👍🏻
J'ai pas vu le live, mais au depart tu te basais sur le temps en seconde de la video non ?
Deux ans? J’y arrive moi et ça ne fait que quelques mois que j’utilise du qwerty
Avec Cursor ou Bolt, prototype fonctionnel en 1h je pense
j'ai eu le meme probleme de la barre de progression en voulant coder un lecteur de music tout en svg la semaine derniere 😭 ca rassure d'etre moins seul
Salut ! super video mais je viens de tester sur ton site et j'ai une boucle infinie sur la step 1
Sur la version finale j’ai désactivé le auto next pour faire tourner en boucle la vidéo. Je laisse à l’utilisateur le soin de passer la step 2 sinon c’était trop frustrant et énervant à l’usage. Chaque fois je me retrouvais à revenir en arrière pour pouvoir lire le contenu. Pas une bonne idée en fait le auto next
Bien joué, mais y a un petit bug en prod chef :D
ça ne va pas à la vidéo suivante automatiquement :(
Et sur mobile, y a un behavior un peu chelou l'apparition de la vidéo se fait en 2 temps on dirait.
je pense qu'il serait aussi intéressant de mettre un scroll-auto quand tu cliques sur mobile pour que la step soit en haut de ta page, histoire d'avoir vraiment un focus visuel dessus.
Concernant ton problème de autoplay de vidéo, je te conseillerais à la rigueur d'utiliser des GIF et de calculer la durée du GIF en fonction du nombre de frame qu'il y a 60FPS (frame/second)
alors pas utilisé GPT mais on voit la proposition de COPILOT à 5mins 25 s Mais ça ne change rien à la vidéo qui est super beau travail et merci pour cette vidéo ;)
Ouais j'ai pas dit que je désactivais Copilot ! Pour moi c'est deux trucs différents, copilot il complète ce que t'es en train d'écrire mais il t'expliquera pas si t'as un bug et il t'écrira pas touuuuut. Je peux plus coder sans. Non pas que je ne sais pas, mais comme je l'explique, je galère tellement avec mon clavier qwerty que je suis bien content que ça m'autocomplete les trucs plutot que de me les laisser écrire ahah
@@BenjaminCode sur VSC, PHPstorm je ne sais pas sur les autres IDE mais je pense que tu le sais déjà il y a une interface de dialogue avec copilot qui peux être pratique et yes je comprend le fait de partir du postulat que GPT et Copilot sont différent même si je suis plutôt pour dire que dans le fond c'est la même chose surtout que si je ne me trompe pas derrière Copilot c'est un model de GPT qu'il y à nan arrêter moi si je me trompe. En tout cas super intéressant à chaque fois tes vidéos me donne envie de faire du front alors que je préfère le Back mdr.
Waaah le modulo il fait mal 🫣
Pourquoi ?
@@BenjaminCode soit if (currentStep.value >= steps.length) currentStep.value = 0, soit avec le if à l'endroit pour identifier l'exception dans le else. Soit liste chaînée.
Ça me paraît plus explicite et élégant mais ce n'est que mon avis.
Heureusement que les Number sont en 64 bits 🤪.
@charlesattend6340 bah le modulo c’est un truc et astuce vieux comme le monde et le number est finalement toujours compris entre 0 et 4 donc on s’en fiche de la base 64 ou que sais-je. A moins que je n’ai pas bien compris le problème !
@@BenjaminCode ha oui pardon j'ai répondu de tête mais bref c'était plus pour une question de clarté, bref, désolé 🫠
Super challenge 👍 perso j'estime pouvoir le faire en 2 jours 😢
Le code promo n'est plus
BENJAMINLEPLUSBELHUMAINDUMONDE 😂😂
Dans les timecodes de la vidéo, tu as écrit "coup d'envoie" plutôt que "coup d'envoi"
Hello, quel est ton ide ?
IntelliJ qui est pareil que webstorm ou phpstorm mais avec plus de langages pré installés
pourquoi ton oreille a gonfler ? tu as croiser un lutteur tchétchène ?
Ben j'estime tout le bazar à deux jours, j'aime laisser le code lever. Et je n'utilise aucun FW j'écris des méga index.html le deuxième jour, après avoir dormir, j'ai fixé les briques nécessaire alors j'éclate tout proprement en fichiers js , CSS , etc dans une arborescence de PWA.
1h30 jamais de la vie.
Voyons voir ça
2j c'est ce que tu facture pas le temps réel aha h
@@dffx je n'ai jamais gagné le moindre centime en codant, j'aime juste ça. Je me suis même mis dans le pétrin avec ces conneries.
ranges tes components dans des dossiers stp
Yo benjamin j'ai survoler les commentaire mais je n'ai pas vu de personne qui en parle donc je me permet, je suis aller sur meet sponsor pour regarder l'animation fini et j'ai remarquer que lorsque la vidéo se termine elle recommence au lieu de changer de bloc. Je ne sais pas si tu l'à fait exprès ou es un porblème qui viens de moi mais je me permet de te le faire remonter. Voila Bonne soirée.
Je préfère mourir que coder sur un clavier azerty 🙃
Tout dépend d’avec quoi t’as appris. Si t’as appris et utilisé pendant 15 ans un azerty, y’a aucun soucis !
@@BenjaminCode t’as raison
Attend tu dis ne pas vouloir utiliser chatgpt mais tu utilises git copilot!? Tricheur!!! haha