Ét.Nadji.fr/

Du code, des mots, des livres.

Comment ce site est fait

Étienne Nadji
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
      1. Cifereldo
      2. Autres modules
    4. make
    5. Technos marginales
  3. Remarques diverses
  4. Sources

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 (original, mais aussi très classique).

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éel de la page. Si vous constatez un problème d’accessibilité, contactez-moi.

Il n’y a pas de publicité ni de traqueurs sur ce site, et il n’y en aura jamais.

É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 sociaux (sauf exceptions2) étant considérés comme non-avenus.

Usage de logiciels libres 🔗

L’intégralité du site a été conçue, codée, testé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 trois emplois de Javascript, 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.

Du texte vu dans un navigateur en mode texte.
[Une vielle version de] 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.

Ce qui suit 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 🔗

Cifereldo 🔗

Initialement, les pages de ce site étaient générées via plusieurs scripts Python, utilisant des modules tiers (cf. paragraphes suivants).

Pour simplifier, encadrer le code, faciliter la modification des contenus, j’ai codé la librairie Cifereldo qui est une sorte de cadriciel pour créer des chaines éditoriales. Cifereldo n’est pas en soi un générateur de site statique (quoi qu’on puisse effectivement s’en servir ainsi), est aussi un genre de make

Remarque:
Cela a aussi permis d’optimiser certaines choses, comme faire en sorte que certaines ressources soient lues une seule fois… Typiquement, la feuille XSLT des billets de blog était ouverte et analysée à chaque billet… Forcément la génération du blog est devenue plus rapide…

Autres modules 🔗

Le code Python générant le site emploie également :

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 la gestion des dates avec datetime5, faisant partie de 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. Auparavant, ce dernier servait à exécuter les multiples scripts Python ; à present, il sert surtout à nettoyer des dossiers et lancer le script Python / Cifereldo avec des paramètres.

Technos marginales 🔗

Trois scripts Javascript sont employés. Ces scripts ne sont pas obfusqués. Si vous ne me croyez pas quant à leur fonction, vous pouvez lire leur code via votre navigateur, les outils de développement de votre navigateur. Leur désactivation n’entraine aucune perte de fonctionnalité, ni d’effets indésirables pour l’internaute :

  1. 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. Code source.
  2. Pour renvoyer l’internaute venant de LinkedIn [sic] sur mon curriculum vitae, puisqu’en toute logique, on n’utilise pas LinkedIn pour renvoyer vers des images de chats, fussent-ils majestueux, et moi, j’ai un loyer à payer. Code source.
  3. Pour renvoyer l’internaute à la version HTTPS de la page si jamais ce dernier navigue sur la version HTTP. Code source.

Enfin, en vertu du principe que la meilleure collecte de (méta)données personnelles est celle qui n’existe pas, l’emploi de ces scripts n’entraîne aucune analyse supplémentaire à leur fonction, aucune conservation de données.

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.

Mise à jour (Mars 2019)

Réécriture intégrale de Paĝodono → Shoebird.

Mon agrégateur de liens, Shoebird, 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 à tout Internet 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 JS 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, et des messages Jabber (XMPP). Pour autant, puisque je fais de la modération a priori, ce n’est parce que vous employez un réseau social libre / 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. J’entends par là, que je peux analyser mon contenu, pas du contenu produit par l’internaute, pour la bonne raison que je ne collecte rien. Par ailleurs, 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. J’ai donc un merveilleux élément XML <cul/>.  

Commentaires

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