davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
3 коммитов
1 ветка
Дерево: 683cc655f0
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '683cc655f0'
${ noResults }
larlet-fr-david-cache/cache/28bb7ac13990ecb381b2256fcf7.../index.html

index.html 39KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665 
  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>Deux ans plus tard (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://marieguillaumet.com/deux-ans-plus-tard/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Deux ans plus tard (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://marieguillaumet.com/deux-ans-plus-tard/">Source originale du contenu</a></h3>

  463.     <p>J’ai souvent imaginé revenir par ici, attraper ma plume au vol et me remettre à écrire comme si de rien n’était.</p>

  464. 

  465. <p>J’aimais tellement venir sur ce blog pour vous raconter mes petites histoires et mes grandes découvertes, partager mes photos et mes bonnes adresses, et échanger avec vous pendant des heures…</p>

  466. 

  467. <p>Après deux ans de silence relatif, l’envie de me remettre à publier ici des billets liés à mon métier me démange.</p>

  468. 

  469. <p>Mais avant de pouvoir le faire, j’ai besoin de vous parler d’une <strong>période fort désagréable de ma vie numérique</strong>, qui a failli avoir raison de ce blog et de mes autres prises de parole sur le net.</p>

  470. 

  471. <h2>Il était une fois un harcèlement ordinaire</h2>

  472. 

  473. <p>Flashback : fin 2015, alors que je bloguais régulièrement depuis des années, un changement durable s’est produit dans la façon dont j’envisageais non seulement le fait de bloguer, mais aussi le fait de publier des trucs sur Internet au sens large.</p>

  474. 

  475. <p>Nul doute que la <strong>visibilité aussi soudaine qu’écrasante</strong> que m’a apportée <a href="http://marieguillaumet.com/design-de-soi-paris-web-2015/">la conférence sur le design de soi que j’ai donnée à Paris Web en octobre 2015</a> y a été pour beaucoup.</p>

  476. 

  477. <p>Du jour au lendemain, le nombre de mes followers sur <a href="https://twitter.com/kreestal">Twitter</a> a explosé. Le nombre des personnes me détestant juste parce que mes billets et ma conférence étaient très partagés, aussi.</p>

  478. 

  479. <p>La <strong>violence verbale et symbolique</strong> à l’œuvre sur les réseaux sociaux, dont j’étais témoin depuis des années, était en train de me prendre pour cible.</p>

  480. 

  481. <p>Mon expérience numérique s’est vite dégradée.</p>

  482. 

  483. <p>Il y a d’abord eu un augmentation de sarcasmes lancés dans ma direction. Puis des <a href="http://www.konbini.com/fr/tendances-2/le-subtweet-cest-quoi/" lang="en">subtweets</a> plus ou moins agressifs ont commencé à s’accumuler. Certaines choses lues par ce biais pouvaient me trotter dans la tête pendant des jours. (Subtweeter relève-t-il d’une réelle ignorance de l’entêtement des algorithmes à déterrer la merde et à l’agiter sous le nez de la personne visée, ou bien d’une malveillance lâche ?)</p>

  484. 

  485. <p>Un jour, je suis même tombée sur un long billet de blog où un confrère disait tout le mal qu’il pensait de moi. <span role="img" aria-label="visage avec un sourcil levé">🤨</span></p>

  486. 

  487. <p>Cela m’a autant peinée que déçue, d’autant que ce n’était pas un rageux anonyme qui déblatérait dans son coin, non : c’était un confrère que j’estimais (<em>notez bien l’utilisation de l’imparfait ici</em>).</p>

  488. 

  489. <p>Outre le choc de lire toutes ces choses étranges à mon sujet, il y a aussi eu <strong>beaucoup d’incompréhension</strong> : que me valait cette soudaine recherche de poux dans la tête ?</p>

  490. 

  491. <p>Cela fait plus de 10 ans que je blogue, tweete et partage des trucs à titre professionnel, et je l’ai toujours fait avec honnêteté, enthousiasme et non-violence. Je n’ai donc jamais réussi à déterminer clairement ce qui m’a valu d’être prise pour cible malgré tout.</p>

  492. 

  493. <p>D’autant que les personnes à l’origine de ces attaques passives-agressives ne sont jamais venues me parler directement de leurs griefs (par email ou en discutant face-à-face par exemple).</p>

  494. 

  495. <p>Le temps passait, mais je sentais bien que quelque chose avait changé. Twitter était devenu peu à peu une <strong>source d’anxiété</strong>, et je supportais de moins en moins non seulement les provocations successives envoyées dans ma direction, mais aussi, de manière générale, la violence qui émanait (et émane toujours) des échanges sur cette plateforme.</p>

  496. 

  497. <p>Les choses se sont envenimées début 2016, lorsque j’ai été victime de <strong>harcèlement numérique</strong> de la part d’une frange infime – mais néanmoins infecte – de la communauté liée à un CMS très populaire. (Inutile de préciser que cette communauté regroupe également plein de personnes chouettes – je sais faire la part des choses.)</p>

  498. 

  499. <p>Je ne rentrerai pas dans les détails de ce qui s’est passé ; disons simplement que cela a été aussi court qu’ordurier.</p>

  500. 

  501. <p>Beaucoup de masques sont tombés à ce moment-là, et les personnes qui m’ont défendue se sont comptées sur les doigts d’une main. Avoir des milliers de followers n’a évidemment rien changé – ça a même été un facteur aggravant.</p>

  502. 

  503. <p>Les rares personnes à qui j’ai pu parler de tout ça se sont contentées de me dire : <em>c’est normal, il y a des cons partout, ce genre de com­por­te­ments est inévitable, <strong>tu n’as qu’à les ignorer</strong></em>.</p>

  504. 

  505. <p>À les écouter, le harcèlement serait une contrepartie désagréable mais « normale » au fait de prendre la parole en public et d’avoir une audience de plus en plus importante.</p>

  506. 

  507. <p>Mais je ne suis pas d’accord : <strong>il n’y a rien de normal dans le fait de se faire harceler, quelle qu’en soit la raison</strong>.</p>

  508. 

  509. <p>L’agressivité et la violence sont une plaie, et ce n’est pas en se contentant de dire « C’est inévitable » ou « T’as qu’à les ignorer » qu’on lutte contre.</p>

  510. 

  511. <p>Au contraire : ce discours <strong>dédouane les harceleurs</strong> et <strong>culpabilise les personnes harcelées</strong>, qui n’arrivent justement pas à ignorer les attaques parfois humiliantes qu’elles subissent, plusieurs fois par jour, pendant toute une période donnée.</p>

  512. 

  513. <blockquote><p>Il n’y a pas d’un côté les gens qui harcèlent, au milieu les témoins, et de l’autre les gens qui soutiennent. Non. Il y a ceux qui font partie du problème, et ceux qui font partie de la solution.<br/> <cite>Marion Seclin, <a href="https://www.youtube.com/watch?v=sphZS8JVwNc">Championne de France de cyber-harcèlement</a></cite></p></blockquote>

  514. 

  515. <p>Bref, suite à tout ça, je me suis <strong>éclipsée du web quasiment du jour au lendemain</strong>.</p>

  516. 

  517. <p>C’était la seule solution que je voyais à l’époque pour qu’on me laisse tranquille. J’ai même très sérieusement songé à supprimer mon compte Twitter.</p>

  518. 

  519. <p>En juillet 2016, j’ai néanmoins annoncé, en filigrane, que je mettais mon blog en pause pour une durée indéterminée.</p>

  520. 

  521. <p>Le prétexte officiel était mon <a href="https://marieguillaumet.com/wake-up-from-the-illusion/">mal-être vis-à-vis des réseaux sociaux</a> – mal-être qui était tout à fait réel et profond.</p>

  522. 

  523. <p>Mais, à ce moment-là, je n’avais pas encore le <strong>courage</strong> de parler également des turbulences que je vivais depuis six mois, craignant une nouvelle vague d’attaques.</p>

  524. 

  525. <p><strong>J’avais peur du regard des autres</strong>, peur de passer pour quelqu’un qui se plaint, et honte de me sentir si mal alors qu’on me répétait sans arrêt que « c’est normal maintenant que t’es connue, t’as qu’à les ignorer, <abbr title="on s’en fout">osef</abbr> des rageux ».</p>

  526. 

  527. <h2>Défendre une cause sociale, un facteur aggravant</h2>

  528. 

  529. <p>J’ai ainsi passé une année <strong>loin de l’arène</strong>, renouant avec des activités que j’avais délaissées depuis bien trop longtemps : dessin, peinture, <a href="https://fr.wikipedia.org/wiki/Qi_gong">qi gong</a>, yoga, méditation, voyages, écriture… Cela m’a fait un bien fou.</p>

  530. 

  531. <p>Et puis, en juin 2017, j’ai rejoint Access42, une coopérative spécialisée en accessibilité numérique. Cela fait maintenant un an que j’y travaille, et ce nouveau métier est très épanouissant.</p>

  532. 

  533. <p>Mais, à ma grande surprise, je me suis aperçue au fil des mois que le sujet de l’accessibilité numérique, en France, peut lui aussi donner lieu à des <strong>com­por­tements toxiques</strong>.</p>

  534. 

  535. <p>Je ne compte plus les <strong><span lang="en">tweets</span> malveillants</strong> envoyés dans ma direction ou dans celle de mes collègues par des confrères* cherchant à remettre systématiquement en cause notre travail (* ces tweets émanent la plupart du temps de personnes identifiées publiquement comme hommes).</p>

  536. 

  537. <p>De temps en temps, certains d’entre eux <strong>m’alpaguent publiquement</strong>, en toute décontraction, pour me dire que mes articles et mes conférences ne servent à rien, et que le sujet de l’accessibilité numérique est obsolète. <span role="img" aria-label="visage dubtitatif">🤔</span></p>

  538. 

  539. <div class="post-img-container clearfix aligncenter full"><figure role="group" id="attachment_9886" class="post-img-figure"><span class="thumb custom-thumb"><img class="colorbox-9880" src="" data-lazy-src="https://marieguillaumet.com/wp-content/uploads/2018/07/201807_willy-wonka-a11y.jpg" alt="Condescending Wonka"/><noscript><img class="colorbox-9880" src="https://marieguillaumet.com/wp-content/uploads/2018/07/201807_willy-wonka-a11y.jpg" alt="Condescending Wonka"/></noscript></span><figcaption id="figcaption_attachment_9886" class="wp-caption font-2"><div class="toggle-gp-article toggle-gp mg-toggle-box"> <button class="mg-btn mg-btn-toggle" aria-expanded="false" aria-controls="mg-figcaption-9886">Consulter la description de l’image<span class="screen-hide"> “Condescending Wonka”</span></button><div id="mg-figcaption-9886" class="mg-content-toggle is-hidden"> <a href="https://knowyourmeme.com/memes/condescending-wonka-creepy-wonka" title="Meme « Condescending Wonka » (en anglais)" hreflang="en">Meme « <span lang="en">Condescending Wonka</span> »</a><p> avec le texte « J’ai hâte de te voir expliquer aux personnes handicapées que l’accessibilité numérique n’est plus un sujet d’actualité ».</p></div></div></figcaption></figure></div>

  540. 

  541. <p>Il y a 10 ans, alors que j’écrivais mon mémoire consacré à l’accessibilité web et que la situation était encore plus mauvaise qu’aujourd’hui, on me tenait déjà <strong>mot pour mot</strong> le même discours.</p>

  542. 

  543. <p>Cette ignorance de l’urgence du sujet relève-t-elle d’une simple <strong>naïveté de personnes privilégiées</strong> qui, parce qu’elles-mêmes ne rencontrent pas d’obstacle particulier lorsqu’elles consultent le net, se disent sincèrement que tout va bien pour tout le monde ?</p>

  544. 

  545. <p>Ou alors, s’agit-il d’une question d’<strong>éducation</strong> et de <strong>culture sociétale</strong>, et/ou d’un <strong>manque d’empathie</strong> de la part d’individus incapables d’envisager le monde à travers un autre prisme que le leur ?</p>

  546. 

  547. <p>Enfin, cette affirmation ne serait-elle pas une façon de sous-entendre que les personnes handicapées et leurs allié·es <strong>font des histoires</strong> qui n’ont pas lieu d’être et qu’elles <strong>se trompent de combat</strong> ?</p>

  548. 

  549. <p>J’hésite.</p>

  550. 

  551. <p><strong>Toujours est-il que nous sommes en juillet 2018, et que les obstacles parfois immenses auxquels se heurtent les personnes handicapées pour accéder à Internet et au numérique n’ont PAS disparu.</strong> Réveillez-vous !</p>

  552. 

  553. <p>Outre la violence des propos critiquant le bien-fondé du combat en faveur de l’accessibilité numérique, ce qui me sidère encore plus c’est le <strong>sentiment de toute puissance</strong> qui en émane.</p>

  554. 

  555. <p>Est-ce que, moi, je viens débiner le boulot des autres en public ?</p>

  556. 

  557. <p>Non ! Bon.</p>

  558. 

  559. <p>Parfois, je me dis que les réactions agressives sont le lot de <strong>toute personne qui se consacre à une cause à portée politique et sociale</strong>.</p>

  560. 

  561. <p>Mais rien ne m’avait préparée à ça.</p>

  562. 

  563. <p>Alors, d’un côté, tout cela m’a endurcie (mais est-ce réellement une bonne chose ?).</p>

  564. 

  565. <p>De l’autre, il y a des jours où cette agressivité latente me décourage presque.</p>

  566. 

  567. <p>Le seul point positif que je vois, c'est de savoir ce que cachent réellement certains avatars aux sourires figés.</p>

  568. 

  569. <h2>Oser en parler</h2>

  570. 

  571. <p>Donc : beaucoup d’<strong>agressivité</strong>, mon <strong>désarroi</strong> face à ça, et une relative <strong>solitude</strong>.</p>

  572. 

  573. <p>Et deux problèmes :</p>

  574. 

  575. <p>Il m’a d’ailleurs fallu deux ans avant de trouver le courage de parler de tout cela ici.</p>

  576. 

  577. <p>Je me taisais, je me suis tue, et puis, un jour, j’ai réalisé que me taire était <strong>injuste</strong>.</p>

  578. 

  579. <p>Pourquoi les personnes déjà minoritaires (et souvent invisibilisées) au sein de notre « communauté » devraient-elles continuer à faire profil bas, au profit de tous ces confrères omniprésents et surreprésentés ?</p>

  580. 

  581. <p>De plus, pourquoi permettons-nous aux personnes les plus agressives de notre entourage, aux empêcheurs de tourner en rond et autres Jean-Michel Pénible de s’en sortir à bon compte en ne disant rien lorsque nous les voyons s’en prendre à une consœur ou à un confrère ?</p>

  582. 

  583. <p><strong>Non, cela a assez duré : je ne vois aucune raison pour laquelle nous devrions continuer à nous taire.</strong></p>

  584. 

  585. <p>Prendre la parole en public alors qu’on fait partie d’un groupe minoritaire (dans mon cas : les femmes dans le domaine tech, a fortiori les femmes féministes), ce n’est pas seulement défendre des valeurs auxquelles on croit ; c’est aussi montrer l’exemple, et <strong>lutter contre le manque de diversité de notre milieu</strong>.</p>

  586. 

  587. <p>Mais il faut garder à l’esprit que prendre publiquement la parole coûte beaucoup plus aux personnes minorisées à cause de leur genre, leur classe, leur(s) handicap(s), leurs origines, leur couleur de peau, leur mode de vie, etc., qu’aux personnes privilégiées, notamment en terme de <a href="https://www.cairn.info/revue-travailler-2003-1-page-19.html">travail émotionnel</a>.</p>

  588. 

  589. <p>C’est pourquoi je suis <strong>partiellement revenue</strong> sur ce que je défendais à l’époque à propos du design de soi.</p>

  590. 

  591. <p>En effet, à l’époque, j’ai totalement occulté l’aspect « minorités » de cette problématique, car je n’étais pas encore assez déconstruite à ce propos.</p>

  592. 

  593. <p>Malgré cela, depuis ma première conférence à Paris Web en 2015, jusqu‘à mon article <a href="https://www.24joursdeweb.fr/2017/on-ne-nait-pas-expert-e-on-le-devient/">On ne naît pas expert·e, on le devient</a> publié fin 2017, j’ai reçu de <strong>nombreux témoignages</strong> de personnes (surtout de jeunes-femmes) qui m’ont dit que mes prises de parole en public les avait poussées à oser écrire un article ou donner une conférence à leur tour.</p>

  594. 

  595. <p>C’est encourageant, bien sûr, et j’espère que toutes les nouvelles voix permettront d’<strong>enrichir</strong> et de <strong>désenclaver</strong> la communauté des artisan·es du web.</p>

  596. 

  597. <p>Mais aujourd’hui, j’écris aussi pour prévenir ces nouvelles voix des <strong>risques</strong> qui existent quand on prend la parole publiquement sur Internet. Cela requiert d’être déterminé·e, de tenir corps et âme à son sujet, et d’<strong>être bien entouré·e</strong>, pour trouver conseils et réconfort en cas de crise.</p>

  598. 

  599. <blockquote class="twitter-tweet" data-width="500" data-dnt="true"><p lang="en" dir="ltr">Women on here: Can I say this? Will I be misunderstood and then harassed? Will I be understood and then harassed? Do I have enough knowledge and context? Am I saying something appropriately valuable enough to merit it being said?<br/>Men on here: *Farts out every thought they have*</p><p>— Laura 'Ban the Nazis' Shortridge (@DiscordianKitty) <a href="https://twitter.com/DiscordianKitty/status/1015473431570206720?ref_src=twsrc%5Etfw">July 7, 2018</a></p></blockquote>

  600. 

  601. <p/><h2>Prendre de la distance</h2><p>Quant à moi, j’ai décidé de <strong>me préserver</strong> et de <strong>prendre beaucoup de distance</strong> vis-à-vis des réseaux sociaux et des autres groupes numériques dont je faisais partie.</p><p>Aujourd’hui, il se passe des jours, voire des semaines, sans que je ne consulte mon compte Twitter professionnel : devoir me farcir régulièrement des tweets déplaisants me demande un effort cognitif et émotionnel trop grand.</p><p>Je n’y vais que <strong>lorsque je n’ai rien d’autre à faire</strong> et que je suis <strong>moralement prête</strong> à affronter l’anxiété que cela déclenche chez moi – celle-ci étant amplifiée lorsque je donne une conférence ou que je publie un article.</p><p>J’ai donc décidé de me simplifier la vie et de <strong>ne plus laisser Internet s’ajouter à ma charge mentale</strong>.</p><blockquote lang="en"><p>And then, one day, I think in 2013, Twitter and Facebook were not really very fun anymore. And worse, the fun things they had supplanted were never coming back. Forums were depopulated; blogs were shut down. Twitter, one agent of their death, became completely worthless: <strong>a water-drop-torture feed of performative outrage</strong>, self-promotion, and discussion of Twitter itself.<br/> <cite>Dan Nosowitz, <a href="http://nymag.com/selectall/2018/05/i-dont-know-how-to-waste-time-on-the-internet-anymore.html" hreflang="en" lang="en">I Don’t Know How to Waste Time on the Internet Anymore</a></cite></p></blockquote><p><strong>Je rejette :</strong></p><ul><li>le copinage, les simagrées, les boucs-émissaires, les curées et les humiliations publiques ;</li><li>les faux selfs, les postures, et les grandes gueules qui ne manquent jamais une occasion de la ramener et de pourrir l’ambiance ;</li><li>le cirage de pompes, l’« entre-couillisme » et les « <span lang="en">bros clubs</span> » anxiogènes où circulent, à peine masquées, des blagues gauloises-oh-ça-va-on-peut-plus-rigoler, parallèlement à de grands discours tenus la bouche en cœur sur l’inclusivité. (Ça se voit et c'est ridicule, sachez-le.)</li></ul><blockquote lang="en"><p>You don’t have to live in public on the internet if you don’t want to. Even if you’re a public figure, or micro-famous like me. I don’t follow anyone on my public Instagram account. No shade on those who follow me there, I’m glad you give me your time - but <strong>I need to be in my own space to get my shit done</strong>. You want a “hack” for handling the internet? Create private social media accounts, follow who you want and sit back and let your bespoke media channels flow to you. These are tools, not requirements. Don’t let them make you miserable. Tune them until they bring you pleasure.<br/> <cite><a href="http://tumblr.austinkleon.com/post/175481624946" hreflang="en">Warren Ellis</a></cite></p></blockquote><h2>Continuer à écrire</h2><p>Cette prise de distance a été nécessaire, et m’a permis de <strong>retrouver l’envie d’écrire</strong>.</p><p>Mais je publierai moins, et de manière plus ciblée.</p><p>Aujourd'hui, je distingue clairement d’une part <strong>mon moi profond</strong> (qui n’est pas défini par mon travail), et d’autre part <strong>ma persona professionnelle</strong>.</p><p>Cela me permet :</p><ul><li><strong>d’être moins impliquée émotionnellement sur Internet</strong>, notamment dans les discussions liées à mon métier. Je peux donc travailler dans les meilleures conditions possibles sans être (trop) parasitée par les réflexions parfois désobligeantes que l’on m’adresse. Publier moins de choses personnelles = susciter moins de jugement = alléger ma charge mentale ;</li><li><strong>de bénéficier d’échanges plus sélectifs, et donc plus qualitatifs</strong>. En deux ans, mon activité numérique s’est métamorphosée, et cela m’a libérée d’un poids. Je me sens plus en phase avec qui je suis. Je n’ai plus à me demander à chaque instant si j’ai raison de publier tel ou tel contenu, ni à vivre dans la peur d’un éventuel bashing public parce que j’ai « osé » publier une photo de mon chat sur mon blog pro (je caricature à peine : c'est un reproche que l’on m’a réellement adressé <span role="img" aria-label="visage qui roule les yeux au ciel">🙄</span> #<span lang="en">First­World­Problems</span>).</li></ul><p>Les réseaux sociaux, leur flux continu et leurs notifications incessantes sont une drogue (lire à ce sujet l’article <a href="https://www.telegraph.co.uk/news/12161461/Facebook-addiction-activates-same-part-of-the-brain-as-cocaine.html" lang="en" hreflang="en">Facebook addiction ‘activates same part of the brain as cocaine’</a> – en anglais), et cela m’a pris deux ans pour réussir à m’en sevrer.</p><p>Le plus grand enseignement que je tire de cette période d’expérimentations et de sevrage numériques, c’est le fait que <strong>moins on consulte toutes ces interfaces, plus on se détache</strong> de la peur de passer à côté d’informations ou d’opportunités, et d’être jugé·e.</p><p>Ce qui m’importe désormais, c’est de <strong>continuer à écrire</strong>, faire ce qui me semble juste, et ne plus sacrifier ma créativité et mon envie de partager des trucs sur l’autel de l’anxiété numérique.</p><p>J’ai envie de me remettre à parler de mon métier et des problématiques qui en découlent.</p><p>Mais j’ai aussi envie de partager mes <strong>découvertes</strong> techniques et mes <strong>coups de cœur</strong> graphiques, les lectures qui m’inspirent, les évènements auxquels je participe, les conférences que je donne, mes réflexions sur le télétravail et sur le travail en général, et tout un tas d’autres choses liées à ma passion pour le web, le design et l’accessibilité.</p><p>Il me semble d’autant plus crucial de le faire alors que les blogs et les comptes Twitter tenus par des personnes sous-représentées dans notre milieu professionnel tendent à disparaître ou à être abandonnés, précisément à cause du climat anxiogène et des menaces de harcèlement qui planent au-dessus de leurs têtes.</p><p>J’ai aussi pour projet de faire un <strong>grand ménage technique et visuel</strong> sur ce site, qui ne me correspond plus et vieillit assez mal (il date de 2012, tout de même).</p><p>D’ailleurs, si c’est trop pénible à lire, abonnez-vous à <a href="http://marieguillaumet.com/feed/">mon flux RSS</a>, qui est complet, et qui s’affichera proprement dans tout lecteur RSS digne de ce nom.</p><p>Bon, par contre, je ne promets <strong>pas</strong> de ne plus jamais poster de photo de mon chat. <span role="img" aria-label="visage souriant avec des cornes">😈</span></p><p>Deux <strong>ressources sur le cyber-harcèlement</strong> pour terminer, si ça peut servir :</p><p>Et un livre de Brené Brown qui m’a aidée à remonter en selle : <strong><i lang="en">Rising Strong: How the Ability to Reset Transforms the Way We Live, Love, Parent, and Lead</i></strong>.</p><h2>Remerciements</h2><p>Un grand merci aux personnes qui m’ont aidée à donner corps à ces réflexions au fil des mois, en particulier à celles qui se sont coltiné la tâche ingrate de relire et d’éditer cette tartine !</p>

  602.   </article>

  603. </section>

  604. 

  605. 

  606. <nav id="jumpto">

  607.   <p>

  608.     <a href="/david/blog/">Accueil du blog</a> |

  609.     <a href="https://marieguillaumet.com/deux-ans-plus-tard/">Source originale</a> |

  610.     <a href="/david/stream/2019/">Accueil du flux</a>

  611.   </p>

  612. </nav>

  613. 

  614. <footer>

  615.   <div>

  616.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  617.     <p>

  618.       Bonjour/Hi!

  619.       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>

  620.       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>).

  621.     </p>

  622.     <p>

  623.       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>.

  624.     </p>

  625.     

  626.     <p>

  627.       Voici quelques articles choisis :

  628.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  629.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  630.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  631.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  632.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  633.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  634.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  635.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  636.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  637.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  638.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  639.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  640.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  641.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  642.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  643.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  644.     </p>

  645.     <p>

  646.       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>.

  647.     </p>

  648.     <p>

  649.       Je ne traque pas ta navigation mais mon

  650.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  651.       conserve des logs d’accès.

  652.     </p>

  653.   </div>

  654. </footer>

  655. <script type="text/javascript">

  656.   ;(_ => {

  657.     const jumper = document.getElementById('jumper')

  658.     jumper.addEventListener('click', e => {

  659.       e.preventDefault()

  660.       const anchor = e.target.getAttribute('href')

  661.       const targetEl = document.getElementById(anchor.substring(1))

  662.       targetEl.scrollIntoView({behavior: 'smooth'})

  663.     })

  664.   })()

  665. </script>