Voilà voilà, mon blog passe d'une application JavaScript simple page faite maison (NE PAS REGARDER LE CODE) à un hybride génération serveur et application simple page créé avec Nuxt.

Bon en vrai j'ai zappé le serveur et utilise la génération statique de pages.

Pas de vieux process node en plus, le tout est toujours basé sur la même API qui se trouve toujours publiquement sur api.dkvz.eu.

Le seul soucis étant que je suis censé relancer la génération statique à chaque modification du contenu du blog et qu'un seul lien mort provoque son crouttage prématuré.

Ce qui n'est pas fantastique, mais on va s'en sortir. J'ai déjà un magnifique script shell de déploiement que je lance manuellement pour le moment.

Je ferai un plus gros article racontant tous mes déboires, regrets et exploits ultérieurement.

L'ancien site est toujours dispo sur oldsite-2018.dkvz.eu.

Même s'il est écrit en vieux JavaScript de la muerte avec des var partout, il n'y a aucun framework et l'API du DOM est utilisée en direct pour transformer le contenu avec un système de template improvisé (largement épaulé par Webpack — Qui se souvient de Webpack 😂?).

Du coup l'ancien site est toujours plutôt réactif. Son principal facteur de ralentissement étant un framework CSS (oui c'était la mode avant que tout le monde utilise Tailwind) nommé Materialize, lequel inclus aussi ce bon vieux jQuery.

Pour le prochain blog, j'ai commencé par me dire que j'allais écrire absolument tout le CSS en partant de 0. Parce que le CSS, j'adore ça.

Et je vais aussi le faire avec les conventions BEM. Si vous savez pas ce que c'est, c'est pas grave parce que c'est mort aussi.

Je me retrouve juste avec des noms de classe à rallonge qu'il faudra que je nettoie un jour.

J'ai aussi découvert ces "nouveautés" en CSS comme les Layers que j'ajouterai à la hâte avec plaisir puisque ça permet de déspagettifier une partie du bourzouf.

Au final le paquet de CSS chargé avant le premier rendu est beaucoup plus petit que celui de l'ancien site mais j'ai encore des optimisations à tester pour ne pas tout charger sur la page d'accueil, justement.

Cette même page d'accueil est désormais bien plus compacte sur grand écran, un choix stratégique discutable mais en même temps qu'est-ce qui n'est pas discutable dans toute cette histoire?

Et de toutes façons tout le monde est sur mobile. Et ça m'ennuie toujours autant.

J'ai beau tout tester en mettant mon navigateur en tout petit et en utilisant le mode "responsive" depuis l'inspecteur, le résultat est toujours tout foireux sur un vrai mobile en raison des barres qui apparaissent en dessous et au dessus dans l'interface des navigateurs mobiles, et le clavier qui occupe 80% de l'écran quand il apparaît et demande de programmer un défilement presque chaque fois qu'on l'utilise.

Finalement je me retrouve avec du pseudo-mobile-first parce que j'ai un media query spécifique pour les "tout petits écrans" (fourre-tout pour mes corrections sales et rapides pour mobile).

Je serais peut-être mieux de demander à une IA de refaire mon CSS surtout que je me suis mis en tête d'avoir un thème clair et un thème sombre ce qui n'a rien simplifié.

De toutes façons j'ai pas le coeur à jeter tout ce que j'ai fait donc je me lance.

Il reste sans doute des bugs et coquilles d'affichage par-ci par-là, même si je n'ai rien Vibe Codé dans cette aventure.

On retrouve:

