davidbgk
/
larlet-fr-david
Observar 1
Favorito 0
Fork 0
Código Versões 0 Atividade
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
451 Commits
1 Branch
Tag: 83855b9358
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 83855b9358
${ noResults }
larlet-fr-david/david/pro/index.html

index.html 25KB
Original Anotar Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669 
  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>Artisan — 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.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/pro/">

  30. 

  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. 

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

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

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

  70. @font-face {

  71.   font-family: 'EquityTextB';

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

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

  74.   font-weight: 300;

  75.   font-style: normal;

  76.   font-display: swap;

  77. }

  78. @font-face {

  79.   font-family: 'EquityTextB';

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

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

  82.   font-weight: 300;

  83.   font-style: italic;

  84.   font-display: swap;

  85. }

  86. @font-face {

  87.   font-family: 'EquityTextB';

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

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

  90.   font-weight: 700;

  91.   font-style: normal;

  92.   font-display: swap;

  93. }

  94. 

  95. @font-face {

  96.   font-family: 'ConcourseT3';

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

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

  99.   font-weight: 300;

  100.   font-style: normal;

  101.   font-display: swap;

  102. }

  103. 

  104. 

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

  106. body {

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

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

  109.   background-color: #f0f0ea;

  110.   color: #07486c;

  111.   font-kerning: normal;

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

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

  114.   text-rendering: optimizeLegibility;

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

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

  117. }

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

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

  120. }

  121. em {

  122.   font-style: italic;

  123.   color: #323a45;

  124. }

  125. strong {

  126.   font-weight: bold;

  127.   color: black;

  128. }

  129. nav {

  130.   background-color: #323a45;

  131.   color: #f0f0ea;

  132.   display: flex;

  133.   justify-content: space-around;

  134.   padding: 1rem .5rem;

  135. }

  136.   nav:last-child {

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

  138.   }

  139.   nav a {

  140.     color: #f0f0ea;

  141.   }

  142.   nav abbr {

  143.     border-bottom: 1px dotted white;

  144.   }

  145. 

  146. h1 {

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

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

  149.   background-color: #e3e1e1;

  150.   color: #323a45;

  151.   text-align: center;

  152.   padding: 5rem 0 4rem 0;

  153.   width: 100%;

  154.   font-family: 'ConcourseT3';

  155.   display: flex;

  156.   flex-direction: column;

  157. }

  158.   h1.single {

  159.     padding-bottom: 10rem;

  160.   }

  161.   h1 span {

  162.     position: absolute;

  163.     top: 1vh;

  164.     left: 20%;

  165.     line-height: 0;

  166.   }

  167.     h1 span a {

  168.       line-height: 1.7;

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

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

  171.       background: #2d7474;

  172.       font-size: 1.3rem;

  173.       color: white;

  174.       text-decoration: none;

  175.     }

  176. h2 {

  177.   margin: 4rem 0 1rem;

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

  179.   padding-top: 1vh;

  180. }

  181. h3 {

  182.   text-align: center;

  183.   margin: 3rem 0 .75em;

  184. }

  185. hr {

  186.   height: .4rem;

  187.   width: .4rem;

  188.   border-radius: .4rem;

  189.   background: #07486c;

  190.   margin: 2.5rem auto;

  191. }

  192. time {

  193.   display: bloc;

  194.   margin-left: 0 !important;

  195. }

  196. ul, ol {

  197.   margin: 2rem;

  198. }

  199. ul {

  200.   list-style-type: square;

  201. }

  202. a {

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

  204.   text-decoration-thickness: 0.05em;

  205.   text-underline-offset: 0.09em;

  206. }

  207. article {

  208.   max-width: 50rem;

  209.   display: flex;

  210.   flex-direction: column;

  211.   margin: 2rem auto;

  212. }

  213.   article.single {

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

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

  216.     background: #f0f0ea;

  217.     padding: 2rem;

  218.   }

  219.   article p:last-child {

  220.     margin-bottom: 1rem;

  221.   }

  222. p {

  223.   padding: 0 .5rem;

  224.   margin-left: 3rem;

  225. }

  226.   p + p,

  227.   figure + p {

  228.     margin-top: 2rem;

  229.   }

  230. 

  231. blockquote {

  232.   background-color: #e3e1e1;

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

  234.   display: flex;

  235.   flex-direction: column;

  236.   align-items: center;

  237.   padding: 1rem;

  238.   margin: 1.5rem;

  239. }

  240.   blockquote cite {

  241.     font-style: italic;

  242.   }

  243.   blockquote p {

  244.     margin-left: 0;

  245.   }

  246. 

  247. figure {

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

  249.   background-color: #e3e1e1;

  250.   text-align: center;

  251.   padding: 1.5rem 0;

  252.   margin: 1rem 0 0;

  253.   font-size: 1.5rem;

  254.   width: 100%;

  255. }

  256.   figure img {

  257.     max-width: 250px;

  258.     max-height: 250px;

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

  260.     padding: 1px;

  261.   }

  262. figcaption {

  263.   padding: 1rem;

  264.   line-height: 1.4;

  265. }

  266. aside {

  267.   display: flex;

  268.   flex-direction: column;

  269.   background-color: #e3e1e1;

  270.   padding: 1rem 0;

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

  272. }

  273.   aside p {

  274.     max-width: 50rem;

  275.     margin: 0 auto;

  276.   }

  277. 

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

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

  280.   font-size: 1rem;

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

  282. }

  283. h1 {

  284.   font-size: 1.9rem;

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

  286. }

  287. h2 {

  288.   font-size: 1.6rem;

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

  290. }

  291. h3 {

  292.   font-size: 1.35rem;

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

  294. }

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

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

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

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

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

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

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

  302.     margin-left: 0;

  303.   }

  304.   h1 {

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

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

  307.   }

  308.   h2 {

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

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

  311.   }

  312.   h3 {

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

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

  315.   }

  316. }

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

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

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

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

  321.      but if our baseline value was not expressed

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

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

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

  325.     line-height: 1.5em;

  326.   }

  327.   p, li, pre, details {

  328.     margin-left: 3rem;

  329.   }

  330.   h1 {

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

  332.     line-height: 1.2em;

  333.   }

  334.   h2 {

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

  336.     line-height: 1.3em;

  337.   }

  338.   h3 {

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

  340.     line-height: 1.4em;

  341.   }

  342.   figure img {

  343.     max-width: 500px;

  344.     max-height: 500px;

  345.   }

  346. }

  347. 

  348. figure.unsquared {

  349.   margin-bottom: 1.5rem;

  350. }

  351.   figure.unsquared img {

  352.     height: inherit;

  353.   }

  354. 

  355. 

  356. 

  357. @media print {

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

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

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

  361.     text-decoration: underline;

  362.     text-shadow: none !important;

  363.     background-image: none !important;

  364.     background: white;

  365.     color: black;

  366.   }

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

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

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

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

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

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

  373.   img {

  374.     max-width: 250px !important;

  375.     max-height: 250px !important;

  376.   }

  377.   nav, aside { display: none; }

  378. }

  379. 

  380. ul.with_columns {

  381.   column-count: 1;

  382. }

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

  384.   ul.with_columns {

  385.     column-count: 2;

  386.   }

  387. }

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

  389.   ul.with_columns {

  390.     column-count: 3;

  391.   }

  392. }

  393. ul.with_two_columns {

  394.   column-count: 1;

  395. }

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

  397.   ul.with_two_columns {

  398.     column-count: 1;

  399.   }

  400. }

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

  402.   ul.with_two_columns {

  403.     column-count: 2;

  404.   }

  405. }

  406. 

  407. .gallery {

  408.   display: flex;

  409.   flex-wrap: wrap;

  410.   justify-content: space-around;

  411. }

  412.   .gallery figure img {

  413.     margin-left: 1rem;

  414.     margin-right: 1rem;

  415.   }

  416.   .gallery figure figcaption {

  417.     font-family: 'ConcourseT3'

  418.   }

  419. 

  420. footer {

  421.   font-family: 'ConcourseT3';

  422.   display: flex;

  423.   flex-direction: column;

  424.   border-top: 3px solid white;

  425.   padding: 4rem 0;

  426.   background-color: #07486c;

  427.   color: white;

  428. }

  429.   footer > * {

  430.     max-width: 50rem;

  431.     margin: 0 auto;

  432.   }

  433.   footer a {

  434.     color: #f1c40f;

  435.   }

  436.   footer .avatar {

  437.     width: 200px;

  438.     height: 200px;

  439.     border-radius: 50%;

  440.     float: left;

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

  442.     shape-outside: circle();

  443.     margin-right: 2rem;

  444.     padding: 2px 5px 5px 2px;

  445.     background: white;

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

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

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

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

  450.   }

  451. </style>

  452. 

  453.   <h1>

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

  455.     Artisan

  456.   </h1>

  457.   <section>

  458.     <article>

  459.       <p>J’aime mon métier et les rencontres qu’il génère. J’aime les discussions qu’il anime et les défis techniques qu’il surmonte. J’aime mes outils et apprendre de nouvelles techniques.</p>

  460.       <p>Je prends du plaisir à coder et à ce que <a href="/david/code/" title="Accès à mes projets open-source">mon code soit utile</a>. Je prends du plaisir à confronter mes réalisations et à ce que mon code soit beau.</p>

  461.       <p>Je partage mon savoir et mes opinions techniques. Je partage mon savoir-faire et la vision que j’ai de mon métier. Je partage mes expériences.</p>

  462.       <p><strong>Voilà pourquoi je me considère comme étant un artisan.</strong></p>

  463.     </article>

  464.     <figure class="image">

  465.         <img src="/static/david/pro/artisan.jpg" alt="" />

  466.     </figure>

  467.     <article>

  468.       <h2><a href="http://scopyleft.fr/">Scopyleft</a> - L’expérience collaborative et éthique (6 ans et plus)</h2>

  469. 

  470.       <p><strong>J’<a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a> des équipes dans leur changement de culture afin de produire des outils <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">utiles et essentiels</a>.</strong></p>

  471. 

  472.       <p>J’ai co-créé une coopérative web fondée sur des valeurs qui facilite les projets et intervient en amont pour en simplifier le contenu.</p>

  473. 

  474.       <h3>Expérience acquise (en cours)</h3>

  475. 

  476.       <ul>

  477.       <li>travailler à plusieurs réduit les performances (au début) ;</li>

  478.       <li>réfléchir à plusieurs élargit les perspectives ;</li>

  479.       <li>la collaboration se cultive.</li>

  480.       </ul>

  481. 

  482.       <h2><a href="http://beta.gouv.fr/">Beta.gouv</a> - Startup d’État Zam (1an et plus)</h2>

  483. 

  484.       <p><strong>J’ai allégé la charge de préparation par le gouvernement du débat parlementaire.</strong></p>

  485. 

  486.       <p>Travail en équipe distribuée sur un produit inter-ministériel.</p>

  487. 

  488.       <h3>Expérience acquise (en cours)</h3>

  489. 

  490.       <ul>

  491.       <li>autant je ne crois pas aux ingénieurs 10x, autant pour les équipes ça me semble maintenant possible ;</li>

  492.       <li>le passage à l’échelle est difficile dans l’administration.</li>

  493.       </ul>

  494. 

  495.       <h2><a href="http://beta.gouv.fr/">Beta.gouv</a> - Startup d’État API Drone (6 mois)</h2>

  496. 

  497.       <p><strong>J’ai expérimenté l’implémentation technique d’un arrêté préalablement à sa publication afin de valider sa faisabilité.</strong></p>

  498. 

  499.       <p>Développement de notre propre pico-framework Python, Redis, PostGIS.</p>

  500. 

  501.       <h3>Expérience acquise</h3>

  502. 

  503.       <ul>

  504.       <li>travailler en équipe de manière efficace à distance et en asynchrone ;</li>

  505.       <li>devoir jongler entre les industriels, la société civile et les délais législatifs est épuisant ;</li>

  506.       <li>transmettre les connaissances accumulées lors de la conception d’un produit est difficile si non anticipé.</li>

  507.       </ul>

  508. 

  509.       <h2><a href="http://etalab.gouv.fr/">Etalab</a> - Moderniser l’action publique via l’Opendata (3 ans)</h2>

  510. 

  511.       <p><strong>J’ai maintenu et amélioré le portail <a href="https://www.data.gouv.fr/">data.gouv.fr</a> qui met à disposition et référence les données issues de la puissance publique, de la société civile et du secteur professionnel.</strong></p>

  512. 

  513.       <p>Développement utilisant Flask et VueJS mais aussi MongoDB, Redis, Celery, Webpack, Ansible, Sentry, Jenkins, Docker, etc.</p>

  514. 

  515.       <h3>Expérience acquise</h3>

  516. 

  517.       <ul>

  518.       <li>l’innovation au sein de l’État est possible ;</li>

  519.       <li>le passage à l’échelle d’un projet est difficile, autant techniquement que dans ses valeurs ;</li>

  520.       <li>travailler à distance requiert de partager la même vision d’un produit.</li>

  521.       </ul>

  522. 

  523.       <h2><a href="http://www.capstan.fr/">Capstan Avocats</a> - Collaborer sur le long terme (8 ans !)</h2>

  524. 

  525.       <p><strong>J’ai conçu un outil de gestion documentaire stratégique pour l’activité du groupe afin de centraliser leurs sources d’informations.</strong></p>

  526. 

  527.       <p>Développement et suivi d’une application web utilisant Django avec des problématiques comme la pérennité des documents/URLs et leur indexation. Adaptation à un métier propice aux changements.</p>

  528. 

  529.       <h3>Expérience acquise</h3>

  530. 

  531.       <ul>

  532.       <li>une collaboration sur le long terme se bâtit sur une confiance réciproque et un respect mutuel ;</li>

  533.       <li>un code non entretenu est rapidement un code mort ;</li>

  534.       <li>l’adaptation au changement est la clé d’un produit utilisé.</li>

  535.       </ul>

  536. 

  537.       <h2><a href="https://www.mozilla.org/">Mozilla</a> - Performances et équipe internationale (1 an et demi)</h2>

  538. 

  539.       <p><strong>J’ai participé à l’amélioration de la qualité d’un site populaire pour réduire les bugs et au développement de la solution de paiement mobile pour acheter des applications.</strong></p>

  540. 

  541.       <p>Au sein d’une équipe de 6 personnes anglophones, j’ai développé la solution de paiement du <em>Marketplace</em> de Firefox OS à travers plusieurs applications Django puis conçu une implémentation de référence pour les fournisseurs de paiement en <em>NodeJS</em>.</p>

  542. 

  543.       <p>J’ai ensuite participé à l’amélioration de la qualité du site à fort traffic (1 milliard de requêtes par jour) des <a href="https://addons.mozilla.org/">extensions de Mozilla Firefox</a>.</p>

  544. 

  545.       <h3>Expérience acquise</h3>

  546. 

  547.       <ul>

  548.       <li>travailler avec une équipe internationale en asynchrone ;</li>

  549.       <li>améliorer la qualité et la performance de mon code Python et JavaScript ;</li>

  550.       <li>utiliser un workflow de travail permettant les revues de code.</li>

  551.       </ul>

  552. 

  553.       <h2><a href="http://altarika.com/">Altarika</a> - Hypermedia et interfaces (1 an)</h2>

  554. 

  555.       <p><strong>J’ai interfacé un moteur de recherche destiné aux entreprises pour faciliter les interactions avec les (ré)utilisateurs.</strong></p>

  556. 

  557.       <p>Fondé sur un moteur de recherche multilingue existant, j’ai conçu une application web et une API hypermedia (RESTful) en Python.</p>

  558. 

  559.       <h3>Expérience acquise</h3>

  560. 

  561.       <ul>

  562.       <li>exploration des diverses solutions hypermedia pour rendre une API <em>découvrable</em> ;</li>

  563.       <li>travailler sur un produit demande un alignement constant avec le responsable de la solution ;</li>

  564.       <li>les interfaces sont une composante non négligeable de l’innovation qui réside dans un produit.</li>

  565.       </ul>

  566. 

  567.       <h2>Webrise - L’indépendance au quotidien (4 ans)</h2>

  568. 

  569.       <p><strong>J’ai créé mon entreprise pour avoir l’indépendance de choisir mes projets en accord avec mes convictions et mon rythme de vie.</strong></p>

  570. 

  571.       <p>Développement de multiples projets et conseil stratégique pour diverses structures (Libération, Barrière Poker, Capstan Avocats, Communauté d’Agglomération du Pays Châtelleraudais, SuperToinette, SFR, Temesis, La Médiathèque de Belgique, etc).</p>

  572. 

  573.       <h3>Expérience acquise</h3>

  574. 

  575.       <ul>

  576.       <li>travailler seul est un mode de fonctionnement qui me permet d’être performant ;</li>

  577.       <li>les tensions éthiques et administratives sont difficiles à arbitrer sans être accompagné ;</li>

  578.       <li>il est possible de gagner plus en travaillant plus au détriment de tout le reste.</li>

  579.       </ul>

  580. 

  581.       <h2>Mixin - Faire partie d’une start-up (1 an)</h2>

  582. 

  583.       <p><strong>J’ai accompagné une entreprise dans la conception de son produit afin de lancer un produit innovant.</strong></p>

  584. 

  585.       <p>Mixin était un agenda social qui devait amener du fun et de la légèreté dans votre emploi du temps. J’ai collaboré pendant un an avec l’équipe suisse pour développer le produit, concevoir les interfaces et pivoter à de nombreuses reprises. Le projet n’a finalement pas eu le succès escompté.</p>

  586. 

  587.       <h3>Expérience acquise</h3>

  588. 

  589.       <ul>

  590.       <li>il est difficile de lever des fonds et cela prend du temps ;</li>

  591.       <li>il faut concevoir un produit pour les utilisateurs et non pour les <em>early-adopters</em> ;</li>

  592.       <li>le développement d’une <em>start-up</em> nécessite d’avoir une équipe au même endroit.</li>

  593.       </ul>

  594. 

  595.       <h2><a href="http://www.sibio.fr/">Sibio</a> - Réécriture d’un existant (1 an)</h2>

  596. 

  597.       <p><strong>J’ai aidé une entreprise à s’orienter vers des solutions web et à simplifier son produit afin d’étendre son marché.</strong></p>

  598. 

  599.       <p>Éditrice d’une solution pour la gestion des échantillons dans les laboratoires développée sous forme de client lourd Java, j’ai mené à bien la transition vers une application Web utilisant Django/Python. Cette réécriture est passée par des interviews et tests clients pendant une année. J’ai encadré deux personnes durant ce projet.</p>

  600. 

  601.       <h3>Expérience acquise</h3>

  602. 

  603.       <ul>

  604.       <li>la réécriture d’un existant est un travail de longue haleine ;</li>

  605.       <li>les interactions permanentes avec des utilisateurs sont primordiales pour la conception d’un produit ;</li>

  606.       <li>participer à la stratégie d’une entreprise me motive.</li>

  607.       </ul>

  608.     </article>

  609.   </section>

  610. 

  611. 

  612. <nav id="jumpto">

  613.   <p>

  614.     <a href="/david/pro/">Profil professionnel</a> (<a href="http://larlet.com">en anglais</a>) | <a href="/david/blog/2018/cout-site/">Coût d’un site</a> | <a href="/david/pro/devis/">Non-demande de devis ?</a>

  615.   </p>

  616. </nav>

  617. 

  618. <footer>

  619.   <div>

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

  621.     <p>

  622.       Bonjour/Hi!

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

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

  625.     </p>

  626.     <p>

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

  628.     </p>

  629.     

  630.     <p>

  631.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  648.     </p>

  649.     <p>

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

  651.     </p>

  652.     <p>

  653.       Je ne traque pas ta navigation mais mon

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

  655.       conserve des logs d’accès.

  656.     </p>

  657.   </div>

  658. </footer>

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

  660.   ;(_ => {

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

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

  663.       e.preventDefault()

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

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

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

  667.     })

  668.   })()

  669. </script>