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 27KB

5 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  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>
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Les histoires d'a (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://nrkn.fr/blog/2019/05/09/les-histoires-d-a/">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Les histoires d'a (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://nrkn.fr/blog/2019/05/09/les-histoires-d-a/">Source originale du contenu</a></h3>
  445. <p>Ce titre s’est invité tout seul. Soudainement. Alors que je ruminais sur ma pomme et que je listais dans un coin de ma tête les adjectifs que je me prêtais ou rencontrais le plus fréquemment à mon sujet. Il m’a amusé. Un bref instant, je l’ai même pensé issu de nulle part. Création spontanée, éclair de génie incompris, toute cette sorte de choses. Mais plus je jouais avec, plus il me paraissait familier. Et puis je me suis souvenu : Chichin et Ringer. Les Rita, quoi. Et cet air que j’ai régulièrement chanté, parfois hurlé à pleins poumons, qui me faisait bien rigoler et finissait rapidement par m’entêter. Tellement de souvenirs rattachés. Des bons, rien que des bons. Enfin… Je crois. Fichue mémoire émotionnelle. Comment avais-je donc pu ne pas lier tout de suite cette idée de titre de billet à cet incontournable tube des Mitsouko ? Sérieusement ? Peut-être parce que je nageais une petite brasse, semi-coulée / semi-engluée, au milieu de mon bourbier intérieur du moment. Sans aucun doute, oui. Très certainement aussi parce que mes « <i>a</i> » étaient bien différents. Ils me semblaient bien moins drôles, également. Bien qu’on puisse les tourner en dérision. Et comme je trouvais qu’ils étaient bien nombreux, je m’en suis même dressé une petite liste. Par écrit, cette fois. Juste les principaux. Juste histoire de voir. De bien les regarder de plus près. De les avoir sous le nez. Quitte à me le mettre dedans, tiens !</p>
  446. <p><i>Apathique</i>. Dans son sens courant, un peu. Mais avant tout dans le sens qu’on lui donne en psychopathologie. N’arrivant pas à régler convenablement les potentiomètres distincts des sentiments négatifs de ceux positifs, un jour, j’ai repéré qu’il y avait une grosse molette à tourner pour gérer d'un coup le volume global. Alors, malin, j’ai tout descendu d’un cran. Pour voir. Puis deux. Puis trois. Puis… Jusqu’à ce que je considère le niveau des durs tolérable et celui des doux suffisant. Oh, il me semblait bien que j’avais un peu exagéré sur mon réglage. Mais ça m’allait bien. Ça me facilitait beaucoup de choses, surtout celles que je ne comprenais pas. Celles que je ne contrôlais pas. Celles que je ne pouvais accepter, par manque d’armes. Celles que je ne voulais affronter, par manque de courage. Je voyais bien que la faiblesse de mes réactions en suscitait de bizarres, des réactions, dans mon entourage et au sein de mes relations. Mais, ô miracle de cette apathie, tout ça me touchait assez peu.</p>
  447. <p><i>Asocial</i>. Il semblerait que ce soit un crime de l’être, de nos jours. Alors, qu’on me pende. Qu’on m’immole. Qu’on me lapide. Ou qu’on m’écartèle, que sais-je. Mais je plaide coupable. De bon cœur. Sauf que je n’en fais pas une revendication pour autant. Je me suis longtemps demandé pourquoi. Je pensais que c’était simplement parce que je ne supportais pas l’autre. Puis j’ai remarqué que l’inconfort ne naissait véritablement qu’au niveau du groupe. Cela virait malaise dès lors que le groupe se faisait société plus que tribu. Je ne comprends pas ça. Je ne comprends pas ces organisations, ces hiérarchies, ces jeux de pouvoir ou de dupes, ces mascarades et simagrées. J’ai déjà du mal avec mes propres mensonges quand je me surprends à vouloir me faire avaler mes couleuvres, sabres vivants et mouvants. Alors, comprenez-moi, les mensonges et la méthode Coué organisés et collectifs, quand bien même ils me seraient servis à la sauce humaniste ou progressiste, je vous laisse mon assiette avec plaisir. Si vous la voulez, bien sûr. Pour ma part, j’ai suffisamment de ma propre merde à manger, merci.</p>
  448. <p><i>Athée</i> ? <i>Agnostique</i> ? Telle a été la question, régulièrement. Je m’interroge encore souvent sur mes allées et venues entre un fond de pensée cynique et un résidu de quête de foi. Il m’est assez difficile d’expliquer que cette foi-là n’a absolument rien de religieux. Et que si je suis prêt à croire en quelque chose de bien plus vaste et qui nous dépasse, je n’y vois jamais une quelconque divinité. Alors, j’ai fini par trancher une bonne fois pour toi : athée, pas moins, pas plus. Parler de ça me fait sourire en me rappelant la première rencontre, alors ado, avec ce nouveau camarade qui disait déjà bien me connaître : « J’ai fait mon catéchisme entier en ta compagnie. Ton nom était sur la place vide de la table que j’ai occupée pendant tout ce temps-là. » Je crois bien qu’à l’époque de cette confession, cela m’avait déjà fait rire. À croire que les dés ont déjà été jetés depuis bien plus longtemps que je ne le pensais. Et comme j’en suis au grand déballage : j’ai tout de même un exemplaire de la Bible, sur l’une de mes étagères, dans le coin réservé aux mythologies. Et je me suis même promis de la lire un jour. Ne soyons pas sectaires…</p>
  449. <p><i>Apolitique</i>. Mon cul ! Qu’est-ce que j’ai pu m’en raconter, des salades. Parce que, oui, j’ai longtemps proclamé que j’étais apolitique. Mais je peux avouer que ce n’était vraiment qu’une question d’allergie aux étiquettes, je pense. Ceux de gauche me trouvaient régulièrement trop à droite et ceux de droite trop à gauche. Forcément, ça n’aide pas. Il me restait le centre, alors ? J’ai voulu le croire un temps. Mais, non. Juste. Non. J’en conclus que je ne suis condamné à ne pas devenir un « encarté » et… Cette seule idée me réchauffe le cœur, au fond. De fait, j’exprime assez peu mes opinions politiques. J’évite, même. Je tâche de fuir ça comme la peste et le choléra. Mais je ne peux pas prétendre que la politique ne me concerne pas. Je ne peux plus me raconter ces vieilles balivernes comme quoi ma pensée serait apolitique. J’ai bel et bien un problème avec tout l’appareil supposé concrétiser et régir la politique, soit. Mais le simple fait de penser que notre régime national n’a jamais été la démocratie suffit sans doute à doucher toute impartialité. Je me rends. Et je pose donc mes cartes sur la table : <i>« Et pourquoi ne pas oser l’anarchie ? »</i></p>
  450. <p><i>Amoral</i> ? Ça, c’est bien une sacrée réflexion en cours. J’ai peur de ne pas être tiré d’affaire, avec celle-là. Il y a là une question d’absolu versus du relatif. Le (très) fin distinguo des philosophes entre morale et éthique, peut-être. Qu’est-ce que ça doit être compliqué, d’être philosophe, nom d’une pipe ! Quoique… Actuellement, nous avons pas mal de guignols estampillés d’un tel label. Méfiance, méfiance. Mais ne s’agit-il pas, dans mon cas tout du moins, d’un simple prolongement de mon asocialité ? De ma petite réticence personnelle envers la société, ses normes et ses codes, dans lesquels j’ai le plus grand mal à identifier quelles pourraient bien être ma place et ma position ? Je constate que façonner dans mon coin mes propres petits poids « Bien » et « Mal » à mettre dans les plateaux de ma balance m’apaise et m’aide à trouver un équilibre bien moins précaire ou douloureux. À moins qu’il ne s’agisse plutôt là d’un immoralisme nietzschéen. Il me faudra sans doute quelques longues entrevues avec l’ami Friedrich avant de savoir à quoi m’en tenir. À peu près. Ah ben ça promet, dites donc !</p>
  451. <p><i>Atypique</i>. Celui-ci, c’est parce que je l’entends bien plus souvent que je ne suis prêt à l’accepter. De fait, je suis d’une banalité affligeante. Mais peut-être est-ce bien là la source alimentant ce « atypique » qu’on m’envoie parfois à la figure. Je me demande donc si ce n’est pas le simple fait d’admettre ouvertement ma banalité qui me le vaudrait, compte tenu du contexte bancal de cette ère du narcissisme de masse. L’air de rien, ne pas pouvoir facilement coller une étiquette sur quelqu’un ne signifie pas que la personne est forcément atypique. Essayez donc de choisir une seule étiquette, ou une toute petite poignée, à coller sur du banal. À part celle de « banal » bien sûr, ce ne serait pas du jeu sinon. Allez ! Essayez pour voir. Moi, pendant ce temps-là, je vais me faire un poker menteur ou une réussite, tout seul dans mon coin. Ne revenez me voir que lorsque vous aurez terminé. Bref, celui-là, je l’écarte d’emblée. Ce n’est pourtant pas compliqué, si ? Ma façon de penser ? Ma façon d’être ? Je présente peut-être des traits autistiques, oui, et alors ? Comme tout le monde. N’est pas autiste qui veut, ma brave dame, mon bon monsieur. Look Ma’, je fais dans l’inclusif pour une fois !</p>
  452. <p>À la fin, le constat que je fais de mes « histoires d’a » n’est pas très glorieux. Ce qui ressort de tout cela est bien ce « <i>a</i> ». Le préfixe « <i>a-</i> ». Celui qu’il faut bien distinguer d’un « <i>anti</i> ». C’est un préfixe qui retranche, qui ignore, qui méprise ou qui élude. Il n’est ni pour, ni contre. Que l’on soit pour ou contre quelque chose implique de considérer la chose en question. De lui accorder de l’importance, de la rendre intrinsèque. Qu’il s’agisse de l’embrasser et la soutenir ou de la combattre et la dénoncer. Ce « <i>a-</i> », lui qui m'est si précieux, permet d'éviter, de se défiler au lieu de soit subir, soit affronter. Il ne représente même pas un déni franc et vigoureux. Il n’est rien de plus qu’une misérable sourdine qu’on poserait sur un déni possible. Histoire de se mettre confortable dans les plus grandes largeurs possible. Tous ces « <i>a-</i> » en guise de protection. Contre les mauvaises choses. Mais contre les bonnes, également. Cela revient à se regarder dans un miroir tout en ignorant son propre reflet. Un dédain poli, par ignorance. Mon dédain quotidien. Ce truc sur lequel je me condamne à ne rien bâtir.</p>
  453. <blockquote><p>On peut regarder toutes ces caractéristiques générales des représentations comme des contraintes interactionnelles qui pèsent sur l’acteur et transforment ses activités en représentations. Au lieu d’exécuter purement et simplement sa tâche et de donner libre cours à ses sentiments, il exprime le fait d’accomplir sa tâche et communique ses sentiments de façon socialement acceptable. En général, donc, la représentation diffère dans une certaine mesure de l’activité elle-même et par suite la falsifie inévitablement. Et, puisque l’acteur est obligé de se fier à des signes pour construire une représentation de son activité, l’image qu’il construit, si fidèle qu’elle soit aux faits, est exposée aux mêmes ruptures que les impressions. Bien que l’on puisse retenir l’idée du sens commun selon laquelle les apparences peuvent être discréditées par une réalité qui les contredit, il n’y a pas de raison bien souvent pour affirmer que les faits en désaccord avec l’impression considérée constituent une réalité plus réelle que ne l’est la réalité apparente qu’ils contredisent.</p><p>Erving Goffman - « La mise en scène de la vie quotidienne »</p></blockquote>
  454. </article>
  455. </section>
  456. <nav id="jumpto">
  457. <p>
  458. <a href="/david/blog/">Accueil du blog</a> |
  459. <a href="https://nrkn.fr/blog/2019/05/09/les-histoires-d-a/">Source originale</a> |
  460. <a href="/david/stream/2019/">Accueil du flux</a>
  461. </p>
  462. </nav>
  463. <footer>
  464. <div>
  465. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  466. <p>
  467. Bonjour/Hi!
  468. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  469. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  470. </p>
  471. <p>
  472. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  473. </p>
  474. <p>
  475. Voici quelques articles choisis :
  476. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  477. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  478. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  479. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  480. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  481. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  482. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  483. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  484. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  485. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  486. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  487. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  488. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  489. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  490. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  491. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  492. </p>
  493. <p>
  494. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  495. </p>
  496. <p>
  497. Je ne traque pas ta navigation mais mon
  498. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  499. conserve des logs d’accès.
  500. </p>
  501. </div>
  502. </footer>
  503. <script type="text/javascript">
  504. ;(_ => {
  505. const jumper = document.getElementById('jumper')
  506. jumper.addEventListener('click', e => {
  507. e.preventDefault()
  508. const anchor = e.target.getAttribute('href')
  509. const targetEl = document.getElementById(anchor.substring(1))
  510. targetEl.scrollIntoView({behavior: 'smooth'})
  511. })
  512. })()
  513. </script>