davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748
							<!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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Le joyeux mélange des cultures professionnelles : soliste de haut-niveau, cheffe d’orchestre ou femme-orchestre ? (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://marges.clairezuliani.com/good_job/2018/05/27/melange-cultures-professionnelles.html">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Le joyeux mélange des cultures professionnelles : soliste de haut-niveau, cheffe d’orchestre ou femme-orchestre ? (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://marges.clairezuliani.com/good_job/2018/05/27/melange-cultures-professionnelles.html">Source originale du contenu</a></h3>
    <p>Lors de la 8<sup>e</sup> édition de SudWeb qui vient de se terminer, je donnais ma toute toute <a href="https://sudweb.fr/2018/programme/#le-joyeux-melanges-des-cultures-professionnelles-soliste-de-haut-niveau-cheffe-dorchestre-ou-femme-orchestre">première intervention</a> en solo dans une conférence web (et c’est aussi stressant que ce que j’anticipais).</p>

<p>Comme, les semaines précédentes, je n’ai cessé d’écrire / raturer / supprimer / expliciter, j’en ai une trame rédigée assez précise. Voici donc une retranscription plus ou moins fidèle de ce que j’ai raconté, agrémenté de quelques infos supplémentaires.<br/>
</p>

<p>C’est parti !</p>

<h2 id="avant-jétais-une-cyber-punk-associative">Avant, j’étais une cyber punk associative</h2>

<p>Bonjour à toutes et à tous, je m’appelle Claire, et avant je bossais pour une association de cyber punks.</p>

<h3 id="la-période-punk">La période punk</h3>

<p>Retour en arrière. On est en 2008, je sors de mes études culturelles et j’entre dans une association d’arts numériques à Lyon. Arts numériques ?</p>

<p>Pour cette association, faire de l’art numérique, ça signifiait aussi bien monter des ateliers multimédias dans les quartiers que proposer des grosses installations interactives pendant la Fête des Lumières, par exemple.</p>

<p>Voilà pour le côté « cyber » de cyber punk.</p>

<p>Pour le côté punk : l’association vient d’une friche, d’un squat artistique, le fonctionnement est collégial, on a 5 co-présidents… Bon, c’est des punks qui touchent des subventions, mais la structure garde quand même un petit côté alternatif et radical.</p>

<p>Et bordélique.</p>

<p>Par exemple, moi, j’ai été embauchée en tant qu’administratrice. Puis, parce qu’il y avait besoin et parce que ça croisait mes envies, j’ai petit à petit endossé aussi la casquette de chargée de com’ : appris par moi-même la photo car jusqu’ici nos photos étaient nases, etc. Il y avait un petit côté Do It Yourself AUSSI dans la fiche de poste, en somme.</p>

<p>Officieusement, c’était encore pire. Tour à tour j’ai pu être : animatrice d’ateliers photo, tenancière de bar, organisatrice de rencontres professionnelles, enrouleuse de câbles, formatrice photoshop, soudeuse de mannequins interactifs…</p>

<p>Le périmètre réel de ma fiche de poste était complètement explosé. C’était intense, c’était le foutoir, mais c’était aussi franchement grisant.</p>

<p>Jusqu’à ce que ça ne le soit plus.</p>

<h3 id="la-dépunkisation">La dépunkisation</h3>

<p>Au fil du temps, l’association a grossi et s’est professionnalisée. Son activité a doublé, et j’ai dû laisser de côté tout ce qui était un tant soit peu marrant pour me concentrer sur mon coeur de métier : l’administratif.<br/>
Et, comme beaucoup de gens, je crois que fondamentalement je n’aime PAS l’administratif (après 4 ans en poste, il était temps que je me l’avoue).</p>

<p>Bref. Ce n’était plus drôle, et je décidai de quitter mon boulot.</p>

<p>On est en 2012, je retourne sur le banc de la fac, reprends des études en informatique et développement web, puis j’intègre une petite agence web.</p>

<p>En changeant de milieu professionnel, j’ai découvert un nouveau monde, assez différent de celui d’où je viens.</p>

<p>Déjà, niveau salarial. Rien à voir. J’étais smicarde avec un BAC +5, et d’un coup je gagne 50 % de plus avec mon nouveau BAC +3.</p>

<p>Ensuite, en terme de culture et d’usages professionnels : je découvre un secteur qui aime suivre des méthodes (agiles ou non), qui met en place des workflows et créé des systèmes, qui est plein de processus, de conventions, de rôles délimités et de + en + spécialisés.</p>

<p>C’est très écrit, c’est très cadré.<br/>
C’est reposant (et ça tombe bien, c’est ce que je recherche à ce moment-là)… jusqu’à ce que ça en devienne un peu ennuyeux.</p>

<p>Alors je pars et je me mets à mon compte.</p>

<h2 id="remettre-du-punk-">Remettre du punk ?</h2>

<h3 id="je-nveux-pas-mspécialiser">Je n’veux pas m’spécialiser</h3>

<p>Pourquoi est-ce que je pars ? Par manque de punk, sûrement :)</p>

