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

Поделиться
HTML-код
  • Опубликовано: 3 июл 2024
  • 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 RUclipsrs 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  29 дней назад +9

    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 28 дней назад

      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 25 дней назад

      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  25 дней назад

      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 25 дней назад

      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 RUclips, 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 29 дней назад +31

    J’aime le fait que le challenge te soit utile pour ton SaaS, il y a un coté « inside » qui est top!

  • @othmanbensaoula489
    @othmanbensaoula489 29 дней назад +20

    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 29 дней назад +5

      Je valide j'ai eu le même soucis récemment

  • @gabswile
    @gabswile 29 дней назад +18

    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 👌

  • @QUIGNONPAIN
    @QUIGNONPAIN 29 дней назад +6

    ca faisait longtemps que je n'avais pas regardé une de tes vidéos, mais le saint algorithme RUclips 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  29 дней назад +1

      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 !

  • @muliensito
    @muliensito 26 дней назад

    J’adore ces challenges, merci de nous les faire partager

  • @bengregory23
    @bengregory23 29 дней назад

    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

  • @louislecouturier
    @louislecouturier 28 дней назад +2

    Ça m'avait manqué tes challenges ! Top la vidéo !

  • @GDevWeb
    @GDevWeb 28 дней назад

    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...

  • @iannniis9112
    @iannniis9112 8 дней назад

    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

  • @Alex17865
    @Alex17865 23 дня назад

    1/4 de la vidéo c'est de la pub quand même, ca fait un ratio encore pire que TF1, chapeau.

  • @vincentmarconnet6061
    @vincentmarconnet6061 29 дней назад

    Benjamin,
    J’adore quand tu fais des challenges ! J’adore te voir galéré. Saches que ça me motive moi à coder 🧑‍💻

  • @DUBOINPascal
    @DUBOINPascal 29 дней назад +1

    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

  • @tacxtv
    @tacxtv 28 дней назад +2

    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 👍

  • @MrBonbatong
    @MrBonbatong 29 дней назад +1

    Bien sûr que c'est le kiff de voir un peu de challenge front!

  • @JUSTINBUISSON
    @JUSTINBUISSON 28 дней назад

    J'ai trop kiffé et pourtant que je comprends 30% et c'est ça qui est beau

    • @BenjaminCode
      @BenjaminCode  28 дней назад +1

      Toujours un plaisir de voir popper ta notif 🥰

  • @atsoushi
    @atsoushi 29 дней назад +3

    À 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

  • @Sql37
    @Sql37 29 дней назад

    Bien joué de pondre ça en 1h30 déjà !! Et la musique de la nuit qui passe ds FF7 fut très nostalgique 😁

  • @Kevin-yb6wt
    @Kevin-yb6wt 29 дней назад

    Super challenge ! Cela donne envie d’essayer :)

  • @SuperJTeam
    @SuperJTeam 29 дней назад

    Oui encore des challenges !

  • @xaviervermeulen8484
    @xaviervermeulen8484 28 дней назад

    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.

  • @romainminot6735
    @romainminot6735 29 дней назад +1

    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 29 дней назад

      Ah d'ailleurs, autant pour moi mais c'est probablement ton IDE qui te montre quand même les imports non ?

  • @skymasseffect
    @skymasseffect 28 дней назад

    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 9 дней назад

    toujours aussi cool tes videos

  • @axelpo9390
    @axelpo9390 28 дней назад

    Top le challenge !

  • @daxoRWORLD
    @daxoRWORLD 28 дней назад +1

    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

  • @omarJ-
    @omarJ- 27 дней назад

    Content de voir un peu de Vue dans le youtube game francais ... ca changera un peu du monopole de la commu React

  • @angelHighTech
    @angelHighTech 28 дней назад

    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.

  • @Chimerion86
    @Chimerion86 28 дней назад

    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

  • @maitretofu
    @maitretofu 28 дней назад

    Lorsque je vais sur meetsponsors, l'étape boucle. Je pensais que ça allait passer à la vidéo suivante :)

  • @louismazel
    @louismazel 28 дней назад

    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é.

  • @ctrl_fj
    @ctrl_fj 29 дней назад +2

    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

  • @gijoe5508
    @gijoe5508 26 дней назад

    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?

  • @trobyssadrien8541
    @trobyssadrien8541 28 дней назад

    Pour ton histoire de clavier, je te conseille le layout qwerty canadien, qui ajoute les accents ;)

  • @OP360communication
    @OP360communication 25 дней назад

    cool 👍🏻

  • @henriheymans3051
    @henriheymans3051 29 дней назад

    Bravo Benjamin Code tu es très fort et très beau

    • @BenjaminCode
      @BenjaminCode  29 дней назад +1

      Merci Henrix, je te retourne les compliements au nombre de deux.

    • @Mnis110
      @Mnis110 24 дня назад

      @@BenjaminCode Une douce poésie qui charme mille peuples

  • @ahmezi
    @ahmezi 29 дней назад

    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

  • @NsHtxZekoo
    @NsHtxZekoo 29 дней назад +2

    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 28 дней назад

      Si les accents sont un souci, utilisez le clavier états-unis international et le reste c'est des combinaisons de touches

    • @NsHtxZekoo
      @NsHtxZekoo 28 дней назад

      @@dariusagbo4765 des combinaisons de touches ? Du genre ?

    • @dariusagbo4765
      @dariusagbo4765 28 дней назад

      @@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 28 дней назад

      ruclips.net/video/Cg0YtwqyViI/видео.htmlsi=HqQJvjbK6vSPIdOf

  • @harkor007
    @harkor007 28 дней назад

    Pour ton clavier, perso j'utilise le qwerty lafayette qui est un layout pour clavier US orienté dev francophone

  • @florentgironde7279
    @florentgironde7279 25 дней назад

    C'est quel plug in qui met en couleur highlight les ?

  • @anthonymenghi
    @anthonymenghi 2 дня назад

    Bonjour, super vidéo.
    On peut animer le display none maintenant avec transition-behavior

  • @clementbermon3566
    @clementbermon3566 28 дней назад

    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

  • @user-ef9ls4mm7r
    @user-ef9ls4mm7r 28 дней назад

    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?

  • @TokusatsuGagaga
    @TokusatsuGagaga 29 дней назад +1

    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 27 дней назад +1

      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)

  • @GonyTuts
    @GonyTuts 28 дней назад

    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.

  • @louhabert2678
    @louhabert2678 29 дней назад

    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

  • @KawaMood
    @KawaMood 28 дней назад

    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' !

  • @GORDONCASH
    @GORDONCASH 29 дней назад

    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

  • @baylalabamba
    @baylalabamba 28 дней назад

    bonjour, j'ai pas compris benjamin suduku c'est un plugin ? merci

  • @itachouille5127
    @itachouille5127 29 дней назад

    Super challenge 👍 perso j'estime pouvoir le faire en 2 jours 😢

  • @blacksun6761
    @blacksun6761 28 дней назад

    salut question bete , pour vue et pas react ? sinon nice video.

  • @EricFressange
    @EricFressange 28 дней назад

    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.

  • @OsefFTW
    @OsefFTW 28 дней назад

    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.

  • @patateman2178
    @patateman2178 27 дней назад

    Pour le clavier prend un format ISO comment ça tu pourras mettre du azerty 🤔

  • @SamVcl
    @SamVcl 29 дней назад

    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  29 дней назад

      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 28 дней назад

      @@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

  • @JeanLaselle
    @JeanLaselle 29 дней назад

    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  29 дней назад +1

      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é

  • @pseudo-aleatoire
    @pseudo-aleatoire 29 дней назад

    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  29 дней назад

      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 29 дней назад

      Avec une variable css que tu contrôles dans le js ?

    • @pseudo-aleatoire
      @pseudo-aleatoire 29 дней назад

      @@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 29 дней назад

      @@thomasvillard7927 ouais

  • @Aymeric.maitre
    @Aymeric.maitre 29 дней назад

    Salut ! super video mais je viens de tester sur ton site et j'ai une boucle infinie sur la step 1

    • @BenjaminCode
      @BenjaminCode  29 дней назад +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

  • @Nothwarren
    @Nothwarren 29 дней назад

    J'ai pas vu le live, mais au depart tu te basais sur le temps en seconde de la video non ?

  • @tayaress
    @tayaress 28 дней назад

    Dans les timecodes de la vidéo, tu as écrit "coup d'envoie" plutôt que "coup d'envoi"

  • @dariusagbo4765
    @dariusagbo4765 28 дней назад

    Deux ans? J’y arrive moi et ça ne fait que quelques mois que j’utilise du qwerty

  • @sebastienseguin8453
    @sebastienseguin8453 27 дней назад

    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 ? 🤔

  • @gabriellandry7412
    @gabriellandry7412 29 дней назад

    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  29 дней назад +2

      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 29 дней назад

      ​@@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.

  • @charlesattend6340
    @charlesattend6340 29 дней назад

    Waaah le modulo il fait mal 🫣

    • @BenjaminCode
      @BenjaminCode  29 дней назад

      Pourquoi ?

    • @charlesattend6340
      @charlesattend6340 29 дней назад

      @@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  29 дней назад

      @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 29 дней назад

      @@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 28 дней назад

    Bien joué, mais y a un petit bug en prod chef :D
    ça ne va pas à la vidéo suivante automatiquement :(

    • @amaurylapaque8175
      @amaurylapaque8175 28 дней назад

      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 28 дней назад

      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 29 дней назад

    Le code promo n'est plus
    BENJAMINLEPLUSBELHUMAINDUMONDE 😂😂

  • @flox6261
    @flox6261 25 дней назад

    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.

  • @louis526
    @louis526 25 дней назад

    ranges tes components dans des dossiers stp

  • @bryans21
    @bryans21 29 дней назад

    Hello, quel est ton ide ?

    • @BenjaminCode
      @BenjaminCode  29 дней назад +1

      IntelliJ qui est pareil que webstorm ou phpstorm mais avec plus de langages pré installés

  • @debi4n
    @debi4n 29 дней назад +1

    pourquoi ton oreille a gonfler ? tu as croiser un lutteur tchétchène ?

  • @s1pierro
    @s1pierro 29 дней назад

    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 28 дней назад

      2j c'est ce que tu facture pas le temps réel aha h

    • @s1pierro
      @s1pierro 28 дней назад

      @@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.

  • @angelamidev
    @angelamidev 27 дней назад

    Attend tu dis ne pas vouloir utiliser chatgpt mais tu utilises git copilot!? Tricheur!!! haha

  • @idontcode
    @idontcode 29 дней назад

    Je préfère mourir que coder sur un clavier azerty 🙃

    • @BenjaminCode
      @BenjaminCode  29 дней назад +1

      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 28 дней назад

      @@BenjaminCode t’as raison