/ Technique

if(Fantomas.performance >> Gutenberg.performance) go Ghost ;

Nous y voilà enfin : l'hésitation a laissé place à la détermination et c'est avec fierté, cher Net Citizen, que j'ai finalement largué WordPress pour Ghost. Ce post résume grossièrement les grandes lignes des changements effectués et à venir.


Mais, que se passe-t-il ? Qu'est-ce qui se passe ?

Presse et doléances

Comme je l'avais laissé entendre en avril dans un billet rapide sur mon ancien blog, voilà quelques temps déjà que WordPress me décevait : Automattic Inc., la corporation derrière ce CMS, a pris la décision regrettable de brider certaines fonctionnalités de son bébé en les migrant sur son plugin JetPack, dont le but initial était simplement de connecter les blogs auto-hébergés aux serveurs de WordPress.com. J'aimais cette idée : entre centralisation et décentralisation, il s'agissait de prendre le meilleur des deux mondes.

Malheureusement, pour inciter les utilisateurs à opter pour JetPack, Automattic a choisi de limiter arbitrairement certaines fonctionnalités à son plugin, alors qu'elles auraient pu être facilement intégrées au CMS de base (visibilité des widgets, carousels, ...). Rajoutez à cela une optimisation du code "améliorable" (kof kof), qui condamnait les blogs WordPress à n'être que des usines à gaz, et vous comprendrez la nécessité de changer de crèmerie. C'est désormais chose faite.

Au bout du tunnel, le fantôme

Ghost est une plateforme de blogging qui fait de plus en plus parler d'elle. Pour se démarquer de WordPress, elle est bâtie sur une base technique moderne et standard (NodeJS, Handlebars), se limite à la production de texte (n'espérez pas l'utiliser pour votre magasin en ligne) et se veut par conséquent bien plus véloce que sa concurrente.