<p>Fondamentalement, parce que j’avais envie de choisir mes projets, de choisir avec qui je travaille… Mais aussi, parce que je n’avais pas envie de choisir un rôle, une étiquette, je ne voulais pas me spécialiser.</p>

<p>Je me souviens des entretiens semi-annuels dans mon ancienne boîte, quand on me demandait mes envies de formation c’était un calvaire !</p>

<p><em>« Alors…. L’admin-sys j’aimerais en savoir plus parce que ça me fout les jetons, l’intégration c’est un domaine qui me plaît et que j’aimerais bien creuser, la gestion de projet ça m’intéresse aussi pas mal… »</em></p>

<p>Envie de tout, comme la tentation d’être un couteau suisse (même si je reste encore assez proche du canif pour le moment, hein).</p>

<p>Au fond, ce qui m’intéresse, c’est d’être capable de maîtriser dans les grandes lignes toute la chaîne de production de bout en bout, c’est d’avoir une vue d’ensemble sur un projet.</p>

<p>Hm hm, avoir une vue d’ensemble, ça voudrait dire quoi, ça ?</p>

<h3 id="je-ne-veux-pas-chapeauter">Je ne veux pas chapeauter</h3>

<p>Il y a un an, c’était mon premier Sud Web. J’y avais été entraînée par un ami, qui, alors que je lui parlais de ma réticence à me spécialiser, m’a dit un truc du genre :</p>

<blockquote>
  <p>« Il va falloir penser à passer de femme-orchestre à chef d’orchestre »</p>
</blockquote>

<p>Ca m’a contrariée, cette phrase. Ca voudrait dire que mon évolution logique, ce serait de devenir un genre de chef de projet ? Une espèce de dirigeante d’entreprise ?</p>

<p>Mais moi, j’ai plutôt envie de jouer un peu de tous les instruments avec plein de copains, pas de diriger à la baguette !</p>

<p>Donc, je ne veux être ni spécialisée, ni gestionnaire, ok. C’est quoi que je veux, alors ?</p>

<p>[…]</p>

<p>Mais.. Mais… mais en fait…</p>

<p>Oh purée, ma vocation, ce serait d’être fullstack ? (mot à prononcer avec une grimace, car petit à petit, j’ai intégré les codes et valeurs de mon nouveau secteur, et à ce que j’ai cru comprendre c’est un terme à prononcer avec une légère expression de dégoût).</p>

<p>Est-ce que c’est vraiment ça que je veux ? Etre une « pseudo-dev de pacotille, qui dit savoir tout faire et qui en fait ne sait pas faire grand chose », ce genre de profil moqué par les VRAIS développeurs ?</p>

<p>C’est pas très punk ça, non ?</p>

<p>Si remettre du punk dans ma pratique, ça ne passe pas tout à fait par être fullstack, ça passe par quoi, alors ? On va essayer de le définir ensemble.</p>

<h2 id="minimal-stack">Minimal stack</h2>

<p>Pour commencer, le punk, pour moi, ne serait pas tant dans le fullstack que dans le minimal stack.</p>

<p>Etre minimal stack, c’est quoi ?</p>

<h3 id="des-outils-minimalistes-et-évolutifs">Des outils minimalistes et évolutifs</h3>

<p>Minimal stack, comme je l’entends, ce n’est pas retourner à des sites dans leur plus simple appareil (de l’HTML pur avec juste une pincée de CSS). Le minimal stack, ce serait plutôt faire le choix d’outils minimalistes et évolutifs, partir des briques les plus simples possibles pour introduire progressivement de la complexité.</p>

