davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793
							<!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 through your commits (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://blog.mocoso.co.uk/talks/2015/01/12/telling-stories-through-your-commits/">

<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 through your commits (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://blog.mocoso.co.uk/talks/2015/01/12/telling-stories-through-your-commits/">Source originale du contenu</a></h3>
    <p>This is a short talk that I have given on a variety of occasions about
how you can use your source control commit messages to keep track of the
intent of your code changes and make it easier to keep changing your
project in future.</p>

<p>The transcript below is from the version of the talk that I gave at the
<a href="http://2016.theleaddeveloper.com/talks#joel-chippindale">Lead Developer
Conference</a> in
London in June 2016.</p>

<h2 id="transcript">Transcript</h2>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.001.png" alt="opening slide"/></p>

<p class="transcript">I am Joel Chippindale and I have been the CTO at FutureLearn for the
last few years and I am here to talk to you about telling stories
through your commits.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.002.png" alt="opening slide"/></p>

<p class="transcript">If we have a successful software development project then our key
challenge, as lead developers, is to manage complexity because projects
can get very complex very quickly even within quite small teams.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.003.png" alt="opening slide"/></p>

<p class="transcript">As lead developers we, and our teams, spend a lot of time thinking about
this. We think about the naming of methods and functions and variables
and…</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.004.png" alt="opening slide"/></p>

<p class="transcript">we think about our code design.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.005.png" alt="opening slide"/></p>

<p class="transcript">We probably spend a lot of time refactoring code. Taking code that works
and making it simpler to understand.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.006.png" alt="opening slide"/></p>

<p class="transcript">And probably most of your teams are spending a good proportion of their
time writing automated tests and that allows your teams to have the
confidence to keep changing the software but also helps to document what
the code is supposed to do.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.007.png" alt="opening slide"/></p>

<p class="transcript">All these tools and techniques help communicate the intent of our
software and if we want to keep changing it we need to understand this
intent.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.008.png" alt="opening slide"/></p>

<p class="transcript">There is one tool that we under utilise in our communities for
communicating our intent and that is our version control system. All the
examples in this talk use git but the principles apply to whatever
system you are using.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.009.png" alt="opening slide"/></p>

<p class="transcript">Our commit history has some very special properties which make it
particularly useful for documenting intent.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.010.png" alt="opening slide"/></p>

<p class="transcript">It is kept forever.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.011.png" alt="opening slide"/></p>

<p class="transcript">It is always up to date and this almost certainly not true of most of
the documentation you have, perhaps in a wiki or even in code comments.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.012.png" alt="opening slide"/></p>

<p class="transcript">And, this may come as a surprise to some of you, it is searchable. Git
doesn’t make this obvious so here are some commands that you may find
useful.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.013.png" alt="opening slide"/></p>

<p class="transcript">You can search all the contents of all your commit messages.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.014.png" alt="opening slide"/></p>

<p class="transcript">You can search all the contents of all the code changes in your commits.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.015.png" alt="opening slide"/></p>

<p class="transcript">And you can find out where each line of code was last changed…</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.016.png" alt="opening slide"/></p>

<p class="transcript">…giving you output like this.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.017.png" alt="opening slide"/></p>

<p class="transcript">It is these properties that allow Mislav Marahonić to say that, “Every
line of code is always documented”. If every line of code is documented
how do we make sure that this documentation tells a useful story to us
and our teams about that line of code?</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.018.png" alt="opening slide"/></p>

<p class="transcript">I will share 3 principles with that will help you with this.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.019.png" alt="opening slide"/></p>

<p class="transcript">Firstly and most importantly make atomic commits. Make your commits
about a single change to your code base.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.020.png" alt="opening slide"/></p>

<p class="transcript">To illustrate why this is important I am going to share a git horror
story with you. This is from a project which I am responsible for. Bug
fixes? Which ones? How many? We have no idea. And a Wordpress update.
Those of you who are laughing are probably doing so because there are
175 thousand lines of code changes in this commit. Reverse engineering
this commit to find out what happened is very hard.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.021.png" alt="opening slide"/></p>

<p class="transcript">Let us imagine an alternate history where this commit had been split
into atomic commits.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.022.png" alt="opening slide"/></p>

<p class="transcript">Here we might have a Wordpress update commit containing the vast
majority of those 175k lines of changes and then 8 separate commits each
one about a single bug which is easy to understand.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.023.png" alt="opening slide"/></p>

<p class="transcript">When I talk about this, I am often asked how big an atomic commit should
be? In our industry we generally make our commits too big so it is worth
thinking about a minimum viable commit. What’s the smallest useful
change that you can make to your codebase?</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.024.png" alt="opening slide"/></p>

<p class="transcript">Another useful rule of thumb is to avoid needing ‘and’ in your commit
messages. If you did ‘A’ and ‘B’ maybe they are two separate changes.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.025.png" alt="opening slide"/></p>

<p class="transcript">Second principle: write good commit messages.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.026.png" alt="opening slide"/></p>

<p class="transcript">That’s very easy for me to say so I will take you through a template to
give you more of an idea of what I mean.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.027.png" alt="opening slide"/></p>

<p class="transcript">Short one line title because you view your commits in lists and a longer
description if you need it.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.028.png" alt="opening slide"/></p>

<p class="transcript">An explanation of why the change is being made. If people want to know
how they can change this in future then they need to know what the
intention of this change was.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.029.png" alt="opening slide"/></p>

<p class="transcript">Lastly, when you make this commit, you know more about why you are
making this change and how you are fixing or improving this thing than
anyone else ever will and so it can be useful to outline some of the
context and alternative approaches considered.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.030.png" alt="opening slide"/></p>

<p class="transcript">To make this more concrete, here is an example of a commit message from
one of the other projects I am responsible for. You can see the one line
title, you can see a link to our bug tracking system, you can see an
explanation of the quirks of Outlook and why we are making this
particular change and a link to a blog post which explains more about
the problem. This is gold dust for people going back and trying to work
out why the CSS in our project is in the particular state it is in.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.031.png" alt="opening slide"/></p>

<p class="transcript">Third principle: revise your development history before sharing. We all
know that once commits are on master, or once they are deployed, you
don’t want to change them out from underneath people. But, in your
development branches, it can be much more useful if they tell a story
about what you intended to do instead of a blow by blow account of all
the missteps you took along the way.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.032.png" alt="opening slide"/></p>

<p class="transcript">There’s a tool for this, git rebase interactive…</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.033.png" alt="opening slide"/></p>

<p class="transcript">…and this allows you to remove, reorder, edit, merge and split
commits. Essentially with this tool your development branches are
infinitely malleable.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.034.png" alt="opening slide"/></p>

<p class="transcript">To give you a quick example. Imagine I have added Foo and made a commit,
removed Bar and made a commit and then I have spotted a typo in the
first commit so I make a new commit to fix the typo. That’s just noise
for other people. No one cares about the fact that I didn’t get the
first commit right first time.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.035.png" alt="opening slide"/></p>

<p class="transcript">We can use git rebase interactive to merge the first and third commits
and tell a simpler story about what we are trying to do.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.036.png" alt="opening slide"/></p>

<p class="transcript">So three principles. 1. Make atomic commits. 2. Write good commit
messages and 3. Revise your development history before sharing</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.037.png" alt="opening slide"/></p>

<p class="transcript">This is a quote from someone who joined our team recently which I hope
will help persuade you of the benefits of taking this approach.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.038.png" alt="opening slide"/></p>

<p class="transcript">Perhaps you are sitting here, as lead developers, thinking this sounds
like a really good idea. How am I going to take this back to my team on
Monday? How am I going to persuade them to adopt these practices that
seem like they have pay off months or even years down the line perhaps
for other developers on the team?</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.039.png" alt="opening slide"/></p>

<p class="transcript">Won’t it take a huge amount of discipline?</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.040.png" alt="opening slide"/></p>

<p class="transcript">I think the key is that all these practices make things simpler for
individual developers in your team right now.</p>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.041.png" alt="opening slide"/></p>

<div class="transcript">
  <p>Let’s go back over the principles.</p>

  <p><strong>Make atomic commits</strong></p>

  <p>This is about making sure that you are making one change at a time to
your code. This makes it simpler to work on.</p>

  <p><strong>Write good commit messages</strong></p>

  <p>If you can write down what you are trying to do in the particular change
that you are making then you are half way there already and it is a
really valuable discipline for you and your teams to get into.</p>

  <p><strong>Revise your history before sharing</strong></p>

  <p>If your development branch tells a good story about what you did then it
is easier for you to understand what you did and whether it solves the
problem you had and also it is easier to share with others, perhaps in a
pull request, to get feedback. All these practices making things easier
now for your teams.</p>
</div>

<p class="slide"><img src="https://blog.mocoso.co.uk/assets/telling-stories-through-your-commits/slides.042.png" alt="opening slide"/></p>

<p class="transcript">Thank you for your time.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://blog.mocoso.co.uk/talks/2015/01/12/telling-stories-through-your-commits/">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>