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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587
  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>A Fresnes, de jeunes passionnés d’informatique " hackent " les codes de l’entreprise (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="http://www.lemonde.fr/campus/article/2016/05/22/a-fresnes-de-jeunes-passionnes-d-informatique-hackent-les-codes-de-l-entreprise_4924060_4401467.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. A Fresnes, de jeunes passionnés d’informatique " hackent " les codes de l’entreprise (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="http://www.lemonde.fr/campus/article/2016/05/22/a-fresnes-de-jeunes-passionnes-d-informatique-hackent-les-codes-de-l-entreprise_4924060_4401467.html">Source originale du contenu</a></h3>
  445. <figure class="illustration_haut ">
  446. <img data-lazyload="false" src="http://s2.lemde.fr/image/2016/05/22/534x0/4924057_6_73ab_2016-05-21-eba3571-25490-1v9vy95_c23f9797102ca02d1b16272db32c5680.jpg" alt="La « salle de réunion » est dans le jardin." title="DR." class="lazy-retina"/> <figcaption class="legende" data-caption="La « salle de réunion » est dans le jardin."><span class="source_image" data-copyright="DR."/></figcaption>
  447. </figure>
  448. <h2 class="taille_courante">Au premier abord, rien ne distingue le pavillon des autres habitations alignées à intervalles réguliers le long d’une petite rue calme et fleurie de Fresnes, en banlieue sud de <a class="lien_interne rub" href="http://www.lemonde.fr/paris/" title="Toute l’actualité Paris">Paris</a> (Val-de-Marne). <em>« <a class="lien_interne rub" href="http://www.lemonde.fr/vous/" title="Toute l’actualité Vous">Vous</a> cherchez les geeks </em>[informaticiens] <em>? Si vous trouvez des poules, c’est que vous êtes arrivé ! »,</em> s’enquiert un voisin, visiblement amusé par la présence régulière de six gallinacés sur le trottoir. Il n’y a plus qu’à <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/troisieme-groupe/suivre/" title="Conjugaison du verbe suivre">suivre</a> le conseil et le bruit des caquètements pour <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/trouver/" title="Conjugaison du verbe trouver">trouver</a> la <em>hacker house</em> des neuf passionnés d’informatique.</h2>
  449. <p>Agés de 19 ans à 26 ans, ils partagent une maison et leurs compétences au service de Seed-Up, une start-up créée à la fin de 2015, spécialisée dans le <a class="lien_interne rub" href="http://www.lemonde.fr/developpement/" title="Toute l’actualité développement">développement</a> de sites Internet, d’applications et autres nouvelles <a class="lien_interne rub" href="http://www.lemonde.fr/smart-cities-technologies/" title="Toute l’actualité technologies">technologies</a>. Le concept, né dans la Silicon Valley, s’est exporté en <a class="lien_interne rub" href="http://www.lemonde.fr/allemagne/" title="Toute l’actualité Allemagne">Allemagne</a> et en Angleterre avant d’être reproduit en <a class="lien_interne rub" href="http://www.lemonde.fr/europeennes-france/" title="Toute l’actualité France">France</a>.</p>
  450. <h2 class="intertitre">« Il faut <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/troisieme-groupe/faire/" title="Conjugaison du verbe faire">faire</a> sa place »</h2>
  451. <p>L’idée est née en 2014 à la suite d’une rencontre entre Paul Poupet, 24 ans, aujourd’hui patron de la jeune entreprise et Robin Lambertz, 20 ans, diplômé de l’Ecole 42 – fondée par Xavier Niel, par ailleurs actionnaire à <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/troisieme-groupe/titre/" title="Conjugaison du verbe titre">titre</a> personnel du <em>Monde </em>–, à l’occasion d’un hackaton, ces compétitions où les informaticiens développent une idée en quarante-huit heures. Elle a ensuite pris forme dans la bibliothèque de l’Ecole centrale Paris, en septembre 2015, avec l’<a class="lien_interne rub" href="http://www.lemonde.fr/services-aux-internautes/" title="Toute l’actualité aide">aide</a> de Benjamin Poilvé, 25 ans, cofondateur de la start-up, ingénieur en systèmes avancés, diplômé de la filière entrepreneur de l’Ecole centrale Paris et de l’Ecole nationale supérieure de création industrielle (Ensci).</p>
  452. <p>Une fois le <a class="lien_interne rub" href="http://www.lemonde.fr/projet/" title="Toute l’actualité projet">projet</a> lancé, et presque 20 000 euros de prêts bancaires plus tard, ils sont suivis par Edouard Malet, 23 ans, diplômé de l’Ecole centrale, puis par Eric Delanghe, 19 ans et Mickael Barbarin, 26 ans, tous deux diplômés de l’Ecole 42.</p>
  453. <div class="encart_retrait_gauche"><span class="accroche">« Si une personne n’est pas assez bonne, elle risque de se faire <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/bouffer/" title="Conjugaison du verbe bouffer">bouffer</a> par les autres. »</span></div>
  454. <p>Environ 40 % de leur temps est consacré aux commandes des clients. Les 60 % restants le sont au développement de projets personnels. Avec pour objectif de <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/diminuer/" title="Conjugaison du verbe diminuer">diminuer</a> petit à petit la part consacrée aux commandes extérieures pour <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/focaliser/" title="Conjugaison du verbe focaliser">focaliser</a> l’activité de l’entreprise sur les projets.</p>
  455. <p>Très vite, ils ont dû <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/augmenter/" title="Conjugaison du verbe augmenter">augmenter</a> la cadence pour <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/troisieme-groupe/r%C3%A9pondre/" title="Conjugaison du verbe répondre">répondre</a> aux commandes, et il a fallu <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/renforcer/" title="Conjugaison du verbe renforcer">renforcer</a> l’équipe, trouver de la main-d’œuvre qualifiée et rentable. Trois stagiaires ont renforcé les troupes, pour six mois. <em>« On commence, donc c’est une question de coût »,</em> assume Paul Poupet, qui ne tarde pas à prévenir : <em>« Ici, c’est dur et il faut faire sa place. Si une personne n’est pas assez bonne, elle risque de se faire bouffer par les autres. »</em></p>
  456. <h2 class="intertitre">Auberge espagnole</h2>
  457. <p>A l’image d’une colocation, tout est fait en commun. <em>« Le rituel du matin, c’est réveil aux alentours de 10 heures, enfin, quand on n’est plus fatigué, <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/chercher/" title="Conjugaison du verbe chercher">chercher</a> les œufs, faire le café et les gaufres », </em>précise-t-il, <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/fier/" title="Conjugaison du verbe fier">fier</a> de la double friteuse, <em>« indispensable pour bien travailler ».</em> Le soir, vers 22 heures, tout ce petit <a class="lien_interne rub" href="http://www.lemonde.fr/afrique-monde/" title="Toute l’actualité monde">monde</a> dîne, assis dans un canapé d’angle situé au fond de la pièce, derrière les écrans d’ordinateurs, les fers à <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/souder/" title="Conjugaison du verbe souder">souder</a> et les enceintes connectées.</p>
  458. <p>Dans les chambres, les paires de chaussettes sales et les baskets s’accumulent, mêlées à de la paperasse. Depuis les fenêtres, les pommiers et les cerisiers donnent au jardin un air de campagne. Seules des chaises disposées en cercle autour d’un tableau indiquent la présence d’une « salle de réunion ». Quelques herbes hautes plus loin, sous la véranda du <a class="lien_interne rub" href="http://www.lemonde.fr/jardin/" title="Toute l’actualité jardin">jardin</a>, une table de ping-pong jouxte des fûts de bière et un barbecue équipé d’un aspirateur <em>« avec un circuit inversé, pour qu’il souffle au lieu d’aspirer »</em>.</p>
  459. <p>Au milieu du salon, qui fait office d’<em>open space </em>– un espace de <a class="lien_interne rub" href="http://www.lemonde.fr/travail/" title="Toute l’actualité travail">travail</a> partagé –, entre les algorithmes dessinés à la craie sur le mur transformé en tableau et un agenda bien rempli, une grosse aiguille rouge est figée au milieu d’un cadran en carton.</p>
  460. <p><em>« On a piraté le site Internet de la RATP pour que notre horloge indique l’heure de passage du bus. Mais avec un système de requêtes automatiques toutes les cinq secondes, on a été repérés rapidement »,</em> explique Benjamin Poilvé. Sur son bureau, posés pêle-mêle, un pistolet à élastiques chargé et des petites figurines en plastique à l’effigie de ses collègues ont été fabriqués à l’aide d’une imprimante 3D.</p>
  461. <p class="encart_retrait_gauche"><span class="accroche">« On travaille tous les jours, samedi et dimanche compris. »</span></p>
  462. <p>Mais si la maison rappelle une auberge espagnole, et bien que tous se tutoient et se baladent pieds nus, l’ambiance est studieuse. Les heures de travail s’enchaînent souvent jusqu’à une heure avancée de la nuit. Les projets doivent <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/auxiliaire/%C3%AAtre/" title="Conjugaison du verbe être">être</a> rendus à temps. <em>« Même s’il y a une marge de tolérance et que l’on fait des barbecues le dimanche, personne ne ramène dix potes. D’ailleurs, on travaille tous les jours, samedi et dimanche compris »,</em> lance Paul Poupet à ses employés, en guise de rappel. Un manège qui n’a pas échappé aux voisins, habitués à <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/troisieme-groupe/voir/" title="Conjugaison du verbe voir">voir</a> <em>« de la lumière à tous les étages en permanence et les jeunes <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/pianoter/" title="Conjugaison du verbe pianoter">pianoter</a> sur leurs claviers comme des fous »</em>.</p>
  463. <figure class="illustration_haut ">
  464. <img data-lazyload="false" src="http://s1.lemde.fr/image/2016/05/22/534x0/4924058_6_969e_l-horloge-indique-l-heure-de-passage-du-bus_b8328d2c382edd4869c7f3bab59cd1b7.png" alt="L’horloge indique l’heure de passage du bus." class="lazy-retina"/> <figcaption class="legende" data-caption="L’horloge indique l’heure de passage du bus."><span class="source_image" data-copyright=""/></figcaption>
  465. </figure>
  466. <h2 class="intertitre">Mi-Macron, mi-Nuit debout</h2>
  467. <p>A la frontière entre une flexibilité du travail d’inspiration libérale assumée, inspirée d’un modèle entrepreneurial porté par Emmanuel Macron, ministre de l’économie, de l’<a class="lien_interne rub" href="http://www.lemonde.fr/industrie/" title="Toute l’actualité industrie">industrie</a> et du numérique, et la revendication d’une plus grande horizontalité dans les rapports hiérarchiques, défendue notamment par les « nuitdeboutistes », le modèle du jeune entrepreneur est dans l’air du temps. Et cela convient à ses stagiaires, qui n’écartent cependant pas la possibilité de <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/retourner/" title="Conjugaison du verbe retourner">retourner</a> travailler dans une entreprise au <a class="lien_interne rub" href="http://www.lemonde.fr/m-mode/" title="Toute l’actualité mode">mode</a> de fonctionnement plus vertical.</p>
  468. <figure class="illustration_haut ">
  469. <img data-lazyload="false" src="http://s2.lemde.fr/image/2016/05/22/534x0/4924059_6_f661_2016-05-20-9882c57-8963-1r6m37c_2a7f369a3126a06d0b1ffc24061a70ea.jpg" alt="Agés de 19 ans à 26 ans, les jeunes informaticiens partagent une maison et leurs compétences au service de Seed-Up, une start-up crééeà la  fin de 2015, spécialisée dans le développement de sites Internet, d’applications et autres nouvelles technologies." title="DR." class="lazy-retina"/> <figcaption class="legende" data-caption="Agés de 19 ans à 26 ans, les jeunes informaticiens partagent une maison et leurs compétences au service de Seed-Up, une start-up crééeà la  fin de 2015, spécialisée dans le développement de sites Internet, d’applications et autres nouvelles technologies."><span class="source_image" data-copyright="DR."/></figcaption>
  470. </figure>
  471. <p><em>« Même si on est mal payés par rapport au temps que l’on passe à <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/bosser/" title="Conjugaison du verbe bosser">bosser</a>, je suis beaucoup plus impliqué dans mon travail que je ne l’étais dans les grandes <a class="lien_interne rub" href="http://www.lemonde.fr/entreprises/" title="Toute l’actualité entreprises">entreprises</a> pour lesquelles j’ai travaillé,</em> explique Hamid Djennaoui, 26 ans, stagiaire responsable de toute l’interface graphique des projets, diplômé de Strate, une école de <a class="lien_interne rub" href="http://www.lemonde.fr/m-design-deco/" title="Toute l’actualité design">design</a>, en <a class="lien_interne rub" href="http://www.lemonde.fr/formation/" title="Toute l’actualité formation">formation</a> à l’école d’informatique Sup info. <em>Le système hiérarchique très vertical des grosses <a class="lien_interne rub" href="http://www.lemonde.fr/societe/" title="Toute l’actualité société">société</a>s empêche d’être force de propositions. Au moins, ici, il ne faut pas <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/troisieme-groupe/attendre/" title="Conjugaison du verbe attendre">attendre</a> des semaines pour <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/auxiliaire/avoir/" title="Conjugaison du verbe avoir">avoir</a> les outils nécessaires et être impliqué dans un projet. J’apprends beaucoup en échangeant avec les autres, qui sont à portée de main. Il n’y a pas de discussion stérile, donc on avance beaucoup plus vite. »</em></p>
  472. <h2 class="intertitre">Une décision d’embauche collective</h2>
  473. <p class="encart_retrait_gauche"><span class="accroche">« On ne s’intéresse pas à l’école ni à l’âge, mais aux compétences. »</span></p>
  474. <p>Le recrutement, très sélectif, ne laisse pas de place au hasard, et la décision d’embauche est collective. <em>« Il y avait de très bons profils que l’on a refusé car on doit <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/troisieme-groupe/vivre/" title="Conjugaison du verbe vivre">vivre</a> avec eux », </em>précise Paul Poupet. Après examen du <em>curriculum vitae</em>, les candidats planchent, jusqu’à quatre heures, sur des sujets techniques de développement informatique, avec l’aide des potentiels futurs colocataires. <em>« On ne s’intéresse pas à l’école ni à l’âge, mais aux compétences et à l’envie de <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/partager/" title="Conjugaison du verbe partager">partager</a> un lieu où le vivre-ensemble a du sens »,</em> précise-t-il.</p>
  475. <p><em>« J’ai trouvé l’offre sur une page <a class="lien_interne rub" href="http://www.lemonde.fr/facebook/" title="Toute l’actualité Facebook">Facebook</a>, </em>se souvient Amine Liazadi, 23 ans, stagiaire, diplômé d’une licence de <a class="lien_interne rub" href="http://www.lemonde.fr/mathematiques/" title="Toute l’actualité mathématiques">mathématiques</a> et d’informatique de l’université de Tizi-Ouzou (<a class="lien_interne rub" href="http://www.lemonde.fr/algerie/" title="Toute l’actualité Algérie">Algérie</a>), étudiant à l’université de Paris-Créteil. <em>Après l’entretien, j’ai été rappelé pour un <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/d%C3%AEner/" title="Conjugaison du verbe dîner">dîner</a>, la dernière étape du recrutement. »</em> Elisa Desbrosses, 19 ans, étudiante à l’IUT de Besançon (Doubs), stagiaire chargée de la communication, est la seule fille à bord à avoir parcouru le même chemin du combattant avant d’être recrutée.</p>
  476. <h2 class="intertitre">Comptes à l’équilibre</h2>
  477. <p>Même si les bénéfices ne sont pas encore suffisants pour <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/deuxieme-groupe/fournir/" title="Conjugaison du verbe fournir">fournir</a> au jeune entrepreneur un salaire, les comptes sont à l’équilibre et lui permettent de <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/r%C3%A9gler/" title="Conjugaison du verbe régler">régler</a> les payes de tous les employés, les 2 000 euros de loyer, de <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/deuxieme-groupe/remplir/" title="Conjugaison du verbe remplir">remplir</a> le réfrigérateur pour le mois et de <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/deuxieme-groupe/r%C3%A9investir/" title="Conjugaison du verbe réinvestir">réinvestir</a> dans du matériel.</p>
  478. <p>Un investissement qui commence à <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/porter/" title="Conjugaison du verbe porter">porter</a> ses fruits. Depuis le mois de décembre 2015, quatre applications sont sur les rails, dont deux qui se démarquent : Hawker ambitionne de <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/transformer/" title="Conjugaison du verbe transformer">transformer</a> le texte d’un journal en données audio, grâce à une voix de synthèse ; BeTheSound est une application gratuite permettant de <a target="_blank" class="lien_interne conjug" href="http://conjugaison.lemonde.fr/conjugaison/premier-groupe/synchroniser/" title="Conjugaison du verbe synchroniser">synchroniser</a> tous les appareils audio d’une pièce, qu’il s’agisse d’un ordinateur, d’une vieille enceinte ou d’un téléphone portable. Cette application a été récompensée par le « coup de cœur du jury » du Startup Weekend, organisé par l’Ecole polytechnique, et a reçu le prix créateur d’avenir du <a class="lien_interne rub" href="http://www.lemonde.fr/concours/" title="Toute l’actualité concours">concours</a> Petit Poucet, un incubateur qui repère les start-up prometteuses.</p>
  479. </article>
  480. </section>
  481. <nav id="jumpto">
  482. <p>
  483. <a href="/david/blog/">Accueil du blog</a> |
  484. <a href="http://www.lemonde.fr/campus/article/2016/05/22/a-fresnes-de-jeunes-passionnes-d-informatique-hackent-les-codes-de-l-entreprise_4924060_4401467.html">Source originale</a> |
  485. <a href="/david/stream/2019/">Accueil du flux</a>
  486. </p>
  487. </nav>
  488. <footer>
  489. <div>
  490. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  491. <p>
  492. Bonjour/Hi!
  493. 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>
  494. 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>).
  495. </p>
  496. <p>
  497. 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>.
  498. </p>
  499. <p>
  500. Voici quelques articles choisis :
  501. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  502. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  503. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  504. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  505. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  506. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  507. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  508. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  509. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  510. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  511. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  512. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  513. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  514. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  515. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  516. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  517. </p>
  518. <p>
  519. 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>.
  520. </p>
  521. <p>
  522. Je ne traque pas ta navigation mais mon
  523. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  524. conserve des logs d’accès.
  525. </p>
  526. </div>
  527. </footer>
  528. <script type="text/javascript">
  529. ;(_ => {
  530. const jumper = document.getElementById('jumper')
  531. jumper.addEventListener('click', e => {
  532. e.preventDefault()
  533. const anchor = e.target.getAttribute('href')
  534. const targetEl = document.getElementById(anchor.substring(1))
  535. targetEl.scrollIntoView({behavior: 'smooth'})
  536. })
  537. })()
  538. </script>