Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  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>Junior — David Larlet</title>
  13. <meta name="description" content="Pour diminuer ces risques, les entreprises devraient accepter de renoncer à une part de rentabilité immédiate au profit d’une forme d’investissement durable reposant sur le recrutement de davantage de juniors. En comprenant que ces juniors sortant de formations courtes – qui sont, notamment, des femmes – auraient pu être ingénieurs ou ingénieures si ils ou elles n’avaient pas rencontré dès l’enfance toute une série de barrières socio-culturelles, l’industrie miserait sur son propre avenir.">
  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. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>Junior</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/11/08/" title="Publication précédente : Écriture">← Précédent</a> •
  60. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  61. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/11/10/" title="Publication suivante : Éducation">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote>
  68. <p>Pour diminuer ces risques, les entreprises devraient accepter de <mark>renoncer à une part de rentabilité immédiate au profit d’une forme d’investissement durable</mark> reposant sur le recrutement de davantage de juniors. En comprenant que ces juniors sortant de formations courtes – qui sont, notamment, des femmes – auraient pu être ingénieurs ou ingénieures si ils ou elles n’avaient pas rencontré dès l’enfance toute une série de barrières socio-culturelles, l’industrie miserait sur son propre avenir.</p>
  69. <p><cite><em><a href="https://usbeketrica.com/fr/article/le-manoir-de-verre-comment-la-tech-traite-t-elle-les-femmes-developpeuses-ou-data-scientists">«&nbsp;Le manoir de verre&nbsp;»&nbsp;: comment la tech traite-t-elle les femmes développeuses ou data scientists&#8239;?</a></em> (<a href="/david/cache/2021/da6f2715327f68a1955044955fb913ea/">cache</a>)</cite></p>
  70. </blockquote>
  71. <p>Il y a des jours où je suis bien content de voir l’évolution de <a href="http://scopyleft.fr/">scopyleft</a> sur ce plan là. Cette dernière année, nous sommes devenu·es paritaires en réduisant notre moyenne d’âge de 5&nbsp;ans. Ce qui se joue en interne va bien au-delà de ces chiffres et je vais avoir besoin de davantage de recul pour en parler.</p>
  72. <p>Jusqu’ici c’est très chouette&nbsp;:-).</p>
  73. <blockquote lang="en">
  74. <p>We end up in a situation where the demand for senior developers far outweighs the capacity and willingness of the companies to train juniors. Up until recently it wasn’t that bad though, we were in kind of an stable situation - the number of developers needed was growing steadily, the attrition was stable, companies were offering some internships and entry-level positions, universities and bootcamps provided streams of candidates. It wasn’t very easy to get the first job in the industry, but with enough effort and determination it was possible even for someone who has just started programming.</p>
  75. <p>And then came the pandemic.</p>
  76. <p><cite><em><a href="https://www.notonlycode.org/nobody-hires-juniors/">Why nobody hires junior developers anymore</a></em> (<a href="/david/cache/2021/28dd93134ff6df75757a564c42834ff3/">cache</a>)</cite></p>
  77. </blockquote>
  78. <p>PS&nbsp;: niveau salaires par contre, c’est très inégal et ce sera l’opportunité d’un futur billet.</p>
  79. <nav>
  80. <p class="center">
  81. <a rel="prev" href="/david/2021/11/08/" title="Publication précédente : Écriture">← Précédent</a> •
  82. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  83. • <a rel="next" href="/david/2021/11/10/" title="Publication suivante : Éducation">Suivant →</a>
  84. </p>
  85. </nav>
  86. </article>
  87. <hr>
  88. <footer>
  89. <p>
  90. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  91. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  92. </svg> Accueil</a> •
  93. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  94. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  95. </svg> Suivre</a> •
  96. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  97. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  98. </svg> Pro</a> •
  99. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  100. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  101. </svg> Email</a> •
  102. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  103. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  104. </svg> Légal</abbr>
  105. </p>
  106. <template id="theme-selector">
  107. <form>
  108. <fieldset>
  109. <legend><svg class="icon icon-brightness-contrast">
  110. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  111. </svg> Thème</legend>
  112. <label>
  113. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  114. </label>
  115. <label>
  116. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  117. </label>
  118. <label>
  119. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  120. </label>
  121. </fieldset>
  122. </form>
  123. </template>
  124. </footer>
  125. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  126. <script>
  127. function loadThemeForm(templateName) {
  128. const themeSelectorTemplate = document.querySelector(templateName)
  129. const form = themeSelectorTemplate.content.firstElementChild
  130. themeSelectorTemplate.replaceWith(form)
  131. form.addEventListener('change', (e) => {
  132. const chosenColorScheme = e.target.value
  133. localStorage.setItem('theme', chosenColorScheme)
  134. toggleTheme(chosenColorScheme)
  135. })
  136. const selectedTheme = localStorage.getItem('theme')
  137. if (selectedTheme && selectedTheme !== 'undefined') {
  138. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  139. }
  140. }
  141. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  142. window.addEventListener('load', () => {
  143. let hasDarkRules = false
  144. for (const styleSheet of Array.from(document.styleSheets)) {
  145. let mediaRules = []
  146. for (const cssRule of styleSheet.cssRules) {
  147. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  148. continue
  149. }
  150. // WARNING: Safari does not have/supports `conditionText`.
  151. if (cssRule.conditionText) {
  152. if (cssRule.conditionText !== prefersColorSchemeDark) {
  153. continue
  154. }
  155. } else {
  156. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  157. continue
  158. }
  159. }
  160. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  161. }
  162. // WARNING: do not try to insert a Rule to a styleSheet you are
  163. // currently iterating on, otherwise the browser will be stuck
  164. // in a infinite loop…
  165. for (const mediaRule of mediaRules) {
  166. styleSheet.insertRule(mediaRule.cssText)
  167. hasDarkRules = true
  168. }
  169. }
  170. if (hasDarkRules) {
  171. loadThemeForm('#theme-selector')
  172. }
  173. })
  174. </script>
  175. </body>
  176. </html>