Ét.Nadji.fr/

Du code, des mots, des livres.

Comment ce site est fait

10/01/2019 à 20h
Je prenais le mot palmier et décidais de le considérer dans deux sens : le sens de gâteau et le sens d’arbre.
Raymond Roussel, Comment j’ai écrit certains de mes livres

Sommaire

  1. Principes généraux
    1. Économie des contenus
    2. Commentaires & modération
    3. Usage de logiciels libres
  2. Technique
    1. XML et XSL
      1. Ce que permet mon schéma XML.
    2. Sass / CSS
    3. Python
    4. make
    5. Technos marginales
  3. Remarques diverses

Abréviations employées

JS
abrège « JavaScript »

Principes généraux

Le site etnadji.fr est un site statique qui n’emploie pas de générateur de site comme Hugo ou Jekyll (pour citer les deux plus connus), mais du code personnel (je n’ose dire « original »).

En termes d’accessibilité Web, j’ai intégré au mieux certaines aides à la navigation, comme le lien « Contenu » situé dans la barre de navigation secondaire, qui amène directement au contenu réél de la page.

Économie des contenus

J’évite dans la mesure du possible de recourir à des images ayant une valeur seulement illustrative. Une image doit appuyer un propos, ou elle est inutile. Cela permet aussi de limiter le poids et la lenteur de chargement de la page1.

Mise à jour (Février 2019)

Plus de détails à ce sujet dans le billet « Cette image sert-elle à quelque chose ? ».

Commentaires & modération

Je n’ai pas intégré de système de commentaires. La plupart des codes-tiers pour intégrer des commentaires ne sont pas très respectueux de la vie privée des internautes. Créer mon propre système de commentaires en dynamique serait trop pénible à maintenir sur le long terme. Les commentaires du blog sont modérés à priori et doivent être envoyés par mail, ceux envoyés via des réseaux sociaux2 étant considérés comme non-avenus.

Usage de logiciels libres

L’intégralité du site a été codée à l’aide de logiciels libres. Mon éditeur de texte est Vim, avec des mappings BÉPO.

Technique

Le code générant etnadji.fr emploie une combinaison de XML & XSL, Sass, Python et make. Il y a deux emplois de Javascripts, mais rien qui ne soit intrusif. Contrairement à certains sites fourrés jusqu’à que ça déborde de JS, voire qui se servent de JS pour fournir le HTML /facepalm, rien ne compromet la lecture de ce site en mode texte.

Ce billet de blog vu dans un navigateur en mode texte
Ce billet, lu dans w3m

XML et XSL

XML structure le contenu et lui garantit une forme de perennité3. Cela sert également à faire des catalogues de contenus (par exemple, la liste des billets du blog).

XSL transforme le contenu brut en du code HTML compatible avec les feuilles CSS du site, et permet de faire des abstractions lors de la rédaction du contenu. Concrètement, écrire :

<wk id="Colophon_(livre)">définition</wk>

Équivaut à faire un lien vers la définition du colophon sur Wikipédia. Le processeur XSL employé est celui de la librairie Python LXML.

Enfin, l’usage conjoint de XML et XSL me permet de produire une version XeLaTeX de mes articles, pour une sortie PDF.

Ce qui est une liste plus détaillée de l’usage de XML, XSL, etc. Vous pouvez passer à Sass / CSS si ces détails ne vous intéressent pas.

Ce que permet mon schéma XML.

Sass / CSS

Le code CSS est généré via le préprocesseur Sass (pour Syntactically Awesome Stylesheets).

La feuille de style consacrée à la coloration des codes sources est une adaptation de celle employée par Pandoc, lui-même s’inspirant de Pygments. Le thème de coloration syntaxique est, sans grande surprise, Solarized.

Python

Les pages du site sont générées à l’aide de plusieurs scripts Python, faisant appel aux modules :

LXML sert à analyser, générer du code XML, à faire des transformations XSL dessus, et, rarement, des statistiques sur le contenu4.

Si le code HTML du contenu est généré par LXML et du XSL, tout le reste de la page passe par le système de gabarits Jinja. Jinja a l’avantage de permettre une forme d’héritage de gabarits, en redéfinissant des blocs de la page.

feedgen génère les flux Atom du site. Idéalement la conversion des contenus en flux Atom pourrait se faire avec XSL, mais datetime5 de la librairie standard de Python est plus pratique.

make

L’ensemble de la génération du site (et d’autres opérations sur le site) est coordonnée par un Makefile.

Technos marginales

Deux script Javascript sont employés. Leur désactivation n’entraine aucune perte de fonctionnalité, ni aucun autre effet indésirable pour l’internaute.

  1. Un script pour déterminer si l’internaute vient de Facebook, Twitter, etc, et lui proposer de supprimer son compte le cas échéant. À noter que ce script ne fait rien d’autre, et ne permet pas d’identifier l’internaute.
  2. Un script pour renvoyer l’internaute à la version HTTPS de la page si jamais ce dernier navigue sur la version HTTP.

Remarques diverses

Plutôt que de faire une requête vers les favicon des sites, concernés, les images du blogroll sont généralement encodées en Base64.

Mon agrégateur de liens, Paĝodono6, est basé sur les technos citées dans ce billet, et s’inspire de Shaarli.

Sources

Notes

  1. Ceux qui prennent l’ADSL ou la fibre pour des faits acquis seront surpris d’apprendre que ma vitesse de connexion à Internet (et de facto, au web) est régulièrement (très) inférieure à 56kb/s. Ce qui fait que même avec des extensions pour bloquer le chargement des publicités et des images, un article un peu consistant sur un site de presse (ou un blog avec du chiant) prend une voire deux minutes à se charger.
  2. Exception faite des réseaux sociaux fédérés (basés sur ActivityPub), comme Mastodon. Pour autant, puisque je fais de la modération à priori, ce n’est parce que vous employez un réseau social fédéré que je vais forcément intégrer votre commentaire à ceux du billet.
  3. Non, le schéma du contenu n’est pas un dérivé de la Text Encoding Initiative .
  4. Je ne fais pas d’analyse de trafic.
  5. Les connaisseurs de Python savent qu’utiliser datetime pour la manipulation des dates avec fuseaux horaires est relativement pénible, mais faire cela en XSL 1.0 est tout bonnement abominable.
  6. Le dépôt se nomme pagxodono parce qu’on peut noter -gx la lettre espéranto -ĝ.
  7. J’ai donc un merveilleux élement XML <cul/>.

Commentaires

Pour commenter ce billet, envoyez un mail sur etnadji (at) eml.cc, ou créez-vous votre blog.