A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Aperçu #02 - quaternum.net (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://www.quaternum.net/2022/01/15/apercu-02/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Aperçu #02 - quaternum.net</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://www.quaternum.net/2022/01/15/apercu-02/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Bâtir des compétences, un projet raté après l’autre.<br>
  71. L’index global non-indexé.<br>
  72. Les projets te gèrent.<br>
  73. Un octet à la fois.<br>
  74. Retourner la page (numérique) pour lire ce qui y apparaît.<br>
  75. Transformer les creux en montagnes.<br>
  76. Retourner la page (numérique) pour lire ce qui y apparaît.<br>
  77. Les inventions médiatiques forment une boucle rétroactive.<br>
  78. La contrainte est une forme de libération (pour certain·e·s).<br>
  79. Le carnet numérique comme forme contemporaine de récit différé ?<br>
  80. Tester, ajuster, développer : les trois visages de la maîtrise des fabriques.<br>
  81. Notre besoin de produire des objets tangibles est insatiable.<br>
  82. Des formes robustes du livre, nous préférons les fichiers durables au vélin.<br>
  83. Les commits (littéraires) c’est la vie.<br>
  84. Organiser, donner à voir, garder la trace : le versionnement individuel.<br>
  85. Les échos littéraires fracassent les murs.<br>
  86. L’écriture au creux de Bash.<br>
  87. Appréhender la complexité, terminal et interface graphique main dans la main.<br>
  88. La complexité des modèles de données versus la quantité d’information à gérer.<br>
  89. Ce que le livre fait au numérique, ou quelque chose comme ça.<br>
  90. Une étude peut-elle être autre chose que critique ? Non.<br>
  91. Simplifier la chaîne, quitte à s’ajouter des contraintes.<br>
  92. À force de simplifier pour les utilisateurs et les utilisatrices, il ne reste qu’une interface vide.<br>
  93. La portée de diffusion d’un outil est peut-être mesurable au nombre de détournements de celui-ci.<br>
  94. Parler des livres, encore et encore, toujours et toujours.<br>
  95. Empiler les textes pour former… Quoi ?<br>
  96. What you mean n’est pas toujours ce que vous pensez.<br>
  97. Aujourd’hui différentes formes du livre cohabitent, profitons-en.<br>
  98. La philosophie de l’outil influence la pratique d’écriture ?<br>
  99. Multimodal by design.<br>
  100. Les dates d’édition, de la pensée à la diffusionm en passant par l’inscription et la modification.<br>
  101. Paginer, surement un moyen comme un autre de nous rassurer, de ne pas plonger au fond des pages web infinies.<br>
  102. Tout rassembler, frôler l’écœurement.<br>
  103. Indexer ♫, imprimer ♬.<br>
  104. La globalité sinon rien.<br>
  105. Dans les creux du web.<br>
  106. Toutes ces montagnes de code qui reposent sur quelques mains…<br>
  107. Un an c’est long, un an c’est court.<br>
  108. Articuler les espaces d’écriture et de publication, ou que faire des notes et des brouillons.<br>
  109. Les fabriques scintillent mieux dans l’obscurité.<br>
  110. Conserver les commits (littéraires) comme des petits trésors.<br>
  111. Autant de saveurs subtiles pour une même légèreté.<br>
  112. Le déploiement du vide.<br>
  113. Le vide se déploie.<br>
  114. Les livres imprimés se nourrissent désormais des livres numériques.<br>
  115. La tolérance du balisage.<br>
  116. Et ainsi vint le temps de scripturer.<br>
  117. Fuire la complexité, et écorcher la littérature.<br>
  118. Les fabriques orientent notre façon d’écrire et de penser, et nous orientons ensuite les fabriques.<br>
  119. L’intimité des programmes.<br>
  120. Des fabriques personnelles pour une webdiversité.<br>
  121. L’antilivre comme antiartéfact ?<br>
  122. Des liens en pot, retirer le surplus.<br>
  123. Réinventer pour simplifier.<br>
  124. Le minimalisme comme solution pour l’atelier permanent.<br>
  125. Chiffrer le statique, observer les tendances semble tellement futile.<br>
  126. Le logiciel libre et Internet comme outils (techniques) d’émancipation, enfin.<br>
  127. Ce n’est pas parce que c’est beau que c’est bien (et inversement).<br>
  128. La formule magique de la publication numérique peut-elle s’abstraire des contraintes financières ?<br>
  129. Le concept d’open source est rapidement recouvert d’un tas de billets.<br>
  130. Réduire les idées au singulier pour les réunir.<br>
  131. Il y a tant à imaginer pour simplifier encore et encore.<br>
  132. La mémoire est une construction, et le numérique une base mobile de cette construction.<br>
  133. La mémoire se déploie dans l’espace, le numérique aplatit cet espace.<br>
  134. Les protocoles d’édition au cœur de Git.<br>
  135. Après l’adoption du libre c’est la culture du logiciel qu’il faut critiquer.<br>
  136. Dans la famille éditeur de texte je voudrai Stylo.<br>
  137. L’écriture est un travail de sculpture.<br>
  138. Voir petit pour envisager grand.<br>
  139. L’acte de publication ne peut pas être incertain.<br>
  140. Ce monde-là est bien réel.<br>
  141. L’encodage du monde en quelques fichiers.<br>
  142. Dans la main, dans la poche, un seul fichier, un seul livre.<br>
  143. L’uniformisation des outils d’écriture n’est pas une fatalité.<br>
  144. Le frisson de la découverte d’un nouveau protocole.<br>
  145. ce que vous voyez est ce qui est lu.<br>
  146. L’université devrait être toute contre les outils de formatage du texte.<br>
  147. Le texte est une matière sémantique.<br>
  148. Accepter de faire moins ce n’est pas renoncer.<br>
  149. Les outils d’édition numérique ne doivent pas être des chimères.<br>
  150. Les applications techniques sont désormais les éléments constitutifs de notre mémoire.<br>
  151. Imaginer et créer des dispositifs critiques.<br>
  152. Écrire plutôt qu’appuyer sur un bouton.<br>
  153. L’automatisation manuelle.<br>
  154. L’espace d’écriture signifie aussi l’acceptation des balises.<br>
  155. La consistance en quelques références bibliographiques…<br>
  156. La spatialisation des technologies d’écriture.<br>
  157. La décomposition du geste éditorial est permise par le déploiement continu.<br>
  158. Les livres déployés, se cachent dans les dépôts privées.<br>
  159. Automatiser les transformations.<br>
  160. La perfection n’est approchable que par la répétition — des termes.<br>
  161. L’ingénierie informatique et les études littéraires, comme une rencontre incontournable.<br>
  162. La liste des vœux, ce qui est écrit sera.<br>
  163. La confusion entre utiliser et programmer était complète.<br>
  164. Le livre web à la mode, ou presque.<br>
  165. Structurer pour mieux exposer, le texte est un détail de l’équation.<br>
  166. Le déploiement ne serait généralisable qu’à condition de modéliser ce qui doit être déployé.<br>
  167. Ce n’est pas parce que c’est générique que c’est moche.<br>
  168. Et les mots et les phrases se sont transformées au contact de leur nouveau tiroir.<br>
  169. Vous avez dit erreur ? Dites plutôt réussite reportée.<br>
  170. Puisque les métriques régissent le monde, cassons les métriques.<br>
  171. Des caractères de plomb et des lettres.<br>
  172. Déploiement en cours, vrrrrr bzzzzz.<br>
  173. Une espace et tout bascule.<br>
  174. La radicalité a besoin d’être structurée.<br>
  175. La simplicité ou quelque chose comme ça.<br>
  176. Quelle est ta vision du monde ?<br>
  177. Le monde n’est compréhensible qu’en l’expérimentant.<br>
  178. Le courage de dire, d’affirmer.<br>
  179. Comme si s’éloigner d’un objet permettait de mieux le comprendre.<br>
  180. Le logiciel libre comme condition.<br>
  181. L’artefact, nécessaire tout en évitant soigneusement l’essentialisme.<br>
  182. Un peu de Manguel, de Bolter, de McLuhan et de FLusser. Trop de mecs.<br>
  183. Une hybridation de média ou rien.<br>
  184. Plus tout à fait bleu nuit.<br>
  185. La pensée qui se recroqueville au lieu de se déployer.<br>
  186. L’artefact peut s’extraire de la dépendance à une fabrique.<br>
  187. Les artefacts gardent-ils la tracent de l’hybridation des langages et des programmes des fabriques ?<br>
  188. Il fallait bien figer des intuitions.<br>
  189. La perte de contrôle des interfaces, un peu moins de place laissée aux machines…<br>
  190. Le mouvement perpétuel de la recherche.<br>
  191. La mécanisation du livre est une forme finalement bien plus aliénante que la numérisation de celui-ci.<br>
  192. De la mécanisation à l’automation, du séquentiel au simultané, de l’individuel au global.<br>
  193. Des lectures fondatrices fortement criticables.<br>
  194. Une vision réduite et pourtant nécessaire du logiciel.<br>
  195. Pour une tiédeur intermédiaire des médiums ?<br>
  196. L’hypertexte comme passage intermédiaire, entre une mécanisation et une réelle automation.<br>
  197. Les technologies, grâce aux effets qu’elles ont sur nous, engendrent indirectement de nouvelles technologies — au secours.<br>
  198. L’hybridation n’est pas la multimodalité, même si la première permet la seconde.<br>
  199. L’imprimerie comme preuve de concept de l’industrialisation ?<br>
  200. Comment peut-on prétendre utiliser une machine sans la toucher ?<br>
  201. Le numérique serait un abandon de la fragmentation, si seulement…<br>
  202. Une autre automation est possible.<br>
  203. Sans hybridation la technologie meurt.<br>
  204. Le dialogue n’est possible avec les machines que sur un temps commun.<br>
  205. Soigner ou saboter la technologie, telle est la question.<br>
  206. L’instantanéité est une condition de travail avec les machines.<br>
  207. L’âge du numérique, l’espérer sans y être encore.<br>
  208. Le futur de l’imprimé se fait avec le numérique, et sans les conservateurs.<br>
  209. Le support et la littérature évoluent, le support seul n’est rien.<br>
  210. Les espaces d’écriture, à la fois matériels, inscriptibles, et parfois indépendants de supports imprimés ou numériques.<br>
  211. Tout est forme, rien n’est matériel, les médias s’autodétruisent.<br>
  212. Ne pas rougir de rêver d’écrire dans une autre vie ce livre qui a déjà vingt ans.<br>
  213. Sans structuration il n’y a pas d’espace d’écriture, peu importe le degré de matérialité de cet espace.<br>
  214. La littérature d’Abrüpt est très probablement furtive, mais la furtivité n’est-elle pas la seule caractéristique valable de la littérature ?<br>
  215. L’antilivre comme preuve de concept de la littérature.<br>
  216. Le numérique permet de repenser le livre imprimé lui-même, sans grande surprise pour qui ne prône pas le ceci tuera cela.<br>
  217. Deploy text, c’est Jay David Bolter qui le dit lui-même.<br>
  218. La méthode est la technique, l’outil n’en est que le résultat.<br>
  219. Mettre les formes est assurément la meilleure solution.</p>
  220. <p><em>Deuxième livraison de l’aperçu de mon <a href="/2020/03/29/atelier-de-these/">atelier de thèse</a>, du 151 au 300e <a href="/2020/03/29/atelier-de-these/#un-robot-fait-de-commits-litt%C3%A9raires">commits littéraires</a> écrits dans les creux de l’atelier.</em></p>
  221. </article>
  222. <hr>
  223. <footer>
  224. <p>
  225. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  226. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  227. </svg> Accueil</a> •
  228. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  229. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  230. </svg> Suivre</a> •
  231. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  232. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  233. </svg> Pro</a> •
  234. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  235. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  236. </svg> Email</a> •
  237. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  238. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  239. </svg> Légal</abbr>
  240. </p>
  241. <template id="theme-selector">
  242. <form>
  243. <fieldset>
  244. <legend><svg class="icon icon-brightness-contrast">
  245. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  246. </svg> Thème</legend>
  247. <label>
  248. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  249. </label>
  250. <label>
  251. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  252. </label>
  253. <label>
  254. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  255. </label>
  256. </fieldset>
  257. </form>
  258. </template>
  259. </footer>
  260. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  261. <script>
  262. function loadThemeForm(templateName) {
  263. const themeSelectorTemplate = document.querySelector(templateName)
  264. const form = themeSelectorTemplate.content.firstElementChild
  265. themeSelectorTemplate.replaceWith(form)
  266. form.addEventListener('change', (e) => {
  267. const chosenColorScheme = e.target.value
  268. localStorage.setItem('theme', chosenColorScheme)
  269. toggleTheme(chosenColorScheme)
  270. })
  271. const selectedTheme = localStorage.getItem('theme')
  272. if (selectedTheme && selectedTheme !== 'undefined') {
  273. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  274. }
  275. }
  276. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  277. window.addEventListener('load', () => {
  278. let hasDarkRules = false
  279. for (const styleSheet of Array.from(document.styleSheets)) {
  280. let mediaRules = []
  281. for (const cssRule of styleSheet.cssRules) {
  282. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  283. continue
  284. }
  285. // WARNING: Safari does not have/supports `conditionText`.
  286. if (cssRule.conditionText) {
  287. if (cssRule.conditionText !== prefersColorSchemeDark) {
  288. continue
  289. }
  290. } else {
  291. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  292. continue
  293. }
  294. }
  295. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  296. }
  297. // WARNING: do not try to insert a Rule to a styleSheet you are
  298. // currently iterating on, otherwise the browser will be stuck
  299. // in a infinite loop…
  300. for (const mediaRule of mediaRules) {
  301. styleSheet.insertRule(mediaRule.cssText)
  302. hasDarkRules = true
  303. }
  304. }
  305. if (hasDarkRules) {
  306. loadThemeForm('#theme-selector')
  307. }
  308. })
  309. </script>
  310. </body>
  311. </html>