davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Zam — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Thank you Florens! -->
<link rel="stylesheet" href="/static/david/css/style_2020-02-24.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" crossorigin>

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
<h1>Zam</h1>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/04/10/" title="Publication précédente : Résistance">←</a> •
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
    
  </p>
</nav>
<hr>

<p><em>L’histoire assez personnelle d’un produit collectif.</em></p>
<h2 id="contexte">Contexte <a href="#contexte" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>Je suis contacté par Raphaël il y a deux ans pour rejoindre une <a href="https://beta.gouv.fr/">Startup d’État</a>, après avoir travaillé sur <a href="https://www.data.gouv.fr/fr/">datagouv</a> pendant un temps puis avoir planté <a href="https://beta.gouv.fr/startups/api-drones.html">une autre startup</a>. Dans un tel contexte, on ne sait jamais ce qui va pousser après. Dans mon cas, ça avait quand même fait germé une petite graine sur l’importance d’un·e responsable produit ainsi que la présence d’une personne ayant des compétences en <abbr title="Expérience utilisateur·ice">UX</abbr>.</p>
<p>Je souligne l’aspect <em>personnel</em> de ce retour en introduction car nous sommes aussi en train de compiler une histoire collective de cette aventure et j’espère que nous pourrons la rendre publique tant les points de vue des autres membres de <a href="/david/blog/2019/faire-equipe/">l’équipe</a> sont riches et pertinents.</p>
<hr />
<p>Cela faisait un moment que je m’intéressais au processus législatif car il me semblait que cela était un élément clé de la démocratie. Aussi, je réponds naïvement « oui » et me voilà embarqué dans un wagonnet de montagnes russes. Enfin — canadiennes en fait — vu que nous avons pu concevoir l’intégralité du produit <a href="/david/blog/2018/penser-distance/">en étant à distance</a>.</p>
<figure>
    <img src="/static/david/2020/zam_journal.png" alt="Première rencontre avec Mélodie le 18 avril, avec Raphaël le 17." loading="lazy" />
    <figcaption>Première entrée dans mon journal pro, j’aime constater à quel point il a évolué dans le temps pour consigner davantage des émotions et ressentis une fois la confiance installée.</figcaption>
</figure>
<h2 id="approche">Approche <a href="#approche" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>Pour tenir dans la durée, il faut réussir à trouver un rythme qui soit soutenable pour tou·te·s. En étant à distance et sur un fuseau horaire différent, cela signifie s’adapter pour trouver un créneau quotidien d’échange qui tourne autour d’une heure. C’est un moment important autant pour le travail à réaliser que pour maintenir l’humeur de l’équipe à un niveau enthousiasmant. Non pas comme une suite de <em>sprints</em> mais comme un ultra-marathon avec plein de <em>pacers</em>.</p>
<p>En parallèle de ces discussions, il y a nos échanges avec les personnes utilisant le produit dont l’avis est essentiel pour pouvoir continuer à être pertinents. Cela arrive environ toutes les deux semaines et nous mettons un canal de réception en place pour les personnes ne pouvant pas être sur place. C’est vraiment important pour moi d’arriver à avoir ces retours sans intermédiaires de façon à développer mon empathie pour les utilisateur·ice·s.</p>
<p>Tous les six mois environ (?), on prend un peu de recul sur ce que l’on a fait et compris — sur notre nouvelle façon de voir les choses aussi — pour réajuster le cap si on en ressent le besoin. Cela permet d’échanger sur des émotions qui sont passées entre les mailles du filet quotidien.</p>
<h2 id="technique">Technique <a href="#technique" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>J’ai parlé un peu de <a href="/david/2020/03/13/">technique</a> récemment et la pile de technologies que l’on a utilisé pour ce projet me semble être relativement stable et compréhensible. Le code est accessible sur <a href="https://github.com/betagouv/zam/">Microsoft Github</a> sous <a href="https://tldrlegal.com/license/gnu-affero-general-public-license-v3-(agpl-3.0)">licence AGPL-3</a>, on peut voir que la répartition est assez équilibrée entre Ronan et moi. C’est du Python 3 annoté pour les types qui utilise <a href="https://trypyramid.com/">Pyramid</a> comme <em>framework</em> web. Rien de très exotique et c’est intentionnel considérant que nous souhaitions à un moment transmettre le produit (voir plus bas).</p>
<figure>
    <img src="/static/david/2020/zam_meme_bootstrap.jpg" alt="Il y aura toujours Bootstrap sur Zam." loading="lazy" />
    <figcaption>Un petit mème <em>courtesy of</em> Maïtané 😅.</figcaption>
</figure>
<p>Ce qui est peut-être un peu plus inhabituel c’est de ne pas utiliser <a href="https://www.npmjs.com/">Microsoft npm</a> pour gérer nos dépendances JavaScript, cela permet de bien voir ce que l’on ajoute, une sorte de <a href="https://timkadlec.com/remembers/2020-03-18-building-with-friction/">friction</a> (<a href="/david/cache/2020/331eb17ffb3f4fbb5fdd8123c0dc1eeb/">cache</a>) manuelle qui m’est chère lorsqu’on parle de faire tourner mon code sur la machine de beaucoup d’autres.</p>
<p>Les principaux défis techniques ont été de gérer des données en entrée en provenance des sites parlementaires qui n’étaient pas forcément très stables. Lorsque toute la pertinence du produit repose sur la fraîcheur des données à un moment clé du processus législatif, c’est quelque peu anxiogène de se dire que l’on n’a aucun contrôle dessus !</p>
<div class="error">Could not find file: fragments/Zam Transmission.md</div>
<div class="error">Could not find file: fragments/Zam Satisfaction.md</div>
<div class="error">Could not find file: fragments/Zam Regrets.md</div>
<div class="error">Could not find file: fragments/Zam Suite.md</div>

<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/04/10/" title="Publication précédente : Résistance">←</a> •
    <a href="/david/2020/" title="Liste des publications récentes">↑</a>
    
  </p>
</nav>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
</body>
</html>