Effet Squelette en CSS/JS

🎓 Tous mes cours sur l'École du Web (pour les obtenir tous d'un coup) : www.ecole-du-w...
📚 Tous mes cours sur UDEMY : liste-des-cour...
🚀 1 Cours gratuit en t'abonnant à ma newsletter :
www.le-designe...
Le lien du Discord : / discord
Ma chaine en Anglais :
/ @thewebschool
Je suis aussi sur la plateforme Tuto.com :
fr.tuto.com/fo...
🔥 Code source : github.com/Zir...

[@EcoleduWeb]

🎓 Tous mes cours sur l'École du Web (pour les obtenir tous d'un coup) : www.ecole-du-web.net/ 📚 Tous mes cours sur UDEMY : liste-des-cours.com/

[@matthieuaubert9447]

Super intéressant merci beaucoup ! Plusieurs petits détails qui ajoutent de la vie, c'est très élégant

[@gillesa290]

Super intéressant et utile. Vivement pour REACT !

[@esperymu2899]

Et merci pour le tuto je les longtemps recherché !😀😊

[@mimozasolalisis73]

Merci beaucoup :) toujours aussi clair et intéressant !

[@jonathanchosson]

J'avoue vivement la version REACT Merci

[@jonathanchosson]

Bon après je me doute que useEffect sera pas loin :-)

[@amadouourybah1442]

Vidéo trop cool ,,,j'ai vraiment apprécié,, merci

[@hu_god6066]

Je trouve que l'utilisation de squelette devient vraiment indispensable et cohérant dans le cas d'une SPA ou d'une application consulté depuis un mobile. Je me suis souvent retrouver dans des coins perdu ou j'avais pas la 4G et du coup une connexion lente, et quand tu clique sur un site, tu commence a lire les infos que tu recherchais et la tu as des images ou du texte qui load au dessus et qui fait ''scroll'' le contenu que tu étais entrain de lire. Merci pour la vidéo, si jamais tu as l'occasion d'en faire une pour React ou Vue c'est avec plaisir !

[@EcoleduWeb]

Oui niveau UX ça permet de faire patienter l'utilisateur dans de meilleures conditions. Et ce dont tu parles s'appelle le CLS(web.dev/cls/) si je m'abuse, c'est lorsqu'un élément vient exploser le contenu après avoir chargé. C'est pris en compte par les "web vitals" de google donc tu as entièrement raison, il faut y faire gaffe. 👍

[@samueloua8653]

Merci!

[@Stefoux]

Excellente explication 😊

[@chlbri]

Super intéressant

[@Digital_mans]

Toujours un plaisir tes vidéos😀

[@LePhenixGD]

Superbe tuto!

[@esperymu2899]

Du coup comment je pourrais récupérer mes donner qui viennent de mon backend (php) avec le js ?

[@syhix]

Merci pour le tutoriel 😊

[@JeanMarcMALECOT]

Salut. Merci à toi de vulgariser ce concept c’est super bien expliqué. Mais pourquoi ne pas remplacer les cards au fur et à mesure et attendre le Load de l’image ? L’effet serait encore plus visible vu la taille des photos

[@EcoleduWeb]

Salut ! Bonne remarque, mais : 1. On reçoit toutes les images d'un coup via l'api, pas au fur et à mesure. 2. Les calculs pour créer et ajouter les éléments un par un dans le DOM seraient couteux en performance.

[@davidcoudray2207]

C'est top et je me demandais aussi comment les gafam faisaient. Perso je suis sur du WordPress / WooCommerce. Le contenu est généré en PHP avec du foreach dans le core (exemple avec une grille de produits) . Je ne vois pas comment faire des squelettes puis ensuite charger le contenu mis à part le faire en Ajax ou depuis l'API... Mais même comme ça j'ai un module de filtre/recherche en Ajax qui risque de buguer si je lui fourni le contenu après coup. Une idée ?

[@JeanMarcMALECOT]

Il faut générer la page de ton template sans contenu ou en version demi contenu et ensuite utiliser l’API de WordPress pour charger le contenu.

[@normioffi]

J'ai une question, utiliser un site internet de codage, genre Glitch, c'est conseiller si j'ai pas d'ordinateur??

[@EcoleduWeb]

Je ne connais pas ce site, et j’imagine qu’il vaut mieux coder avec un ordinateur car avec un portable ça me semble moins pratique. Pas impossible mais moins pratique 👍

[@matthieudantes4129]

merci pour ta vidéo, petite question pk as tu eu besoin de remplacer tes h3 par des p au début de ta vidéo, les blocks h3 ne supportent pas la modification de la width?

[@EcoleduWeb]

Sisi mais j’évite de mettre 3 H3, on préfère plutôt un titre et deux textes, c’est juste de la semantique 👍

[@matthieudantes4129]

@@EcoleduWeb merci pour ta réponse, hate de voir ta prochaine vidéo

[@AshukaMadeIt]

@@EcoleduWeb J'allais poser la même question que Matthieu. Je n'arrive pas à comprendre pourquoi est-ce pour que notre premier .skeleton-text prenne une largeur de 90% on a dû au préalable remplacer les h3 en p. En principe ça devrait pouvoir fonctionner même avec des h3 non !? Je suis bloqué là dessus depuis une vingtaine de minutes sans pouvoir trop comprendre pourquoi ça marche pas.

[@voidsplit2951]

en parlant de seo, mettre un h3 sans h1 et h2 avant c'est pas tip top ;)

[@EcoleduWeb]

Non pas vraiment, les SERP n'y font pas attention, après je suis pour l'organisation sémantique mais ce que je montre est juste un exemple, sans titre, sous-titres etc ...

[@zaxbelhassen5631]

En react stp

[@foxypiratecove37350]

Vanilla ? T'as cru que c'était Minecraft ?

[@EcoleduWeb]

Vanilla est un terme anglais beaucoup utilisé en développement qui veut dire "en utilisant le langage de base, sans Framework/libraries".

[@foxypiratecove37350]

@@EcoleduWeb Je blaguer.