Mon wiki - informatique:projets

amelioration_de_mon_site

anonymous@undisclosed.example.com (Anonymous) — Mon, 04 Aug 2025 01:46:39 +0000

Amélioration de mon site

Amélioration des performances

Depuis ses débuts, le web s'est alourdi. On a besoin de plus de puissance pour afficher une simple page web que pour lancer Appolo. Je peste régulièrement sur les sites qui mettent trop longtemps avant d'être utilisables. J'ai décidé de me regarder le nombril et d'alléger le contenu de mon site pour qu'il soit plus agréable à utiliser.

Pour m'aider dans cette tâche, j'utilise l'outil PageSpeed Insights¹⁾ ²⁾ de Google. Un autre indicateur pour vérifier l'embonpoint de son site est l'outil Fit on a Floppy³⁾ qui valide si la page appelée peut être stockée sur une disquette.

Compression des données

L'étape la plus facile à mettre en œuvre est la compression des données entre le serveur et le navigateur afin de réduire la quantité de données transférées. J'utilise Apache comme serveur web, j'ai donc configuré mon fichier .htaccess pour qu'il compresse les données compressibles ⁴⁾. Pour cela, j'utilise mod_deflate pour le HTML, le CSS, le JS et le XML ⁵⁾. J'ai donc ajouté les lignes suivantes dans mon fichier :

AddType text/css .css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xml

J'ai ensuite vérifié que le contenu fourni était correctement compressé avec cet outil et que j'avais amélioré mon score sur PageSpeed Insights. C'est concluant, alors on passe à l'étape suivante.

Changement de thème

J'ai troqué le thème bootstrap pour le thème lanyon qui utilise beaucoup moins de fichiers. J'ai du abandonner quelques effets supportés par le précédent thème mais ce n'est pas trop grave car j'y ai gagné en lisibilité et en clareté.

Suppression des vidéos

Nikola permet d'inclure une vidéo Youtube par l'intermédiaire d'un mot-clé. Cela inclus automatiquement le lecteur de vidéo avec son lot de dépendances⁶⁾. Comme l'usage de la vidéo sur mon site est très limité et que dans la plus part des cas, un lien suffit, j'ai remplacé le mot-clé par un lien vers l'original.

C'est un changement très facile qui m'a permis de passer d'un score inférieur à 50 à un score supérieur à 70.

Suppression des appels à Google

Le thème utilisé ⁷⁾ fait des appels à Google pour la récupération des polices de caractères. Comme je ne suis pas fan de faire des appels aux serveurs de Google ⁸⁾, je préfère héberger les polices sur mon serveur. Pour cela, j'ai supprimé la ligne correspondante dans le fichier base_helper.tmpl :

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Serif:400,400italic,700|PT+Sans:400">

Maintenant le site utilise les polices disponibles dans le navigateur. Comme je veux toujours utiliser la police PT, j'ai téléchargé les fichiers TrueType associés dans le répertoire de polices de mon site. J'ai ensuite modifié les fichiers de style pour reproduire ce que faisait Google.

