davidbgk
/
larlet-fr-david-cache

<!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>Bourdieu et les coding-dojos (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://medium.com/@Fabinout/bourdieu-et-les-coding-dojos-38c1213266be">

<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>
  Bourdieu et les coding-dojos (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://medium.com/@Fabinout/bourdieu-et-les-coding-dojos-38c1213266be">Source originale du contenu</a></h3>
    <h3 name="ec83" id="ec83" class="graf graf--h3 graf-after--h3">WTF is Pierre Bourdieu ?</h3>

<p name="c3a3" id="c3a3" class="graf graf--p graf-after--h3">Bourdieu est un sociologue français de la fin du 20ème siècle que j’ai découvert récemment sur le Slack d’<a href="https://okiwi.org/slack/" data-href="https://okiwi.org/slack/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Okiwi</a>, la communauté bordelaise de développeurs.</p>

<p name="6b1d" id="6b1d" class="graf graf--p graf-after--p">Lors d’une conversation très animée à propos de la vision de Sandro Mancuso sur la gestion de sa carrière, Emmanuel Gaillot disait :</p>

<blockquote name="7ac3" id="7ac3" class="graf graf--blockquote graf-after--p">Le thème de l’individu entrepreneur de sa propre carrière (et responsable de la réussite ou de l’échec de celle-ci) est assez récent, même dans le milieu informatique. Et ce discours est porté par le système en place, pas par des éléments disruptifs. Sans rentrer dans la question de savoir si c’est intentionnel ou pas, ce discours a tout au moins la fonction de maintenir le système en place, en justifiant les inégalités comme quelque chose de normal / naturel, en ce moment sur le mode de « il y en a qui dorment et d’autres qui se réveillent ». Avant, c’était sur le mode « il y en a qui font ce qu’on leur dit et d’autres qui n’écoutent rien ». Avant encore, c’était sur le mode « il y en a qui sont forts et d’autres qui sont faibles ». <br/> Quand on dit qu’il faut prendre sa carrière en main quand on est développeur, et que c’est d’autant plus important de le faire que c’est facile étant donné le marché, je nous invite à réfléchir à la position sociale qu’on occupe en disant ça : genre ? couleur de peau ? orientation sexuelle ? religion ? âge ? CSP des parents ? etc.</blockquote>

<p name="042c" id="042c" class="graf graf--p graf-after--blockquote">Peu de temps après, Romeu nous en reparlait lors de <a href="https://twitter.com/malk_zameth/status/991279604643123200" data-href="https://twitter.com/malk_zameth/status/991279604643123200" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">sa série de tweet</a> sur la théorie de la sociologie de Bourdieu (<a href="https://medium.com/@Romeu/agility-should-pay-attention-to-sociology-b671fd056933" data-href="https://medium.com/@Romeu/agility-should-pay-attention-to-sociology-b671fd056933" class="markup--anchor markup--p-anchor" target="_blank">ici</a> en version article de blog).</p>

<p name="ee28" id="ee28" class="graf graf--p graf-after--p">Dans l’élan, je vous conseille la lecture de <a href="https://fr.wikipedia.org/wiki/Pierre_Bourdieu" data-href="https://fr.wikipedia.org/wiki/Pierre_Bourdieu" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">l’article wikipedia de Bourdieu</a>.</p>

<p name="d1e3" id="d1e3" class="graf graf--p graf-after--p">Les principaux concepts de son œuvre sont :</p>

<ul class="postList"><li name="f658" id="f658" class="graf graf--li graf-after--p">le capital culturel</li><li name="4a41" id="4a41" class="graf graf--li graf-after--li">la centralité de l’<strong class="markup--strong markup--li-strong">habitus</strong></li><li name="ccdb" id="ccdb" class="graf graf--li graf-after--li">l’hexis</li><li name="8516" id="8516" class="graf graf--li graf-after--li">le capital symbolique et la violence symbolique</li><li name="3370" id="3370" class="graf graf--li graf-after--li">un monde social où la <strong class="markup--strong markup--li-strong">violence symbolique</strong>, c’est-à-dire la capacité à perpétuer des rapports de domination en les faisant méconnaître comme tels par ceux qui les subissent, joue un rôle central.</li><li name="4bac" id="4bac" class="graf graf--li graf-after--li">un monde social divisé en <strong class="markup--strong markup--li-strong">champs</strong> où interagissent des agents</li></ul>

<h3 name="7771" id="7771" class="graf graf--h3 graf-after--li">Le capital culturel</h3>

<p name="e0a5" id="e0a5" class="graf graf--p graf-after--h3">Bourdieu s’est beaucoup inspiré de Karl Marx dans ses écrits. Les deux sont d’accord pour dire que la différence de position sociale entre deux individus dépend directement de la différence entre leurs deux capitaux. Plus ton capital est important, plus ta position est dominatrice dans la société. La différence est surtout que Marx parlait essentiellement de capital économique (patrimoine, salaire, etc.) là où Bourdieu ajoute un autre type de capital : <strong class="markup--strong markup--p-strong">le capital culturel</strong>.</p>

<p name="3682" id="3682" class="graf graf--p graf-after--p">Ce capital culturel est l’ensemble des éléments symboliques que l’on acquiert en étant dans une certaine classe sociale. Il peut être incorporé (personnel), institutionnel ou bien objectivé (matériel).</p>

<p name="053f" id="053f" class="graf graf--p graf-after--p">Ça peut-être :</p>

<ul class="postList"><li name="5e2c" id="5e2c" class="graf graf--li graf-after--p">un goût pour la philosophie (incorporé)</li><li name="eb0c" id="eb0c" class="graf graf--li graf-after--li">des compétences (incorporé)</li><li name="ba6e" id="ba6e" class="graf graf--li graf-after--li">un diplôme (institutionnel)</li><li name="4018" id="4018" class="graf graf--li graf-after--li">une voiture de sport (objectivé)</li></ul>

<p name="0675" id="0675" class="graf graf--p graf-after--li">C’est le capital culturel qui crée un sentiment d’identité collective et d’entre-soi, c’est potentiellement un frein majeur à l’ascension sociale d’un individu ayant énormément de capital monétaire. À l’inverse la possibilité d’acquérir grâce à des efforts colossaux un capital culturel important rend <strong class="markup--strong markup--p-strong">beaucoup</strong> plus aisée la possibilité d’une promotion, et donc d’un capital monétaire.</p>

<h3 name="5197" id="5197" class="graf graf--h3 graf-after--p">L’habitus</h3>

<p name="c426" id="c426" class="graf graf--p graf-after--h3">Au travers de sa socialisation et de sa trajectoire sociale, l’individu accumulera par mimétisme un ensemble de comportements, de réactions et de perceptions. Toutefois, l’habitus n’<strong class="markup--strong markup--p-strong">est pas</strong> un automatisme mécanique qui guide nos actions comme des rails guideront le tram citadin, il agit plutôt comme une grammaire de la langue maternelle. Et cette grammaire acquise par socialisation permet à l’individu de se constituer une infinité de <em class="markup--em markup--p-em">phrases</em> pour gérer ses situations quotidiennes, sans pour autant reproduire l’exacte même réaction à un évènement externe. <br/> Ainsi, l’habitus est <strong class="markup--strong markup--p-strong">structuré</strong> car produit de la socialisation, mais également <strong class="markup--strong markup--p-strong">structurant</strong> car générateur d’une infinité de pratiques nouvelles. Il est donc d’après Bourdieu un ensemble de “structures structurées prédisposées à fonctionner comme structures structurantes”. L’habitus structure donc les pensées dans la société, pour peu que ses individus aient vécu une socialisation semblable au sein de leur classe sociale, et explique donc la similitude des manières de penser au sein de cette classe.</p>

<p name="d82f" id="d82f" class="graf graf--p graf-after--p">Cet habitus n’est pas immuable, la trajectoire sociale ainsi que de l’introspection peut tout à fait conduire à une évolution de l’habitus d’un individu. On peut conclure que l’habitus n’est pas un produit du libre-arbitre ni un produit de la structure, mais un mélange des deux qui structure chaque comportement et perception.</p>

<p name="7294" id="7294" class="graf graf--p graf-after--p">Ces prédispositions sont très générales, mais on peut citer des éléments factuels qui découlent directement de l’habitus :</p>

<ul class="postList"><li name="82d4" id="82d4" class="graf graf--li graf-after--p">la posture</li><li name="9a38" id="9a38" class="graf graf--li graf-after--li">le vocabulaire</li><li name="e009" id="e009" class="graf graf--li graf-after--li">les tournures de phrase</li><li name="5723" id="5723" class="graf graf--li graf-after--li">la capacité à rester calme ou à user de la violence</li></ul>

<h3 name="5e3c" id="5e3c" class="graf graf--h3 graf-after--li">L’hexis</h3>

<blockquote name="088e" id="088e" class="graf graf--blockquote graf-after--h3">[L’hexis est] l’expression dans et par le corps lui-même, ou au plus près de lui, de cet habitus.</blockquote>

<p name="531e" id="531e" class="graf graf--p graf-after--blockquote">Il concerne donc la forme corporelle de l’Habitus, sa communication non-verbale, le ton de sa voix ou bien encore la cible du regard lors d’une discussion. Il représente aussi l’incarnation corporelle des structures sociales tel qu’elle apparait aux individus, et elle est particulièrement visible dans une situation d’inconfort. Imaginons un stagiaire un peu introverti en train de se faire sermonner par son manager parce que son travail n’avance pas :</p>

<ul class="postList"><li name="5732" id="5732" class="graf graf--li graf-after--p">il tremble</li><li name="62a0" id="62a0" class="graf graf--li graf-after--li">il bégaie</li><li name="d4f8" id="d4f8" class="graf graf--li graf-after--li">il regarde ses mains en parlant</li></ul>

<p name="21e3" id="21e3" class="graf graf--p graf-after--li">Tous ces symptômes font partie de son hexis, qui ne sont que la manifestation de son habitus, qui lui a appris à se soumettre physiquement lorsque sa position sociale l’exige.</p>

<p name="286b" id="286b" class="graf graf--p graf-after--p">Dans un sens plus large, l’hexis implique aussi les styles vestimentaires, les coiffures ou encore les tatouages.</p>

<h3 name="7a9a" id="7a9a" class="graf graf--h3 graf-after--p">Bourdieu et les champs sociaux</h3>

<blockquote name="caf0" id="caf0" class="graf graf--blockquote graf-after--h3">Le concept de champ est, à l’origine, une métaphore inspirée de la physique qui apparente les univers sociaux à un champ électromagnétique : un électron soumis à ce champ participe au champ, il est à la fois agi et agissant et contribue à l’équilibre des conflits dont il est l’agent.</blockquote>

<p name="5a58" id="5a58" class="graf graf--p graf-after--blockquote"><em class="markup--em markup--p-em">source : </em><a href="https://www.academia.edu/4808608/Le_concept_de_champ_litt%C3%A9raire_chez_Pierre_Bourdieu" data-href="https://www.academia.edu/4808608/Le_concept_de_champ_litt%C3%A9raire_chez_Pierre_Bourdieu" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank"><em class="markup--em markup--p-em">lien</em></a></p>

<p name="b1c1" id="b1c1" class="graf graf--p graf-after--p">Un champ est donc un système qui contient ses agents ainsi que ses positions sociales structurées en interne par des relations de domination. C’est donc une arène de relation de pouvoir, de domination où les agents se battent pour l’appropriation de différentes formes de capital, un capital étant ce qui est estimé par ses agents. Ça peut aller du capital culturel dont on a parlé précédemment au simple (mais vital) capital monétaire.</p>

<p name="95ad" id="95ad" class="graf graf--p graf-after--p">Les champs peuvent être disjoints, inclus ou exclus les uns des autres. Ils sont organisés verticalement et horizontalement et agissent de manière indépendante. Ils font donc office d’arène de lutte sociale.</p>

<p name="afb7" id="afb7" class="graf graf--p graf-after--p">Des activités se développent au sein d’un champ selon ses règles où chaque agent est un électron qui modifie à son échelle l’orientation, la forme, ou les valeurs de ce “flux”. À l’intérieur, la capacité à interagir avec ce flux dépend directement de l’habitus de chaque agent dans ce champ précis. Car vous avez dû y penser en lisant le paragraphe sur l’habitus, <strong class="markup--strong markup--p-strong">il dépend effectivement du champ dans lequel il est appliqué</strong>. Le champ bourdieusien des politiciens aura des normes sociales sensiblement différentes de celui des développeurs.</p>

<p name="acc9" id="acc9" class="graf graf--p graf-after--p">Il est à noter aussi qu’il est très difficile pour un groupe d’humains de construire un groupe libre de toute structure de domination, et que naturellement se créera dans ce groupe des relations de dominations et une échelle sociale.</p>

<h3 name="76be" id="76be" class="graf graf--h3 graf-after--p">Capital symbolique et violence symbolique</h3>

<p name="c5e0" id="c5e0" class="graf graf--p graf-after--h3">Le pouvoir symbolique est la structure de pouvoir tacite qu’on exerce les uns sur les autres inconsciemment.</p>

<p name="6d5f" id="6d5f" class="graf graf--p graf-after--p">Les propriétés qu’on attribue à du pouvoir symbolique peuvent être défini par :</p>

<ul class="postList"><li name="8a45" id="8a45" class="graf graf--li graf-after--p">un homme</li><li name="7983" id="7983" class="graf graf--li graf-after--li">blanc</li><li name="0d95" id="0d95" class="graf graf--li graf-after--li">grand</li><li name="203c" id="203c" class="graf graf--li graf-after--li">qu’on estime cultivé</li><li name="359f" id="359f" class="graf graf--li graf-after--li">qui occupe une fonction prestigieuse</li><li name="d7ec" id="d7ec" class="graf graf--li graf-after--li">qui porte un costume</li><li name="4190" id="4190" class="graf graf--li graf-after--li">qui est éloquent</li><li name="40b7" id="40b7" class="graf graf--li graf-after--li">et qui a des signes qu’on attribue à l’intelligence</li></ul>

<p name="3c11" id="3c11" class="graf graf--p graf-after--li">À ça s’ajoutent les autres composants du pouvoir <strong class="markup--strong markup--p-strong">symbolique</strong> :</p>

<ul class="postList"><li name="0513" id="0513" class="graf graf--li graf-after--p">le capital économique</li><li name="a484" id="a484" class="graf graf--li graf-after--li">le capital culturel</li><li name="2408" id="2408" class="graf graf--li graf-after--li">le capital social</li></ul>

<p name="d84e" id="d84e" class="graf graf--p graf-after--li">Plus un individu aura de pouvoir symbolique, plus il sera jugé (inconsciemment) comme étant puissant, et plus l’on s’y soumettra (inconsciemment).</p>

<p name="7e0e" id="7e0e" class="graf graf--p graf-after--p">C’est cette soumission inconsciente qui est pernicieuse. Cette structure de pouvoir (qui est donc une violence) n’est pas infligée par le dominant au dominé. Il est d’ailleurs fort probable que cette violence ne soit même pas perçue par le dominant, mais soit auto-infligée par le dominé. Nous sommes programmés pour réagir à ces caractéristiques et à nous y soumettre. Le terme peut vous paraitre fort, néanmoins il a été prouvé (notamment par Paul Piff, un sociologue de Berkeley) qu’on attribue beaucoup plus facilement sa confiance à quelqu’un qui affiche une classe socio-professionnelle plus élevée que la sienne.</p>

<p name="eb0a" id="eb0a" class="graf graf--p graf-after--p">Et pour retourner le couteau dans la plaie, l’individu dominant ne sera pas équipé pour comprendre ce problème (il n’a jamais eu de problème à prendre la parole en public ou à trouver un travail -&gt; “c’est pas si dur”) et n’éprouvera donc pas d’empathie pour ceux ayant moins de pouvoir symbolique.</p>

<h4 name="2c6a" id="2c6a" class="graf graf--h4 graf-after--p">Maintenant ça ne fait pas tout.</h4>

<figure name="4e41" id="4e41" class="graf graf--figure graf-after--h4"/><p name="aa34" id="aa34" class="graf graf--p graf-after--figure"><em class="markup--em markup--p-em">Voici un exemple d’homme blanc hétéro en costume qui n’a pas énormément de violence symbolique, même s’il a du pouvoir symbolique de par son statut d’homme blanc américain hétérosexuel.</em></p><p name="d1b4" id="d1b4" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">La violence symbolique est un mélange de l’habitus et du pouvoir symbolique.</strong></p><p name="03b1" id="03b1" class="graf graf--p graf-after--p">Si quelqu’un avec une forte combinaison des formes de capital travaille avec un individu moyen dans ces aspects. Il se créera naturellement une structure de domination entre les deux individus. Et la qualité perçue du travail sera naturellement plus élevée chez celui qui a un pouvoir plus élevé.</p><h3 name="ff91" id="ff91" class="graf graf--h3 graf-after--p">Et moi là-dedans ?</h3><p name="2d8f" id="2d8f" class="graf graf--p graf-after--h3">Parlons maintenant de comment tout ça s’applique à nous et à nos coding-dojos.</p><h4 name="af94" id="af94" class="graf graf--h4 graf-after--p">Notre champ bourdieusien</h4><p name="2f7c" id="2f7c" class="graf graf--p graf-after--h4">Il est évident que le champ qui nous intéresse est le champ des développeurs, des codeurs. Ce champ est un sous-champ des acteurs de l’informatique, et possède des sous-champs tels que les développeurs front-end ou ceux qui utilisent des langages fonctionnels. <br/> Chacun y occupe une place qui peut-être plutôt dominante, plutôt dominée, conservatrice ou bien innovante. Les luttes internes qui caractérisent notre champ sont entre autres :</p><ul class="postList"><li name="0180" id="0180" class="graf graf--li graf-after--p">quel est le meilleur langage ?</li><li name="69cb" id="69cb" class="graf graf--li graf-after--li">quelle est la meilleure méthode d’organisation ?</li><li name="f7d4" id="f7d4" class="graf graf--li graf-after--li">est-ce qu’il faut faire des tests ?</li><li name="b299" id="b299" class="graf graf--li graf-after--li">micro-services ou monolithe ?</li><li name="deb6" id="deb6" class="graf graf--li graf-after--li">vim ou emacs ?</li></ul><p name="1dcd" id="1dcd" class="graf graf--p graf-after--li">Je suis sûr que vous êtes capables d’en imaginer 200 autres. Cette lutte interne se fait à coup d’articles, de missions de conseil, de livres, de Proof-of-concepts, etc.</p><p name="0c3d" id="0c3d" class="graf graf--p graf-after--p">Ensemble la communauté évolue, et selon l’habitus et le capital culturel, un agent est capable d’en influencer la direction. Il est important de noter que la capacité à influencer ces luttes perpétuelles dépend directement de chaque capital culturel. Si vous avez suivi jusqu’ici, c’est dû notamment à la confiance que vous attribuez naturellement et inconsciemment aux individus ayant un habitus plus élevé que le vôtre.</p><h4 name="1a18" id="1a18" class="graf graf--h4 graf-after--p">L’espace social des développeurs</h4><p name="b091" id="b091" class="graf graf--p graf-after--h4">Bourdieu décrit une forte corrélation entre les positions sociales et les pratiques sociales. Dans notre cas, on voit facilement que ceux qui sont en haut de l’échelle sociale sont par définition ceux qui agissent le plus sur le champ bourdieusien des dévelopeurs.</p><p name="bc0f" id="bc0f" class="graf graf--p graf-after--p">Je vois plusieurs profils de développeurs qui influencent fortement la communauté :</p><ul class="postList"><li name="acff" id="acff" class="graf graf--li graf-after--p">ceux qui donnent des présentations dans des conférences</li><li name="199c" id="199c" class="graf graf--li graf-after--li">ceux qui écrivent des livres et des articles</li><li name="b077" id="b077" class="graf graf--li graf-after--li">ceux qui animent et organisent des conférences ou des ateliers avec la communauté</li><li name="5334" id="5334" class="graf graf--li graf-after--li">ceux qui codent en open-source</li><li name="eed5" id="eed5" class="graf graf--li graf-after--li">ceux qui coachent des équipes</li><li name="107e" id="107e" class="graf graf--li graf-after--li">ceux qui managent et/ou mentorent des développeurs juniors</li><li name="10a2" id="10a2" class="graf graf--li graf-after--li">ceux aussi qui lisent des livres ou des articles</li></ul><p name="8fee" id="8fee" class="graf graf--p graf-after--li">Ces individus n’ont pas un talent inné pour la littérature technique et n’ont sûrement pas subi de formation dans l’ évènementiel non plus. Par leur socialisation au sein de notre champ, ils ont acquis des dispositions culturelles au contact d’autres individus. Ils ont écrit parce que leurs pairs et leurs mentors écrivaient, et que ça semblait la norme sociale.</p><p name="b445" id="b445" class="graf graf--p graf-after--p">Avez-vous déjà entendu au travail : <em class="markup--em markup--p-em">“Lui, c’est un mauvais développeur, il ne fait pas de veille”</em>. Vous êtes alors dans la situation où votre capital culturel vous encourage à travailler en dehors, et quasi-inconsciemment vous vous sentez supérieur à un individu n’ayant pas acquis les normes sociales de notre champ.</p><p name="9fe0" id="9fe0" class="graf graf--p graf-after--p">Une autre violence symbolique qu’on rencontre extrêmement souvent est le tartinage de référence culturelle commune. Voici un <a href="https://twitter.com/Fabinout/status/1001365277148352512" data-href="https://twitter.com/Fabinout/status/1001365277148352512" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">exemple très parlant</a>. Ici, je fais une référence à un livre très connu en informatique, notamment parce qu’il est fondateur du mouvement Domain-Driven-Design. En faisant cela, je m’attends à ce que ceux qui me lisent et me comprennent trouvent la référence rigolote. C’est une blague que ne peuvent comprendre que ceux qui sont à l’aise avec ce sujet et qui partagent les mêmes références culturelles que moi. <br/> Le résultat est sans appel, le tweet est liké et retweeté plusieurs fois et est apparu plus de 1900 fois dans des timelines différentes. Si vous faites l’effort de parcourir les profils qui ont interagi avec, vous trouverez des CTOs, des organisateurs de confs, des écrivains, des speakers et des architectes. Autant le dire honnêtement, ce type de communication est un ventilateur à violence symbolique, où je fais jouer à fond l’entre-soi des “connaisseurs” que je fréquente.</p><h4 name="fd4a" id="fd4a" class="graf graf--h4 graf-after--p">Et les coding-dojos alors ?</h4><p name="267a" id="267a" class="graf graf--p graf-after--h4">Quand je suis arrivé à OCTO Technology, un midi par semaine et un soir par semaine se déroulaient des coding-dojos. <br/> C’était une activité de groupe sur le temps libre où l’on s’entrainait à résoudre des problèmes informatiques simples en faisant tourner le clavier 8 minutes par personne. L’idée était de s’entrainer à pratiquer du Test-Driven-Development ainsi que découvrir de nouveaux langages.</p><p name="4d33" id="4d33" class="graf graf--p graf-after--p">Je ne m’étais jamais posé la question de pourquoi je ressentais le besoin (et un certain plaisir) à participer à ces ateliers. La raison était que je voulais investir de mon temps pour progresser sur des sujets techniques, et pour découvrir des nouveaux langages. Avec le recul, il m’apparait 4 ans après que je souhaitais surtout imiter ce que je voyais dans mes pairs et mes mentors, et que cette participation était un moyen pour moi de socialiser et d’apprendre les aptitudes, les techniques et les réflexes de développeurs plus expérimentés, c’est à dire d’augmenter mon habitus.</p><p name="5e37" id="5e37" class="graf graf--p graf-after--p">Une fois déménagé à Bordeaux, je décidais d’animer les coding-dojos de la communauté Okiwi. Mon désir était de participer à la communauté, de transmettre cette pratique du Test-Driven-Development et du code propre. L’autre effet positif était que cela me permettait de m’entrainer à donner des formations. Encore une fois, on peut observer ça par le prisme de notre espace bourdieusien. Je réutilisais ce que j’avais appris en participant aux ateliers de coding-dojos, je propageais à mon tour les conventions et rituels sociaux que j’avais observé chez OCTO. De fait, j’augmentais mon statut social relatif à notre champ -&gt; je devenais un animateur de conférences ou d’ateliers.</p><h3 name="6da7" id="6da7" class="graf graf--h3 graf-after--p">Et maintenant, ça change quoi ?</h3><p name="1e6a" id="1e6a" class="graf graf--p graf-after--h3">Une caractéristique de notre communauté me choque depuis la lecture de l’article de Romeu (<a href="https://medium.com/@Romeu/agility-should-pay-attention-to-sociology-b671fd056933" data-href="https://medium.com/@Romeu/agility-should-pay-attention-to-sociology-b671fd056933" class="markup--anchor markup--p-anchor" target="_blank">lien</a>) sur Bourdieu. C’est la propension qu’on a à démontrer notre capital culturel à chaque occasion. Voici les situations que j’ai rencontrées récemment :</p><ul class="postList"><li name="39ce" id="39ce" class="graf graf--li graf-after--p">Lors d’un pair-programming pour résoudre un problème avec un dév junior Java, un architecte dit “Tu vois ça je le ferai hyper facilement en Scala avec du pattern matching”. C’est bien, tu dis à tout le monde que tu codes en Scala, et tu cites des concepts que le développeur junior ne connait pas. Mais bien sûr tu ne l’expliques pas.</li><li name="b37a" id="b37a" class="graf graf--li graf-after--li">Lors d’un coding-dojo avec des développeurs de tout niveau, un senior s’exclame “Ahah, ça serait jamais passé si on avait appliqué les calistheniques”. Il a peut-être raison, mais inconsciemment il utilise son capital culturel pour imposer son statut social supérieur. Monsieur a lu des livres, Monsieur est habitué à faire des katas.</li><li name="d912" id="d912" class="graf graf--li graf-after--li">Du name-dropping de semi-célébrité de notre champ : “Comme le dit mon ami Sandro Mancuso, …” -&gt; Je fréquente des gens très haut sur notre échelle sociale des développeurs. Variante : “Arnaud s’y connait beaucoup à ce sujet” “Arnaud qui ?” “Ben Arnaud Bailly”.</li><li name="2c8b" id="2c8b" class="graf graf--li graf--startsWithDoubleQuote graf-after--li">“Tu devrais faire des katas pour apprendre un langage” -&gt; il est sous-entendu que si tu n’en fais pas, tu ne progresseras pas.</li></ul><p name="7cda" id="7cda" class="graf graf--p graf-after--li">Toutes ces situations sont des situations réelles que j’ai rencontrées très récemment, et j’ai très sûrement loupé la majorité de ces élans d’étalage de capital culturel qui sont tous des exemples de violences symboliques entre dominés et dominants de notre champ.</p><p name="6ce6" id="6ce6" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Donc suite à tout ça, je prends des décisions, je vais ajouter des règles à mes coding-dojos:</strong></p><ul class="postList"><li name="a310" id="a310" class="graf graf--li graf-after--p">Empêcher fermement toute énonciation de mot-clé, de concept ou de nom qui n’est pas expliqué directement. On ne cite que ce qu’on explique, et on limite au maximum la situation où un ou une développeuse avec un habitus plus faible se sent contraint de demander l’explication d’un terme, ou pire lorsqu’il ou elle n’ose pas demander d’explication.</li><li name="a097" id="a097" class="graf graf--li graf-after--li">Ne pas citer d’autres langages quand ce n’est pas utile.</li><li name="95c1" id="95c1" class="graf graf--li graf-after--li">Ne pas s’imposer aux autres en leur disant quoi faire, ne pas leur couper la parole.</li></ul><h3 name="4a1a" id="4a1a" class="graf graf--h3 graf-after--li">Conclusion</h3><p name="63d1" id="63d1" class="graf graf--p graf-after--h3">Nous vivons dans un système qui, consciemment ou pas, <strong class="markup--strong markup--p-strong">cultive cette hiérarchie sociale</strong> et exerce un pouvoir de violence symbolique qui contribue à la légitimer. Pour la combattre, il est nécessaire de comprendre les mécaniques sociales qui sont à l’œuvre et de les mettre à nue.</p><p name="068c" id="068c" class="graf graf--p graf-after--p">Sources :</p><p name="16ee" id="16ee" class="graf graf--p graf-after--p graf--trailing"><a href="http://ressources-socius.info/index.php/lexique/21-lexique/37-champ" data-href="http://ressources-socius.info/index.php/lexique/21-lexique/37-champ" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">http://ressources-socius.info/index.php/lexique/21-lexique/37-champ</a> <a href="https://fr.wikipedia.org/wiki/Pierre_Bourdieu" data-href="https://fr.wikipedia.org/wiki/Pierre_Bourdieu" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">https://fr.wikipedia.org/wiki/Pierre_Bourdieu</a> <a href="https://en.wikipedia.org/wiki/Field_%28Bourdieu%29" data-href="https://en.wikipedia.org/wiki/Field_%28Bourdieu%29" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">https://en.wikipedia.org/wiki/Field_%28Bourdieu%29</a> <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3093479/" data-href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3093479/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3093479/</a> <a href="http://enfolding.org/theorising-practice-ii-habitushexis/" data-href="http://enfolding.org/theorising-practice-ii-habitushexis/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">http://enfolding.org/theorising-practice-ii-habitushexis/</a> <a href="https://www.academia.edu/4808608/Le_concept_de_champ_litt%C3%A9raire_chez_Pierre_Bourdieu" data-href="https://www.academia.edu/4808608/Le_concept_de_champ_litt%C3%A9raire_chez_Pierre_Bourdieu" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">https://www.academia.edu/4808608/Le_concept_de_champ_litt%C3%A9raire_chez_Pierre_Bourdieu</a> <a href="http://1libertaire.free.fr/BourdieuConcepts.html" data-href="http://1libertaire.free.fr/BourdieuConcepts.html" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">http://1libertaire.free.fr/BourdieuConcepts.html</a></p></div>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/@Fabinout/bourdieu-et-les-coding-dojos-38c1213266be">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>