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 ?
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 :
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é
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é
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 !
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
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)
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
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.
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
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 !
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 !
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.
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.
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 đ
