Les outils pour développer efficacement en HTML5 et CSS3

Au quotidien, je ne suis pas développeur Front mais j’aime faire de la veille et je m’intéresse aux jobs de les collaborateurs. Je profite donc de ce billet pour vous partager les outils qui me semblent intéressants pour développer en HTML5 et CSS3.

Configurer Visual Studio Code pour HTML5 CSS3

Visual Studio Code (VS Code) avec les plugins suivants :

HTML CSS Support : offre la completion des id et class css dans votre code html
CSS Peek : pour retrouver la définition de votre css depuis votre code html
Prettier : pour formater votre code dans les règles de l’art à condition d’activer le formatage automatique au moment de la sauvegarde (voir plus bas dans l’article)
Highlight Matching Tag : permet d’identifier les paires de balises ouvrantes et fermantes (un must pour les yeux qui fatiguent)
Todo Highlight : met en évidence les balises TODO: et FIXME: dans votre code (si ça peut éviter de voir ça partir en Prod… 😉
Live Server : lance un serveur local pour tester votre code (pas besoin d’administrer un serveur Apache ou NGINX pour du dev html en local !)

Formater le code avec Prettier

Une fois que Prettier est installé, il faut aller dans Préférences, Paramètres de VSCode et cocher la checkbox devant “Format on Save” (Formater au moment de l’enregistrement).

Ainsi, à chaque fois que vous enregistrez vos modification, Prettier se chargera de formater votre code. C’est super pratique pour travailler en équipe, comme ça le code de tous les développeurs respecte la même indentation, ce qui évite des complications au moment du merge.

Les outils sur le Web

Harmoniser le rendu sur les navigateurs

Dans le but d’aligner le rendu visuel sur les différents navigateurs du marché, je vous conseille d’utiliser la feuille de style normalize.css qui est disponible sur le site officiel Normalize.css.

Choisir parmi les polices (Fonts) Serif, Sans-Serif, Monospace et les autres…

En CSS il existe 5 types de polices (en anglais fonts) / familles de caractères de base : serif, sans serif, cursive, fantasy et monospace.

Les caractères des fonts serif ont de petits traits aux extrémités. Les polices serif ont été utilisées pendant longtemps dans l’édition des livres, magazines et journaux.

Dans la famille des polices sans-serif les caractères n’ont pas ces petits traits (qui sont la caractéristique des polices serif).

Ces deux familles de polices rendent la lecture facile. Pour les titres (quelque soit le niveau), une police serif est généralement un bon choix, car elle sont perçues comme plus imposantes, ce qui aide les lecteurs à mieux identifier la hiérarchie de la page.

La famille de police monospace est une police d’écriture au sein de laquelle chaque caractères y compris les espaces occupent le même espace horizontal que les autres. Dans le monde de l’informatique, les polices monospaces sont par exemple utilisées dans les IDE des développeurs car elles permettent d’avoir du code bien aligné (bien indenté).

Enfin, les familles cursive et fantasy sont moins évidentes à lire. Elles peuvent donner un style à votre page Web mais il faut faire attention à ne pas dégrader la lisibilité quand on les utilise.

Vous pouvez trouver des polices gratuites sur les sites suivants :

Définir la taille des polices et hiérarchiser les titres

Afin de calibrer la tailles des polices sur votre page, vous pouvez obtenir un aperçu et ajuster au besoin la taille des titres et des paragraphes à l’aide du site type-scale.com. Le plus c’est que le site vous génère le CSS à intégrer dans votre feuille de styles !

Agrémenter avec des icônes

Un site plus beau rendra l’expérience de vos visiteurs plus agréable. En plus d’améliorer l’expérience visuelle, choisir les icônes adaptées rendra l’expérience utilisateur plus fluide. Vous pouvez trouver des icônes gratuites sur flaticon.com. fontawesome.com est une librairie d’icônes que vous pouvez également utiliser. Cette librairie offre une version gratuite déjà très fournie.

Si vous ne trouvez pas votre bonheur, il existe des d’alternatives. En voici quelques-unes :

Créer des formes avec vos images

Pour personnaliser davantage votre site, vous pouvez transformer vos images en signalétiques (flèches, polygones, …) à l’ai du site Clippy.

Ajouter des effets en CSS

Vous pouvez utiliser les backdrop filter pour inverser les couleurs d’une image, saturer ou transformer en nuances de gris, flouter, … Toutes les fonctions sont décrites sur le site de Mozilla.

Optimiser avec les Sprites CSS

Pour chaque icône affichées, le navigateur devra réaliser une requête HTTP. Avec une connexion fibre ou une bonne 4G, ces quelques appels seront transparents. Néanmoins, il faut penser à réduire le nombre d’appel pour accélérer le chargement de vos pages. Une des techniques adaptées aux icônes est de fusionner toutes les icônes dans un seul fichier et de n’afficher que la partie qui nous intéresse pour faire apparaître la bonne icône au bon endroit.

Grâce au site cssspritestool.com, vous pouvez uploader vos images pour générer un fichier contenant toutes vos images ainsi que le code CSS qui permettra d’afficher les icônes séparément.

Optimiser avec les Data-URI

Le Data-URI est un schema d’URI qui contient directement des données. Je vous parlais précédemment des CSS Sprites. Une autre option est l’utilisation des Data-URI. Les images sont ainsi encodées en base64 et peuvent être intégrées directement dans votre code. Attention cependant car l’encodage en base 64 génère un code plus lourd d’environ 10% par rapport au poids du fichier image initial. A utiliser avec parcimonie.

En effet, +10% sur une icône qui pèse 4 ou 5Ko est un surplus négligeable. En revanche, +10% sur 500Ko devient tout de suite moins avantageux que de charger l’image elle-même.

Rendez-vous sur CSS Portal pour générer les Data-URI correspondantes à vos images.

Attention : les fichiers images peuvent aussi bénéficier d’un système de cache. De ce fait, le nombre des appels HTTPS à votre serveur sera réduit.

Optimiser les backgrounds avec des images SVG

Au lieu d’utiliser une image JPEG ou PNG pour définir le fond de page de votre site, et si une couleur unie ne vous convient oas, alors je vous invite à utiliser une image au format SVG. Vous pouvez en trouver gratuitement sur svgbackgrounds.com.

WOFF ou WOFF2 ? JPEG ou WebP ? Vérifier la compatibilité avec les différents navigateurs

Pour les polices de caractères dont nous venons de parler, le format WOFF2 est davantage optimisé que son prédécesseur le WOFF. Néanmoins, le format WOFF2 n’est pas supporté par tous les navigateurs.

Il en est de même pour le format d’image WebP. Plus optimisé que les formats JPEG GIF et PNG, le WebP n’est pas forcément supporté par la totalité des navigateurs.

La même problématique se pose avec les nouveaux formats d’images AVIF et JPEG XL qui s’imposeront peut-être au fil du temps.

Pour connaître le taux de support d’un format de fichier (images, fonts, …) ou d’une fonctionnalité par les navigateurs Web, vous pouvez vous rendre sur le site caniuse.com.

Convertir vos fichiers dans des formats optimisés

Maintenant que vous savez qu’une image WebP est plus légère en terme de poids pour une qualité égale à un fichier JPEG, vous mourrez certainement d’envie de convertir vos images dans ce format optimisé. Idem pour les fonts en WOFF2 plutôt qu’en WOFF.

Le site cloudconvert vous offre la possibilité de convertir (presque ?) tous vos fichiers dans (presque ?) tous les formats !

Adapter vos images aux formats d’affichage

Le site responsivebreakpoints.com permet de générer des images adaptées à la navigation sur mobile et sur tablette. C’est pratique dans une logique de responsive design car il devient possible de créer des images adaptées ainsi que le CSS associé et charger la bonne image selon les breaking points que vous aurez définis.

Encore plus de ressources gratuites

Grâce à Sophia qui m’a envoyé un E-Mail sympa, je peux vous partager ce lien vers des ressources gratuites disponibles sur le site Website Planet. Merci à Sophia !