/* latin-ext */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans'), local('PTSans-Regular'), url(../fonts/PT_Sans/PT_Sans-Web-Regular.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans'), local('PTSans-Regular'), url(../fonts/PT_Sans/PT_Sans-Web-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;
    src: local('PT Serif Italic'), local('PTSerif-Italic'), url(../fonts/PT_Serif/PT_Serif-Web-Italic.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;
    src: local('PT Serif Italic'), local('PTSerif-Italic'), url(../fonts/PT_Serif/PT_Serif-Web-Italic.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    src: local('PT Serif'), local('PTSerif-Regular'), url(../fonts/PT_Serif/PT_Serif-Web-Regular.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    src: local('PT Serif'), local('PTSerif-Regular'), url(../fonts/PT_Serif/PT_Serif-Web-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    src: local('PT Serif Bold'), local('PTSerif-Bold'), url(../fonts/PT_Serif/PT_Serif-Web-Bold.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    src: local('PT Serif Bold'), local('PTSerif-Bold'), url(../fonts/PT_Serif/PT_Serif-Web-Bold.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Pour optimiser les temps de chargement, j'ai ajouté une directive dans le fichier .htaccess pour prendre en charge la compression des polices :

AddType font/truetype .ttf
AddOutputFilterByType DEFLATE font/truetype

Ces opérations ne changent pas vraiment la performance générale du site, mais il me permet de ne pas dépendre de Google.

Ajout d'une politique de cache

Une autre façon d'avoir de meilleures performances est d'activer le cache. Toutes les resources n'ont pas la même durée de vie, il faut donc gérer la durée de rétention en cache en fonction du type de ressource. Dans mon cas, j'ai mis une durée de vie de 1 an pour les ressources qui ne devraient pas changer (images, polices, documents), 1 semaine pour les resources qui ne changent que rarement (feuilles de style, script) et 6 heures pour le contenu du site. Pour cela, j'ai ajouté la configuration suivante dans mon fichier .htaccess :

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|ttf)$">
Header set Cache-Control "max-age=31449600, public"
</FilesMatch>
<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</FilesMatch>
<FilesMatch "\.(html|htm|xml)$">
Header set Cache-Control "max-age=32400, must-revalidate"
</FilesMatch>

À partir de ce moment, mon indice de performance est supérieur à 85.

Minimiser le nombre d'appels

Le site utilise plusieurs feuilles de style ainsi que plusieurs fichiers de script. Il est possible de les regrouper ce qui a pour effet de limiter le nombre d'appel, limiter le nombre de compression/décompression et donc de rendre le site plus réactif. Avec nikola, rien de plus simple. Il suffit d'activer la configuration suivante dans le fichier conf.py :

USE_BUNDLES = True

Il faudra, au préalable, installer le paquet webassets pour que cela fonctionne correctement :

pip install webassets

À partir de ce moment, mon indice de performance avoisine les 95.

Attention, pour que les fichiers custom.css et fonts.css soient ajoutés au fichier généré, il faut les ajouter dans le fichier de configuration bundles.

Il faut éviter l'utililation de l'import de fichier en CSS (@import) car cela force le navigateur a charger les fichiers séquentiellement.

Minifier les fichiers

Pour limiter la taille de certains fichiers transférés, il est possible d'en supprimer les espaces non-significatifs ⁹⁾. Pour cela, j'ai utilisé des filtres déclenchés à la fin du traitement de compilation pour traiter les fichiers CSS et les fichiers XML. Comme ces filtres sont fournis avec Nikola, il suffit de les activer dans la configuration. Dans le fichier conf.py, il faut ajouter les lignes suivantes :

FILTERS = {
    ".css": ["filters.cssminify"],
    ".xml": ["filters.xmlminify"],
}

Il est important d'avoir une connexion à Internet car le filtre filters.cssminify utilise un service externe pour supprimer les espaces non-significatifs.

Suppression du JS

J'utilise le javascript uniquement pour l'interprétation du LaTeX situé dans certaines pages. Les autres appels sont donc inutiles. J'ai modifié le thème lanyon pour supprimer tous ces appels :

Suppression de la définition de la méthode late_load_js dans base_helper.tmpl.
Suppression de l'appel conditionnel de javascript pour Internet Explorer 9 dans base_helper.tmpl.
Suppression de l'appel de la méthode late_load_js dans base.tmpl.
Suppression de l'appel de javascript supplémentaire dans base.tmpl.

Amélioration de la sécurité

Après être tombé par hasard sur le site Security Headers¹⁰⁾, je me suis rendu compte que ma note était vraiment basse. En fait, je n'avais jamais prêté attention aux entêtes envoyés par mon serveur et je n'avais même jamais entendu parlé de ces entêtes.

J'ai donc décidé d'y remédier et porter attention à la sécurité de mes visiteurs. Pour cela, j'ai modifié mon fichier .htaccess en ajoutant les directives suivantes :

Header set Content-Security-Policy "default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval' cdnjs.cloudflare.com; font-src 'self' cdnjs.cloudflare.com; img-src 'self' data:; style-src 'self' 'unsafe-inline'; base-uri 'self'; connect-src 'self'; form-action 'self'; media-src 'self'; frame-src embed.diagrams.net; worker-src embed.diagrams.net"
Header set Permissions-Policy "interest-cohort=()"
Header set Referrer-Policy "no-referrer"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options "SAMEORIGIN"

Content-Security-Policy permet de gérer la manière dont les ressources du site peuvent être chargées. Ces permissions sont encore un peu trop large à mon goût car je suis encore obligé d'autoriser cloudflare.com¹¹⁾. Pour plus d'informations, il y a le MDN et le guide de référence. ¹²⁾
Permissions-Policy permet de gérer les autorisations d'accès aux API du navigateur. Ici, je l'ai configuré pour bloquer l'accès à la nouvelle technologie de pistage de Google. Pour plus d'informations, il y a ce site et ce site qui en parlent mieux que je ne pourrais le faire.
Referrer-Policy permet de gérer les informations transmises lors de l'ouverture d'un lien externe au site. Ici, je l'ai configuré pour ne rien envoyer. Pour plus d'informations, il y a le MDN.
Strict-Transport-Security indique au navigateur d'utiliser uniquement HTTPS pour accéder au site. Ici, je l'ai configuré avec la valeur recommandée. Pour plus d'informations, il y a le MDN.
X-Content-Type-Options indique au navigateur de ne pas modifier les types MIME envoyés par le serveur. Pour plus d'informations, il y a le MDN.
X-Frame-Options indique au navigateur si le site peut être inclus dans un autre site. Pour plus d'informations, il y a le MDN.

Amélioration de l'accessibilité

Après avoir fait quelques recherches sur l'accessibilité des sites web, je me suis rendu compte que le mien pouvait être très largement amélioré. Voici la liste des choses que j'ai faite pour améliorer mes scores sur différents outils :

Ajout de description alternative ¹³⁾sur les balises img.
Augmentation du contraste du texte.
Modification des liens pour éviter les redirections permanentes ¹⁴⁾, j'ai modifié l'ensemble des liens dans le fichier conf.py pour qu'ils dirigent vers la vraie URL.
Utilisation d'images en JPG Progressif à l'aide d'un filtre déclenché en fin de traitement. Ce filtre est à configurer dans le fichier conf.py :
```
FILTERS = {
    ".jpg": ["jpegoptim --strip-all --all-progressive %s"],
}
```
Suppression des identifiants dupliqués à l'aide d'un filtre déclenché en fin de traitement. Ce filtre est à configurer dans le fichier conf.py :
```
FILTERS = {
    ".html": ["filters.deduplicate_ids"],
}
```

Pour identifier et corriger les problèmes d'accessibilité de mon site, j'ai utilisé les outils suivants :

¹⁾

PageSpeed Insights - AINW.ORG

²⁾

Attention à autoriser le referer pour pouvoir l'utiliser

³⁾

Fit on a Floppy - AINW.ORG

⁴⁾

on oublie toutes les données déjà optimisées comme les images

⁵⁾

pour le flux RSS

⁶⁾

CSS, JS et trackers

⁷⁾

lanyon

⁸⁾

profilage, etc

⁹⁾

C'est l'action minify en anglais

¹⁰⁾

Security Headers - AINW.ORG

¹¹⁾

Nécessaire pour MathJax jusqu'au jour où j'arrive à le faire fonctionner directement sur mon site

¹²⁾

Cet entête m'a causé quelques soucis car il a été appliqué également sur le wiki. Je n'en ai pas eu conscience jusqu'au moment où j'ai essayé d'y intégrer des vidéos. Il me manquait la règle autorisant les médias, à savoir media-src. Ce fut un beau casse-tête à résoudre.

¹³⁾

Attribut alt de la balise img

¹⁴⁾

HTTP 301 - Wikipedia

carnet_adresses

anonymous@undisclosed.example.com (Anonymous) — Tue, 31 Dec 2024 12:09:09 +0000

Mise en place d'un carnet d'adresse

Il y a quelques années, j'avais mis mon carnet d'adresse en ligne avec PHP Address Book. Mais la solution choisie ne me convenait plus. Voici ce que j'ai fait pour mettre en place quelque chose de plus adapté à mes besoins.

Avec PHP Address Book, j'ai plusieurs fois perdu les adresses de certains de mes contacts. Parfois à cause de l'ergonomie peu adaptée, parfois à cause de vulnérabilités (injection SQL). En bref, ce n'était pas une situation acceptable pour conserver ce genre d'information.

Ma première idée fut de refaire quelque chose de similaire en utilisant Symfony et le bundle EasyAdminBundle. J'utilise ce genre de chose tous les jours, je me suis donc dit que je pourrai faire ça rapidement. J'ai commencé à mettre en place et j'ai obtenu quelque chose de fonctionnel assez facilement. Par contre, ce n'était pas du tout travaillé en terme d'ergonomie et d'interface. Je me suis promis de revenir dessus mais je ne l'ai jamais fait. C'était il y a quelques mois.

En laissant mûrir ça, j'ai commencé à me dire que je n'avais pas besoin d'une application complète pour gérer mes quelques contacts. J'ai listé les choses que devait faire cette liste de contact afin de recentrer mes efforts. Après réflexion, voici ce que j'attends de cette liste :

Imprimable pour pouvoir la conserver dans mon portefeuille.
Modifiable facilement avec un éditeur de texte.
Consultable en ligne (pas besoin d'édition).
Accessible uniquement avec un mot de passe.

De ce fait, je peux avoir une page statique sans avoir besoin ni de base de données ni de scripts.

Je me suis tourné vers TeX pour la génération d'un fichier PDF. Mes besoins étant assez limités, le fichier est extrêmement simple :

\documentclass{article}
 
\usepackage[a4paper, bottom=15mm, top=1mm, left=1mm, right=1mm]{geometry}
\usepackage{multirow}
\usepackage[utf8]{inputenc}
\usepackage{marvosym} % For phone, cell, and email icons
\usepackage{longtable} % For a table that spans on multiple pages
\usepackage{hyperref}
\usepackage{fancyhdr}
 
\def\mydate{\leavevmode\hbox{\twodigits\day-\twodigits\month-\the\year}}
\def\twodigits#1{\ifnum#1<10 0\fi\the#1}
 
\newcommand\row[4]{%
	\rowcell{#1} & \rowcell{#2} & \rowcell{#3} & \rowcell{#4} \\%
	\hline%
}
\newcommand\cell[1]{\Mobilefone \ \href{tel:#1}{#1}}
\newcommand\phone[1]{\Telefon \ \href{tel:#1}{#1}}
\newcommand\email[1]{\Email \ \href{mailto:#1}{#1}}
\newcommand\rowcell[1]{%
	\begin{tabular}{l}%
		#1%
	\end{tabular}%
}
 
\pagestyle{fancy}
\fancyhf{}
\cfoot{\tiny Généré le \mydate}
 
\begin{document}
	\begin{longtable}{llll}
		\hline
		\row{Prénom Nom}{\cell{06.07.08.09.00}\\\phone{01.02.03.04.05}}{\email{prenom.nom@example.org}\\\email{nom.prenom@example.org}}{1 rue de l'example \\ 77777 Example}%
…
		\row{Prénom Nom}{\cell{06.07.08.09.00}\\\phone{01.02.03.04.05}}{\email{prenom.nom@example.org}\\\email{nom.prenom@example.org}}{1 rue de l'example \\ 77777 Example}%
	\end{longtable}
\end{document}

Il faut noter qu'on ne peut pas utiliser _ directement. Il faut l'échapper de la manière suivante \_

Ensuite pour rendre cette liste visible en ligne, je me suis mis en tête d'utiliser Pandoc comme pour mon projet de sauvegarde d'un blog en PDF. Mais ça ne fonctionne pas vraiment comme espéré. Je n'ai plus de tableau, les caractères accentués sont mal interprétés. Mais en fait, je n'aurais pas du aller chercher aussi loin car l'installation de la bibliothèque TeXLive propose un outil de conversion de TeX vers HTML. Il suffit de le lancer de la manière suivante :

htlatex <file.tex>

Ça génère une page HTML avec une mise en page très simple. Je trouve que ce n'est pas très utilisable tel quel, car les commandes \Telefon, \Mobilefone et Email sont affichées respectivement en T, H et k ¹⁾, le tableau n'utilise pas toute la place disponible et il est difficile de savoir quelles coordonnées correspondent à quel contact.

Pour régler ces problèmes²⁾, on commence par redéfinir les commandes \Telefon, \Mobilefone et Email mais uniquement dans le cas de la conversion en HTML. Pour cela, on va créer le fichier marvosym.4ht ³⁾ qui va remplacer la commande initiale par le contenu du paramètre de la commande :

\NewConfigure{Telefon}{1}
\renewcommand\Telefon{\a:Telefon}
\NewConfigure{Mobilefone}{1}
\renewcommand\Mobilefone{\a:Mobilefone}
\NewConfigure{Email}{1}
\renewcommand\Email{\a:Email}

Ensuite, on cré un fichier CSS qui va contenir l'ensemble des règles à appliquer à notre page HTML ⁴⁾ :

table {
  width: 100%;
}
.hline hr {
  margin: 0;
}
tr:not(.hline) > td {
  padding: 0.2rem 0;
}
tr:not(.hline):hover {
  background-color: lightgrey;
}
.landline::after {
  content: "\1F3D8";
}
.cell::after {
  content: "\1F4F1";
}
.email::after {
  content: "\1F4E7";
}

Puis on cré le fichier de configuration qui va faire le lien entre tout ça :

\Preamble{xhtml}
\Configure{Telefon}{\HCode{<span class="landline"></span>}}
\Configure{Mobilefone}{\HCode{<span class="cell"></span>}}
\Configure{Email}{\HCode{<span class="email"></span>}}
\begin{document}
\CssFile[<file.css>]
\EndCssFile
\EndPreamble

Pour utiliser les fichiers que l'on vient de créer, il faut lancer la commande suivante ⁵⁾:

htlatex <file.tex> "<file.cfg>,css-in"

Pour ne pas avoir à me souvenir de cette commande, je l'ai incluse dans un fichier MAKE.

Maintenant, il ne reste plus qu'à mettre le fichier en ligne et à la sécuriser. Pour cela, on va utiliser le système de sécurité de Apache. Les besoins étant limités, ça suffira largement ⁶⁾.

On commence par créer un fichier .htaccess dans le répertoire contenant la liste des contacts. On lui ajoute le contenu suivant :

<Files <file>>
    AuthType Basic
    AuthUserFile /home/<username>/pass
    AuthName "Restricted"
    require valid-user <user>
</Files>

file correspond au nom du fichier dont on veut restreindre l'accès.
username correspond au nom de l'utilisateur utilisé par Apache.
user correspond au nom de l'utilisateur auquel on veut donner l'accès.

Ensuite, on va configurer le mot de passe de l'utilisateur avec la commande suivante :

htpasswd -c ~/pass <user>

Et voila !

¹⁾

C'est le package marvosym qui utilise une police différente pour afficher des symboles à la place des lettres.

²⁾

Il y a beaucoup d'informations utiles sur les deux pages suivantes : tex4ht tutorial et TeX4ht: Options

³⁾

Le nom est important car il doit correspondre au fichier sty correspondant, ici marvosym.sty.

⁴⁾

Le nom est important, il ne doit pas correspondre au nom du fichier tex sinon il sera écrasé à chaque compilation.

⁵⁾

Il faut lancer 2 fois la commande pour inclure le fichier CSS dans le fichier HTML

⁶⁾

En tout cas, je l'espère

conservation_informations

anonymous@undisclosed.example.com (Anonymous) — Sun, 24 Nov 2024 17:42:00 +0000

todo

Conservation d'informations importantes

Il y a des informations importantes qu'il faut impérativement conserver en lieu sur comme c'est le cas avec les numéros de série de mon appareil photo. Ça fait un petit moment que je réfléchi à une manière efficace de le faire. Il faut que cette conservation soit faite à la fois sur un support informatique et à la fois sur un support papier.

qrencode -o toto.png -l H -s 10 "lorem ipsum"
convert -pointsize 70 -background white -gravity center toto.png \( label:"lorem ipsum" -trim \) -append -bordercolor white -border 30x30 -bordercolor black -border 1x1 toto2.png

generation_calendrier_perpetuel

anonymous@undisclosed.example.com (Anonymous) — Sun, 24 Nov 2024 17:46:41 +0000

todo

ice

anonymous@undisclosed.example.com (Anonymous) — Sun, 24 Nov 2024 17:25:56 +0000

Mise à disposition d'informations utiles en cas d'urgence

On ne peut pas prévoir quand une situation d'urgence se présentera ni sous quelle forme elle se manifestera. Sans entrer dans la paranoïa de certains groupes de survivalistes, je pense qu'il est utile de pouvoir fournir un certain nombre d'informations utiles même si je suis dans l'incapacité de le faire moi-même. Voici ce que j'ai fait pour répondre à cette problématique.

Il y a environ un an, j'ai ajouté une page sur mon blog contenant certaines informations importantes pour faire face à ce genre de situation, à savoir les personnes de confiance à contacter, mes allergies et mon groupe sanguin. J'avais généré un QR code redirigeant directement sur cette page. Il ne me restait plus qu'à l'imprimer pour que ce soit fonctionnel. Mais je ne l'ai jamais fait, ce qui fait que ces informations n'ont jamais été diffusées ni utilisables.

La solution envisagée intialement avait quelques problèmes :

Impossibilité d'imprimer les informations proprement.
Impossibilité d'accèder aux informations si on ne possède pas un outil pour décoder les QR codes.
Présentation approximative.

En travaillant sur la mise en place d'un carnet d'adresse, je me suis dit que j'allais changer ma méthode pour pallier aux problèmes initiaux. Du coup, j'ai ressorti TeX pour générer un fichier PDF. Avec le modèle suivant, je suis capable d'imprimer un fichier lisible et qui peut se loger facilement dans mon porte-feuille. Ça génère une impression au format A7 doublé dans la longueur soit 210x74mm. Une fois plié en 2, j'obtiens un format A7. Cerise sur le gâteau, les numéros de téléphone et les adresses de messagerie sont des liens qui permettent d'activer les logiciels appropriés s'ils existent.

\documentclass{article}
 
\usepackage[paperwidth=210mm, paperheight=74mm, top=5mm, left=0mm]{geometry}
\usepackage[utf8]{inputenc}
\usepackage{marvosym}
\usepackage{hyperref}
\usepackage{xstring}
 
\newcommand\phoneNumber[1]{%	
	\StrSubstitute{#1}{(0)}{}[\number]%
	\href{tel:\number}{#1}%
}
\newcommand\cell[1]{\Mobilefone \ \phoneNumber{#1}}
\newcommand\phone[1]{\Telefon \ \phoneNumber{#1}}
\newcommand\email[1]{\Email \ \href{mailto:#1}{#1}}
\newcommand\contact[4]{%
	\begin{tabular}{l}%
		\begin{large}#1\end{large} \\%
		\cell{#2} \\%
		\phone{#3} \\%
		\email{#4} \\%
	\end{tabular}
	\vspace{0.1cm}
}
\newcommand\primaryContact{
	\contact{John Doe}{+33 (0)1.01.01.01.01}{+33 (0)2.02.02.02.02}{john.doe@example.org}%
}
\newcommand\secondaryContact{
	\contact{Jane Doe}{+33 (0)3.03.03.03.03}{+33 (0)4.04.04.04.04}{jane.doe@example.org}%
}
 
\begin{document}
	\pagenumbering{gobble}
 
	% English section	
	\begin{minipage}{105mm}
		\begin{Large}In Case of Emergency\end{Large}
 
		\vspace{0.3cm}\renewcommand{\arraystretch}{1.2}
 
		\begin{tabular}{r|l}%
			Primary contact & \primaryContact \\%
			Secondary contact & \secondaryContact \\%
			Known allergies & \\%
			Blood type & \\%
		\end{tabular}
	\end{minipage}
%
	\hfill%
%	
	% French section
	\begin{minipage}{105mm}
		\begin{Large}En Cas d'Urgence\end{Large}
 
		\vspace{0.3cm}\renewcommand{\arraystretch}{1.2}
 
		\begin{tabular}{r|l}%
			Contact principal & \primaryContact \\%
			Contact secondaire & \secondaryContact \\%
			Allergies connues & \\%
			Groupe sanguin & \\%
		\end{tabular}
	\end{minipage}
\end{document}

J'ai ensuite mis à disposition ce fichier sur mon serveur ainsi qu'une copie papier dans mon porte-feuille.

Pour accéder au fichier, je me suis facilité la vie en encodant l'URL dans un QR code. Pour cela, rien de plus facile en utilisant qrencode de la manière suivante :

# Version courte
qrencode -o ice.1.png -l H -s 10 "https://www.ainw.org/wiki/doku.php?id=projets:informatique:ice"
 
# Version longue
qrencode --output ice.1.png --level H --size 10 "https://www.ainw.org/wiki/doku.php?id=projets:informatique:ice"

-o ou --output indique le nom du fichier de sortie.
-l ou --level indique le niveau de correction d'erreur.
-s ou --size indique la taille des points en pixels.

Cependant, je trouve que ce n'est pas assez. En effet, un QR code seul ne sert pas à grand chose s'il n'est pas possible de l'identifier facilement et surtout rapidement. Je me suis amusé à ajouter les informations nécessaires à l'aide d'imagemagick. La syntaxe est loin d'être évidente et j'ai du procéder à de nombreux tests avant de trouver quelque chose qui me convienne. Je voulais afficher I.C.E. au dessus et à gauche et E.C.U. en dessous et à droite du code. Je voulais aussi afficher une bordure pour faciliter la découpe de l'impression, ainsi qu'un repère pour percer un trou ⁷⁾.

# +append colle les images de gauche à droite.
# -append colle les images de bas en haut.
# \(\) regroupe des actions entre elles.
convert -pointsize 70 -background white -gravity center \( label:"I.C.E." -trim \) \( \( -rotate -90 label:"I.C.E." -trim \) ice.1.png \( -rotate -90 label:"E.C.U." -trim \) +append \) \( label:"E.C.U." -trim \) -append -bordercolor white -border 30x30 -bordercolor black -border 1x1 -stroke black -draw "circle 75,75 90,90" ice.2.png

Ce résultat est beaucoup mieux. Il ne reste plus qu'à l'imprimer ⁸⁾ et à le conserver à un endroit approprié.

Pour ne pas chercher la commande à chaque fois que je veux générer l'image, je me suis fait une fonction dans bash qui me le fait directement à partir d'une entrée :

function ice { # Generate I.C.E. QR code
  qrencode --output - --level H --size 10 "$1" | convert -pointsize 70 -background white -gravity center \( label:"I.C.E." -trim \) \( \( -rotate -90 label:"I.C.E." -trim \) - \( -rotate -90 label:"E.C.U." -trim \) +append \) \( label:"E.C.U." -trim \) -append -bordercolor white -border 30x30 -bordercolor black -border 1x1 -stroke black -draw "circle 75,75 90,90" ice.png
}

Puis je me suis dit que je pouvais peut-être inclure directement le fichier PDF dans le code. Mais pour cela, il faudrait réduire drastiquement la taille de celui-ci. J'ai optimisé le fichier en lançant la commande suivante ⁹⁾:

gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dNOPAUSE -dQUIET -dBATCH -sOutputFile=ice.compressed.pdf ice.pdf

Mais ça ne donne rien. Le fichier dépasse encore la limite imposée par la norme du QR code et en plus de ça, les liens sont perdus.

⁷⁾

Cela permettra de l'attacher facilement

⁸⁾

Je l'imprime avec un redimensionnement à 25% de la taille initiale

⁹⁾

commande trouvée sur tex.stackexchange

livre

anonymous@undisclosed.example.com (Anonymous) — Sun, 24 Nov 2024 17:26:08 +0000

todo

Écriture d'un livre

Depuis de nombreuses années, je pense à écrire un livre. J'ai déjà choisi le thème mais je n'ai pas encore commencé sa réalisation. Je veux écrire un recueil de mes recettes préférées pour remplacer mon cahier de notes et aussi pour laisser quelque chose de personnel à ma fille. J'espère que de décrire mes idées ici déclenchera le processus de réalisation.

Pour me faciliter la vie, je veux avoir un fichier par recette, un répertoire par section. Je veux pouvoir faire une recherche par recette et par ingrédient. Je veux pouvoir générer le fichier final facilement et surtout sans me poser de question. J'aimerai aussi être capable d'intégrer des photos afin d'agrémenter le document.

Donc avant de me lancer dans l'écriture, il faut que je résolve les problèmes suivants :

Trouver comment intégrer des fichiers externes avec LaTeX.
Trouver comment générer un index de recette avec LaTeX.
Trouver comment générer un index d'ingrédient avec LaTeX.
Écrire un modèle en LaTeX pour mettre en forme les recettes si je n'en trouve pas un à mon goût.
Écrire un script de génération automatique à partir des sources (intégration des fichiers externes, génération des indexes, génération du fichier final).

Après plusieurs années à y penser sans vraiment me lancer, j'ai eu l'opportunité d'avancer fortement ce projet grace à une échéance imposée. Mon beau-frère, qui aime beaucoup la cuisine, va fêter son 50^ème anniversaire cette année ¹⁰⁾. Je me suis dit que c'était le déclencheur nécessaire pour commencer sérieusement à travailler dessus. Pour l'occasion, j'ai embarqué ma mère, ma fille et mon épouse pour enrichir le contenu tandis que je travaillais fort à la partie technique.

J'ai travaillé de manière à mettre en place de bonnes bases pour pouvoir réaliser mon propre recueil en me basant sur le travail réalisé pour cette occasion. Et je pense que l'objectif est atteint car j'ai mis en place un modèle qui me permet de générer un recueil très facilement en incluant les recettes depuis des fichiers individuels, ce qui me permet d'avoir une recette par fichier ¹¹⁾.

Le modèle mis en place me permet de :

Générer un recueil depuis une liste de répertoire contenant des fichiers de recette.
Générer un recueil depuis une liste de répertoire contenant des liens symboliques vers des fichiers de recette.
Générer un fiche de recette directement depuis un fichier de recette.
Intégrer des images depuis un dossier commun à tous les recueils.

Modèle de recette

Script de réorganisation de pages pour impression

option pour le calcul des statistiques
option pour extraire par section numérotée (cf curl)
options pour inclure ou exclure les premières pages
option pour ajouter une page de remplissage (blanche par défaut)
option pour génération destructrice (cf sed)
option pour spécifier le nombre de page dans un livret

Sources

¹⁰⁾

2021

¹¹⁾

Ce qui est vraiment intéressant car je n'ai pas à me préoccuper de l'ordre des recettes car c'est fait directement au niveau du système de fichier

mise_en_place_d_une_copie_hors-ligne_de_mon_espace_personnel

anonymous@undisclosed.example.com (Anonymous) — Mon, 13 Oct 2025 12:50:51 +0000

Mise en place d'une copie hors-ligne de mon espace personnel

Mise en contexte

Depuis plusieurs années, j'alimente plusieurs système en ligne ¹²⁾. Ça me demande de l'énergie et du temps, ça m'ennuierai de voir tout ça disparaitre. C'est pourquoi je voulais en faire une version hors-ligne pour pouvoir conserver mon travail car on ne sait jamais ce qui peut arriver ¹³⁾.

Il y a quelques années, j'avais écrit un script de sauvegarde mais je me suis rendu compte qu'il ne fonctionnait plus suite à des changements de politiques chez l'hébergeur et des changements de configuration localement. Il fallait tout reprendre à la base.

Solutions envisagées

Ma première idée a été de faire une sauvegarde des fichiers de données uniquement et de recréer les environnements localement. Cette solution me permet de ne gérer que les fichiers de données lors de la sauvegarde, ce qui réduit les temps de traitement et la volumétrie. Par contre, elle m'oblige à recréer les environnements localement, ce qui n'est pas un problème pour les sections sans configuration (blog, galerie, etc.) mais qui devient un casse-tête pour les autres sections (wikis) car il faut reproduire la configuration à l'identique.

Ma seconde idée a été de faire une sauvegarde de l'ensemble des répertoires et de les servir localement. Cette solution me permet de sauvegarder la totalité des applications avec configuration, données et modules. Ça augmente la volumétrie et le temps de traitement de la sauvegarde mais ça simplifie grandement la configuration des environnements locaux.

J'ai opté pour la seconde idée afin de me faciliter la vie, l'espace disque étant bon marché à l'heure actuelle.

Mise en place

Sauvegarde de mon espace personnel

J'ai repris le script que j'avais écrit auparavant ¹⁴⁾ et j'ai modifié les choses suivantes :

Changement de l'accès aux bases de données,
Changement des données à sauvegarder,
Changement de la cible de sauvegarde,
Changement de l'accès au serveur.

Voici le nouveau script :

#!/usr/bin/env bash
 
. $(dirname "$0")/.utils.sh
 
AINW=ainw
DEST=~/Workspace/offline/src
ICON=/usr/share/icons/Adwaita/scalable/devices/drive-removable-media.svg
MOUNT=/tmp/ainw
USER=alexis
MYSQL_HOST=<host>
DATABASE=<database>
 
notify_info $USER "'Backup started'" "'AINW.ORG to local drive.'" $ICON
 
# Extract crontab
echo -e "\e[1;32;49mBackup of crontab in progress\e[m"
ssh $AINW "crontab -l" > $DEST/crontab
 
# Dump databases
echo -e "\e[1;32;49mBackup of the database in progress\e[m"
ssh $AINW "mysqldump --defaults-extra-file=~/.mysql/mysqldump.cnf --no-tablespaces --skip-comments --disable-keys --host $MYSQL_HOST --databases $DATABASE" > $DEST/mysqldump.sql
 
# Save files
mkdir -p $MOUNT
sshfs $AINW:www $MOUNT
 
files[0]=<folder #1>
…
files[n]=<folder #n>
 
for i in "${files[@]}"
do
    echo -e "\e[1;32;49mBackup of $i folder in progress\e[m"
    if [[ -d $MOUNT/$i ]]; then
        mkdir -p $DEST/$i
    fi
    rsync --compress --delete --force --archive --quiet $MOUNT/$i $DEST/$(dirname $i)
done
 
umount $MOUNT
rmdir $MOUNT
 
notify_info $USER "'Backup done'" "'AINW.ORG to local drive.'" $ICON

Une chose qu'il faut mentionner, c'est l'absence du nom d'utilisateur et de son mot de passe dans le script. C'est une mauvaise pratique de faire cela alors je me suis efforcé à corriger ce problème. J'ai suivi la documentation disponible dans les lectures utiles. Il est important de noter que l'option --defaults-extra-file doit absolument être la première option de la commande sinon elle n'est pas prise en compte.

Pour l'instant, j'ai créé le fichier d'authentification uniquement sur le serveur. Dans une version future, je vais gérer l'ajout et la suppression de ce fichier directement dans le script de sauvegarde.

Il est impératif d'ajouter l'option --no-tablespaces sinon l'utilisateur n'a pas les permissions requises pour faire la sauvegarde de la base de données. C'est mentionné dans la documentation disponible sur le site de mon hébergeur mais il est facile de ne pas le voir.

Il y a certaines choses que je ne sauvegarde pas car elles sont générées sur ma machine avant d'être envoyées sur le serveur. J'utilise directement la version qui est déjà disponible sur ma machine.

Mise à disposition localement

Il y a plusieurs systèmes à mettre en place pour que tout fonctionne correctement. Nous allons faire tourner chaque système dans un conteneur pour ne pas avoir à configurer le poste local. Pour cela, nous allons utiliser Docker ¹⁵⁾.

	Blog ¹⁶⁾	Galerie ¹⁷⁾	Wiki ¹⁸⁾	Shaarli ¹⁹⁾	Agrégateur RSS
Serveur web	✔	✔	✔	✔	✔
Service PHP			✔	✔	✔
Base de données ²⁰⁾					✔

Configuration de la résolution d'IP

Pour éviter d'utiliser des adresses IP et des numéros de port pour accéder aux différents services mis à disposition, il va falloir définir des noms de domaine locaux. La configuration se passe dans le fichier /etc/hosts dans lequel on va ajouter les lignes suivantes :

127.0.0.1       ainw.org.local
127.0.0.1       rss.local

Mise à disposition du blog et de la galerie

Pour cela, nous allons utiliser une image de nginx et la configurer pour que les contenus statiques soient servis directement.

ainw.org.conf

server {
    index index.html;
    server_name ainw.org.local;
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html;
}

docker-compose.yml

services:
  web:
    image: nginx:latest
    ports:
      - '80:80'
    volumes:
      - /chemin/du/blog/local:/var/www/html:ro
      - /chemin/de/la/galerie/locale:/var/www/html/photos:ro
      - ./.docker/ainw.org.conf:/etc/nginx/conf.d/default.conf:ro

Il ne reste plus qu'à lancer la commande docker compose up --detach et accéder au blog ou à la galerie directement dans le navigateur.

Il faut faire attention lors de la configuration des volumes. Si plusieurs d'entre-eux ont la même cible, c'est le dernier défini qui sera réellement chargé. C'est tout à fait normal, mais cela peut porter à confusion si on ne fait pas attention.

Mise à disposition des wikis et des shaarlis

Pour cela, nous allons utiliser une image de PHP et modifier la configuration de nginx pour interpréter les contenus dynamiques avant de les servir. Les contenus statiques vont continuer à être servis directement.

ainw.org.conf

server {
    index index.html index.php;
    server_name ainw.org.local;
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html;
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php-fpm:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    } 
}

docker-compose.yml

services:
  web:
    image: nginx:latest
    ports:
      - '80:80'
    volumes:
      - /chemin/du/blog/local:/var/www/html:ro
      - /chemin/de/la/galerie/locale:/var/www/html/photos:ro
      - ./src/shaarlis:/var/www/html/links
      - ./src/wiki1:/var/www/html/wiki1
      - ./src/wiki2:/var/www/html/wiki2
      - ./.docker/ainw.org.conf:/etc/nginx/conf.d/default.conf:ro
    links:
      - php-fpm

  php-fpm:
    image: php:8.3-fpm
    user: 1000:1000
    volumes:
      - ./src:/var/www/html

Il ne reste plus qu'à lancer la commande docker compose up --detach et accéder aux wikis ou aux shaarlis directement dans le navigateur.

La version de PHP à utiliser ici est 8.3. Dokuwiki n'étant pas compatible avec la version 8.4.

Mise à disposition de l'agrégateur de RSS

Pour la cela, il va falloir configurer plusieurs choses. Nous avons besoin :

d'une base de donnée – pour stocker les données de l'agrégateur.
d'un serveur web – la configuration est différente de celle configurée précédemment.
de PHP – la configuration est différente de celle configurée précédemment.
d'un routeur de requête HTTP – pour diriger les requêtes reçues dur le serveur web approprié.

rss.conf

server {
    index index.php index.html index.htm;
    server_name rss.local;
    error_log /var/log/nginx/rss.error.log;
    access_log /var/log/nginx/rss.access.log;
    root /var/www/html/p/;
    location ~ ^.+?\.php(/.*)?$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass rss-php:9000;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    location / {
        try_files $uri $uri/ index.php;
    }
}

docker-compose.yml

services:
  traefik:
    image: traefik:latest
    command:
      - "--entryPoints.web.address=:80"
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
    ports:
      - "80:80"
      - "8888:8080"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"

  web:
    image: nginx:latest
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.ainw.rule=Host(`ainw.org.local`)"
    volumes:
      - ~/Workspace/ainw.org/output:/var/www/html:ro
      - ~/Workspace/photos.ainw.org/_build:/var/www/html/photos:ro
      - ./src/links:/var/www/html/links
      - ./src/j8c2v3:/var/www/html/j8c2v3
      - ./src/wiki:/var/www/html/wiki
      - ./.docker/ainw.org.conf:/etc/nginx/conf.d/default.conf:ro
    links:
      - web-php

  web-php:
    image: php:8.3-fpm
    user: 1000:1000
    volumes:
      - ./src/links:/var/www/html/links
      - ./src/j8c2v3:/var/www/html/j8c2v3
      - ./src/wiki:/var/www/html/wiki

  rss:
    image: nginx:latest
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.rss.rule=Host(`rss.local`)"
    volumes:
      - ./src/freshrss:/var/www/html
      - ./.docker/rss.conf:/etc/nginx/conf.d/default.conf:ro
    links:
      - rss-php
      - db

  rss-php:
    build: ./.docker/rss-php
    user: 1000:1000
    volumes:
      - ./src/freshrss:/var/www/html
    links:
      - db

  db:
    image: mysql:latest
    container_name: mysql.ainw.org
    ports:
      - "3306:3306"
    environment:
      - MYSQL_ALLOW_EMPTY_PASSWORD=true
      - MYSQL_DATABASE=ainw_rss
      - MYSQL_USER=<user>
      - MYSQL_PASSWORD=<pwd>
    volumes:
      - ./src/db:/var/lib/mysql:rw

Dockerfile

FROM php:8.3-fpm
RUN apt-get update && apt-get install --yes --no-install-recommends \
    libcurl4-openssl-dev \
    libgmp-dev \
    libicu-dev \
    libonig-dev \
    libxml2-dev \
    libzip-dev \
    && docker-php-ext-install curl gmp intl mbstring pdo pdo_mysql xml zip \
    && docker-php-ext-enable curl gmp intl mbstring pdo pdo_mysql xml zip

Il ne reste plus qu'à lancer la commande docker compose up --detach et accéder à l'agrégateur directement dans le navigateur.

À cette étape, cela fonctionne mais il manque encore quelque chose, les données. Il reste donc à les importer pour que l'ensemble soit fonctionnel. Pour cela, il suffit de lancer la commande suivante :

docker compose exec --no-tty db mysql -u root < mysqldump.sql

Automatisation

C'est plus un regroupement des commandes dans un fichier Makefile pour ne pas avoir à me souvenir de chaque commande pour refaire mon environnement hors-ligne.

##@ General
 
.PHONY: help
help: ## Display this help.
        @awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n"} /^[a-zA-Z_0-9-]+:.*?##/ { printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
 
##@ Container actions
 
.PHONY: build
build: ## Build containers
        @docker compose build
 
.PHONY: load
load: ## Load database dump
        @docker compose exec --no-tty db mysql -u root < ./src/mysqldump.sql
 
.PHONY: serve
serve: ## Serve offline content locally
        @docker compose up --detach --remove-orphans

Lectures utiles

¹²⁾

blog, wiki, etc.

¹³⁾

fermeture de l'hébergeur, coupure d'internet, etc.

¹⁴⁾

Mise en place de sauvegardes

¹⁵⁾

J'aurais pu choisir un autre moyen, mais c'est celui que je connais le mieux.

¹⁶⁾ , ¹⁷⁾

site statique

¹⁸⁾ , ¹⁹⁾

²⁰⁾

mysql

mise_en_place_de_sauvegardes

anonymous@undisclosed.example.com (Anonymous) — Sat, 02 Aug 2025 21:58:32 +0000

Mise en place de sauvegardes

Mise en contexte

Avec les ordinateurs, il y a 2 types d'utilisateurs. Ceux qui ont déjà perdu des données et ceux qui vont en perdre. Généralement, les premiers mettent en place des systèmes pour parer à cet évènement, tandis que les autres vivent dans l'insouciance la plus totale. Je fais partie de la première catégorie depuis de nombreuses années et voici ce que j'ai fait pour ne plus avoir à vivre avec la peur de perdre mon travail, mes photos et autres documents importants.

Pour avoir un système de sauvegardes efficaces, il faut respecter la règle 3-2-1 ²¹⁾:

Avoir 3 sauvegardes différentes,
des copies dans des répertoires différents ne compte pas. Il faut avoir 3 copies sur des supports différents.
Avoir 2 types de support différents pour les sauvegardes,
utiliser 3 disques dur ne fonctionne pas car les mêmes types de supports sont sujet aux mêmes défaillances.
Avoir 1 supports à un emplacement différent,
car nul n'est à l'abri d'un vol, d'un incendie ou tout autre évènement qui pourrait détruire les données.

À cela, j'ajouterai les règles suivantes :

Il faut tester ses sauvegardes régulièrement car des sauvegardes desquelles on ne peut pas récupérer de données sont des sauvegardes inutiles.
Il faut sauvegarder régulièrement pour perdre le moins possible de choses en cas de défaillance.

Identification des données importantes

Toutes les données n'ont pas le même niveau d'importance. Certaines sont inestimables (ex : photos d'un enfant, fiche de paie, …), d'autres sont très facilement remplaçables (ex : vidéo téléchargée, fichier de cache, …). Avant de mettre en place une stratégie de sauvegarde, il faut donc identifier les données qu'il faut conserver ainsi que le niveau de sécurité souhaité.

J'ai identifié plusieurs catégories de données à sauvegarder :

Type de donnée	Fichiers concernés	Stratégie de sauvegarde	Volume de données	Emplacement
Critique	Fichiers de gestion de mots de passe	Sauvegarde sur un minimum de 5 supports + export papier	1 Mo	En ligne ²²⁾ + 2 disques dur externes + 2 clés USB + 1 carte mémoire flash + export papier ²³⁾
	Clés SSH		10 Ko
	Fichiers de récupération d'accès		1 Ko
	Fichiers de génération de ma liste de contacts		1 Mo
Irremplaçable	Photos personnelles	Sauvegarde normale de type `3-2-1`	≈ 50 Mo	En ligne ²⁴⁾ + 2 disques dur externes
	Vidéos personnelles		≈ 500 Mo
	Projets personnels		≈ 25 Go
	Documents administratifs ²⁵⁾		≈ 1 Go
Confort	Fichiers de configuration ²⁶⁾		≈ 150 Mo
	Fichiers achetés ²⁷⁾		≈ 14 Go
	Fichiers glanés ²⁸⁾		≈ 8 Go
	Musique	Sauvegarde allégée	≈ 90 Go	2 disques dur externes

Mise en place

Sauvegarde allégée

Pour cela, j'utilise Borg backup. Et pour me faciliter la tâche, je ne l'utilise pas directement mais à travers Borgmatic. Il n'y a pas grand chose à ajouter à cela, étant donné que les documentations existantes sont très bien fournies.

La seule chose un peu particulière que j'ai faite est de mettre plusieurs repository ²⁹⁾ dans le fichier de configuration afin d'avoir la même configuration pour chacun de mes supports. J'ai aussi ajouté 1 règles dans mon fichier Makefile pour lancer facilement la sauvegarde.

Documentations utiles :

Par le passé, j'avais des scripts similaires ³⁰⁾ qui étaient tous déclenchés par systemd. J'ai décidé de simplifier ça en ayant un seul script qui sera lancé manuellement. Je me dis que si je fais l'effort d'insérer mes supports amovibles sur mon ordinateur, je peux aussi lancer un simple script.

Sauvegarde normale

La sauvegarde normale reprend ce qui a été fait dans la sauvegarde allégée et ajoute la sauvegarde en ligne.

Pour la sauvegarde en ligne, j'utilise le service BorgBase qui permet de faire des sauvegardes chiffrées localement ³¹⁾ et de les envoyer par incréments.

J'ai utilisé les mêmes outils que pour la sauvegarde allégée, à savoir Borg et borgmatic. J'ai configuré borgmatic pour que les mots de passe d'accès au service soit récupérés automatiquement dans mon gestionnaire de mot de passe. Il faut que j'ajoute ³²⁾ les clés SSH à l'agent de gestion des clés car il n'y a pas d'outils disponible nativement dans borgmatic pour le faire. C'est un petit inconvénient mineur et j'essayerai de régler ça quand j'aurai le goût.

Sauvegarde critique

La sauvegarde critique reprend ce qui a été fait dans la sauvegarde normale et ajoute la sauvegarde sur petits supports amovibles ³³⁾.

Ici, je n'utilise pas de sauvegarde incrémentale car la volumétrie est très faible ³⁴⁾. J'ai écrit un script tout simple qui valide la présence du support et qui fait une copie des fichiers critiques avec rsync. La commande utilisée est la suivante :

rsync --archive --quiet --compress --exclude=build <fichier1> <fichier2> ... <fichiern> <destination>

J'ai également ajouté une règle dans mon fichier Makefile pour me simplifier la vie.

Par le passé, j'avais des scripts similaires ³⁵⁾ qui étaient tous déclenchés par systemd. J'ai décidé de simplifier ça en ayant un seul script qui sera lancé manuellement. Je me dis que si je fais l'effort d'insérer mes supports amovibles sur mon ordinateur, je peux aussi lancer un simple script.

Je suis encore en train de me questionner sur la pertinence de faire une sauvegarde de mes données critiques sur papier. C'est facile à mettre en place mais il a tellement de vecteurs d'attaque possibles que je me demande si je vais le faire ou pas.

Récupération de fichiers

Sauvegarde gérée par rsync

Ici, c'est trivial. Il suffit de brancher le support et de récupérer les fichiers désirés.

Sauvegarde gérée par borg/borgmatic

Ici, ce n'est pas beaucoup plus compliqué. Il existe plusieurs méthodes mais la plus simple est de monter la sauvegarde dans le système de fichiers et de naviguer dans l'arborescence.

Tout est décrit dans cette documentation.

Il faudra installer la bibliothèque python-llfuse pour pouvoir monter les sauvegardes dans le système de fichiers avec borgmatic.

Lectures utiles

²¹⁾

Règle de sauvegarde 3-2-1 : Protégez vos données efficacement - Sauvegarde de fichiers

²²⁾ , ²⁴⁾

sauvegarde chiffrée localement

²³⁾

dans un endroit sécurisé

²⁵⁾

fiches de paie, relevés bancaire, …

²⁶⁾

Makefile, .config, …

²⁷⁾

patrons de couture, patrons de tricot, …

²⁸⁾

recettes de cuisine, diagramme d'origami, …

²⁹⁾

1 par disque dur de sauvegarde

³⁰⁾ , ³⁵⁾

un pour chaque support

³¹⁾

le service n'a pas accès à la clé de chiffrement

³²⁾

manuellement ou par KeepassXC

³³⁾

clés USB et carte mémoire Flash

³⁴⁾

j'utilise encore une clé d'une autre époque, sa capacité est de 64 Mo uniquement

recuperation_notes

anonymous@undisclosed.example.com (Anonymous) — Sun, 24 Nov 2024 17:28:20 +0000

Récupération de notes depuis un téléphone LG

Sur mon vieux téléphone LG, j'utilise QuickMemo+ ¹⁾ pour prendre des notes quand je ne suis pas connecté à un réseau car je n'ai pas de données. Le problème est qu'il n'est pas aisé d'extraire les informations textuelles pour les partager. Il a fallu que je trouve un moyen pour y accéder.

La récupération s'effectue selon le principe ETL (Extraction, Transfert, Lecture) :

Extraction
C'est la partie simple de la récupération. Il suffit d'aller dans le menu de la note à récupérer et de sélectionner l'action d'export. Cela génèrera un fichier avec une extension lqm.

Attention à bien noter le chemin d'accès au fichier. Dans mon cas, il s'agit de /storage/emulated/0/QuickMemo+.

Transfert
Pour le transfert du fichier nouvellement généré, j'ai utilisé le site FilePastebin qui permet de transférer des fichiers en utilisant une connexion WebRTC entre le navigateur du téléphone source et le navigateur de la machine cible. Il n'y a qu'à suivre les instructions pour que cela fonctionne.

Ça pourrait être intéressant d'installer ça (ou quelque chose de similaire) sur un serveur que je contrôle.

Lecture
Le fichier récupéré est une archive zip dont l'extension a été modifiée. Cette archive contient plusieurs répertoires ²⁾ et fichiers. Il faut commencer par extraire de l'archive le fichier qui nous intéresse afin de pouvoir l'exploiter :

unzip <fichier_lqm> memoinfo.jlqm

Ce fichier à l'extension jlqm est un fichier au format JSON. Nous pouvons donc en extraire le contenu grace à jq :

jq --raw-output '.MemoObjectList[].DescRaw' memoinfo.jlqm

Si le fichier n'a pas besoin d'être stocké localement, il est possible de faire l'ensemble des opérations en une fois :

unzip -qc <fichier_lqm> memoinfo.jlqm | jq --raw-output '.MemoObjectList[].DescRaw'

¹⁾

version 4.70.13

²⁾

tous vides

sauvegarde_blog_pdf

anonymous@undisclosed.example.com (Anonymous) — Sun, 24 Nov 2024 12:01:59 +0000

Sauvegarde d'un blog en PDF

Il y a quelques années, j'ai arrêté d'alimenter un de mes blogs. Je ne voulais pas en perdre le contenu donc j'ai continuer à l'héberger en attendant de trouver une solution pour le sauvegarder de manière efficace. Mon idée était de pouvoir le sauvegarder en PDF.

Le blog étant propulsé par Dotclear, ma première idée fut d'installer une extension qui génère directement du ePub depuis l'interface de navigation. Malheureusement, je n'ai jamais réussi à le faire fonctionner correctement.
De plus, je n'étais pas sur de pouvoir faire autrement que de générer un fichier par message. Ce n'était pas un blog très fourni, mais ça aurait quand même fait pas loin de 200 fichiers, ce qui n'est pas franchement utilisable. Surtout si la chronologie des messages a son importance.

Ce projet est resté longtemps au stade de l'idée jusqu'au jour où je me suis dit que je pouvais utiliser Pandoc. C'est un logiciel de conversion de document numérique. La liste des types de fichier qu'il supporte aussi bien en entrée qu'en sortie est impressionnante. Mais le point le plus intéressant dans mon cas, est le support du HTML en entrée et du PDF en sortie.

J'ai fait un premier test assez concluant sur une page malgré la quantité d'information superflue récupérée. Il fallait que je nettoie l'information pour ne garder que ce qui était pertinent. Ma première idée fut de convertir plutôt en TeX et d'écrire un script de nettoyage. Idée rapidement abandonnée après avoir vu la complexité du document TeX généré. Après avoir lu la documentation de Pandoc, ma seconde idée fut d'utiliser un filtre qui ferait du nettoyage entre la conversion d'entrée et la conversion de sortie. Idée également abandonnée après avoir vu la complexité du format de travail de Pandoc. Ma troisième idée fut de modifier le modèle d'affichage du blog directement dans Dotclear pour avoir des données nettoyées avant même de les utiliser avec Pandoc.
Je suis resté sur cette idée car elle est facile à mettre en place et très souple. Ça ne fonctionne que parce que j'ai la main sur le blog que je voulais sauvegarder. Dans un cas où ce n'est pas possible, il faudrait trouver un autre moyen.

Ensuite il a fallu récupérer les URLs de chaque message pour pouvoir les télécharger. Ma première idée fut d'utiliser wget pour naviguer à travers le blog et faire l'extraction. Cette solution est faisable mais pas la plus pratique. Ma seconde idée fut d'utiliser le plan du site¹⁾.
Je suis resté sur cette idée car elle est très facile à mettre en place grâce à l'extension de Dotclear. Par contre, le fichier généré étant du XML, il aurait fallu écrire un bout de code pour en extraire les URLs. Mais comme ce fichier est aussi généré avec un modèle, je l'ai également modifié pour ne conserver que la partie intéressante.

Il a fallu retravailler certains messages directement dans l'interface d'administration du blog pour que le contenu généré corresponde à ce que je voulais. Ça a pris un peu de temps, mais beaucoup moins que de modifier la sortie ou d'écrire un filtre.

Voici les quelques commandes utilisées lors de ce projet :

Récupération des URLs

# Version courte
wget http://www.blog.org/index.php/sitemap.xml -O URL.List
 
# Version longue
wget http://www.blog.org/index.php/sitemap.xml --output-document URL.List

Récupération du contenu

# Version courte
wget -i URL.List -k -p -E
 
# Version longue
wget --input-file URL.List --convert-links --page-requisites --adjust-extension

Concaténation du contenu

find www.blog.org/ -name \*html | sort | xargs cat > blog.html

Conversion du contenu

# Version courte
pandoc blog.html -f html -t latex --toc -V geometry:margin=2cm -V papersize:A4 -o blog.pdf
 
# Version longue
pandoc blog.html --from html --to latex --table-of-contents --variable geometry:margin=2cm --variable papersize:A4 --output blog.pdf

Le résultat obtenu est bon, même s'il reste perfectible. Par exemple, la table des matière n'est pas en français et les photos prennent trop de place à mon goût.

¹⁾

ou sitemap dans la langue de Shakespeare

sauvegarde_de_pages

anonymous@undisclosed.example.com (Anonymous) — Sun, 24 Nov 2024 17:46:48 +0000

todo

Sauvegarde de pages

Le World Wide Web (ou web) est un organisme vivant. Des pages apparaissent tandis que d'autres disparaissent. C'est pourquoi, il peut être utile d'en sauvegarder certaines afin de conserver certaines connaissances ou idées. Il y a quelques temps, j'utilisais l'extension Firefox Scrapbook mais celle-ci n'a pas été mise à jour depuis le passage aux WebExtensions ¹⁾. Cette extension permettait de faire une copie locale d'un site. Je me suis dit qu'il fallait aller plus loin et fournir une copie en ligne du contenu.

Étonnament, ça a été plus facile et plus rapide que ce que j'avais anticipé.

Ma première idée fut de me tourner vers des services de conservation du patrimoine numérique. Je connais deux services qui font ce genre de chose :

Ces services fonctionnent très bien, mais il faut que les pages soient indexées et que le service soit pérenne. Je me suis dit que j'allais l'héberger moi même.

J'ai essayé de trouver une extension pour remplacer Scrapbook. Je suis tombé sur les extensions ScrapBee et ScrapbookQ mais je me suis vite arrêté car elles demandent d'installer un module en dehors du navigateur. Je me suis souvenu de l'existence de l'extension Save Page WE qui permet de sauvegarder une page complète en 1 seul fichier HTML. Après tests, il s'avère qu'avec quelques manipulations, je peux faire ce que j'avais imaginé.

Étapes

Ouvrir la console de Firefox (Tools > Web Developer > Inspector ou Ctrl+⇧ Shift+Ctrl),
Supprimer tout ce que l'on ne veut pas conserver dans la copie,
Sauvegarder la page avec l'extension Save Page WE,
Faire une capture d'écran de la page sauvegardée,
Ajouter la page sauvegardée sur mon site.

J'ai du supprimer certains éléments de la page. J'ai pu le faire avec cette commande lancée dans la console.

// Pour supprimer les scripts
document.querySelectorAll('script').forEach(element => element.remove());
 
// Pour supprimer les éléments ayant la classe CSS .xc_pin
document.querySelectorAll('.xc_pin').forEach(element => element.remove());

Regarder si cette extension pourrait fonctionner : SingleFile

¹⁾

Et je pense qu'elle ne le sera jamais.

transcription_automatique

anonymous@undisclosed.example.com (Anonymous) — Thu, 02 Jan 2025 17:25:48 +0000

Transcription automatique d'entretiens

Pour son mémoire, ma dame fait passer des entretiens pour collecter des données à exploiter pour sa réflexion. Elle doit les retranscrire pour pouvoir les analyser, puis les inclure dans son rapport. Ça lui demande beaucoup de temps et d'énergie. Elle était démoralisée jusqu'à ce que je lui trouve une solution un peu plus automatique.

J'ai eu l'idée d'utiliser la puissance de calcul de Google et de la traduction automatique de vidéos de Youtube. Une vidéo chargée sur la plate-forme est traduite automatiquement dans la langue choisie comme langue par défaut. Le résultat n'est pas parfait mais il permet de faire beaucoup de chose automatiquement. Voici le détail des étapes pour obtenir un fichier texte utilisable.

Convertir le fichier audio en fichier vidéo

Youtube n'autorise que le chargement de fichiers vidéos. Il faut donc convertir les fichiers audio en fichiers vidéo. Pour cela, on va ajouter une image fixe à l'audio en utilisant FFmpeg.

ffmpeg -loop 1 -i bg.png -i record.m4a -c:v libx264 -c:a copy -shortest record.mp4

-loop indique le nombre de boucle à effectuer pour les entrées le supportant.
-i indique le fichier à utiliser.
-c:v indique le codec vidéo à utiliser, ici libx264.
-c:a indique le codec audio à utiliser, ici copy.
-shortest indique que la conversion doit se terminer dès que le plus petit flux est converti.

Il faut faire attention aux images utilisées. Il faut choisir des images dont les dimensions sont divisibles par 2, sinon ffmpeg ne voudra pas générer le fichier.

Il est également conseillé de prendre des images de petite dimension pour limiter la taille de la vidéo générée. Je trouve que la taille 320×240 est un bon compromis.

Pour ne pas modifier la qualité de l'audio, on utilise le codec copy qui ne fait pas de conversion mais seulement une copie du flux. Ça ne fonctionne qu'avec un format de sortie qui supporte le format d'entrée.

Traiter la vidéo sur Youtube

Il faut téléverser la vidéo sur Youtube¹⁾, configurer la langue originale de la vidéo et laisser faire le service qui va s'occuper d'ajouter automatiquement des sous-titres à la vidéo. Je ne sais pas combien de temps ça prend mais après quelques heures, ça devrait être fait.
Il ne reste plus qu'à télécharger les sous-titres au format SubRip²⁾.

Il existe plusieurs format de sous-titres disponibles. J'ai choisi d'utiliser SubRip mais il est tout à fait envisegeable d'utiliser un autre format de sous-titres. Il suffira d'ajuster la prochaine étape en conséquence.

Il est recommandé de configurer les vidéos pour quelles ne soient visible que par le propriétaire de la chaîne.

Convertir les sous-titres en fichier texte

Techniquement, les fichiers de sous-titres sont des fichiers textes, mais pour notre utilisation, nous n'avons besoin que des textes mais pas des informations de synchronisation avec la vidéo. J'ai utilisé le site Subtitle Tools pour faire ça. Je n'explique pas tellement le fonctionnement est évident.

Nettoyer le fichier

Maintenant que nous avons un fichier sans les informations de synchronization, il nous reste quelques opérations pour avoir un fichier utilisable :

Suppression des lignes vides³⁾

sed -i '/^[[:space:]]*$/d' <fichier>

Mise sur une ligne de la totalité du texte⁴⁾

paste -sd" " <fichier1> > <fichier2>

Suppression des caractères ^M du texte avec Vim

C'est loin d'être parfait mais ça permet de réduire un peu la charge de travail humaine en la reportant sur les machines.

Plusieurs années après avoir mis en place ça, je viens de découvrir le service Scribe qui permet la transcription de fichiers audio et vidéo. Ça m'aurait épargné plusieurs étapes si je connaissais ça à l'époque.

¹⁾

Il faut avoir un compte et créer une chaîne au préalable

²⁾

extension .srt

³⁾

linux - Delete empty lines using sed - Stack Overflow

⁴⁾

How to use SED to join multiple lines?