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.
549 Commits
1 Branch
Tag: 75cc4e051a
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 75cc4e051a
${ noResults }
larlet-fr-david/david/blog/2019/faire-equipe/index.html

index.html 37KB
Original Anotar Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920 
  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>Faire équipe — 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/blog/2019/faire-equipe/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Comment est-ce que ça se passe dans ton équipe ?" />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Comment est-ce que ça se passe dans ton équipe ?" />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Faire équipe" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2019/faire-equipe/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39.   

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2019/faire-equipe.jpg" />

  41.   

  42. 

  43. <style>

  44. /* http://meyerweb.com/eric/tools/css/reset/ */

  45. html, body, div, span,

  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  47. a, abbr, address, big, cite, code,

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

  50. dl, dt, dd, ol, ul, li,

  51. fieldset, form, label, legend,

  52. table, caption, tbody, tfoot, thead, tr, th, td,

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

  55. menu, nav, output, ruby, section, summary,

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

  64. /* HTML5 display-role reset for older browsers */

  65. article, aside, details, figcaption, figure,

  66. footer, header, hgroup, menu, nav, section { display: block; }

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116.   @font-face {

  117.     font-family: 'TriplicateT4c';

  118.     src: url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff2') format('woff2'),

  119.          url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff') format('woff');

  120.     font-weight: 300;

  121.     font-style: normal;

  122.     font-display: swap;

  123.   }

  124. 

  125. 

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

  127. body {

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

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

  130.   background-color: #f0f0ea;

  131.   color: #07486c;

  132.   font-kerning: normal;

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

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

  135.   text-rendering: optimizeLegibility;

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

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

  138. }

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

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

  141. }

  142. em {

  143.   font-style: italic;

  144.   color: #323a45;

  145. }

  146. strong {

  147.   font-weight: bold;

  148.   color: black;

  149. }

  150. nav {

  151.   background-color: #323a45;

  152.   color: #f0f0ea;

  153.   display: flex;

  154.   justify-content: space-around;

  155.   padding: 1rem .5rem;

  156. }

  157.   nav:last-child {

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

  159.   }

  160.   nav a {

  161.     color: #f0f0ea;

  162.   }

  163.   nav abbr {

  164.     border-bottom: 1px dotted white;

  165.   }

  166. 

  167. h1 {

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

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

  170.   background-color: #e3e1e1;

  171.   color: #323a45;

  172.   text-align: center;

  173.   padding: 5rem 0 4rem 0;

  174.   width: 100%;

  175.   font-family: 'ConcourseT3';

  176.   display: flex;

  177.   flex-direction: column;

  178. }

  179.   h1.single {

  180.     padding-bottom: 10rem;

  181.   }

  182.   h1 span {

  183.     position: absolute;

  184.     top: 1vh;

  185.     left: 20%;

  186.     line-height: 0;

  187.   }

  188.     h1 span a {

  189.       line-height: 1.7;

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

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

  192.       background: #2d7474;

  193.       font-size: 1.3rem;

  194.       color: white;

  195.       text-decoration: none;

  196.     }

  197. h2 {

  198.   margin: 4rem 0 1rem;

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

  200.   padding-top: 1vh;

  201. }

  202. h3 {

  203.   text-align: center;

  204.   margin: 3rem 0 .75em;

  205. }

  206. hr {

  207.   height: .4rem;

  208.   width: .4rem;

  209.   border-radius: .4rem;

  210.   background: #07486c;

  211.   margin: 2.5rem auto;

  212. }

  213. time {

  214.   display: bloc;

  215.   margin-left: 0 !important;

  216. }

  217. ul, ol {

  218.   margin: 2rem;

  219. }

  220. ul {

  221.   list-style-type: square;

  222. }

  223. a {

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

  225.   text-decoration-thickness: 0.05em;

  226.   text-underline-offset: 0.09em;

  227. }

  228. article {

  229.   max-width: 50rem;

  230.   display: flex;

  231.   flex-direction: column;

  232.   margin: 2rem auto;

  233. }

  234.   article.single {

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

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

  237.     background: #f0f0ea;

  238.     padding: 2rem;

  239.   }

  240.   article p:last-child {

  241.     margin-bottom: 1rem;

  242.   }

  243. p {

  244.   padding: 0 .5rem;

  245.   margin-left: 3rem;

  246. }

  247.   p + p,

  248.   figure + p {

  249.     margin-top: 2rem;

  250.   }

  251. 

  252. blockquote {

  253.   background-color: #e3e1e1;

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

  255.   display: flex;

  256.   flex-direction: column;

  257.   align-items: center;

  258.   padding: 1rem;

  259.   margin: 1.5rem;

  260. }

  261.   blockquote cite {

  262.     font-style: italic;

  263.   }

  264.   blockquote p {

  265.     margin-left: 0;

  266.   }

  267. 

  268. figure {

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

  270.   background-color: #e3e1e1;

  271.   text-align: center;

  272.   padding: 1.5rem 0;

  273.   margin: 1rem 0 0;

  274.   font-size: 1.5rem;

  275.   width: 100%;

  276. }

  277.   figure img {

  278.     max-width: 250px;

  279.     max-height: 250px;

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

  281.     padding: 1px;

  282.   }

  283. figcaption {

  284.   padding: 1rem;

  285.   line-height: 1.4;

  286. }

  287. aside {

  288.   display: flex;

  289.   flex-direction: column;

  290.   background-color: #e3e1e1;

  291.   padding: 1rem 0;

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

  293. }

  294.   aside p {

  295.     max-width: 50rem;

  296.     margin: 0 auto;

  297.   }

  298. 

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

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

  301.   font-size: 1rem;

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

  303. }

  304. h1 {

  305.   font-size: 1.9rem;

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

  307. }

  308. h2 {

  309.   font-size: 1.6rem;

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

  311. }

  312. h3 {

  313.   font-size: 1.35rem;

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

  315. }

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

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

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

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

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

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

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

  323.     margin-left: 0;

  324.   }

  325.   h1 {

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

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

  328.   }

  329.   h2 {

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

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

  332.   }

  333.   h3 {

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

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

  336.   }

  337. }

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

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

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

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

  342.      but if our baseline value was not expressed

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

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

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

  346.     line-height: 1.5em;

  347.   }

  348.   p, li, pre, details {

  349.     margin-left: 3rem;

  350.   }

  351.   h1 {

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

  353.     line-height: 1.2em;

  354.   }

  355.   h2 {

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

  357.     line-height: 1.3em;

  358.   }

  359.   h3 {

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

  361.     line-height: 1.4em;

  362.   }

  363.   figure img {

  364.     max-width: 500px;

  365.     max-height: 500px;

  366.   }

  367. }

  368. 

  369. figure.unsquared {

  370.   margin-bottom: 1.5rem;

  371. }

  372.   figure.unsquared img {

  373.     height: inherit;

  374.   }

  375. 

  376. 

  377.   /* https://github.com/richleland/pygments-css */

  378.   .codehilite{

  379.       background-color: #fdf6e3;

  380.       margin: 1rem auto;

  381.       padding: 1rem;

  382.       overflow-x:auto;

  383.       box-shadow:inset 0 0 2px rgba(0,0,0,0.2)

  384.   }

  385.   .codehilite .t{color:#586e75}

  386.   .codehilite .w{color:#073642}

  387.   .codehilite .err{color:#cb4b16}

  388.   .codehilite .k{color:#859900}

  389.   .codehilite .kc{color:#2aa198}

  390.   .codehilite .kd{color:#268bd2}

  391.   .codehilite .kn{color:#b58900}

  392.   .codehilite .kp{color:#859900}

  393.   .codehilite .kr{color:#073642}

  394.   .codehilite .kt{color:#b58900}

  395.   .codehilite .n{color:#586e75}

  396.   .codehilite .na{color:#2aa198}

  397.   .codehilite .nb{color:#268bd2}

  398.   .codehilite .nc{color:#268bd2}

  399.   .codehilite .ne{color:#cb4b16}

  400.   .codehilite .no{color:#2aa198}

  401.   .codehilite .nd{color:#2aa198}

  402.   .codehilite .ni{color:#2aa198;font-weight:bold}

  403.   .codehilite .nf{color:#268bd2}

  404.   .codehilite .nn{color:#586e75}

  405.   .codehilite .nt{color:#2aa198;font-weight:bold}

  406.   .codehilite .nv{color:#cb4b16}

  407.   .codehilite .b{color:#859900}

  408.   .codehilite .bp{color:#586e75}

  409.   .codehilite .v{color:#586e75}

  410.   .codehilite .vc{color:#586e75}

  411.   .codehilite .vg{color:#268bd2}

  412.   .codehilite .vi{color:#268bd2}

  413.   .codehilite .m{color:#268bd2}

  414.   .codehilite .mf{color:#268bd2}

  415.   .codehilite .mh{color:#268bd2}

  416.   .codehilite .mi{color:#268bd2}

  417.   .codehilite .mo{color:#268bd2}

  418.   .codehilite .s{color:#2aa198}

  419.   .codehilite .sb{color:#2aa198}

  420.   .codehilite .sc{color:#2aa198}

  421.   .codehilite .sd{color:#2aa198}

  422.   .codehilite .s2{color:#2aa198}

  423.   .codehilite .se{color:#cb4b16}

  424.   .codehilite .sh{color:#2aa198}

  425.   .codehilite .si{color:#cb4b16}

  426.   .codehilite .sx{color:#2aa198}

  427.   .codehilite .sr{color:#cb4b16}

  428.   .codehilite .s1{color:#2aa198}

  429.   .codehilite .ss{color:#cb4b16}

  430.   .codehilite .il{color:#268bd2}

  431.   .codehilite .o{color:#586e75}

  432.   .codehilite .ow{color:#859900}

  433.   .codehilite .p{color:#586e75}

  434.   .codehilite .c{color:#93a1a1;font-style:italic}

  435.   .codehilite .cm{color:#93a1a1}

  436.   .codehilite .cp{color:#93a1a1}

  437.   .codehilite .c1{color:#93a1a1}

  438.   .codehilite .cs{color:#93a1a1}

  439.   .codehilite .hll{background-color:#dc322f}

  440.   .codehilite .g{color:#586e75}

  441.   .codehilite .gd{color:#586e75}

  442.   .codehilite .ge{font-style:italic}

  443.   .codehilite .gr{color:#586e75}

  444.   .codehilite .gh{color:#586e75;font-weight:bold}

  445.   .codehilite .gi{color:#586e75}

  446.   .codehilite .go{color:#586e75}

  447.   .codehilite .gp{color:#586e75}

  448.   .codehilite .gs{font-weight:bold}

  449.   .codehilite .gu{color:#586e75;font-weight:bold}

  450.   .codehilite .gt{color:#586e75}

  451. 

  452. 

  453. @media print {

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

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

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

  457.     text-decoration: underline;

  458.     text-shadow: none !important;

  459.     background-image: none !important;

  460.     background: white;

  461.     color: black;

  462.   }

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

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

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

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

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

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

  469.   img {

  470.     max-width: 250px !important;

  471.     max-height: 250px !important;

  472.   }

  473.   nav, aside { display: none; }

  474. }

  475. 

  476. ul.with_columns {

  477.   column-count: 1;

  478. }

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

  480.   ul.with_columns {

  481.     column-count: 2;

  482.   }

  483. }

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

  485.   ul.with_columns {

  486.     column-count: 3;

  487.   }

  488. }

  489. ul.with_two_columns {

  490.   column-count: 1;

  491. }

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

  493.   ul.with_two_columns {

  494.     column-count: 1;

  495.   }

  496. }

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

  498.   ul.with_two_columns {

  499.     column-count: 2;

  500.   }

  501. }

  502. 

  503. .gallery {

  504.   display: flex;

  505.   flex-wrap: wrap;

  506.   justify-content: space-around;

  507. }

  508.   .gallery figure img {

  509.     margin-left: 1rem;

  510.     margin-right: 1rem;

  511.   }

  512.   .gallery figure figcaption {

  513.     font-family: 'ConcourseT3'

  514.   }

  515. 

  516. footer {

  517.   font-family: 'ConcourseT3';

  518.   display: flex;

  519.   flex-direction: column;

  520.   border-top: 3px solid white;

  521.   padding: 4rem 0;

  522.   background-color: #07486c;

  523.   color: white;

  524. }

  525.   footer > * {

  526.     max-width: 50rem;

  527.     margin: 0 auto;

  528.   }

  529.   footer a {

  530.     color: #f1c40f;

  531.   }

  532.   footer .avatar {

  533.     width: 200px;

  534.     height: 200px;

  535.     border-radius: 50%;

  536.     float: left;

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

  538.     shape-outside: circle();

  539.     margin-right: 2rem;

  540.     padding: 2px 5px 5px 2px;

  541.     background: white;

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

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

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

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

  546.   }

  547. </style>

  548. 

  549. <h1 class="single">

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

  551.   Faire équipe

  552.   <time>Publié le 26 août 2019</time>

  553. </h1>

  554. <article class="single">

  555.   <p><em>Ceci n’est pas une recette, encore moins une méthode. Il s’agit d’un <a href="/david/blog/2016/instantane-scopyleft/">instantané</a>, d’une histoire, d’un témoignage. Le récit d’une année à faire équipe. Faire car il s’agit d’une attention permanente pour réussir à grandir ensemble. Équipe car des liens suffisamment forts se sont formés pour avoir envie de continuer.</em></p>

  556. <p>Est-ce que le fait qu’on soit une équipe distribuée et asynchrone change quelque chose ? Est-ce que le fait qu’il y ait une certaine diversité dans l’équipe influe sur nos relations ? Est-ce qu’il y aurait des choses à améliorer ? Je n’en ai aucune idée. Et cela ne m’intéresse pas dans ce contexte, car justement il est changeant. Aussi, je vais davantage me concentrer sur le comment… faute d’avoir trouvé un pourquoi.</p>

  557. <h2>L’équipe</h2>

  558. <p>Nous sommes cinq et aucun de nous n’est à plein temps sur le <a href="https://beta.gouv.fr/startups/zam.html">produit</a> (<a href="/david/cache/19190c0e99e46346141821509905c1e9/">cache</a>) :</p>

  559. <ul>

  560. <li>Mélodie a la connaissance métier</li>

  561. <li><a href="https://ronan.amicel.net/">Ronan</a> code avec moi</li>

  562. <li><a href="http://www.maiwann.net/">Maïtané</a> rend le produit utilisable</li>

  563. <li><a href="http://ut7.fr/">Raphael</a> est là en soutien</li>

  564. </ul>

  565. <p>Les rôles ne sont pas pour autant figés, sur une petite équipe il est de toute façon nécessaire de pouvoir emprunter la casquette de l’autre, ne serait-ce que pendant des vacances.</p>

  566. <h2>Les rituels</h2>

  567. <p>Une journée type lorsqu’on a six heures de décalage horaire.</p>

  568. <p>Je me lève et je regarde ce qui s’est dit dans la matinée française. Le niveau de stress est assez bas car je sais que Ronan peut être sur le pont avant moi. J’enchaîne en faisant un tour du côté du code pour voir s’il y a de nouvelles propositions et/ou commentaires.</p>

  569. <p>Lorsque je me sens apte à parler (pas évident au réveil), je propose à Ronan ou Maïtané  de travailler ensemble sur une fonctionnalité si le contexte et l’enthousiasme s’y prêtent. Sinon, je picore dans la liste des choses à faire.</p>

  570. <p>En fin de matinée (pour moi), on papote avec Mélodie et les présent·e·s, en moyenne autour d’une heure par jour je dirais. C’est un temps important pour s’accorder et transmettre des informations sur la vie du produit, notamment lorsqu’on est à distance. C’est aussi le moment où je discute d’un plus gros morceaux à faire lorsque les autres ont décroché·e·s.</p>

  571. <p>Mon après-midi ou ma soirée (ça dépend de la météo) est généralement consacrée à une tâche demandant une concentration plus profonde, ce qui est l’idéal car je suis moins sollicité. En parallèle, je garde un œil sur le serveur de production si c’est un moment législatif particulier.</p>

  572. <p>Et on recommence le lendemain. Ou presque.</p>

  573. <p>Tous les mois, il y a une démonstration qui nous permet d’échanger avec les utilisateurs et utilisatrices sur ce que nous développons. Ce qui vient ajuster la liste des choses à faire afin d’être plus proche de leurs besoins.</p>

  574. <p>Quand on en ressent le besoin on se fait une rétrospective, à peu près tous les quatre/cinq mois. L’occasion de prendre un peu de recul et de se rappeler qu’on aime bien travailler ensemble.</p>

  575. <p>Lorsqu’il y a un gros morceau qui nécessite d’en discuter de manière plus avancée, on n’hésite pas à prendre le temps de <a href="/david/blog/2018/penser-distance/">penser à distance</a>. Lorsqu’il y a des petits tracas personnels, on n’hésite pas non plus à panser à distance.</p>

  576. <p>Tous les ans, on se retrouve physiquement. Bon ok, ça n’est arrivé qu’une fois mais statistiquement ça se tient :-).</p>

  577. <h2>Les pratiques</h2>

  578. <p>Commençons par la technique car c’est plutôt mon domaine.</p>

  579. <p>On passe du temps à coder ensemble avec Ronan. On ne se l’impose pas pour autant, ça dépend beaucoup de la motivation du moment. On écrit des tests, on fait des revues de code, rien d’extravagant.</p>

  580. <p>Ce qui est moins courant, c’est que l’on passe du temps à designer ensemble avec Maïtané aussi. On se partage un écran et on passe en revue ce qui ne va pas afin de corriger cela en direct.</p>

  581. <p>Autant le <em>pair-programming</em> me semble être une pratique relativement courante, autant le <em>pair-designing</em> (?) est moins documenté. Cela apporte pourtant une grande valeur au produit et à la cohérence de ce qui est développé. Sans compter le fait de s’accorder dans l’équipe sur la pertinence de certains éléments.</p>

  582. <p>Mais en fait tout cela n’est rien sans des retours de nos utilisateur·ice·s.</p>

  583. <p>Les démonstrations sont une excuse pour discuter avec les personnes qui utilisent notre outil et savoir comment est-ce qu’elles appréhendent certaines fonctionnalités ou les problèmes qu’elles ont rencontré dans leur cas particulier.</p>

  584. <p>Comme cela ne suffit pas pour identifier tous les irritants, Mélodie et Maïtané vont régulièrement observer sur place comment travaillent <em>en vrai</em> les personnes. Quelles sont leurs habitudes avec les onglets, quels sont les chemins courants qui pourraient être simplifiés, qu’est-ce qui est complètement ignoré dans le feu de l’action, etc.</p>

  585. <h2>Les joies</h2>

  586. <blockquote>

  587. <p>For a long time I believed that a strong team is made of stars — extraordinary world-class individuals who can generate and execute ideas at a level no one else can. These days, I feel that a strong team is the one that feels more like a close family than a constellation of stars. A family where everybody has a sense of predictability, trust and respect for each other. A family which deeply embodies the values the company carries and reflects these values throughout their work. But also a family where everybody feels genuinely valued, happy and ignited to create.</p>

  588. <p><cite><em><a href="https://www.linkedin.com/feed/update/urn%3Ali%3Aactivity%3A6563052649350995968/">Vitaly Friedman on LinkedIn</a></em> (<a href="/david/cache/d15e69a2911bc64c80bfdcb76edfd0a6/">cache</a>)</cite></p>

  589. </blockquote>

  590. <p>Les rituels, les pratiques, tout cela semble très analytique et pourtant c’est autre chose qui se produit au quotidien. On voit les autres évoluer et on se sent évoluer grâce aux différentes interactions que l’on peut avoir. On partage davantage que du code ou un produit, un bout de chemin que l’on fait ensemble et qui donne envie d’aller de l’avant. En trouvant un équilibre entre monotonie et apprentissage qui satisfasse chacun·e d’entre nous.</p>

  591. <p>Peut-être est-ce cela faire équipe : partager l’enthousiasme de faire des choses ensemble qui permettent de mieux se connaître. Et si je me connais bien davantage aujourd’hui c’est après avoir eu l’occasion d’échanger avec ces personnes bienveillantes. C’est après avoir traversé des périodes anxiogènes en se serrant les coudes. C’est enfin avoir su s’adapter pour communiquer autant au sein de l’équipe qu’avec notre contexte de manière sereine.</p>

  592. <h2>L’arithmétique</h2>

  593. <p>J’ai déjà parlé du <a href="/david/blog/2017/code-vitesse/">mythe des 10x engineers</a>, je crois de plus en plus en la somme des individus qui forme un tout plus pertinent. Le fameux <code>1 + 1 = 3</code> appliqué à un périmètre plus large. Et par pertinent j’entends harmonieux et enthousiasmant plus que productif et efficace. Je vais donner quelques exemples pour préciser.</p>

  594. <p>Je pourrais coder pendant une année complète tout seul sur un produit. Ça m’est arrivé par exemple quand j’étais au Japon. Et je sais que dans ces conditions, la qualité en pâtit. Pas seulement la qualité du code mais la qualité de mon apprentissage autour de celui-ci (qui est relativement lié à ma qualité de vie). Depuis, je fais mon possible pour ne pas me retrouver dans cette situation à nouveau et j’ai du plaisir à pouvoir échanger sur mes pratiques au quotidien. Parenthèse : c’est aussi pour cela que je ne suis plus à mon compte, ce que je (re)trouve dans <a href="http://scopyleft.fr/">scopyleft</a> c’est cette capacité à apprendre et réfléchir par l’échange.</p>

  595. <p>Autre exemple, on peut faire une interface peu avenante et fonctionnelle. On peut recruter quelqu’un·e pour faire des maquettes. Mais lorsque toute l’équipe s’y met on a une combinaison de contraintes techniques, de contraintes métiers, de retours utilisateur·ice·s et d’inspirations diverses pour arriver au compromis qui soit satisfaisant pour toutes et tous. Avoir quelqu’un qui tient la barre dans ce domaine est un plus indéniable et quand tout l’équipage est sur le pont pour réussir à garder le cap ça permet d’y aller de manière plus sereine.</p>

  596. <p>Enfin, une personne peut porter un projet toute seule. Mais sans échanges réguliers avec l’équipe, la responsabilité qui lui incombe va finir par altérer son jugement et son humeur. C’est normal, c’est même sain. Il faut un moyen de décharger les frictions et rien ne vaut pour cela le soutien de celles et ceux embarqué·e·s dans la même aventure.</p>

  597. <h2>Les mystères</h2>

  598. <p>Est-ce que c’est pour autant <a href="https://www.youtube-nocookie.com/embed/OQSNhk5ICTI">double rainbow all the way</a> tous les jours ? Non. Est-ce qu’on code tout parfaitement du premier coup ? <a href="https://www.youtube-nocookie.com/embed/MYZ67-Sh7kM">Encore moins</a>. Est-ce qu’on <a href="/david/blog/2017/oeuvrier-du-web/">œuvre</a> pour le <a href="/david/stream/2018/06/06/">bien commun</a> ou pour le <a href="/david/stream/2018/04/25/">gouvernement</a> ? <a href="https://www.youtube-nocookie.com/embed/OawrlVoQqSs">¡Porque no los dos!</a> Est-ce qu’on s’envoie des gifs et des vidéos toute la journée ? Mème pas.</p>

  599. <p>Plus sérieusement, est-ce que ça va durer et/ou est-ce que c’est reproductible ? Difficile de répondre à ces deux questions aussi je les assimile à des mystères. Et j’arrive plutôt bien à vivre avec ainsi :-).</p>

  600. <h2>Conclusion</h2>

  601. <p>Au-delà de la notion de <em>faire équipe</em>, il y a celle plus globale de <em>savoir-agir</em> qui vient mettre en pratique des <em>savoir-être</em> et des <em>savoir-faire</em>. Peut-être est-ce qu’il s’agit là de l’un des savoirs essentiels à notre temps et tellement négligé. Au moment où l’on encourage à devenir un <em>consomm’acteur</em> qui s’assimile pour moi à un <em>avoir-agir</em>, il me semblerait pertinent d’essayer d’apprendre à faire ensemble.</p>

  602. <p>Si possible à plus de cinq.</p>

  603. <hr />

  604. <p><em>Est-ce que ce témoignage a été utile ? Difficile à évaluer tout seul, on en discute pour essayer de le rendre plus pertinent ?</em></p>

  605. </article>

  606. 

  607. 

  608.   <figure class="image" property="schema:image">

  609.     <img src="/static/david/blog/2019/faire-equipe.jpg" alt="" />

  610.   </figure>

  611. 

  612. 

  613. 

  614. <nav id="jumpto">

  615.   <p>

  616.     <a rel=prev href="/david/blog/2019/flux-rss/">← Flux RSS ?</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2019/faire-famille/">Faire famille →</a>

  617.   </p>

  618. </nav>

  619. 

  620. <footer>

  621.   <div>

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

  623.     <p>

  624.       Bonjour/Hi!

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

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

  627.     </p>

  628.     <p>

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

  630.     </p>

  631.     

  632.       <p>

  633.         Les dernières publications hebdomadaires sont :

  634.       </p>

  635.       <ul class="with_columns">

  636.         

  637.           <li>

  638.             <a href="/david/stream/2019/12/31/">Merci</a>

  639.           </li>

  640.         

  641.           <li>

  642.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  643.           </li>

  644.         

  645.           <li>

  646.             <a href="/david/stream/2019/12/24/">Outils</a>

  647.           </li>

  648.         

  649.           <li>

  650.             <a href="/david/stream/2019/12/17/">Origines</a>

  651.           </li>

  652.         

  653.           <li>

  654.             <a href="/david/stream/2019/12/10/">Publier</a>

  655.           </li>

  656.         

  657.           <li>

  658.             <a href="/david/stream/2019/12/03/">En forêt</a>

  659.           </li>

  660.         

  661.           <li>

  662.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  663.           </li>

  664.         

  665.           <li>

  666.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  667.           </li>

  668.         

  669.           <li>

  670.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  671.           </li>

  672.         

  673.           <li>

  674.             <a href="/david/stream/2019/11/05/">Positif</a>

  675.           </li>

  676.         

  677.           <li>

  678.             <a href="/david/stream/2019/10/29/">Dettes</a>

  679.           </li>

  680.         

  681.           <li>

  682.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  683.           </li>

  684.         

  685.           <li>

  686.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  687.           </li>

  688.         

  689.           <li>

  690.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  691.           </li>

  692.         

  693.           <li>

  694.             <a href="/david/stream/2019/10/01/">Présent</a>

  695.           </li>

  696.         

  697.           <li>

  698.             <a href="/david/stream/2019/09/24/">Manifester</a>

  699.           </li>

  700.         

  701.           <li>

  702.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  703.           </li>

  704.         

  705.           <li>

  706.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  707.           </li>

  708.         

  709.           <li>

  710.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  711.           </li>

  712.         

  713.           <li>

  714.             <a href="/david/stream/2019/08/27/">Documenter</a>

  715.           </li>

  716.         

  717.           <li>

  718.             <a href="/david/stream/2019/08/20/">Frustration</a>

  719.           </li>

  720.         

  721.           <li>

  722.             <a href="/david/stream/2019/08/13/">Holisme</a>

  723.           </li>

  724.         

  725.           <li>

  726.             <a href="/david/stream/2019/08/06/">1%</a>

  727.           </li>

  728.         

  729.           <li>

  730.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  731.           </li>

  732.         

  733.           <li>

  734.             <a href="/david/stream/2019/07/23/">Timelines</a>

  735.           </li>

  736.         

  737.           <li>

  738.             <a href="/david/stream/2019/07/16/">Écoute</a>

  739.           </li>

  740.         

  741.           <li>

  742.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  743.           </li>

  744.         

  745.           <li>

  746.             <a href="/david/stream/2019/06/21/">À lier</a>

  747.           </li>

  748.         

  749.           <li>

  750.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  751.           </li>

  752.         

  753.           <li>

  754.             <a href="/david/stream/2019/06/07/">Amateur</a>

  755.           </li>

  756.         

  757.           <li>

  758.             <a href="/david/stream/2019/05/31/">Pollution</a>

  759.           </li>

  760.         

  761.           <li>

  762.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  763.           </li>

  764.         

  765.           <li>

  766.             <a href="/david/stream/2019/05/10/">Folie</a>

  767.           </li>

  768.         

  769.           <li>

  770.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  771.           </li>

  772.         

  773.           <li>

  774.             <a href="/david/stream/2019/04/12/">Péremption</a>

  775.           </li>

  776.         

  777.           <li>

  778.             <a href="/david/stream/2019/04/05/">Définitions</a>

  779.           </li>

  780.         

  781.           <li>

  782.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  783.           </li>

  784.         

  785.           <li>

  786.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  787.           </li>

  788.         

  789.           <li>

  790.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  791.           </li>

  792.         

  793.           <li>

  794.             <a href="/david/stream/2019/03/08/">Lecture</a>

  795.           </li>

  796.         

  797.           <li>

  798.             <a href="/david/stream/2019/03/01/">Journaux</a>

  799.           </li>

  800.         

  801.           <li>

  802.             <a href="/david/stream/2019/02/22/">Écriture</a>

  803.           </li>

  804.         

  805.           <li>

  806.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  807.           </li>

  808.         

  809.           <li>

  810.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  811.           </li>

  812.         

  813.           <li>

  814.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  815.           </li>

  816.         

  817.           <li>

  818.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  819.           </li>

  820.         

  821.           <li>

  822.             <a href="/david/stream/2019/01/18/">Agilité</a>

  823.           </li>

  824.         

  825.           <li>

  826.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  827.           </li>

  828.         

  829.           <li>

  830.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  831.           </li>

  832.         

  833.       </ul>

  834.     

  835.     <p>

  836.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  853.     </p>

  854.     <p>

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

  856.     </p>

  857.     <p>

  858.       Je ne traque pas ta navigation mais mon

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

  860.       conserve des logs d’accès.

  861.     </p>

  862.   </div>

  863. </footer>

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

  865.   ;(_ => {

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

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

  868.       e.preventDefault()

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

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

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

  872.     })

  873.   })()

  874. </script>

  875. 

  876.   <script>

  877.   /* Service workers */

  878.   if (navigator.serviceWorker) {

  879.     window.addEventListener('load', function () {

  880.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  881.       function sendLinks (selector) {

  882.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  883.           return link.getAttribute('href')

  884.         })

  885.         links.push(location.pathname)  // Put the current page in cache too.

  886.         navigator.serviceWorker.controller.postMessage({ links: links })

  887.       }

  888.       navigator.serviceWorker.getRegistration()

  889.         .then(function (registration) {

  890.           if (!registration || !navigator.serviceWorker.controller) {

  891.             return navigator.serviceWorker.register('/serviceworker.js')

  892.               .then(navigator.serviceWorker.ready)

  893.               .then(function () {

  894.                 console.log('[ServiceWorker] Ready to go!')

  895.               })

  896.               .catch(console.error.bind(console))

  897.           } else {

  898.             console.log('[ServiceWorker] Send links via registration')

  899.             sendLinks(selector)

  900.           }

  901.         })

  902.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  903.         console.log('[ServiceWorker] Send links via controller change')

  904.         sendLinks(selector)

  905.       })

  906.       navigator.serviceWorker.addEventListener('message', function (event) {

  907.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  908.         if (event.data.status && link) {

  909.           link.style.backgroundColor = '#2d7474'

  910.           link.style.color = '#f0f0ea'

  911.           

  912.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  913.           

  914.         }

  915.       })

  916.     })

  917.   } else {

  918.     console.warn('[ServiceWorker] No cache for old browsers.')

  919.   }

  920. </script>