A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 28KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  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>Going old school: how I replaced Facebook with email (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://blog.chaddickerson.com/2019/01/09/replacing-facebook/">
  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. Going old school: how I replaced Facebook with email (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://blog.chaddickerson.com/2019/01/09/replacing-facebook/">Source originale du contenu</a></h3>
  445. <p>In November 2017, I deactivated my account on Facebook. I didn’t leave Facebook for moral reasons back then but more because it was starting to feel like a waste of time and valuable brain cycles that I wanted to focus elsewhere. (I realize some people can’t leave Facebook completely for work or other personal reasons.) There were aspects of Facebook that I thought I would miss — the relative ease of use, keeping up with what is going on in lots of people’s lives, etc — so I decided to work out a new way of communicating that was completely Facebook-free after using Facebook heavily for many years. I haven’t missed it at all. This post is about what I did and what I learned.</p>
  446. <p><strong>My history with Facebook and why I left</strong></p>
  447. <p>I had been on Facebook for a very long time (11 years) and had accumulated hundreds of “friends” on the platform. In the early days, it was fun and I enjoyed keeping up with people. But I kept noticing a great paradox in my life: I felt like I didn’t have enough time for the people I cared about (including myself) yet I found myself scrolling through Facebook for hours each week peering into the lives of hundreds of people, some of whom I honestly didn’t know very well and never knew very well. My brain got unwittingly wrapped up in their dramas, their political arguments, their triumphs and tragedies. I saw children fighting with their parents in the comments, political battles, people working out places to meet up — activities usually reserved for the private sphere. When I really thought about it, observing all of this seemed like a really odd way to spend significant time and energy. There are many people out there who I like and would love to get to know better but it doesn’t mean I have to keep up with all of them at that level of granularity.</p>
  448. <p>The Facebook “privacy” model is also maddening and can be surprisingly dehumanizing. I remember once commenting on an old high school friend’s post to gently point out a factual error on a topic of which I had first-hand knowledge (note to self: <em>never</em> worth it on social media) and got attacked by someone I didn’t know for being a “fancy New York CEO.” I had developed a thick skin at that point (um, from being a CEO) so that specific incident didn’t bother me so much — but I it reinforced something I had been thinking: “This environment is incredibly WEIRD. It’s supposed to be about human connection yet so much of what occurs is dehumanizing. Why do we <em>do this</em> to ourselves? This whole thing is very unhealthy.” So I decided to step away. (I stayed on Twitter because I find it fun, I learn a lot from smart people, following doesn’t have to be reciprocal, and there is zero pretense of intimacy, but that’s another story.)</p>
  449. <p><strong>Keeping up with close friends and family post-Facebook: a simple email list</strong></p>
  450. <p>People in my life didn’t have much to say about me leaving Facebook but I did get a few<br/>
  451. plaintive emails. <em>How will we keep up with you? How will we see photos of your child?</em> The implication was that without Facebook, all would be lost and we would lose contact forever. I’m exaggerating a little but I was legitimately surprised at the sense of finality that some people seemed to feel, as if there would be no other possibilities for us to connect to each other once I left. <img data-attachment-id="1717" data-permalink="https://blog.chaddickerson.com/2019/01/09/replacing-facebook/email_shiny_icon/" data-orig-file="https://jchaddickerson.files.wordpress.com/2019/01/email_shiny_icon.png?w=231&amp;h=231" data-orig-size="512,512" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="email_shiny_icon" data-image-description="" data-medium-file="https://jchaddickerson.files.wordpress.com/2019/01/email_shiny_icon.png?w=231&amp;h=231?w=300" data-large-file="https://jchaddickerson.files.wordpress.com/2019/01/email_shiny_icon.png?w=231&amp;h=231?w=512" class=" wp-image-1717 alignright" src="https://jchaddickerson.files.wordpress.com/2019/01/email_shiny_icon.png?w=231&amp;h=231" alt="email_shiny_icon" srcset="https://jchaddickerson.files.wordpress.com/2019/01/email_shiny_icon.png?w=231&amp;h=231 231w, https://jchaddickerson.files.wordpress.com/2019/01/email_shiny_icon.png?w=462&amp;h=462 462w, https://jchaddickerson.files.wordpress.com/2019/01/email_shiny_icon.png?w=150&amp;h=150 150w, https://jchaddickerson.files.wordpress.com/2019/01/email_shiny_icon.png?w=300&amp;h=300 300w" sizes="(max-width: 231px) 100vw, 231px"/>Sure, Facebook might be the most <em>convenient</em> way to connect but I never thought of convenience as the hallmark of good relationships. That said, there were people I did want to stay in touch with so I came up with a plan: start a very small mailing list via <a href="https://mailchimp.com/help/about-the-forever-free-plan/">Mailchimp’s Forever Free plan</a> to stay in touch with very close friends and my family.  I’ve sent three emails this year and it’s been a great overall experience. Here’s what I learned:</p>
  452. <p><strong>Lesson 1: Quite a few of the people who mattered most to me were not on Facebook.</strong></p>
  453. <p>My mailing list had to start somewhere. To assemble it, I looked at three things: 1) my list of Facebook friends, 2) my personal address book, and 3) the past couple of years people I emailed (by looking at my Sent folder). I have been obsessive about keeping contact info over the past 20+ years so my address book has about 3000 entries in it. As I looked at all of these sources, I ran across names of people who I had had meaningful relationships at some point in my life but had never been on Facebook. One example was one of my aunts who is in her 80s who lives in Durham, NC who would bring me homemade sausage biscuits at my dorm when I went to Duke (as a native Southerner, there is literally nothing more comforting than biscuits from a family member). Using Facebook had given me a false sense that “everyone is there” but she wasn’t. I didn’t realize until I asked around in the family that she had an iPad and was a regular email user. There were more like her than I thought. Some of the entries I had in my address book were outdated but I emailed some of those people with the address I had and heard back nearly every time. I had to track down a couple of people through mutual friends. All of this took more time than clicking “yes” on a friend request on Facebook but the effort was its own reward as it led me to very deliberately reconnect with people along the way. Put simply, using Facebook skews your contact towards other people who use Facebook and that can leave a lot of people you really care about out of your life.</p>
  454. <p><strong>Lesson 2: Email is more intimate and leads to better conversations.</strong></p>
  455. <p>On Facebook, I think most people realize that their posts can be seen by many people so a lot of thought goes into what they post. We’ve gotten so used to it that it seems unremarkable but there’s definitely a performative aspect when you are constantly communicating in front of all of your friends at the same time (seriously, isn’t this a weird way to communicate when you think about it?) Also, you never <em>really</em> know who is going to read what you write given the wacky permissions on Facebook (see my “fancy New York CEO” anecdote above). There is very little performative aspect to writing an email to a known list of people since you’re not (consciously or subconsciously) fishing for “likes” or other comments.  My email list is broadcast-only but any replies go directly to me. The replies I get are much more personal and informal than what I used to see on Facebook. There are no unwanted ads shoving themselves into the conversation. It’s more like old-school letter-writing: intimate, no outside observers, letting your guard down. I don’t sit there and think about what other people might think about what I’m writing — just the person who emailed me. To me, this is closer to what true friendship is like.</p>
  456. <p><strong>Lesson 3: You control the narrative completely in email which provides a much better opportunity for story-telling.</strong></p>
  457. <p>Social media platforms have algorithms that control what you see and the order in which you see it. As I put my emails together, I didn’t realize just how much control I had given up on Facebook until I experienced the absolute control of a personal email. Facebook pushes the cognitive overhead of piecing together the specifics of your friends’ lives by parsing a constant stream of posts, news, and ads. There is no beginning, middle, and end with Facebook. If as Shakespeare wrote all the world’s a stage and we are the players in the story, Facebook is a play where the actors are constantly interrupted by the blare of news headlines or the urgency of advertising messages. Every word and pixel in the content of my email is controlled by me (with the minor exception of a few items in the Mailchimp footer, but no big deal). No ads, no news headlines. It’s hard to read things out of context because the email itself <em>is</em> the context.</p>
  458. <p><strong>Lesson 4: With email, I’m completely free to switch platforms and have lots of choices</strong></p>
  459. <p>Mailchimp is a great platform and a company I trust but if something changed, it would be very little hassle to migrate my list to another platform and company. Email has been around a long time and exporting and importing a list are very easy. I never need to export the content I put into the system because it’s in my email inbox.</p>
  460. <p><strong>Lesson 5: Occasionally, I didn’t know what people were talking about in social situations</strong></p>
  461. <p>I’m occasionally in group conversations at parties and gatherings where people are talking knowingly about some experience most people in the group saw on Facebook already. I can usually figure things out by listening or asking questions. It’s also more fun <em>not to know</em> sometimes so you can, you know, talk about it in person like people used to do.</p>
  462. <p><strong>Lesson 6: It’s somewhat complicated to do it this way, but ultimately worth it</strong></p>
  463. <p>The overall setup and technical aspects are definitely more involved. I don’t assume that anyone wants email from me so I initially sent out an email to people with a link inviting them to the list. Following that link led to a double opt-in process that was difficult for some less tech-savvy people so I had to do some tech support along the way. (Some people either didn’t get the invite email or didn’t want to get my emails, and that’s cool, too!) I’m very comfortable with tech issues but I hadn’t done a lot of hands-on email work in a long time so I had to learn how to use the various features of Mailchimp, which is “easy” but still work. I had to have some sort of design and that required some work, but Mailchimp has reasonable templates you can use to start (besides, great design isn’t that important in this context). Writing the emails takes a lot of work in an absolute sense but pales in comparison to the time I was wasting on Facebook. I’m not subject to aggressive “growth hacking” from Mailchimp to send out my email and I completely forget about it for months at a time (as opposed to Facebook, which was always trying to burrow into my lizard brain to try to make me think about it).</p>
  464. <p>It may not be for everyone but I’m really happy with this new setup. If you have any questions about it, feel <a href="https://twitter.com/chaddickerson/status/1083004337041952769">free to ask in this thread on Twitter</a> and I’ll do my best to answer.</p>
  465. </article>
  466. </section>
  467. <nav id="jumpto">
  468. <p>
  469. <a href="/david/blog/">Accueil du blog</a> |
  470. <a href="https://blog.chaddickerson.com/2019/01/09/replacing-facebook/">Source originale</a> |
  471. <a href="/david/stream/2019/">Accueil du flux</a>
  472. </p>
  473. </nav>
  474. <footer>
  475. <div>
  476. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  477. <p>
  478. Bonjour/Hi!
  479. 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>
  480. 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>).
  481. </p>
  482. <p>
  483. 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>.
  484. </p>
  485. <p>
  486. Voici quelques articles choisis :
  487. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  488. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  489. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  490. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  491. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  492. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  493. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  494. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  495. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  496. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  497. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  498. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  499. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  500. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  501. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  502. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  503. </p>
  504. <p>
  505. 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>.
  506. </p>
  507. <p>
  508. Je ne traque pas ta navigation mais mon
  509. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  510. conserve des logs d’accès.
  511. </p>
  512. </div>
  513. </footer>
  514. <script type="text/javascript">
  515. ;(_ => {
  516. const jumper = document.getElementById('jumper')
  517. jumper.addEventListener('click', e => {
  518. e.preventDefault()
  519. const anchor = e.target.getAttribute('href')
  520. const targetEl = document.getElementById(anchor.substring(1))
  521. targetEl.scrollIntoView({behavior: 'smooth'})
  522. })
  523. })()
  524. </script>