• Beaucoup trop d'animations, le menu est un peu transparent, son arrière-plan bouge, les liens sont animés sur survol;
• Mon infâme web component img-lightbox (le truc qui s'active quand on clique désormais sur une image) a été imposé en DUR dans la DB; Ce qui n'affecte pas les anciens sites puisqu'ils ignorent simplement l'élément — Il y a par contre quelques améliorations à prévoir dans ce vieux projet ("quelques" est un gentillisme);
• Y a des IntersectionObserver partout pour animer toutes sortes de trucs dans les articles (mon algo est un peu pourri ceci dit lol);
• Le site est fonctionnel avec JavaScript totalement désactivé, il devient juste impossible de rechercher, poster des commentaires, inverser l'ordre des articles et changer le thème clair/sombre;
• Oui cela signifie que le menu n'a pas besoin de JavaScript pour s'afficher, vaguement inspiré par cette très ancienne histoire;
• Fini le scrolling infini partout qui fonctionnait à moitié sur certains écrans géants, la pagination est là comme dans les années 2000 sur PHPNUKE — He ben c'était bien et les robots seront contents;
• L'estimation de temps de lecture des articles par modèle statistique non-intelligent;
• Coloration syntaxique avec Shiki tant côté serveur que client grâce à la magie de Nuxt;
• Des intégrations aux réseaux sociaux qui devraient fonctionner pour de vrai (avec des images moches low rez — on peut pas tout avoir hein).

Le code source est sur mon Github.

J'ai déjà corrigé un GROS tas de bugs depuis la mise en ligne et me suis rendu compte de pas mal de manquements y compris au niveau de la config web du serveur qui n'a du coup rien à voir avec le site.

Non pas que l'ancien site avait un meilleur score, mais le test de conformité web.dev (c'est à peu près la même chose que Lighthouse dans les navigateurs Chrome) m'a permis de réperer pas mal de petits soucis (il s'agit du score pour mobile):

J'arrive à ceci après quelques mineures corrections:

Je dois changer ma manière de charger les styles pour augmenter le score de performance. A noter que le score "mobile" simule le pire téléphone du monde depuis l'internet des chiottes payants d'une aire d'autoroute Belge donc tout le monde a un score un peu moisi.

Pour preuve, voici le score Desktop:

J'ai rencontré quelques gros obstacles turgescents avec Nuxt et me suis senti un peu sale en regarde de l'inefficacité de certaines choses mais au final, j'ai une app mono-page (SPA) qui fonctionne aussi sans JavaScript, avec de vrais fichiers html pour chaque URL.

C'est pas censé être possible.

Quelque part vers la fin du développement j'ai découvert l'existence de SolidJS: encore un autre framework vaguement basé sur React (possède du JSX) sauf qu'il utilise un autre modèle de réactivité qui est beaucoup moins lourd et qui ressemble un peu à Svelte en fait sauf qu'ils prétendent être beaucoup plus rapides que Svelte.

Ceci dit, j'ai déjà eu du mal avec la doc de Nuxt qui ne couvre que moyennement les cas d'utilisation un peu exotiques, SolidStart (le Nuxt de SolidJS) a encore moins d'utilisateurs.

Sans oublier qu'on a une syntaxe tout de même différente de React et que les IA sont ultra entrainées sur React et Next au point que ces technos vont prendre encore plus de place dans l'avenir. Du coup ça m'inquiète un peu pour SolidJS.

Après, j'ai cru comprendre que les signaux sont soit déjà dans React, soit vont finir par y atterrir.

Qui veut voir toute la chronologie de cette aventure qui a des poils qui pousse dessus tellement ça remonte loin?

Personne?

Bon je le pose quand même dans l'ordre plus récent au plus ancien:

• Bouton à bascule en HTML/CSS
• Estimer le temps de lecture d'un texte - Version superfétatoire (et disgressive)
• Web Design: Animation de texte avec l'IntersectionObserver
• Mode sombre facile pour votre site web
• Utiliser l'Intersection Observer pour tous les effets sur défilement
• Avancement de mes aventures de web "designer"
• Réflexions technologiques sur le blog idéal du turfu

Alors bon, c'est pas super beau mais j'ai tout fait moi-même (à part Nuxt bien entendu, ok j'ai pas tout fait moi même), avec chaque ligne de CSS écrite à la main (sauf si c'est écrit en commentaire que je l'ai volée de quelque part).

Je me demande parfois si on aura le "bio" du logiciel, genre certifié 100% imaginé, dessiné et créé par un humain.

Non pas que ça soit le mal d'utiliser des IA. Surtout quand on sait ce qu'on fait.

Je suis surtout moyennement fan du plan "générer un truc qu'on ne comprends absolument pas" avec des IA.

Mais regarde, j'ai même des tests!

Oui, et tu comprends pas ce qu'ils testent.

C'est plus le moment d'apprendre React pour essayer de chopper un job, faut tout miser en sécurité informatique. Ces gens là vont être vachement nécessaire en masse dans pas très longtemps.

On me chuchotte à l'oreillette que je me serais légèrement écarté du sujet. D'accord.