Est-ce qu'après cette vidéo le responsive vous paraît être moins angoissant et compliqué ? Est-ce que vous aviez connaissance du fluide design ? Vous y faisiez gaff jusque là ?
En formation, on nous dit de coder mobile first, mais on où en avait pas forcément expliquer l'intérêt, c'est beaucoup plus clair maintenant. Et c'est quoi ce designer qui fait pas de responsive avec une maquette Figma :D
@@kaeduss494 un feignasse lol ^^ bon après figma ça reste figmou quoi on ns l'a dit cash mais selon les formations ça va être plus ou moins approfondi je pense
Yo ! Je dois admettre que ta vidéo est grave intéressante, étant développeur junior front les breakpoints je connaissais. En revanche la méthode du mobile-first m'étais inconnu et honnêtement c'est vraiment pas con :D. Je tacherais d'y pensais la prochaine fois merci !!
Hey, merci pour ta vidéo :) Pendant ma formation j'étais tombé sur un article qui expliquait la différence entre "Responsive Design" et "Adaptive Design". Apparemment ces termes font consensus. Je cite l'article: "A website created with responsive design serves up the same site to every device, but that site is fluid and will change its layout and appearance based on the size and orientation of the device. ... In adaptive design, a different website layout is created for each device’s screen. As it loads, the site recognizes the size of the screen and serves up the layout that was made for that viewport." (Source: "Responsive vs. Adaptive Design" sur CareerFoundry) En gros ce que tu appelles "Fluid design" j'imagine que c'est ce qu'ils appellent "Responsive", et "Adaptive design" c'est un site qui utilise des breakpoints pour modifier le layout. Du coup un site a besoin d'un mélange d'adaptive ET de responsive pour garantir une bonne utilisabilité sur tous les supports.
Pas vraiment en fait, l'adaptive design voit plutot ça comme un front entièrement différent en fonction du device. Souvent on fait un mixe entre les 2, il y a un site mobile et un site desktop distinct qui ont chacun des elements responsive en fonction da taille d'écran.
Super vidéo comme d'hab ! Je te suis depuis longtemps et dernièrement je trouve vraiment que la forme et le fond de tes formats fait vraiment le taff ! J'ai le doux rêve de t'entendre parler un jour d'accessibilité. Un sujet ô combien négligé et inconnu pour une majorité de dev front (et pourtant essentiel, utile pour un tas de gens et pas si compliqué)
Très bonne suggestion ! Je n'en suis pas moi même un expert car je n'ai jamais digger des formations sur le sujet mais je pense avoir développer par mal d'automatisme et de bonnes pratiques qui rendent mon travail accessible. J'ai pas mal de tuyaux à partager mais une chose est sûre, il va ne falloir bûcher le sujet si je veux pouvoir l'aborder sans dire de conneries !
Salut! Je connaissais le mobile first mais plus dans le sens: "il faut penser au format téléphone au début car on est sûr du comportement voulut", alors qu'avec ton explication ça me semble tellement plus logique maintenant, ça me motive pour m'y mettre. Pour le fluide design, je le faisais déjà avant l'apparition des flexbox en utilisant des pourcentages pour séparer mes éléments, ça rendait plutôt pas mal mais il y avait souvent des comportements chaotiques. Maintenant avec les flexbox c'est tellement plus simple et ça rend tout de suite bien!
J'ai eu la chance d'apprendre à coder directement en mobile first. Donc pas d'angoisse de mon côté. Par contre vu ma formation (reconversion professionnel par le biais OpenClassRooms), J'ai vraiment beaucoup de mal à commenter mon code. Je ne sais pas ce que je dois commenter et comment. Si tu souhaites faire une vidéo sur ce sujet, je trouverai ça vraiment très intéressant. Merci pour ton travail comme d'habitude.
Si ton seul problème est de savoir comment commenter ton code, alors tu n'as pas de problème ... ; ) Jette un coup d'œil au bouquin "Clean Code", c'est un des chapitres abordés. En gros, ne pas faire des commentaires évidents qui vont polluer la lecture du code. Les commentaires doivent être très spartiates. Uniquement commenter le code qui est très optimisé et condensé, par des infos courtes...
Coucou! Je suis en pleine réflexion de reconversion également (je suis prof de physique dans le privé), et j'ai justement commencé les cours libres d'openclassrooms y'a 3 jours, je viens de voir le cours sur flex. Et du coup je me demandais si tu avais juste suivi les cours libres comme moi ou si tu avais suivi une réelle formation? Et surtout qu'est-ce que tu as fait ensuite? Je me demande vraiment quel est le chemin à suivre pour se former proprement en reconversion. Merci d'avance!
Bonjour, tu n’as pas à commenter ton code dans 99% des cas. Dans l’absolu tu ne vas commenter que quand tu dois donner une info sur quelque chose qui ne s’exprime pas par le code car ça vient d’un facteur extérieur, par exemple un hack css un peu niqué parce que safari se comporte bizarrement
si tu dois bosser en equipe fais des coms du style " barre de navigation " " le footer " etc pour que le prochain lise ton code plus vite ou des hacks chelous aussi à mettre en avant ou expliquer
@@niang46 salut, aujourd'hui il est possible de ce former seul sur internet mais il existe un problème à ça. Sur internet tu as la ressource pour apprendre l'ensemble des notions voulu dans un domaine (web, appli mobile, ... ). Mais souvent le plus dur c'est de trouver une structure sur le long terme. Je pense que dans un premier temps il faut que tu regardes les branches du dev qui t'intéresses web, mobile, logiciel, réseau. Dans ces grandes branches il y a plein de métiers, ex: dans le web c'est encore 2 grandes catégories le front et le back (c'est plus complexe que ça en réalité t'as une super vidéo sur la chaîne concernant le front). Après en fonction de ce que tu veux tu peux trouver des map qui retracent l'ensemble des notions nécessaires pour commencer à faire ses propres projets perso. Par exemple pour le front end tu as la vidéo de la youtubeuse coder coder qui détaille pas si mal le parcours pour faire du front. Et concernant les ressources je peux te conseiller : freecodecamp, graphikart et openclassrooms (un peu vieux sur le PHP par exemple), coder coder, code with mosh, dev simplified, code ninja pour les vidéos. En bouquin t'as la collection de the pragmatic programmers qui est génial pour tout les langages et le livre de refactoring guru sur les design patterns pour maîtriser la OOP. Bonne chance !
Au début quand je faisais le responsive, je me prenais pour un génie du responsive parce que ça marchait sur tous les écrans, alors que je plaçais 30 000 breakpoints. PS: 7:11 à propos de cet événement, les historiens de l'époque (qui étaient pas vraiment des historiens au sens scientifique actuel, mais plutôt des idéologues) rapportent que César était tellement snob qu'il aurait prononcé "Toi aussi mon fils" en Grec avant de mourir en regardant Brutus
@Fragment 5 Oui selon l'historien Suétone, parler ou écrire en Grec ancien était une marque d'éducation raffinée. Par exemple Marc-Aurèle empereur et philosophe romain écrivait en Grec ancien
D'ailleurs, c'est rigolo, mais dans différentes langues, la "citation" en latin qu'on a retenue n'est pas la même. Les francophones ont "tu quoque, mi fili", qui nous viendrait de l'abbé Lhomond, qui a rédigé un manuel pour l'enseignement du latin au XVIIIe siècle ; les italiens ont retenu "Tu quoque, Brute, fili mi", je ne sais pas d'où ça sort, mais vu que la page Wikipedia en italien mentionne que la phrase sert de moyen mnémotechnique pour retenir des vocatifs irréguliers, c'est pas impossible qu'elle aie aussi été crée par un prof de latin à un moment ; les anglophones ont "Et tu, Brute", qui leur vient de Britannicus, une pièce de Shakespeare.
Pour le coup, c'est tellement agréable de voir quelqu'un mettre des mots sur ce qu'on fait au quotidien et qu'on peut avoir du mal à expliquer le pourquoi du comment. Le responsive, c'est une question d'habitude et de bonnes pratiques ! À force de concevoir des structures qui seront agréable en mobile & en desktop, vous finirez par développer des mécanismes et ça n'en deviendra que des plus agréable. N'ayez pas peur, c'est génial.
J'ai eu la chance d'avoir était guider par un super mentor quand j'ai commencé le dev frontend il y a 2 ans, il m'a montré tout ces petits trucs au tout début de mon auto formation, mon mentor ne fait que me montrer comment faire et il me laisse seul avec la maquette après ... je m'attendais a voir une surprise super cool à la fin de ta vidéo mais bof c'était juste une vidéo qui me montre à quel point mon mentor était super 🙈 Cette vidéo va sûrement m'aider à guider un junior dans son apprentissage du métier intégrateur .. merci mec
j'ai dû dans le cadre de mon diplôme développer mon portfolio. Que j'ai développé en React (car je voulais découvrir la techno). Et justement j'ai découvert le responsive, que je détestais ! Et en fait on se prend au jeu à vouloir tout ajuster pour tous les formats ! Si on réfléchis bien en amont à comment sera fait notre html, on arrive facilement à faire un responsive, sans devoir faire grand chose... simplement changer le display, des trucs simples quoi.
Benjamin code a de nouveau une place dans mon cœur ! ❤️ avec cette video, tu reviens à la base, c'est à dire expliquer le code et donner les bonnes pratiques ! On veut une vidéo sur le Fluide Design !!! :D
J'ai même pas fini la vidéo et je peux déjà dire : tu fais du boulot très propre. Je te suis depuis pas mal d'années et j'ai l'impression que cette chaîne a fait un pas en avant sur la qualité du contenu. Bravo !
Bonjour, Tout d'abord, merci pour tes vidéo, qui sont toujours très intéressantes. 2 remarques où je ne comprends pas les développeurs web : 1- les breakpoints se font toujours à un nombre de pixels sur la largeur ou la hauteur. Pourquoi ? on peut également mettre des cm (pouces ou mm) et on parle alors de la taille physique de l'écran (ou de la fenêtre) et non du nombre de pixels qui ne nous donne pas vraiment l'information de la taille physique de l'écran (trinité cm / résolution / nombre de pixels). Les écrans de smartphones contiennent maintenant bien plus de pixels que certains écrans ! Du coup cela ne me semble plus être la bonne information. 2- Pour la fluidité j'utilise pour les dimensions les unités vmin,vmax, vw et vh. Cela marche aussi pour la taille des fontes de caractères, et cela augmente nettement la fluidité (notamment quand je change la taille de la fenêtre ). Et dans la média queries, pour mes fameux breakponts (si je je change la valeur 5 / 6 vmin en mobile first, 2 / 3 sur grand écran. Ce sont 2 façons de faire que je vois rarement dans les conseils. Est-ce que je suis si loin de la vérité ?
Pour la question 1 : En faite le pixel est aussi une unité de mesure physique comme tu dis, un pixel peut très bien se traduire en centimètre. Les breakpoints communs comme 1024 pixels sont donc une taille commune où les écrans ne passe rarement en dessous. 2 : vh et vw sont des unités utilisés par tout le monde car elles s'adapte à toute les tailles d'écrans, 100vh est la hauteur de ton navigateur et 100 vw est la largueur, quel que soit l'écran. Cela peut être utile par exemple si tu as une section sur ta page (la première section par exemple) qui doit faire tout pile toute la hauteur de l'écran, alors tu pourras utiliser cette valeur adaptative. Pour vmin et vmax le problème c'est que quand tu intègres une maquette, ces valeurs ne seront jamais les mêmes affichés pour tout les écrans si par exemple tu veux une font d'une certaine taille. Pour avoir une certaine uniformité entre les écrans en intégration, il est souvent recommandé d'utiliser des tailles fixes (comme les px).
Salut, juste une note sur 100vh : sur mobile ça représente la hauteur totale d'affichage. Lorsque la barre de navigation du browser est présente en haut de l'écran, 100vh fera déscendre plus bas que l'écran. Préférer 100% sur html + body.
@@antoinebayard4484 euh, en fait non, le pixel n'est pas une unité physique. La taille d'un pixel dépend de l'écran dont on parle. Par exemple, un écran de téléphone peut faire 1024 pixel, et celui d'un écran d'ordinateur de bureau aussi. Et les deux n'ont pas la même taille physique. Ainsi, dans le css on parle de deux pixels qui n'ont pas la même taille physique. Et donc, utiliser les pixels pour déterminer la taille physique est problématique. Pour le faire, il faut également prendre en compte la résolution qui nous donne le nombre de pixels par pouce.
@@laurentdupont8318 Salut, merci pour ta première remarque car je pensais être le seul à penser ça étant donné que personne n'en parle. C'est d'ailleurs la raison principale qui m'empêche de me mettre au dev web car je trouve que c'est illogique de toujours parler en pixel, je ne saurai donc pas moi même comment faire. Par exemple étant donné que sur la plupart des sites tout est toujours défini en pixel le site rendra bien par exemple sur un 27" FHD, mais sur un 27" 4K qu'en sera-t-il ? Les éléments seront tous 2x plus petit ? ça n'a aucun sens
Ouuuii une vidéo sur la fluidité ce serait top !!! Je commente jamais mais u m'as fait découvrir le code et maintenant et je suis dev depuis 1 an et je me suis jamais senti aussi bien dans un métier ! Merci pour tes vidéos elles sont vraiment cool !
Votre dernière partie exprime très bien ce qu’est le responsive web design aujourd’hui et demain. Les breakpoints deviennent un outils de dernier recours presque. En tout cas c’est ainsi que j’aborde les problématiques aujourd’hui avec grid et flex, les unités relatives liées à la taille du viewport et autres. ❤
J'avoue que je me foutais pas mal du mobile first...je me suis totalement retrouvé quand tu parlais d'overwrite un tas de propriétés😅😅, et c'est parfois la galère de devoir inspecter la page pour détecter les margins et autres pour combattre le Scroll... En tout cas merci pour cette vidéo, maintenant c'est du mobile first😎
Je plussoie tous ces précieux conseils Benjamin, je rajouterai qu'il ne faut pas se bloquer dans ''mobile first'' ou ''desktop first'' mais que celà dépend du besoin... Une app tournée ''utilitaire'' pour une boite etc -> desk first car ca va être très majoritairement consulté sur ordi, pareil pour une ADMIN par exemple... Merci pour cette vidéo intéressante qui permet de conforter nous points de vue de devs 😉
J'y avais jamais pensé !!! 🤪 Mobile first, first tip ever front. Je ne suis pas juste "front" mais j'y penserai quand j'en ferais de nouveau 👍 Thank you SO much !
Le vrai problème du responsive, c'est dans des contextes un peu plus spécifiques que juste des blocs simples et des boutons (genre animations, illustrations, présentations avec des offsets et des absolutes dans tous les sens, etc.). Les breakpoints standardisés aujourd'hui ne sont même plus vraiment fiables, surtout quand ça concerne le format smartphone, car les producteurs n'arrivent pas à standardiser leurs appareils ils sont toujours obligés de mettre un demi-pouce de plus ou de moins, avoir un écran plus haut, un écran qui déborde sur la caméra, et maintenant même des écrans pliables... Des concepts soit-disant vendeurs (spoiler: non) pour les market, mais un bagne collectif pour les développeurs front-end, qui ne cesse de s'agrandir au fil du temps.
Hello, je suis UI Designer et du coup c'est très plaisant de voir quelqu'un qui prend vraiment en compte les idées qu'on a eu, dans ta partie Fluid Design, souvent je me retrouve à batailler avec les dev pour avoir quelque chose qui ressemblait à ma maquette de base, même si je sais que toutes les idées ne sont pas simples à réaliser. Le coup du menu ça arrive souvent mais je t'avoue que moi même je ne remarque pas étant donné que je ne m'amuse pas à passer entre chaque breakpoint, si le site est joli et utilisable ça me convient. Mais c'est un vrai plus ce que tu soulèves et j'essayerais de m'en rappeler.
Mec je fais mon premier site avec nodejs. J suis dev webdev de base (oui je sais) et grace a tes vidéos je prends les bonnes habitudes. J ai commencé mon site avec bootstrap, bim je suis finalement pur css (less css) Et maintenant je refais pes style en mobile first. Merci tes vidéos sont de l or
Tailwing, bootstrap ou comment violer les principes même du CSS aussi violement qu'en utilisant des balises style dans l'HTML. J'ai vraiment des haut le cœur quand je vois des trucs genre 5:37 Honnêtement maitriser les flexboxes et les media queries et surtout les appliquer dès le début, c'est pas si compliqué. J'ai hâte que les containers queries arrivent pour faire des choses encore plus folles.
Bonjour Benjamin, je suis un ancien dev frontend. ce que j'aimais bien faire quand je travaillais en agence, c'était de coder mes sites responsive en ne compilant qu'une seul foix. Mon but étais de réaliser le site de de a à z et de découvrir le site coder complètement avec une seul compile et de faire un perfect. Je sais pas si tu as déjà fait ce challenge mais je trouve ça sympa !
Pour la communication designer/dev concernant les sizes et autres espaces, j'ai imposé à mon équipe de product designer via notre design system une nomenclature. Exemple, les espaces fonctionnent par nom "space XS" "space S" space M" etc... et pour chaque space on à des valeurs correspondante suivant des breakpoints. (exemple : Space L = 32px sur un breakpoint 1440 et au delà, mais sur un breakpoint de 375 il sera de 24px... Les sizes intermédiaires se calculent seule ensuite.
Je pense que c'est mieux d'utiliser les rem au lieu des pixels comme unité.on pourra agir sur le font size de base pour que tous les elements en rem suivent automatiquement
Je suis dev back et la plupart du temps sans dev front sur le projet. Difficile de savoir pour la fluidité par exemple, le designer devrait également le souligner puisqu'on n'a pas forcément l'habitude de travailler de la même manière. Après aujourd'hui il y a de bons outils comme Figma (coucou BastiUI) et je pense que ça doit bien aider aussi à comprendre la vision du designer.
Super vidéo comme dab merci. Pour ma part j’ai toujours parlé d’adaptative design et de responsive design. J’ai l’impression qu’on fait plus d’adaptative avec des blocks qui s’adaptent à la taille que du responsive qui va modifier le contenu en fonction de la taille. Sûrement plus simple de faire de l’adaptative que du responsive. Continues comme ça c’est un bonheur de suivre tes vidéos
Merci pour cette vidéo ! c'est quali' comme d'habitude. Point important tout de même : peut-être connais-tu déjà every-layout, c'est un ebook super sympa (en anglais) pour travailler de façon fluide en pure CSS, ce sans utiliser de media queries. Aussi, j'ai remarqué que tu utilise margin-bottom/top etc., pour que ton site soit adapté au sens de lecture RTL sans toucher ton CSS, les propriétés margin-end, margin-start et consorts sont vraiment sympas à utiliser.
Oui une vidéo sur la fluidité m'intéresse please 🤓 Merci pour tes vidéos, elles sont inspirantes et sont une grande source de connaissances, et toujours avec ta bonne humeur ça fait plaisir :)
Hello, je trouve que tes explications sont très clair ! Je ne comprendrai jamais pourquoi des gens pour gagner du temps qui perdront par la suite, réduisent la qualité de leurs codes pour implanter du bootstrap. Ce même import que je trouve horrible et que le CSS pur est beaucoup mieux et plus flexible ! Après tu m'auras appris le Mobile-First car j'ai toujours dev Desktop-First ... Pour les breakpoint j'ai toujours mis des transitions simple pour ne pas perdre en fluidité ! Voilà continue je kiff ton travail !
Tu peux importer que "grid" de bootstrap et pas tout bootstrap, la grid est bien foutue de base pas besoin de refaire à la main avec ses variables, et si tu fais du sass les mixins sont déjà présentes et très simple à utiliser. J'utilise uniquement bootstrap pour ça et non pour les composants, très simple à surcharger également en sass si on veut changer des variables. Sans ça, à termes tu refais tes règles, mixins, variables, media queries... et donc ça revient au même
Par ce commentaire je te fais savoir qu'une vidéo sur la fluidité (F. L. uidité) m'interesse !! Merci pour tes vidéo t'as chaine est une mine d'or pour les débutant !!!
Si c'est l'ouverture des demandes, je vais en faire une sur d'autres points : la gestion des user stories en front. Tu ne bosses que sur maquette ou bien il y a des demandes spécifiques ? Deuxième demande : tu as dit que l'intégration, c'était pas la majeure partie du dev front mais qu'il fallait aussi faire attention à l'opti, etc. Tu pourrai faire une vidéo là dessus ? C'est super intéressant mais on trouve souvent que des trucs "visuels" sur les chaines YT de code, car plus impressionnant. Merci bien :)
Le "fluide design" me parait tellement plus naturel et j'ai toujours trouvé ça hyper frustrant les breakpoints. On tends quand même à avoir de plus en plus de facilité à mettre ça en place, avec les flexbox notamment. Pour moi ça devrait être la norme pour finalement remplacer totalement les breakpoints afin de s'adapter à 100% des devices. Donc très chaud pour une vidéo la dessus !
Et concernant le mobile first, je suis d'accord avec toi dans la majorité des cas ça évite d'avoir à remettre des propriétés a leur état initial. Mais des fois il peut arriver l'inverse. C'est en desktop que les propriétés sont a leur état initial. Du coup le mieux selon moi et de définir par défaut les règles communes et dans les breakpoints min ou max les règles spécifiques et fessant en sorte de ne pas remettre les valeurs initiales : display:block; margin:0; position:static...
Est-ce qu'après cette vidéo le responsive vous paraît être moins angoissant et compliqué ?
Est-ce que vous aviez connaissance du fluide design ? Vous y faisiez gaff jusque là ?
je dirais qu'il faut .... le faire
mais bootstrap 😭😭😭😭😭
Oui fais nous une vidéo sur le fluide design avec des exemples
Merci
Il ne manque plus que l'italien et ça deviendra Davinci Code.
En formation, on nous dit de coder mobile first, mais on où en avait pas forcément expliquer l'intérêt, c'est beaucoup plus clair maintenant. Et c'est quoi ce designer qui fait pas de responsive avec une maquette Figma :D
@@kaeduss494 un feignasse lol ^^
bon après figma ça reste figmou quoi
on ns l'a dit cash mais selon les formations ça va être plus ou moins approfondi je pense
Merci pour ce contenu de qualité! oui une video sur le " Design fluide" serait vraiment appréciée
Oui une vidéo sur la fluidité
Yo ! Je dois admettre que ta vidéo est grave intéressante, étant développeur junior front les breakpoints je connaissais. En revanche la méthode du mobile-first m'étais inconnu et honnêtement c'est vraiment pas con :D. Je tacherais d'y pensais la prochaine fois merci !!
Mobile first !!! Merci Grafikart !!!
Le "cette vidéo me coute" m'a fait m'abonner XD
Hey, merci pour ta vidéo :)
Pendant ma formation j'étais tombé sur un article qui expliquait la différence entre "Responsive Design" et "Adaptive Design". Apparemment ces termes font consensus. Je cite l'article:
"A website created with responsive design serves up the same site to every device, but that site is fluid and will change its layout and appearance based on the size and orientation of the device.
...
In adaptive design, a different website layout is created for each device’s screen. As it loads, the site recognizes the size of the screen and serves up the layout that was made for that viewport."
(Source: "Responsive vs. Adaptive Design" sur CareerFoundry)
En gros ce que tu appelles "Fluid design" j'imagine que c'est ce qu'ils appellent "Responsive", et "Adaptive design" c'est un site qui utilise des breakpoints pour modifier le layout. Du coup un site a besoin d'un mélange d'adaptive ET de responsive pour garantir une bonne utilisabilité sur tous les supports.
Pas vraiment en fait, l'adaptive design voit plutot ça comme un front entièrement différent en fonction du device.
Souvent on fait un mixe entre les 2, il y a un site mobile et un site desktop distinct qui ont chacun des elements responsive en fonction da taille d'écran.
@@nebjil06 en général le site mobile n'est pas conçu pour desktop, mais l'inverse oui, vu qu'il existe des ordis avec des petits écrans
Super vidéo comme d'hab ! Je te suis depuis longtemps et dernièrement je trouve vraiment que la forme et le fond de tes formats fait vraiment le taff ! J'ai le doux rêve de t'entendre parler un jour d'accessibilité. Un sujet ô combien négligé et inconnu pour une majorité de dev front (et pourtant essentiel, utile pour un tas de gens et pas si compliqué)
Très bonne suggestion ! Je n'en suis pas moi même un expert car je n'ai jamais digger des formations sur le sujet mais je pense avoir développer par mal d'automatisme et de bonnes pratiques qui rendent mon travail accessible. J'ai pas mal de tuyaux à partager mais une chose est sûre, il va ne falloir bûcher le sujet si je veux pouvoir l'aborder sans dire de conneries !
@@BenjaminCode très enthousiaste à l'idée que tu développes ce sujet également !
Benjamin : Cette vidéo me coûte....
Moi, un intellect : Pouce Bleu pour te rafraichir.
Salut! Je connaissais le mobile first mais plus dans le sens: "il faut penser au format téléphone au début car on est sûr du comportement voulut", alors qu'avec ton explication ça me semble tellement plus logique maintenant, ça me motive pour m'y mettre.
Pour le fluide design, je le faisais déjà avant l'apparition des flexbox en utilisant des pourcentages pour séparer mes éléments, ça rendait plutôt pas mal mais il y avait souvent des comportements chaotiques. Maintenant avec les flexbox c'est tellement plus simple et ça rend tout de suite bien!
11:46 AMEN! merci merci merci de pointer ce point
J'ai eu la chance d'apprendre à coder directement en mobile first. Donc pas d'angoisse de mon côté. Par contre vu ma formation (reconversion professionnel par le biais OpenClassRooms), J'ai vraiment beaucoup de mal à commenter mon code. Je ne sais pas ce que je dois commenter et comment. Si tu souhaites faire une vidéo sur ce sujet, je trouverai ça vraiment très intéressant.
Merci pour ton travail comme d'habitude.
Si ton seul problème est de savoir comment commenter ton code, alors tu n'as pas de problème ... ; )
Jette un coup d'œil au bouquin "Clean Code", c'est un des chapitres abordés. En gros, ne pas faire des commentaires évidents qui vont polluer la lecture du code. Les commentaires doivent être très spartiates. Uniquement commenter le code qui est très optimisé et condensé, par des infos courtes...
Coucou! Je suis en pleine réflexion de reconversion également (je suis prof de physique dans le privé), et j'ai justement commencé les cours libres d'openclassrooms y'a 3 jours, je viens de voir le cours sur flex.
Et du coup je me demandais si tu avais juste suivi les cours libres comme moi ou si tu avais suivi une réelle formation? Et surtout qu'est-ce que tu as fait ensuite? Je me demande vraiment quel est le chemin à suivre pour se former proprement en reconversion.
Merci d'avance!
Bonjour, tu n’as pas à commenter ton code dans 99% des cas. Dans l’absolu tu ne vas commenter que quand tu dois donner une info sur quelque chose qui ne s’exprime pas par le code car ça vient d’un facteur extérieur, par exemple un hack css un peu niqué parce que safari se comporte bizarrement
si tu dois bosser en equipe fais des coms du style " barre de navigation " " le footer " etc pour que le prochain lise ton code plus vite
ou des hacks chelous aussi à mettre en avant ou expliquer
@@niang46 salut, aujourd'hui il est possible de ce former seul sur internet mais il existe un problème à ça. Sur internet tu as la ressource pour apprendre l'ensemble des notions voulu dans un domaine (web, appli mobile, ... ). Mais souvent le plus dur c'est de trouver une structure sur le long terme. Je pense que dans un premier temps il faut que tu regardes les branches du dev qui t'intéresses web, mobile, logiciel, réseau. Dans ces grandes branches il y a plein de métiers, ex: dans le web c'est encore 2 grandes catégories le front et le back (c'est plus complexe que ça en réalité t'as une super vidéo sur la chaîne concernant le front). Après en fonction de ce que tu veux tu peux trouver des map qui retracent l'ensemble des notions nécessaires pour commencer à faire ses propres projets perso. Par exemple pour le front end tu as la vidéo de la youtubeuse coder coder qui détaille pas si mal le parcours pour faire du front.
Et concernant les ressources je peux te conseiller : freecodecamp, graphikart et openclassrooms (un peu vieux sur le PHP par exemple), coder coder, code with mosh, dev simplified, code ninja pour les vidéos.
En bouquin t'as la collection de the pragmatic programmers qui est génial pour tout les langages et le livre de refactoring guru sur les design patterns pour maîtriser la OOP.
Bonne chance !
Au début quand je faisais le responsive, je me prenais pour un génie du responsive parce que ça marchait sur tous les écrans, alors que je plaçais 30 000 breakpoints.
PS: 7:11 à propos de cet événement, les historiens de l'époque (qui étaient pas vraiment des historiens au sens scientifique actuel, mais plutôt des idéologues) rapportent que César était tellement snob qu'il aurait prononcé "Toi aussi mon fils" en Grec avant de mourir en regardant Brutus
@Fragment 5 Oui selon l'historien Suétone, parler ou écrire en Grec ancien était une marque d'éducation raffinée.
Par exemple Marc-Aurèle empereur et philosophe romain écrivait en Grec ancien
@Fragment 5 Non c'est du Latin, mais des historiens rapportent que César aurait dit en vrai "Καὶ σὺ τέκνον"
D'ailleurs, c'est rigolo, mais dans différentes langues, la "citation" en latin qu'on a retenue n'est pas la même. Les francophones ont "tu quoque, mi fili", qui nous viendrait de l'abbé Lhomond, qui a rédigé un manuel pour l'enseignement du latin au XVIIIe siècle ; les italiens ont retenu "Tu quoque, Brute, fili mi", je ne sais pas d'où ça sort, mais vu que la page Wikipedia en italien mentionne que la phrase sert de moyen mnémotechnique pour retenir des vocatifs irréguliers, c'est pas impossible qu'elle aie aussi été crée par un prof de latin à un moment ; les anglophones ont "Et tu, Brute", qui leur vient de Britannicus, une pièce de Shakespeare.
@@filiaaut Hahahahaha c'est marrant je savais pas. Merci pour l'info
Pour le coup, c'est tellement agréable de voir quelqu'un mettre des mots sur ce qu'on fait au quotidien et qu'on peut avoir du mal à expliquer le pourquoi du comment.
Le responsive, c'est une question d'habitude et de bonnes pratiques ! À force de concevoir des structures qui seront agréable en mobile & en desktop, vous finirez par développer des mécanismes et ça n'en deviendra que des plus agréable.
N'ayez pas peur, c'est génial.
Merci pour ta sueur, ton sacrifice ne sera point vain. Let's go pour la vidéo sur la fluidité
Dev front depuis plus de 10 ans, j'ai bien apprécié ta vidéo. J'appelle également mes intés "fluides" ;)
Tjrs un plaisir de t’écouter! Merci
J'ai eu la chance d'avoir était guider par un super mentor quand j'ai commencé le dev frontend il y a 2 ans, il m'a montré tout ces petits trucs au tout début de mon auto formation, mon mentor ne fait que me montrer comment faire et il me laisse seul avec la maquette après ... je m'attendais a voir une surprise super cool à la fin de ta vidéo mais bof c'était juste une vidéo qui me montre à quel point mon mentor était super 🙈
Cette vidéo va sûrement m'aider à guider un junior dans son apprentissage du métier intégrateur .. merci mec
Je regarde seulement la vidéo, elle est super intéressante pour tous mais personnellement étant débutant je l’ai beaucoup apprécié. J’en redemande ! 👍
j'ai dû dans le cadre de mon diplôme développer mon portfolio. Que j'ai développé en React (car je voulais découvrir la techno).
Et justement j'ai découvert le responsive, que je détestais ! Et en fait on se prend au jeu à vouloir tout ajuster pour tous les formats !
Si on réfléchis bien en amont à comment sera fait notre html, on arrive facilement à faire un responsive, sans devoir faire grand chose... simplement changer le display, des trucs simples quoi.
Vrai
Je connaissais déjà pas mal le sujet, mais l'affichage des breakpoints "visuels" dans chrome j'avais pas !!!! trop bien merci
Je donnerais tout absolument tout pour une video sur la fluidité benjamin code.
Benjamin code a de nouveau une place dans mon cœur ! ❤️ avec cette video, tu reviens à la base, c'est à dire expliquer le code et donner les bonnes pratiques ! On veut une vidéo sur le Fluide Design !!! :D
Après j'ai pas une liste infinie de conseils à donner donc faut bien que je diversifie mes vidéos !
Ouiii ! :) Une vidéo sur le Fluide design 🙏🔥🔥
@@BenjaminCode Je ne connais personne d'autre qui a ton style sur DevTube ! C'est super que tu tentes de nouveaux concepts !
J'ai même pas fini la vidéo et je peux déjà dire : tu fais du boulot très propre. Je te suis depuis pas mal d'années et j'ai l'impression que cette chaîne a fait un pas en avant sur la qualité du contenu. Bravo !
Merci du soutien Raph !
Ta manière de traiter les sujets très amusante 😊
7:14 tu m’as eu 🤣 très bonne vidéo !
l'intro est légendaire 🤣🤣
Très bon vulgarisateur. Je regarde souvent sans pour autant savoir « coder » mais tu aides à beaucoup mieux comprendre cet univers
Merci!
Gg pour la musique de Godevain le vilain, et Tailwind CSS magnifique :)
Bonjour,
Tout d'abord, merci pour tes vidéo, qui sont toujours très intéressantes.
2 remarques où je ne comprends pas les développeurs web :
1- les breakpoints se font toujours à un nombre de pixels sur la largeur ou la hauteur. Pourquoi ? on peut également mettre des cm (pouces ou mm) et on parle alors de la taille physique de l'écran (ou de la fenêtre) et non du nombre de pixels qui ne nous donne pas vraiment l'information de la taille physique de l'écran (trinité cm / résolution / nombre de pixels). Les écrans de smartphones contiennent maintenant bien plus de pixels que certains écrans ! Du coup cela ne me semble plus être la bonne information.
2- Pour la fluidité j'utilise pour les dimensions les unités vmin,vmax, vw et vh. Cela marche aussi pour la taille des fontes de caractères, et cela augmente nettement la fluidité (notamment quand je change la taille de la fenêtre ). Et dans la média queries, pour mes fameux breakponts (si je je change la valeur 5 / 6 vmin en mobile first, 2 / 3 sur grand écran.
Ce sont 2 façons de faire que je vois rarement dans les conseils. Est-ce que je suis si loin de la vérité ?
Intéressant, mais je commente juste pour être prévenu des réponses, faites pas attention a moi ^^
Pour la question 1 : En faite le pixel est aussi une unité de mesure physique comme tu dis, un pixel peut très bien se traduire en centimètre. Les breakpoints communs comme 1024 pixels sont donc une taille commune où les écrans ne passe rarement en dessous.
2 : vh et vw sont des unités utilisés par tout le monde car elles s'adapte à toute les tailles d'écrans, 100vh est la hauteur de ton navigateur et 100 vw est la largueur, quel que soit l'écran. Cela peut être utile par exemple si tu as une section sur ta page (la première section par exemple) qui doit faire tout pile toute la hauteur de l'écran, alors tu pourras utiliser cette valeur adaptative. Pour vmin et vmax le problème c'est que quand tu intègres une maquette, ces valeurs ne seront jamais les mêmes affichés pour tout les écrans si par exemple tu veux une font d'une certaine taille. Pour avoir une certaine uniformité entre les écrans en intégration, il est souvent recommandé d'utiliser des tailles fixes (comme les px).
Salut, juste une note sur 100vh : sur mobile ça représente la hauteur totale d'affichage. Lorsque la barre de navigation du browser est présente en haut de l'écran, 100vh fera déscendre plus bas que l'écran. Préférer 100% sur html + body.
@@antoinebayard4484 euh, en fait non, le pixel n'est pas une unité physique. La taille d'un pixel dépend de l'écran dont on parle. Par exemple, un écran de téléphone peut faire 1024 pixel, et celui d'un écran d'ordinateur de bureau aussi. Et les deux n'ont pas la même taille physique. Ainsi, dans le css on parle de deux pixels qui n'ont pas la même taille physique. Et donc, utiliser les pixels pour déterminer la taille physique est problématique. Pour le faire, il faut également prendre en compte la résolution qui nous donne le nombre de pixels par pouce.
@@laurentdupont8318 Salut, merci pour ta première remarque car je pensais être le seul à penser ça étant donné que personne n'en parle. C'est d'ailleurs la raison principale qui m'empêche de me mettre au dev web car je trouve que c'est illogique de toujours parler en pixel, je ne saurai donc pas moi même comment faire.
Par exemple étant donné que sur la plupart des sites tout est toujours défini en pixel le site rendra bien par exemple sur un 27" FHD, mais sur un 27" 4K qu'en sera-t-il ? Les éléments seront tous 2x plus petit ? ça n'a aucun sens
Ouuuii une vidéo sur la fluidité ce serait top !!! Je commente jamais mais u m'as fait découvrir le code et maintenant et je suis dev depuis 1 an et je me suis jamais senti aussi bien dans un métier ! Merci pour tes vidéos elles sont vraiment cool !
Votre dernière partie exprime très bien ce qu’est le responsive web design aujourd’hui et demain. Les breakpoints deviennent un outils de dernier recours presque. En tout cas c’est ainsi que j’aborde les problématiques aujourd’hui avec grid et flex, les unités relatives liées à la taille du viewport et autres. ❤
J'ai pas encore regardé la vidéo mais la miniature me fait tellement rire 😂🤣🤣
OUI ! Je le veux !
Ouiii une vidéo sur le fluid design, j'aimerai bien voir ce que ça donne techniquement, ça à l'air un peu angoissant aussi
J'avoue que je me foutais pas mal du mobile first...je me suis totalement retrouvé quand tu parlais d'overwrite un tas de propriétés😅😅, et c'est parfois la galère de devoir inspecter la page pour détecter les margins et autres pour combattre le Scroll...
En tout cas merci pour cette vidéo, maintenant c'est du mobile first😎
oui une vidéo sur la fluidité stp... la qualité des informations de tes vidéos, c'est top🙌🥺
oui stp une vidéo sur la fluidité ca serait insane
Je plussoie tous ces précieux conseils Benjamin, je rajouterai qu'il ne faut pas se bloquer dans ''mobile first'' ou ''desktop first'' mais que celà dépend du besoin... Une app tournée ''utilitaire'' pour une boite etc -> desk first car ca va être très majoritairement consulté sur ordi, pareil pour une ADMIN par exemple...
Merci pour cette vidéo intéressante qui permet de conforter nous points de vue de devs 😉
Oui, je veux bien une vidéo sur le fluid 😉👍👌
J'y avais jamais pensé !!! 🤪 Mobile first, first tip ever front.
Je ne suis pas juste "front" mais j'y penserai quand j'en ferais de nouveau 👍
Thank you SO much !
J'adore vous ecouter Mr Benjamin Code
Le vrai problème du responsive, c'est dans des contextes un peu plus spécifiques que juste des blocs simples et des boutons (genre animations, illustrations, présentations avec des offsets et des absolutes dans tous les sens, etc.). Les breakpoints standardisés aujourd'hui ne sont même plus vraiment fiables, surtout quand ça concerne le format smartphone, car les producteurs n'arrivent pas à standardiser leurs appareils ils sont toujours obligés de mettre un demi-pouce de plus ou de moins, avoir un écran plus haut, un écran qui déborde sur la caméra, et maintenant même des écrans pliables... Des concepts soit-disant vendeurs (spoiler: non) pour les market, mais un bagne collectif pour les développeurs front-end, qui ne cesse de s'agrandir au fil du temps.
Hello, je suis UI Designer et du coup c'est très plaisant de voir quelqu'un qui prend vraiment en compte les idées qu'on a eu, dans ta partie Fluid Design, souvent je me retrouve à batailler avec les dev pour avoir quelque chose qui ressemblait à ma maquette de base, même si je sais que toutes les idées ne sont pas simples à réaliser. Le coup du menu ça arrive souvent mais je t'avoue que moi même je ne remarque pas étant donné que je ne m'amuse pas à passer entre chaque breakpoint, si le site est joli et utilisable ça me convient. Mais c'est un vrai plus ce que tu soulèves et j'essayerais de m'en rappeler.
C'est une bonne vid mais dommage que ta pas parler du media query hover en CSS
ca pourra en aider plus un pour un design (responsive/adaptative)
Mec je fais mon premier site avec nodejs. J suis dev webdev de base (oui je sais) et grace a tes vidéos je prends les bonnes habitudes. J ai commencé mon site avec bootstrap, bim je suis finalement pur css (less css)
Et maintenant je refais pes style en mobile first. Merci tes vidéos sont de l or
Merci Benjamin
Bien sûr qu'une vidéo qui flex ça nous intéresse
La fluidité c'est OUI
Super video. Vas y j'attends direct la prochaine video sur la fluidité
Je te lefeleuh savoir que je veux une vidéo sur la fluidité ! Coeur sur toi ❤
Super vidéo! On attends la vidéo sur la fluidité
Ayoye! Méchante vidéo! Je partage ça à mes collègues étudiants! Merci pour tes opinions pertinentes!
Bonjour Benjamin, oui on voudrait bien une vidéo sur le fluid design 🤔🤔
Super vidéo merci Benjamin, pour ma part j'ai juste appris tailwind pour échapper au responsive..
Tailwing, bootstrap ou comment violer les principes même du CSS aussi violement qu'en utilisant des balises style dans l'HTML.
J'ai vraiment des haut le cœur quand je vois des trucs genre 5:37
Honnêtement maitriser les flexboxes et les media queries et surtout les appliquer dès le début, c'est pas si compliqué.
J'ai hâte que les containers queries arrivent pour faire des choses encore plus folles.
Le faite melemele savoir j'aime bien xD
Bonjour Benjamin, je suis un ancien dev frontend. ce que j'aimais bien faire quand je travaillais en agence, c'était de coder mes sites responsive en ne compilant qu'une seul foix. Mon but étais de réaliser le site de de a à z et de découvrir le site coder complètement avec une seul compile et de faire un perfect. Je sais pas si tu as déjà fait ce challenge mais je trouve ça sympa !
Let’s go sur la vidéo de la fluidité
Pour la communication designer/dev concernant les sizes et autres espaces, j'ai imposé à mon équipe de product designer via notre design system une nomenclature. Exemple, les espaces fonctionnent par nom "space XS" "space S" space M" etc... et pour chaque space on à des valeurs correspondante suivant des breakpoints. (exemple : Space L = 32px sur un breakpoint 1440 et au delà, mais sur un breakpoint de 375 il sera de 24px... Les sizes intermédiaires se calculent seule ensuite.
merci benjamin pour cette video une fois de plus captivante et simple a comprendre
Toujours trop bien! Merci Benji!!
Je pense que c'est mieux d'utiliser les rem au lieu des pixels comme unité.on pourra agir sur le font size de base pour que tous les elements en rem suivent automatiquement
Je suis dev back et la plupart du temps sans dev front sur le projet.
Difficile de savoir pour la fluidité par exemple, le designer devrait également le souligner puisqu'on n'a pas forcément l'habitude de travailler de la même manière.
Après aujourd'hui il y a de bons outils comme Figma (coucou BastiUI) et je pense que ça doit bien aider aussi à comprendre la vision du designer.
Un grand oui pour une vidéo sur la fluidité ! Et top comme vidéo, comme d'hab :)
Video sur la fluidité top! on l'attends! Ciao de l'Italie
Super vidéo comme dab merci. Pour ma part j’ai toujours parlé d’adaptative design et de responsive design. J’ai l’impression qu’on fait plus d’adaptative avec des blocks qui s’adaptent à la taille que du responsive qui va modifier le contenu en fonction de la taille. Sûrement plus simple de faire de l’adaptative que du responsive. Continues comme ça c’est un bonheur de suivre tes vidéos
Vidéo extrêmement intéressante et riche, merci beaucoup
Super, hâte de voir la vidéo sur la fluidité, entre les blocs et des tailles de police fluide 😉
Super vidéo! Flexbox est vraiment à bien maîtriser de nos jours!
Trop bien la video 😃 carrément fluidifie ta commu!
oui une video sur la fluidité serait apprécié
Merci pour cette vidéo ! c'est quali' comme d'habitude. Point important tout de même : peut-être connais-tu déjà every-layout, c'est un ebook super sympa (en anglais) pour travailler de façon fluide en pure CSS, ce sans utiliser de media queries. Aussi, j'ai remarqué que tu utilise margin-bottom/top etc., pour que ton site soit adapté au sens de lecture RTL sans toucher ton CSS, les propriétés margin-end, margin-start et consorts sont vraiment sympas à utiliser.
Super ta vidéo avec toujours cette pointe d'humour ! Je suis chaud pour la fluidité !
Merci pour tes vidéos, toujours des pépites d’infos 👏
Très bonne vidéo et oui j'aimerais bien une vidéo sur la fluidité !
Oui une vidéo sur la fluidité m'intéresse please 🤓
Merci pour tes vidéos, elles sont inspirantes et sont une grande source de connaissances, et toujours avec ta bonne humeur ça fait plaisir :)
fluidité fluidité fluidité, oui oui oui on veut.
J'ai encore appris de toi. Thanks
Très très intéressant, ça a clarifié pas mal e choses pour moi qui suit plutôt dev back !
Bonjour oui je souhaiterais bien une vidéo sur la fluiditer stp
Et merci pour tout le contenu !! :)
Super vidéo, ce sérait vraiment cool une vidéo sur la fluidité. Je débute alors ça m'intéresse énormément
Hello, je trouve que tes explications sont très clair !
Je ne comprendrai jamais pourquoi des gens pour gagner du temps qui perdront par la suite, réduisent la qualité de leurs codes pour implanter du bootstrap. Ce même import que je trouve horrible et que le CSS pur est beaucoup mieux et plus flexible !
Après tu m'auras appris le Mobile-First car j'ai toujours dev Desktop-First ...
Pour les breakpoint j'ai toujours mis des transitions simple pour ne pas perdre en fluidité !
Voilà continue je kiff ton travail !
Tu peux importer que "grid" de bootstrap et pas tout bootstrap, la grid est bien foutue de base pas besoin de refaire à la main avec ses variables, et si tu fais du sass les mixins sont déjà présentes et très simple à utiliser. J'utilise uniquement bootstrap pour ça et non pour les composants, très simple à surcharger également en sass si on veut changer des variables.
Sans ça, à termes tu refais tes règles, mixins, variables, media queries... et donc ça revient au même
Je suis pour une vidéo dédié au fluide design !
Oui je veux une video sur la fluidité
Déjà simplement merci pour ce contenu très intéressant et oui pour une vidéo sur la fluidité. Il existe effectivement un terme mais aucun souvenir 😭😂
Par ce commentaire je te fais savoir qu'une vidéo sur la fluidité (F. L. uidité) m'interesse !! Merci pour tes vidéo t'as chaine est une mine d'or pour les débutant !!!
Si c'est l'ouverture des demandes, je vais en faire une sur d'autres points : la gestion des user stories en front. Tu ne bosses que sur maquette ou bien il y a des demandes spécifiques ?
Deuxième demande : tu as dit que l'intégration, c'était pas la majeure partie du dev front mais qu'il fallait aussi faire attention à l'opti, etc. Tu pourrai faire une vidéo là dessus ? C'est super intéressant mais on trouve souvent que des trucs "visuels" sur les chaines YT de code, car plus impressionnant.
Merci bien :)
Oui une vidéo sur la fluidité stp :)
Ça serait cool la vidéo sur la fluidité !
Merci à toiiii
Salut! Merci pour ta vidéo ça m’aide beaucoup, je veux bien une vidéo sur la fluidité ;))
Salut benjamin,
Toujours aussi instructives tes vidéos 😊
Ça serait vraiment sympa une vidéo sur la fluidité dans les sites web 😊 stp
Feanchement j’suis chaud d’avoir une vidéo sur la fluidité
Le "fluide design" me parait tellement plus naturel et j'ai toujours trouvé ça hyper frustrant les breakpoints. On tends quand même à avoir de plus en plus de facilité à mettre ça en place, avec les flexbox notamment. Pour moi ça devrait être la norme pour finalement remplacer totalement les breakpoints afin de s'adapter à 100% des devices. Donc très chaud pour une vidéo la dessus !
Et concernant le mobile first, je suis d'accord avec toi dans la majorité des cas ça évite d'avoir à remettre des propriétés a leur état initial.
Mais des fois il peut arriver l'inverse. C'est en desktop que les propriétés sont a leur état initial.
Du coup le mieux selon moi et de définir par défaut les règles communes et dans les breakpoints min ou max les règles spécifiques et fessant en sorte de ne pas remettre les valeurs initiales : display:block; margin:0; position:static...
3:02 🤣Anti-bootstrap
Très intéressant, merci !
C'est dit avec quel voix ?
😂
Ça serait sympa une vidéo sur la fluidité !
Oui pour la vidéo sur la fluidité ^^ je suis intégrateur et j'avoue que c'est une problématique quotidienne
Après au moins 2ans de travail tous dev qui se respect commence a détesté bootstrap.
Merci pour cet aparthé latin, tu gères. Interessé par ta fluidité.