A place to cache linked articles (think custom and personal wayback machine)
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.

index.html 12KB

  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Journal-Lightweight (archive) — David Larlet</title>
  13. <!-- That good ol' feed, subscribe :). -->
  14. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  15. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  16. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  17. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  18. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  19. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  20. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  21. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  22. <meta name="msapplication-TileColor" content="#f0f0ea">
  23. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- Documented, feel free to shoot an email. -->
  26. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  27. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  28. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <script type="text/javascript">
  35. function toggleTheme(themeName) {
  36. document.documentElement.classList.toggle(
  37. 'forced-dark',
  38. themeName === 'dark'
  39. )
  40. document.documentElement.classList.toggle(
  41. 'forced-light',
  42. themeName === 'light'
  43. )
  44. }
  45. const selectedTheme = localStorage.getItem('theme')
  46. if (selectedTheme !== 'undefined') {
  47. toggleTheme(selectedTheme)
  48. }
  49. </script>
  50. <meta name="robots" content="noindex, nofollow">
  51. <meta content="origin-when-cross-origin" name="referrer">
  52. <!-- Canonical URL for SEO purposes -->
  53. <link rel="canonical" href="https://adactio.com/journal/16797">
  54. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  55. <article>
  56. <h1>Journal-Lightweight</h1>
  57. <nav>
  58. <p class="center">
  59. <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  60. </p>
  61. </nav>
  62. <hr>
  63. <h2><a href="https://adactio.com/journal/16797">Source originale du contenu</a></h2>
  64. <p>It’s been fascinating to see how television programmes have adapted to The Situation. It’s like there’s been a weird inversion with the YouTube asthetic. Instead of YouTubers doing their utmost to emulate the look of professional television, now everyone on professional television looks like a YouTuber.</p>
  65. <p>No more lighting or audio technicians. No more studio audiences. Heck, no more studios.</p>
  66. <p>There are some kinds of TV programmes that are showing the strain. A lot of comedy formats just fall flat without the usual production values. But a lot of programmes work just fine. In fact, some of them might be better. Watching <a href="https://www.theguardian.com/books/2020/apr/15/margaret-atwood-showcase-gothic-puppet-show-mary-beard-bbc">Mary Beard present <cite>Front Row Late</cite></a> from her house is an absolute delight. It feels more direct and honest without the artiface of a television studio. It kind of makes you wonder whether expensive production costs are really necessary when what you really care about is the content.</p>
  67. <p>All of this is one big belaboured metaphor for websites.</p>
  68. <p>In times of crisis, informational websites sometimes offer a “lite” version. Max has even made an <a href="https://mxb.dev/blog/emergency-website-kit/">emergency website kit</a>:</p>
  69. <blockquote>
  70. <p>The site contains only the bare minimum - no webfonts, no tracking, no unnecessary images. The entire thing should fit in a single HTTP request. It’s basically just a small, ultra-lean blog focused on maximum resilience and accessibility. The Service Worker takes it a step further from there so if you’ve visited the site once, the information is still accessible even if you lose network coverage.</p>
  71. </blockquote>
  72. <p>Eric emphasises the importance of performance in his post <a href="https://meyerweb.com/eric/thoughts/2020/03/22/get-static/"><cite>Get Static</cite></a>:</p>
  73. <blockquote>
  74. <p>I’m thinking here of sites for places like health departments (and pretty much all government services), hospitals and clinics, utility services, food delivery and ordering, and I’m sure there are more that haven’t occurred to me.  As much as you possibly can, get it down to static HTML and CSS and maybe a tiny bit of enhancing JS, and pare away every byte you can.</p>
  75. </blockquote>
  76. <p>Tom Loosemore offers this <a href="https://twitter.com/tomskitomski/status/1241009376653012993">advice to teams building new coronavirus services</a>:</p>
  77. <blockquote>
  78. <ol>
  79. <li>Get a 4 year-old Android phone, and use it as your test/demo device.
  80. </li><li><a href="https://design-system.service.gov.uk">https://design-system.service.gov.uk</a> is your friend. </li>
  81. <li>Full React isn’t your friend if it makes your service slow &amp; inaccessible</li>
  82. </ol>
  83. <p>Remember: This is for everyone.</p>
  84. </blockquote>
  85. <p>Indeed, Gov.uk are usually a paragon of best practices in just about any situation. But they dropped the ball recently, as <a href="https://twitter.com/dracos/status/1251836594509791232">Matthew attests</a>:</p>
  86. <blockquote>
  87. <p><a href="https://coronavirus.data.gov.uk">coronavirus.data.gov.uk</a> is a static site, fetching and displaying remote data. It is also a 100% client-side JavaScript React site.</p>
  88. <p><a href="http://dracos.co.uk/made/coronavirus.data.gov.uk/">http://dracos.co.uk/made/coronavirus.data.gov.uk/</a> is 238K vs 770K (basics) on load. I’ve removed about 550K of JavaScript. It seems to work the same.</p>
  89. </blockquote>
  90. <p><a href="https://tom.loosemore.com/2020/04/19/shonky-coronavirus-react/">As Tom says</a>:</p>
  91. <blockquote>
  92. <p>One sign that your website isn’t meeting the needs of all your users is when <a href="http://dracos.co.uk/">Matthew Somerville</a> gets sufficiently grumpy about it to do a proper version himself.</p>
  93. </blockquote>
  94. <p>It’s true enough that Matthew excels at creating lightweight, accessible versions of services that are too bloated or buggy to use. His <a href="http://www.dracos.co.uk/odeon/">accessible Odeon</a> project from back in the day is legendary. And I use his slimline version of the National Rail website all the time: <a href="https://traintimes.org.uk">traintimes.org.uk</a>—it’s a <a href="https://traintimes.org.uk/notes/performance">terrificly performant</a> progressive web app.</p>
  95. <p><a href="https://twitter.com/dracos/status/1168856479782379520">It’s thankless work though</a>. It flies in the face of everything considered “modern” web development. (If you want to know the cost of “modern” framework-driven JavaScript-first web development, <a href="https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/">Tim has the numbers</a>.) <a href="https://twitter.com/adactio/status/256551142">But Matthew is kind of a hero to me</a>. I wish more developers would follow his example.</p>
  96. <p>Maybe now, with this rush to make lightweight versions of valuable services, we might stop and reflect on whether we ever really needed all those added extras in the first place.</p>
  97. <p>Hope springs eternal.</p>
  98. <p><strong>Update</strong>: Matthew has written about his process in <a href="http://dracos.co.uk/wrote/coronavirus-dashboard/">Looking at coronavirus.data.gov.uk</a>.</p>
  99. </article>
  100. <hr>
  101. <footer>
  102. <p>
  103. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  104. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  105. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  106. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  107. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  108. </p>
  109. <template id="theme-selector">
  110. <form>
  111. <fieldset>
  112. <legend>Thème</legend>
  113. <label>
  114. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  115. </label>
  116. <label>
  117. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  118. </label>
  119. <label>
  120. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  121. </label>
  122. </fieldset>
  123. </form>
  124. </template>
  125. </footer>
  126. <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
  127. <script type="text/javascript">
  128. function loadThemeForm(templateName) {
  129. const themeSelectorTemplate = document.querySelector(templateName)
  130. const form = themeSelectorTemplate.content.firstElementChild
  131. themeSelectorTemplate.replaceWith(form)
  132. form.addEventListener('change', (e) => {
  133. const chosenColorScheme = e.target.value
  134. localStorage.setItem('theme', chosenColorScheme)
  135. toggleTheme(chosenColorScheme)
  136. })
  137. const selectedTheme = localStorage.getItem('theme')
  138. if (selectedTheme !== 'undefined') {
  139. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  140. toggleTheme(selectedTheme)
  141. }
  142. }
  143. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  144. window.addEventListener('load', () => {
  145. let hasDarkRules = false
  146. for (const styleSheet of Array.from(document.styleSheets)) {
  147. let mediaRules = []
  148. for (const cssRule of styleSheet.cssRules) {
  149. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  150. continue
  151. }
  152. // WARNING: Safari does not have/supports `conditionText`.
  153. if (cssRule.conditionText) {
  154. if (cssRule.conditionText !== prefersColorSchemeDark) {
  155. continue
  156. }
  157. } else {
  158. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  159. continue
  160. }
  161. }
  162. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  163. }
  164. // WARNING: do not try to insert a Rule to a styleSheet you are
  165. // currently iterating on, otherwise the browser will be stuck
  166. // in a infinite loop…
  167. for (const mediaRule of mediaRules) {
  168. styleSheet.insertRule(mediaRule.cssText)
  169. hasDarkRules = true
  170. }
  171. }
  172. if (hasDarkRules) {
  173. loadThemeForm('#theme-selector')
  174. }
  175. })
  176. </script>
  177. </body>
  178. </html>