J'ai pris le temps de travailler sur un redesign de mon site.
Le précédent datait de 2014 et avait plutôt bien vieilli. Mais la font-size devenait un peu petite (je porte des lunettes pour lire désormais) alors que la tendance de fond est aux polices bien grosses et bien lisibles.
J'espère que ça te plaît, jeune lecteur rebelle !
Ci-après un éventail de babioles figurant au menu du redesign.
Suppression de Google Analytics
J'avais installé Google Analytics il y a longtemps.
Mais j'ai pu compter sur les doigts d'une main le nombre de fois où je suis allé consulter les statistiques.
Du coup boum, ça dégage !
Le laisser en place aurait requis un bandeau de consentement dégeulasse.
Je ne pouvais m'y résigner tant ces bandeaux ont fucked up le web…
Suppression de la chaîne de build front-end
J'avais mis en place une chaîne de build front-end basée sur Node.js pour pouvoir faire un tas de trucs genre concaténer/compresser les assets etc.
Ça me permettait aussi d'utiliser cssnext, euh postcss-preset-env, euh non, PostCSS Preset Env !
Je l'avais intégrée dans Django à base de surcharge de StaticfilesRunserverCommand et de subprocess.Popen (popopopop) et ça marchait bien.
Mais ça rajoutait de la complexité inutile pour :
- comprendre l'installation après l'avoir oubliée
- conserver la stack front-end à jour
- intégrer la chaîne dans le process de déploiement
Du coup boum, ça dégage aussi !
Quel bonheur de n'avoir que deux fichiers CSS et JavaScript à éditer :)
J'en ai aussi profité pour virer Vue.js qui avait une ou deux versions majeures de retard et qui me servait à afficher les tweets en simili-SPA.
Maintenant les tweets sont en MPA : ici, là ou là-bas par exemple.
Docker
J'en ai profité pour mettre mes projets web persos dans des conteneurs avec Docker Compose.
Ça m'a permis de pouvoir monter en version Python et PostgreSQL sans me prendre la tête avec l'hôte.
Là on tourne en Python 3.10.4 avec PostgreSQL 14, on est bien.
CSS
Le grid layout m'a servi de base à la mise en page afin de pouvoir construire des rangées dont le fond occupe l'intégralité du viewport ou pas. Il en résulte un balisage HTML minimaliste que les connoisseurs apprécieront.
Le flexbox layout est une bénédiction pour nous qui avons dû nous dépatouiller avec les flottants.
J'ai voulu tenter ma chance avec @layer pour implémenter ITCSS mais c'est encore un tout petit peu trop récent pour Safari, j'ai dû faire marche arrière.
J'ai utilisé clamp() pour une taille de police dynamique et c'est vraiment cool. La théorie est expliquée ici. Je ne me suis pas tout cogné, j'ai utilisé deux choses pour définir les tailles de mes polices :
En vrai, le calculateur aurait probablement suffi.
Une autre astuce que j'ai trouvée vraiment cool est Breaking Out With Viewport Units and Calc ! J'ai utilisé cette technique pour mettre en valeur des images SVG ou des tables HTML très larges pour les grands écrans en les faisant dépasser à gauche et à droite de la colonne principale de texte.
La rage est dans le <head>
Nom d'un chien galeux, le contenu de l'en-tête HTML est devenu monstrueux…
Mettre une favicon sur un site web est devenu d'une complexité aberrante…
Sérieusement, c'est abusé tout ce qu'on peut mettre dans l'en-tête HTML.
Vu que je n'utilise quasiment que Twitter, j'ai rajouté quelques Twitter Cards. L'outil de test m'a permi de constater que ça ne fonctionnait pas en TLS 1.3, moi qui voulais être moderne, c'est râpé… Corrige moi ça, Elon Musk :D
Maths
J'ai voulu me remettre à niveau en maths il y a quelques temps. Ça fera l'objet d'un autre billet.
Toujours est-il que je suis reparti à zéro et que je prends pas mal de notes en markdown au fur et à mesure.
Du coup j'ai décidé de les publier sur le site en me disant que ça pourrait aider d'autres personnes.
C'est quelque chose que j'espère pouvoir continuer sur la durée.
Je modifie les notes quand je trouve une meilleure façon d'expliquer quelque chose.
Le markdown est converti à la volée et mis en cache violemment :)
That's all folks
Tout ça pour dire que j'ai simplifié beaucoup de choses et que j'ai axé le redesign sur le contenu, sa lecture, et un doigt de personal branding.
Après toutes ces années, je prends toujours du plaisir à travailler sur mon site perso.
Et ça aussi c'est plutôt cool !
Joint