davidbgk
/
larlet-fr-david
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
902 提交
1 分支
目录树: ec7f0fd736
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'ec7f0fd736'
${ noResults }
larlet-fr-david/david/stream/2018/09/17/index.html

index.html 20KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=en>

  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>Hard truth — 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. 

  28.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/stream/2018/09/17/">

  30. 

  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. 

  67. /* http://practicaltypography.com/equity.html */

  68. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  69. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  70. @font-face {

  71.   font-family: 'EquityTextB';

  72.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  73.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  74.   font-weight: 300;

  75.   font-style: normal;

  76.   font-display: swap;

  77. }

  78. @font-face {

  79.   font-family: 'EquityTextB';

  80.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  81.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  82.   font-weight: 300;

  83.   font-style: italic;

  84.   font-display: swap;

  85. }

  86. @font-face {

  87.   font-family: 'EquityTextB';

  88.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  89.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  90.   font-weight: 700;

  91.   font-style: normal;

  92.   font-display: swap;

  93. }

  94. @font-face {

  95.   font-family: 'TriplicateT4c';

  96.   src: url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff2') format('woff2'),

  97.        url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff') format('woff');

  98.   font-weight: 300;

  99.   font-style: normal;

  100.   font-display: swap;

  101. }

  102. 

  103. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  104. body {

  105.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  106.   font-family: "EquityTextB", Palatino, serif;

  107.   background-color: #f0f0ea;

  108.   color: #07486c;

  109.   font-kerning: normal;

  110.   -moz-osx-font-smoothing: grayscale;

  111.   -webkit-font-smoothing: subpixel-antialiased;

  112.   text-rendering: optimizeLegibility;

  113.   font-variant-ligatures: common-ligatures contextual;

  114.   font-feature-settings: "kern", "liga", "clig", "calt";

  115. }

  116. pre, code, kbd, samp, var, tt {

  117.   font-family: 'TriplicateT4c', monospace;

  118. }

  119. em {

  120.   font-style: italic;

  121.   color: #323a45;

  122. }

  123. strong {

  124.   font-weight: bold;

  125.   color: black;

  126. }

  127. nav {

  128.   background-color: #323a45;

  129.   color: #f0f0ea;

  130.   display: flex;

  131.   justify-content: space-around;

  132.   padding: 1rem .5rem;

  133. }

  134.   nav:first-child {

  135.     border-top: 1vh solid #2d7474;

  136.   }

  137.   nav:last-child {

  138.     border-bottom: 1vh solid #2d7474;

  139.   }

  140.   nav a {

  141.     color: #f0f0ea;

  142.   }

  143.   nav abbr {

  144.     border-bottom: 1px dotted white;

  145.   }

  146. 

  147. h1 {

  148.   border-bottom: .2vh solid #2d7474;

  149.   background-color: #e3e1e1;

  150.   color: #323a45;

  151.   text-align: center;

  152.   padding: 2rem 0 1rem;

  153.   width: 100%;

  154. }

  155. h2 {

  156.   margin: 4rem 0 1rem;

  157.   border-top: .2vh solid #2d7474;

  158. }

  159. h3 {

  160.   text-align: center;

  161.   margin: 3rem 0 .75em;

  162. }

  163. hr {

  164.   height: .4rem;

  165.   width: .4rem;

  166.   border-radius: .4rem;

  167.   background: #07486c;

  168.   margin: 2.5rem auto;

  169. }

  170. time {

  171.   display: bloc;

  172.   background-color: #2d7474;

  173.   color: #e3e1e1;

  174.   padding: .29rem 1rem;

  175.   float: right;

  176. }

  177. ul, ol {

  178.   margin: 2rem;

  179. }

  180. ul {

  181.   list-style-type: square;

  182. }

  183. a {

  184.   text-decoration-skip-ink: auto;

  185. }

  186. article {

  187.   max-width: 50rem;

  188.   display: flex;

  189.   flex-direction: column;

  190.   margin: 3rem auto 1rem auto;

  191. }

  192.   article p:last-child {

  193.     margin-bottom: 1rem;

  194.   }

  195. p {

  196.   padding: 0 .5rem;

  197. }

  198.   p + p {

  199.     margin-top: 2rem;

  200.   }

  201. 

  202. blockquote {

  203.   background-color: #e3e1e1;

  204.   border-left: .5vw solid #2d7474;

  205.   display: flex;

  206.   flex-direction: column;

  207.   align-items: center;

  208.   padding: 1rem;

  209.   margin: 1.5rem;

  210. }

  211.   blockquote cite {

  212.     font-style: italic;

  213.   }

  214. 

  215. figure {

  216.   border-top: .2vh solid #2d7474;

  217.   background-color: #e3e1e1;

  218.   text-align: center;

  219.   padding: 1.5rem 0;

  220.   margin: 1rem 0 0;

  221.   font-size: 1.5rem;

  222.   width: 100%;

  223. }

  224.   figure img {

  225.     width: 250px;

  226.     height: 250px;

  227.     border: .5vw solid #323a45;

  228.     padding: 1px;

  229.   }

  230. figcaption {

  231.   padding: 1rem;

  232.   line-height: 1.4;

  233. }

  234. aside {

  235.   display: flex;

  236.   flex-direction: column;

  237.   background-color: #e3e1e1;

  238.   padding: 1rem 0;

  239.   border-bottom: .2vh solid #07486c;

  240. }

  241.   aside p {

  242.     max-width: 50rem;

  243.     margin: 0 auto;

  244.   }

  245. 

  246. /* https://fvsch.com/code/css-locks/ */

  247. p, li, pre, code, kbd, samp, var, tt, time {

  248.   font-size: .95rem;

  249.   line-height: calc( 1.5em + 0.2 * 1rem );

  250. }

  251. h1 {

  252.   font-size: 1.7rem;

  253.   line-height: calc( 1.2em + 0.2 * 1rem );

  254. }

  255. h2 {

  256.   font-size: 1.6rem;

  257.   line-height: calc( 1.3em + 0.2 * 1rem );

  258. }

  259. h3 {

  260.   font-size: 1.35rem;

  261.   line-height: calc( 1.4em + 0.2 * 1rem );

  262. }

  263. @media (min-width: 20em) {

  264.   /* The (100vw - 20rem) / (50 - 20) part

  265.      resolves to 0-1rem, depending on the

  266.      viewport width (between 20em and 50em). */

  267.   p, li, pre, code, kbd, samp, var, tt, time {

  268.     font-size: calc( .95rem + .6 * (100vw - 20rem) / (50 - 20) );

  269.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  270.   }

  271.   h1 {

  272.     font-size: calc( 1.7rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  273.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  274.   }

  275.   h2 {

  276.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  277.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  278.   }

  279.   h3 {

  280.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  281.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  282.   }

  283. }

  284. @media (min-width: 50em) {

  285.   /* The right part of the addition *must* be a

  286.      rem value. In this example we *could* change

  287.      the whole declaration to font-size:2.5rem,

  288.      but if our baseline value was not expressed

  289.      in rem we would have to use calc. */

  290.   p, li, pre, code, kbd, samp, var, tt, time {

  291.     font-size: calc( .95rem + .6 * 1rem );

  292.     line-height: 1.5em;

  293.   }

  294.   h1 {

  295.     font-size: calc( 1.7rem + 1.5 * 1rem );

  296.     line-height: 1.2em;

  297.   }

  298.   h2 {

  299.     font-size: calc( 1.5rem + 1.5 * 1rem );

  300.     line-height: 1.3em;

  301.   }

  302.   h3 {

  303.     font-size: calc( 1.35rem + 1.5 * 1rem );

  304.     line-height: 1.4em;

  305.   }

  306.   figure img {

  307.     width: 500px;

  308.     height: 500px;

  309.   }

  310.   blockquote {

  311.     margin-left: -1.5rem;

  312.   }

  313. }

  314. 

  315. figure.unsquared {

  316.   margin-bottom: 1.5rem;

  317. }

  318.   figure.unsquared img {

  319.     height: inherit;

  320.   }

  321. 

  322. /* https://github.com/richleland/pygments-css */

  323. .codehilite{

  324.     background-color: #fdf6e3;

  325.     margin: 1rem auto;

  326.     padding: 1rem;

  327.     overflow-x:auto;

  328.     box-shadow:inset 0 0 2px rgba(0,0,0,0.2)

  329. }

  330. .codehilite .t{color:#586e75}

  331. .codehilite .w{color:#073642}

  332. .codehilite .err{color:#cb4b16}

  333. .codehilite .k{color:#859900}

  334. .codehilite .kc{color:#2aa198}

  335. .codehilite .kd{color:#268bd2}

  336. .codehilite .kn{color:#b58900}

  337. .codehilite .kp{color:#859900}

  338. .codehilite .kr{color:#073642}

  339. .codehilite .kt{color:#b58900}

  340. .codehilite .n{color:#586e75}

  341. .codehilite .na{color:#2aa198}

  342. .codehilite .nb{color:#268bd2}

  343. .codehilite .nc{color:#268bd2}

  344. .codehilite .ne{color:#cb4b16}

  345. .codehilite .no{color:#2aa198}

  346. .codehilite .nd{color:#2aa198}

  347. .codehilite .ni{color:#2aa198;font-weight:bold}

  348. .codehilite .nf{color:#268bd2}

  349. .codehilite .nn{color:#586e75}

  350. .codehilite .nt{color:#2aa198;font-weight:bold}

  351. .codehilite .nv{color:#cb4b16}

  352. .codehilite .b{color:#859900}

  353. .codehilite .bp{color:#586e75}

  354. .codehilite .v{color:#586e75}

  355. .codehilite .vc{color:#586e75}

  356. .codehilite .vg{color:#268bd2}

  357. .codehilite .vi{color:#268bd2}

  358. .codehilite .m{color:#268bd2}

  359. .codehilite .mf{color:#268bd2}

  360. .codehilite .mh{color:#268bd2}

  361. .codehilite .mi{color:#268bd2}

  362. .codehilite .mo{color:#268bd2}

  363. .codehilite .s{color:#2aa198}

  364. .codehilite .sb{color:#2aa198}

  365. .codehilite .sc{color:#2aa198}

  366. .codehilite .sd{color:#2aa198}

  367. .codehilite .s2{color:#2aa198}

  368. .codehilite .se{color:#cb4b16}

  369. .codehilite .sh{color:#2aa198}

  370. .codehilite .si{color:#cb4b16}

  371. .codehilite .sx{color:#2aa198}

  372. .codehilite .sr{color:#cb4b16}

  373. .codehilite .s1{color:#2aa198}

  374. .codehilite .ss{color:#cb4b16}

  375. .codehilite .il{color:#268bd2}

  376. .codehilite .o{color:#586e75}

  377. .codehilite .ow{color:#859900}

  378. .codehilite .p{color:#586e75}

  379. .codehilite .c{color:#93a1a1;font-style:italic}

  380. .codehilite .cm{color:#93a1a1}

  381. .codehilite .cp{color:#93a1a1}

  382. .codehilite .c1{color:#93a1a1}

  383. .codehilite .cs{color:#93a1a1}

  384. .codehilite .hll{background-color:#dc322f}

  385. .codehilite .g{color:#586e75}

  386. .codehilite .gd{color:#586e75}

  387. .codehilite .ge{font-style:italic}

  388. .codehilite .gr{color:#586e75}

  389. .codehilite .gh{color:#586e75;font-weight:bold}

  390. .codehilite .gi{color:#586e75}

  391. .codehilite .go{color:#586e75}

  392. .codehilite .gp{color:#586e75}

  393. .codehilite .gs{font-weight:bold}

  394. .codehilite .gu{color:#586e75;font-weight:bold}

  395. .codehilite .gt{color:#586e75}

  396. 

  397. @media print {

  398.   body { font-size: 100%; }

  399.   a:after { content: " (" attr(href) ")"; }

  400.   a, a:link, a:visited, a:after {

  401.     text-decoration: underline;

  402.     text-shadow: none !important;

  403.     background-image: none !important;

  404.     background: white;

  405.     color: black;

  406.   }

  407.   abbr[title] { border-bottom: 0; }

  408.   abbr[title]:after { content: " (" attr(title) ")"; }

  409.   img { page-break-inside: avoid; }

  410.   @page { margin: 2cm .5cm; }

  411.   h1, h2, h3 { page-break-after: avoid; }

  412.   p3 { orphans: 3; widows: 3; }

  413.   img {

  414.     max-width: 250px !important;

  415.     max-height: 250px !important;

  416.   }

  417.   nav, aside { display: none; }

  418. }

  419. 

  420. /* Dark theme */

  421. [lang=en] body {

  422.   background: #323a45;

  423. }

  424.   [lang=en] article,

  425.   [lang=en] article em,

  426.   [lang=en] article strong {

  427.     color: #f0f0ea;

  428.   }

  429.     [lang=en] article a {

  430.       color: #ffbd2b;

  431.     }

  432.     [lang=en] article a:visited {

  433.       color: #ff6b03;

  434.     }

  435.   [lang=en] blockquote,

  436.   [lang=en] figure {

  437.     background: #111930;

  438.     color: #ccc;

  439.   }

  440. </style>

  441. <nav>

  442.   <p>

  443.     <a href="/david/" title="Profil public">David&nbsp;Larlet</a> partage ses <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et sa <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a>.

  444.   </p>

  445. </nav>

  446. 

  447. <h1>Hard truth</h1>

  448. <time>2018-09-17</time>

  449. <article>

  450.   <blockquote>

  451. <p>The “developer experience” bait-and-switch works by appealing to the listener’s parochial interests as developers or managers, claiming supremacy in one category in order to remove others from the conversation. The swap is executed by <em>implying</em> that by making things better for developers, users will eventually benefit equivalently. The unstated agreement is that developers share all of the same goals with the same intensity as end users and even managers. <strong>This is not true.</strong></p>

  452. <p><cite><em><a href="https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/">Infrequently Noted</a></em> (<a href="/david/cache/7bc5331346ba44306777df275aa68a2a/">cache</a>)</cite></p>

  453. </blockquote>

  454. <p>Then:</p>

  455. <blockquote>

  456. <p>I want to see progress. I want change. I want state-of-the-art in software engineering to improve, not just stand still. I don’t want to reinvent the same stuff over and over, less performant and more bloated each time. I want something to believe in, a worthy end goal, a future better than what we have today, and I want a community of engineers who share that vision.</p>

  457. <p>What we have today is not progress. We barely meet business goals with poor tools applied over the top. We’re stuck in local optima and nobody wants to move out. It’s not even a good place, it’s bloated and inefficient. We just somehow got used to it.</p>

  458. <p><cite><em><a href="http://tonsky.me/blog/disenchantment/">Software disenchantment</a></em> (<a href="/david/cache/866fcdfe728b5f87af78357ac5e6d674/">cache</a>)</cite></p>

  459. </blockquote>

  460. <p>And then:</p>

  461. <blockquote>

  462. <p>Over time, technologies are added, but are rarely removed. Left unchecked, production stacks that have been around long enough become sprawling patchworks combining everything under the sun.</p>

  463. <p><cite><em><a href="https://brandur.org/minimalism">In Pursuit of Production Minimalism</a></em> (<a href="/david/cache/232f1334b14f4f17bac10b5c8c3fb555/">cache</a>)</cite></p>

  464. </blockquote>

  465. <p>Finally:</p>

  466. <blockquote>

  467. <p>The dynamic you see with especially long-lived code bases like Office is that the amount of framework code becomes dominated over time by the amount of application code and in fact frameworks over time get absorbed into the overall code base. The framework typically fails to evolve along the path required by the product — which leads to the general advice “you ship it, you own it”. This means that you eventually pay for all that code that lifted your initial productivity. So “free code” tends to be “free as in puppy” rather than “free as in beer”.</p>

  468. <p><cite><em><a href="https://hackernoon.com/complexity-and-strategy-325cd7f59a92">Complexity and Strategy</a></em> (<a href="/david/cache/4823f239a69fb169fc9a91b8d52ba240/">cache</a>)</cite></p>

  469. </blockquote>

  470. <p>The most frustrating part of all this is the number of (old) developers getting to the same conclusion without any clue to avoid that extra complexity.</p>

  471. <p><em>Myself included.</em></p>

  472. </article>

  473. 

  474. 

  475. <nav>

  476.   <p>

  477.     <a rel=prev href="/david/stream/2018/09/16/">← Coup d’Éclat</a> | <a href="/david/stream/2018/" title="Retour à la liste complète">↑</a> | <a  rel=next href="/david/stream/2018/09/18/">Troubadours modernes →</a>

  478.   </p>

  479. </nav>

  480. 

  481. 

  482. 

  483. <aside>

  484.   <p>

  485.     Other articles in English:

  486.   

  487.     <a href="/david/blog/2018/caching-links/">On caching links</a>,

  488.   

  489.     <a href="/david/blog/2018/bushcraft-retrospective/">Bushcraft retrospective</a>,

  490.   

  491.     <a href="/david/blog/2018/into-the-raft/">Into the Raft</a>,

  492.   

  493.     <a href="/david/blog/2018/into-the-bugs/">Into the Bugs</a>,

  494.   

  495.     <a href="/david/blog/2018/meritocracy-crisis/">Meritocracy crisis</a>,

  496.   

  497.     <a href="/david/blog/2018/seller-teacher-wise/">The Seller, the Teacher and the Wise</a>,

  498.   

  499.     <a href="/david/blog/2018/into-the-good/">Into the Good</a>,

  500.   

  501.     <a href="/david/blog/2018/into-the-mice/">Into the Mice</a>,

  502.   

  503.     <a href="/david/blog/2018/into-the-camp/">Into the Camp</a>,

  504.   

  505.     <a href="/david/blog/2018/into-the-wind/">Into the Wind</a>,

  506.   

  507.     <a href="/david/blog/2018/into-the-snow/">Into the Snow</a>,

  508.   

  509.     <a href="/david/blog/2018/into-the-cold/">Into the Cold</a>,

  510.   

  511.     <a href="/david/blog/2017/async-python-frameworks/">Async Python Frameworks</a>,

  512.   

  513.     <a href="/david/blog/2017/distributed-teams/">Distributed teams</a>,

  514.   

  515.     <a href="/david/blog/2017/into-the-wild/">Into the Wild</a>,

  516.   

  517.     <a href="/david/blog/2017/without-javascript/">Without JavaScript</a>,

  518.   

  519.     <a href="/david/blog/2017/inclusive-python/">Inclusive Python</a>,

  520.   

  521.     <a href="/david/blog/2017/micro-cultures-governance/">Micro-cultures and governance</a>,

  522.   

  523.     <a href="/david/blog/2017/resilient-web-tools/">Resilient Web and Tools</a>,

  524.   

  525.     <a href="/david/blog/2017/bitcoin-energy/">Bitcoin and energy</a>,

  526.   

  527.     <a href="/david/blog/2016/team-building/">Team building</a>,

  528.   

  529.     <a href="/david/blog/2016/inclusive-developer/">Inclusive developer</a>,

  530.   

  531.     <a href="/david/blog/2016/cultural-intimacy/">Cultural Intimacy</a>,

  532.   

  533.     <a href="/david/blog/2016/tools-teams/">Tools and teams</a>,

  534.   

  535.     <a href="/david/blog/2016/senior-developer/">Senior developer</a>,

  536.   

  537.     <a href="/david/blog/2016/slow-data/">Slow Data</a>,

  538.   

  539.     <a href="/david/blog/2016/inclusive-communities/">Inclusive communities</a>,

  540.   

  541.     <a href="/david/blog/2016/delivery-values/">Delivery and value(s)</a>,

  542.   

  543.     <a href="/david/blog/2016/collaboration-debt/">Collaboration debt</a>,

  544.   

  545.     <a href="/david/blog/2016/communities-leadership/">Communities and leadership</a>,

  546.   

  547.     <a href="/david/blog/2016/specifications-apis/">Specifications and APIs</a>.

  548.   

  549.     Oh, and most of <a href="/david/stream/2018/">the 2018 thoughts</a>.

  550.   </p>

  551. </aside>

  552. 

  553. 

  554. <nav>

  555.   <p>

  556.     <abbr title="Lieu de vie et de potentielles rencontres actuel">Montréal</abbr> ·

  557.     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Contact</a> ·

  558.     <a href="http://larlet.com" title="Identité professionnelle">[Travailler ensemble ?]</a> ·

  559.     <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">Hébergeur</abbr> ·

  560.     <a href="/david/log/" title="S’abonner aux publications via RSS">Flux</a>

  561.   </p>

  562. </nav>

  563. 

  564.   <script>

  565.   /* Service workers */

  566.   if (navigator.serviceWorker) {

  567.     window.addEventListener('load', function () {

  568.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  569.       function sendLinks (selector) {

  570.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  571.           return link.getAttribute('href')

  572.         })

  573.         links.push(location.pathname)  // Put the current page in cache too.

  574.         navigator.serviceWorker.controller.postMessage({ links: links })

  575.       }

  576.       navigator.serviceWorker.getRegistration()

  577.         .then(function (registration) {

  578.           if (!registration || !navigator.serviceWorker.controller) {

  579.             return navigator.serviceWorker.register('/serviceworker.js')

  580.               .then(navigator.serviceWorker.ready)

  581.               .then(function () {

  582.                 console.log('[ServiceWorker] Ready to go!')

  583.               })

  584.               .catch(console.error.bind(console))

  585.           } else {

  586.             console.log('[ServiceWorker] Send links via registration')

  587.             sendLinks(selector)

  588.           }

  589.         })

  590.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  591.         console.log('[ServiceWorker] Send links via controller change')

  592.         sendLinks(selector)

  593.       })

  594.       navigator.serviceWorker.addEventListener('message', function (event) {

  595.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  596.         if (event.data.status && link) {

  597.           link.style.backgroundColor = '#2d7474'

  598.           link.style.color = '#f0f0ea'

  599.           

  600.             link.setAttribute('title', 'Put in cache for offline use')

  601.           

  602.         }

  603.       })

  604.     })

  605.   } else {

  606.     console.warn('[ServiceWorker] No cache for old browsers.')

  607.   }

  608. </script>