davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
							<!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>First Timers Only (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/@kentcdodds/first-timers-only-78281ea47455">

<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>
  First Timers Only (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/@kentcdodds/first-timers-only-78281ea47455">Source originale du contenu</a></h3>
    <p name="5e84" id="5e84" class="graf graf--p graf-after--figure">I’ve started doing something recently that’s been really rewarding. I’m the maintainer of <a href="https://github.com/formly-js/angular-formly" data-href="https://github.com/formly-js/angular-formly" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">angular-formly</a> a fairly popular library for forms with <a href="https://angularjs.org/" data-href="https://angularjs.org/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">AngularJS</a>. I’ve committed a lot of code and the library has <a href="https://github.com/formly-js/angular-formly/graphs/contributors" data-href="https://github.com/formly-js/angular-formly/graphs/contributors" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">33 contributors</a> right now. For at least five of these contributors, it was their first time contributing to an open source library.</p>

<p name="6e0f" id="6e0f" class="graf graf--p graf-after--p">I’ve tried really hard to make it easy to contribute to angular-formly. I’ve done all of the common things an open source project maintainer does and some less common things…</p>

<ul class="postList"><li name="6882" id="6882" class="graf graf--li graf-after--p">Set up the (often ignored) <a href="https://github.com/formly-js/angular-formly/blob/master/CONTRIBUTING.md" data-href="https://github.com/formly-js/angular-formly/blob/master/CONTRIBUTING.md" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">CONTRIBUTING.md</a></li><li name="fb79" id="fb79" class="graf graf--li graf-after--li">Try hard to organize the code and comment where necessary</li><li name="34af" id="34af" class="graf graf--li graf-after--li">Add an <a href="https://github.com/formly-js/angular-formly/issues?utf8=%E2%9C%93&amp;q=label%3Aup-for-grabs+" data-href="https://github.com/formly-js/angular-formly/issues?utf8=%E2%9C%93&amp;q=label%3Aup-for-grabs+" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">up-for-grabs</a> label (and angular-formly is now on <a href="http://up-for-grabs.net/#/" data-href="http://up-for-grabs.net/#/" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">up-for-grabs.net</a>)</li><li name="aa06" id="aa06" class="graf graf--li graf-after--li">Add a githook (using <a href="http://npm.im/ghooks" data-href="http://npm.im/ghooks" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">ghooks</a>) that runs the tests and checks coding standards with <a href="http://eslint.org/" data-href="http://eslint.org/" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">eslint</a> so people don’t have the frustration of going back and forth on the PR.</li><li name="2ebe" id="2ebe" class="graf graf--li graf-after--li">Use <a href="https://docs.npmjs.com/misc/scripts" data-href="https://docs.npmjs.com/misc/scripts" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">npm scripts</a> so people don’t have to understand or globally install any build tools</li></ul>

<p name="4a03" id="4a03" class="graf graf--p graf-after--li graf--trailing">I’ve even recorded <a href="https://www.youtube.com/watch?v=QOchwBm9W-g&amp;index=5&amp;list=PLV5CVI1eNcJi7lVVIuNyRhEuck1Z007BH" data-href="https://www.youtube.com/watch?v=QOchwBm9W-g&amp;index=5&amp;list=PLV5CVI1eNcJi7lVVIuNyRhEuck1Z007BH" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">screencasts</a> to demonstrate how to get things setup. But what I didn’t realize was that there was still something missing…</p>

<p></div></div></section><section name="7700" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="bed7" id="bed7" class="graf graf--p graf--leading">A few months back, angular-formly got a <a href="https://github.com/formly-js/angular-formly/pull/211" data-href="https://github.com/formly-js/angular-formly/pull/211" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">pull request</a> from <a href="https://github.com/koenweyn" data-href="https://github.com/koenweyn" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Koen Weyn</a> who wanted to fix some IE8 compatibility issues with the project. He submitted a good PR (<a href="https://help.github.com/articles/using-pull-requests/" data-href="https://help.github.com/articles/using-pull-requests/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">pull request</a>), we iterated on it a little bit, and it got merged. He mentioned to me that it was his first ever GitHub pull request. That was a neat experience. It was cool to be a part of someone’s first ever open source code contribution.</p><p name="2e6e" id="2e6e" class="graf graf--p graf-after--p">It wasn’t until a few months later that I had an idea. While developing <a href="https://github.com/formly-js/angular-formly/issues/343" data-href="https://github.com/formly-js/angular-formly/issues/343" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">a new feature</a> doing TDD (<a href="https://wikipedia.org/wiki/Test-driven_development" data-href="https://wikipedia.org/wiki/Test-driven_development" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Test Driven Development</a>) all the way (and loving it), I finished the tests and was about ready to start on the implementation. Then I had a thought: “Why don’t I let someone else work on this? I know exactly what I’d do. I could do some hand-holding and help someone contribute to open source for the first time.”</p><p name="d442" id="d442" class="graf graf--p graf-after--p">Small tangent… I’m a happy father of two. When teaching or playing with my kids, sometimes I have to ask my daughter to give her brother a chance to answer a question. Many people are eager to please and help out. So when I throw out a soft-ball to my son, if I don’t ask my daughter to let her little brother answer, she’ll spout out the answer and he’ll have a harder time learning/feeling the satisfaction of answering. I think that sometimes we adults can behave the same way.</p><p name="e4ff" id="e4ff" class="graf graf--p graf-after--p">So I decided to commit the tests, but skipped (so the build wouldn’t fail) (using <code>describe.skip</code> from <a href="http://mochajs.org/" data-href="http://mochajs.org/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Mocha</a>), then I pushed them up and added <a href="https://github.com/formly-js/angular-formly/issues/343#issuecomment-111495740" data-href="https://github.com/formly-js/angular-formly/issues/343#issuecomment-111495740" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">this comment</a> to the issue:</p><figure name="9fec" id="9fec" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 555px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 79.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*wxgfHTwncBrevEKSy-NGKA.png" data-width="793" data-height="629" data-action="zoom" data-action-value="1*wxgfHTwncBrevEKSy-NGKA.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*wxgfHTwncBrevEKSy-NGKA.png?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*wxgfHTwncBrevEKSy-NGKA.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*wxgfHTwncBrevEKSy-NGKA.png"></noscript></div></div></figure><p name="eabf" id="eabf" class="graf graf--p graf-after--figure">Make it is easy as possible. Say exactly where the code needs to go and recommend a good approach.</p><p name="5b49" id="5b49" data-align="center" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">The hard part of getting into open source for the first time isn’t the implementation of a feature, but figuring out how to actually contribute code.</em></p><p name="9ec5" id="9ec5" class="graf graf--p graf-after--p">So I explain exactly what to do in the issue, and then I blasted it out on <a href="https://twitter.com/kentcdodds/status/609354862074052608" data-href="https://twitter.com/kentcdodds/status/609354862074052608" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Twitter</a>, <a href="https://gitter.im/formly-js/angular-formly" data-href="https://gitter.im/formly-js/angular-formly" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Gitter</a>, and <a href="http://angularbuddies.com/" data-href="http://angularbuddies.com/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Slack</a>:</p><figure name="31ec" id="31ec" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer"><IFRAME width="700" height="250" src="/media/3159ec0b422894ca5ef604a6ab4e7e07?postId=78281ea47455" data-media-id="3159ec0b422894ca5ef604a6ab4e7e07" allowfullscreen frameborder="0"></IFRAME></div></div></figure><p name="2220" id="2220" class="graf graf--p graf-after--figure">It wasn’t long before I had several people reach out to me on all three mediums asking if they could take a swing at it. Finally with <a href="https://github.com/formly-js/angular-formly/pull/351" data-href="https://github.com/formly-js/angular-formly/pull/351" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">this PR</a>, <a href="https://github.com/stevebluck" data-href="https://github.com/stevebluck" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Stephen Bluck</a> took his first step into the open source community.</p><p name="e7ea" id="e7ea" class="graf graf--p graf-after--p graf--trailing">It felt awesome! So I looked for opportunities to do this some more. I’ve had the chance to do this <a href="https://github.com/formly-js/angular-formly/issues/358#issuecomment-115251096" data-href="https://github.com/formly-js/angular-formly/issues/358#issuecomment-115251096" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">three</a> <a href="https://github.com/formly-js/angular-formly/issues/398#issuecomment-125195897" data-href="https://github.com/formly-js/angular-formly/issues/398#issuecomment-125195897" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">more</a> <a href="https://github.com/formly-js/angular-formly/issues/410#issuecomment-127227984" data-href="https://github.com/formly-js/angular-formly/issues/410#issuecomment-127227984" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">times</a> and it’s been rewarding for both me and the contributor each time. The project now has a <a href="https://github.com/formly-js/angular-formly/issues?utf8=%E2%9C%93&amp;q=label%3Afirst-timers-only+" data-href="https://github.com/formly-js/angular-formly/issues?utf8=%E2%9C%93&amp;q=label%3Afirst-timers-only+" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">first-timers-only</a> label for this purpose. Shoutouts go to <a href="https://github.com/douglas-mason" data-href="https://github.com/douglas-mason" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Douglas Mason</a>, <a href="https://github.com/DevanB" data-href="https://github.com/DevanB" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Devan Beitel</a>, and <a href="https://github.com/bmacheski" data-href="https://github.com/bmacheski" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Brian Macheski</a> for taking up the challenge. For those of you who haven’t had a chance yet, don’t worry, there’s definitely more to come…</p></div></div></section><section name="6e5c" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="244c" id="244c" class="graf graf--p graf--leading">Now, could I have finished it quicker and moved on my way if I’d just done it myself? Of course. But that’s not what it’s all about as an open source contributor. It’s fun delivering good software that helps other people, but also realize that there are tons of people out there who just don’t know where to get started.</p><p name="902d" id="902d" class="graf graf--p graf-after--p">Some of you may be asking yourself, “what if I (and other lib users) don’t want to wait days for the feature?” From my experience, people are eager to try it out. At least one PR (sometimes several) is submitted, iterated on, and merged within a matter of a few hours.</p><p name="3261" id="3261" class="graf graf--p graf-after--p graf--trailing">I’ve thought back on <a href="https://github.com/playframework/playframework/pull/616" data-href="https://github.com/playframework/playframework/pull/616" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">my first pull request</a>. It was nothing spectacular. It was really small. I learned how to use git and GitHub. It gave me an opportunity to figure out what contributing feels like. That’s a rewarding feeling. As open source project maintainers, we are empowered with the ability to help newcomers feel this for the first time and contribute back. Let’s do it!</p></div></div></section><section name="268f" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="e5fe" id="e5fe" class="graf graf--h3 graf--leading">A small plea</h3><p name="d4de" id="d4de" class="graf graf--p graf-after--h3">If you are an open source project maintainer, give this a shot. Add the label <strong class="markup--strong markup--p-strong">first-timers-only </strong>to your project so people can find it <a href="https://github.com/search?utf8=%E2%9C%93&amp;q=label%3Afirst-timers-only+is%3Aopen&amp;type=Issues&amp;ref=searchresults" data-href="https://github.com/search?utf8=%E2%9C%93&amp;q=label%3Afirst-timers-only+is%3Aopen&amp;type=Issues&amp;ref=searchresults" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">here</a>. You might also consider referencing <a href="http://makeapullrequest.com" data-href="http://makeapullrequest.com" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">makeapullrequest.com</a>. I think that we can be more friendly to newcomers in the open source community. You never know, you may find a new main contributor to the project or even a new life-long friend. Either way, the more people we get into open source the better. And by being open like this, we’re helping “<a href="http://www.hanselman.com/blog/BringKindnessBackToOpenSource.aspx" data-href="http://www.hanselman.com/blog/BringKindnessBackToOpenSource.aspx" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Bring Kindness back to Open Source</a>.”</p></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/@kentcdodds/first-timers-only-78281ea47455">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>