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>Being A Developer After 40 (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/@akosma/being-a-developer-after-40-3c5dd112210c">

<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>
  Being A Developer After 40 (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/@akosma/being-a-developer-after-40-3c5dd112210c">Source originale du contenu</a></h3>
    <p name="1e1b" id="1e1b" class="graf--p graf-after--h3">(This is the talk I have given at <a href="https://www.appbuilders.ch" data-href="https://www.appbuilders.ch" class="markup--anchor markup--p-anchor">App Builders Switzerland</a> on April 25th, 2016. The slides are available on <a href="https://speakerdeck.com/akosma/being-a-developer-after-40" data-href="https://speakerdeck.com/akosma/being-a-developer-after-40" class="markup--anchor markup--p-anchor">SpeakerDeck</a> and at the bottom of this article.)</p>

<p name="274f" id="274f" class="graf--p graf-after--p">(A version in Russian is available in <a href="https://habrahabr.ru/post/282674/" data-href="https://habrahabr.ru/post/282674/" class="markup--anchor markup--p-anchor">Habrahabr.ru</a>.)</p>

<p name="cc17" id="cc17" class="graf--p graf-after--p">Hi everyone, I am a forty-two years old self-taught developer, and this is my story.</p>

<p name="3f4a" id="3f4a" class="graf--p graf-after--p">A couple of weeks ago I came by the tweet below, and it made me think about my career, and those thoughts brought me back to where it all began for me:</p>

<p name="ca8a" id="ca8a" class="graf--p graf-after--figure">I started my career as a software developer at precisely 10am, on Monday October 6th, 1997, somewhere in the city of <a href="https://en.wikipedia.org/wiki/Olivos,_Buenos_Aires" data-href="https://en.wikipedia.org/wiki/Olivos,_Buenos_Aires" class="markup--anchor markup--p-anchor">Olivos</a>, just north of <a href="https://en.wikipedia.org/wiki/Buenos_Aires" data-href="https://en.wikipedia.org/wiki/Buenos_Aires" class="markup--anchor markup--p-anchor">Buenos Aires</a>, <a href="https://en.wikipedia.org/wiki/Argentina" data-href="https://en.wikipedia.org/wiki/Argentina" class="markup--anchor markup--p-anchor">Argentina</a>. The moment was Unix Epoch <a href="http://www.epochconverter.com" data-href="http://www.epochconverter.com" class="markup--anchor markup--p-anchor">876142800</a>. I had recently celebrated my 24th birthday.</p>

<h4 name="15e7" id="15e7" class="graf--h4 graf-after--p">The World In 1997</h4>

<p name="de22" id="de22" class="graf--p graf-after--h4">The world was a slightly different place back then.</p>

<p name="14ba" id="14ba" class="graf--p graf-after--p">Websites did not have cookie warnings. The future of the web were portals like <a href="http://excite.com" data-href="http://excite.com" class="markup--anchor markup--p-anchor">Excite.com</a>. AltaVista was my preferred search engine. My e-mail was kosmacze@sc2a.unige.ch, which meant that my first personal website was located in <a href="http://sc2a.unige.ch/~kosmacze." data-href="http://sc2a.unige.ch/~kosmacze." class="markup--anchor markup--p-anchor">http://sc2a.unige.ch/~kosmacze.</a> We were still mourning Princess <a href="https://en.wikipedia.org/wiki/Death_of_Diana,_Princess_of_Wales" data-href="https://en.wikipedia.org/wiki/Death_of_Diana,_Princess_of_Wales" class="markup--anchor markup--p-anchor">Lady Diana</a>. Steve Jobs had taken the role of CEO and convinced Microsoft to <a href="http://www.cnet.com/news/microsoft-to-invest-150-million-in-apple/#!" data-href="http://www.cnet.com/news/microsoft-to-invest-150-million-in-apple/#!" class="markup--anchor markup--p-anchor">inject 150 million dollars</a> into Apple Computer. Digital Equipment Corporation was suing Dell. The remains of Che Guevara had just been brought back to Cuba. The <a href="https://en.wikipedia.org/wiki/Friends_%28season_4%29" data-href="https://en.wikipedia.org/wiki/Friends_%28season_4%29" class="markup--anchor markup--p-anchor">fourth season of “Friends”</a> had just started. <a href="https://en.wikipedia.org/wiki/Gianni_Versace" data-href="https://en.wikipedia.org/wiki/Gianni_Versace" class="markup--anchor markup--p-anchor">Gianni Versace</a> had just been murdered in front of his house. <a href="https://en.wikipedia.org/wiki/Mother_Teresa" data-href="https://en.wikipedia.org/wiki/Mother_Teresa" class="markup--anchor markup--p-anchor">Mother Teresa</a>, <a href="https://en.wikipedia.org/wiki/Roy_Lichtenstein" data-href="https://en.wikipedia.org/wiki/Roy_Lichtenstein" class="markup--anchor markup--p-anchor">Roy Lichtenstein</a> and <a href="https://en.wikipedia.org/wiki/Jeanne_Calment" data-href="https://en.wikipedia.org/wiki/Jeanne_Calment" class="markup--anchor markup--p-anchor">Jeanne Calment</a> (the world’s oldest person ever) had just passed away. People were playing <a href="https://en.wikipedia.org/wiki/Final_Fantasy_VII" data-href="https://en.wikipedia.org/wiki/Final_Fantasy_VII" class="markup--anchor markup--p-anchor">Final Fantasy 7</a> on their <a href="https://en.wikipedia.org/wiki/PlayStation_%28console%29" data-href="https://en.wikipedia.org/wiki/PlayStation_%28console%29" class="markup--anchor markup--p-anchor">PlayStation</a> like crazy. BBC 2 started broadcasting the <a href="http://www.forbes.com/sites/oracle/2015/07/31/prepare-for-the-teletubby-trained-mobile-workforce/#75086f3b7fb3" data-href="http://www.forbes.com/sites/oracle/2015/07/31/prepare-for-the-teletubby-trained-mobile-workforce/#75086f3b7fb3" class="markup--anchor markup--p-anchor">Teletubbies</a>. James Cameron was about to release <a href="http://www.imdb.com/title/tt0120338/" data-href="http://www.imdb.com/title/tt0120338/" class="markup--anchor markup--p-anchor">Titanic</a>. The Verve had just released their hit <a href="https://www.youtube.com/watch?v=1lyu1KKwC74" data-href="https://www.youtube.com/watch?v=1lyu1KKwC74" class="markup--anchor markup--p-anchor">“Bitter Sweet Symphony”</a> and then had to pay most royalties to the Rolling Stones.</p>

<p name="573c" id="573c" class="graf--p graf-after--figure">Smartphones looked like the <a href="https://en.m.wikipedia.org/wiki/Nokia_9000_Communicator" data-href="https://en.m.wikipedia.org/wiki/Nokia_9000_Communicator" class="markup--anchor markup--p-anchor">Nokia 9000 Communicator</a>; they had 8 MB of memory, a 24 MHz i386 CPU and run the GEOS operating system.</p>

<p name="7866" id="7866" class="graf--p graf-after--p">Smartwatches looked like the <a href="http://www.g-shock.eu/euro/aboutgshock/history/" data-href="http://www.g-shock.eu/euro/aboutgshock/history/" class="markup--anchor markup--p-anchor">CASIO G-SHOCK DW-9100BJ</a>. Not as many apps but the battery life was much longer.</p>

<p name="9090" id="9090" class="graf--p graf-after--p">IBM Deep Blue <a href="https://en.wikipedia.org/wiki/Deep_Blue_versus_Garry_Kasparov" data-href="https://en.wikipedia.org/wiki/Deep_Blue_versus_Garry_Kasparov" class="markup--anchor markup--p-anchor">had defeated for the first time</a> Garry Kasparov in a game of chess.</p>

<p name="3f4f" id="3f4f" class="graf--p graf-after--p">A hacker known as “_eci” published the C code for a Windows 3.1, 95 and NT exploit called <a href="https://en.wikipedia.org/wiki/WinNuke" data-href="https://en.wikipedia.org/wiki/WinNuke" class="markup--anchor markup--p-anchor">“WinNuke,”</a> a denial-of-service attack that on TCP port 139 (NetBIOS) causing a Blue Screen of Death.</p>

<p name="b1fe" id="b1fe" class="graf--p graf-after--p">Incidentally, 1997 is also the year <a href="https://www.malala.org/malalas-story" data-href="https://www.malala.org/malalas-story" class="markup--anchor markup--p-anchor">Malala Yousafzai</a>, <a href="http://www.imdb.com/name/nm1631269/" data-href="http://www.imdb.com/name/nm1631269/" class="markup--anchor markup--p-anchor">Chloë Grace Moretz</a> and <a href="https://en.wikipedia.org/wiki/Kylie_Jenner" data-href="https://en.wikipedia.org/wiki/Kylie_Jenner" class="markup--anchor markup--p-anchor">Kylie Jenner</a> were born.</p>

<p name="6151" id="6151" class="graf--p graf-after--p">Many film storylines take place in 1997, to name a few: <a href="http://www.imdb.com/title/tt0082340/" data-href="http://www.imdb.com/title/tt0082340/" class="markup--anchor markup--p-anchor">Escape from New York</a>, <a href="http://www.imdb.com/title/tt0100403/" data-href="http://www.imdb.com/title/tt0100403/" class="markup--anchor markup--p-anchor">Predator 2</a>, <a href="http://www.imdb.com/title/tt0421715/" data-href="http://www.imdb.com/title/tt0421715/" class="markup--anchor markup--p-anchor">The Curious Case of Benjamin Button</a>, <a href="http://www.imdb.com/title/tt0417741/" data-href="http://www.imdb.com/title/tt0417741/" class="markup--anchor markup--p-anchor">Harry Potter and the Half-Blood Prince</a>, <a href="http://www.imdb.com/title/tt0099674/" data-href="http://www.imdb.com/title/tt0099674/" class="markup--anchor markup--p-anchor">The Godfather III</a> and according to <a href="http://www.imdb.com/title/tt0103064/" data-href="http://www.imdb.com/title/tt0103064/" class="markup--anchor markup--p-anchor">Terminator 2: Judgement Day</a>, Skynet became self-aware at 2:14 am on August 29, 1997. That did not happen; however, in an interesting turn of events, the domain google.com had been registered on September 15th that year.</p>

<p name="8139" id="8139" class="graf--p graf-after--p">We were two years away from <a href="https://en.wikipedia.org/wiki/Year_2000_problem" data-href="https://en.wikipedia.org/wiki/Year_2000_problem" class="markup--anchor markup--p-anchor">Y2K</a> and the media were starting to get people nervous about it.</p>

<h4 name="5ccc" id="5ccc" class="graf--h4 graf-after--p">My First Developer Job</h4>

<p name="9d38" id="9d38" class="graf--p graf-after--h4">My first job consisted of writing ASP pages in various editors, ranging from <a href="https://en.wikipedia.org/wiki/Microsoft_FrontPage" data-href="https://en.wikipedia.org/wiki/Microsoft_FrontPage" class="markup--anchor markup--p-anchor">Microsoft FrontPage</a>, to <a href="http://www.hotmetalpro.com/press/" data-href="http://www.hotmetalpro.com/press/" class="markup--anchor markup--p-anchor">HotMeTaL Pro</a> to <a href="https://www.editplus.com" data-href="https://www.editplus.com" class="markup--anchor markup--p-anchor">EditPlus</a>, managing cross-browser compatibility between Netscape Navigator and Internet Explorer 4, and writing stored procedures in <a href="http://stackoverflow.com/questions/194/upgrading-sql-server-6-5" data-href="http://stackoverflow.com/questions/194/upgrading-sql-server-6-5" class="markup--anchor markup--p-anchor">SQL Server 6.5</a> powering a commercial website published in Japanese, Russian, English and Spanish — without any <a href="http://www.alanwood.net/unicode/netscape.html" data-href="http://www.alanwood.net/unicode/netscape.html" class="markup--anchor markup--p-anchor">consistent UTF-8 support</a> across the software stack.</p>

<p name="6728" id="6728" class="graf--p graf-after--p">The product of these efforts ran in a <a href="https://en.wikipedia.org/wiki/Pentium_II" data-href="https://en.wikipedia.org/wiki/Pentium_II" class="markup--anchor markup--p-anchor">Pentium II</a> server hosted somewhere in the USA, with a stunning 2 GB hard disk drive and a whooping 256 MB of RAM. It was a single server running <a href="https://en.wikipedia.org/wiki/Windows_NT_4.0" data-href="https://en.wikipedia.org/wiki/Windows_NT_4.0" class="markup--anchor markup--p-anchor">Windows NT 4</a>, <a href="https://en.wikipedia.org/wiki/Microsoft_SQL_Server" data-href="https://en.wikipedia.org/wiki/Microsoft_SQL_Server" class="markup--anchor markup--p-anchor">SQL Server 6.5</a> and <a href="https://en.wikipedia.org/wiki/Internet_Information_Services" data-href="https://en.wikipedia.org/wiki/Internet_Information_Services" class="markup--anchor markup--p-anchor">IIS 2.0</a>, serving around ten thousand visitors per day.</p>

<p name="c7a5" id="c7a5" class="graf--p graf-after--p">My first professional programming language was this mutant called <a href="https://en.wikipedia.org/wiki/VBScript" data-href="https://en.wikipedia.org/wiki/VBScript" class="markup--anchor markup--p-anchor">VBScript</a>, and of course a little bit of JavaScript on the client side, sprinkled with lots of “if this is Netscape do this, else do that” because back then I had no idea how to use JavaScript properly.</p>

<p name="0b7b" id="0b7b" class="graf--p graf-after--p">Interestingly, it’s 2016 and we are <a href="http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/" data-href="http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/" class="markup--anchor markup--p-anchor">barely starting</a> to understand how to do anything in JavaScript.</p>

<p name="a5de" id="a5de" class="graf--p graf-after--p">Unit tests were unheard of. The <a href="http://www.agilemanifesto.org" data-href="http://www.agilemanifesto.org" class="markup--anchor markup--p-anchor">Agile Manifesto</a> had not been written yet. Continuous integration was a dream. XML was not even a buzzword. Our QA strategy consisted of restarting the server once a week, because otherwise it would crash randomly. We developed our own <a href="https://www.microsoft.com/com/default.mspx" data-href="https://www.microsoft.com/com/default.mspx" class="markup--anchor markup--p-anchor">COM+</a> component in <a href="https://en.wikipedia.org/wiki/Visual_J%2B%2B" data-href="https://en.wikipedia.org/wiki/Visual_J%2B%2B" class="markup--anchor markup--p-anchor">Visual J++</a> to parse JPEG files uploaded to the server. As soon as <a href="https://en.wikipedia.org/wiki/JPEG_2000" data-href="https://en.wikipedia.org/wiki/JPEG_2000" class="markup--anchor markup--p-anchor">JPEG 2000</a>-encoded files started popping up, our component broke miserably.</p>

<p name="4ce8" id="4ce8" class="graf--p graf-after--p">We did not use source control, not even <a href="http://www.nongnu.org/cvs/" data-href="http://www.nongnu.org/cvs/" class="markup--anchor markup--p-anchor" title="Concurrent Versions System">CVS</a>, <a href="https://www.gnu.org/software/rcs/" data-href="https://www.gnu.org/software/rcs/" class="markup--anchor markup--p-anchor" title="The GNU Revision Control System">RCS</a> or, God forbid, <a href="https://en.m.wikipedia.org/wiki/Microsoft_Visual_SourceSafe" data-href="https://en.m.wikipedia.org/wiki/Microsoft_Visual_SourceSafe" class="markup--anchor markup--p-anchor" title="Microsoft Visual SourceSafe">SourceSafe</a>. <a href="http://subversion.apache.org/" data-href="http://subversion.apache.org/" class="markup--anchor markup--p-anchor" title="Apache Subversion">Subversion</a> did not exist yet. Our <a href="http://www.joelonsoftware.com/articles/fog0000000043.html" data-href="http://www.joelonsoftware.com/articles/fog0000000043.html" class="markup--anchor markup--p-anchor" title="The Joel Test">Joel Test</a> score was minus 25.</p>

<h4 name="f2b3" id="f2b3" class="graf--h4 graf-after--p">6776 Days</h4>

<p name="a3d6" id="a3d6" class="graf--p graf-after--h4">For the past 6776 days I have had a cup of coffee in the morning and wrote code with things named VBScript, JavaScript, Linux, SQL, HTML, Makefiles, Node.js, CSS, XML, .NET, YAML, Podfiles, JSON, Markdown, PHP, Windows, Doxygen, C#, Visual Basic, Visual Basic.NET, Java, Socket.io, Ruby, unit tests, Python, shell scripts, C++, Objective-C, batch files, and lately Swift.</p>

<p name="c349" id="c349" class="graf--p graf-after--p">In those 6776 days lots of things happened; most importantly, my wife and I got married. I quit 6 jobs and I was fired twice. I started and closed my own business. I finished my Master Degree. I published a few open source projects, and one of them landed me an article on <a href="http://arstechnica.com/apple/2009/04/iphone-dev-convert-xib-files-to-objective-c/" data-href="http://arstechnica.com/apple/2009/04/iphone-dev-convert-xib-files-to-objective-c/" class="markup--anchor markup--p-anchor">Ars Technica by Erica Sadun herself</a>. I was featured in Swiss and Bolivian TV shows. I watched live keynotes by Bill Gates and by Steve Jobs in Seattle and San Francisco. I <a href="http://www.infoq.com/presentations/Introduction-to-iOS-Software-Development" data-href="http://www.infoq.com/presentations/Introduction-to-iOS-Software-Development" class="markup--anchor markup--p-anchor">spoke at</a> and co-organised conferences in four continents. I wrote and published <a href="http://amazon.com/author/akosma" data-href="http://amazon.com/author/akosma" class="markup--anchor markup--p-anchor">two books</a>. I burned out twice (not the books, myself,) and lots of other things happened, both wonderful and horrible.</p>

<p name="8924" id="8924" class="graf--p graf-after--p">I have often pondered about leaving the profession altogether. But somehow, code always calls me back after a while. I like to write apps, systems, software. To avoid burning out, I have had to develop strategies.</p>

<p name="85bd" id="85bd" class="graf--p graf-after--p">In this talk I will give you my secrets, so that you too can reach the glorious age of 40 as an experienced developer, willing to continue in this profession.</p>

<h4 name="82f3" id="82f3" class="graf--h4 graf-after--p">Advice For The Young At Heart</h4>

<p name="bf16" id="bf16" class="graf--p graf-after--h4">Some simple tips to reach the glorious age of 40 as a happy software developer.</p>

<h4 name="c7a9" id="c7a9" class="graf--h4 graf-after--p">1. Forget The Hype</h4>

<p name="7445" id="7445" class="graf--p graf-after--h4">The first advice I can give you all is, do not pay attention to hype. Every year there is a new programming language, framework, library, pattern, component architecture or paradigm that takes the blogosphere by storm. People get crazy about it. Conferences are given. Books are written. <a href="http://www.gartner.com/technology/research/methodologies/hype-cycle.jsp" data-href="http://www.gartner.com/technology/research/methodologies/hype-cycle.jsp" class="markup--anchor markup--p-anchor">Gartner hype cycles</a> rise and fall. Consultants charge insane amounts of money to teach, deploy or otherwise fuckup the lives of people in this industry. The press will support these horrors and will make you feel guilty if you do not pay attention to them.</p>

<p name="7edd" id="7edd" class="graf--p graf-after--p">In 1997 it was <a href="https://en.wikipedia.org/wiki/Common_Object_Request_Broker_Architecture" data-href="https://en.wikipedia.org/wiki/Common_Object_Request_Broker_Architecture" class="markup--anchor markup--p-anchor">CORBA</a> &amp; <a href="https://en.m.wikipedia.org/wiki/Rational_Unified_Process" data-href="https://en.m.wikipedia.org/wiki/Rational_Unified_Process" class="markup--anchor markup--p-anchor">RUP</a>.</p>

<p name="ce6c" id="ce6c" class="graf--p graf-after--p">In 2000 it was <a href="https://en.wikipedia.org/wiki/SOAP" data-href="https://en.wikipedia.org/wiki/SOAP" class="markup--anchor markup--p-anchor">SOAP</a> &amp; XML.</p>

<p name="9c38" id="9c38" class="graf--p graf-after--p">In 2003 it was <a href="https://en.wikipedia.org/wiki/Model-driven_architecture" data-href="https://en.wikipedia.org/wiki/Model-driven_architecture" class="markup--anchor markup--p-anchor">Model Driven Architecture</a> and <a href="https://en.m.wikipedia.org/wiki/Software_factory" data-href="https://en.m.wikipedia.org/wiki/Software_factory" class="markup--anchor markup--p-anchor">Software Factories</a>.</p>

<p name="7c23" id="7c23" class="graf--p graf-after--p">In 2006 it was <a href="https://en.wikipedia.org/wiki/Semantic_Web" data-href="https://en.wikipedia.org/wiki/Semantic_Web" class="markup--anchor markup--p-anchor">Semantic Web</a> and <a href="https://en.m.wikipedia.org/wiki/One_Laptop_per_Child" data-href="https://en.m.wikipedia.org/wiki/One_Laptop_per_Child" class="markup--anchor markup--p-anchor">OLPC</a>.</p>

<p name="fde8" id="fde8" class="graf--p graf-after--p">In 2009 it was <a href="https://en.m.wikipedia.org/wiki/Augmented_reality" data-href="https://en.m.wikipedia.org/wiki/Augmented_reality" class="markup--anchor markup--p-anchor">Augmented Reality</a>.</p>

<p name="1938" id="1938" class="graf--p graf-after--p">In 2012 it was <a href="https://en.m.wikipedia.org/wiki/Big_data" data-href="https://en.m.wikipedia.org/wiki/Big_data" class="markup--anchor markup--p-anchor">Big Data</a>.</p>

<p name="0f14" id="0f14" class="graf--p graf-after--p">In 2015… Virtual Reality? Bots?</p>

<p name="70fc" id="70fc" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Do not worry about hype.</strong> Keep doing your thing, keep learning what you were learning, and move on. Pay attention to it only if you have a genuine interest, or if you feel that it could bring you some benefit in the medium or long run.</p>

<p name="622b" id="622b" class="graf--p graf-after--p">The reason for this lies in the fact that, as the Romans said in the past, <strong class="markup--strong markup--p-strong">Nil nove sul sole.</strong> Most of what you see and learn in computer science has been around for decades, and this fact is purposedly hidden beneath piles of marketing, books, blog posts and questions on Stack Overflow. Every new architecture is just a reimagination and a readaptation of an idea that was floating around for decades.</p>

<h4 name="c9bc" id="c9bc" class="graf--h4 graf-after--p">2. Choose Your Galaxy Wisely</h4>

<p name="413d" id="413d" class="graf--p graf-after--h4">In our industry, every technology generates what I call a “galaxy.” These galaxies feature stars but also black holes; meteoric changes that fade in the night, many planets, only a tiny fraction of which harbour some kind of life, and lots of cosmic dust and dark matter.</p>

<p name="a859" id="a859" class="graf--p graf-after--p">Examples of galaxies are, for example, .NET, Cocoa, Node.js, PHP, Emacs, SAP, etc. Each of these features evangelists, developers, bloggers, podcasts, conferences, books, training courses, consulting services, and inclusion problems. Galaxies are built on the assumption that their underlying technology is the answer to all problems. Each galaxy, thus, is based in a wrong assumption.</p>

<p name="7aff" id="7aff" class="graf--p graf-after--p">The developers from those different galaxies embody the prototypical attitudes that have brought that technology to life. They adhere to the ideas, and will enthusiatically wear the t-shirts and evangelize others about the merits of their choice.</p>

<p name="3a2f" id="3a2f" class="graf--p graf-after--p">Actually, I use the term “galaxy” to avoid the slightly more appropriate if not less controversial term “religion,” which might describe this phenomenon better.</p>

<p name="684a" id="684a" class="graf--p graf-after--p">In my personal case, I spent the first ten years of my career in the Microsoft galaxy, and the following nine in the Apple galaxy.</p>

<p name="a4f5" id="a4f5" class="graf--p graf-after--p">I dare say, one of the biggest reasons why I changed galaxies was Steve Ballmer. I got tired of the general attitude of the Microsoft galaxy people against open source software.</p>

<p name="619a" id="619a" class="graf--p graf-after--p">On the other hand, I also have to say that the Apple galaxy is a delightful place, full of artists and musicians and writers who, by chance or ill luck, happen to write software as well.</p>

<p name="0123" id="0123" class="graf--p graf-after--p">I attended conferences in the Microsoft galaxy, like the Barcelona TechEd 2003, or various Tech Talks in Buenos Aires, Geneva or London. I even spoke at the Microsoft DevDays 2006 in Geneva. The general attitude of developers in the Microsoft galaxy is unfriendly, “corporate” and bound in secrecy, NDAs and cumbersome IT processes.</p>

<p name="fe1a" id="fe1a" class="graf--p graf-after--p">The Apple galaxy was to me, back in 2006, exactly the opposite; it was full of people who were musicians, artists, painters; they would write software to support their passion, and they would write software with passion. It made all the difference, and to this day, I still enjoy tremendously this galaxy, the one we are in, right now, and that has brought us all together.</p>

<p name="d6c5" id="d6c5" class="graf--p graf-after--p">And then the iPhone came out, and the rest is history.</p>

<p name="c018" id="c018" class="graf--p graf-after--p">So my recommendation to you is: choose your galaxy wisely, enjoy it as much or as little as you want, but keep your telescope pointed towards the other galaxies, and prepare to make a hyperjump to other places if needed.</p>

<h4 name="80ff" id="80ff" class="graf--h4 graf-after--p">3. Learn About Software History</h4>

<p name="1440" id="1440" class="graf--p graf-after--h4">This takes me to the next point: learn how your favorite technology came to be. Do you like C#? Do you know who created it? How did the .NET project came to be? Who was the lead architect? Which were the constraints of the project and why did the language turned out to be what it is now?</p>

<p name="2497" id="2497" class="graf--p graf-after--p">Apply the same recipe to any language or CPU architecture that you enjoy or love: Python, Ruby, Java, whatever the programming language; learn their origins, how they came up to be. The same for operating systems, networking technologies, hardware, anything. Go and learn how people came up with those ideas, and how long they took to grow and mature. Because <a href="http://www.joelonsoftware.com/articles/fog0000000017.html" data-href="http://www.joelonsoftware.com/articles/fog0000000017.html" class="markup--anchor markup--p-anchor">good software takes ten years</a>, you know.</p>

<p name="13b7" id="13b7" class="graf--p graf-after--figure">The stories surrounding the genesis of our industry are fascinating, and will show you two things: first, that <a href="http://everythingisaremix.info" data-href="http://everythingisaremix.info" class="markup--anchor markup--p-anchor">everything is a remix</a>. Second, that you could be the one remixing the next big thing. No, scratch that: you <strong class="markup--strong markup--p-strong">are going to be</strong> the creators of the next big thing.</p>

<p name="3996" id="3996" class="graf--p graf-after--p">And to help you get there, here is my (highly biased) selection of history books that I like and recommend:</p>

<p name="abae" id="abae" class="graf--p graf-after--li">You will also learn to value those things that stood the test of time: <a href="https://en.wikipedia.org/wiki/Lisp_%28programming_language%29" data-href="https://en.wikipedia.org/wiki/Lisp_%28programming_language%29" class="markup--anchor markup--p-anchor">Lisp</a>, <a href="https://en.wikipedia.org/wiki/TeX" data-href="https://en.wikipedia.org/wiki/TeX" class="markup--anchor markup--p-anchor">TeX</a>, <a href="https://en.wikipedia.org/wiki/Unix" data-href="https://en.wikipedia.org/wiki/Unix" class="markup--anchor markup--p-anchor">Unix</a>, <a href="https://www.gnu.org/software/bash/" data-href="https://www.gnu.org/software/bash/" class="markup--anchor markup--p-anchor">bash</a>, <a href="https://en.wikipedia.org/wiki/C_%28programming_language%29" data-href="https://en.wikipedia.org/wiki/C_%28programming_language%29" class="markup--anchor markup--p-anchor">C</a>, <a href="https://en.wikipedia.org/wiki/Cocoa_%28API%29" data-href="https://en.wikipedia.org/wiki/Cocoa_%28API%29" class="markup--anchor markup--p-anchor">Cocoa</a>, <a href="https://www.gnu.org/software/emacs/" data-href="https://www.gnu.org/software/emacs/" class="markup--anchor markup--p-anchor">Emacs</a>, <a href="https://en.wikipedia.org/wiki/Vim_%28text_editor%29" data-href="https://en.wikipedia.org/wiki/Vim_%28text_editor%29" class="markup--anchor markup--p-anchor">Vim</a>, <a href="https://en.wikipedia.org/wiki/Python_%28programming_language%29" data-href="https://en.wikipedia.org/wiki/Python_%28programming_language%29" class="markup--anchor markup--p-anchor">Python</a>, <a href="https://en.wikipedia.org/wiki/ARM_architecture" data-href="https://en.wikipedia.org/wiki/ARM_architecture" class="markup--anchor markup--p-anchor">ARM</a>, <a href="https://www.gnu.org/software/make/" data-href="https://www.gnu.org/software/make/" class="markup--anchor markup--p-anchor">GNU make</a>, <a href="http://manpages.bsd.lv/history.html" data-href="http://manpages.bsd.lv/history.html" class="markup--anchor markup--p-anchor">man pages</a>. These are some examples of long-lasting useful things that are something to celebrate, cherish and learn from.</p>

<h4 name="ebd4" id="ebd4" class="graf--h4 graf-after--figure">4. Keep on Learning</h4>

<p name="a444" id="a444" class="graf--p graf-after--h4">Learn. Anything will do. Wanna learn Fortran? Go for it. Find Erlang interesting? Excellent. Think COBOL might be the next big thing in your career? Fantastic. Need to know more about <a href="https://en.wikipedia.org/wiki/Functional_reactive_programming" data-href="https://en.wikipedia.org/wiki/Functional_reactive_programming" class="markup--anchor markup--p-anchor">Functional Reactive Programming</a>? Be my guest. Design? Of course. UX? You must. Poetry? <a href="https://www.brainpickings.org/2014/02/17/joseph-brodsky-how-to-read-a-book/" data-href="https://www.brainpickings.org/2014/02/17/joseph-brodsky-how-to-read-a-book/" class="markup--anchor markup--p-anchor">You should</a>.</p>

<p name="4328" id="4328" class="graf--p graf-after--p">Many common concepts in Computer Science have been around for decades, which makes it worthwhile to learn old programming languages and frameworks; even “arcane” ones. First, it will make you appreciate the current state of the industry (or hate it, it depends,) and second, you will learn how to use the current tools more effectively — if anything, because you will understand its legacy and origins.</p>

<p name="c37e" id="c37e" class="graf--p graf-after--p">Tip 1: <strong class="markup--strong markup--p-strong">learn at least one new programming language every year.</strong> I did not come up with this idea; <a href="http://www.amazon.com/The-Pragmatic-Programmer-Journeyman-Master/dp/020161622X" data-href="http://www.amazon.com/The-Pragmatic-Programmer-Journeyman-Master/dp/020161622X" class="markup--anchor markup--p-anchor">The Pragmatic Programmer</a> book did. And it works.</p>

<p name="1570" id="1570" class="graf--p graf-after--p">One new programming language every year. Simple, huh? Go beyond the typical “Hello, World” stage, and build something useful with it. I usually build a simple <a href="https://github.com/akosma/CodeaCalc" data-href="https://github.com/akosma/CodeaCalc" class="markup--anchor markup--p-anchor">calculator</a> with whatever new technology I learn. It helps me figure out the syntax, it makes me familiar with the APIs or the IDE, etc.</p>

<p name="293a" id="293a" class="graf--p graf-after--p">Tip 2: <strong class="markup--strong markup--p-strong">read at least 6 books per year.</strong> I have shown above a list of six must-read books; that should keep you busy for a year. Here goes the list for the second year:</p>

<p name="6be0" id="6be0" class="graf--p graf-after--li">(OK, those are seven books.)</p>

<p name="1923" id="1923" class="graf--p graf-after--p">Six books per year looks like a lot, but it only means one every 2 months. And most of the books I have mentioned in this presentation are not that long, and even better, they are outstandingly well written, they are fun and are full of insight.</p>

<p name="d7db" id="d7db" class="graf--p graf-after--p">Look at it this way: if you are now 20 years old, by the age of 30 you will have read over 60 books, and over 120 when you reach my age. And you will have played with at least 20 different programming languages. Think about it for a second.</p>

<p name="50ef" id="50ef" class="graf--p graf-after--p">Some of the twelve books I’ve selected for you have been written in the seventies, others in the eighties, some in the nineties and finally most of them are from the past decade. They represent the best writing I have come across in our industry.</p>

<p name="f5c1" id="f5c1" class="graf--p graf-after--p">But do not just read them; take notes. Bookmark. Write on the pages of the books. Then re-read them every so often. <a href="https://en.wikipedia.org/wiki/Jorge_Luis_Borges" data-href="https://en.wikipedia.org/wiki/Jorge_Luis_Borges" class="markup--anchor markup--p-anchor">Borges</a> used to say that a bigger pleasure than reading a book is re-reading it. And also, please, buy those books you really like in paper format. Believe me. eBooks are overrated. Nothing beats the real thing.</p>

<p name="4da9" id="4da9" class="graf--p graf-after--p">Of course, please know that as you will grow old, the number of things that qualify as new and/or important will drop dramatically. Prepare for this. It is OK to weep silently when you realise this.</p>

<h4 name="daef" id="daef" class="graf--h4 graf-after--figure">5. Teach</h4>

<p name="a9da" id="a9da" class="graf--p graf-after--h4">Once you have learnt, <strong class="markup--strong markup--p-strong">teach</strong>. This is very important.</p>

<p name="5fc9" id="5fc9" class="graf--p graf-after--p">This does not mean that you should setup a classroom and invite people to hear your ramblings (although it would be awesome if you did!) It might mean that you give meaningful answers to questions in Stack Overflow; that you write a book; that you publish a podcast about your favorite technology; that you keep a blog; that you write on Medium; that you go to another continent and set up programming schools using Raspberry Pis; or that you help a younger developer by becoming their mentor (do not do this before the age of 30, though.)</p>

<p name="b88a" id="b88a" class="graf--p graf-after--p">Teaching will make you more humble, because it will painfully show you how limited your knowledge is. <strong class="markup--strong markup--p-strong">Teaching is the best way to learn</strong>. Only by testing your knowledge against others are you going to learn properly. This will also make you more respectful regarding other developers and other technologies; every language, no matter how humble or arcane, has its place within the <a href="http://canonical.org/~kragen/tao-of-programming.html" data-href="http://canonical.org/~kragen/tao-of-programming.html" class="markup--anchor markup--p-anchor">Tao of Programming</a>, and only through teaching will you be able to feel it.</p>

<p name="fa71" id="fa71" class="graf--p graf-after--p">And through teaching you can really, really make a difference in this world. Back in 2012 I received a mail from a person who had attended one of my trainings. She used to work as an Adobe Flash developer. Remember ActionScript and all that? Well, <a href="https://www.apple.com/hotnews/thoughts-on-flash/" data-href="https://www.apple.com/hotnews/thoughts-on-flash/" class="markup--anchor markup--p-anchor">unsurprisingly</a> after 12 years of working as a freelance Flash developer she suddenly found herself unemployed. Alone. With a baby to feed. She told me in her message that she had attended my training, that she had enjoyed it and also learnt something useful, and that after that she had found a job as a mobile web developer. She wrote to me to say <em class="markup--em markup--p-em">thank you</em>.</p>

<p name="aa70" id="aa70" class="graf--p graf-after--p">I cannot claim that I changed the world, but I might have nudged it a little bit, into something (hopefully) better. This thought has made every lesson I gave since then much more worthwhile and meaningful.</p>

<h4 name="a91f" id="a91f" class="graf--h4 graf-after--p">6. Workplaces Suck</h4>

<p name="68d3" id="68d3" class="graf--p graf-after--figure">Do not expect software corporations to offer <em class="markup--em markup--p-em">any</em> kind of career path. They might do this in the US, but I have never seen any of that in Europe. This means that you are solely responsible for the success of your career. Nobody will tell you “oh, well, next year you can grow to be team leader, then manager, then CTO…”</p>

<p name="4d7e" id="4d7e" class="graf--p graf-after--p">Not. At. All. Quite the opposite, actually: you were, are and will be a software developer, that is, a relatively expensive factory worker, whose tasks your managers would be happy to offshore no matter what they tell you.</p>

<p name="53b3" id="53b3" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Do not take a job just for the money.</strong> <a href="https://twitter.com/carlfish/status/721738272070762496" data-href="https://twitter.com/carlfish/status/721738272070762496" class="markup--anchor markup--p-anchor">Software companies have become sweatshops</a> where you are supposed to justify your absurdly high salary with insane hours and unreasonable expectations. And, at least in the case of Switzerland, there is no worker union to help you if things go bad. Actually there are worker unions in Switzerland, but they do not really care about situations that will not land them some kind of media exposure.</p>

<p name="3dcb" id="3dcb" class="graf--p graf-after--p">Even worse; in most workplaces you will be harassed, particularly if you are a woman, a member of the LGBT community or from a non-caucasian ethnic group. I have seen developers threatened to have their work visas not renewed if they did not work faster. I have witnessed harassment of women and gay colleagues.</p>

<p name="c9e9" id="c9e9" class="graf--p graf-after--p">Some parts of our industry are downright disgusting, and you do not need to be in Silicon Valley to live it. You do not need Medium to read it. You could experience that right here in Switzerland. Many banks have atrocious workplaces. Financial institutions want you to vomit code 15 hours a day, even if the Swiss working laws explicitly forbid such treatments. Pharmaceutical companies want you to write code to cheat test results and to help them bypass regulations. Startups want your skin, working for 18 hours for no compensation, telling you bullshit like “because we give you stock options” or “because we are all team players.”</p>

<p name="145e" id="145e" class="graf--p graf-after--p">It does not matter that you are Zach Holman and that you can claim in your CV that you literally wrote Github from scratch: <a href="https://zachholman.com/talk/firing-people" data-href="https://zachholman.com/talk/firing-people" class="markup--anchor markup--p-anchor">you will be fired</a> for the pettiest of reasons.</p>

<p name="cbd3" id="cbd3" class="graf--p graf-after--p">It does not matter that the app brings more than half of your employer traffic and revenues; the API team will treat you and your ideas with contempt and sloppiness.</p>

<p name="9c2e" id="9c2e" class="graf--p graf-after--p">I have been asked to work for free by very well known people in the industry, some of them even featured in Wikipedia, and it is simply appalling. I will not give out their names, but I will prevent any junior from getting close to them, because people working without ethics <strong class="markup--strong markup--p-strong">do not deserve anyone’s brain.</strong></p>

<p name="ae6b" id="ae6b" class="graf--p graf-after--p">Whenever an HR manager tells you “you must do this (whatever wrong thing in your frame of reference) because we pay you a salary,” remember to answer the following: “you pay me a salary, but I give you my brain in exchange, and I refuse to comply with this order.”</p>

<p name="61d9" id="61d9" class="graf--p graf-after--p">And to top it all, they will put you in an open space, and for some reason they will be proud about it. <strong class="markup--strong markup--p-strong">Open spaces are a cancer.</strong> They are without a doubt the worst possible office layout ever invented, and the least appropriate for software development — or any type of brain work for that matter.</p>

<p name="0f9b" id="0f9b" class="graf--p graf-after--p">Remember this: the fact that you <em class="markup--em markup--p-em">understand</em> something does not imply that you have to <em class="markup--em markup--p-em">agree</em> to it.</p>

<p name="5836" id="5836" class="graf--p graf-after--p">Disobey authority. Say <a href="https://www.youtube.com/watch?v=bWXazVhlyxQ" data-href="https://www.youtube.com/watch?v=bWXazVhlyxQ" class="markup--anchor markup--p-anchor">“fuck you, I won’t do what you tell me”</a> and change jobs. There are fantastic workplaces out there; not a lot, but they exist. I have been lucky enough to work in some of them. Do not let a bad job kill your enthusiasm. It is not worth it. Disobey and move on.</p>

<p name="1cc2" id="1cc2" class="graf--p graf-after--p">Or, better yet, become independent.</p>

<h4 name="bd09" id="bd09" class="graf--h4 graf-after--figure">7. Know Your Worth</h4>

<p name="0bc1" id="0bc1" class="graf--p graf-after--h4">You have probably heard about the “10x Software Engineer” myth, right? Well here is the thing: it is not a myth, but it does not work they way you think it works.</p>

<p name="ba97" id="ba97" class="graf--p graf-after--p">It works, however, from the point of view of the employer: a “10x Software Engineer” generates worth 10 times whatever the employer pays. That means that you she or he gets 100 KCHF per year, but she or he are actually creating a value worth over a million francs. And of course, <em class="markup--em markup--p-em">they</em> get the bonuses at the end of the fiscal year, because, you know, capitalism. Know your worth. Read <a href="http://www.amazon.com/Capital-Critique-Political-Economy-Classics/dp/0140445684" data-href="http://www.amazon.com/Capital-Critique-Political-Economy-Classics/dp/0140445684" class="markup--anchor markup--p-anchor">Karl Marx</a> and <a href="http://www.amazon.com/Capital-Twenty-First-Century-Thomas-Piketty/dp/067443000X" data-href="http://www.amazon.com/Capital-Twenty-First-Century-Thomas-Piketty/dp/067443000X" class="markup--anchor markup--p-anchor">Thomas Piketty</a>. Enough said.</p>

<p name="fa12" id="fa12" class="graf--p graf-after--p">Keep moving; be like the shark that keeps on swimming, because your skills are extremely valuable. Speak out your salary, say it loud, blog about it, so that your peers know how much their work is worth. Companies want you to shut up about that, so that women are paid 70% of what men are paid. So speak up! Blog about it! Tweet it! I am making 135 KCHF per year. That was my current salary. How about you? And you? The more we speak out, the less inequality there will be. Any person doing my job with my experience should get the same money, regardless of race, sex, age or preferred football team. End of the story. But it is not like that. It is not.</p>

<h4 name="5e0a" id="5e0a" class="graf--h4 graf-after--figure">8. Send The Elevator Down</h4>

<p name="2082" id="2082" class="graf--p graf-after--h4">If you are a white male remember all the privilege you have enjoyed since birth just because you were born that way. It is your responsibility to change the industry and its bias towards more inclusion.</p>

<p name="2e5c" id="2e5c" class="graf--p graf-after--p">It is your <strong class="markup--strong markup--p-strong">duty</strong> to send the elevator down.</p>

<p name="95e6" id="95e6" class="graf--p graf-after--p">Take conscious decisions in your life. Be aware of your actions and their effect. Do not blush or be embarrased for changing your opinions. Say “I’m sorry” when required. Listen. Do not be a hotshot. Have integrity and self-respect.</p>

<p name="e98b" id="e98b" class="graf--p graf-after--p">Do not critisize or make fun of the technology choices of your peers; for other people will have their own reasons to choose them, and they must be respected. Be prepared to change your mind at any time through learning. One day you might like Windows. One day you might like Android. I am actually liking some parts of Android lately. And that is OK.</p>

<h4 name="e70c" id="e70c" class="graf--h4 graf-after--figure">9. LLVM</h4>

<p name="6625" id="6625" class="graf--p graf-after--h4">Everybody is raving about Swift, but in reality what I pay more attention to these days is LLVM itself.</p>

<p name="7c69" id="7c69" class="graf--p graf-after--p">I think LLVM is the <strong class="markup--strong markup--p-strong">most</strong> important software project today, as measured in its long-term impact. Objective-C blocks, Rust &amp; Swift (the two most loved strongly typed and compiled programming languages in the <a href="http://stackoverflow.com/research/developer-survey-2016" data-href="http://stackoverflow.com/research/developer-survey-2016" class="markup--anchor markup--p-anchor" title="StackOverflow 2016 developer survey">2016 StackOverflow developer survey</a>,) <a href="https://github.com/dropbox/pyston" data-href="https://github.com/dropbox/pyston" class="markup--anchor markup--p-anchor" title="Dropbox Pyston">Dropbox Pyston</a>, the Clang Static Analyser, ARC, <a href="https://github.com/google/souper" data-href="https://github.com/google/souper" class="markup--anchor markup--p-anchor">Google Souper</a>, <a href="https://kripken.github.io/emscripten-site/" data-href="https://kripken.github.io/emscripten-site/" class="markup--anchor markup--p-anchor">Emscripten</a>, <a href="http://llvmsharp.org/" data-href="http://llvmsharp.org/" class="markup--anchor markup--p-anchor">LLVMSharp</a>, <a href="http://www.dotnetfoundation.org/llilc" data-href="http://www.dotnetfoundation.org/llilc" class="markup--anchor markup--p-anchor">Microsoft LLILC</a>, <a href="http://www.rubymotion.com/tour/features/" data-href="http://www.rubymotion.com/tour/features/" class="markup--anchor markup--p-anchor">Rubymotion</a>, <a href="http://leaningtech.com/cheerp/" data-href="http://leaningtech.com/cheerp/" class="markup--anchor markup--p-anchor">cheerp</a>, watchOS apps, the <a href="https://android.googlesource.com/platform/ndk.git/+/master/CHANGELOG.md" data-href="https://android.googlesource.com/platform/ndk.git/+/master/CHANGELOG.md" class="markup--anchor markup--p-anchor">Android NDK</a>, <a href="https://developer.apple.com/metal/" data-href="https://developer.apple.com/metal/" class="markup--anchor markup--p-anchor">Metal</a>, all of these things were born out or powered by LLVM. There are compilers using LLVM as a backend for pretty much all the most important languages of today. The .NET CLR will eventually <a href="https://github.com/dotnet/llilc" data-href="https://github.com/dotnet/llilc" class="markup--anchor markup--p-anchor" title="LLILC Project">interoperate</a> with it, and Mono <a href="http://mono-framework.com/Mono_LLVM" data-href="http://mono-framework.com/Mono_LLVM" class="markup--anchor markup--p-anchor">already</a> uses it. Facebook has <a href="http://hhvm.com/blog/10205/llvm-code-generation-in-hhvm" data-href="http://hhvm.com/blog/10205/llvm-code-generation-in-hhvm" class="markup--anchor markup--p-anchor" title="LLVM Code Generation in HHVM">tried to integrate LLVM with HHVM</a>, and WebKit recently <a href="https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/" data-href="https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/" class="markup--anchor markup--p-anchor" title="Introducing the B3 JIT Compiler">switched from LLVM to the new B3 JIT JavaScript compiler</a>.</p>

<p name="9968" id="9968" class="graf--p graf-after--p">LLVM is <a href="http://llvm.org/docs/doxygen/html/classllvm_1_1Triple.html" data-href="http://llvm.org/docs/doxygen/html/classllvm_1_1Triple.html" class="markup--anchor markup--p-anchor">cross-platform</a>, cross-CPU-architecture, cross-language, cross-compiler, cross-eyed-tested, free as in gratis and free as a bird.</p>

<p name="0b26" id="0b26" class="graf--p graf-after--p">Learn all you can about LLVM. This is the galaxy where true innovation is happening now. This is the foundation for the next 20 years.</p>

<h4 name="cdb0" id="cdb0" class="graf--h4 graf-after--figure">10. Follow Your Gut</h4>

<p name="5eec" id="5eec" class="graf--p graf-after--h4">I had the gut feeling .NET was going to be big when I watched its <a href="http://www.zulenet.com/see/BillGatesNET.html" data-href="http://www.zulenet.com/see/BillGatesNET.html" class="markup--anchor markup--p-anchor">introduction in June 2000</a>. I had the gut feeling the iPhone was going to be big when I watched its <a href="https://www.youtube.com/watch?v=9hUIxyE2Ns8" data-href="https://www.youtube.com/watch?v=9hUIxyE2Ns8" class="markup--anchor markup--p-anchor">introduction in 2007</a>.</p>

<p name="95b6" id="95b6" class="graf--p graf-after--p">In both cases people laughed at my face, literally. In both cases I followed my gut feeling and I guess things worked out well.</p>

<p name="a9d9" id="a9d9" class="graf--p graf-after--p">Follow your gut. You might be lucky, too.</p>

<h4 name="f61e" id="f61e" class="graf--h4 graf-after--figure">11. APIs Are King</h4>

<p name="0e6e" id="0e6e" class="graf--p graf-after--h4">Great APIs enable great apps. If the API sucks, the app will suck, too, no matter how beautiful the design.</p>

<p name="9959" id="9959" class="graf--p graf-after--p">Remember that <strong class="markup--strong markup--p-strong">chunky is better than chatty</strong>, and that clients should be dumb; push as much logic as you can down to the API.</p>

<p name="f7b9" id="f7b9" class="graf--p graf-after--p">Do not invent your own security protocols.</p>

<p name="ec20" id="ec20" class="graf--p graf-after--p">Learn a couple of server-side technologies, and make sure Node is one of those.</p>

<p name="a50f" id="a50f" class="graf--p graf-after--p">Leave REST aside and embrace Socket.io, ZeroMQ, RabbitMQ, Erlang, XMPP; explore realtime as the next step in app development. Realtime is not only for chat apps. Remove polling from the equation forever.</p>

<p name="79be" id="79be" class="graf--p graf-after--p">Oh, and start <a href="http://www.economist.com/news/business-and-finance/21696477-market-apps-maturing-now-one-text-based-services-or-chatbots-looks-poised" data-href="http://www.economist.com/news/business-and-finance/21696477-market-apps-maturing-now-one-text-based-services-or-chatbots-looks-poised" class="markup--anchor markup--p-anchor">building bots</a> around those APIs. Just saying.</p>

<h4 name="1744" id="1744" class="graf--h4 graf-after--p">12. Fight Complexity</h4>

<p name="91d6" id="91d6" class="graf--p graf-after--h4">Simpler is better. Always. Remember the KISS principle. And I do not mean only at the UI level, but all the way until the deepest layers of your code.</p>

<p name="b321" id="b321" class="graf--p graf-after--p">Refactoring, unit tests, code reviews, pull requests, all of these tools are at your disposal to make sure that the code you ship is the simplest possible architecture that works. This is how you build resilient systems for the long term.</p>

<h4 name="6316" id="6316" class="graf--h4 graf-after--figure">Conclusion</h4>

<p name="9140" id="9140" class="graf--p graf-after--h4">The most important thing to remember is that your age does not matter.</p>

<blockquote name="0a70" id="0a70" class="graf--blockquote graf-after--p">One of my sons said to me, “Impossible, Dad. Mathematicians do all their best work by the time they’re 40. And you’re over 80. It’s impossible for you to have a good idea now.”</blockquote>

<blockquote name="120a" id="120a" class="graf--blockquote graf-after--blockquote">If you’re still awake and alert mentally when you’re over 80, you’ve got the advantage that you’ve lived a long time and you’ve seen many things, and you get perspective. I’m 86 now, and it’s in the last few years that I’ve had these ideas. New ideas come along and you pick up bits here and there, and the time is ripe now, whereas it might not have been ripe five or 10 years ago.</blockquote>

<blockquote name="696e" id="696e" class="graf--blockquote graf-after--blockquote"><a href="http://www.wired.com/2016/04/mathematical-matchmaker-michael-atiyah-dreams-quantum-union/" data-href="http://www.wired.com/2016/04/mathematical-matchmaker-michael-atiyah-dreams-quantum-union/" class="markup--anchor markup--blockquote-anchor">Michael Atiyah</a>, Fields Medal and Abel Prize winner Mathematician, quoted in a Wired article.</blockquote>

<p name="ebfc" id="ebfc" class="graf--p graf-after--blockquote">As long as your heart tells you to keep on coding and building new things, you will be young, forever.</p>

<p name="5a03" id="5a03" class="graf--p graf-after--p">In 2035, exactly 19 years from now, somebody will give a talk at a software conference similar to this one, starting like this:</p>

<p name="e340" id="e340" class="graf--p graf--startsWithDoubleQuote graf-after--p">“Hi, I am 42 years old, and this is my story.”</p>

<p name="1073" id="1073" class="graf--p graf-after--p">Hopefully one of you will be giving that presentation; otherwise, it will be an AI bot. You will provide some anecdotical facts about 2016, for example that it was the year when <a href="https://en.wikipedia.org/wiki/David_Bowie" data-href="https://en.wikipedia.org/wiki/David_Bowie" class="markup--anchor markup--p-anchor">David Bowie</a>, <a href="https://en.wikipedia.org/wiki/Umberto_Eco" data-href="https://en.wikipedia.org/wiki/Umberto_Eco" class="markup--anchor markup--p-anchor">Umberto Eco</a>, <a href="https://en.m.wikipedia.org/wiki/Gato_Barbieri" data-href="https://en.m.wikipedia.org/wiki/Gato_Barbieri" class="markup--anchor markup--p-anchor" title="Gato Barbieri">Gato Barbieri</a> and <a href="https://en.wikipedia.org/wiki/Johan_Cruyff" data-href="https://en.wikipedia.org/wiki/Johan_Cruyff" class="markup--anchor markup--p-anchor">Johan Cruyff</a> passed away, or when SQL Server was made <a href="https://blogs.microsoft.com/blog/2016/03/07/announcing-sql-server-on-linux/" data-href="https://blogs.microsoft.com/blog/2016/03/07/announcing-sql-server-on-linux/" class="markup--anchor markup--p-anchor">available in Linux</a>, or when <a href="https://en.wikipedia.org/wiki/AlphaGo" data-href="https://en.wikipedia.org/wiki/AlphaGo" class="markup--anchor markup--p-anchor">Google AlphaGo</a> beat a Go champion, or when the <a href="http://panamapapers.sueddeutsche.de/en/" data-href="http://panamapapers.sueddeutsche.de/en/" class="markup--anchor markup--p-anchor" title="Panama Papers website">Panama Papers</a> and the <a href="http://185.100.87.84" data-href="http://185.100.87.84" class="markup--anchor markup--p-anchor" title="Turkish Citizenship Database">Turkish Citizenship Database</a> were leaked the same day, or when <a href="http://www.macrumors.com/2016/04/07/google-possibly-adopting-swift-for-android/" data-href="http://www.macrumors.com/2016/04/07/google-possibly-adopting-swift-for-android/" class="markup--anchor markup--p-anchor">Google considered using Swift for Android for the first time</a>, or as the last year in which people enjoyed this useless thing called privacy.</p>

<p name="cffd" id="cffd" class="graf--p graf-after--p">We will be three years away from the <a href="https://en.wikipedia.org/wiki/Year_2038_problem" data-href="https://en.wikipedia.org/wiki/Year_2038_problem" class="markup--anchor markup--p-anchor">Year 2038 Problem</a> and people will be really nervous about it.</p>

<p name="a220" id="a220" class="graf--p graf-after--p">Of course I do not know what will happen 19 years from now, but I can tell you three things that will happen for sure:</p>

<ol class="postList"><li name="dae2" id="dae2" class="graf--li graf-after--p">Somebody will ask a question in Stack Overflow about how to filter email addresses using regular expressions.</li><li name="f5a1" id="f5a1" class="graf--li graf-after--li">Somebody will release a new JavaScript framework.</li><li name="d199" id="d199" class="graf--li graf-after--li">Somebody will build something cool on top of LLVM.</li></ol>

<p name="51df" id="51df" class="graf--p graf-after--li">And maybe you will remember this talk with a smile.</p>

<p name="c24e" id="c24e" class="graf--p graf-after--p">Thank you so much for your attention.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/@akosma/being-a-developer-after-40-3c5dd112210c">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>