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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680
  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>Hitting The Wall (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://glyph.twistedmatrix.com/2016/09/hitting-the-wall.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. Hitting The Wall (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://glyph.twistedmatrix.com/2016/09/hitting-the-wall.html">Source originale du contenu</a></h3>
  445. <p>I’m an introvert.</p>
  446. <p>I say that with a full-on appreciation of
  447. <a href="http://the-toast.net/2014/11/10/sorry-murdered-everyone-im-introvert/">just how awful</a>
  448. thinkpieces on “introverts” are.</p>
  449. <p>However, I feel compelled to write about this today because of a certain type
  450. of social pressure that a certain type of introvert faces. Specifically, I am
  451. a <em>high-energy</em> introvert.</p>
  452. <p>Cementing this piece’s place in the hallowed halls of <em>just awful</em> thinkpieces,
  453. allow me to compare my mild cognitive fatigue with the plight of those
  454. suffering from chronic illness and disability<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup>. There’s a social phenomenon
  455. associated with many chronic illnesses,
  456. <a href="http://www.butyoudontlooksick.com">“but you don’t LOOK sick”</a>, where
  457. well-meaning people will look at someone who is suffering, with no obvious
  458. symptoms, and imply that they really <em>ought</em> to be able to “be normal”.</p>
  459. <p>As a high-energy introvert, I frequently participate in social events. I go to
  460. meet-ups and conferences and I engage in plenty of
  461. <a href="http://pyvideo.org/speaker/glyph.html">public speaking</a>. I am, in a sense,
  462. comfortable extemporizing in front of large groups of strangers.</p>
  463. <p>This all sounds like extroverted behavior, I know. But there’s a key
  464. difference.</p>
  465. <p>Let me posit two axes for personality type: on the X axis, “introvert” to
  466. “extrovert”, and on the Y, “low energy” up to “high energy”.</p>
  467. <p>The X axis describes <em>what kinds of activities give you energy</em>, and the Y axis
  468. describes <em>how large your energy reserves are for the other type</em>.</p>
  469. <p>Notice that I didn’t say which type of activity you <em>enjoy</em>.</p>
  470. <p>Most people who would self-describe as “introverts” are in the
  471. low-energy/introvert quadrant. They have a small amount of energy available
  472. for social activities, which they need to frequently re-charge by doing
  473. solitary activities. As a result of frequently running out of energy for
  474. social activities, they don’t <em>enjoy</em> social activities.</p>
  475. <p>Most people who would self-describe as “extroverts” are also on the
  476. “low-energy” end of the spectrum. They have low levels of patience for
  477. solitary activity, and need to re-charge by spending time with friends, going
  478. to parties, etc, in order to have the mental fortitude to sit still for a while
  479. and focus. Since they can endlessly get more energy from the company of
  480. others, they tend to enjoy social activities quite a bit.</p>
  481. <p>Therefore we have certain behaviors we expect to see from “introverts”. We
  482. expect them to be shy, and quiet, and withdrawn. When someone who behaves this
  483. way has to bail on a social engagement, this is expected. There’s a certain
  484. affordance for it. If you spend a few hours with them, they may be initially
  485. friendly but will visibly become uncomfortable and withdrawn.</p>
  486. <p>This “energy” model of personality is of course an oversimplification - it’s my
  487. personal belief that everyone needs some balance of privacy and socialization
  488. and solitude and eventually overdoing one or the other will be bad for anyone -
  489. but it’s a useful one.</p>
  490. <p>As a <em>high</em>-energy introvert, my behavior often confuses people. I’ll show up
  491. at a week’s worth of professional events, be the life of the party, go out to
  492. dinner at all of them, and then disappear for a month. I’m not visibily shy -
  493. quite the opposite, I’m a gregarious raconteur. In fact, I quite <em>visibly</em>
  494. enjoy the company of friends. So, usually, when I try to explain that I am
  495. quite introverted, this claim is met with (quite understandable) skepticism.</p>
  496. <p>In fact, I am quite functionally what society expects of an “extrovert” - until
  497. I hit the wall.</p>
  498. <p><hr />
  499. <p>In endurance sports, one is said to
  500. <a href="https://en.wikipedia.org/wiki/Hitting_the_wall">“hit the wall”</a> at the point
  501. where all the short-term energy reserves in one’s muscles are exhausted, and
  502. there is a sudden, dramatic loss of energy. Regardless, many people <em>enjoy</em>
  503. endurance sports; part of the challenge of them is properly managing your
  504. energy.</p>
  505. <p>This is true for me and social situations. I do <em>enjoy</em> social situations
  506. quite a bit! But they are nevertheless quite taxing for me, and without
  507. prolonged intermissions of solitude, eventually I get to the point where I can
  508. no longer behave as a normal social creature without an excruciating level of
  509. effort and anxiety.</p>
  510. <p>Several years ago, I attended a prolonged social event<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup> where I hit the
  511. wall, hard. The event itself was several hours too long for me, involved
  512. meeting lots of strangers, and in the lead-up to it I hadn’t had a weekend to
  513. myself for a few weeks due to work commitments and family stuff. Towards the
  514. end I noticed I was developing a completely
  515. <a href="https://en.wikipedia.org/wiki/Reduced_affect_display">flat affect</a>, and had to
  516. start very consciously performing even basic body language, like looking at
  517. someone while they were talking or smiling. I’d never been so exhausted and
  518. numb in my life; at the time I thought I was just stressed from work.</p>
  519. <p>Afterwards though, I started having a lot of weird nightmares,
  520. <a href="https://en.wikipedia.org/wiki/Flashback_(psychology)">even during the daytime</a>.
  521. This concerned me, since I’d never had such a severe reaction to a social
  522. situation, and I didn’t have good language to describe it. It was also a
  523. little perplexing that what was effectively a nice party, the first half of
  524. which had even been fun for me, would cause such a persistent negative reaction
  525. after the fact. After some research, I eventually discovered that such
  526. involuntary thoughts are
  527. <a href="https://en.wikipedia.org/wiki/Posttraumatic_stress_disorder">a hallmark of PTSD</a>.</p>
  528. <p>While I’ve managed to avoid this level of exhaustion before or since, this was
  529. a real learning experience for me that the consequences of incorrectly managing
  530. my level of social interaction can be quite severe.</p>
  531. <p>I’d rather not do that again.</p>
  532. <hr />
  533. <p>The reason I’m writing this, though<sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup>, is not to avoid future anxiety. My
  534. social energy reserves are quite large enough, and I now have enough
  535. self-knowledge, that it is extremely unlikely I’d ever find myself in that
  536. situation again.</p>
  537. <p>The reason I’m writing is to help people understand that <em>I’m not blowing them
  538. off because I don’t like them</em>. Many times now, I’ve declined or bailed an
  539. invitation from someone, and later heard that they felt hurt that I was
  540. passive-aggressively refusing to be friendly.</p>
  541. <p>I certainly understand this reaction. After all, if you see someone at a party
  542. and they’re clearly having a great time and chatting with everyone, but then
  543. when <em>you</em> invite them to do something, they say “sorry, too much social
  544. stuff”, that seems like a pretty passive-aggressive way to respond.</p>
  545. <p>You might even still be skeptical after reading this. “Glyph, if you were
  546. <em>really</em> an introvert, surely, I would have seen you looking a <em>little</em> shy and
  547. withdrawn. Surely I’d see <em>some</em> evidence of stage fright before your talks.”</p>
  548. <p>But that’s exactly the problem here: no, you wouldn’t.</p>
  549. <p>At a social event, since I have lots of energy to begin with, I’ll build up a
  550. head of steam on burning said energy that no low-energy introvert would ever
  551. risk. If I were to run out of social-interaction-juice, I’d be in the middle
  552. of a big crowd telling a long and elaborate story when I find myself exhausted.
  553. If I hit the wall in that situation, I can’t feel a little awkward and make
  554. excuses and leave; I’ll be stuck creepily faking a smile like a sociopath and
  555. frantically looking for a way out of the converstaion for an hour, as the
  556. pressure from a large crowd of people rapidly builds up months worth of
  557. nightmare fuel from my spiraling energy deficit.</p>
  558. <p>Given that I know that’s what’s going to happen, <em>you won’t see me</em> when I’m
  559. close to that line. You won’t be in at my desk when I silently sit and type
  560. for a whole day, or on my couch when I quietly read a book for ten hours at a
  561. time. My solitary side is, by definition, hidden.</p>
  562. <p>But, if I don’t show up to your party, I promise: it’s not you, it’s me.</p>
  563. <div class="footnote">
  564. <hr />
  565. <ol>
  566. <li id="fn:1">
  567. <p>In all seriousness: this is a comparison of <em>kind</em> and not of <em>degree</em>.
  568. I absolutely do not have any illusions that my minor mental issues are a
  569. serious disability. They are - by definition, since I do not have a
  570. diagnosis - subclinical. I am describing a minor annoyance and frequent
  571. miscommunication in this post, not a personal tragedy.&#160;<a class="footnote-backref" href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">&#8617;</a></p>
  572. </li>
  573. <li id="fn:2">
  574. <p>I’ll try to keep this anonymous, so hopefully you can’t guess - I don’t
  575. want to make anyone feel bad about this, since it was my poor
  576. time-management and not their (lovely!) event which caused the problem.&#160;<a class="footnote-backref" href="#fnref:2" rev="footnote" title="Jump back to footnote 2 in the text">&#8617;</a></p>
  577. </li>
  578. <li id="fn:3">
  579. <p>... aside from the hope that maybe someone else has had trouble
  580. explaining the same thing, and this will be a useful resource for them ...&#160;<a class="footnote-backref" href="#fnref:3" rev="footnote" title="Jump back to footnote 3 in the text">&#8617;</a></p>
  581. </li>
  582. </ol>
  583. </div></p>
  584. </article>
  585. </section>
  586. <nav id="jumpto">
  587. <p>
  588. <a href="/david/blog/">Accueil du blog</a> |
  589. <a href="https://glyph.twistedmatrix.com/2016/09/hitting-the-wall.html">Source originale</a> |
  590. <a href="/david/stream/2019/">Accueil du flux</a>
  591. </p>
  592. </nav>
  593. <footer>
  594. <div>
  595. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  596. <p>
  597. Bonjour/Hi!
  598. 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>
  599. 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>).
  600. </p>
  601. <p>
  602. 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>.
  603. </p>
  604. <p>
  605. Voici quelques articles choisis :
  606. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  607. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  608. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  609. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  610. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  611. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  612. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  613. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  614. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  615. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  616. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  617. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  618. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  619. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  620. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  621. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  622. </p>
  623. <p>
  624. 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>.
  625. </p>
  626. <p>
  627. Je ne traque pas ta navigation mais mon
  628. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  629. conserve des logs d’accès.
  630. </p>
  631. </div>
  632. </footer>
  633. <script type="text/javascript">
  634. ;(_ => {
  635. const jumper = document.getElementById('jumper')
  636. jumper.addEventListener('click', e => {
  637. e.preventDefault()
  638. const anchor = e.target.getAttribute('href')
  639. const targetEl = document.getElementById(anchor.substring(1))
  640. targetEl.scrollIntoView({behavior: 'smooth'})
  641. })
  642. })()
  643. </script>