A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

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>