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.

4 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645
  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>La transition physique et psychique (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://marges.clairezuliani.com/binary_transition/2018/10/18/la-transition-physique-et-psychique.html">
  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. La transition physique et psychique (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://marges.clairezuliani.com/binary_transition/2018/10/18/la-transition-physique-et-psychique.html">Source originale du contenu</a></h3>
  445. <p>Dernière transition, la plus complexe, la plus longue, celle qui est encore en cours. La transition la plus personnelle, qui mêle physique et psychique.</p>
  446. <p><a href="https://marges.clairezuliani.com/binary_transition/2018/10/15/solo-plus-1an-trois-quart.html">Retrouver les autres transitions de la fin 2018</a></p>
  447. <p><em>En guise de prémbule, sachez qu’il va être question d’effondrement dans les lignes qui suivent. Si cette notion vous est complètement étrangère, vous pouvez prendre un moment pour parcourir <a href="https://medium.com/sismique/le-monde-change-et-on-ny-comprend-rien-b63d364830df">cet article</a>, qui fait un bon résumé transversal de la situation actuelle, des courants de pensée co-existant, de leurs leviers d’action…</em></p>
  448. <h2 id="alignement-de-planètes-et-effondrement">Alignement de planètes et effondrement</h2>
  449. <p>Ca fait déjà une petit poignée d’années que j’entends parler d’effondrement, phénomène de bouleversement majeur bien plus imminent que ce qu’on pourrait croire… Je savais que certains se penchaient sur la question, voyais vaguement de quoi il s’agissait mais gardais de façon tout à fait volontaire la notion à distance de moi. La priorité était ma reconversion, puis de faire démarrer mon activité, puis…</p>
  450. <p>Parallèlement, et un peu par hasard (mais y’a-t-il vraiment un hasard ?), alors que je débarquais dans les Vosges, cherchais où m’investir bénévolement et faute d’une offre aussi pléthorique qu’à Lyon (normal), je me liais à l’association la plus active du coin et me rapprochais d’un domaine avec lequel je ne me serais jamais naturellement acoquinée, à l’époque : celui de la transition écologique. Avec <a href="http://epinal-en-transition.fr/">Epinal en Transition</a>, je découvrais le réseau des villes en transition, le manuel de Rob Hopkins, la préoccupation d’autonomie (énergétique, alimentaire…). Je participe durant 3 ans à certains projets, mais le côté cueillette de plantes sauvages et confection d’éponges en tissus, ça va quand même trop loin pour moi.</p>
  451. <p>Et puis, il y eut un alignement de planètes, annonciateur de changements à venir comme tout alignement de planète qui se respecte.</p>
  452. <p>Début de l’alignement : depuis le printemps dernier, j’entends de plus en plus parler d’effondrement (à moins que ce soit juste que j’écoute plus ?). Pas uniquement de façon un peu lointaine et abstraite, mais par des personnes de plus en plus proches, notamment dans mon milieu professionnel. En marge des discussions techniques sur des forums et dans les couloirs de rencontres professionnelles, ça parle d’effondrement, d’à quel point on est foutu, de ce qu’il faudrait peut-être faire mais c’est pas gagné… C’est assez déprimant et j’aimerais me boucher les oreilles. Mais l’étau se resserre et la réalité de l’effondrement gagne en densité.</p>
  453. <p>Les planètes continuent de s’aligner et certains de mes paires font leur coming out public (surtout parmi les designers d’ailleurs : <a href="https://medium.com/@mcpaccard/s%C3%A9veiller-%C3%A0-l-effondrement-9832bfee8451">Marie-Cécile Paccard</a> ou <a href="https://graphism.fr/du-design-a-leffondrement-par-ou-commencer-collapsologie/">Geoffrey Dorne</a>, par exemple).</p>
  454. <p>En parallèle, une presse de plus en plus grand public s’empare du concept et en nourrit ses lecteurs, sous une chaleur caniculaire qui ne rend que plus réelle la réalité des dérèglements. Je prends de plus en plus la mesure de l’effondrement qui vient, cette perspective pénètre dans mon champs de vision du réel.</p>
  455. <p>Et puis, dernière planète à s’aligner, et non des moindres : après un bien long parcours entamé il y a bien longtemps, avant que ces questions d’effondrement ne viennent sur le devant de la scène, je suis finalement tombée enceinte (d’où la transition physique : hormones, gros bide, etc). Et ça change tout.</p>
  456. <p>La perspective du début d’une vie humaine dont je suis responsable, conjuguée à la perspective de la fin d’un monde. Paye ta synchronicité.</p>
  457. <p>A quoi va ressembler le monde dans lequel je vais faire grandir un petit humain ? Comment je me prépare, comment est-ce que je le ou la prépare, et qu’est-ce que je veux lui transmettre ? Comment créer les conditions qui lui assurent les moins pires conditions de vie possible, et est-ce seulement possible ?</p>
  458. <p>Alors que je suis le parcours classique de la bonne petite collapsologue (visionner la web-série <a href="https://www.next-laserie.fr/">Next</a>, lire la bibliographie de <a href="https://pabloservigne.com/livres/">Pablo Servigne</a>, puis creuser) pour essayer de donner un sens à tout ça et ne pas sombrer dans la dépression, les secousses s’en font sentir dans ma vie.</p>
  459. <h2 id="le-grand-écart">Le grand écart</h2>
  460. <p>Je crois que le plus grand inconfort émotionnel, au delà du yoyo de la phase de deuil, est de me retrouver au milieu d’un champs de contradictions, en plein grand écart.</p>
  461. <p>Se projeter dans un monde à venir qui nécessite des mesures radicales à prendre dès maintenant, mais être coincée dans le monde actuel.</p>
  462. <p>Ressentir un malaise dès que je suis tenue de prendre la voiture, ou lorsque je me retrouve à arpenter des allées débordantes de grandes surfaces, mais ne pas encore trouver de moyen de l’éviter.</p>
  463. <p>Se dire qu’il faudrait passer du temps à réapprendre des savoirs-faire manuels oubliés dans différents champs (soin, confection, agriculture, alimentation…), mais devoir aujourd’hui continuer à gagner sa vie.</p>
  464. <p>Avoir la tentation de l’achat de terrain, de l’habitat participatif, de l’auto-construction d’une maison écologique, mais n’avoir aucune réserve financière de côté.</p>
  465. <p>Avoir le désir de s’installer dans un endroit où la transition écologique est déjà en marche, où les questions de résilience sont prises au sérieux, mais avoir pour contrainte dans son choix d’installation les impératifs professionnels de son ou sa conjoint.e.</p>
  466. <p>Il me faut trouver une façon d’agir, ici et maintenant, un pied dans chaque monde, dans un contexte contraint qui m’est personnel, de manière à vaille que vaille limiter, un peu, la casse et ne pas perdre pied.</p>
  467. <h2 id="quest-ce-que-ça-change-personnellement-">Qu’est-ce que ça change personnellement ?</h2>
  468. <p>Il peut y avoir des tas de façons de réagir à la prise de conscience d’un effondrement, toutes légitimes. L’angle que j’ai choisi, celui qui actuellement me convient le mieux, est celui de l’action en réseau hyper territorialisée. L’enjeu pour moi est de trouver, consolider et participer à un réseau local d’initiatives de transition. L’idée est de faire tout ce qui est en mon pouvoir pour que mon nouveau territoire devienne le plus résilient possible.</p>
  469. <p>Alors je commence à tisser des liens avec le voisinage immédiat, même s’ils ne sont pas dans le même état d’esprit que moi.</p>
  470. <p>J’identifie les producteurs bio et raisonnés du secteur, j’identifie les boutiques, restaurants et cafés qui s’approvisionnent chez eux, et vais certainement de temps à autres aller bosser dans leurs établissements.</p>
  471. <p>Je cherche les organisations d’éducation populaires, les jardins partagés, les cafés associatifs.</p>
  472. <p>Je regarde ce que les collectivités locales annoncent en termes de développement durable ou d’agenda 21, je cherche à voir ce qui est réellement mis en oeuvre.</p>
  473. <p>Je distingue les différents groupes politiques locaux et regarde si certains manifestent un tant soit peu d’ambition écologique et sociale.</p>
  474. <p>J’essaye d’identifier une constellation de points et espère les relier.</p>
  475. <p>En plus de ce travail de reliance humaine, j’essaye aussi de me relier un peu plus à la terre. Je me rencarde sur la permaculture et m’impatiente de pouvoir m’y mettre, j’essaye de déterminer la meilleure solution de compostage pour nous, j’apprends à conserver les légumes.</p>
  476. <p>L’idée derrière n’est pas d’être autosuffisante toute seule, j’en serais bien incapable ! En apprenant à faire moi-même, je veux pouvoir contribuer, avoir quelque chose à apporter à un réseau d’entraide.</p>
  477. <p>Voilà pour l’implication personnelle. Reste à gérer la dissonnance inconfortable de travailler dans le développement web, l’un des facteurs les plus aigu (et ça ne va pas en s’arrangeant) de la crise énergétique qui vient, tout en prônant une certaine frugalité.</p>
  478. <h2 id="quest-ce-que-ça-change-professionnellement-">Qu’est-ce que ça change professionnellement ?</h2>
  479. <p>Pour conserver un équilibre psychologique, l’enjeu pour moi est d’aligner peu à peu les deux mondes, le monde en train de tomber dans lequel je vis et celui que j’espère voir advenir. Alors j’essaye d’établir un lien entre ma vie actuelle et la façon dont je voudrais vivre à l’avenir.</p>
  480. <p>Forcément, je m’interroge sur mes choix professionnels. A moyen ou court terme, est-ce que le numérique tel qu’on le pratique (obèse, dispensier, dans la surenchère) aura encore la moindre raison d’être, ou même la moindre possibilité d’existence (faute d’énergie pour l’alimenter) ? Est-ce qu’il ne vaudrait d’ailleurs pas mieux débrancher dès maintenant tous les tuyaux pour arrêter le carnage ?</p>
  481. <p>Peut-être bien. Mais, soyons honnêtes, les compétences numériques sont toujours recherchées et ce sont celles, pour le moment, qui ont la plus grandes probabilités de me permettre de gagner de l’argent (ce qu’il faut pour pouvoir subvenir aux besoins d’un petit humain qui ne sera pas autonome avant quelques temps, par exemple).</p>
  482. <p>Par contre, hors de question de question de continuer à travailler comme avant. C’est l’heure de la radicalisation.</p>
  483. <p>Le sentiment d’urgence qui m’anime depuis quelques mois m’aide sacrément à ne plus transiger. Ce n’est plus l’heure de chipoter et de faire des compromis.</p>
  484. <p>Ma radicalisation s’effectue sur les deux facettes d’un investissement professionel : le choix de mes outils et le choix de mes projets.</p>
  485. <h3 id="vers-la-décroissance-technique">Vers la décroissance technique</h3>
  486. <p>Depuis que je fais du développement web, je souffre d’un certain complexe lié à mon attirance pour les solutions simples et ma réticence à me plonger dans des systèmes complexes. Pourquoi cette frilosité envers la haute technicité ? Est-ce la preuve que le « vrai » développement informatique, celui avec des caisses de lignes, des milliards de dépendances, des trillions de systèmes imbriqués les uns dans les autres, c’est un truc de vrai bonhomme (et non de gonzesse avec ses ptits sites mignons) ?</p>
  487. <p>Est-ce que pour trouver une crédibilité (ne serait-ce qu’à mes propres yeux), il ne me faudrait pas pouvoir arguer d’une certaine expertise sur des technologies de hautes volées ? Quitte, si elle ne me conviennent pas, à rapidement et dédaigneusement les rejeter par la suite pour retourner à mes solutions toutes simples en toute connaissance de cause ?</p>
  488. <p>Finalement, en y réflechissant, mon positionnement était sans doute simplement tout à fait cohérent. La recherche de la simplicité, d’un retour à l’essentiel est déjà présent depuis plusieurs années. Mes lectures sur l’impossibilité d’appréhender une complexité trop importante, celles sur l’empreinte écologique des technologies gourmandes (sans compter un certain élitisme inégalitaire de ces technologies, utilisée pour concevoir des services numériques accessibles uniquement aux personnes les mieux équipées, et incitant donc à s’équiper toujours mieux), me confortent sur le bien fondé de mes aspirations.</p>
  489. <p>Alors, je ne souhaite plus transiger sur mon outillage technologique et je pars en quête des façons de faire du web les plus sobres et frugales possibles. Pour le moment, c’est en partie mes lectures, en partie mon intuition qui me guide. Instinctivement par exemple, je suis de plus en plus réticente envers les grosses structures technologiques (frameworks) à base de javascript réactif. La blockchain m’attire moins que jamais. J’ai par contre l’impression qu’il y a des pistes intéressantes à creuser dans les générateurs de sites statiques et la jamstack.</p>
  490. <p>Et à côté de ça, j’ai plus que jamais envie de pousser mes connaissances en accompagnement, facilitation, design d’expérience, pour ne pas créer de déchets numériques inutiles.</p>
  491. <p>Après le choix des outils, vient le choix des projets.</p>
  492. <h3 id="se-concentrer-sur-lessentiel">Se concentrer sur l’essentiel</h3>
  493. <p>La focale des projets dans lesquels je souhaitais investir mon temps était déjà relativement étroite, elle s’est probablement encore resserrée un peu.</p>
  494. <p>Ma priorité est à présent le territoire local. Si, en travaillant avec les organisations engagées de mon territoire, je peux contribuer à mieux connaître les structures qui amènent de la résilience par chez moi et à fortifier leur action, alors c’est tout gagné !</p>
  495. <p>C’est aussi (au-delà du besoin de subsistance, qui ne suffirait pas à lui tout seul à me faire rester dans le secteur) ce qui me pousse à continuer le développement web, d’ailleurs. D’ici à ce que le système numérique s’écroule, je pense qu’il y a besoin de faire circuler les idées, d’appuyer les initiatives qui vont dans le sens de la transition, pour qu’elles croissent le plus rapidement possible tant qu’il est temps.</p>
  496. <p>Il me reste à constituer dans le coin un réseau de complices web sur la même longueur d’onde que moi, pour pouvoir adresser un maximum de demandes, quelles que soient les compétences requises, quelle que soit l’envergure du projet.</p>
  497. <p>D’ailleurs en parlant de local, peut-on penser un circuit court du web ? J’ai commencé à repérer les <a href="https://www.ffdn.org/fr/membres">FAI associatifs</a> et les <a href="https://chatons.org/fr/find">chatons</a> des environs, je sens que ça pourrait être utile.</p>
  498. <p>Je n’exclus pas malgré tout les projets nationaux, que je mènerai de préférence avec les copains disséminés en France, et sur lesquels je serai très regardante tendance casse-bonbon en terme d’éthique, de valeurs, de sobriété et d’apports sociaux et écologiques.</p>
  499. <p>Peut-être aussi vais-je surtout vouloir m’investir dans les domaines dans lesquels internet apporte, à mon sens, une vrai plus value (plutôt qu’un faux besoin). Je pense par exemple à la capitalisation et la diffusion d’informations, ou à des utilitaires spécifiques et mutualisés pour automatiser certaines tâches.</p>
  500. <h3 id="une-agence-radicale">Une agence radicale</h3>
  501. <p>De toutes ces considérations émerge une vitrine d’agence en version bêta. Elle s’appelle <a href="https://www.lassembleuse.fr/">l’assembleuse</a>, le vernis est très frais et non définitif.</p>
  502. <p>A travers cette vitrine, j’ai envie de donner une orientation résolument politique à mon action.</p>
  503. <p>J’ai aussi envie d’en faire une marque collective ultra légère et sans contrainte. Un étendard qui permette de faire connaître et mettre en réseau des professionnels engagés ; qui permette de constituer des équipes ad hoc et fluides, par affinité, au gré des projets ; qui permette d’expérimenter une foultitude de choses pour un web responsable.</p>
  504. <p>Il y a volontairement très peu de cadres définis pour le fonctionnement de cette agence qui sera l’outil qu’on en fera. Si ça vous intrigue, si vous vous sentez concernés, si vous voulez en discuter, n’hésitez pas : la <a href="https://www.lassembleuse.fr/contact">boîte mail de l’assembleuse</a> est ouverte.</p>
  505. </article>
  506. </section>
  507. <nav id="jumpto">
  508. <p>
  509. <a href="/david/blog/">Accueil du blog</a> |
  510. <a href="https://marges.clairezuliani.com/binary_transition/2018/10/18/la-transition-physique-et-psychique.html">Source originale</a> |
  511. <a href="/david/stream/2019/">Accueil du flux</a>
  512. </p>
  513. </nav>
  514. <footer>
  515. <div>
  516. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  517. <p>
  518. Bonjour/Hi!
  519. 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>
  520. 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>).
  521. </p>
  522. <p>
  523. 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>.
  524. </p>
  525. <p>
  526. Voici quelques articles choisis :
  527. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  528. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  529. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  530. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  531. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  532. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  533. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  534. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  535. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  536. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  537. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  538. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  539. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  540. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  541. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  542. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  543. </p>
  544. <p>
  545. 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>.
  546. </p>
  547. <p>
  548. Je ne traque pas ta navigation mais mon
  549. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  550. conserve des logs d’accès.
  551. </p>
  552. </div>
  553. </footer>
  554. <script type="text/javascript">
  555. ;(_ => {
  556. const jumper = document.getElementById('jumper')
  557. jumper.addEventListener('click', e => {
  558. e.preventDefault()
  559. const anchor = e.target.getAttribute('href')
  560. const targetEl = document.getElementById(anchor.substring(1))
  561. targetEl.scrollIntoView({behavior: 'smooth'})
  562. })
  563. })()
  564. </script>