Challenge : 40 min pour coder un chat qui court après la souris

[@aouna1656]

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 😅😅🤣

[@hugosauvage8776]

Ça veux dire qu’il est très bon ;)

[@kaporos]

Hésite pas à t'y mettre c'est génial 🤪😁

[@aouna1656]

@@hugosauvage8776 c'est clair

[@aouna1656]

@@kaporos j'aimerais bien, mais je ne sais pas d'ou commencer...

[@kaporos]

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

[@consolebuche6051]

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

[@anthonyp2301]

La satisfaction quand le chat ne saute plus ! 🤩

[@Rorothejedi]

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 !

[@XavooCoc]

Je suis justement en train de reprendre cette vidéo pour avoir exactement l’effet des pas de cette carte 😂😂

[@joyous4567]

Fabuloso Fabuloso Benjamin, j'ai pleuré de joie quand t'as réussi l'épreuve à la fin, c'était touchant (y)

[@BenjaminCode]

Alors challenge réussi ou raté ? Rejoignez gratuitement le talent club de talent.io: bit.ly/talent-club

[@uploadvoice]

Pin it :)

[@BALOPRISONNIER]

Trop fan du fait d'avoir utilisé un livesplit timer hahah Et gros GG, 41 minutes ça reste fou 😮

[@BenjaminCode]

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

[@surrion]

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

[@SUPA93200]

Je ne pige pas grand chose en tant que débutant ..mais quel régal !!

[@black_nextgen]

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 ?

[@valentinr.4678]

Ahah c'te tête de gosse à Noël quand finalement ça finit par fonctionner ! Well done, t'as géré encore une fois !

[@aminbeee]

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 :)

[@ctrl_fj]

Belle problématique ! J'ai trouvé ça plus intéressant que de l'intégration en HTML/CSS !

[@kelors5634]

je kiff regarder ce que tu fais continue !

[@senesterium]

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.

[@JeremyGasperowicz]

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 🫶

[@samythegrappler3297]

C’est ce genre de vidéos qui me fait kiffer le front mdr🤩🤓

[@Nuage14]

Bg la coupe, Benji

[@Magma-uw7yo]

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

[@loh3763]

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

[@EricFressange]

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

[@ugob9005]

Génial ta vidéo ! 👍

[@web3marabu]

Des nouvelles de la version longue de la musique parfaite pour coder ?

[@camaradepopoff7052]

Pour la couleur du background à choisir au début, bah j'aurais bien vu un "gris souris" :D

[@youssoufkharabi5540]

j'aime bien le chrono avec les steps de ton codage, c'est quoi comme tool ?

[@KawaMood]

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

[@Kwinu]

tes videos me fascinent

[@azeur3659]

100K 🥳

[@Gyver4000]

Super démo J'adore le format, merci pour cette vidéo très éducatif

[@mycode-developpement]

Le titre m'a tué 😂

[@bastienbroussard]

6:49 bordelais spotted 😏

[@bricemoi1205]

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é :)

[@BenjaminCode]

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!

[@bricemoi1205]

@@BenjaminCode con mucho gusto vecino ! Je t'ai suivi sur twitter pour que tu me tiennes au courant via MP

[@QUIGNONPAIN]

Beaucoup trop stylé, j'espere que tu pourras PB bientot... :^)

[@DavidSilveraYT]

Excellent 👌

[@lucasfzy]

Wo ! Super vidéo :0

[@fouderix]

incroyable

[@benjaminniddam2114]

Sa tête lorsque tout c'est débloqué. C'est exactement pour ça que j'aime coder 😂

[@foot360s]

Merci pour la vidéo le code source svp

[@bastiendufour3841]

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 !

[@SyDyJo]

Maintenant tu peux faire un jeu en js pur ;)

[@TheRadProd]

9:10 mon quotidien de développeur.

[@ye333333333333]

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 !

[@Hyside]

Hey! super vidéo comme d'habitude Quel est ton editeur de texte d'ailleurs ?

[@skylord_omf6480]

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

[@Hyside]

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

[@BenjaminCode]

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 !

[@Hyside]

@@BenjaminCode Merci!

[@skylord_omf6480]

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

[@theolavaux]

transform-origin: "top left" aurait pas pu t'aider au début ?

[@BenjaminCode]

Non pas trop hélas

[@KawaMood]

Il vaut clairement mieux bosser depuis le centre de l’élément pour ce genre d'effet

[@cest_le_don_psiko]

Fort

[@bobi-bob]

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

[@quattroquatre3113]

I love your mind Sir

[@lewis6747]

3:55 l'écran de mon Alienware en 360Hz RIP 🤣

[@Nssr6.9]

« Soraré » bien l’accent anglais 😂

[@justelesnews]

Romain Guy, c'est un français. Si je me souviens bien, pigiste chez PCTeam dans une autre vie

[@Gatsu351]

tu as pensé à déclarer le "transform-position: x y" qui te permet justement de décaler le centre de l'objet ?

[@BenjaminCode]

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

[@yann-soazbillot8415]

@@BenjaminCode et le transform-origin:center right ?

[@billal2731]

Pourquoi devenir développeur : 13:08

[@cubecraft1894]

T utilise que ide benjamin

[@najy8320]

intellij je pense

[@sankalulu]

Si toi aussi tu ressens la même satisfaction quand ton code fonctionne ☺

[@ploplop7001]

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

[@carlusmartelus6601]

J'aurais aimé voir la coinfig aussi qu'il utilise.

[@gijoe5508]

Je pose toujours la question lorsque le vent est dans le dos, peut-il courir à plus de 40 km/h?

[@ilyesbejia6566]

On avait demander un zizi en css mais bon le chat c pas mal