<p>Pourquoi dégainer un wordpress quand tout ce que veut la personne en face, c’est un site vitrine basique avec tout au plus un formulaire de contact ?</p>

<p>Pourquoi anticiper des tas de fonctionnalités exotiques avant même que les besoins émergent (et au risque qu’en fait, ces besoins n’existent même pas…) ?</p>

<p>D’où un intérêt croissant pour les <a href="https://www.staticgen.com/">sites statiques</a>, la <a href="https://jamstack.org/">JAMstack</a>, l’interopérabilité…</p>

<h3 id="une-courbe-dapprentissage-à-la-cool">Une courbe d’apprentissage à la cool</h3>

<p>Etre minimal stack, c’est aussi faire le choix d’une courbe d’apprentissage à la cool, car mon côté punk est une feignasse qui n’aime pas faire plus d’effort que nécessaire.</p>

<p>Concrètement, ça signifie qu’à résultat + ou - équivalent, je préfère partir sur la technologie qui sera la plus simple à apprendre, la plus documentée et la plus éprouvée.</p>

<p>Quelle est l’idée derrière minimal stack ? C’est la recherche d’une certaine frugalité, et de l’efficience : consommer le moins de ressources possibles pour arriver au résultat espéré.</p>

<h2 id="fluid-stack">Fluid stack</h2>

<p>Mon punk ne se trouve pas que dans le minimal stack, mais aussi dans le fluid stack. Fluid, pas comme les <a href="https://alistapart.com/article/fluidgrids">grilles css</a>, plutôt comme gender fluid, comme ces personnes qui ne veulent pas se définir ou se limiter à un genre. Moi, je ne veux pas me limiter à un rôle ou une activité.</p>

<h3 id="suivre-ses-envies-professionnelles">Suivre ses envies professionnelles</h3>

<p>Etre fluid stack, c’est suivre ses envies professionnelles même si elles débordent une qualification initiale ou une fiche de poste.</p>

<p>Ca peut vouloir dire, en tant que développeuse back, endosser sur un projet un rôle de chercheuse, organiser des ateliers ou des sessions de tests d’usage, parce qu’on a envie d’aller gratter ce qui se cache derrière le terme « UX ».</p>

<p>C’est aussi s’autoriser à rechercher spécifiquement des projets en lien avec des sujets ou des préoccupations personnelles.</p>

<p>C’est, en somme, faire en sorte que son parcours professionnel suive et soit en connexion avec son évolution personnelle, que les identités personnelles et professionnelles se nourrissent l’une l’autre.</p>

<h3 id="assumer-une-posture-dapprentissage-constant">Assumer une posture d’apprentissage constant</h3>

<p>Etre fluid stack, c’est aussi, et en conséquence avec ce que je viens de d’écrire, assumer une posture d’apprentissage constant.</p>

<p>Pour moi, ce qui est punk, c’est de reconnaitre qu’il y a plein de choses qu’on ne sait pas, mais de réussir à s’en moquer, de se dire que ce n’est pas grave. Et même tant mieux, qu’on ne sache pas tout : un projet où on sait d’emblée tout faire, c’est généralement un projet où on s’ennuie !</p>

<p>De toute façon, à partir du moment où on cherche à mener sa barque vers des territoires inexplorés (aller vers de l’UX ou de la facilitation quand on vient du back end, par exemple), alors on se retrouve en position de junior.</p>

<p>Et se retrouver junior, ça peut être cool et ça peut se faire bien, du moment qu’on travaille avec les bonnes personnes et dans un environnement de confiance.</p>

<p>Personnellement, c’est cette posture un peu humble et évolutive qui me permet de garder bien vivant l’enthousiasme.</p>

<h2 id="political-stack">Political stack</h2>

<p>Identifier le punk comme minimal et fluid, ce n’est pas forcément conventionnel, mais il y a peut-être un autre adjectif, qu’on rattache plus souvent au punk, qui entrerait comme composante de ma stack ?</p>

<p>Et oui, n’oublions pas que le punk, c’est aussi politique !</p>

