Challenge : 2h pour coder cette page Star Wars

[@donodu78]

Ton ami Matei a l'air super créatif ! Etant dev front-end moi aussi, un détails assez subtile m'est tout de suite apparu en voyant sa maquette, et qui t'a échappé semblerait-il, concerne les animations des années. Il ne fait pas transitionner les deux derniers chiffres des années mais il créé des transitions uniquement sur les chiffres différents d'une année à l'autre. Par exemple, de l'année 1980 à 1983, seul le 0 transitionne vers le 3, et le 8 ne bouge pas. C'est une mécanique très intéressante, qui rappelle les anciens compteurs dont les chiffres tournaient sur eux même pour être changés. C'est un effet vraiment intéressant, il pourrait presque avoir sa propre vidéo dédié ! Bravo à toi et à Matei

[@LiorCHAMLA]

Très bon contenu mon bro. Le concept est toujours au top :)

[@BenjaminCode]

Merci Lior, toujours un immense honneur de te voir dans le coin !

[@isabellebentejac9521]

woaw, quelle vitesse ! Une fusée !! je suis scotchée ..

[@PianoFAB95]

Ça faisait un moment que j'étais pas passé sur ta chaîne mais tu es toujours au top et toujours aussi drôle malgré le stress du challenge. Bravo, lâche rien ;)

[@Bugs2013]

Je découvre le métier de dev grâce à toi et franchement je kiffe. Super boulot de ta part bravo !

[@FaaBioo972]

Purée... Moi qui suis fan d'émissions genre "Le meilleur pâtissier", quel plaisir de découvrir le même niveau de stress et la belle réussite finale sur ma passion : du code 🥰 On est des p#@1ns d'artistes en fait 😅 GG à toi, très beau challenge, très inspirant aussi et très honnête sur le résultat final. Merci 👍🏾

[@senti71]

Je suis chef d'entreprise, je fais un peu de dev mais pas forcément du front, mais tes vidéos challenge sont vraiment bien donc je n'en rate pas une, même si je comprend que la moitié de ce que tu fais. Continue comme ça c'est du bon contenu.

[@Tanchooteur]

Très grande qualité de vidéo comme d’habitude ainsi qu’une très grande maitrise 👌 parfais

[@axelllux]

franchement, tu peux être satisfait! c'est fou de faire ça en seulement 2 heures. tout ça me donne envie d'essayer

[@redamadjoub]

Trop cool ce style de vidéo. Merci Benjamin

[@rmy6738]

Félicitations c'était dur et tu t'en es plus que bien sorti !

[@romainguar8880]

Bravo, cette intégration était vraiment pas simple !!

[@JonathanBESSON]

Nickel ce défi, très stylé la maquette en plus. Je suis trop content de vous voir galérer, je me sent une merde 💩. Parce que parfois même avec des années d’expériences il y a des défis qui restent chaud de ouf ! J’ai tellement le seum quand ça m’arrive 🤪 C’est du coup super bien ce que vois avez fait, j’adore o

c'est validé a 100%, en 2h difficile de faire plus propre 👌

[@pierremfoundou]

Magnifique contenu comme d’habitude merci beaucoup

[@DavidSilveraYT]

Excellent ! Challenge largement réussi!

[@timcode_]

Comme d'hab vidéo au top !

[@roslymokambo2946]

Tu es encore développeur Junior !

[@theolavaux]

La fin et mise au propre du code en vidéo ? Impressionant le taff sorti en 2h gros gg !

[@BenjaminCode]

Je comprends pas la première question Théo :o

[@theolavaux]

Je me demandais si tu prévoyais de publier sur KZbin une sorte de partie 2 avec la fin de ce challenge pour mettre au propre le code (et utiliser GSAP par exemple) et finir les derniers détails, j'ai trouvé le format super cool !

[@bowerbulls]

@@theolavaux je me posais cette question !

[@zizaaa_]

yes!!! enfin une vidéo!!!

[@gbtux]

Toujours très impressionné 👌🏻

[@martin_d5417]

Vidéo super cool !!!!!

[@Hashbaie]

Propre, comme d'hab ! 💪

[@fredericgaufichon7373]

Trop cool cette vidéo 👏🏻

[@yoanlapeyre7028]

