55ème MeetUp WordPress Toulouse du jeudi 2 avril chez Artilect – FabLab.
Programme de la soirée
La revue du web
Mike Lecomte explore le web et nous offre un partage riche et varié de trouvailles exceptionnelles, couvrant tout, des outils aux sites web, en passant par les principes de design et les tendances du moment, apportant à chaque fois un avantage pour tous.
Au menu :
- Unité css relative au viewport : vh, dvh, lvh, svh
- Divi 5 arrive. 2 fois plus de performances ?
- Format d’images : Avif vs WebP
- Jhey et ses prouesses en CSS
- Zip WP : génération d’un site à l’aide d’une IA en 60 secondes
- Astuce dev ACF.
Télécharger le support de la revue [PDF, 1 Mo]
L’inspecteur a des choses à nous apprendre.
L’inspecteur des navigateurs Firefox et Chrome est un outil de développement web intégré permettant aux développeurs d’examiner, modifier et déboguer le code HTML, CSS et JavaScript d’une page web. Il offre des fonctionnalités pour visualiser les modifications en temps réel et optimiser l’expérience utilisateur.
Cet outil complet méritait d’être exploré lors d’un atelier participatif où chacun a pu contribuer et apprendre à travers l’échange de connaissances sur ses fonctionnalités.
L’inspecteur Firefox, partie intégrante des outils de développement de Firefox (Firefox Developer Tools), offre une gamme étendue de fonctionnalités destinées à faciliter le développement et le débogage de pages web. Voici les principales fonctionnalités de l’inspecteur Firefox :
- Inspecteur d’éléments : Permet aux développeurs de voir et de modifier le HTML et le CSS en temps réel. Les utilisateurs peuvent survoler les éléments sur la page pour voir rapidement les styles CSS appliqués et les ajuster directement.
- Boîte à outils de style : Offre une vue détaillée de tous les styles CSS appliqués à un élément sélectionné, y compris les styles calculés, hérités et ceux qui sont annulés par d’autres règles. Les développeurs peuvent modifier les styles directement dans l’éditeur et voir les résultats immédiatement.
- Console Web : Affiche les informations de débogage telles que les logs, les erreurs et les avertissements, et permet aux développeurs d’exécuter des scripts JavaScript directement.
- Débogueur : Permet de mettre des points d’arrêt dans le code JavaScript, d’exécuter le code pas à pas, et d’inspecter les variables pour déboguer le code de manière plus efficace.
- Vue Réseau : Montre toutes les requêtes réseau faites par la page, y compris les temps de chargement et les détails de la requête et de la réponse. C’est utile pour analyser les performances de la page (voir la taille des images, les polices chargées, le nombre de requêtes…)
- Outil de performance : Analyse les performances du site web en enregistrant et en affichant où le temps est dépensé dans le script, les styles de mise en page, le rendu, et d’autres tâches.
- Outil de grille CSS : Aide à visualiser et à déboguer les mises en page CSS Grid, en affichant les lignes de grille directement dans la vue de page.
- Outil Flexbox : Similaire à l’outil de grille, mais pour les layouts Flexbox, facilitant la compréhension et la modification des boîtes flex.
- Adaptateur de responsive design : Teste la réactivité du site web en permettant aux développeurs de simuler différentes tailles d’écran et résolutions.
Ces outils, accessibles via l’inspecteur de Firefox (F12, clic droit > Inspecter ou Ctrl+Maj+C) sont conçus pour aider les développeurs à comprendre, tester et améliorer le comportement et l’apparence des sites web.
Allez plus loin avec la document officielle sur l’inspecteur Firefox [en] ou sur l’inspecteur Chrome [fr].
À la prochaine
Le prochain Meetup aura lieu lundi 6 mai à 18h30 à La Cantine de la Mêlée Numérique, 27, rue d’Aubuisson. Christelle Stasse présentera son retour d’expérience sur l’Éditeur de Site (FSE) de WordPress.
