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>Maman, Papa, je suis développeur front-end et voilà ce que ça veut dire (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://wizbii.tech/maman-papa-je-suis-d%C3%A9veloppeur-front-end-et-voil%C3%A0-ce-que-%C3%A7a-veut-dire-fb7d98c5e0b8">

<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>
  Maman, Papa, je suis développeur front-end et voilà ce que ça veut dire (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://wizbii.tech/maman-papa-je-suis-d%C3%A9veloppeur-front-end-et-voil%C3%A0-ce-que-%C3%A7a-veut-dire-fb7d98c5e0b8">Source originale du contenu</a></h3>
    <section><div class="section-inner layoutSingleColumn"><p name="f4e0" id="f4e0" class="graf graf--p graf-after--figure">Mes parents n’ont aucune idée de ce que je fais.</p><p name="df6f" id="df6f" class="graf graf--p graf-after--p">On s’amuse souvent de cette réplique. C’est une façon de dire qu’on se sent incompris, que le métier qu’on exerce est complexe et que peu de gens peuvent en parler clairement. Mais je crois qu’on est avant tout coupable de s’en sentir valorisé. Comme si faire quelque chose que “personne” ne comprend était un facteur différenciant.</p><p name="b17f" id="b17f" class="graf graf--p graf-after--p">En vérité ce sentiment d’incompréhension tient plus à notre incapacité à l’expliquer et au fait que nous n’ayons pas pris le temps de le faire.</p><p name="f202" id="f202" class="graf graf--p graf-after--p">J’en suis coupable, et vous l’êtes peut être aussi. Mais j’ai bien l’intention de changer les choses avec l’ambition de vous donner, Maman, Papa, une image plus claire de ce que votre fils fait dans la vie.</p><h3 name="44bc" id="44bc" class="graf graf--h3 graf-after--p">Une diversité de développeurs</h3><p name="16f8" id="16f8" class="graf graf--p graf-after--h3">J’ai eu à présenter mon métier un bon nombre de fois. J’ai d’abord été très maladroit, imprécis et réducteur. Avec le temps, j’ai espoir de m’être assez amélioré pour maintenant offrir une explication simple et fidèle.</p><p name="803a" id="803a" class="graf graf--p graf-after--p">Ce dont je me suis rendu compte c’est qu’il y a, avant même le métier de développeur, un bon nombre d’aspects qui restent abstraits.</p><p name="2229" id="2229" class="graf graf--p graf-after--p">Pour beaucoup, un développeur c’est quelqu’un qui écrit du code. Cette définition n’est pas totalement fausse mais très réductrice. Ça revient à dire, par exemple, que le métier d’architecte ne consiste qu’à dessiner.</p><p name="e459" id="e459" class="graf graf--p graf-after--p">La première chose à comprendre c’est qu’il n’existe pas un seul “code”. Il existe en fait une très grande diversité de langages de programmation qui répondent chacun à une problématique précise. Le développeur qui conçoit des logiciels n’utilise pas les mêmes outils que celui qui développe des robots mécanisés, ni les mêmes langages que celui qui crée des sites internet.</p><p name="3f4e" id="3f4e" class="graf graf--p graf-after--p">Si il existe autant de métiers de développeurs, c’est parce qu’ils nécessitent chacun des compétences différentes. Programmer un robot demande de connaître son fonctionnement, les problèmes qu’il peut rencontrer et les usages attendus. Des challenges qui sont bien différents de ce que peut rencontrer un développeur d’applications mobiles par exemple. Lui doit maîtriser l’appareil, le contexte dans lequel il est utilisé, ses contraintes, etc.</p><p name="7626" id="7626" class="graf graf--p graf-after--p">En plus de maîtriser un (voir plusieurs) langage(s), il doit aussi maîtriser sa problématique, son support. Je pense qu’il est clair à ce stade qu’une seule et même personne ne peut pas raisonnablement faire toutes ces choses à la fois.</p><p name="5190" id="5190" class="graf graf--p graf-after--p">On peut donc dire qu’un développeur, c’est un spécialiste d’un besoin donné. Pour arriver à ses fins il doit en maîtriser les circonstances et technologies afin de proposer une réponse adaptée.</p><h3 name="6279" id="6279" class="graf graf--h3 graf-after--p">Pour ce qui est du web…</h3><figure name="9e0d" id="9e0d" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 467px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.7%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*GAkCBKF0NyLWeLICbx5ATA.jpeg" data-width="1920" data-height="1280" data-action="zoom" data-action-value="1*GAkCBKF0NyLWeLICbx5ATA.jpeg" draggable="false"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*GAkCBKF0NyLWeLICbx5ATA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*GAkCBKF0NyLWeLICbx5ATA.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*GAkCBKF0NyLWeLICbx5ATA.jpeg"></noscript></div></div><figcaption class="imageCaption">Cas très classique de l’utilisation d’une tablette : sur un bureau, devant un ordi (blague).</figcaption></figure><p name="57ab" id="57ab" class="graf graf--p graf-after--figure">Je ne peux malheureusement pas rendre grâce à tous les métiers de développeur dans cet article. Je m’en tiendrai à ceux qui se sont spécialisés dans la création de supports webs.</p><p name="2b97" id="2b97" class="graf graf--p graf-after--p">Je disais plus tôt qu’il existe une grande diversité de développeurs. Eh bien il existe, au sein même d’un domaine donné, encore d’autres métiers.</p><p name="ae67" id="ae67" class="graf graf--p graf-after--p">On compte sur le web des développeurs front-end, back-end, full stack, des “devops” et bien d’autres. S’il faut autant de monde pour créer un site internet, c’est parce que internet c’est compliqué. Je pense honnête de dire qu’aucun développeur web n’en maîtrise toute la chaîne. Certains aspects restent abstraits, même pour des gens qui le côtoient tous les jours dans un cadre professionnel.</p><p name="0291" id="0291" class="graf graf--p graf-after--p">Pour illustrer cette complexité, prenons un exemple : votre boîte email. Je suis prêt à parier que vous pouvez la consulter n’importe quand, n’importe où et depuis à peu près n’importe quel appareil : votre ordinateur, votre téléphone, votre télé, peut être même votre montre. Mais vous n’êtes pas les seuls, il y a probablement des milliers d’autres personnes qui se connectent en même temps.</p><p name="ad9a" id="ad9a" class="graf graf--p graf-after--p">Alors imaginez ces milliers de personnes assises devant votre ordinateur, toutes essayant de consulter leurs emails en même temps, sur le même ordinateur. Bien que physiquement impossible, c’est pourtant un peu ce qui se passe.</p><p name="a113" id="a113" class="graf graf--p graf-after--p">Il faut donc que le site qui vous permet de consulter vos emails soit capable d’accueillir tout ce beau monde, avec la quantité d’emails et d’appareils que ça sous-entends. En coulisse, des professionnels s’assurent que le site soit toujours disponible, d’autres que vos emails soient en sécurité, d’autres qui pensent l’interface et d’autres encore qui la construisent. Il y a entre votre navigateur et le site final, un grand nombre d’étapes et de métiers avant qu’un email ne s’affiche sur votre écran.</p><p name="c5e4" id="c5e4" class="graf graf--p graf-after--p">Mais ne nous égarons pas, présenter toutes ces personnes est un projet bien trop ambitieux pour cet article. Intéressons nous plutôt à ceux qui sont le plus proches de votre écran.</p><h3 name="2544" id="2544" class="graf graf--h3 graf-after--p">La métaphore de la voiture</h3><p name="90af" id="90af" class="graf graf--p graf-after--h3">Difficile de parler du développeur front-end sans son contexte tant il est lié à deux autres métiers : celui de designer et développeur back-end.</p><p name="c07b" id="c07b" class="graf graf--p graf-after--p">Un excellent parallèle est celui de la voiture, voyons comment elle se compare à la création d’un site internet.</p><figure name="62de" id="62de" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 349px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.5%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*Da8GraGwYEVWXsCwqMglGQ.jpeg" data-width="1920" data-height="1276" data-action="zoom" data-action-value="1*Da8GraGwYEVWXsCwqMglGQ.jpeg" draggable="false"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*Da8GraGwYEVWXsCwqMglGQ.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*Da8GraGwYEVWXsCwqMglGQ.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*Da8GraGwYEVWXsCwqMglGQ.jpeg"></noscript></div></div><figcaption class="imageCaption"><a href="https://www.wizbii.com/?utm_source=medium&amp;utm_medium=article&amp;utm_campaign=maman_papa" data-href="https://www.wizbii.com/?utm_source=medium&amp;utm_medium=article&amp;utm_campaign=maman_papa" class="markup--anchor markup--figure-anchor" target="_blank">Ceci est une Wiz’Ferrari.</a></figcaption></figure><p name="d286" id="d286" class="graf graf--p graf-after--figure">La première étape dans la construction d’une voiture c’est de la concevoir, de la “dessiner”. Il faut la réfléchir en pensant aux besoins clients, au sens dans lequel la portière s’ouvre, comment la vitre se descend, etc. Il faut la penser dans tout ses cas d’usages et en produire une représentation concrète. Pour ce qui est du web, c’est le rôle du designer <em class="markup--em markup--p-em">(design = designer)</em>. C’est celui qui identifie les besoins et propose une interface adaptée.</p><p name="c69f" id="c69f" class="graf graf--p graf-after--p">Vient ensuite celui qui crée la carrosserie et toute la partie visible de la voiture en se basant sur le travail du designer. Il s’assure que tout est conforme, que la portière s’ouvre comme convenue, que les couleurs et matières sont respectées. Ça, c’est mon métier : celui de développeur front-end <em class="markup--em markup--p-em">(front = devant / façade)</em>. Je rends la rédaction d’un email possible via une interface interactive.</p><p name="7c7f" id="7c7f" class="graf graf--p graf-after--p">Et enfin, il y a tout le reste de la voiture. Tout ce qu’on ne voit pas de prime abord : tout ce qui se trouve sous le capot et la voiture. C’est celui qui s’assure que le carburant soit correctement distribué, peu importe le degré de pression de la pédale. Lui, c’est le développeur back-end <em class="markup--em markup--p-em">(back = arrière)</em>. Sur le web c’est celui qui s’assure que vos emails soient remis à votre destinataire en toute sécurité.</p><h3 name="f7ff" id="f7ff" class="graf graf--h3 graf-after--p">Et le code dans tout ça ?</h3><p name="5a4c" id="5a4c" class="graf graf--p graf-after--h3">Si j’ai si peu parlé de code jusqu’à maintenant, c’est parce qu’il n’est qu’un moyen d’arriver à nos fins. <em class="markup--em markup--p-em">Un développeur n’est pas payé pour écrire du code</em>, tout comme on ne paye pas un architecte pour passer son temps à dessiner.</p><p name="1342" id="1342" class="graf graf--p graf-after--p">Pourquoi est-ce qu’on paye un architecte alors ?</p><p name="8bba" id="8bba" class="graf graf--p graf-after--p">On paye un architecte pour qu’il conçoive un bâtiment. Pour qu’il écoute nos besoins, y réfléchisse et propose des solutions. Parce qu’il connaît bien mieux que nous toutes les problématiques à prendre en compte lorsqu’il s’agit de bâtir une maison.</p><p name="0ad4" id="0ad4" class="graf graf--p graf-after--p">Eh bien le métier de développeur c’est un peu pareil. Il exige d’être capable de comprendre les besoins, d’en saisir les enjeux pour formuler une solution adéquate. Des réponses qui sont bien différentes s’il s’agit de développer une boîte email, un réseau social ou un site vitrine.</p><p name="995d" id="995d" class="graf graf--p graf-after--p">Le code n’est pour ainsi dire que le cadet des soucis d’un développeur. La vraie complexité se situe dans la proposition d’une solution pertinente, efficace et fiable en connaissance des différents enjeux.</p><figure name="ef82" id="ef82" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*_wRL2vgOwXmj3ILvA_XyHg.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*_wRL2vgOwXmj3ILvA_XyHg.jpeg" draggable="false"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*_wRL2vgOwXmj3ILvA_XyHg.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*_wRL2vgOwXmj3ILvA_XyHg.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*_wRL2vgOwXmj3ILvA_XyHg.jpeg"></noscript></div></div><figcaption class="imageCaption">Une représentation réaliste de code. On est bien loin de Matrix n’est-ce pas ?</figcaption></figure><h3 name="b094" id="b094" class="graf graf--h3 graf-after--figure">En résumé</h3><p name="0f56" id="0f56" class="graf graf--p graf-after--h3">J’espère à ce stade avoir démystifier un peu le métier de développeur. L’idée n’est pas de tout en savoir mais simplement que vous puissiez vous en faire une image. Je sais par exemple à peu près en quoi consiste le métier d’architecte mais serai incapable d’aller dans les détails.</p><p name="5e64" id="5e64" class="graf graf--p graf-after--p">En bref, ce qu’il faut retenir de cet article c’est que:</p><ul class="postList"><li name="af37" id="af37" class="graf graf--li graf-after--p">Il existe plein de métiers de développeurs complètement différents.</li><li name="7eb7" id="7eb7" class="graf graf--li graf-after--li">Internet c’est compliqué, c’est pour ça qu’il faut des gens spécialisés.</li><li name="9441" id="9441" class="graf graf--li graf-after--li">Il y a, entre autres, 3 acteurs qui jouent un rôle important dans la création d’un site internet : le designer, le développeur front-end et le développeur back-end.</li><li name="14cd" id="14cd" class="graf graf--li graf-after--li">Le designer est un concepteur qui crée des représentations graphiques du produit (dessine la voiture).</li><li name="e7f8" id="e7f8" class="graf graf--li graf-after--li">Le développeur front-end rend l’interface interactive en suivant les directives du designer (met la carrosserie).</li><li name="5e1d" id="5e1d" class="graf graf--li graf-after--li">Le développeur back-end s’assure que vos données soient bien conservées et en sécurité (s’occupe du moteur).</li><li name="4f18" id="4f18" class="graf graf--li graf-after--li">Enfin, un développeur est avant tout quelqu’un qui propose des solutions à un problème donné — le code n’est que sa matière première.</li></ul><p name="660d" id="660d" class="graf graf--p graf-after--li graf--last">Voilà Maman, Papa, c’est à ça que ressemble mon métier.</p></div></div></section>

<section name="cf1a" class="section section--body section--last"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><p name="e752" id="e752" class="graf graf--p graf--leading">N’hésitez pas à partager cet article avec vos Mamans/Papas ! Et pensez à lâcher un petit ❤️ si vous pensez qu‘il contribue à rendre notre communauté plus ouverte.</p><p name="14a8" id="14a8" class="graf graf--p graf-after--p graf--last">Je serai aussi curieux de savoir comment vous vous y prenez pour expliquer votre métier ? Que vous soyez développeur, ou pas !</p></div></div></section>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://wizbii.tech/maman-papa-je-suis-d%C3%A9veloppeur-front-end-et-voil%C3%A0-ce-que-%C3%A7a-veut-dire-fb7d98c5e0b8">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>