Challenge : 1h30 pour coder cette section animée ?

  Рет қаралды 29,102

Benjamin Code

Benjamin Code

Күн бұрын

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
Retrouvez le code source et la version longue de cette vidéo sur :
shop.benjamincode.tv
Mon SaaS pour mettre en relation les KZfaqrs et les Sponsors
meetsponsors.com
Devenez affiliés et gagnez 20% sur tous les abonnements
meetsponsors.lemonsqueezy.com...
L'effet de référence sur le chouette SaaS Timizer pour gérer vos temps en tant que Freelance :
timizer.io/
Essayez Nuxt et Nuxt UI:
ui.nuxt.com/pro/pricing?aff=v...
Rejoignez moi sur Twitter :
/ benjamincode
Insta : / benjamincode
Twitch : / benjamincode
Mail : b1jam1code@gmail.com
Partners Manager : Loic Coutal
Miniamaker : / kas0bel
Monteur : / teddycoste1 & Moi
Chapitrage :
00:00 Introduction
00:11 Le Challenge
03:47 Coup d'envoie
06:19 Checkpoint #1
09:44 Checkpoint #2
13:11 Checkpoint #3
17:25 Checkpoint #4
19:11 Verdict Final et corrections
Les musiques que j'utilise sur la chaîne sont soit :
- de moi (dans de nombreux cas : guitar / saxo / nappes de synthés)
- de Obsimo
- de Luxie (Ilovedyou • Luxie - ilovedyoumybaby )
- de Paradise of Yesterday (paradiseofyesterday.bandcamp....) pour tout ce qui est synth pop

