Update de Printemps de IMO : Note Technique & Nouveautés
Ça fait presque six mois que j'ai commencé à revoir la majorité du code de IMO, par besoin de faire le ménage dans tout ce qu'on avait accumulé de version en version, restes de l'ancienne platforme incluse...
(spoiler : le résultat est tout de même un peu chaotique niveau structure de code, mais je dois me faire à l'évidence que c'est quasi inévitable LKJHDSGD)
Avec cette mise à jour, c'était le moment pour moi à titre plus perso de prendre le temps d'expérimenter des choses dont je rêvais jusqu'alors, mais que je n'avais jamais eu les clefs pour les mettre en application 🤓 (et les copines staffiennes me suivent évidemment dans mes délires, force à elles @skatevibetm @primalucerpg)
Jusqu'à présent, les listings présents sur IMO (bottins, listings de métiers, etc...) étaient gérés manuellement, via la modification d'un fichier JSON très brut et connecté ensuite à nos posts de listings en Javascript... je ne rêvais que d'une chose : que toutes ces informations soient enfin centralisées, liées dynamiquement, et surtout, modifiables par les membres eux-mêmes facilement et en temps réel. Je vous entends au dernier rang, on sait ce que ça veut dire : UNE BASE DE DONNÉES !
Grâce au tip très précieux de @code-lab (et un call de deux heures à juste se montrer nos avancées et nos tips respectifs alors qu'on ne se connaissait pas 48h plus tôt... birds of a feather, comme on dit 🙌 - merci encore et quel plaisir d'échanger pour se hyper entre nous !!) - c'est enfin chose faite, et IMO passe donc dans une nouvelle ère (un peu plus) connectée, beep boop 🔥
Continue Reading
Les Nouveautés en Détails
Cette liste n'est pas exactement exhaustive et tout n'est pas dévoilé pour préserver un peu de surprise aux membres et futurs membres (et éviter que ce post ne soit plus long qu'il ne l'est déjà LOL) mais voici les grandes lignes de ce qui va changer un peu notre quotidien sur le forum.
Registre des Personnages et des Joueurs
Notre Registre des Personnages ainsi que les listings associés (bottins, noms, métiers et études, particularités...) sont désormais connectés à une base de données externe afin de pouvoir stocker plus d'informations custom dans le cadre du RP !
Nos membres peuvent donc désormais :
Modifier leur profil de joueur.se, leur statut de présence et leurs multicomptes associés : modifier leur pseudo IRL dans leur profil mettra à jour l'information sur tous leurs comptes ;
Modifier les informations figurant au Registre et dans les Listings de chacun de leurs personnages ;
Gérer les liens, la chronologie et le moodboard de chacun de leurs personnages depuis une interface CRUD - et ces informations peuvent être ensuite automatiquement affichées dans les topics grâce à un bout de code.
Formulaire de modification des informations du Registre
Et en bonus : la BDD et une table spécialement créée pour des events du type nous permet également de rendre autonome le fonctionnement de notre Nanowrimo - plus besoin de mettre à jour les word counts à la mano, les membres peuvent juste ajouter leurs contributions eux-même et la jauge se remplit automatiquement !
Notre QEEL s'offre une seconde peau, inspirée de la sidebar Discord !
Après avoir introduit les statuts de présence dans la MAJ précédente, je n'étais pas très satisfaite par sa performance. Crawl chaque profil FA de chaque personnage pour récupérer un champ de présence et afficher la pastille dans le QEEL prenait un certain temps à charger, et demandait beaucoup trop de ressources de manière générale.
Avec l'introduction de la base de données, on a pu transférer le poids de ce script sur la BDD externe, et éviter le crawling de 50 pages par chargement ! Le QEEL se base sur la liste des membres connectés de FA, mais dans son plus simple appareil - et ajoute ensuite les informations trouvées dans notre Registre (avatar, statut de présence, si le personnage est un membre du staff ou non).
(oui, le total de personnes connecté.e.s a un petit souci de mise à jour désynchronisée, j'ajoute ça à ma pipeline de bug fixes KLJHSGD)
Un fallback vers le profil FA est prévu pour les membres non-validés ou non-recensés, mais ils devraient être assez peu nombreux pour que ça ne demande pas trop de ressources.
De plus, le QEEL ne charge pas sur la page tant que le bouton pour l'ouvrir n'est pas cliqué ! Ça évite non seulement de trop surcharger la homepage du forum, mais aussi de faire tourner un script assez conséquent dans le vent lorsqu'on n'a pas vraiment d'intérêt pour les informations qu'il affiche.
À titre global, c'était aussi une occasion pour nous pour revoir nombre de points d'accessibilité qui laissaient encore trop à désirer sur le forum à notre goût.
L'idée générale : aérer, réorganiser, agrandir, faire respirer (oui même avec mes 15 000 scripts bonus KLJDHSGD).
Exit Userway qui n'est franchement pas utilisé chez nous, et était plus compliqué à implémenter proprement qu'il n'apportait grand chose. On préférait revoir notre copie tant que c'était le bon moment plutôt que de rajouter cette surcouche supplémentaire !
En bonus pour essayer d'alléger les temps de chargement, on a installé également un script de lazyloading qui "offload" les images non-visibles à l'écran et ne les charge que lorsqu'on en a besoin.
On a ajouté également un bouton qui permet de désactiver les animations CSS de background pour les machines qui galèrent un peu plus - et qui potentiellement pourrait même être repensé pour désactiver plus de choses.
Sur les topics, font leur apparition deux options supplémentaires d'affichage :
Le mode lecture qui réduit la taille des profils pour maximiser la largeur des posts ;
Le bouton Taille de Texte, qui permet de changer la taille de police des posts entre 14 et 16px (et garde votre préférence en mémoire).
Mode "Normal" et Mode Lecture des topics
Améliorations et Futures Updates
Évidemment tout ceci vient avec un prix : le chargement est tout à fait acceptable pour quelque chose qui tourne avec autant de Javascript et de données externes, mais on subit un peu de layout shift le temps que les informations arrivent jusqu'à nos pages.
C'est inévitable dans la mesure où on doit se reposer sur quelque chose qui n'est pas natif à FA, il faut faire avec ! Bien que je suis sûre que nombre de mes scripts sont affreusement capillotractés et pourraient être optimisés pour être plus efficaces 🤓
Parmi les idées qui me trottent dans la tête :
Améliorer la relation entre les tables Personnages et Joueurs dans la BDD (actuellement pas très optimale pour la performance) ;
Ajouter la gestion de la monnaie dans la BDD, et connecter la boutique (déjà mise en place via un CMS externe, Prismic, pour gérer les articles) pour créer un système "e-commerce" connecté (panier, checkout, mise à jour des fonds et de l'inventaire du membre...) (slt c mon réflexe pro e-commerce qui prend le dessus)
Ajouter la gestion de la Feuille de Personnage dans la BDD, pour calculer des seuils de lancers de dé dynamiquement, similairement aux feuilles de TTRPG par exemple (déjà en cours en tant que projet personnel en Next.js... je sue des fesses avec DND5e et les calculs conditionnels...)
Améliorer le bouton qui désactive les animations CSS pour proposer une feature complète de "paramètres de performance et accessibilité" plus personnalisables tels que désactiver des scripts, simplifier quelques bouts d'interface pour les connexions moins solides - et les garder en mémoire en localstorage également.
Peut-être même un jour ajouter le plug-in de générateur de fiche de présentation introduit récemment sur le Blank Theme de @code-lab... un jour...
Si vous avez lu ce billet jusque lĂ , bravo et merci !
J'aimerais dire que je transformerai tout ceci en tutoriels un jour, malheureusement en plus de la complexité des scripts, c'est tellement de travail de customisation, de formulaires, d'informations propres à notre forum, que ce serait difficile de rendre la chose "universelle".
J'espère en tous cas que l'introduction de nouvelles idées sur nos forums pourra inspirer d'autres codeur.se.s et designer.s à hacker, explorer et créer d'autres choses sur FA !
Si vous vous lancez là -dedans, taggez moi dans le résultat, je serai curieuse de voir votre travail 🔥
blakekathryn
vaporwave
discoholicmusic
stormborns
andulkaphoto
titsay
germansingergirl
pixelskylines
origamiaround
