Respect éternel d'avoir attaqué le challenge sans aucun helper sur la partie maths, genre le calcul de distance en trois secondes c'était beau ! Le lapin que je suis en train de coder suit la souris comme ça mais laisse tomber, j'ai attaqué le truc armé jusqu'aux dents :P Et format décidément terrible. Merci pour tes vidéos Benjamin
Est-ce que tu peux faire une vidéo sur ton espace de travail, tes outils, tes méthodes et parler de tes préférences, extensions/plugins, éditeur de texte, et cetera ?
C'est marrant que tu ais fait une vidéo là dessus ;-) J'ai codé il y a quelques temps le même genre de truc mais avec les pas de la carte du maraudeur de Harry Potter, l'effet est vraiment sympa aussi ! Et continue tes vidéos, c'est un pur kif !
12:00 Allez je tente une théorie avant la solution : C'est parce que l'opacité dépend de la distance. Donc quand tu passes d'un côté du chat à l'autre, tu passes par le point où son opacité passe à 0. La solution consisterait alors à éviter que l'effet se déclenche. Mon idée : sous une certaine distance, tu déclenches un timeout, disons de 400ms. Si à l'issue de ce timeout, le chat est à une distance inférieure à 1, alors tu déclenches l'animation de fondu. Sinon il reste pleinement opaque.
C'est ma grosse trouvaille sur cette vidéo, je suis trop content, je vais l'utiliser sur tout mes challenges. En vrai ça apporte vraiment un bon support en plus pour le viewer qui voit un peu mieux comment est découpé la réflexion, je trouve ça vraiment pertinent et avec la grosse ref au milieu du gaming... Parf. Et merci pour les 41 min, j'avoue je pensais pas que j'y arriverai !!
Moi quand j'ai fait l'exo en solo, j'ai plutôt pensé à utiliser un setInterval de 50ms ... C'est ce qui m'a permis d'avoir un rendu visuellement satisfaisant. Tout en ajoutant une transition de 100ms. Mais clairement le requestAnimationFrame est une meilleure solution! Merci pour le hint Benjamin :)
Ah le souvenir ! After dark screensaver, je kiffais l'économiseur d'écran qui te bouffait toute l'interface graphique avec je sais plus quelles animations 🫶
Il y a un jeu que je cherche depuis des années qui m'avait retourné le cerveau et encore mtn j'aurai kiffé voir le code : c'est un bonhomme dans un carrée qui attrape ta souris, sauf que le mec utilise un nombre d'outils hallucinant, des lassos, des bombes, des missiles, des objets qu'il te lances dessus, même quand tu vas hors du carré cet enfoiré te chopes quand même ahahaha. ça a un look anime ça me faisait penser à un truc japonais et c'est un des jeux qui m'as donné envie de faire du code
Pour ne pas se prendre la tête avec les changements de repère tu aurais put wrapper ton chat et placer le transform-origine sur la tête du chat. Ensuite tu n'as plus qu'à te concentrer sur le placement de la souris pour le wrapper et sur le rotate et le scale pour le chat. Gg en tout cas
Super vidéo, très pédagogique ! J'ai pas l'niveau de me rendre compte à quel point mais suis persuadé que t'es un boss dans ton domaine. Vidéo suivante ? 40 min de plus ! 😉 Merci
Pour ce genre de contexte, une façon de simplifier les opérations mathématiques sur les transform dans un premier temps c'est d'utiliser des éléments imbriqués plutôt qu'un seul, et d'opérer avec les différentes propriétés sur l'un ou l'autre, certes c'est moins "optimisé" (car ton JS va bosser sur plusieurs éléments du DOM) mais au moins c'est plus accessible pour la lecture et la compréhension ! Et puis par la suite tu peux décider de fusionner tes différentes formules pour en faire qu'une sur un seul élément. ;)
Utilise Visual Studio Code c’est vraiment un excellent éditeur de texte. Avec des plugins comme Prettier et bien d’autre tu perds beaucoup moins de temps à coder et ton texte s’indente tout seul
J'utilise php storm avec le nouveau thème en bêta qui arrive dans la prochaine release. Meilleur ide du monde. Meilleures completions, meilleure assistance au développement je ne peux que trop conseiller !
@@BenjaminCode j’irais y jeter un coup d’œil alors ! J’ai commencé à coder en php dans mon entreprise grâce à toi,au début j’avais pas très envie de m’y mettre je trouvais ça trop long d’apprendre tout ça. Mais finalement quand on voit la puissance qu’on a entre les mains c’est vraiment merveilleux. Vraiment merci beaucoup pour tes vidéos, elles donnent des idées et poussent à la créativité. En plus, t’es toujours chill j’adore vraiment ton mood ! Continue comme ça surtout
Pour flipper le chat avec la souris à gauche. Ça n’aurait pas été plus simple un rotateY(180deg) si la souris est avant et 0 si elle est après ? 😅 Super format autrement ! Bonne vidéo !
Salut Benjamin puis-je te poser une question ? J'ai commencé à développer, j'ai des bases très solides en html, css, js et php. Je commence également en react et node js. Cependant je n'arirve pas à obtenir du boulot front end (intégration psd par exemple). Sais-tu où je devrais m'orienter pour réussir enfin à gagner de l'argent avec le dev web ? Je suis relativement fort en intégration mais maintenant faut avoir des clients pour pouvoir prouver ce que je fais. Merci d'avance de ta réponse !
Je viens de te découvrir (grace à tes participations dans Underscore) et que vois-je, tu vis à El Palo ! (ou pas loin, en tout cas j'ai bien vu les immeubles verts qui délimitent mon tié-quar !). J'espère te (re?)croiser dans Malaga, en attendant t'as gagné un abonné :)
Oui j'y ai pensé mais c'est pas convaincant tout le temps pour les rotations ça n'allait bien que ce soir par rapport au centre et je sais plus pour qu'elle autre raison mais j'y ai pensé oui
t'abuse le challenge est bien mais sans starter, sans montrer comment tu config webpack, parcel, ou babel... ben impossible de le refaire le challenge, j'aime bcp se que tu fais mais c'est vraiement chient de pas pourvoir refaire les bails de façon fluide
Je ne comprends ABSOLUMENT RIEN dans tes vidéos, et je m'y connais ABSOLUMENT PAS en coding, mais je regarde toutes tes vidéos 😅😅🤣
Ça veux dire qu’il est très bon ;)
Hésite pas à t'y mettre c'est génial 🤪😁
@@hugosauvage8776 c'est clair
@@kaporos j'aimerais bien, mais je ne sais pas d'ou commencer...
@@aouna1656 Ah ça, c'est vrai qu'il y a énormément de possibilités, le seul conseil que je puisse donner c'est de commencer simple :)
Alors challenge réussi ou raté ?
Rejoignez gratuitement le talent club de talent.io:
bit.ly/talent-club
Pin it :)
Respect éternel d'avoir attaqué le challenge sans aucun helper sur la partie maths, genre le calcul de distance en trois secondes c'était beau !
Le lapin que je suis en train de coder suit la souris comme ça mais laisse tomber, j'ai attaqué le truc armé jusqu'aux dents :P
Et format décidément terrible. Merci pour tes vidéos Benjamin
La satisfaction quand le chat ne saute plus ! 🤩
Est-ce que tu peux faire une vidéo sur ton espace de travail, tes outils, tes méthodes et parler de tes préférences, extensions/plugins, éditeur de texte, et cetera ?
Je ne pige pas grand chose en tant que débutant ..mais quel régal !!
C'est marrant que tu ais fait une vidéo là dessus ;-) J'ai codé il y a quelques temps le même genre de truc mais avec les pas de la carte du maraudeur de Harry Potter, l'effet est vraiment sympa aussi ! Et continue tes vidéos, c'est un pur kif !
Je suis justement en train de reprendre cette vidéo pour avoir exactement l’effet des pas de cette carte 😂😂
12:00 Allez je tente une théorie avant la solution : C'est parce que l'opacité dépend de la distance. Donc quand tu passes d'un côté du chat à l'autre, tu passes par le point où son opacité passe à 0. La solution consisterait alors à éviter que l'effet se déclenche. Mon idée : sous une certaine distance, tu déclenches un timeout, disons de 400ms. Si à l'issue de ce timeout, le chat est à une distance inférieure à 1, alors tu déclenches l'animation de fondu. Sinon il reste pleinement opaque.
Fabuloso Fabuloso Benjamin, j'ai pleuré de joie quand t'as réussi l'épreuve à la fin, c'était touchant (y)
Trop fan du fait d'avoir utilisé un livesplit timer hahah
Et gros GG, 41 minutes ça reste fou 😮
C'est ma grosse trouvaille sur cette vidéo, je suis trop content, je vais l'utiliser sur tout mes challenges. En vrai ça apporte vraiment un bon support en plus pour le viewer qui voit un peu mieux comment est découpé la réflexion, je trouve ça vraiment pertinent et avec la grosse ref au milieu du gaming... Parf. Et merci pour les 41 min, j'avoue je pensais pas que j'y arriverai !!
Super découverte de ta chaîne depuis quelques jours je bouffe tes vidéos toute la journée, et j'ai vraiment la dalle :D
Ahah c'te tête de gosse à Noël quand finalement ça finit par fonctionner !
Well done, t'as géré encore une fois !
Belle problématique ! J'ai trouvé ça plus intéressant que de l'intégration en HTML/CSS !
Bg la coupe, Benji
6:49 bordelais spotted 😏
je kiff regarder ce que tu fais continue !
Fort
Génial ta vidéo ! 👍
Le titre m'a tué 😂
Moi quand j'ai fait l'exo en solo, j'ai plutôt pensé à utiliser un setInterval de 50ms ... C'est ce qui m'a permis d'avoir un rendu visuellement satisfaisant. Tout en ajoutant une transition de 100ms. Mais clairement le requestAnimationFrame est une meilleure solution!
Merci pour le hint Benjamin :)
Ah le souvenir ! After dark screensaver, je kiffais l'économiseur d'écran qui te bouffait toute l'interface graphique avec je sais plus quelles animations 🫶
9:10 mon quotidien de développeur.
Il y a un jeu que je cherche depuis des années qui m'avait retourné le cerveau et encore mtn j'aurai kiffé voir le code : c'est un bonhomme dans un carrée qui attrape ta souris, sauf que le mec utilise un nombre d'outils hallucinant, des lassos, des bombes, des missiles, des objets qu'il te lances dessus, même quand tu vas hors du carré cet enfoiré te chopes quand même ahahaha. ça a un look anime ça me faisait penser à un truc japonais et c'est un des jeux qui m'as donné envie de faire du code
C’est ce genre de vidéos qui me fait kiffer le front mdr🤩🤓
tes videos me fascinent
Pour ne pas se prendre la tête avec les changements de repère tu aurais put wrapper ton chat et placer le transform-origine sur la tête du chat.
Ensuite tu n'as plus qu'à te concentrer sur le placement de la souris pour le wrapper et sur le rotate et le scale pour le chat.
Gg en tout cas
Pour la couleur du background à choisir au début, bah j'aurais bien vu un "gris souris" :D
incroyable
j'aime bien le chrono avec les steps de ton codage, c'est quoi comme tool ?
Super vidéo, très pédagogique !
J'ai pas l'niveau de me rendre compte à quel point mais suis persuadé que t'es un boss dans ton domaine.
Vidéo suivante ? 40 min de plus ! 😉 Merci
100K 🥳
Pour ce genre de contexte, une façon de simplifier les opérations mathématiques sur les transform dans un premier temps c'est d'utiliser des éléments imbriqués plutôt qu'un seul, et d'opérer avec les différentes propriétés sur l'un ou l'autre, certes c'est moins "optimisé" (car ton JS va bosser sur plusieurs éléments du DOM) mais au moins c'est plus accessible pour la lecture et la compréhension ! Et puis par la suite tu peux décider de fusionner tes différentes formules pour en faire qu'une sur un seul élément. ;)
Excellent 👌
0:32 J'adore le sourire sur l'introduction du sponsor autour du mot talent. On sent un peu l'autodérision. Non c'était bien...
Sa tête lorsque tout c'est débloqué. C'est exactement pour ça que j'aime coder 😂
3:55 l'écran de mon Alienware en 360Hz RIP 🤣
Des nouvelles de la version longue de la musique parfaite pour coder ?
Wo ! Super vidéo :0
« Soraré » bien l’accent anglais 😂
Pourquoi devenir développeur : 13:08
Hey! super vidéo comme d'habitude
Quel est ton editeur de texte d'ailleurs ?
Utilise Visual Studio Code c’est vraiment un excellent éditeur de texte. Avec des plugins comme Prettier et bien d’autre tu perds beaucoup moins de temps à coder et ton texte s’indente tout seul
@@skylord_omf6480 c'est ce que j'utilise au quotidien mais j'etais curieux vis à vis de ce qu'il utilise. Merci tout de meme! 🤗
J'utilise php storm avec le nouveau thème en bêta qui arrive dans la prochaine release.
Meilleur ide du monde. Meilleures completions, meilleure assistance au développement je ne peux que trop conseiller !
@@BenjaminCode Merci!
@@BenjaminCode j’irais y jeter un coup d’œil alors !
J’ai commencé à coder en php dans mon entreprise grâce à toi,au début j’avais pas très envie de m’y mettre je trouvais ça trop long d’apprendre tout ça. Mais finalement quand on voit la puissance qu’on a entre les mains c’est vraiment merveilleux. Vraiment merci beaucoup pour tes vidéos, elles donnent des idées et poussent à la créativité. En plus, t’es toujours chill j’adore vraiment ton mood ! Continue comme ça surtout
Beaucoup trop stylé, j'espere que tu pourras PB bientot... :^)
Super démo
J'adore le format, merci pour cette vidéo très éducatif
Maintenant tu peux faire un jeu en js pur ;)
I love your mind Sir
Pour flipper le chat avec la souris à gauche. Ça n’aurait pas été plus simple un rotateY(180deg) si la souris est avant et 0 si elle est après ? 😅
Super format autrement ! Bonne vidéo !
Salut Benjamin puis-je te poser une question ?
J'ai commencé à développer, j'ai des bases très solides en html, css, js et php.
Je commence également en react et node js.
Cependant je n'arirve pas à obtenir du boulot front end (intégration psd par exemple).
Sais-tu où je devrais m'orienter pour réussir enfin à gagner de l'argent avec le dev web ?
Je suis relativement fort en intégration mais maintenant faut avoir des clients pour pouvoir prouver ce que je fais.
Merci d'avance de ta réponse !
Romain Guy, c'est un français. Si je me souviens bien, pigiste chez PCTeam dans une autre vie
Je viens de te découvrir (grace à tes participations dans Underscore) et que vois-je, tu vis à El Palo ! (ou pas loin, en tout cas j'ai bien vu les immeubles verts qui délimitent mon tié-quar !). J'espère te (re?)croiser dans Malaga, en attendant t'as gagné un abonné :)
Yo Brice ! Je suis à Berlin en ce moment ! Mais quand je rentre à Malaga, on peut se faire une caña entre paleños ! Je suis de la Pelusa!
@@BenjaminCode con mucho gusto vecino ! Je t'ai suivi sur twitter pour que tu me tiennes au courant via MP
Merci pour la vidéo le code source svp
Si toi aussi tu ressens la même satisfaction quand ton code fonctionne ☺
transform-origin: "top left" aurait pas pu t'aider au début ?
Non pas trop hélas
Il vaut clairement mieux bosser depuis le centre de l’élément pour ce genre d'effet
tu as pensé à déclarer le "transform-position: x y" qui te permet justement de décaler le centre de l'objet ?
Oui j'y ai pensé mais c'est pas convaincant tout le temps pour les rotations ça n'allait bien que ce soir par rapport au centre et je sais plus pour qu'elle autre raison mais j'y ai pensé oui
@@BenjaminCode et le transform-origin:center right ?
On avait demander un zizi en css mais bon le chat c pas mal
T utilise que ide benjamin
intellij je pense
t'abuse le challenge est bien mais sans starter, sans montrer comment tu config webpack, parcel, ou babel... ben impossible de le refaire le challenge, j'aime bcp se que tu fais mais c'est vraiement chient de pas pourvoir refaire les bails de façon fluide
J'aurais aimé voir la coinfig aussi qu'il utilise.
Je pose toujours la question lorsque le vent est dans le dos, peut-il courir à plus de 40 km/h?