Salut, je me demande où on peut trouver ton starter kit (reset Css) ? Merci d'avance !

[@tikastory5575]

" C'est uniquement pour avoir un placement fluide de mes boules " Benjamin Code 2022 Excellent J'ai bien ris

[@choco-code]

😂😂😂 Orrgg, merci pour tout tes contenu très enrichissant. Chaque challenge me permet de découvrir pas mal d'astuces CSS. Enfin vos expressions quand ça foire 😂😂😂. J'ai aimé

[@kaporos]

Propre comme résultat en 2h 👌 Pour le slider des boules, c'était pas possible de faire ça avec un background qui a une width de 200% ? Un côté gris un côté jaune, et la classe active change le background position pour faire défiler le background et donc la couleur (je sais pas si c'était clair 😅) (je propose juste ça comme ça, mais visiblement ta solution fait parfaitement le taff )

[@willtraore]

Il est tendu de fou celui là ! Bien joué, je ne sais pas si j'y arriverais en moins de 2h de mon côté, mais je suis chaud pour essayer

[@willtraore]

@Ilya webdev Cette pression haha

[@armandsalle8447]

Pour le responsive je serais partis sur du fluide en vw, ça évite de se prendre la tête pour les animations et les ratios !

[@victorgogler5842]

Salty Armand

[@henockmkb]

Whaoo... Top 👌👌✨✨✨...

[@kohelet910]

Trop cool 😎

[@stiitch5838]

Vive les ignobles bg en red et green :')

[@kolibri-san7279]

J’ai calé un p’tit like

[@XiyitifuRide]

La doc ne ment pas 😉 car elle elle sélectionne un type number, or toi tu dois sélectionner un type string ... ?

[@BenjaminCode]

Non je chopais exactement un number aussi et si tu prend l'exemple de la doc et que tu le copies colle dans la console du navigateur, en changeant bien sur content par document pour pas avoir d'erreur la dessus, t'as belle et bien un bug

[@avigeon]

REFEREMENT chacal benzai

[@wowoblood9967]

super je m'abonne ! :)

[@khand4760]

La voix off on dirait Top Chef xD

[@BenjaminCode]

J'avoue je suis peut être un peu trop influencé sans le vouloir par les voix off d'etchbest !

[@bben]

La voix off qui fait penser à Etchebest dans Cauchemar en Cuisine

[@Poker44I]

bien joué :)

[@mavienvert]

ça ne s'affiche pas chez moi :/ (PC)

[@towou1090]

Validation validé, tu devrais ouvrir un discord d'ailleurs

[@djcaesar9114]

Beau défi relevé. En revanche attention à ne pas utiliser les unités "px", c'est assez dangereux.

[@brunosupico2385]

Attention aspect-ratio ne fonctionne pas toujours sur iOS

[@yomh5129]

non non challenge pas réussi pour 0 euro , l'exigence qu'on à pour les autres s'applique aussi pour nous 😂 pouce bleu

[@dimweb2569]

[@BenjaminCode]

😍😍😍

[@LNDev]

Magic 🔥🔥🔥

[@superecureuil7236]

bravo en 2 h c'est super perso j'aurais même pas fini le html lol

[@alex_angri]

comment ont devient membre de la chaine pour avoir le code?

[@BenjaminCode]

Hello, juste sous la vidéo, à côté du bouton S'ABONNER, tu as un bouton JOINDRE, et c'est comme ça que tu deviens membre :)

[@TheBackwasher]

5:32 - For sure haha

[@caaptaindevmorpheus9826]

J'ai hâte que tu me fasse un vrai tuto..☺️🖥️🦾

[@LilZoty]

32px c'est la taille d'une boule 🤨🧐

[@BenjaminCode]

😂😂

[@blacksketchtv7868]

2h … la ballade :)

[@jasonmrl385]

Let’s go les boules

[@elp1291]

Je sais que ça dénature un peu le challenge, mais c'est vraiment un projet qui aurait été bien plus rapide et simple à gérer avec un framework style vue.js. En tous cas vidéo fort sympathique !

[@noelstgelven1994]

En comparant ton travail avec celui des 6 autres dev, tu te donnes combien ?

[@BenjaminCode]

Ah bonne question ! J'aurais dis 16 je pense. Après je l'ai fait en 2h top chrono quand eux n'avaient aucune limite de temps !

