davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 Commits
1 Branch
Tree: 9c2d709fb0
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '9c2d709fb0'
${ noResults }
larlet-fr-david/david/stream/2019/12/27/index.html

index.html 36KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894 
  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>Intemporels — 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/2019/12/27/">

  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. 

  95. @font-face {

  96.   font-family: 'ConcourseT3';

  97.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  98.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  99.   font-weight: 300;

  100.   font-style: normal;

  101.   font-display: swap;

  102. }

  103. 

  104. 

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

  106. body {

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

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

  109.   background-color: #f0f0ea;

  110.   color: #07486c;

  111.   font-kerning: normal;

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

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

  114.   text-rendering: optimizeLegibility;

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

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

  117. }

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

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

  120. }

  121. em {

  122.   font-style: italic;

  123.   color: #323a45;

  124. }

  125. strong {

  126.   font-weight: bold;

  127.   color: black;

  128. }

  129. nav {

  130.   background-color: #323a45;

  131.   color: #f0f0ea;

  132.   display: flex;

  133.   justify-content: space-around;

  134.   padding: 1rem .5rem;

  135. }

  136.   nav:last-child {

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

  138.   }

  139.   nav a {

  140.     color: #f0f0ea;

  141.   }

  142.   nav abbr {

  143.     border-bottom: 1px dotted white;

  144.   }

  145. 

  146. h1 {

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

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

  149.   background-color: #e3e1e1;

  150.   color: #323a45;

  151.   text-align: center;

  152.   padding: 5rem 0 4rem 0;

  153.   width: 100%;

  154.   font-family: 'ConcourseT3';

  155.   display: flex;

  156.   flex-direction: column;

  157. }

  158.   h1.single {

  159.     padding-bottom: 10rem;

  160.   }

  161.   h1 span {

  162.     position: absolute;

  163.     top: 1vh;

  164.     left: 20%;

  165.     line-height: 0;

  166.   }

  167.     h1 span a {

  168.       line-height: 1.7;

  169.       padding: 1rem 1.2rem .6rem 1.2rem;

  170.       border-radius: 0 0 6% 6%;

  171.       background: #2d7474;

  172.       font-size: 1.3rem;

  173.       color: white;

  174.       text-decoration: none;

  175.     }

  176. h2 {

  177.   margin: 4rem 0 1rem;

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

  179.   padding-top: 1vh;

  180. }

  181. h3 {

  182.   text-align: center;

  183.   margin: 3rem 0 .75em;

  184. }

  185. hr {

  186.   height: .4rem;

  187.   width: .4rem;

  188.   border-radius: .4rem;

  189.   background: #07486c;

  190.   margin: 2.5rem auto;

  191. }

  192. time {

  193.   display: bloc;

  194.   margin-left: 0 !important;

  195. }

  196. ul, ol {

  197.   margin: 2rem;

  198. }

  199. ul {

  200.   list-style-type: square;

  201. }

  202. a {

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

  204.   text-decoration-thickness: 0.05em;

  205.   text-underline-offset: 0.09em;

  206. }

  207. article {

  208.   max-width: 50rem;

  209.   display: flex;

  210.   flex-direction: column;

  211.   margin: 2rem auto;

  212. }

  213.   article.single {

  214.     border-top: .2vh dotted #2d7474;

  215.     margin: -6rem auto 1rem auto;

  216.     background: #f0f0ea;

  217.     padding: 2rem;

  218.   }

  219.   article p:last-child {

  220.     margin-bottom: 1rem;

  221.   }

  222. p {

  223.   padding: 0 .5rem;

  224.   margin-left: 3rem;

  225. }

  226.   p + p,

  227.   figure + p {

  228.     margin-top: 2rem;

  229.   }

  230. 

  231. blockquote {

  232.   background-color: #e3e1e1;

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

  234.   display: flex;

  235.   flex-direction: column;

  236.   align-items: center;

  237.   padding: 1rem;

  238.   margin: 1.5rem;

  239. }

  240.   blockquote cite {

  241.     font-style: italic;

  242.   }

  243.   blockquote p {

  244.     margin-left: 0;

  245.   }

  246. 

  247. figure {

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

  249.   background-color: #e3e1e1;

  250.   text-align: center;

  251.   padding: 1.5rem 0;

  252.   margin: 1rem 0 0;

  253.   font-size: 1.5rem;

  254.   width: 100%;

  255. }

  256.   figure img {

  257.     max-width: 250px;

  258.     max-height: 250px;

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

  260.     padding: 1px;

  261.   }

  262. figcaption {

  263.   padding: 1rem;

  264.   line-height: 1.4;

  265. }

  266. aside {

  267.   display: flex;

  268.   flex-direction: column;

  269.   background-color: #e3e1e1;

  270.   padding: 1rem 0;

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

  272. }

  273.   aside p {

  274.     max-width: 50rem;

  275.     margin: 0 auto;

  276.   }

  277. 

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

  279. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  280.   font-size: 1rem;

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

  282. }

  283. h1 {

  284.   font-size: 1.9rem;

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

  286. }

  287. h2 {

  288.   font-size: 1.6rem;

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

  290. }

  291. h3 {

  292.   font-size: 1.35rem;

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

  294. }

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

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

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

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

  299.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

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

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

  302.     margin-left: 0;

  303.   }

  304.   h1 {

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

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

  307.   }

  308.   h2 {

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

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

  311.   }

  312.   h3 {

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

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

  315.   }

  316. }

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

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

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

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

  321.      but if our baseline value was not expressed

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

  323.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

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

  325.     line-height: 1.5em;

  326.   }

  327.   p, li, pre, details {

  328.     margin-left: 3rem;

  329.   }

  330.   h1 {

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

  332.     line-height: 1.2em;

  333.   }

  334.   h2 {

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

  336.     line-height: 1.3em;

  337.   }

  338.   h3 {

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

  340.     line-height: 1.4em;

  341.   }

  342.   figure img {

  343.     max-width: 500px;

  344.     max-height: 500px;

  345.   }

  346. }

  347. 

  348. figure.unsquared {

  349.   margin-bottom: 1.5rem;

  350. }

  351.   figure.unsquared img {

  352.     height: inherit;

  353.   }

  354. 

  355. 

  356. 

  357. @media print {

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

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

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

  361.     text-decoration: underline;

  362.     text-shadow: none !important;

  363.     background-image: none !important;

  364.     background: white;

  365.     color: black;

  366.   }

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

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

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

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

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

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

  373.   img {

  374.     max-width: 250px !important;

  375.     max-height: 250px !important;

  376.   }

  377.   nav, aside { display: none; }

  378. }

  379. 

  380. ul.with_columns {

  381.   column-count: 1;

  382. }

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

  384.   ul.with_columns {

  385.     column-count: 2;

  386.   }

  387. }

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

  389.   ul.with_columns {

  390.     column-count: 3;

  391.   }

  392. }

  393. ul.with_two_columns {

  394.   column-count: 1;

  395. }

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

  397.   ul.with_two_columns {

  398.     column-count: 1;

  399.   }

  400. }

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

  402.   ul.with_two_columns {

  403.     column-count: 2;

  404.   }

  405. }

  406. 

  407. .gallery {

  408.   display: flex;

  409.   flex-wrap: wrap;

  410.   justify-content: space-around;

  411. }

  412.   .gallery figure img {

  413.     margin-left: 1rem;

  414.     margin-right: 1rem;

  415.   }

  416.   .gallery figure figcaption {

  417.     font-family: 'ConcourseT3'

  418.   }

  419. 

  420. footer {

  421.   font-family: 'ConcourseT3';

  422.   display: flex;

  423.   flex-direction: column;

  424.   border-top: 3px solid white;

  425.   padding: 4rem 0;

  426.   background-color: #07486c;

  427.   color: white;

  428. }

  429.   footer > * {

  430.     max-width: 50rem;

  431.     margin: 0 auto;

  432.   }

  433.   footer a {

  434.     color: #f1c40f;

  435.   }

  436.   footer .avatar {

  437.     width: 200px;

  438.     height: 200px;

  439.     border-radius: 50%;

  440.     float: left;

  441.     -webkit-shape-outside: circle();

  442.     shape-outside: circle();

  443.     margin-right: 2rem;

  444.     padding: 2px 5px 5px 2px;

  445.     background: white;

  446.     border-left: 1px solid #f1c40f;

  447.     border-top: 1px solid #f1c40f;

  448.     border-right: 5px solid #f1c40f;

  449.     border-bottom: 5px solid #f1c40f;

  450.   }

  451. </style>

  452. 

  453. <h1 class="single">

  454.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  455.   Intemporels

  456.   <time>Publié le 27 décembre</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Une liste d’articles qui ne prennent pas trop de rides. J’aime beaucoup ce qu’a fait <a href="https://wdrl.info/evergreen/">Anselm Hannemann</a> alors voici un espace que je vais mettre à jour au gré de mes lectures. Ça me permettra aussi de lier des références mises en cache dans le futur. L’ordre n’est pas significatif.</em></p>

  460. <p>Bonne lecture !</p>

  461. <hr />

  462. <p><a name="humans" href="#humans">⚓︎</a></p>

  463. <blockquote>

  464. <p>User experience design has led us to use a certain vocabulary: Instead of seeing human beings with goals and attitudes, we see users. We use words like subscribers, subs, visitors, spenders, whales or even just “traffic” or “installs” to refer to them. We assign a role to them. UX design dehumanizes people.</p>

  465. <p><cite><em><a href="https://johannesippen.com/2019/humans-not-users/">Humans, not Users</a></em> (<a href="/david/cache/85dd627b08fa417c198d95acfc8e6aa0/">cache</a>)</cite></p>

  466. </blockquote>

  467. <hr />

  468. <p><a name="empathy" href="#empathy">⚓︎</a></p>

  469. <blockquote>

  470. <p>In UX, empathy enables us to understand not only our users’ immediate frustrations, but also their hopes, fears, abilities, limitations, reasoning, and goals. It allows us to dig deep into our understanding of the user and create solutions that will not only solve a need, but effectively improve our users’ lives by removing unnecessary pain or friction. Instead of just designing an accessible website, practicing empathy is using a screen reader, blindfolded, in order to complete a task on your own website.</p>

  471. <p><cite><em><a href="https://www.nngroup.com/articles/sympathy-vs-empathy-ux/">Sympathy vs. Empathy in UX</a></em> (<a href="/david/cache/eae184de757f4384212d32a1273772cd/">cache</a>)</cite></p>

  472. </blockquote>

  473. <hr />

  474. <p><a name="noreply" href="#noreply">⚓︎</a></p>

  475. <blockquote>

  476. <p>You want your customers to be talking to you. You want them sharing ideas and experiences with you. Instead of a no-reply, set it to your support email address. Make sure someone will see any replies that a customer sends. Sure, you’re going to get lots of auto-responders. That’s why your email app has filter and rules you can set up.</p>

  477. <p><cite><em><a href="https://m.signalvnoise.com/no-reply-addresses/">No Reply Addresses</a></em> (<a href="/david/cache/0b96c949ec0089286a634baa9684318c/">cache</a>)</cite></p>

  478. </blockquote>

  479. <hr />

  480. <p><a name="ethics" href="#ethics">⚓︎</a></p>

  481. <blockquote>

  482. <p>In everyday language, the word “ethics” is used as a synonym for morals. And in everyday discussions that is just fine. Morals sounds old fashioned, conservative, unscientific. We say “ethics” even though, strictly speaking, we mean morals. When it comes to discussing the “ethics” or the morality of our industry, we need to understand our basic moral beliefs.</p>

  483. <p><cite><em><a href="https://ia.net/topics/ethics-and-ethics">“Ethics” and Ethics</a></em> (<a href="/david/cache/c7620deb7c5227e16a8e5c5207f8e28b/">cache</a>)</cite></p>

  484. </blockquote>

  485. <hr />

  486. <p><a name="privacy" href="#privacy">⚓︎</a></p>

  487. <blockquote>

  488. <p>This is, by the way, the dirty secret of the machine learning movement: almost everything produced by ML could have been produced, more cheaply, using a very dumb heuristic you coded up by hand, because mostly the ML is trained by feeding it examples of what humans did while following a very dumb heuristic. There’s no magic here.</p>

  489. <p><cite><em><a href="https://apenwarr.ca/log/20190201">Forget privacy: you’re terrible at targeting anyway</a></em> (<a href="/david/cache/abe583967cb53a01298d4b073cb406ad/">cache</a>)</cite></p>

  490. </blockquote>

  491. <hr />

  492. <p><a name="noms" href="#noms">⚓︎</a></p>

  493. <blockquote>

  494. <p>Les personnes chargées de créer des formulaires, des bases de données ou des ontologies ignorent souvent la façon dont les noms changent d’un pays à l’autre. Elles conçoivent leurs formulaires et leurs bases de données sans se rendre compte de l’effort demandé pour un utilisateur étranger. Cet article vous présentera d’abord les différents styles utilisés pour un nom de personne, puis détaillera quelques incidences possibles pour les gérer au mieux sur le Web.</p>

  495. <p><cite><em><a href="https://www.w3.org/International/questions/qa-personal-names">Noms de personnes à travers le monde</a></em> (<a href="/david/cache/c893cbc0aedae4e797a69270c50b5c25/">cache</a>)</cite></p>

  496. </blockquote>

  497. <p><a href="https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/">Voir aussi</a> (<a href="/david/cache/61fb6db44e7173cd9318753c955f7dda/">cache</a>).</p>

  498. <hr />

  499. <p><a name="opensource" href="#opensource">⚓︎</a></p>

  500. <blockquote>

  501. <p>Communities prior to the advent of coinage didn’t seek to settle their trades on the spot, at least not within those communities. They relied on much more egalitarian long-running concepts of reciprocity. Forms much closer to the communist slogans of “from each according to his ability, to each according to his needs” than the quid pro quo paradigm we all take for granted in today’s market-based societies.</p>

  502. <p><cite><em><a href="https://m.signalvnoise.com/open-source-beyond-the-market/">Open source beyond the market</a></em> (<a href="/david/cache/b97a637aaaabbf5b82b172fe781dc7f6/">cache</a>)</cite></p>

  503. </blockquote>

  504. <hr />

  505. <p><a name="search" href="#search">⚓︎</a></p>

  506. <blockquote>

  507. <p>Search is a deceptively complex field, where competence is hard-won through training, practice, and experience. The list stands at a total of 105 falsehoods. I couldn’t mash up the ole 99-problems meme with this to cull 6 unworthy items, because they are all worthy.</p>

  508. <p><cite><em><a href="https://opensourceconnections.com/blog/2019/05/29/falsehoods-programmers-believe-about-search/">Falsehoods Programmers Believe About Search</a></em> (<a href="/david/cache/626468d153ec2e83731dbbd7133af224/">cache</a>)</cite></p>

  509. </blockquote>

  510. <hr />

  511. <p><a name="assets" href="#assets">⚓︎</a></p>

  512. <blockquote>

  513. <p>There really is very little reason to leave your static assets on anyone else’s infrastructure. The perceived benefits are often a myth, and even if they weren’t, the trade-offs simply aren’t worth it. Loading assets from multiple origins is demonstrably slower. Take ten minutes over the next few days to audit your projects, and fetch any off-site static assets under your own control.</p>

  514. <p><cite><em><a href="https://csswizardry.com/2019/05/self-host-your-static-assets/">Self-Host Your Static Assets</a></em> (<a href="/david/cache/6f8793385f7b1ea2511bf614b5287397/">cache</a>)</cite></p>

  515. </blockquote>

  516. <hr />

  517. <p><a name="projector" href="#projector">⚓︎</a></p>

  518. <blockquote>

  519. <p>The Projector Test is my favorite “gut check” manual UI test, and I encourage you to use it early, often, and especially when ironing out final visual specs. It doesn’t substitute for testing out a functional version of your site in a variety of environments — browsers, form factors, screen resolutions, operating systems, screen orientations, screen readers, etc. — but it’s a good place to start. Embrace your conference room’s projector and challenge yourself to make your designs look stellar on even the fuzziest, most washed-out of screens.</p>

  520. <p><cite><em><a href="https://medium.com/salesforce-ux/projectors-dont-lie-b85ef628b04">Projectors don’t lie.</a></em> (<a href="/david/cache/ffe10a872d4fd33d7fc24b4cb38528db/">cache</a>)</cite></p>

  521. </blockquote>

  522. <hr />

  523. <p><a name="performance" href="#performance">⚓︎</a></p>

  524. <blockquote>

  525. <p>You know what’s better than perceived performance? Actual performance. Avoid techniques that merely provide a mirage of speed.</p>

  526. <p>Instead, declutter and optimise the foundations of your design system which will result in less weight, less complexity, less distraction, less hassle and ultimately, less bull shit.</p>

  527. <p><cite><em><a href="https://adamsilver.io/articles/designing-for-actual-performance/">Designing for actual performance</a></em> (<a href="/david/cache/4f3420365156f407064711f8cc0f45d6/">cache</a>)</cite></p>

  528. </blockquote>

  529. <hr />

  530. <p><a name="plaintext" href="#plaintext">⚓︎</a></p>

  531. <blockquote>

  532. <p>Ultimately, in email, less is more.</p>

  533. <p>This can be a tough pill for marketers to swallow (myself included) because we’re naturally driven to be creative. But data repeatedly shows plain-text email wins, so it’s up to us to decide whether or not we want to make the switch. </p>

  534. <p><cite><em><a href="https://blog.hubspot.com/marketing/plain-text-vs-html-emails-data">Plain Text vs. HTML Emails: Which Is Better?</a></em> (<a href="/david/cache/f46d27e60634cd0c0769fd59c28250d6/">cache</a>)</cite></p>

  535. </blockquote>

  536. <hr />

  537. <p><a name="feature-flags" href="#feature-flags">⚓︎</a></p>

  538. <blockquote>

  539. <p>You want to avoid branching for this work if at all possible, based on previous painful experiences of merging long-lived branches in the past. Instead, you decide that the entire team will continue to work on trunk, but the developers working on the Spline Reticulation improvements will use a Feature Toggle to prevent their work from impacting the rest of the team or destabilizing the codebase.</p>

  540. <p><cite><em><a href="https://martinfowler.com/articles/feature-toggles.html">Feature Toggles (aka Feature Flags)</a></em> (<a href="/david/cache/7c569b2880bd3ed844e039a322b9731d/">cache</a>)</cite></p>

  541. </blockquote>

  542. <hr />

  543. <p><a name="timezones" href="#timezones">⚓︎</a></p>

  544. <blockquote>

  545. <p>Always measure and store time in UTC. If you need to record where the time was taken, store that separately. Do not store the local time + timezone information!</p>

  546. <p><cite><em><a href="http://lucumr.pocoo.org/2011/7/15/eppur-si-muove/">“Eppur si muove!” – Dealing with Timezones in Python</a></em> (<a href="/david/cache/3caf29e374bca01d6b9cab9a618ee830/">cache</a>)</cite></p>

  547. </blockquote>

  548. <hr />

  549. <p><a name="do-nothing" href="#do-nothing">⚓︎</a></p>

  550. <blockquote>

  551. <p>This script doesn’t actually do any of the steps of the procedure. That’s why it’s called a do-nothing script. It feeds the user a step at a time and waits for them to complete each step manually.</p>

  552. <p>At first glance, it might not be obvious that this script provides value. Maybe it looks like all we’ve done is make the instructions harder to read. But the value of a do-nothing script is immense</p>

  553. <p><cite><em><a href="https://blog.danslimmon.com/2019/07/15/do-nothing-scripting-the-key-to-gradual-automation/">Do-nothing scripting: the key to gradual automation</a></em> (<a href="/david/cache/00a288de97e8a854d5fdfe03ba2bcf72/">cache</a>)</cite></p>

  554. </blockquote>

  555. <hr />

  556. <p><a name="intuitive-ux" href="#intuitive-ux">⚓︎</a></p>

  557. <blockquote>

  558. <p>When I started as a professional UX designer, I was shocked how many times my clients would hand me the initial wireframes (or the living, breathing, in-browser MVP) and there’d be completely obvious UX mistakes all over them. I’m not talking about things you need hours of research and A/B testing to discover. I’m talking, like, dead simple mistakes.</p>

  559. <p><cite><em><a href="https://learnui.design/blog/4-rules-intuitive-ux.html">4 Rules for Intuitive UX</a></em> (<a href="/david/cache/f599501674792192b83b5bbc2d7e5324/">cache</a>)</cite></p>

  560. </blockquote>

  561. <hr />

  562. <p><a name="form-design" href="#form-design">⚓︎</a></p>

  563. <blockquote>

  564. <p>So, if I was designing a new form, I’d want to know how to avoid the common issues. And to use my time to solve newer and perhaps more difficult problems.</p>

  565. <p>Seriously, who wants to spend time solving something that’s already been solved?</p>

  566. <p><cite><em><a href="https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post/">Form design: from zero to hero all in one blog post</a></em> (<a href="/david/cache/ea6f3644381c108795010c0ae6aee332/">cache</a>)</cite></p>

  567. </blockquote>

  568. <hr />

  569. <p><a name="passwords" href="#passwords">⚓︎</a></p>

  570. <blockquote>

  571. <p>Vous voulez que votre mot de passe résiste à un voisin malveillant prêt à mettre plus de 10 € sur la table ? Prévoyez au moins 10 carac­tères.</p>

  572. <p>Et là, seconde magie : Si vous mettez 10 carac­tères on se moque de savoir si vous y avez mis des chiffres ou symboles. La longueur a bien plus d’im­por­tance que l’éven­tail de carac­tères utilisé.</p>

  573. <p><cite><em><a href="https://n.survol.fr/n/developpeurs-vous-devriez-avoir-honte-regles-de-mots-de-passe">Développeurs, vous devriez avoir honte</a></em> (<a href="/david/cache/f77e84e4666177057f83bf901b4c5b68/">cache</a>)</cite></p>

  574. </blockquote>

  575. <hr />

  576. <p><a name="burnt-pizza" href="#burnt-pizza">⚓︎</a></p>

  577. <blockquote>

  578. <p>Say you’re trying to test whether people like pizza. If you serve them burnt pizza, you’re not getting feedback on whether they like pizza. You only know that they don’t like burnt pizza. Similarly, when you’re only relying on the MVP, the fastest and cheapest functional prototype, you risk not actually testing your product, but rather a poor or flawed version of it.</p>

  579. <p><cite><em><a href="https://firstround.com/review/dont-serve-burnt-pizza-and-other-lessons-in-building-minimum-lovable-products/">Don’t Serve Burnt Pizza (And Other Lessons in Building Minimum Lovable Products)</a></em> (<a href="/david/cache/2ba49645e8cd27503661e03a73bbac37/">cache</a>)</cite></p>

  580. </blockquote>

  581. <hr />

  582. <p><a name="advertising" href="#advertising">⚓︎</a></p>

  583. <blockquote>

  584. <p>In 2018 $273bn was spent on digital ads globally. We delve into the world of clicks, banners and keywords to find out if any of it is real. What do we really know about the effectiveness of digital advertising?</p>

  585. <p><cite><em><a href="https://thecorrespondent.com/100/the-new-dot-com-bubble-is-here-its-called-online-advertising/13228924500-22d5fd24">The new dot com bubble is here: it’s called online advertising</a></em> (<a href="/david/cache/9ecfef782dcd4d2a31f763e7b98c4c13/">cache</a>)</cite></p>

  586. </blockquote>

  587. <hr />

  588. <p><em>Est-ce qu’il y aurait des publications de cet espace que vous mettriez dans une telle liste ? Je fais ma propre liste en pied de page et je serais curieux de savoir si elle diffère de la vôtre :-).</em></p>

  589. </article>

  590. 

  591. 

  592. <nav id="jumpto">

  593.   <p>

  594.     <a rel=prev href="/david/stream/2019/12/24/">← Outils</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a>

  595.   </p>

  596. </nav>

  597. 

  598. <footer>

  599.   <div>

  600.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  601.     <p>

  602.       Bonjour/Hi!

  603.       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>

  604.       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>).

  605.     </p>

  606.     <p>

  607.       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>.

  608.     </p>

  609.     

  610.       <p>

  611.         Les dernières publications hebdomadaires sont :

  612.       </p>

  613.       <ul class="with_columns">

  614.         

  615.           <li>

  616.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  617.           </li>

  618.         

  619.           <li>

  620.             <a href="/david/stream/2019/12/24/">Outils</a>

  621.           </li>

  622.         

  623.           <li>

  624.             <a href="/david/stream/2019/12/17/">Origines</a>

  625.           </li>

  626.         

  627.           <li>

  628.             <a href="/david/stream/2019/12/10/">Publier</a>

  629.           </li>

  630.         

  631.           <li>

  632.             <a href="/david/stream/2019/12/03/">En forêt</a>

  633.           </li>

  634.         

  635.           <li>

  636.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  637.           </li>

  638.         

  639.           <li>

  640.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  641.           </li>

  642.         

  643.           <li>

  644.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  645.           </li>

  646.         

  647.           <li>

  648.             <a href="/david/stream/2019/11/05/">Positif</a>

  649.           </li>

  650.         

  651.           <li>

  652.             <a href="/david/stream/2019/10/29/">Dettes</a>

  653.           </li>

  654.         

  655.           <li>

  656.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  657.           </li>

  658.         

  659.           <li>

  660.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  661.           </li>

  662.         

  663.           <li>

  664.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  665.           </li>

  666.         

  667.           <li>

  668.             <a href="/david/stream/2019/10/01/">Présent</a>

  669.           </li>

  670.         

  671.           <li>

  672.             <a href="/david/stream/2019/09/24/">Manifester</a>

  673.           </li>

  674.         

  675.           <li>

  676.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  677.           </li>

  678.         

  679.           <li>

  680.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  681.           </li>

  682.         

  683.           <li>

  684.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  685.           </li>

  686.         

  687.           <li>

  688.             <a href="/david/stream/2019/08/27/">Documenter</a>

  689.           </li>

  690.         

  691.           <li>

  692.             <a href="/david/stream/2019/08/20/">Frustration</a>

  693.           </li>

  694.         

  695.           <li>

  696.             <a href="/david/stream/2019/08/13/">Holisme</a>

  697.           </li>

  698.         

  699.           <li>

  700.             <a href="/david/stream/2019/08/06/">1%</a>

  701.           </li>

  702.         

  703.           <li>

  704.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  705.           </li>

  706.         

  707.           <li>

  708.             <a href="/david/stream/2019/07/23/">Timelines</a>

  709.           </li>

  710.         

  711.           <li>

  712.             <a href="/david/stream/2019/07/16/">Écoute</a>

  713.           </li>

  714.         

  715.           <li>

  716.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  717.           </li>

  718.         

  719.           <li>

  720.             <a href="/david/stream/2019/06/21/">À lier</a>

  721.           </li>

  722.         

  723.           <li>

  724.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  725.           </li>

  726.         

  727.           <li>

  728.             <a href="/david/stream/2019/06/07/">Amateur</a>

  729.           </li>

  730.         

  731.           <li>

  732.             <a href="/david/stream/2019/05/31/">Pollution</a>

  733.           </li>

  734.         

  735.           <li>

  736.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  737.           </li>

  738.         

  739.           <li>

  740.             <a href="/david/stream/2019/05/10/">Folie</a>

  741.           </li>

  742.         

  743.           <li>

  744.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  745.           </li>

  746.         

  747.           <li>

  748.             <a href="/david/stream/2019/04/12/">Péremption</a>

  749.           </li>

  750.         

  751.           <li>

  752.             <a href="/david/stream/2019/04/05/">Définitions</a>

  753.           </li>

  754.         

  755.           <li>

  756.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  757.           </li>

  758.         

  759.           <li>

  760.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  761.           </li>

  762.         

  763.           <li>

  764.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  765.           </li>

  766.         

  767.           <li>

  768.             <a href="/david/stream/2019/03/08/">Lecture</a>

  769.           </li>

  770.         

  771.           <li>

  772.             <a href="/david/stream/2019/03/01/">Journaux</a>

  773.           </li>

  774.         

  775.           <li>

  776.             <a href="/david/stream/2019/02/22/">Écriture</a>

  777.           </li>

  778.         

  779.           <li>

  780.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  781.           </li>

  782.         

  783.           <li>

  784.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  785.           </li>

  786.         

  787.           <li>

  788.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  789.           </li>

  790.         

  791.           <li>

  792.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  793.           </li>

  794.         

  795.           <li>

  796.             <a href="/david/stream/2019/01/18/">Agilité</a>

  797.           </li>

  798.         

  799.           <li>

  800.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  801.           </li>

  802.         

  803.           <li>

  804.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  805.           </li>

  806.         

  807.       </ul>

  808.     

  809.     <p>

  810.       Voici quelques articles choisis :

  811.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  812.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  813.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  814.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  815.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  816.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  817.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  818.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  819.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  820.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  821.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  822.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  823.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  824.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  825.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  826.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  827.     </p>

  828.     <p>

  829.       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>.

  830.     </p>

  831.     <p>

  832.       Je ne traque pas ta navigation mais mon

  833.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  834.       conserve des logs d’accès.

  835.     </p>

  836.   </div>

  837. </footer>

  838. <script type="text/javascript">

  839.   ;(_ => {

  840.     const jumper = document.getElementById('jumper')

  841.     jumper.addEventListener('click', e => {

  842.       e.preventDefault()

  843.       const anchor = e.target.getAttribute('href')

  844.       const targetEl = document.getElementById(anchor.substring(1))

  845.       targetEl.scrollIntoView({behavior: 'smooth'})

  846.     })

  847.   })()

  848. </script>

  849. 

  850.   <script>

  851.   /* Service workers */

  852.   if (navigator.serviceWorker) {

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

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

  855.       function sendLinks (selector) {

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

  857.           return link.getAttribute('href')

  858.         })

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

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

  861.       }

  862.       navigator.serviceWorker.getRegistration()

  863.         .then(function (registration) {

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

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

  866.               .then(navigator.serviceWorker.ready)

  867.               .then(function () {

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

  869.               })

  870.               .catch(console.error.bind(console))

  871.           } else {

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

  873.             sendLinks(selector)

  874.           }

  875.         })

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

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

  878.         sendLinks(selector)

  879.       })

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

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

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

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

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

  885.           

  886.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  887.           

  888.         }

  889.       })

  890.     })

  891.   } else {

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

  893.   }

  894. </script>