Le site arthur.bebou.netlib.re - retour accueil
git clone git://bebou.netlib.re/arthur.bebou
Log | Files | Refs |
index.sh (11191B)
1 #! page
2 title: Naviguer en md dans vim
3 author: Arthur Pons
4 description: Il est possible de naviguer sur un site web de page md en page md dans vim en se passant totalement de navigateur web. Voici comment faire.
5 publication: 2024-04-26
6
7 sectionmd: main
8
9 D'expérience, sur un vieil ordinateur, faire tourner un naviguateur web est
10 l'une des choses "classiques" les plus gourmandes en mémoire et en calcul.
11 S'en passer permettrait donc d'allonger la durée de vie de certains terminaux
12 en rendant l'usage du web plus léger. La solution que nous allons documenter
13 par la suite possède d'autres avantages que nous allons expliquer à la fin de
14 l'article.
15
16 ## Récupérer le contenu d'une page sur le web sans navigateur
17
18 Les serveurs web écoutent sur internet et répondent à des requêtes HTTP.
19 Pour contruire et envoyer des requêtes HTTP nous pouvons utiliser des logiciels
20 dédiés tels que `wget` et `curl`. Nous allons utiliser `curl` par la suite.
21
22 curl -s arthur.bebou.netlib.re/index.md
23
24 Unix et environnement ?
25 [Liste des articles au format tsv](http://arthur.bebou.netlib.re/articles.tsv)\
26 Chaque page est disponible au format :
27
28 * `.html` - de l'html
29 * `.sh` - les sources
30 [...]
31
32 Si l'on veut lire l'article dans un pager ou un éditeur de texte ou peut piper
33 la sortie de curl.
34
35 curl -s arthur.bebou.netlib.re/index.md | less
36 #ou
37 curl -s arthur.bebou.netlib.re/index.md | vim -
38
39 Avec un petit `:setf markdown` on a même de la coloration syntaxique !
40
41 ## Naviguer dans vim
42
43 > Super mais comment on fait pour naviguer dans le site ?
44
45 Nous allons pouvoir le faire grâce à une fonctionnalité magique de vim, le fait
46 de pouvoir traiter le texte affiché à l'écran comme du code. On exécute ce que
47 et là où l'on lit. Ainsi, si un lien vers un autre fichier md apparaît dans le
48 document il est possible d'y préfixer la commande curl qui va bien, d'exécuter
49 la commande et récupérer le contenu du lien.
50
51 Par exemple faire de :
52
53 2024-04-26 - **[Naviguer en md dans vim](http://arthur.bebou.netlib.re/navigation/index.md)**
54
55 ça :
56
57 2024-04-26 - **[Naviguer en md dans vim]
58 curl -s http://arthur.bebou.netlib.re/navigation/index.md
59
60 se mettre sur la ligne avec le curl et taper `!!sh` puis faire entrer :
61
62 2024-04-26 - **[Naviguer en md dans vim]
63 # Naviguer en md dans vim
64
65 D'expérience, sur un vieil ordinateur, faire tourner un naviguateur web est
66 l'une des choses "classiques"[^1] les plus gourmandes en mémoire et en calcul.
67 S'en passer que c'est possible permettrait donc d'allonger la durée de vie de
68
69 Il est ensuite possible de lire cet article. `u` reviendra en arrière (comme un
70 `ctrl+z` dans la plupart des logiciels) et permettra de reprendre la lecture
71 de la première page. Il est clair que cette navigation n'est pas idéale.
72 Personnellement dans un navigateur classique je préfère ouvrir mes liens
73 dans un nouvel onglet. Ca tombe bien, vim permet d'ouvrir des fenêtres.
74 Si vous êtes dans vim vous pouvez lancer la commande `:vnew` pour constater
75 qu'une nouvelle fenêtre verticale s'est ouverte. Si l'on pouvait y lancer notre
76 commande `curl` nous aurions donc le nouvel article dans une fenêtre séparée.
77 Pour cela il est possible de d'abord copier le lien, ouvrir la fenêtre, y coller
78 le lien copié puis finalement y exécuter la commande. Puisqu'en markdown les
79 liens sont (généralement) entre parenthèses la commande finale sera :
80
81 yi(:vnew<CR>p!!xargs curl -s<CR>
82
83 endsection
84
85 <<\@ ./details "Explication détaillée de la commande" | save_html main
86 * `y` pour copier ("yank"), `i` pour "inner", `(` pour le délimiteur. Autrement
87 dit on copie tout ce qui se trouve à l'intérieur des parenthèses.
88 * `:vnew<CR>` pour ouvrir une nouvelle fenêtre verticale. `<CR>` permet de
89 simuler le fait d'appuyer sur la touche entrée.
90 * `p` pour coller le lien.
91 * `!!` pour filtrer la ligne courante dans une commande.
92 * `xargs curl -s`, la commande en question, `xargs` mettra ce qui se trouve
93 dans stdin (à savoir le lien qu'on vient de coller) en argument de `curl`.
94 * `<CR>` pour exécuter le tout.
95 @
96
97 sectionmd: main
98
99 Il est possible de s'en faire une macro en ajoutant
100
101 map <F6> yi(:vnew<CR>p!!xargs curl -s<CR>
102
103 dans son `.vimrc`. `<F6>` peut être modifié pour y mettre la touche de son
104 choix.
105
106 Pour le moment cette macro n'est utile que pour ouvrir des documents qui se
107 lisent bien dans un éditeur de texte. Quant est-il si le lien renvoie vers une
108 image ? Pour remédier à ce problème il est possible de créer un script dédié
109 qui va, sur la base de l'url, déclencher plutôt tel ou tel comportement. Ce
110 script pourrait s'appeler `plumber.sh` et avoir la tête suivante :
111
112 case $1 in
113 *"youtube.com" )
114 mpv --save-position-on-quit --ytdl-format="$format" --cache-secs=30 --volume=50 "$1" 2> /dev/null
115 ;;
116 *".jpeg" )
117 feh -. "$1"
118 ;;
119 *".md" )
120 curl -Ls "$1"
121 ;;
122 esac
123
124 Ainsi si le lien est un lien youtube on lance mpv, si c'est une photo ou
125 l'ouvre avec feh et si c'est un fichier markdown on utilise directement curl.
126
127 Il faudra modifier la macro en remplaçant `curl -s` par le chemin du script
128 `plumber.sh`. Ce concept de script agissant sur le contenu textuel ouvert dans
129 un éditeur de texte est une idée
130 importante dans le système d'exploitation [plan
131 9](https://en.wikipedia.org/wiki/Plan_9_from_Bell_Labs) où il porte le nom
132 de... [plumber](https://en.wikipedia.org/wiki/Plumber_(program))
133 et s'applique plus généralement à la totalité de l'os.
134
135 Le site sur lequel vous lisez cet article existe entièrement
136 en markdown. Essayez de modifier `index.html` en `index.md` (ou de l'ajouter à
137 la fin) pour vous en convaincre. Cela veut dire que l'on peut le consulter sans
138 jamais ouvrir un navigateur web, rendant possible la navigation sur du matériel
139 très contraint.
140
141 ## Comparatifs
142
143 ### Performances
144
145 Tout est mesuré sur un raspberry 3b requêtant la page que vous lisez. Les
146 résultats pourraient être très différents si l'on faisait le comparatif sur un
147 site très lourd. Ici les écarts sont presque aussi petits que possibles puisque
148 j'essaye de faire de l'html assez léger. Disons que c'est le *best case scenario*
149 pour firefox.
150
151 | | Nav "sobre" | Nav firefox |
152 |---|-------------|-------------|
153 | Taille sur le disque | ~8Mo | 237Mo |
154 | Temps de chargement d'une page de zéro | < 0,1s | ~ 10s |
155 | Temps de chargement si firefox ou vim déjà ouvert | < 0,1s | ~ 2s |
156 | Données téléchargées | 6,26Ko | 14,31Ko |
157 | Nb requêtes | 1 | 3 |
158
159 Dans un contexte où le stockage serait vraiment contraint il se peut que
160 firefox soit trop gros pour l'installer mais si l'on parle réduction de
161 l'impact environnemental du numérique ce ne sont pas quelques centaines de Mo
162 de stockage sur une carte SD qui feront vraiment la différence.
163
164 La quantité de données est plus faible côté markdown parce que c'est un langage
165 avec moins de cérémonie, `# machin` vs `<h1>machin</h1>` et parce que l'on ne
166 télécharge pas de css.
167
168 Au final c'est, je pense, vraiment le temps d'exécution qui fait une la
169 différence. Je crois me souvenir qu'en moyenne une personne ne tolère que
170 2/3 secondes de chargement avant d'abandonner.
171 Charger la page en 10 secondes en partant de zéro et en quelques secondes à
172 l'ouverture d'un onglet *dans le meilleur des cas* on s'approche vraiment de
173 cette limite. Une personne pourrait donc juger la navigation web via firefox
174 sur son vieil ordi non satisfaisante et serait fortement tentée de changer de
175 matériel. Et pourtant le rasp est tout à fait capable d'ingérer ces données si
176 on le fait via une interface différente.
177
178 ### Limites
179
180 Évidemment la comparaison a ses limites. L'expérience de navigation dans vim
181 est peut-être fonctionnelle et, de plusieurs façons, supérieure à l'utilisation
182 d'un navigateur classique mais n'est certainement pas identique. Exit le css et
183 une bonne partie de la forme. Je pense que beaucoup de sites
184 devraient et pourraient se résumer à du markdown markdown mais est vrai que
185 certains ne feraient pas vraiment sens sous un format markdown.
186
187 On hérite aussi des désavantages du markdown, de sa syntaxe parfois limitée et
188 pas toujours parfaitement agréable à lire non plus. Par exemple le
189 petit accordéon que j'utilise dans cet article ne peut pas être fait en
190 markdown. Résultat ? La version markdown de cette page contient de l'html pour
191 cette partie là. Je pourrais modifier mon générateur de site pour contourner ce
192 souci mais au mieux je serais obligé d'intégrer une syntaxe strictement
193 personnelle annonçant l'existence d'un accordéon qui ne sera pas forcément
194 comprise par tous·tes et certainement pas par les parsers de markdown.
195
196
197 ### Autres avantages
198
199 Étant dans un éditeur de texte il est très facile d'enregistrer le document pour
200 le consulter en mode hors-ligne. C'est également possible de le faire pour un site
201 web mais l'affordance est moins incitative.
202
203 Il est possible d'écrire directement dans le document pour prendre des notes.
204 Non seulement on exécute ce que l'on et là où l'on lit mais on y écrit
205 également ! vim est une ui qui permet de fondre ces trois actions en un seul
206 espace. Une conséquence de cela qui est, pour mes usages, très agréable, est
207 qu'il est possible de suivre des tutoriels contenant du code en exécutant
208 directement le code dans le document ! Si le document consulté est
209 un tutoriel python il y apparaîtra probablement quelque chose comme :
210
211 - - -
212
213 Pour afficher une chaîne de caractère on peut utiliser la fonction `print` :
214
215 print("Coucou tout le monde !")
216
217 - - -
218
219 Si je lis ce tuto en markdown dans vim je peux me placer sur cette ligne, taper
220 `!!python3` et obtenir son résultat dans le buffer vim[^1]. Cela économise des copier
221 coller mais permet également de modifier et tester la ligne de code directement
222 dans l'éditeur. Niveau sécurité il est toujours recommandé de *ne pas exécuter sur
223 votre machine du code que vous ne comprenez pas* mais au moins dans un éditeur de
224 texte il n'est à priori pas possible de [manipuler ce qui se retrouve dans votre
225 presse papier](https://research.securitum.com/the-curious-case-of-copy-paste/).
226 Il est possible que cela vous fasse penser au concept de "notebook" à la Jupyter
227 et c'est tant mieux parce que ça y ressemble ! Il est tout à fait possible
228 d'écrire un document qui mèle texte et code dans vim et n'y exécuter que le code.
229 Avec une [macro pour le faire facilement](/macrosvim) et notre plumber on peut
230 créer des documents vraiment intéressants.
231
232 Pour le shell en particulier suivre un tuto sous cette forme est
233 particulièrement agréable. Par exemple si un article contient des chemins
234 bidons partout dans ses exemples vous pouvez faire un remplacement dans tous le
235 fichier puis `!!sh` les commandes. Dans cette
236 [faq](http://bebou.netlib.re/faq/) il est écrit `votre_utilisateurice` partout
237 où devrait apparaître le nom de votre compte. Si celui-ci est `alice` alors on
238 peut lancer la commande vim `:%s/votre_utilisateurice/alice/g` et suivre le tuto
239 comme s'il avait été personnalisé pour soi.
240
241 [^1]: en réalité non puisque j'écris les blocs de code avec des tabulations et python n'est donc pas content...
242