<p>Du coup, ma stack, elle n’est pas seulement fluide et minimal, elle est sans doute aussi politique, au sens large, non partisan du terme. Cette dimension politique, évidemment, s’incarne déjà à travers le choix des projets dans lesquels on décide de s’impliquer. Cet aspect me semble tellement évident que j’ai envie de m’attarder plutôt sur d’autres aspects politiques de la pratique professionnelle du web.</p>

<h3 id="la-valeur-de-la-maïeutique">La valeur de la maïeutique</h3>

<p>Par exemple, pour moi est politique toute réflexion sur les systèmes de valeur qui régissent la façon dont fonctionne la société.</p>

<p>Dès lors, le punk c’est peut-être se dire que la valeur n’est pas que dans la brique technologique qui est produite, mais aussi (surtout ?) dans ce que ça produit d’humain autour.</p>

<p>Illustration.</p>

<p>J’ai passé pas loin de 4 ans en agence, et tout du long j’ai eu l’impression de construire des prototypes, systématiquement, plutôt que des produits finis. J’avais souvent l’impression que c’était leur de la mise en oeuvre du projet que le produit était petit à petit défini. Limite, c’est une fois le projet fini que je pouvais me dire « Aaaah, c’est donc ça, en fait, que le client voulait ! ».</p>

<p>C’est peut-être une question de procédés ou de méthodologies inaboutis, ou bien de gamme de clientèle qui ne permet pas de consolider suffisamment un projet. Quoi qu’il en soit, je ne pense pas que l’agence dans laquelle j’étais soit la seule confrontée à ce type de situation.</p>

<p>Et donc, je me dis : quitte à produire des prototypes plutôt que des produit finis, autant l’assumer dès le début. Je réalise des croquis, des ébauches, plus que des statues en marbre conçues pour durer. Et c’est peut-être dans ces esquisses que réside ma plus-value.</p>

<p>Réussir à accompagner des porteurs de projets, à ordonner leurs enjeux et leurs idées, à mettre en place une maïeutique, « l’art de faire accoucher les esprits », c’est peut-être là que se situe la plus grande valeur (d’autant plus dans un monde où la maîtrise technologique tend à se démocratiser ou à s’automatiser).</p>

<p>Et puis, la notion de produit fini conçu pour durer, c’est peut-être un peu obsolète, non ? Combien des sites qu’on a réalisé il y a plus de 5 ans sont encore en ligne ? Est-ce que dans 3 ou 4 ans, ce framework que j’apprends sera encore utilisé ?</p>

<p>N’y a-t-il pas de quoi déprimer à se dire qu’on a passé tant de temps sur un projet et qu’il n’en reste rien ?</p>

<h3 id="compostabilité-et-qualité-des-relations-humaines">Compostabilité et qualité des relations humaines</h3>

<p>Rien, vraiment ?</p>

<p>Parlons compost, et compostabilité des projets. Partons du postulat que les projets sont de la matière vivante, ils vivent, ils grandissent, évoluent puis meurent, un jour ou l’autre. Qu’est-ce qu’il en reste, après ?</p>

<p>Dès le début d’un projet, on peut faire en sorte de le rendre compostables, en augmentant les possibilité de partage et de réutilisation de ses composantes. Ca peut passer par l’utilisation de licences libres, de formats ouverts, la mise en place d’une interopérabilité… Cette idée de compostabilité est directement emprunté à Romain Lalande et Laurent Marsault. <a href="https://vecam.org/La-compostabilite-pour-un-ecosysteme-de-projets-vivaces">Lisez-les</a>, ils en parlent mieux que moi)</p>

<p>Mais même sans  penser d’emblée compostabilité, à la mort du projet il reste a minima un genre d’humus. A titre individuel, c’est la sédimentation d’une nouvelle expérience sur notre amas d’expériences personnelles. A titre collectif, il reste un vécu commun, dans les meilleurs cas un échange nourrissant et transformateur, pour toutes les parties prenantes (client, membres de l’équipe…). J’espère que les structures que j’ai pu accompagner dans une démarche de design global plus poussée ne penseront plus leurs projets web de la même façon, par exemple.</p>

<p>C’est peut-être aussi ça, un projet orienté humain : ce n’est pas uniquement un projet centré utilisateur, mais un projet mené de telle façon que les relations entre les différentes parties prenantes soient aussi saines et enrichissantes que possibles. On n’est pas très loin ici d’une certaine <a href="https://fr.wikipedia.org/wiki/%C3%89thique_de_la_sollicitude">éthique du care</a>.</p>

