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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581
  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>Pause (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://mcgodwin.com/articles/pause">
  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. Pause (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://mcgodwin.com/articles/pause">Source originale du contenu</a></h3>
  445. <p><em>Tl;dr : je me lance dans une nouvelle expérimentation pour tenter de réduire l'éco-anxiété et le surplus de charge mentale que je ressens trop fortement depuis quelques semaines en faisant une pause "réseaux sociaux" d'un mois et demi environ. Je viendrai documenter les résultats début septembre 2019. J'aurai accès à mes e-mails les jours de semaine depuis mon ordinateur connecté au wifi, en cas d'urgence favorisez les SMS et les appels.</em></p>
  446. <p>—</p>
  447. <p>Cela fait quelques temps que je mène de petites expérimentations autour du numérique et de ses usages. Depuis quelques semaines, je ressens un malaise face aux réseaux sociaux, malaise difficile à décrire et à gérer au quotidien, fait d'un manège sans fin de répulsion / attraction. Aujourd'hui, j'ai atteint un point de bascule où je sens qu'il faut que j'aille plus loin dans le balisage de mes usages.</p>
  448. <p>J'ai publié il y a peu un billet sur mon blog dédié à la documentation de ma propre résilience. Depuis décembre 2018, sous prétexte de changer de machine et tester la réédition du Nokia 3310, <a href="http://resilience.mcpaccard.com/notes/du-besoin-instantane-l-art-de-repasser-au-dumbphone">j'ai pu interroger en profondeur ma relation tumultueuse à mon smartphone et aux réseaux sociaux</a> et aux nombreuses sollicitations que ces derniers arrivaient encore à jeter sur mon chemin. Il y a quelques jours, je m'adonnais à la lecture de <a href="https://www.resilience.org/stories/2019-07-19/responding-to-collapse-uncertain-future-forums-first-week/">cet excellent article</a>, encore une fois en rapport avec l'éco-anxiété et l'anxiété tout court due à l'état actuel de notre monde. Une citation a vraiment retenu mon attention : </p>
  449. <p><em>"The more you understand a problem, the more you want to do something about it. Unfortunately, the larger the scale of the problem, the less effective your individual actions will probably be. <strong>This is what's so exhausting about Facebook, Twitter, and other social media: they constantly (and without warning dump you right into the awareness of problems at every possible scale</strong>."</em></p>
  450. <p>L'épuisement est réellement présent dans ma vie. La charge mentale constante faite de toutes les peines de mes semblables face aux <em>predicaments</em> insolvables du monde devient ingérable. Il y a une lame de fond, une rumeur, une impression, et certains jours elle devient un peu plus forte. Un petit chant discret qui me dit qu'il y a tant à expérimenter, à découvrir, à ressentir dans les actes et les faits les plus simples que le monde a à nous offrir.</p>
  451. <p>Aujourd'hui, au lendemain de l'élection (sic) de Boris Johnson à la tête du Royaume Uni et à la ratification du traité CETA, après la rage et l'impuissance ressenties à l'écoute des critiques envers Greta Thunberg invitée à l'Assemblée Nationale, je sens clairement que la balance doit peser du côté de ma santé mentale, au détriment de mon information en temps réel et du lien avec mes <em>followers</em>. <strong>Twitter et compagnie pèsent un poids considérable dans nos existences.</strong></p>
  452. <p>Il est temps pour moi de faire ce que je sais faire de mieux, en tant que designer : ajouter un maximum de friction entre moi et les réseaux sociaux.</p>
  453. <h2>Pas assez ?</h2>
  454. <p>Mon iPhone ne relaie plus aucune notification venant des réseaux sociaux que j'utilise encore (Twitter, Instagram, Mastodon, Pinterest). J'ai tout condamné au silence. Ne m'arrivent que les emails, les SMS, les applications de discussion (WhatsApp dont je n'ai pas encore pu me débarrasser, Wire et Basecamp pour les projets <a href="https://www.ixda-lyon.fr">IxDA</a>), les appels, les applications pratiques (location de véhicules électriques sur Lyon, Apple Plans, Vinted, MyFitnessPal).</p>
  455. <p>J'ai fait du ménage dans les personnes que je suis, notamment sur mon compte Twitter professionnel. J'ai décidé de ne plus suivre autant d'hommes blancs dans la tech et de les remplacer par des femmes dans le design et la tech, surtout des femmes qui ne sont pas blanches et/ou qui font partie de la communauté LGBTQI+, qui sont en situation de handicap, neuro atypiques, etc. Ce changement a fait grand bien à ma timeline, mais le monde est dans un tel état que ça ne suffit pas à atténuer l'afflux de mauvaises nouvelles, qui atteignent tout le monde sans distinction. Travailler sur <a href="https://common-futures.org">l'animation de Common Future[s]</a> n'est pas de tout repos non plus. L'état du monde présent, mais aussi l'appauvrissement quasi-quotidienne des futurs encore possibles contribuent à augmenter mon stress latent.</p>
  456. <p>Et pourtant, je me retrouve encore à passer des heures sur Twitter. J'ai retiré de l'écran d'accueil toutes les apps sociales, mais elles sont tout de même accessibles via la recherche. Trop facile. Pas assez de friction. <a href="https://marieguillaumet.com">Ma consœur Marie Guillaumet</a> à qui je partageais mes inquiétudes me faisait part de ses propres tactiques pour limiter l'anxiété générée par les réseaux sociaux. Supprimer l'accès à ses comptes professionnels sur son téléphone, supprimer même les apps et ne les réinstaller que ponctuellement, quand elle participe à une conférence par exemple. Ou encore <em>mute</em> des personnes ou des gros comptes un peu <em>techbro</em> qui n'apportent que du bruit. Relativiser sa propre participation à Twitter, créer des listes thématiques pour isoler certains sujets, ne consulter les réseaux que quand elle se sent mentalement prête.</p>
  457. <h2>Plus loin.</h2>
  458. <p>Aujourd'hui, j'ai envie d'aller plus loin. J'ai envie de lire beaucoup plus, j'ai énormément de livres dans ma liste d'envies, je m'étais donné le challenge de lire au moins un livre par mois en 2019, je n'y suis pas encore car je ne prends pas consciemment le temps nécessaire pour le faire. J'ai envie de me remettre plus sérieusement à la couture, avec l'objectif de ne plus acheter de vêtements neufs. <strong>J'ai envie d'enfin avoir la liberté d'esprit de me consacrer aux activités et aux projets tangibles qui me font me sentir vivante</strong>, notamment <a href="https://common-futures.org">l'animation de Common Future[s]</a>, dont les heuristiques de design anthropocène attendent sagement au fond d'un pad que je daigne avoir la force de les fignoler. J'en ai assez de la charge mentale quasi constante de devoir gérer mes projets personnels, professionnels ET le travail que représente la maintenance d'une image de marque sur Internet à travers Twitter.</p>
  459. <p>J'ai supprimé définitivement mon compte Facebook il y a quelques années maintenant, et je n'en ai jamais ressenti de manque. Il m'est sûrement arrivé de louper des invitations à des sorties entre ami·es, mais soit c'est la vie et j'ai usé de mon temps autrement, soit les ami·es en question ont réussi à me contacter par un autre biais. J'ai pensé désactiver mes quelques comptes Twitter et Instagram. Je n'en ai pas le courage pour le moment. Instagram est parfois le dernier lien que j'entretiens avec des ami·es à l'autre bout du monde, et même si nous sommes espionnés contre notre gré et que nos timelines (qui n'en sont d'ailleurs plus) sont blindées d'une publicité toutes les 3 photos, j'avoue que ce réseau m'apporte encore un peu de joie. De FOMO certes, mais de joie. Mastodon est un cas à part, je n'en parlerai que très peu et je conserverai probablement un lien avec ce réseau depuis mon navigateur desktop quand je suis connectée au wifi. Deux raisons principales : le fait que pour le moment je ne suive pas grand monde, et la très pratique fonctionnalité de "content warning" qui évince 80% des mauvaises nouvelles ou des sujets problématiques.</p>
  460. <p>Twitter est plus complexe. Le déversement de haine, d'agressivité, de nouvelles aussi terribles que le monde qui nous entoure et ce sans filtre et sans possibilité de s'en préserver est certes très dommageable au quotidien, mais c'est aussi un réseau très riche qui m'apporte une veille précise, élaborée sur plus de 10 ans d'utilisation. J'ai l'impression que désactiver mon compte professionnel va me porter préjudice, qu'il n'est pas bon de ne pas avoir de présence sur ce réseau quand on est designer numérique, etc etc. C'est pourquoi je pense à commencer par faire une pause.</p>
  461. <p>Aller plus loin, c'est tout d'abord ajouter le maximum de friction possible pour m'empêcher de céder à mes usages habituels, pour limiter au maximum la perte de temps avec peu de bénéfice "bonheur" en retour. Une pause est l'outil idéal pour cela. </p>
  462. <p>Je vais donc arrêter toute utilisation de Twitter jusqu'au 10 septembre 2019. La date n'est pas arbitraire, elle coïncide avec ma participation à <a href="https://gen.grandestnumerique.org/speaker/marie-cecile-godwin-paccard/">la conférence GEN à Metz le 12 septembre</a>. D'ici là, je vais donc :</p>
  463. <ul>
  464. <li>supprimer Tweetbot de mon ordinateur ET de mon téléphone,</li>
  465. <li>remettre ma carte SIM dans mon Nokia 3310,</li>
  466. <li>éteindre mon iPhone,</li>
  467. <li>ne le rallumer qu'en cas de besoin avéré, comme une application ou un service spécifique, et ce ponctuellement et uniquement en wifi.</li>
  468. </ul>
  469. <p>Je conserve :</p>
  470. <ul>
  471. <li>Slack avec un seul espace de travail (dédié à un groupe d'amies car il m'apporte de la joie),</li>
  472. <li>Instagram (le réseau le + "safe" en termes d'éco-anxiété) et ce uniquement sur mon vieil iPad Mini qui reste à la maison et sur lequel l'app Instagram n'est ni optimisée ni agréable à utiliser.</li>
  473. </ul>
  474. <p>Je suis toujours joignable par SMS et par appel téléphonique pour mes proches et les personnes qui ont mon numéro, par e-mail et messageries instantanées uniquement quand je serai sur mon ordinateur connecté au wifi. Je n'aurai plus de quoi prendre des photos décentes, et de toute manière plus de quoi les partager, la connectivité du Nokia 3310 étant plus que spartiate. Je n'aurai même plus la tentation d'aller me connecter à Twitter, puisque je n'y aurai même plus accès.</p>
  475. <p>Suite à cette parenthèse déconnectée, je ferai le bilan précis de mon éco-anxiété et des bénéfices et ratés de la prise de recul. Je prendrai alors les décisions qui correspondront à ce bilan : il est possible qu'une des conclusions m'amène à la désactivation de certains comptes, en tout cas l'idée est présente en tâche de fond...</p>
  476. <p>Rendez-vous en septembre, envoyez-moi un SMS en cas d'urgence ^^</p>
  477. </article>
  478. </section>
  479. <nav id="jumpto">
  480. <p>
  481. <a href="/david/blog/">Accueil du blog</a> |
  482. <a href="https://mcgodwin.com/articles/pause">Source originale</a> |
  483. <a href="/david/stream/2019/">Accueil du flux</a>
  484. </p>
  485. </nav>
  486. <footer>
  487. <div>
  488. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  489. <p>
  490. Bonjour/Hi!
  491. 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>
  492. 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>).
  493. </p>
  494. <p>
  495. 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>.
  496. </p>
  497. <p>
  498. Voici quelques articles choisis :
  499. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  500. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  501. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  502. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  503. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  504. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  505. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  506. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  507. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  508. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  509. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  510. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  511. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  512. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  513. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  514. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  515. </p>
  516. <p>
  517. 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>.
  518. </p>
  519. <p>
  520. Je ne traque pas ta navigation mais mon
  521. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  522. conserve des logs d’accès.
  523. </p>
  524. </div>
  525. </footer>
  526. <script type="text/javascript">
  527. ;(_ => {
  528. const jumper = document.getElementById('jumper')
  529. jumper.addEventListener('click', e => {
  530. e.preventDefault()
  531. const anchor = e.target.getAttribute('href')
  532. const targetEl = document.getElementById(anchor.substring(1))
  533. targetEl.scrollIntoView({behavior: 'smooth'})
  534. })
  535. })()
  536. </script>