davidbgk
/
larlet-fr-david
Слідкувати 1
В обрані 0
Форк 0
Код Релізи 0 Активність
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
166 Коміти
1 Гілка
Дерево: 1b4e49a404
Гілки Теги
${ item.name }
Створити гілку ${ searchTerm }
з '1b4e49a404'
${ noResults }
larlet-fr-david/david/blog/2017/without-javascript/index.html

index.html 29KB
Неформатований Blame Історія

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816 
  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>Without JavaScript — 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/blog/2017/without-javascript/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Rethink what you are doing from the ground up. Challenge your value(s)." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Rethink what you are doing from the ground up. Challenge your value(s)." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Without JavaScript" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2017/without-javascript/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2017/without-javascript.jpg" />

  41. 

  42. 

  43. <style>

  44. /* http://meyerweb.com/eric/tools/css/reset/ */

  45. html, body, div, span,

  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  47. a, abbr, address, big, cite, code,

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

  50. dl, dt, dd, ol, ul, li,

  51. fieldset, form, label, legend,

  52. table, caption, tbody, tfoot, thead, tr, th, td,

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

  55. menu, nav, output, ruby, section, summary,

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

  64. /* HTML5 display-role reset for older browsers */

  65. article, aside, details, figcaption, figure,

  66. footer, header, hgroup, menu, nav, section { display: block; }

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   Without JavaScript

  468.   <time>Publié le 18 juillet 2017</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>js;dr = JavaScript required; Didn’t Read.</p>

  473. <p>Pages that are empty without JS: dead to history (archive-org), unreliable for search results (despite any search engine claims of JS support, check it yourself), and thus ignorable. No need to waste time reading or responding.</p>

  474. <p>Also known as, if it’s not curlable, it’s not on the web.</p>

  475. <p><cite><em><a href="http://tantek.com/2015/069/t1/js-dr-javascript-required-dead">js;dr = JavaScript required; Didn’t Read</a></em> (<a href="/david/cache/54c056e1f90f272adbbc22bd5e8635f8/">cache</a>)</cite></p>

  476. </blockquote>

  477. <p><em>Transcript of a 5 minutes <a href="https://en.wikipedia.org/wiki/Ignite_%28event%29">ignite talk</a> at the Montreal <a href="https://www.meetup.com/fr-FR/a11yMTL/events/241309071/">accessibility meetup</a>.</em></p>

  478. <p>There has been a lot of discussions related to JavaScript within our community. The topic is way more vast than just the accessibility question. I’m here to share with you my own (non-)usage of JavaScript. I’m not deactivating JS completely, actually I’m doing something worse: I combine both <a href="https://github.com/StevenBlack/hosts/">hosts configuration</a> and <a href="https://github.com/gorhill/uMatrix">uMatrix</a> to avoid loading most of JavaScript files either from ad-related servers or from content delivery networks (CDNs).</p>

  479. <p>Needless to say that my web is quite empty. My feeling is that one page out of three does not load correctly and one out of ten is left totally blank (e.g. a <a href="https://developer.uber.com/">documentation for developers</a> that requires JS to be loaded, WTF.). Why on earth do I inflict that to myself?!</p>

  480. <p>There are many reasons actually:</p>

  481. <ol>

  482. <li>Ethics. I’m a Web developer and if I want to fix something I need to be aware of how wide a thing is broken. It impacts my future choices. Really. And it drives interesting discussions with my peers when we have to depend on JS and/or a CDN.</li>

  483. <li>Security. Wait, what?! Yes, <a href="https://blog.acolyer.org/2017/03/07/thou-shalt-not-depend-on-me-analysing-the-use-of-outdated-javascript-libraries-on-the-web/">about four pages out of ten “include at least one library with a known vulnerability”</a> (<a href="/david/cache/666ebda4e267afdfbf97aeb17b7f2526/">cache</a>). That is just crazy.</li>

  484. <li>Tracking. Each and every time you link to a CDN you give all your statistics to another company. Think about it. As a user, I don’t want to be tracked.</li>

  485. <li>Connectivity. “All your users are non-JS while they’re downloading your JS” famously quoted <a href="https://twitter.com/jaffathecake/status/207096228339658752">Jake Archibald</a> and there are <a href="https://kryogenix.org/code/browser/everyonehasjs.html">a lot more reasons</a> for JavaScript not loading correctly (more on that later).</li>

  486. <li>Performances. This is just unbelievable how fast a (blank :p) page can render. Ditch your bloated JS and trillions of call to ad-servers and you will not even need AMP.</li>

  487. <li>Business. Are we creating a Wealthy Western Web (<a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/">part1</a> (<a href="/david/cache/568bad728250c11de1b89f52296b0035/">cache</a>), <a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/">part2</a> (<a href="/david/cache/1b0501a28e2d80b8f8dfa3789903b753/">cache</a>)) or do we take into consideration the next billion of users/customers? Hint: they will not have an iPhone 7 with a high bandwidth connection.</li>

  488. <li>Empathy (some might say accessibility). Your users can be subject to bad connectivity (transportation, countryside and so on), hanging HTTP requests for sub-resources, under a corporate firewall or worse if a wifi access/provider modifying JS on-the-fly. They can even have addons/plugins altering the DOM in a way you did not anticipate.</li>

  489. <li>Empathy. Again. Bad usage of JS can be nauseous/disturbing for people <a href="https://axesslab.com/accessibility-according-to-pwd/">suffering from ADHD, autism, dyslexia or visually challenged</a> (<a href="/david/cache/b8c48710bfa47017b012c6bcd961ec11/">cache</a>).</li>

  490. </ol>

  491. <blockquote>

  492. <p>We’re building on a web littered with too-heavy sites, on an internet that’s unevenly, unequally distributed. That’s why designing a lightweight, inexpensive digital experience is a form of kindness.</p>

  493. <p><cite><em><a href="https://ethanmarcotte.com/wrote/designed-lines/">Designed lines.</a></em> (<a href="/david/cache/865803be5e65ba063421193f3787ece3/">cache</a>)</cite></p>

  494. </blockquote>

  495. <p>When making something readable/usable is turned into “kindness” by the community, it makes me think that we broke something in our culture. Oh and it makes me cry a little as a Web developer.</p>

  496. <p>The answer to all that is <a href="https://jakearchibald.com/2013/progressive-enhancement-still-important/">progressive enhancement</a> (<a href="/david/cache/8ab1036c933fd4ae50e8f6a349a928c0/">cache</a>) even years later. But sometimes you do NOT even need all that. <strong>Rethink what you are doing from the ground up. Challenge your value(s).</strong> And remember that <a href="http://uxmag.com/articles/we-re-just-temporarily-abled">“We’re all just temporarily abled.”</a> (<a href="/david/cache/257acc9fe0cdbf4c75e913ee0bbc89b4/">cache</a>), let’s stop shooting ourselves in the foot each and every day.</p>

  497. <blockquote>

  498. <p>I do think modern web development has gone down a deeply unwise path. Only through exercising our personal choices can we bring it back. We have mostly stopped the web from being a hellhole of shitty punch the money adverts by blocking the living shit out of adverts. JavaScript is becoming the new conduit for awfulness. I like the web too much to have to endure any more of it when not strictly necessary.</p>

  499. <p><cite><em><a href="https://tommorris.org/posts/8677">Why I’m turning JavaScript off by default</a></em> (<a href="/david/cache/2e88519b5d93416e448efa463ade7e12/">cache</a>)</cite></p>

  500. </blockquote>

  501. </article>

  502. 

  503. 

  504.   <figure class="image" property="schema:image">

  505.     <img src="/static/david/blog/2017/without-javascript.jpg" alt="" />

  506.   </figure>

  507. 

  508. 

  509. 

  510. <nav id="jumpto">

  511.   <p>

  512.     <a rel=prev href="/david/blog/2017/sur-la-route/">← Sur la route</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2017/web-technique/">Web et technique →</a>

  513.   </p>

  514. </nav>

  515. 

  516. <footer>

  517.   <div>

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

  519.     <p>

  520.       Bonjour/Hi!

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

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

  523.     </p>

  524.     <p>

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

  526.     </p>

  527. 

  528.       <p>

  529.         Les dernières publications hebdomadaires sont :

  530.       </p>

  531.       <ul class="with_columns">

  532. 

  533.           <li>

  534.             <a href="/david/stream/2019/12/31/">Merci</a>

  535.           </li>

  536. 

  537.           <li>

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

  539.           </li>

  540. 

  541.           <li>

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

  543.           </li>

  544. 

  545.           <li>

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

  547.           </li>

  548. 

  549.           <li>

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

  551.           </li>

  552. 

  553.           <li>

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

  555.           </li>

  556. 

  557.           <li>

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

  559.           </li>

  560. 

  561.           <li>

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

  563.           </li>

  564. 

  565.           <li>

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

  567.           </li>

  568. 

  569.           <li>

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

  571.           </li>

  572. 

  573.           <li>

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

  575.           </li>

  576. 

  577.           <li>

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

  579.           </li>

  580. 

  581.           <li>

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

  583.           </li>

  584. 

  585.           <li>

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

  587.           </li>

  588. 

  589.           <li>

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

  591.           </li>

  592. 

  593.           <li>

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

  595.           </li>

  596. 

  597.           <li>

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

  599.           </li>

  600. 

  601.           <li>

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

  603.           </li>

  604. 

  605.           <li>

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

  607.           </li>

  608. 

  609.           <li>

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

  611.           </li>

  612. 

  613.           <li>

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

  615.           </li>

  616. 

  617.           <li>

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

  619.           </li>

  620. 

  621.           <li>

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

  623.           </li>

  624. 

  625.           <li>

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

  627.           </li>

  628. 

  629.           <li>

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

  631.           </li>

  632. 

  633.           <li>

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

  635.           </li>

  636. 

  637.           <li>

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

  639.           </li>

  640. 

  641.           <li>

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

  643.           </li>

  644. 

  645.           <li>

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

  647.           </li>

  648. 

  649.           <li>

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

  651.           </li>

  652. 

  653.           <li>

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

  655.           </li>

  656. 

  657.           <li>

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

  659.           </li>

  660. 

  661.           <li>

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

  663.           </li>

  664. 

  665.           <li>

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

  667.           </li>

  668. 

  669.           <li>

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

  671.           </li>

  672. 

  673.           <li>

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

  675.           </li>

  676. 

  677.           <li>

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

  679.           </li>

  680. 

  681.           <li>

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

  683.           </li>

  684. 

  685.           <li>

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

  687.           </li>

  688. 

  689.           <li>

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

  691.           </li>

  692. 

  693.           <li>

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

  695.           </li>

  696. 

  697.           <li>

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

  699.           </li>

  700. 

  701.           <li>

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

  703.           </li>

  704. 

  705.           <li>

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

  707.           </li>

  708. 

  709.           <li>

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

  711.           </li>

  712. 

  713.           <li>

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

  715.           </li>

  716. 

  717.           <li>

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

  719.           </li>

  720. 

  721.           <li>

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

  723.           </li>

  724. 

  725.           <li>

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

  727.           </li>

  728. 

  729.       </ul>

  730. 

  731.     <p>

  732.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  749.     </p>

  750.     <p>

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

  752.     </p>

  753.     <p>

  754.       Je ne traque pas ta navigation mais mon

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

  756.       conserve des logs d’accès.

  757.     </p>

  758.   </div>

  759. </footer>

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

  761.   ;(_ => {

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

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

  764.       e.preventDefault()

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

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

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

  768.     })

  769.   })()

  770. </script>

  771. 

  772.   <script>

  773.   /* Service workers */

  774.   if (navigator.serviceWorker) {

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

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

  777.       function sendLinks (selector) {

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

  779.           return link.getAttribute('href')

  780.         })

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

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

  783.       }

  784.       navigator.serviceWorker.getRegistration()

  785.         .then(function (registration) {

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

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

  788.               .then(navigator.serviceWorker.ready)

  789.               .then(function () {

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

  791.               })

  792.               .catch(console.error.bind(console))

  793.           } else {

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

  795.             sendLinks(selector)

  796.           }

  797.         })

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

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

  800.         sendLinks(selector)

  801.       })

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

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

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

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

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

  807. 

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

  809. 

  810.         }

  811.       })

  812.     })

  813.   } else {

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

  815.   }

  816. </script>