davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
169 Révisions
1 Branche
Aborescence: df9a5c5108
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'df9a5c5108'
${ noResults }
larlet-fr-david-cache/cache/d0a49498055bf9571f2b431f92a.../index.html

index.html 40KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713 
  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>Dix ans de freelance (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="http://www.stpo.fr/blog/dix-ans-de-freelance/">

  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.   Dix ans de freelance (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="http://www.stpo.fr/blog/dix-ans-de-freelance/">Source originale du contenu</a></h3>

  463.     <p class="chapo">Je me suis rendu-compte il y a quelques jours que ça faisait 10 ans tout rond cette année que j’étais à mon compte. Mon inscription officielle à la <abbr title="Maison des Artistes">MDA</abbr> remonte en effet au 1<sup>er</sup> janvier 2005, même si j’ai en réalité commencé le freelance un peu plus tôt, le temps d’obtenir mon numéro d’ordre. Je me suis dit que cet anniversaire était l’occasion d’un petit retour sur mon parcours, avec ses joies et ses peines, en espérant que ça puisse éclairer ceux qui souhaitent se lancer.</p>

  464. 

  465. <p>Mon cursus est certainement singulier, mais pas exceptionnel pour autant, dans la mesure où beaucoup de professionnels du web de ma « génération » <strong>sont comme moi autodidactes.</strong> Rappelons à nos jeunes lecteurs qu’à ma sortie du bac en 1998, les formations spécialisées web n’existent tout simplement pas, et que le web lui-même est encore balbutiant…</p>

  466. 

  467. <h2>2004 : la sortie de l’école</h2>

  468. 

  469. <p>Mes études supérieures se sont achevées en 2004 avec <strong>un diplôme d’ingénieur en génie informatique</strong> de l’<abbr title="Université de Technologie de Belfort-Montbéliard">UTBM</abbr>. J’ai fini mon cursus par <strong>un projet de fin d’études de six mois à la Gaîté Lyrique,</strong> qui était encore en ce temps-là un (authentique) parc d’attraction en ruine en plein cœur de Paris, bien loin du temple de la <em>hype</em> que c’est devenu depuis.</p>

  470. 

  471. <p>La mission de mon équipe était de réaliser <strong>un site web documentaire</strong> sur le futur Centre des Arts Numériques de la ville de Paris, qui devait ouvrir dans nos locaux prochainement. C’était nouveau, chaotique et jouissif, et on pouvait monter boire des bières tièdes sur les toits de Paris en plein Réaumur-Sebastopol. Un projet de fin d’études qui détonait un peu avec ceux de mes camarades de promotion, qui s’étaient plus traditionnellement tournés vers des <abbr title="Société de Services et d’Ingénierie en Informatique">SSII</abbr> ou des mastodontes de l’industrie.</p>

  472. 

  473. <p>J’y fais mes armes <strong>en photo, en vidéo, en Flash, en Photoshop, je bricole un peu de code,</strong> le plus souvent de façon totalement autodidacte, sur des logiciels crackés et sans aucun cadre. Je n’ai pas écrit une ligne de PHP en six ans d’études et je découvre que tout le monde n’utilise que ça dans la vraie vie. Le CSS ? Jamais entendu parler.</p>

  474. 

  475. <p><strong>Le centre de ma vie n’est pas le web.</strong> Dès la sortie du boulot, je file en répète avec mon groupe de <em>ska-core-post-neo-instrumental</em>, je fais de la bande-dessinée pour des fanzines punks, j’enchaîne les illustrations pour divers collectifs artistiques plus ou moins matures. Je copie mes maîtres de l’époque, entre les vestiges de mes lectures adolescentes (Ledroit, Gimenez, Marini), la nouvelle bande-dessinée (Menu, Konture, Trondheim) et le graffiti qui m’influence alors énormément (Mode2, 123Klan ou Daim, parmi beaucoup d’autres).</p>

  476. 

  477. <div class="captioned-img">

  478. 

  479. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-1.jpg" alt=""/></p>

  480. 

  481. <p class="caption-txt">Le genre de dessins que je fais à l’époque.</p>

  482. 

  483. </div>

  484. 

  485. <div class="captioned-img">

  486. 

  487. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-2.jpg" alt=""/></p>

  488. 

  489. <p class="caption-txt">Le genre de <abbr title="Bande-Dessinée">BD</abbr> que je fais à l’époque. </p>

  490. 

  491. </div>

  492. 

  493. <p>Puis l’association pour laquelle je travaille à la Gaîté Lyrique cesse brutalement son activité. Je boucle mon projet de fin d’études comme je peux et j’arrive sur le marché du travail, <strong>sans aucun réseau ni la moindre idée de ce que je veux faire dans la vie.</strong></p>

  494. 

  495. <p>À défaut de mieux, je commence donc à faire ce que font mes semblables arrivés à ce stade : <strong>des <abbr title="Curriculum Vitae">CV</abbr> et des entretiens en <abbr title="Société de Services et d’Ingénierie en Informatique">SSII</abbr>.</strong> Avec mes cheveux sales et mes vêtements trop larges, j’ai le profil parfait de celui qu’on n’a pas envie d’embaucher, et les employeurs potentiels n’ont pas à creuser beaucoup pour deviner que je n’ai pas envie d’être là. Après quelques tentatives pathétiques, j’arrive à la conclusion que je ne parviendrai jamais à m’intégrer dans ce type d’entreprise et <strong>je décide de passer à autre chose.</strong></p>

  496. 

  497. <h2>2005-2006 : le freelance RMIste</h2>

  498. 

  499. <p><a href="http://www.bootleygues.net/">Un ami</a> de la nébuleuse associative dans laquelle je traîne alors <strong>me parle de la <abbr title="Maison des Artistes">MDA</abbr>,</strong> « un super moyen pour pouvoir facturer des trucs facilement ». Je décide de m’inscrire pour pouvoir vendre des flyers à des associations et des pochettes de disque à des groupes. Et comme il se doit, je fais ça n’importe comment, sans aucune préparation ni réflexion.</p>

  500. 

  501. <p>Influencé par les sites de graffeurs qui bougent de partout et par le boulot de boîtes comme <em>Teamchman</em> ou <em>2advancedstudios</em>, je me bricole <strong>un portfolio en Flash,</strong> obscur et mystérieux comme c’est la mode, avec des sons faits à la bouche (ça je ne sais pas si c’était la mode). Je n’ai pas de tarif journalier fixe, je n’ai aucune idée des prix du marché, je ne fais jamais signer de contrats ou de devis et je n’ai jamais entendu parler de seuil de rentabilité. Je fais des sites web complets pour 300 €, souvent au <em>black</em>, formation de la secrétaire aux mises à jour incluse.</p>

  502. 

  503. <div class="captioned-img">

  504. 

  505. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-3.jpg" alt=""/></p>

  506. 

  507. <p class="caption-txt">Mon portfolio professionnel en 2004.</p>

  508. 

  509. </div>

  510. 

  511. <p><strong>Mon niveau de vie est extrêmement précaire.</strong> Je touche 433 € de <abbr title="Revenu Minimum d’Insertion">RMI</abbr> mensuel, engloutis instantanément dans les 370 € de mon (pourtant faible) loyer du 18<sup>e</sup> arrondissement parisien. Les rares piécettes que je glane dans les missions freelances symboliques que j’arrache sont immédiatement absorbées par l’urgence du quotidien. Mais je suis heureux : je passe ma vie à faire de la musique, à dessiner, à voir mes copains.</p>

  512. 

  513. <p>Je sais maintenant que je veux faire du graphisme, de l’illustration et travailler dans la communication culturelle. Ma formation m’a préparé à des métiers que je n’exercerai jamais, <strong>il me faut donc tout réapprendre.</strong></p>

  514. 

  515. <p><strong>Je passe des nuits entières</strong> sur les forums de discussion à échanger avec des illustrateurs bien intentionnés, à absorber toute information intéressante passant à ma portée, à copier les gens que j’admire. Mes maîtres s’appellent alors <a href="http://sparth.com/">Sparth</a>, <a href="http://vyle-art.com/">Vyle</a>, <a href="http://www.nicolas-ferrand.com/">Viag</a>, <a href="http://m4de.com/">M4de</a>, <a href="http://mv.cgcommunity.com/">m@</a>, <a href="http://www.v-meignaud.com/">Marmotte</a>. J’use la tablette graphique qu’on m’a prêtée jusqu’à la corde pour maîtriser les bases de la technique numérique (détail amusant : j’utilise encore cette tablette aujourd’hui, <a href="http://www.pochep.fr/">Pochep</a> tu la récupères quand tu veux).</p>

  516. 

  517. <div class="captioned-img">

  518. 

  519. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-4.jpg" alt=""/></p>

  520. 

  521. <p class="caption-txt">Le genre de speed-painting Photoshop que je faisais en 2004-2005.</p>

  522. 

  523. </div>

  524. 

  525. <p>La plupart de mes amis font <strong>de l’associatif culturel</strong> et j’apprends énormément en travaillant pour ce milieu : expositions, sites web, affiches, brochures, recueils, <strong>je dis oui à toutes les propositions</strong> et bosse la plupart du temps de façon bénévole. Je fais les sites web des groupes de mes potes, de ma copine, tout ce qui passe.</p>

  526. 

  527. <div class="captioned-img">

  528. 

  529. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-5.jpg" alt=""/></p>

  530. 

  531. <p class="caption-txt">Le genre d’affiches de concerts que je commets en 2006.</p>

  532. 

  533. </div>

  534. 

  535. <p>Mon niveau est toujours médiocre et mon book objectivement atroce. Malgré tout, une association travaillant pour des gros comptes institutionnels me donne <strong>l’opportunité de la rejoindre sur des projets de sites web à forte visibilité :</strong> je n’hésite pas une seconde et sans signer quoi que ce soit je me replonge dans PHP, HTML et CSS corps et âme (codant pour l’occasion le pire back-office que l’Unesco ait jamais connu). Mais j’apprends à argumenter face au client, à construire un projet web cohérent, à comprendre combien mes tarifs sont grotesquement bas.</p>

  536. 

  537. <p>Ce qui n’est pas très grave en l’occurrence, parce que <strong>je ne suis pas payé :</strong> mon « employeur » (en fait mon client en tant que freelance, chose que je comprendrai bien plus tard) n’a aucune trésorerie et les poches percées, il n’a jamais de quoi me rémunérer et me promet toujours les sous pour plus tard (pour info il était honnête : il m’a payé, bien des années plus tard, tout ce qu’il me devait). J’en suis au point où je fraude dans le métro pour aller bosser.</p>

  538. 

  539. <div class="captioned-img">

  540. 

  541. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-6.jpg" alt=""/></p>

  542. 

  543. <p class="caption-txt">Un (magnifique) design que j’ai fait pour les bornes interactives de la Cité des Métiers à cette époque.</p>

  544. 

  545. </div>

  546. 

  547. <p>À l’été 2006, le même <a href="http://www.bootleygues.net/">ami</a> qui m’avait parlé de la <abbr title="Maison des Artistes">MDA</abbr> m’annonce que <strong>son employeur cherche un freelance pour faire du HTML.</strong> Ça fait deux ans que je mange des pâtes à tous les repas, du coup je dis oui : je fais un mois chez eux en freelance, en ayant pris soin de négocier mon tarif/jour (300 € au lieu des 250 qu’ils me proposent). Suite à cette mission réussie, ils m’offrent un <abbr title="Contrat à Durée Indéterminée">CDI</abbr>, que j’accepte (sans avoir l’idée de négocier mon salaire, on ne se refait pas…).</p>

  548. 

  549. <h2>2006-2011 : le <abbr title="Contrat à Durée Indéterminée">CDI</abbr> en agence, le freelance à côté</h2>

  550. 

  551. <p>J’atterris donc <strong>chez Business Interactif,</strong> devenu Digitas depuis, une agence web assez cotée à l’époque. Coup de chance, j’arrive en pleine période faste et j’y rencontre une foule <a href="https://twitter.com/yvg?lang=fr">de</a> <a href="http://no-way.fr/">gens</a> <a href="https://twitter.com/jhbretin">formidables</a>, <a href="http://vincent-valentin.name/">professionnels</a> <a href="https://twitter.com/etiennesamson">aguerris</a> <a href="http://sdussaut.com/">ou</a> <a href="http://www.eve-creations.fr/cv/index.html">plein</a> <a href="https://twitter.com/enwin">d’avenir</a>. Mon manager est bien intentionné, mes projets globalement motivants, <strong>j’apprends énormément durant les deux ans et demi que j’y passe.</strong> Standards, accessibilité, sémantique, Javascript, performances, gestion de projet, je me mets à niveau et deviens objectivement bon dans ce que je fais.</p>

  552. 

  553. <p><strong>Le web est alors dans un tournant historique qui me marquera durablement.</strong> La puissance de CSS face aux montages « en tables HTML » commence enfin à arriver aux oreilles des décideurs et le web design « moderne » acquiert ses premières lettres de noblesses avec des sites comme <a href="http://csszengarden.com/">CSS Zen Garden</a> ou <a href="http://alistapart.com/">A List Apart</a>. C’est aussi dans ces années-là que se montent en France les conférences <a href="http://www.paris-web.fr/">Paris-Web</a> (toujours à l’initiative du même <a href="http://www.bootleygues.net/">pote</a>, décidément), qui occasionneront de nombreuses rencontres enrichissantes autour des standards et me permettront de continuer à apprendre, toujours et encore, de façon boulimique.</p>

  554. 

  555. <p>À l’époque <strong>je lis également énormément de presse anglo-saxonne</strong> (notamment un petit nouveau nommé <a href="http://www.smashingmagazine.com/">Smashing Magazine</a>) et <strong>je suis toujours actif sur les forums</strong> (<a href="http://www.cfsl.net/forums/">Café Salé</a> en particulier) pour continuer à me former sur des domaines que je pratique moins au quotidien comme le web design ou l’illustration. Je participe aux <em>artbooks</em> du Café Salé, qui me permettent de me rassurer sur mon niveau en illustration, désormais suffisamment « à jour ». C’est aussi durant cette période que je sors <a href="http://www.stpo.fr/portfolio/illustration/eruption-balkanique/">mon premier « vrai » bouquin</a>, un carnet de voyage qui retrace la tournée d’un mois que je viens de faire dans les Balkans avec des groupes de potes.</p>

  556. 

  557. <div class="captioned-img">

  558. 

  559. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-8.jpg" alt=""/></p>

  560. 

  561. <p class="caption-txt">Une des illustrations que j’ai publiées dans les <em>artbooks</em> du Café Salé.</p>

  562. 

  563. </div>

  564. 

  565. <p><strong>Je continue le freelance en plus du boulot,</strong> le soir et le week-end. C’est pour moi l’occasion de sortir quelques projets qui seront remarqués. À ce niveau-là, le site <a href="http://www.marchanddetrucs.com/">Marchand de Trucs</a>, que j’ai réalisé avec deux amis, aura été un véritable déclencheur : cité à de nombreuses reprises par diverses publications internationales (parfois prestigieuses), c’est le premier projet que j’assume durablement en tant que designer professionnel indépendant. Je sens que <strong>quelque chose s’est enfin débloqué.</strong></p>

  566. 

  567. <div class="captioned-img">

  568. 

  569. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-7.jpg" alt=""/></p>

  570. 

  571. <p class="caption-txt">Marchand de Trucs, le web design de la gloire.</p>

  572. 

  573. </div>

  574. 

  575. <p>Deux années passent, et <strong>je commence à me sentir à l’étroit chez mon employeur.</strong> Je n’ai pas envie de faire carrière dans une seule entreprise, j’ai besoin de voir autre chose. Et mon salaire refuse toujours de décoller, malgré mes touchantes tentatives de sensibilisation de ma hiérarchie.</p>

  576. 

  577. <p>En 2008, je vais donc voir chez la concurrence et <strong>embauche chez Wcube, devenu depuis Publicis Modem.</strong> Cette fois-ci je suis en position de force et négocie âprement mon salaire, devenant directement l’employé le mieux payé du pôle intégration (youhou). J’y retrouve des amis et <a href="http://cuisine-saine.fr/consultante-auteur-culinaire">m’en</a> <a href="http://www.mariejulien.com/">fais</a> <a href="https://www.linkedin.com/in/fabienmoriceau">de</a> <a href="http://www.flonz.fr/">nouveaux</a>, mais un vilain mensonge à l’embauche sur l’emplacement réel des locaux de l’entreprise me fera passer de longs mois dans les mines de sel de Publicis à Suresnes, transformant ma vie quotidienne en calvaire ferroviaire (deux métros, un train et un tram + vingt minutes de marche, aller simple).</p>

  578. 

  579. <p>J’espérais également pouvoir faire davantage de créa chez ce nouvel employeur (c’est ce que j’avais négocié), mais les grosses agences <strong>aiment les petites cases et les métiers spécialisés,</strong> et je me rends vite compte qu’il sera difficile de sortir du moule. L’ambiance est moins bon enfant que chez Digitas, le rapprochement avec le monde de la publicité pure (Publicis Dialog partage notre open space) est douloureux et me donne de forts renvois.</p>

  580. 

  581. <div class="captioned-img">

  582. 

  583. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-9.jpg" alt=""/></p>

  584. 

  585. <p class="caption-txt">Un des rares web designs que j’aurais faits en interne chez Publicis Modem.</p>

  586. 

  587. </div>

  588. 

  589. <p>Je commence l’année 2011 chez cet employeur avec <strong>un projet vérolé jusqu’à l’os,</strong> pour un client bouché, dirigé par une chef de projet anémique : ce sera la goutte d’eau, <strong>je démissionne sur un coup de tête et me remets en freelance à temps plein.</strong></p>

  590. 

  591. <h2>2011 : Le retour en freelance</h2>

  592. 

  593. <p><strong>Je n’avais jamais douté me remettre en freelance un jour.</strong> Je pense que je suis fait pour ça, c’est comme ça que je me sens le plus à l’aise dans ma vie et dans mon boulot. C’est donc assez confiant que je reprends les rênes de mon activité en ce début 2011.</p>

  594. 

  595. <p>Mon réseau est désormais acquis, je suis resté en bons termes avec la plupart de mes ex-collègues, j’ai un book solide et je commence à avoir un petit nom dans « le milieu ». J’augmente mes tarifs, démarche mon carnet d’adresses et assez rapidement <strong>les choses se mettent en place d’elles-mêmes.</strong></p>

  596. 

  597. <p><strong>Je suis à présent très scrupuleux sur la paperasse,</strong> tous mes devis sont dûment signés, je demande des acomptes, je provisionne les sous de mes cotisations, je fais tout comme les grands (merci <a href="http://www.profession-graphiste-independant.com/">le bouquin de Yamo</a>, merci <a href="http://www.kob-one.com/forum">Kob-One</a>). <strong>J’ai aussi un avocat,</strong> que je n’ai pas peur d’appeler si quelqu’un essaie de me la faire à l’envers. Toutes ces précautions me permettent de consacrer davantage de temps effectif à <strong>m’appliquer dans mon boulot et ma communication.</strong></p>

  598. 

  599. <p><strong>Les missions réussies en appellent d’autres,</strong> je commence à fidéliser une clientèle heureuse de retrouver un indépendant fiable avec lequel les méthodes de travail sont rodées. Je ne démarche plus, et me paie même le luxe de sélectionner les clients, évinçant sans ménagement ceux qui sentent le pâté.</p>

  600. 

  601. <p><strong>Je continue à me former,</strong> même si j’y consacre moins de temps qu’avant. Nos métiers évoluent vite, j’essaie de ne pas trop me laisser aller et me paie quelques formations pour me mettre à jour. Mon boulot acharné des années précédentes paie et <strong>je peux capitaliser sur un savoir et une expertise déjà robustes.</strong></p>

  602. 

  603. <p><strong>Je travaille de chez moi,</strong> ce qui me convient très bien. Ma vie sociale professionnelle se passe à 90 % en ligne, via <abbr title="Internet Relay Chat">IRC</abbr>, <abbr title="Instant Messaging">IM</abbr>, Twitter et les forums. J’essaie d’avoir suffisamment de discipline pour ne pas trop glander à la maison, mais aussi (et surtout) pour ne pas trop bosser. Le vrai piège du freelance en télétravail n’est pas l’oisiveté : <strong>c’est le <em>burn-out</em>.</strong></p>

  604. 

  605. <p>Mes journées sont bien remplies, je suis au bureau de 9h du matin (en slip) jusqu’à 20h (habillé) quasiment sans discontinuer, et mon ordinateur reste allumé le week-end. J’arrive grosso-modo à gérer les débordements, <strong>mais la pente est glissante</strong> et je me force à sortir de chez moi chaque jour, à attraper ma guitare, à aller déjeuner avec des amis.</p>

  606. 

  607. <p>Je dégage aussi du temps pour <strong>mes projets personnels</strong> (mais moins que je voudrais) : je sors <a href="http://demainjarrete.stpo.fr">une <abbr title="Bande-Dessinée">BD</abbr></a>, je fais encore <a href="http://tr13ze.fr/">de l’associatif</a>, je fais <a href="http://lethagrippal.bandcamp.com/">un peu de musique</a>.</p>

  608. 

  609. <div class="captioned-img">

  610. 

  611. <p><img src="http://www.stpo.fr/wp-content/uploads/2015/09/vs-031-10.jpg" alt=""/></p>

  612. 

  613. <p class="caption-txt">Faites des livres, c’est super.</p>

  614. 

  615. </div>

  616. 

  617. <h2>Aujourd’hui</h2>

  618. 

  619. <p><strong>Le web est à un nouveau tournant décisif depuis l’avènement du mobile.</strong> Une partie de ce que j’y ai aimé à mes débuts a disparu (Flash, pour résumer), ce qui ne manque pas de décourager certains de mes collègues. Mais il y a également chaque jour de nouvelles choses à explorer, autour du <em>responsive</em> notamment (terrain passionnant s’il en est pour un web designer). Tant que mon travail continue à m’intéresser et que mon expertise est recherchée, je continue mon petit bonhomme de chemin.</p>

  620. 

  621. <p>Certains de mes collègues freelances passent à l’étape « supérieure » (?) et <strong>montent leur boîte</strong> (avec des salariés j’entends) : grand bien leur fasse mais ça n’arrivera pas dans mon cas. Je ne me sens pas l’âme d’un patron et je n’ai pas envie de gérer de nouvelles piles de paperasse (sans compter que ça peut facilement <a href="http://dysign.fr/post-mortem-pourquoi-jai-arrete-mon-agence-web">mal tourner</a>).</p>

  622. 

  623. <p>Fin 2014, <strong>je deviens père,</strong> ce qui transforme drastiquement mon existence. Fini le travail à la maison (je prends un bureau partagé à l’extérieur), finies les journées à rallonge (je quitte le boulot à 18h tous les soirs), fini l’ordinateur à la maison (mon poste de travail est loin de ma famille). Mon boulot n’en souffre pas, mais <strong>mes projets personnels passent carrément à la trappe :</strong> plus de musique, plus de <abbr title="Bande-Dessinée">BD</abbr>, plus d’associatif (ou presque). Mais des sourires en plus : on n’a rien sans rien !</p>

  624. 

  625. <p>De nouveaux métiers émergent, les formations autour du web sont toujours plus nombreuses et <strong>le média s’industrialise à vitesse accélérée.</strong> Les jeunes profils qui-en-veulent retournent le web à la recherche d’informations, écrivent cinq nouveaux <em>frameworks</em> Javascript par semaine et font leurs nuits blanches sur du code comme je le faisais il y a dix ans. Ma valeur ajoutée n’est plus là, et je capitalise davantage sur <strong>mon expérience du terrain, ma capacité à mener un projet proprement à son terme et la valeur de mon conseil.</strong> C’est peut-être ça, vieillir ?</p>

  626. 

  627. <div id="more">

  628. 

  629. <h2>Pour finir</h2>

  630. 

  631. <p>Voilà pour l’essentiel. Tentons <strong>une petite morale</strong> basée sur cette aventure si vous le voulez bien :</p>

  632. 

  633. <ul>

  634. <li><p>Les études c’est très bien, mais <strong>la vraie expérience du travail</strong> c’est très mieux. Ne perdez pas forcément votre temps à faire des Bac+5 pour bosser dans le web.</p></li>

  635. <li><p>Si vous avez la possibilité de <strong>faire vos armes en entreprise</strong> avant de vous lancer en freelance : faites-le, vous apprendrez beaucoup.</p></li>

  636. <li><p>Profitez de vos jeunes années pour <strong>engloutir un maximum d’information</strong> et <strong>vous défoncer au boulot.</strong> Après, vos priorités changeront (si vous avez de la chance).</p></li>

  637. <li><p><strong>Les communautés en ligne</strong> sont vos amies : l’accueil est parfois un peu abrupt, mais vous y côtoierez des professionnels que vous auriez eu du mal à rencontrer dans la vraie vie, et ils sont souvent généreux en conseils.</p></li>

  638. <li><p><strong>Intéressez-vous à la paperasse,</strong> sans ça elle deviendra votre pire ennemi.</p></li>

  639. <li><p>Faites <strong>signer</strong> des devis, écrivez des <strong>contrats.</strong></p></li>

  640. <li><p>Calculez votre <strong>seuil de rentabilité</strong> pour définir votre tarif. <strong>Ne vous bradez pas.</strong></p></li>

  641. <li><p>N’ayez pas peur de <strong>prendre un expert-comptable</strong> quand vous en aurez besoin, ça vous sauvera la vie.</p></li>

  642. <li><p>N’ayez pas peur de <strong>prendre un avocat</strong> quand vous en aurez besoin, ça vous sauvera la vie.</p></li>

  643. <li><p>Le freelance c’est difficile, soyez sûr de toujours <strong>aimer ce que vous faites</strong> ou alors prenez un boulot alimentaire moins stressant.</p></li>

  644. <li><p>Intéressez-vous parfois à <strong>autre chose</strong> qu’à votre métier sinon vous deviendrez des robots tristes.</p></li>

  645. <li><p><strong>Ne bossez pas trop.</strong></p></li>

  646. <li><p><strong>Ne réfléchissez pas trop,</strong> si vous avez foncièrement envie de vous mettre en freelance c’est sûrement que c’est la chose à faire.</p></li>

  647. </ul>

  648. 

  649. </div>

  650.   </article>

  651. </section>

  652. 

  653. 

  654. <nav id="jumpto">

  655.   <p>

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

  657.     <a href="http://www.stpo.fr/blog/dix-ans-de-freelance/">Source originale</a> |

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

  659.   </p>

  660. </nav>

  661. 

  662. <footer>

  663.   <div>

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

  665.     <p>

  666.       Bonjour/Hi!

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

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

  669.     </p>

  670.     <p>

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

  672.     </p>

  673.     

  674.     <p>

  675.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  692.     </p>

  693.     <p>

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

  695.     </p>

  696.     <p>

  697.       Je ne traque pas ta navigation mais mon

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

  699.       conserve des logs d’accès.

  700.     </p>

  701.   </div>

  702. </footer>

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

  704.   ;(_ => {

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

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

  707.       e.preventDefault()

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

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

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

  711.     })

  712.   })()

  713. </script>