Après quelques premières tentatives difficiles (trouver un hébergeur local qui accepte NodeJS, ce n'est pas une sinécure), je pense avoir trouvé un hébergeur plus ou moins à même de servir Ghost d'une manière assez stable. Cependant, à l'heure où j'écris ces lignes, la situation est encore loin d'être parfaite, d'où l'utilisation d'une adresse alternative et le fait que mon précédent blog est toujours en ligne.

Ienpw le progressiste, Anubisarchives le conservateur

C'est désormais ainsi que les choses fonctionneront : l'adresse ienpw.ch pointera vers les versions en développement de mes projets / programmes, et anubisarchives.com redirigera vers les versions stables. Il faudra encore quelques mois avant que cette version Ghost ne soit réellement fonctionnelle.

Le nouveau blog

Ainsi, Ghost se veut particulièrement minimaliste. Exit, les pages pour chaque fichier Média que vous uploadez. Oubliées, les catégories de billets. Au feu, les plugins mal finis par millier ! Pour toute infrastructure, Ghost propose un éditeur de message au format Markdown, une dizaine d'options pour la configuration du blog, quelques fonctionnalités "labs" et une gestion du profil des auteurs plutôt expéditive.

||MarkDown, c'est sympa, mais ça reste limité. Pour réintroduire certaines fonctionnalités développées pour WordPress, j'ai ajouté dans mon thème un parser Javascript. Par exemple, les lignes que vous lisez présentement sont dynamiquement ajoutées dans la marge.

Ce CMS s'adresse donc à deux personnes:

  • Celles qui veulent simplement blogger
  • Celles qui aiment développer des thèmes et des applications sans s'embarrasser des contraintes de WordPress

Ça tombe bien. Je fais partie des deux catégories.

Le nouveau thème

Le nouveau thème a trois principes : (1) être plus aéré que l'ancien, (2) Ne pas s'empêtrer de la rétrocompatibilité avec de vieux navigateurs qui toussotent et (3) proposer une navigation plus cohérente.

Le premier principe est subjectif, mais j'ai tenté de l'atteindre en réduisant les couleurs sombres et en employant une police plus fine. Madame et moi ne sommes pas entièrement satisfaits des formes rondes dans l'en-tête du site, aussi sont-elles susceptibles de changer pour quelque chose de très différent prochainement. En revanche, les couleurs me parlent beaucoup plus : elles risquent de rester en place.

Les navigateurs obsolètes risquent de souffrir en passant sur mon blog : attendez-vous à quelques (sérieuses) surprises si vous employez une navigateur vieux d'environ six mois. Pour les détails techniques de certains points potentiellement problématiques :

  • l'utilisation de display: flex permet d'afficher trois colonnes de tailles différentes (celle du centre ayant une taille fixe, les deux autres non) sans recourir à des hacks dégueulasses ou du Javascript.
  • l'ombre portée dynamique sur l'en-tête montre l'état d'avancement du scrolling vertical (certains navigateurs ne s'embarrassant plus de ce détail). Pour respecter le la transparence du fichier PNG qui sert de background, il a fallu utiliser un effet de filtre CSS qui ne fonctionne même sur tous les navigateurs. Au pire, vous ne pourrez simplement pas la voir. Son déplacement est assuré par KnockoutJS.
  • Certaines pseudoclasses CSS sont employées pour sélectionner des éléments spécifiques du DOM. Ainsi, la disposition "arrow-box" que j'emploie sur mes articles en lien avec les images s'effectue d'une manière bien plus simple qu'auparavant. Malheureusement, l'implémentation des pseudoclasses varient grandement en fonction des navigateurs et de leurs versions.
  • le parsing JS du code est dynamique. Il repose sur KnockoutJS et jQuery, aussi devrait-il fonctionner avec tous les navigateurs à peu près respectables, mais on n'est jamais à l'abri d'une mauvaises surprise.

Finalement, la navigation a été considérablement simplifiée : mon blog est composé d'une partie "ludique" à destination des rôlistes et des gamers, d'une partie "artistique" pour les wannabe dessinateurs/trices et d'une partie technique s'intéressant généralement aux technologies web. Les liens vers mes autres sites ont été (temporairement) évincés des pages du blog.

Sans grande surprise, j'en ai également profité pour perfectionner le code de tracking de Piwik. En vrac, voici les nouveautés :

  • Si l'onglet du blog n'est pas actif, le temps passé à lire l'article n'est pas pris en compte. C'est une solution partielle au problème des visiteurs qui ouvrent de nombreux onglets et les visitent les uns après les autres, quitte à le faire sur plusieurs heures.
  • Les variables personnalisées n'étaient que partiellement fonctionnelles, en raison d'une mauvaise compréhension du fonctionnement de Piwik. Le problème est désormais réglé !
  • Une fois la lecture finie, un formulaire rudimentaire vient s'enquérir de la satisfaction des lecteurs/trices. En effet : grâce à Piwik, j'ai pu observer une chute impressionnante du taux de rebond depuis l'instauration du précédent thème sur WordPress (août 2014), mais cette avancée ne me permettait pas d'avoir un feedback qualitatif sur mes articles. C'est désormais chose faite : lorsque vous scrollez au bas d'un article après un certain temps de lecture (indiqué dans l'en-tête de chaque article), une petite fenêtre flottante apparaît au bas de la page, avec une question aléatoire parmi trois (elles portent sur la qualité de rédaction, sur l'approbation et sur l'utilité de l'article). À terme, je pourrai différencier les articles appréciés (lus + appréciés), les articles sans intérêt (pas lus et inutiles) et les articles polémiques (lus + pas appréciés).

ToDo List

Il reste bien du travail avant que ce blog ne soit réellement en production. Je suis d'ailleurs preneur, si jamais vous aviez des conseils pour son amélioration (en attendant l'implémentation des commentaires, vous pouvez me répondre sur Twitter).

  • Commentaires : Ghost ne propose pas de système de commentaires et ne le fera jamais. À défaut, les concepteurs proposent d'utiliser Disqus, mais ce site rentre dans la liste des trop nombreux cloîtres ultra-centralisés du web où les utilisateurs sont disséqués, analysés et vendus aux enchères (pardon: pas les "utilisateurs", mais simplement toutes les données qu'ils peuvent lâcher sans s'en rendre compte). Il est possible de lier Ghost à NodeBB, un forum type phpBB2 en plus moderne. J'avais fait une première expérience plutôt concluante, mais le serveur avait du mal à garder le forum en ligne. À réessayer prochainement ! UPDATE : Les commentaires fonctionnent. Comme précédemment, ils sont liés à un forum NodeBB.
  • Stabilité du serveur : encore plus problématique que l'absence de commentaires, la réactivité du blog est inquiétante. Parfois ultra-véloce, il a tendance à s'endormir, voire à sortir des erreurs 504 sans que je ne comprenne pourquoi. UPDATE : après avoir viré tous les processus parasites sur mon hébergement actuel, le blog tourne déjà mieux. En revanche, il tend à s'endormir toujours un peu et je pense que tous les sites de l'OTS vont passer chez un fournisseur type DitigalOcean ou CloudSigma.
  • Thème graphique : le thème graphique nécessite énormément de retouches, à commencer par une version responsive digne de ce nom, puis d'un système permettant de charger des images miniatures plutôt que les versions larges rétrécies (Ghost ne gère pas non plus cet aspect, et c'est autrement plus problématique que le reste). Les balises Meta pour le SEO et la compression des fichiers source seront également à envisager, afin de ne pas perdre des bonnes idées présentes sur WordPress. Évidemment, les polices Google - actuellement utilisées le temps d'en trouver une convenable - seront aimablement "raccompagnées à la sortie du blog" dès que possible.
  • Migration des articles : vous l'aurez sans doute constater, la migration des articles de mon ancien blog est loin d'être terminée. J'essayerai d'en amener 3-4 par jours.

Chaque année, les Archives d'Anubis reçoivent un peu de love. Cette fois-ci, il ne s'agit pas seulement de cosmétique, mais bien d'un changement de fond. Comme le Web ne s'est pas bâti en un jour, il faudra encore du temps avant que tout fonctionne parfaitement. Objectif pour une version finale : horizon 2016.

Sutay tunedulu

Pierre Vanhulst

Pierre Vanhulst

PhD et Assistant de recherche au sein de l'institut Human-IST (Fribourg) et du World Trade Institute (Berne). Fervent rôliste depuis 1996.

Read More