Devblog Blank V4 (24/02)
Hey ! 👋
Je suis super heureuse de vous annoncer que : j'ai terminé de coder la nouvelle version du Blank ✨
Le travail est LOIN d'être fini. Je dois désormais m'attaquer à la documentation qui me fait un peu peur, pour être honnête. Je crois que je met la barre un peu haute et je passe autant de temps à me rationnaliser qu'à réellement travailler haha.
BREF, et si je vous montrais les nouveautés ?
LE HUB
Voici à quoi ressemble le nouveau qeel HUB ! J'ai jamais aimé l'appellation "qui est en ligne" donc j'ai profité de cette nouveauté pour renommer la section avec un nom plus pertinent qui reflètent son utilité : l'endroit où sont rassemblés les informations du forum et des membres. Ce qu'il apporte :
Nouvelle apparence
Affichage des avatars des membres actuellement connecté
Compteur du nombre de membre par groupe
Affichage automatique de l'avatar du dernier inscrit
Modification du texte facilité
Nouvelle structure HTML
Pour ce qui est du code qui génère le Hub, j'en parlais déjà dans le précédent devblog.
Aperçu du template terminé
Javascript du plugin
POSTER UN MESSAGE
Cette partie a été complètement refaite et surtout optimisée. Les nouveautés visibles sont minimes mais je peux vous assurer que cette page sera beaucoup plus facile à personnaliser !
Nouveautés :
Aperçu de votre profil lors de la prévisualisation du message (permet de mieux visualiser son message avec les dimensions du profil)
Meilleure hiérarchisation des informations
Cadre des smileys qui s'accorde par défaut au thème sélectionné
Refonte visuel de l'éditeur de texte avec des boutons personnalisables
Aperçu du profil
Ca m'a toujours agacée de pas voir mon message dans les vrais conditions du post (notamment pour poser une fiche), donc voilà un petit ajout de pur confort. A savoir que le bloc de prévisualisions à son propre template donc il est facile de reprendre la structure de vos sujets pour l'appliquer ici ! (avatar pour la démo par @rathmoore)
Aperçu du template
Nouvel éditeur de texte
Je suis particulièrement contente d'avoir enfin un éditeur de texte qui parait un peu plus "moderne". Les icones sont personnalisables comme du texte, ce qui veut dire plus d'harmonie dans vos designs ! J'ai retiré les boutons inutiles pour ne laisser que l'essentiel et aérer un peu la zone. Normalement les codes qui permettent d'ajouter les balises personnalisées fonctionnent toujours !
Javascript pour personnaliser l'éditeur de texte
BARRE DE NAVIGATION
Avant, la navbar était générée avec une seule variable ({GENERATED_NAV_BAR}) ce qui rendait sa personnalisation frustrante. Désormais le HTML est totalement déconstruit et vous pouvez afficher les liens dans l'ordre que vous voulez, horizontalement, verticalement, séparément, ...
Il est également possible de personnaliser l'alerte d'un nouveau MP ! Par défaut, c'est une petite pastille.
SIDEBAR
Tous les éléments "flottants" ont été rassemblé dans la sidebar pour créer un vrai petit menu de profil dans lequel on retrouve Switcheroo et Notiffi. J'y ai également ajouté deux éléments HTML qui permettent d'afficher son propre avatar et son pseudo. Un petit plugin discret que j'ai appelé "Miroir" que vous pouvez mettre n'importe où tant que vous utilisez les bonnes balises HTML !
Aperçu du template dédié à la sidebar
Javascript Miroir
EDITION DE PROFIL
Vous remarquez ? PLUS DE CHAMPS INUTILES !
Fini de voir les champs "genre, date d'anniversaire, humeur" ou encore "facebook, twitter, SKYPE??" alors que personne s'en sert mais que pour une raison inconnu on peut pas retirer. C'est désormais chose faite.
Elles sont juste invisibles mais au moins ça épure la page d'édition de profil !
AMÉLIORATION DU CSS
Tout le CSS a été refait ! Ca m'a permis de l'optimisé à son maximum de retirer presque 400 LIGNES ! Du précieux espace que vous préférez utiliser pour votre design.
La hiérarchisation a été revu et les blocs mieux commentés. Dans la documentation vous aurez accès à un chapitrage des différentes parties ainsi que les templates qui sont concernés.
Pour réussir cet exploit, j'ai dû me résoudre à deux choses :
imposer un CSS de base dans un fichier importé : c'est un fichier libre d'accès, hébergé sur deux plateformes fiables (Github et JSdlvr), qui me permet de mettre tout le CSS "structurel". Un CSS auquel vous aurez peu de chance de toucher car il sert juste à faire ajuster les mises en page de page dont on a pas accès (la page d'inscription et connexion par exemple). Mais aussi pour y mettre tout les indésirables de FA.
créer un CSS utilitaire : parfois, vous avez du code qui se répète beaucoup. Par exemple, pour avoir des avatars carrés bien redimensionnés. J'ai donc créé des class dites "utilitaires" pour les réutiliser partout. Toutes ces class sont aussi dans fichier importé (libre d'accès).
Libre à vous de récupérer les codes de ces deux fichiers importés et les réhéberger de votre côté pour les modifier !
Fichier CSS de base
Fichier CSS utilitaire
MEILLEURE GESTION DU JAVASCRIPT
C'est la partie la plus invisible et la plus technique de cette mise à jour, et pourtant celle qui m'a pris le plus de temps.
J'ai créé une "librairie de code" javascript avec plein de fonction utilitaires que j'ai appelé Blanket (🥁). En gros, j'ai fais une boîte à outils qui permet de créer des scripts plus facilement et plus proprement.
Tout les scripts et plugins du Blank on été réécrit avec ces outils. Ca m'a permis de les améliorer, de pas réécrire des fonctions en double ou en triple, d'avoir une meilleure gestion du debug etc.
Exemple concret : avoir une fonction qui récupère l'avatar des membres pour les afficher ailleurs. Elle est utilité dans Notiffi et le Hub, et puisqu'il s'agit de la même fonction, elle optimise les requêtes faites par votre navigateur et réduit (au possible) le temps de chargement des pages malgré ces deux "gros" plugins qui modifient beaucoup Forumactif.
Je ne ferais pas de tuto sur comment l'utiliser car c'est d'un niveau avancé et je crains que ça serve à trop peu de personne pour le temps que ça prendrait de tout documenté en détails. Si vous êtes néanmoins désireux d'avoir une "démonstration" de comment ça fonctionne, je serais ravie de vous montrer ça sur Discord !
Blanket est un fichier javascript importé de base avec le Blank. Il sera désormais nécessaire de l'avoir pour utiliser les scripts/plugins, que vous utilisez le Blank ou non. Comme pour le CSS, il est libre d'accès et vous pouvez le réhéberger vous-même.
EN VRAC ET FIN
De nombreux éléments de fonctionnalités ont été supprimés dans les templates pour les épurés (encore). Par exemple, il n'est plus possible d'avoir des annonces défilantes ou la petite fenêtre de recherche rapide.
Ce n'est pas définitif, je ferais des tutos à part pour les ajouter. J'ai néanmoins l'impression que les forums qui les utilisent sont trop peu et qu'il est préférable de s'en décharger par défaut.
Et voilà !
Je sais pas si quelqu'un lira ça parce que ce post est gigantesque mais ça me permet de revenir aux nouvelles et de récolter un peu de motivation pour entamer la documentation. De voir des gens intéressés ça me permet toujours de me rappeler que je fais pas ça dans le vide ❤
Pour les vraiment, vraiment, curieux, le code de la V4 est déjà accessible sur Github du Blank, l'onglet "experimental" (lien direct). J'aurais peut-être besoin de quelques testeurs sous peu 👀
