A place to cache linked articles (think custom and personal wayback machine)
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

4 роки тому
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>NewCrafts 2018 (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://ronanamicel.tumblr.com/post/174431390297/newcrafts-2018">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. NewCrafts 2018 (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://ronanamicel.tumblr.com/post/174431390297/newcrafts-2018">Source originale du contenu</a></h3>
  445. <div class="text"><p>Jeudi 17 et vendredi 18 mai 2018 avait lieu à Paris la conférence NewCrafts, et j'y ai participé pour la 2e année consécutive.</p><p>C'est une conférence en anglais, sur le thème du développement logiciel. L'organisation est impeccable, les intervenant(e)s varié(e)s, pointu(e)s, et inspirant(e)s.</p><p>Il y a plusieurs <em>tracks</em> en parallèle, plus des ateliers, et aussi les discussions dans les couloirs, et c'est donc parfois difficile de choisir vers où suivre ses pieds.</p><p>La première journée, j'ai assisté à pas mal de présentations, alors que la deuxième j'avais plutôt envie de pratiquer avec du code, et j'ai donc privilégié des ateliers. Et pendant ces deux jours, les différents moments de pause ont été l'occasion de nombreuses discussions enrichissantes avec les autres participants !</p><p>Voici quelques notes sur des choses qui m'ont intéressé, surpris, amusé, ou encore questionné pendant ces deux jours.</p><h3>Fighting the Invisible Enemy (Paul Rayner)</h3><p>Ce qui va à l'encontre du <em>flow</em> dans nos processus de développement de produits, ce sont les queues invisibles qui se forment : par exemple, une fonctionnalité est développée mais en attente d'être testée ou déployée.</p><p>Les queues sont des indicateurs avancés (<em>leading indicators</em>), contrairement au débit (<em>throughput</em>) ou au temps de cycle (<em>cycle time</em>). Il est donc important de prendre conscience de ces queues, de les rendre visibles, et surtout d'agir rapidement et de manière décisive quand elles commencent à grossir, avant que les conséquences ne se manifestent de manière plus problématique au niveau de l'ensemble du système.</p><p>Paul Rayner a utilisé des modèles de traffic routier (<a href="https://t.umblr.com/redirect?z=http%3A%2F%2Ftraffic-simulation.de&amp;t=NTg0NTUxZWI5ZjU1MGQ2YjJjNzhhZWMyZWMyOGYxY2RmMDE3MGUzMSw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">http://traffic-simulation.de</a>) pour illustrer de manière très parlante les comportements non linéaires qui apparaissent à la moindre perturbation dès lors que le système fonctionne à un niveau de capacité élevé.</p><p>Il nous a aussi montré un outil sur lequel il travaille, et qui s'appelle tout simplement <a href="https://t.umblr.com/redirect?z=http%3A%2F%2Fflow.virtualgenius.com&amp;t=MDBkZWVjMDU4MTJmM2I0N2Q4MDA1NTdjNTM5ZWUwZTBhYzhhNDY5Ziw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">Flow</a>. Celui-ci extrait les données temporelles depuis Pivotal Tracker / Jira / etc. pour visualiser le temps passé par chaque ticket dans chaque étape, et mieux identifier les temps d'attente.</p><p>Cette approche visuelle m'a fait penser à un autre outil du <em>Lean</em>, le diagramme de flux cumulé (<em>cumulative flow diagram</em>).</p><h3>Feature Branching is Evil (Thierry de Pauw)</h3><p>Thierry nous raconte son expérience en tant que consultant avec deux projets assez différents.</p><p>La première équipe était peu expérimentée, et n'utilisait auparavant aucun système de gestion de versions. Pour rester simple, il les a aidé à adopter Subversion : seulement deux gestes à apprendre (<em>checkout</em>, et <em>commit</em>), et pas de branches. Il avait pensé ça comme une première étape, mais en fait ça marchait pas mal.</p><p>La deuxième équipe était constituée de développeurs expérimentés, qui avait choisi d'utiliser git et le mode de fonctionnement “git flow”. Lorsqu'il leur a suggéré d'arrêter les branches à longue durée de vie, il s'est heurté à une forte incompréhension :</p><ul><li>mais les branches nous permettent de travailler chacun de notre côté sans être perturbé par les changements des autres !</li><li>mais les branches nous permettent de jeter un refactoring s'il ne va nulle part !</li><li>mais les branches nous permettent de contrôler la qualité de ce qu'on livre (via une revue de code pre-merge)</li><li>mais les branches nous permettent de contrôler quelles fonctionnalités on livre (on ne merge que quand on veut livrer)</li></ul><p>Dans sa présentation, Thierry a abordé :</p><ul><li>les inconvénients des branches à longue durée de vie :
  446. <ul><li>elles retardent le feedback,</li><li>elles retardent l'intégration,</li><li>elles cachent le travail du reste de l'équipe et réduisent la communication,</li><li>elles découragent le refactoring,</li><li>elles créent du stock (au sens du Lean),</li><li>elles augmentent le risque,</li><li>elles créent du travail supplémentaire (brancher, rebaser, merger…),</li></ul></li><li>les avantages du <em>trunk-based development</em> :
  447. <ul><li>commits plus fréquents sur master → builds plus fréquents → déploiements plus fréquents → time-to-market réduit → expérimentation plus facile</li><li>builds plus fréquents → les problèmes sont détectés plus tôt → la qualité est améliorée</li></ul></li><li>comment faire du <em>trunk-based development</em> :
  448. <ul><li>l'application est toujours prête à être livrée sur la branche principale,</li><li>découper les gros changements en petits morceaux incrémentaux,</li><li>garder cachées les nouvelles fonctionnalités non terminées,</li><li>utiliser la technique “<em>branch by abstraction</em>” pour les gros refactorings,</li><li>utiliser les <em>feature toggles</em> (mais en dernier recours)</li></ul></li><li>comment remplacer la revue de code ?
  449. <ul><li>le <em>pair programming</em> est une solution possible (revue de code continue <em>pre-commit</em>)</li><li>on peut aussi faire une revue de code <em>post-commit</em><ul><li><em>pre-merge</em> : <em>pull requests</em> fréquentes sur des branches à durée de vie courte</li><li><em>post-merge</em> : revue de code de tous les commits poussés sur <em>master</em></li></ul></li></ul></li><li>au delà des raisons invoquées explicitement, quels sont les peurs qui font qu'une équipe peut résister à l'adoption de ce modèle ?
  450. <ul><li>les développeurs ne savent pas développer par petits incréments → c'est une compétence encore trop rare, qui doit s'acquérir</li><li>la base de code est trop couplée, et manque de tests → c'est difficile de changer quoi que ce soit sans craindre de casser quelque chose</li><li>les builds sont trop lents → 🐢</li></ul></li></ul><h3>The Origins of Opera and the Future of Programming (Jessica Kerr)</h3><p>Je regrette de ne pas avoir pu voir cette présentation. En attendant la vidéo, un article de blog est disponible qui en reprend la trame : <a href="https://t.umblr.com/redirect?z=https%3A%2F%2Fthe-composition.com%2Fthe-origins-of-opera-and-the-future-of-programming-bcdaf8fbe960&amp;t=MDA0N2M1ODQzMTVmODIzZGViY2VjNTNkZGNkMjJmYmM2OTIwMWZkNSw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">https://the-composition.com/the-origins-of-opera-and-the-future-of-programming-bcdaf8fbe960</a></p><h3>Endangered Species: Senior Craftsmen (Cyrille Dupuydauby)</h3><p>Le goulot d'étranglement dans nos métiers, c'est l'apprentissage. Il n'y a pas beaucoup de développeurs qui ont 10 ans d'expérience, et encore moins qui en ont 20. Doit-on compter sur eux pour enseigner le métier aux nouveaux ? Seule une petite partie d'entre eux a envie de devenir prof, le reste préfère sans doute programmer. C'est tous ensemble, en tant que communauté, que nous devons être une organisation apprenante. Chacun, quel que soit le stade où il en est, peut aider les autres.</p><p>Slides : <a href="https://t.umblr.com/redirect?z=https%3A%2F%2Fnoti.st%2Fdupdob%2FgX1kor%2Fendangered-species-senior-crafters&amp;t=Yjg0ZDRhZTU2NmU2NmNjOWQ4YTliNWUzNmE4NGM4ZTA2NDAzODE1MSw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">https://noti.st/dupdob/gX1kor/endangered-species-senior-crafters</a></p><h3>How to take smart notes (Sönke Ahrens)</h3><p>Les conseils pour prendre des notes sont généralement de les séparer (un cahier ou carnet par sujet / matière), de les relire dès que possible… Ce sont de mauvais conseils.</p><p>Les conseils sur comment écrire un article, un rapport, un mémoire, sont très linéaires : trouvez un sujet, puis faites des recherches, puis lisez et prenez des notes, puis faites un plan, puis rédigez… L'écriture y est une tâche parmi d'autres, et la vision est très top-down. Une meilleure approche est possible !</p><p>Pour Richard Feynman, la pensée est indissociable de l'écriture. Les notes ne sont pas une forme de stockage du résultat de notre pensée, elles sont notre pensée elle-même. L'esprit a besoin de cet échafaudage extérieur qu'est l'écriture.</p><p>Pendant sa carrière académique, Niklas Luhmann a écrit environ 600 publications, dont plus de 60 livres, sur des sujets comme la sociologie, le droit, la politique, les médias, la philosophie, l'art, l'amour… Son secret ? Sa boîte à notes (Zettelkasten).</p><p>90 000 notes accumulées. Ça semble beaucoup, mais ça fait seulement 6 par jour.</p><p>Son système est simple mais terriblement efficace :</p><ul><li>une idée par note ; une note sert à développer une idée</li><li>chaque note a un identifiant noté en haut à gauche : 1, 2, 3… ( une note peut renvoyer à une autre par son identifiant noté à l'encre rouge dans le texte)</li><li>il n'y a pas de classement hiérarchique, l'organisation est émergente : une note liée à une autre peut être insérée derrière elle dans la boîte, et recevoir un identifiant avec une branche (par exemple : 1a1) ; cela permet de retrouver des notes pertinentes à proximité, et de dérouler ainsi le fil plus tard</li></ul><p>En insérant la rédaction de ces notes à ses activités quotidiennes de lecture, séminaires, etc. l'écriture n'est plus quelque chose de séparé que l'on fera juste avant la deadline, mais devient un travail progressif et incrémental. Les questions à creuser et les catégories émergent. Les idées s'enrichissent les unes les autres. Penser, relier et comprendre deviennent des actions concrètes.</p><p>Pour en savoir plus : <a href="https://t.umblr.com/redirect?z=http%3A%2F%2Ftakesmartnotes.com&amp;t=ODY3NTQxNDk4ZjliMjBhZmNhNDdhZTE4MzViMTFiMDU1NjgxN2FjNCw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">http://takesmartnotes.com</a></p><h3>Big corps as little panopticons. Agile coaches as colonial imperialists. (Romeu Moura)</h3><p>Le <a href="https://t.umblr.com/redirect?z=https%3A%2F%2Ffr.wikipedia.org%2Fwiki%2FPanoptique&amp;t=OWUyYTE1OTZhNDU1NzVkYWVkNTFmMTE1ZWMyZTI2M2ZiMDRjZjI4Niw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">panoptique</a> est une architecture de prison imaginée à la fin du XVIIIe siècle par <a href="https://t.umblr.com/redirect?z=https%3A%2F%2Ffr.wikipedia.org%2Fwiki%2FJeremy_Bentham&amp;t=OWZlNGEyODQ0ODhmMWZjNzBiMzU1ZjlmMDc1ZGYwYjhiZmNjMjBlZiw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">Jeremy Bentham</a>, et analysée au XXe siècle par <a href="https://t.umblr.com/redirect?z=https%3A%2F%2Ffr.wikipedia.org%2Fwiki%2FMichel_Foucault&amp;t=NjIyMDFmZGUzNWZkMjliMWI2NTVjNDlhZGI0ZmExMmExMDdlNDViYiw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">Michel Foucault</a> dans son livre « <a href="https://t.umblr.com/redirect?z=https%3A%2F%2Ffr.wikipedia.org%2Fwiki%2FSurveiller_et_punir&amp;t=MDZkNjc4ZGFkMDNlYmU3YmZmOTQ1ZTc0YmJmMzFkZmYxOWZmOWI0MSw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">Surveiller et punir</a> ».</p><p>Ses caractéristiques clés sont que :</p><ul><li>les prisonniers sont toujours vus par les gardes et le savent ;</li><li>les prisonniers ne voient pas les gardes ;</li><li>les prisonniers ne se parlent pas entre eux.</li></ul><p>Dans un premier temps, un prisonnier se comporte bien car il est observé. Mais dans un deuxième temps, il est conditionné à devenir son propre garde.</p><p>On peut comparer les entreprises à des panoptiques. Les managers veulent une complète visibilité sur ce que font leurs employés (reporting, etc), mais ne communiquent pas sur ce qu'ils font, et les équipes ne se parlent pas. Les équipes finissent par devenir leurs propres gardes, et s'interdisent de faire certaines choses : « ah mais non, ici on ne peut pas faire ça ».</p><p>En Amérique du Sud, les colons n'ont pas réussi à transformer les autochtones en esclaves. Ils avaient la mauvaise habitude de se laisser mourir. Ils devaient donc importer des esclaves venant d'Afrique. Jusqu'à ce que les missionnaires jésuites trouvent la combine : une fois convertis à la foi chrétienne, ils craignaient de mourir !</p><p>Les grandes entreprises déploient des armées de coachs pour effectuer leur “transformation agile”. Il s'agit moins de transformer toute la structure (et certainement pas le haut de la pyramide), que d'imposer un changement à certains</p><p>Pour Romeu, tous ces coaches agiles sont des jésuites. Qu'ils croient ou non aux valeurs de l'agilité, ils sont envoyés pour changer la culture de « ces gens là bas ». Ils sont instrumentalisés.</p><p>Alors que faire ? Comprendre le système. Lire « Thinking in systems ». Lire Foucault (c'est dur). Regarder la présentation de Jessica ou lire son article.</p><p>Chacun d'entre nous a plus de pouvoir qu'il ne croit. Nous sommes conditionnés à penser le contraire. Nous vivons dans une peur artificielle d'agir différemment. Nous surestimons le pouvoir de notre hiérarchie. On les croit malveillants, mais ils sont dans la même situation, à un niveau différent. Et à tous les niveaux, les gens aimeraient que les choses changent. Restez indignés !</p><h3>What is programming anyway? (Felienne Hermans)</h3><p>On emploie souvent des métaphores pour expliquer ce qu'est la programmation. Dire que programmer c'est comme les maths, ça peut avoir un effet négatif. Felienne suggère de dire plutôt que programmer c'est comme écrire. Tout le monde peut écrire, et l'écriture a des usages variés : fiction, poésie, calligraphie, pétition, dissertation, liste de courses…</p><p>Cette présentation m'a aussi fait réaliser qu'Excel est un langage de programmation fonctionnelle, et que c'était sans doute le meilleur langage de programmation, car des millions de gens l'utilisent sans le savoir… Imaginez vous programmer en Java sans faire exprès !</p><h3>Atelier: 50 shades of FizzBuzz</h3><p>L'atelier visait à prendre un problème simple (FizzBuzz) et à explorer différentes manières de l'implémenter, en se donnant des contraintes.</p><p>Par exemple, on a commencé en mode <em>zombie pair programming</em> : le co-pilote pouvait faire des gestes mais ne pouvait pas parler, seulement grogner ou dire « brains ! ».</p><p>On a ensuite enrichi les spécifications et vu comment le code évoluait.</p><p>J'ai profité d'une partie de l'atelier pour explorer comment utiliser le <em>property-based testing</em> pour exprimer les tests.</p><p>J'ai mis mes différentes versions sur GitHub : <a href="https://t.umblr.com/redirect?z=https%3A%2F%2Fgithub.com%2Fronnix%2F50-shades-of-fizzbuzz&amp;t=ODBlOGMxZmI5MmRhNGNlMDIxMzgzZWRhMWVhZjMxYmQwZmM5OTc1Miw5RDhyYUYxYg%3D%3D&amp;b=t%3AiIFgGOyZQ8NQUkVSSlRl9A&amp;p=http%3A%2F%2Fronanamicel.tumblr.com%2Fpost%2F174431390297%2Fnewcrafts-2018">https://github.com/ronnix/50-shades-of-fizzbuzz</a></p><h3>Atelier: Evolutionary Design</h3><p>L'atelier visait à expérimenter l’<em>evolutionary design</em>.</p><p>La première activité a consisté à implémenter, en groupes de 4-5 personnes, une nouvelle méthode sur une base de code existante (cool, c'était en Python !), en mode <em>outside-in</em> TDD. Ç'a été une expérience à la fois intéressante et pénible pour moi, car je pense plutôt être de l'école classique du TDD, et faire les choses en mode <em>London school</em> allait un peu contre mon penchant naturel…</p><p>La deuxième activité a consisté, toujours en groupes, à prendre une base de code développée par un autre groupe lors d'un précédent atelier où ils avaient plus de temps, et à l'améliorer avec des refactorings.</p><h3>Dojo tournant en continu</h3><p>Pendant toute la durée de la conférence, un dojo de programmation a eu lieu en continu, où chacun pouvait venir participer au développement d'un jeu de la vie, en mode <em>mob programming</em>.</p><p>Je n'y ai participé que quelques minutes, mais c'était très drôle de voir apparaître en accéléré les problèmes que l'on voit en entreprise sur des projets plus longs sur lesquels il y a du <em>turn over</em>. Le code devient très vite du code legacy, l'intention initiale est vite perdue, les connaissances se transmettent mal, les nouveaux venus veulent aller dans une direction qui a déjà été essayée sans succès par les précédents, mais ils ne le savent pas…</p><h3>Pauses, couloirs et soirée du jeudi</h3><p>Les meilleures sessions, ce sont toujours les rencontres et les discussions avec les autres participants. J'ai été heureux de recroiser des gens que je ne vois pas souvent, et d'en rencontrer de nouveaux que j'aurai plaisir à revoir l'an prochain !</p></div>
  451. </article>
  452. </section>
  453. <nav id="jumpto">
  454. <p>
  455. <a href="/david/blog/">Accueil du blog</a> |
  456. <a href="http://ronanamicel.tumblr.com/post/174431390297/newcrafts-2018">Source originale</a> |
  457. <a href="/david/stream/2019/">Accueil du flux</a>
  458. </p>
  459. </nav>
  460. <footer>
  461. <div>
  462. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  463. <p>
  464. Bonjour/Hi!
  465. 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>
  466. 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>).
  467. </p>
  468. <p>
  469. 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>.
  470. </p>
  471. <p>
  472. Voici quelques articles choisis :
  473. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  474. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  475. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  476. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  477. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  478. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  479. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  480. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  481. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  482. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  483. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  484. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  485. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  486. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  487. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  488. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  489. </p>
  490. <p>
  491. 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>.
  492. </p>
  493. <p>
  494. Je ne traque pas ta navigation mais mon
  495. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  496. conserve des logs d’accès.
  497. </p>
  498. </div>
  499. </footer>
  500. <script type="text/javascript">
  501. ;(_ => {
  502. const jumper = document.getElementById('jumper')
  503. jumper.addEventListener('click', e => {
  504. e.preventDefault()
  505. const anchor = e.target.getAttribute('href')
  506. const targetEl = document.getElementById(anchor.substring(1))
  507. targetEl.scrollIntoView({behavior: 'smooth'})
  508. })
  509. })()
  510. </script>