Пікірлер: 113
@BenjaminCode
@BenjaminCode Ай бұрын
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
@pololecreateur-el7lr
@pololecreateur-el7lr Ай бұрын
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 ?
@drrooz5671
@drrooz5671 Ай бұрын
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
@BenjaminCode
@BenjaminCode Ай бұрын
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 !
@drrooz5671
@drrooz5671 Ай бұрын
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 KZfaq, 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.
@KittTheDev
@KittTheDev Ай бұрын
J’aime le fait que le challenge te soit utile pour ton SaaS, il y a un coté « inside » qui est top!
@gabswile
@gabswile Ай бұрын
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 👌
@othmanbensaoula489
@othmanbensaoula489 Ай бұрын
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 !
@gabswile
@gabswile Ай бұрын
Je valide j'ai eu le même soucis récemment
@QUIGNONPAIN
@QUIGNONPAIN Ай бұрын
ca faisait longtemps que je n'avais pas regardé une de tes vidéos, mais le saint algorithme KZfaq 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 :)
@BenjaminCode
@BenjaminCode Ай бұрын
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 !
@DUBOINPascal
@DUBOINPascal Ай бұрын
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
@Alex17865
@Alex17865 29 күн бұрын
1/4 de la vidéo c'est de la pub quand même, ca fait un ratio encore pire que TF1, chapeau.
@iannniis9112
@iannniis9112 15 күн бұрын
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
@muliensito
@muliensito Ай бұрын
J’adore ces challenges, merci de nous les faire partager
@atsoushi
@atsoushi Ай бұрын
À 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
@louislecouturier
@louislecouturier Ай бұрын
Ça m'avait manqué tes challenges ! Top la vidéo !
@bengregory23
@bengregory23 Ай бұрын
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
@vincentmarconnet6061
@vincentmarconnet6061 Ай бұрын
Benjamin, J’adore quand tu fais des challenges ! J’adore te voir galéré. Saches que ça me motive moi à coder 🧑‍💻
@GDevWeb
@GDevWeb Ай бұрын
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...
@romainminot6735
@romainminot6735 Ай бұрын
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
@romainminot6735
@romainminot6735 Ай бұрын
Ah d'ailleurs, autant pour moi mais c'est probablement ton IDE qui te montre quand même les imports non ?
@MrBonbatong
@MrBonbatong Ай бұрын
Bien sûr que c'est le kiff de voir un peu de challenge front!
@JUSTINBUISSON
@JUSTINBUISSON Ай бұрын
J'ai trop kiffé et pourtant que je comprends 30% et c'est ça qui est beau
@BenjaminCode
@BenjaminCode Ай бұрын
Toujours un plaisir de voir popper ta notif 🥰
@tacxtv
@tacxtv Ай бұрын
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 👍
@Sql37
@Sql37 Ай бұрын
Bien joué de pondre ça en 1h30 déjà !! Et la musique de la nuit qui passe ds FF7 fut très nostalgique 😁
@SuperJTeam
@SuperJTeam Ай бұрын
Oui encore des challenges !
@Kevin-yb6wt
@Kevin-yb6wt Ай бұрын
Super challenge ! Cela donne envie d’essayer :)
@daxoRWORLD
@daxoRWORLD Ай бұрын
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
@xaviervermeulen8484
@xaviervermeulen8484 Ай бұрын
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.
@angelHighTech
@angelHighTech Ай бұрын
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.
@axelpo9390
@axelpo9390 Ай бұрын
Top le challenge !
@gijoe5508
@gijoe5508 Ай бұрын
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?
@Chimerion86
@Chimerion86 Ай бұрын
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
@skymasseffect
@skymasseffect Ай бұрын
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
@thecodefather-vf9xn
@thecodefather-vf9xn 16 күн бұрын
toujours aussi cool tes videos
@louismazel
@louismazel Ай бұрын
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é.
@NsHtxZekoo
@NsHtxZekoo Ай бұрын
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.
@dariusagbo4765
@dariusagbo4765 Ай бұрын
Si les accents sont un souci, utilisez le clavier états-unis international et le reste c'est des combinaisons de touches
@NsHtxZekoo
@NsHtxZekoo Ай бұрын
@@dariusagbo4765 des combinaisons de touches ? Du genre ?
@dariusagbo4765
@dariusagbo4765 Ай бұрын
@@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
@dariusagbo4765
@dariusagbo4765 Ай бұрын
kzfaq.info/get/bejne/ec1gjNeo1t-6mX0.htmlsi=HqQJvjbK6vSPIdOf
@omarJ-
@omarJ- Ай бұрын
Content de voir un peu de Vue dans le youtube game francais ... ca changera un peu du monopole de la commu React
@florentgironde7279
@florentgironde7279 Ай бұрын
C'est quel plug in qui met en couleur highlight les ?
@ctrl_fj
@ctrl_fj Ай бұрын
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
@maitretofu
@maitretofu Ай бұрын
Lorsque je vais sur meetsponsors, l'étape boucle. Je pensais que ça allait passer à la vidéo suivante :)
@GonyTuts
@GonyTuts Ай бұрын
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.
@user-ef9ls4mm7r
@user-ef9ls4mm7r Ай бұрын
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?
@OP360communication
@OP360communication Ай бұрын
cool 👍🏻
@TokusatsuGagaga
@TokusatsuGagaga Ай бұрын
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é.
@nyerlemon3778
@nyerlemon3778 Ай бұрын
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)
@baylalabamba
@baylalabamba Ай бұрын
bonjour, j'ai pas compris benjamin suduku c'est un plugin ? merci
@trobyssadrien8541
@trobyssadrien8541 Ай бұрын
Pour ton histoire de clavier, je te conseille le layout qwerty canadien, qui ajoute les accents ;)
@henriheymans3051
@henriheymans3051 Ай бұрын
Bravo Benjamin Code tu es très fort et très beau
@BenjaminCode
@BenjaminCode Ай бұрын
Merci Henrix, je te retourne les compliements au nombre de deux.
@Mnis110
@Mnis110 Ай бұрын
@@BenjaminCode Une douce poésie qui charme mille peuples
@ahmezi
@ahmezi Ай бұрын
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
@clementbermon3566
@clementbermon3566 Ай бұрын
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
@blacksun6761
@blacksun6761 Ай бұрын
salut question bete , pour vue et pas react ? sinon nice video.
@harkor007
@harkor007 Ай бұрын
Pour ton clavier, perso j'utilise le qwerty lafayette qui est un layout pour clavier US orienté dev francophone
@KawaMood
@KawaMood Ай бұрын
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' !
@patateman2178
@patateman2178 Ай бұрын
Pour le clavier prend un format ISO comment ça tu pourras mettre du azerty 🤔
@EricFressange
@EricFressange Ай бұрын
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.
@anthonymenghi
@anthonymenghi 9 күн бұрын
Bonjour, super vidéo. On peut animer le display none maintenant avec transition-behavior
@louhabert2678
@louhabert2678 Ай бұрын
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
@SamVcl
@SamVcl Ай бұрын
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
@BenjaminCode
@BenjaminCode Ай бұрын
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
@dffx
@dffx Ай бұрын
@@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
@Nothwarren
@Nothwarren Ай бұрын
J'ai pas vu le live, mais au depart tu te basais sur le temps en seconde de la video non ?
@dariusagbo4765
@dariusagbo4765 Ай бұрын
Deux ans? J’y arrive moi et ça ne fait que quelques mois que j’utilise du qwerty
@GORDONCASH
@GORDONCASH Ай бұрын
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
@pseudo-aleatoire
@pseudo-aleatoire Ай бұрын
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) 😀
@BenjaminCode
@BenjaminCode Ай бұрын
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
@thomasvillard7927
@thomasvillard7927 Ай бұрын
Avec une variable css que tu contrôles dans le js ?
@pseudo-aleatoire
@pseudo-aleatoire Ай бұрын
@@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;
@pseudo-aleatoire
@pseudo-aleatoire Ай бұрын
@@thomasvillard7927 ouais
@OsefFTW
@OsefFTW Ай бұрын
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.
@Aymeric.maitre
@Aymeric.maitre Ай бұрын
Salut ! super video mais je viens de tester sur ton site et j'ai une boucle infinie sur la step 1
@BenjaminCode
@BenjaminCode Ай бұрын
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
@itachouille5127
@itachouille5127 Ай бұрын
Super challenge 👍 perso j'estime pouvoir le faire en 2 jours 😢
@JeanLaselle
@JeanLaselle Ай бұрын
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).
@BenjaminCode
@BenjaminCode Ай бұрын
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é
@sebastienseguin8453
@sebastienseguin8453 Ай бұрын
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 ? 🤔
@tayaress
@tayaress Ай бұрын
Dans les timecodes de la vidéo, tu as écrit "coup d'envoie" plutôt que "coup d'envoi"
@gabriellandry7412
@gabriellandry7412 Ай бұрын
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 ;)
@BenjaminCode
@BenjaminCode Ай бұрын
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
@gabriellandry7412
@gabriellandry7412 Ай бұрын
​@@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.
@bryans21
@bryans21 Ай бұрын
Hello, quel est ton ide ?
@BenjaminCode
@BenjaminCode Ай бұрын
IntelliJ qui est pareil que webstorm ou phpstorm mais avec plus de langages pré installés
@charlesattend6340
@charlesattend6340 Ай бұрын
Waaah le modulo il fait mal 🫣
@BenjaminCode
@BenjaminCode Ай бұрын
Pourquoi ?
@charlesattend6340
@charlesattend6340 Ай бұрын
@@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 🤪.
@BenjaminCode
@BenjaminCode Ай бұрын
@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 !
@charlesattend6340
@charlesattend6340 Ай бұрын
@@BenjaminCode ha oui pardon j'ai répondu de tête mais bref c'était plus pour une question de clarté, bref, désolé 🫠
@amaurylapaque8175
@amaurylapaque8175 Ай бұрын
Bien joué, mais y a un petit bug en prod chef :D ça ne va pas à la vidéo suivante automatiquement :(
@amaurylapaque8175
@amaurylapaque8175 Ай бұрын
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.
@amaurylapaque8175
@amaurylapaque8175 Ай бұрын
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)
@kevintchiaze6215
@kevintchiaze6215 Ай бұрын
Le code promo n'est plus BENJAMINLEPLUSBELHUMAINDUMONDE 😂😂
@s1pierro
@s1pierro Ай бұрын
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
@dffx
@dffx Ай бұрын
2j c'est ce que tu facture pas le temps réel aha h
@s1pierro
@s1pierro Ай бұрын
@@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.
@louis526
@louis526 Ай бұрын
ranges tes components dans des dossiers stp
@debi4n
@debi4n Ай бұрын
pourquoi ton oreille a gonfler ? tu as croiser un lutteur tchétchène ?
@flox6261
@flox6261 Ай бұрын
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.
@angelamidev
@angelamidev Ай бұрын
Attend tu dis ne pas vouloir utiliser chatgpt mais tu utilises git copilot!? Tricheur!!! haha
@idontcode
@idontcode Ай бұрын
Je préfère mourir que coder sur un clavier azerty 🙃
@BenjaminCode
@BenjaminCode Ай бұрын
Tout dépend d’avec quoi t’as appris. Si t’as appris et utilisé pendant 15 ans un azerty, y’a aucun soucis !
@idontcode
@idontcode Ай бұрын
@@BenjaminCode t’as raison
La stack ultime pour créer un SaaS en 2024
14:02
Benjamin Code
Рет қаралды 71 М.
Le dev surprenant dans l'ombre de Micode
16:26
Benjamin Code
Рет қаралды 72 М.
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 48 МЛН
Smart Sigma Kid #funny #sigma #comedy
00:25
CRAZY GREAPA
Рет қаралды 16 МЛН
Challenge : 1h30 pour coder un menu complexe avec React et CSS
13:33
J'installe un datacenter dans ma cuisine
19:47
cocadmin
Рет қаралды 92 М.
L'effet le plus fou de 2023 (et plein d'autres)
31:03
Benjamin Code
Рет қаралды 55 М.
J'ai essayé de recoder ChatGPT. Voilà ce que j'ai appris...
22:07
J'ai codé un algorithme qui reconnaît les gens dans la rue
14:24
ici Amy Plant
Рет қаралды 392 М.
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 48 МЛН