[@noelstgelven1994]

@@BenjaminCode allez, on part sur un bon 15,5 , ça me semble bien par rapport aux autres. Lol . Merci de m avoir répondu.

[@BastiUi]

Quand est-ce que je te fais une maquette pour te mettre au défi ? (:

[@daedrikaskhan]

Mdr. jsuis pas le seul fou furieux à personnifier mon code et à lui parler comme une personne.

[@parouuu]

Coolos

[@billykiwee]

5:35 Ne me remercier pas.

[@Hashbaie]

😵🤣

[@BioniXdu25]

noice

[@sorrow_io]

Ça me serait jamais venu à l'esprit de mettre un INT dans un data-* x). Mais je retiens qu'il ne faut pas le faire :P.

[@BenjaminCode]

Lol tu peux le faire mais faut mettre des "" au moment tu tentes de le sélect... Comme si c'était une string en fait. Après la fin justifie les moyens, ici c'était pratique de mettre un int !

[@sorrow_io]

@@BenjaminCode oui oui, j'aurai mis un string avec un 1 :P.

[@BenjaminCode]

C'est ce que j'ai fait aussi. C'est juste dans le selector javascript que la doc ne met pas la string. Ils mettent le number direct. J'avais oublié la notation du query selector pour un data attr et la doc m'a fucked up

[@barbapapazes]

Trop bien ces vidéos ! Mais je trouve que le micro pop vraiment trop et c'est pas toujours agréable !

[@BenjaminCode]

Ah shit, j'ai pas capté que ça popait a ce point. Sur les p et les b ? Faudrait peut être que je colle moins ma bouche sur les voix off

[@justelesnews]

Benjamin, Bravo pour ce défi mais "Le code aurait été bien plus simple si tu avais utilisé Bootstrap" -> tu viens de ressentir ce que j'ai ressenti quand je t'ai entendu dire que ça aurait été plus simple avec Gsap.... 😅 Laissons les frameworks mourir dignement ! 🔜

[@BenjaminCode]

😡😡😡

[@BenjaminCode]

Ahah je comprends ton point mais ici avec des from to de gsap j'aurais été 10x plus vite et j'aurais pu gérer les deux sens bien plus simplement en fonction de si currentSlide est plus grand ou plus petit que previousSlide

[@toblamabor7072]

sinon quel est le probleme avec bootstrap? je ne comprends pas les devs qui se permettent de parler de cette façon d'un framework (moquerie etc.), bootstrap n'est pas uniquement un truc pour faire du responsive avec des grids, il est bien plus poussé que ça si on sait s'en servir, rien que les outis qu'il fournit, permet de gagner beaucoup de temps, comme des gens qui rigolent des devs wordpress pour dire que c'est pas du dev, alors qu'à part ajouter 2 extensions depuis l'interface utilisateur ils ont jamais touché au code de celui ci... c'est souvent les mêmes "types" qui utilisent tout les trucs "open source" mais quand il faut partager, ça fais le RAT 😁

[@justelesnews]

@@toblamabor7072 Je n'ai rien contre bootstrap (ni même gsap) mais il y a deux soucis principaux : -> la lourdeur souvent inutile parce que tu utilises 1% du framework mais tu trimbales tout (combien de devs utilisent les version personnalisées ? ) -> la complexité pour sortir de quelque chose qui n'est pas prévu. Tiens, tu as raison, c'est comme wordpress 😆 Pour info, mon site perso est sous wordpress...

[@toblamabor7072]

@@justelesnews je suis d'accord avec toi avec le fait que c'est une uzine à gaz si on ajoute bootstrap.min.css et s'en servir pour le grid ou 2-3 boutons, mais avec SASS, on peut prendre uniquement ce qui nous interesse, leur fonctions, outils qui sont fait pour faciliter la vie etc. Au moment de compilation, quasiment rien ne s'ajoute au code final à part optimization etc. Le probleme c'est juste les devs qui se sont arreté au 1er/ 2eme version et n'ont jamais lu la doc, et les juniors qui ajoutent le gros fichier pour quasiment ne pas s'en servir. Je trouve ça vraiment dommage qu'aujourd'hui on voit bootstrap comme jquery etc. mais bon chacun fait comme il le sent..