<p>Ne pas se focaliser que sur la robustesse d’un produit, mais porter au moins autant d’attention à sa compostabilité et à la qualité des relations humaines qui permettent à ce produit d’exister, pour moi c’est un engagement politique.</p>

<h3 id="le-code-révélateur-du-politique">Le code révélateur du politique</h3>

<p>Au-delà de ça, même notre matière première, le code, a pour moi des qualités politiques intrinsèques.</p>

<p>Réaliser un projet web, c’est définir de façon précise les règles de fonctionnement d’un système avec lequel d’autres gens vont interagir.</p>

<p>Comment vous voulez que ça ne soit pas politique ! <a href="https://framablog.org/2010/05/22/code-is-law-lessig/">Code is law</a>, comme disait l’autre.</p>

<p>Le code est binaire, une suite de portes logiques. Cette binarité est d’ailleurs l’une des vertus que j’ai appréciées le plus lors de mon changement d’orientation : mon travail a soudainement gagné énormément en concret, en regard aux tâches administratives intangibles de mon précédent poste.</p>

<p>Avec la mise en oeuvre d’un projet web, on est donc dans du concret, du pratique, du détail. Il n’y a pas moyen de se cacher derrière l’énonciation de grands principes généraux un peu flous.</p>

<p>Prenons un client plus ou moins lambda : <em>« Sur notre plateforme de participation, nous voulons donner la parole de tous nos usagers ! »</em> Sur le principe, l’intention est tout à fait louable ! Mais dans le détail ? Tiens ? La modération des utilisateurs est faites a priori, et non a posteriori ? Les utilisateurs doivent s’inscrire sous leur vraie identité, l’utilisation de pseudonymes n’est pas autorisée ?</p>

<p>Il y a forcément un moment où le code révèle des positionnements politiques.</p>

<h3 id="le-pouvoir-des-techniciens">Le pouvoir des techniciens</h3>

<p>Je considère que la technologie n’est pas neutre, mais reflète des partis pris, des préjugés, la vision du monde de ses concepteurs.</p>

<p>Sauf que la plupart du temps, mes interlocuteurs n’ont pas cette vision politique de la technologie. Et c’est tant mieux, car comme ça, nous autres techniciens pouvons avancer à couvert. Ce n’est pas politique, un technicien. Alors, quand on donne notre avis, quand on questionne, quand on oriente en loucedé, ça parait innocent.</p>

<p><em>« Vous savez, la modération a posteriori, d’expérience ça se passe bien, et ça demande moins de ressources à mettre en oeuvre… Au pire on tente, et au moindre soucis, on met en place un autre système. D’accord ? »</em></p>

<p>Sur des projets de moyenne envergure, la majorité du temps il n’y a effectivement aucun problème de comportement, et on conserve la modération a posteriori. En passant, face au bon comportement de ses utilisateurs, le client gagne quelques points de confiance en l’humanité.</p>

<p>On a un pouvoir énorme. Ce serait dommage de pas être assez punk pour l’utiliser.</p>

<h2 id="retour-dexpérience-et-feuille-de-route">Retour d’expérience et feuille de route</h2>

<p>Une stack minimal, fluide et politique, de quoi faire de la bidouille numérique maïeutique et un brin engagée, c’est ça la stack punk que j’ai en tête.</p>

<p>Où est-ce que j’en suis de ce programme ? Au tout début. C’est autant une feuille de route qu’un retour d’expérience, une manière de trouver une légitimité à mon profil hybride. Je suis encore une toute jeune freelance, j’avance à petit pas, et je ne sais pas encore si ce type de positionnement est faisable et tenable sur le long terme. Mais j’ai grave envie de le tenter.</p>

<p><em>Une question ? Une remarque ? Vous voulez qu’on monte un club punk ? Vous pouvez m’alpaguer sur <a href="https://twitter.com/ZooletteDesBois">twitter</a> ou par <a href="https://www.clairezuliani.com/#contact">mail</a></em></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://marges.clairezuliani.com/good_job/2018/05/27/melange-cultures-professionnelles.html">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>