davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704
							<!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>Telling stories with your Git history (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://about.futurelearn.com/blog/telling-stories-with-your-git-history">

<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>
  Telling stories with your Git history (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://about.futurelearn.com/blog/telling-stories-with-your-git-history">Source originale du contenu</a></h3>
    <p><b>Seb Jacobs, a Developer at FutureLearn, discusses how we maintain a </b><b>useful Git history and outlines five principles we live by when making code commits.</b></p>

<p>Development started on the FutureLearn platform on 2 April 2013 and since that time, our codebase has gone through rapid changes, covering over 10,000 commits.</p>

<p>With a rapidly changing codebase and a growing development team, being able to communicate how and why your code evolves over time is crucial.</p>

<p>In order to manage the complex process of changing coding, we not only believe in having well factored code and tests, but also a simple Git history, which allows us to make informed decisions about future code changes.</p>

<h2>Telling stories with your Git history</h2>

<p><a href="https://github.com/Futurelearn">Our Git history</a> is a living, ever-changing, searchable record that tells the story of how and why our code is the way it is. The ability to document code effectively using Git (or another version control system) is just as important as being able to ship a feature, write clean code or readable tests.</p>

<p>Although your code should be self-documenting, it doesn&#8217;t tell the story of why the code is the way it is or how it came to be.</p>

<p>You may be used to more conventional methods of code documentation such as a Readme or a Wiki, however these forms of documentation can often become out of date.</p>

<p>The other method of code documentation that comes to mind is code comments. These can be noisy and are not always relevant. I believe you should apply the same rules you apply to code design, in terms of separating your concerns, using Git for the documentation and the code for the code. These comments also have a tendency of becoming out of date.</p>

<p>Here are five principles we live by at FutureLearn when it comes to Git:</p>

<h2><b>1. Atomic commits</b></h2>

<p>Large commits can be difficult to read, especially when they contain changes which are unrelated. I&#8217;ll admit that it is often difficult to think about how you might split up a large commit, but I find it helps to think about the purpose of each commit.</p>

<p>Think of atomic commits as the smallest amount of code changed which delivers value &#8211; whether it’s tidying up existing code or introducing a new (small) feature.</p>

<pre>commit: [REDACTED]
Date:   [REDACTED]
   Allow educators to invite users onto courses.
61 files changed, 937 insertions(+), 81 deletions(-)</pre>

<p>With this example there are a lot of changes in this one commit. On the surface it might look like all these changes are related. However, if you were to break down the changes, you would have a better sense of what&#8217;s going on, for example:</p>

<pre>a6455f8 Record when enrolment is created via an invitation.
b529f6d Allow invited users to enrol on courses.
b5bb6e4 Allow invited users to see the course description page.
c829cbc Send enrolment invitation emails in batches of 1000.
5feaccf Allow educators to invite users onto courses.</pre>

<p>Now that this example has been split up, it starts to become more useful; not only is each commit smaller, it also gives you a better story of what has happened.</p>

<h2><b>2. Useful commit messages</b></h2>

<p>Writing commit messages can be difficult, but it helps to have a purpose in mind. We’re already breaking the changes down into atomic commits, meaning we should have a good idea of the value of each commit.</p>

<p>If there&#8217;s one thing to remember, it is to explain why you&#8217;ve made the change in the first place. This is the perfect opportunity to reflect on what you&#8217;re doing and to provide context &#8211; whether it&#8217;s to satisfy a user requirement, to fix a bug or to make another change easier to make in the future.</p>

<p>I find it helps to look at the commit from the perspective of another developer. What questions might they be asking when looking at your code changes? What might not be immediately obvious?</p>

<p>In terms of good practice, the following template is a good start. However, bear in mind that every commit is different.</p>

<pre>Short one line title.

An explanation of the problem, providing context (this may be as simple
as a reference to the user story).

Longer description of what the change does.

An explanation of why the change is being made.

Perhaps a discussion of alternatives that were considered.</pre>

<p>The first line should be used to explain the value of the changes, rather than focussing on the implementation details. By keeping this concise, we allow the reader to easily scan over the commit and find the code changes they are interested in.</p>

<p>The rest of the Git commit message depends on the change, but it’s always useful to explain what you’ve changed and why you’ve changed it.</p>

<p>I find it also helps in some cases, to provide further context such as explaining alternative solutions you&#8217;ve ruled out or providing external references.</p>

<pre>Correct the colour of FAQ link in course notice footer

PT: https://www.pivotaltracker.com/story/show/84753832

In some email clients the colour of the FAQ link in the course notice
footer was being displayed as blue instead of white. The examples given
in PT are all different versions of Outlook. Outlook won't implement
CSS changes that include `!important` inline [1].

Therefore, since we were using it to define the colour of that link,
Outlook wasn't applying that style and thus simply set its default
style(blue, like in most browsers).

Removing that `!important` should fix the problem.

[1] https://www.campaignmonitor.com/blog/post/3143/outlook-2007-and-
the-inline-important-declaration/</pre>

<p>This example has a clear headline, it outlines the problem, the developer’s intent and also provides context around the change.</p>

<h2><b>3. Revise history before sharing</b></h2>

<p>When developing your code, you are bound to change direction or even make mistakes (most commonly introducing typos or bugs).</p>

<pre>324d079 Fix typo in enrolment flash message
3a85f77 Only display enrol button for users who can enrol
4cc4778 Allow users to enrol on courses</pre>

<p>In this example, the developer has introduced a typo in their first commit, which they have fixed in a later commit.</p>

<p>Before you share your commit history, it&#8217;s important to think about what is useful information for someone else to read. You shouldn’t think of your Git history as a &#8220;truthful&#8221; log of what you worked on step-by-step. Just as we refactor code, we should refactor our commits before sharing them with others.</p>

<p>The power of Git makes it simple to re-order, reword and refactor your commits until they tell the clearest story possible.</p>

<p>Git’s interactive rebasing functionality allows us to tell a clearer story:</p>

<pre>$ git rebase --interactive

3a85f77 Only display enrol button for users who can enrol
773e345 Allow users to enrol on courses</pre>

<p>By reducing the amount of noise in your commit history, you can save you and your team time.</p>

<p>If you&#8217;re struggling with this process, I find that using Pull Requests is a great way to collaborate on shaping the commit history of your feature branch.</p>

<h2><b>4. Single purpose branches</b></h2>

<p>Long-living feature branches can often be difficult to keep up to date with master. I find that it is important to think about the purpose and scope of your feature branch.</p>

<p>Although you might be working on a single feature (user story), this doesn&#8217;t necessarily mean that you can&#8217;t deliver value in stages.</p>

<pre>5ce95fb Notify educators when an invitation has been accepted.
5ce95fb Refactor specs around enrolment invitations.
ee95245 Extend enrolment invitation to educators.
cfb2fb4 Tidy up whitespace in enrolment invitations spec.</pre>

<p>Like with this example, you may find that you are having to change/refactor key areas of the codebase in order to implement the feature you are developing. These changes can often provide a clear benefit that isn’t directly related to the feature branch, and can be landed on master separately (and earlier).</p>

<pre>$ git cherry-pick cfb2fb4 5ce95fb

* 0564508 Merge branch 'educator-enrolment-invitations'
  |\
  | _ 5ce95fb Notify educators when an invitation has been accepted.
  | _ ee95245 Extend enrolment invitation to educators.
  | |
  |/
* 5ce95fb Refactor specs around enrolment invitations.
* cfb2fb4 Tidy up whitespace in enrolment invitations spec.</pre>

<p><p>By splitting up your feature branches, you not only reduce the pain of merging each branch, you also deliver value sooner and make your Git history more readable.</p>
    <h2><b>5. Keep your history linear</b></h2>
<p>Often, merging changes into master can result in your history becoming tangled and difficult to read.</p>
<pre><em>   ce91a05 Merge branch 'reprint-statements'
|\
| * ae43ad0 Disable reprint link for refunded purchases.
| * 0b1abb0 Allow admins to flag purchases for re-printing.
* | 35d0357 Put dates formats in the pattern library
* | 275206c Merge branch 'fulfilment-attempt'
  |\ \
  | _ | 7aae45b Populate <code>fulfilled?</code> for existing purchases.
  | _ | 8e461b1 Display purchase fulfilment attempts to admins.
* | | 1adc0a9 Reduce padding around the course run date
  | |/
  |/|</pre>
  <p>This becomes even more of an issue when you have several feature branches being developed in parallel.</p>
    <pre></em>   ce91a05 Merge branch 'reprint-statements'
|\
| * ae43ad0 Disable reprint link for refunded purchases.
| * 0b1abb0 Allow admins to flag purchases for re-printing.
|/
* 35d0357 Put dates formats in the pattern library
* 275206c Merge branch 'fulfilment-attempt'
  |\
  | _ 7aae45b Populate <code>fulfilled?</code> for existing purchases.
  | _ 8e461b1 Display purchase fulfilment attempts to admins.
  | * 44cbfd0 Introduce Fulfilment attempts
  |/
* 1adc0a9 Reduce padding around the course run date</pre>
  <p>When it comes to merging, we try to preserve our merges commits and to rebase our feature branches before merging.</p>
    <pre>$ git checkout reprint-statements
$ git rebase master
$ git checkout master
$ git merge --no-ff reprint-statements</pre>
    <p>This allows us to group related commits together while keeping our merges clean, making it a lot easier to identify when a particular change was introduced.</p>
<p>We also find it often helps to commit smaller changes directly onto master.</p>
<h2><b>Summary</b></h2>
<p>If you spend as much time ensuring your commits are well factored as you do refactoring your code and tests, it will save you and your team time and pain in the future.</p>
<p><strong>How do you use Git? What sort of problems do you think it solves? Let us know in the comments below.</strong></p>
<p><strong>Want to know more about how we use Git? <a href="https://skillsmatter.com/skillscasts/6128-telling-stories-through-your-commits">Watch a talk from our CTO</a>, Joel Chippindale.</strong></p>
<p><strong>You might also find the following links useful: <a href="http://pcottle.github.io/learnGitBranching">LearnGitBranching</a>; <a href="http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html">A Note About Git Commit Messages</a>; <a href="http://think-like-a-git.net/">Think Like a Git</a>; and <a href="https://github.com/gazler/githug">GitHug</a>.</strong></p></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://about.futurelearn.com/blog/telling-stories-with-your-git-history">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>