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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Lettre à la moi du passé (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://www.24joursdeweb.fr/2021/lettre-a-la-moi-du-passe/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Lettre à la moi du passé</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://www.24joursdeweb.fr/2021/lettre-a-la-moi-du-passe/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="no-cap-please">Salut à toi Maïtané-de-2015,</p>
  71. <p>Je suis la Maïtané de 2021 et je me disais que ça serait sympa de t’écrire.</p>
  72. <p>Sympa parce que je me souviens de la période dans laquelle j’étais… euh donc, tu es… actuellement.<br>
  73. Enfin, si je me souviens bien, parce qu’il paraît que les souvenirs, on passe son temps à les réécrire… donc il est possible que j’interprète un peu !</p>
  74. <p>Mais dis-moi si je me trompe, en ce moment, ben… c’est un peu le flip. Tu viens de « décider » de partir de ton premier boulot au lieu de prendre un CDI (contrat à durée indéterminée) alors que tout allait bien. Les collègues sont sympas, les projets intéressants, tu apprends beaucoup… Donc du coup, qu’est-ce qui cloche chez toi/moi/nous ?</p>
  75. <p>Haha… Je pourrais te dire que tu va bientôt le savoir, mais franchement… je ne suis pas totalement sûre d’avoir compris moi-même.</p>
  76. <p>Cela dit, je pense que tu pourrais chercher du côté des oppressions systémiques, parce que bientôt il n’y aura plus seulement le féminisme, et la liste ne va pas diminuer au fur et à mesure des années. On pourrait même dire que tu vas te radicaliser et que ça sera chouette 😇 mais on s’éloigne un peu du sujet !</p>
  77. <p>Je disais donc : je comprends que c’est <del>la merde</del> le flip. Pour être franche, ça va pas s’arranger tout de suite.</p>
  78. <p>Je crois que ça ne va jamais s’arranger complètement en fait, la faute au <a href="https://bzg.fr/jai-dix-ans/">complexe du homard</a> (tu ne pourras ouvrir ce lien que dans six mois, mais t’inquiète tu seras dans la salle pour entendre <a href="https://vimeo.com/170005232">Pauline lire la lettre de Bastien</a> !).</p>
  79. <p>Mais finalement, le fait que toutes tes tripes passent leur temps à hurler quand ça ne va pas, je pense que ça va t’aider à éviter le burn-out qui grillera les copaines au bout de deux ans de salariat… Toi et moi, on va très mal beaucoup plus vite, mais par contre on ne peut pas ignorer ces signaux d’alerte. Ça nous force à changer de façon de faire, ou d’environnement.</p>
  80. <p>Du coup, je te le dis, tu va tâtonner, ça ne sera pas confortable. Une seconde boîte, puis le chômage et une bonne déprime en prime. L’impression qu’en fait, bosser ce n’est pas pour toi. Et le sentiment de désespoir que ça peut apporter, parce que la valeur travail est <strong>tellement forte </strong>dans notre société que ne pas pouvoir travailler, c’est avoir l’impression d’être un fardeau (et ça malgré le fait que tu va t’exercer à le désapprendre, ça ne sera pas facile à détricoter !).</p>
  81. <p>Mais heureusement, tu seras entourée de gens chouettes, qui ne te mettront pas la pression. Qui te diront la chose la plus importante : « C’est OK »</p>
  82. <p>C’est OK de ne pas aller bien.<br>
  83. C’est OK de ne pas pouvoir travailler.<br>
  84. C’est OK de ne pas travailler tout court.</p>
  85. <p>Alors, tu vas avoir du mal à les écouter, mais c’est pas grave, tu apprendras à le faire (si si ça s’apprend). Et puis ça te servira pour les moments où ce seront d’autres copaines qui seront dans une situation compliquée. Tu pourras leur dire que « c’est OK ».</p>
  86. <p>Et finalement, dans une ultime tentative avant de repartir faire du centre aéré, tu vas tenter le freelance.</p>
  87. <p>Bon du coup j’en profite pour essayer de te faire gagner du temps à ne pas culpabiliser (et à jouer à Zelda à la place par exemple, enfin n’importe quoi plutôt que de se sentir coupable ça ira) :<br>
  88. – passer des mois à faire ton portfolio, ça ne servira finalement à rien ;<br>
  89. – ne crains pas de ne « pas savoir te vendre », tu n’en auras pas besoin.</p>
  90. <p>Ce dont tu auras besoin, c’est d’avoir davantage confiance en toi et en ce que tu sais faire.<br>
  91. Et curieusement, tu vas beaucoup penser à toutes tes compétences en graphisme, et beaucoup moins dans d’autres choses que tu fais très bien. C’est normal, on est habitués à diviser le monde entre junior et senior et tu ne vas parler pratiquement… qu’à des seniors 😅 Ça va beaucoup t’aider de parler à des pros qui ont déjà roulé leur bosse et peuvent te donner des conseils qui sembleront… radicaux mais qui te permettront de partir sur des super bases (on ne négocie pas son tarif-jour, le minimum par jour c’est <strong>ça</strong>, comment on repère un client avec qui ça va mal se passer (= suis ton intuition sans remords !)).</p>
  92. <p>Mais il y a un point très important que ce classement occulte complètement, ce sont les compétences qui ne sont… jamais considérées comme des compétences car elles ne sont pas techniques. C’est l’écoute de l’autre pour comprendre ce qui pose problème. C’est l’empathie pour réussir à comprendre comment iel se sent. C’est savoir imaginer des solutions qui concilient les besoins de chacun·e… Bref, toutes ces compétences plus sociales, que tu as déjà et qui vont te permettre de rencontrer ces gens chouettes lors des confs<sup id="cite-ref-1"><a href="#cite-note-1">1</a></sup>, d’intégrer <a href="https://drum.team/">une équipe</a>, rejoindre <a href="https://soutenir.framasoft.org/fr/">une asso</a> puis d’en créer <a href="https://lechappeebelle.team/">une autre</a>, avec des personnes pour qui tout ça sera primordial.</p>
  93. <p>Et c’est là une de tes plus grandes futures victoires. C’est que si c’est dur aujourd’hui, si tu ne comprends rien, si tu n’arrives pas à saisir ce qui ne colle pas, c’est parce que tu n’es pas dans le bon contexte pour toi. Un contexte qui te permette d’être totalement toi-même, sans avoir à créer de carapace ou de tenir une posture qui serait « suffisamment professionnelle » par exemple.</p>
  94. <p>Ces personnes-là vont t’accepter toi tout entière, que tu ailles bien ou non, que tu sois sûre de ce que tu dis ou que tu tâtonnes, que tu sois vulnérable ou confiante.</p>
  95. <p>Et c’est ça, <strong>ça</strong> qui va <strong>tout</strong> changer.</p>
  96. <p>Qui va te permettre de monter en compétences et de comprendre que cette façon de travailler, qui te semblera naturelle, n’aura rien du tout de naturel. Et que cela deviendra l’un de tes atouts.</p>
  97. <p>Qui va te permettre de t’entourer d’ami·es avec lesquels tu travailles et sur qui tu pourras compter.</p>
  98. <p>Et ça va te donner tellement de force ! Rien que de penser à tous ces moments, où quand tu as traversé des moments difficiles tu as pu te reposer sur elleux, je peux te le dire : Aie confiance, ça va aller.</p>
  99. <p>Bon j’en profite quand même pour te donner d’autres indications histoire que tu arrives à éviter certains pièges…</p>
  100. <p>Déjà, tu vas trop travailler. Alors oui, tu vas pas bosser beaucoup d’heures dans la semaine (autre super avantage de l’indépendance, c’est que si t’es à l’aise avec ça et avec le fait de facturer moins de jours, tu peux t’organiser comme tu veux), mais franchement ça n’est pas suffisant.</p>
  101. <p>Donc pense à couper. Plusieurs semaines parfois, pas juste deux jours. Et plusieurs fois dans l’année, pas juste à Noël ! 🎄</p>
  102. <p>Ensuite, le fait d’être indépendante c’est génial, mais ça ne résout pas l’entièreté du schmilblik. Je sais que tu as tendance à être optimiste (parce que…moi aussi 😃), mais en ce moment c’est pas facile.</p>
  103. <p>Je crois que côté oppressions systémiques justement, tu as eu beaucoup d’espoirs et qu’ils se font doucher les uns à la suite des autres. La concentration du pouvoir dans les mains de quelques-uns qui ne se bougent pas d’un millimètre, ben franchement, ça nous fatigue toutes et tous.<br>
  104. Autant que possible, ne te concentre pas trop sur eux. Leur inaction a le don de te faire péter un boulon, et ce qui a du sens pour toi c’est plutôt de te sentir utile. C’est à ça que te serviront tes « oasis », tes groupes de copaines qui ont envie d’avancer dans le même sens que toi. Là tu sentiras que tu as un impact, une voix, une force. Et c’est ça qui compte (pour tenir… jusqu’à la révolution ! 🤞)</p>
  105. <p>Oui, parce que tu vas souvent osciller entre penser que le numérique c’est génial, ça permet de toucher plein de monde depuis chez soi… et ensuite te dire que ce qui compte c’est de se voir-rencontrer et que l’immatérialité du numérique ben ça ne sauve ni la planète ni les gens qui vivent dessus ☹️</p>
  106. <p>Là je suis dans une phase comme ça, et je me dis que finalement… on sauvera pas le monde avec le numérique, mais il y a moyen de permettre aux gens qui vont sauver le monde d’avoir des outils qui les aideront. Et que c’est là que *toi* tu peux avoir de la valeur. Et puis que ça te plaît d’agir ! Parce qu’il faut écouter les gens, les comprendre et ensuite réaliser un outil numérique qui leur permettra de faire des choses plus facilement, ou plus rapidement, et de gagner du temps pour faire ce pour quoi il y a vraiment, toujours, besoin d’humains : prendre soin, faire des liens et lutter pour un monde plus juste. Quel programme génial ! ♥️</p>
  107. <p>Et, finalement, si à la fin tu finis par le faire autrement, sans numérique, d’autres prendront la relève. Et tu poursuivras sur d’autres chemins, où tu continueras à croiser des gens avec qui tu prendras soin et feras des liens. C’est ça qui compte, et c’est ça notre avenir !</p>
  108. <p>Et ça, c’est vraiment chouette 😙</p>
  109. <p>Prends bien soin de toi,</p>
  110. <p>Maïtané, la toi du futur.</p>
  111. <p>PS : Au fait, début 2020, essaie de récupérer d’autres jeux de société que le Mille Bornes 🤗</p>
  112. </article>
  113. <hr>
  114. <footer>
  115. <p>
  116. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  117. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  118. </svg> Accueil</a> •
  119. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  120. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  121. </svg> Suivre</a> •
  122. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  123. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  124. </svg> Pro</a> •
  125. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  126. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  127. </svg> Email</a> •
  128. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  129. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  130. </svg> Légal</abbr>
  131. </p>
  132. <template id="theme-selector">
  133. <form>
  134. <fieldset>
  135. <legend><svg class="icon icon-brightness-contrast">
  136. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  137. </svg> Thème</legend>
  138. <label>
  139. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  140. </label>
  141. <label>
  142. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  143. </label>
  144. <label>
  145. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  146. </label>
  147. </fieldset>
  148. </form>
  149. </template>
  150. </footer>
  151. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  152. <script>
  153. function loadThemeForm(templateName) {
  154. const themeSelectorTemplate = document.querySelector(templateName)
  155. const form = themeSelectorTemplate.content.firstElementChild
  156. themeSelectorTemplate.replaceWith(form)
  157. form.addEventListener('change', (e) => {
  158. const chosenColorScheme = e.target.value
  159. localStorage.setItem('theme', chosenColorScheme)
  160. toggleTheme(chosenColorScheme)
  161. })
  162. const selectedTheme = localStorage.getItem('theme')
  163. if (selectedTheme && selectedTheme !== 'undefined') {
  164. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  165. }
  166. }
  167. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  168. window.addEventListener('load', () => {
  169. let hasDarkRules = false
  170. for (const styleSheet of Array.from(document.styleSheets)) {
  171. let mediaRules = []
  172. for (const cssRule of styleSheet.cssRules) {
  173. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  174. continue
  175. }
  176. // WARNING: Safari does not have/supports `conditionText`.
  177. if (cssRule.conditionText) {
  178. if (cssRule.conditionText !== prefersColorSchemeDark) {
  179. continue
  180. }
  181. } else {
  182. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  183. continue
  184. }
  185. }
  186. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  187. }
  188. // WARNING: do not try to insert a Rule to a styleSheet you are
  189. // currently iterating on, otherwise the browser will be stuck
  190. // in a infinite loop…
  191. for (const mediaRule of mediaRules) {
  192. styleSheet.insertRule(mediaRule.cssText)
  193. hasDarkRules = true
  194. }
  195. }
  196. if (hasDarkRules) {
  197. loadThemeForm('#theme-selector')
  198. }
  199. })
  200. </script>
  201. </body>
  202. </html>