l3m website

Le texte que vous lisez actuellement est écrit en markdown !

Il m'est arrivé un truc un peu bizarre cette année 2021. Je voulais écrire des articles sur mon blog, commencer à faire des récap de randos, parler de programmes, de veille, présenter un superbe projet top secret...

Mais l'idée même d'écrire me fatiguait. Et j'étais découragé. Et je n'écrivais pas. Et le dernier post date de septembre dernier.

Le problème

J'aime bien écrire. J'ai commencé à lire très jeune, et j'ai retenu énormément de tournures de phrases rigolotes que j'aime bien replacer régulièrement. Mais je n'aime pas les choses compliquées (hé, je suis développeur. Mon but est de simplifier des choses compliquées).

Écrire sur ce blog était compliqué, à cause de l'éditeur de texte que j'avais voulu écrire tout seul comme un grand lorsque j'avais entrepris la tâche de recréer ce site (on est à la V5 là).

En effet ; cet éditeur n'était pas pratique à utiliser ; c'était une simple div contenant l'attribut contenteditable à True.

Qu'est-ce que ça veut dire ?

Pour les quelques personnes qui se sont retrouvées ici et qui ne connaissent pas vraiment le HTML et sans rentrer dans les détails, une div c'est une balise qui peut contenir n'importe quoi comme contenu (du texte, des images, des liens, d'autres divs).

L'attribut contenteditable permet de rendre une div éditable dans le navigateur (vous pouvez interagir avec, coller du contenu dedans, tout ça). Vous pouvez tester ça directement ici :

J'avais donc ma jolie div dans laquelle je pouvais écrire du texte, et pour me simplifier la vie j'avais aussi rajouté deux éléments : une barre avec des boutons dedans et une textarea qui affiche le contenu sous forme de code.

La barre avec les boutons (nommée wysiwyg.php dans ce projet, pour What You See Is What You Get) me permettait d'appliquer des effets de style & de syntaxe sur le contenu que j'écrivais. Je cliquais, et voilà que j'avais un titre ! Je cliquais sur un autre bouton, et j'avais un prompt qui me demandait l'url d'une image avant de l'insérer là où se trouvais mon curseur dans ma div remplie de contenu !

La textarea quand à elle me permettait de voir le code "final", ce qui serait stocké dans la base de données. Du moins c'est ce que je croyais.

En haut la textarea avec le code html, en dessous la div éditable (on voit mon curseur) et les boutons sensés m'aider.

C'est pas au point vot' truc là msieur !

Les boutons wysiwyg n'étaient pas au point, et je n'ai jamais voulu passer du temps à débugger tout ça. Donc le contenu n'étais pas mis en forme comme il fallait, j'avais des duplications de tags, bref c'était la cata.

J'agrandissais donc ma textarea, et j'allais fouiller dans les tags pour copier des morceaux de code, les coller ailleurs, supprimer des divs, rajouter des balises italique...

Sans coloration, ni saut de ligne.

Oui parce que mon code js dégueu qui prenait le contenu de ma div pour la mettre dans la textarea ne faisait pas de miracles, et que Firefox permet bien de modifier le contenu d'une div, mais c'est un peu sale et très aléatoire ; tout est plus ou moins sur la même ligne, quand on colle du contenu issu d'un autre site le style appliqué au contenu est collé avec (c'est pour ça que vous avez de la couleur dans le code de l'article pour modifier ses icônes de dossiers je collais le texte de mon terminal (ou de vscode je sais plus trop), et la couleur était préservée et insérée sous forme de tag html !).

Je passais donc 1/4 heure à écrire mon joli contenu, puis je passais ensuit 1/2 heure à éditer mon contenu pour qu'il ressemble à ce à quoi j'avais envie qu'il ressemble. Si j'avais le malheur de recharger la page après un gros article (plus d'une heure de rédaction et 2 d'édition) et que j'étais déconnecté, alors je venais de perdre avec succès trois heures de ma vie à écrire du texte pour rien.

J'avais donc peur d'écrire du contenu que je risquais de perdre, et j'avais aussi peur de devoir passer des heures à éditer à la main du html dans une petite zone de la page (c'est absolument décourageant).

Du coup voilà, j'ai succombé, j'ai installé Parsedown dans mon projet, j'ai modifié quelques lignes et supprimé quelques fichier dans les sources de mon site, et maintenant je peux enfin écrire du contenu dans mes notes perso (en utilisant n.py évidemment), puis copier/coller tout ça une fois que je suis satisfait sur mon site, et envoyer le message.

Ça a pas été trop compliqué ?

• J'avais peur de devoir faire des modifications à ma base de données, mais non.
• J'avais peur que l'ancien contenu stocké en base (avec les tags html échappés) ne puisse plus bien s'afficher, mais en fait non.
• J'avais peur que Parsedown ne fonctionne pas bien, mais en fait non.
• J'avais peur qu'il faille que je modifie en profondeur le code de ce site, et que je revoie sa manière de fonctionner, mais en fait ça a été (j'ai fait la plus grosse partie des modifs entre midi et deux pendant la pause).

Au final j'ai copié/collé un fichier, j'ai supprimé quelques fichiers, j'ai modifié quelques lignes de code, j'ai mis à jour sur le serveur, et ça tourne.

J'adore ce genre de moments où tout fonctionne bien :)