Ménage de printemps pour la SheevaBoite

Aux débuts de la SheevaBoite, je changeais de design tous les ans, clairement je n’ai plus le temps de faire cela. Mais ces derniers jours, j’ai voulu faire un petit rafraichissement du design de la SheevaBoite, car depuis 10 ans le design était resté le même.

Le résultat de ce rafraichissement, ce sont quelques changements esthétiques mais une chose en entrainant une autre je me suis lancé dans pas mal de modifications qui ne sont pas forcément visibles. Voici une petite image comparative du site avant/après.

Comme vous pouvez le constater, pas d’énormes changements car je pense que c’est vraiment un layout qui me plait.

Changements visuels #

Vous l’aurez vu avec l’image précédente, les couleurs ont changées ce qui a permis d’améliorer grandement le contraste pour rendre le site plus accessible et un peu moins “pastel”.

Le second changement est lié au bandeau de navigation, j’ai ajouté un lien vers le flux RSS et je voulais le rendre plus discret lorsque l’on arrive sur une page mais je ne voulais pas qu’il reste gris une fois que l’utilisateur a scrollé pour le remettre en blanc. J’ai donc inliné un peu de code JS directement dans le footer, cela ajoute 198 octets à chaque page mais évite une requête pour si peu.
Voici le snippet utilisé pour obtenir l’effet de changement de la navigation :

d=document;i=d.querySelector('.wrapper--intro'),h=d.querySelector('.wrapper--navigation'),
o=new IntersectionObserver(e=>{h.style.background=e[0].isIntersecting?'transparent':'#FFF'});
o.observe(i)

À la base j’hésitais à faire le changement car il nécessitait d’ajouter un peu de JS, mais je trouvais le résultat pas mal et comme cela n’était qu’un progressive enhancements ce qui n’impacte pas les navigateurs sans JS, je me suis dit pourquoi pas.

Enfin le dernier point visible se trouve dans les pages des archives, lorsque l’on scroll le header de la section reste affiché en position sticky.Y’a encore moyen d’améliorer cette page mais je le ferai une autre fois.

Changements sous le capot #

C’est ici que les gros changements se sont produits. Premièrement, j’ai mis à jour Hugo avec la dernière version, ce qui fait que j’ai du changer mon DockerFile pour utiliser les nouvelles images d’HugoMods. Cette mise à jour m’a obligé de migrer vers DartSass pour mes styles, corriger des petits détails de configuration et j’en ai profité pour faire un peu de ménage dans les selecteurs inutilisés et non-optimisés.

L’autre changement majeur est pour les images. Depuis longtemps je voulais optimisez mes images au moment du build et c’est enfin fait. Maintenant, les images sont au format webp (avec bien sur un fallback vers l’image au format original), ce qui est bon pour les performances du site. La très bonne surprise étant que le temps de build n’a pas beaucoup augmenté. En local le premier démarrage prend 2.5 secondes au lieu 0.5 seconde et sur la CI le build complet prend 7 secondes au lieu 3 secondes.
Proportionnellement c’est une grosse augmentation mais cela n’a pas un gros impact sur le temps de build total qui prend toujours moins d’une minute.

Dans le rang des petits changements, j’utilise les options d’i18n de Hugo pour gérer les dates, j’ai ajouté des rôles ARIA sur les sections puis corrigés des petits problèmes d’accessibilité, amélioré le chargement des images, ajouté des ancres pour les titres, optimisé le code CSS qui highlight le bloc de snippet, ajouté prettier pour le markdown et les template Go, corrigé la page 404 qui était cassée… Bref un bon coup de maintenance !

Le mot de la fin #

Ce n’est pas du tout un redesign, car je ne pense pas que cela soit nécessaire, mais un bon de ménage de printemps qui était nécessaire pour la SheevaBoite. Les pages sont un peu plus light qu’avant même si les pages étaient déjà light, elles le sont encore plus. Le site obtient enfin un score parfait sur Google Page Insights sur la majorité des pages et le score ecoConception sur EcoIndex est encore meilleur qu’avant.

On est prêt pour repartir 10 ans !