Browse Source

Implement dark theme for cached articles too

master
David Larlet 1 month ago
parent
commit
1cc0cc7759
100 changed files with 9238 additions and 119 deletions
  1. 93
    1
      cache/2020/02b1967f7086ab2d3eb84d2ce8129e95/index.html
  2. 93
    1
      cache/2020/02c4fd680fe2704b27f59a71a269b3db/index.html
  3. 210
    0
      cache/2020/032142ee0df638618a8b145cb7ea9ebc/index.html
  4. 37
    0
      cache/2020/032142ee0df638618a8b145cb7ea9ebc/index.md
  5. 93
    1
      cache/2020/0fd34b15eca024dc3997303386b7476e/index.html
  6. 93
    1
      cache/2020/10a0e890ada0487e0adf4548960f056f/index.html
  7. 93
    1
      cache/2020/154a7a62b2eb5b0fbe17673fd7cbcf42/index.html
  8. 93
    1
      cache/2020/17aa5580eb34f39f214e4a72458c535e/index.html
  9. 93
    1
      cache/2020/195a2ecd81fa25a7cf43248b809bf724/index.html
  10. 93
    1
      cache/2020/1d190443e06aa99b44dd2a4d55b1b58e/index.html
  11. 93
    1
      cache/2020/1f01bec376e6423e9ea08aef6af23a34/index.html
  12. 93
    1
      cache/2020/2343cdf9e5f75cc6bfba098799f0f2fd/index.html
  13. 93
    1
      cache/2020/2390380d879c04ee56baf320b6f7e681/index.html
  14. 93
    1
      cache/2020/23b142e6e8edf164de61e003291e4619/index.html
  15. 93
    1
      cache/2020/24f52bba99b1423102f93cf86b948c5b/index.html
  16. 93
    1
      cache/2020/25289703cb4dd3023c087715cddf6d55/index.html
  17. 93
    1
      cache/2020/2857bcda24e61cd80229ec230ee3d2b1/index.html
  18. 93
    1
      cache/2020/2c6ccd57b9f0f1c39706013d026de507/index.html
  19. 106
    14
      cache/2020/2ebe3ac9e09d2d0ca91f9814d7b56c4d/index.html
  20. 12
    12
      cache/2020/2ebe3ac9e09d2d0ca91f9814d7b56c4d/index.md
  21. 93
    1
      cache/2020/3006691afcf79e8a0fa83b2f0f64e91a/index.html
  22. 93
    1
      cache/2020/3146f1a5743de3217adc3bc854897aaf/index.html
  23. 93
    1
      cache/2020/31652af3fd4757154c51aadcbe9ffb39/index.html
  24. 93
    1
      cache/2020/31d18361d64bd5e98d4199f2f40d2a4d/index.html
  25. 93
    1
      cache/2020/322e7a8997c732a5fdca0baaea7b9ede/index.html
  26. 93
    1
      cache/2020/331eb17ffb3f4fbb5fdd8123c0dc1eeb/index.html
  27. 93
    1
      cache/2020/384b330b3de6f4f2bac8c81f0f04c404/index.html
  28. 188
    0
      cache/2020/395e363cffff4e9c6b33633bc726f1e2/index.html
  29. 36
    0
      cache/2020/395e363cffff4e9c6b33633bc726f1e2/index.md
  30. 93
    1
      cache/2020/3fc386b9b57aa937db0a1883502b9ab8/index.html
  31. 93
    1
      cache/2020/4218c8b3332d61d6702bb2bd73ea9944/index.html
  32. 93
    1
      cache/2020/42616669988094757bf9d4864ee4ab4f/index.html
  33. 93
    1
      cache/2020/42b02cc81a7fface539dfb3397f0a464/index.html
  34. 93
    1
      cache/2020/46bb95c9d128d4ca05d8b5746cf3f4e7/index.html
  35. 93
    1
      cache/2020/47f2c0c2984a00e8a6041232f4e87e1f/index.html
  36. 93
    1
      cache/2020/4bda6c744ffb55c0fc4f4bf1f740b4e3/index.html
  37. 93
    1
      cache/2020/4be675592f4f6dcf636812263e9e1233/index.html
  38. 93
    1
      cache/2020/4bf3df418cd5d6e14bc6e1b2bda9b12d/index.html
  39. 93
    1
      cache/2020/4c5cc5e59531ef04e068c883a1a0e166/index.html
  40. 93
    1
      cache/2020/4d81a301bbb7936312cd16e6674f3ff6/index.html
  41. 93
    1
      cache/2020/4f88ece170719f58ce09ba4b1818730a/index.html
  42. 93
    1
      cache/2020/50cdcad7054aa6777687db43157b9f0f/index.html
  43. 93
    1
      cache/2020/542585b2d85213911f91b498a643e010/index.html
  44. 93
    1
      cache/2020/566b71b4e3a0217d7a224f71aa255a35/index.html
  45. 93
    1
      cache/2020/58117f5865002118d6769cb0a7aa9786/index.html
  46. 93
    1
      cache/2020/58add7873e65625beba4c859d40a278b/index.html
  47. 93
    1
      cache/2020/59dac1925636ebf6358c3a598bf834f9/index.html
  48. 93
    1
      cache/2020/5a82172cc73bfc2050a2590b4d81e82d/index.html
  49. 93
    1
      cache/2020/5abb317f078fc9f585712bfa3f772504/index.html
  50. 93
    1
      cache/2020/5c374b4df521b1ef44c86cd9a3cc022f/index.html
  51. 93
    1
      cache/2020/5db0711c2794aed3bf1433b48084064c/index.html
  52. 93
    1
      cache/2020/5ddeb776b27bade5f581d66e40de4c6c/index.html
  53. 93
    1
      cache/2020/5de73fee2ee649cb44f623c5d2b28a2f/index.html
  54. 93
    1
      cache/2020/618f913d970fee8feadadd15cf282e5a/index.html
  55. 93
    1
      cache/2020/63396398249526e12072e828b8641030/index.html
  56. 93
    1
      cache/2020/662f4136a25b828f662a6e822d85575d/index.html
  57. 93
    1
      cache/2020/6723325d9229f986f6b77cc5ff6d3ef2/index.html
  58. 93
    1
      cache/2020/67c8c54b07137bcfc0069fccd8261b53/index.html
  59. 93
    1
      cache/2020/685842ac9d1a3206af33dbd51d08cbf0/index.html
  60. 93
    1
      cache/2020/73a689d4932b2952affd040014e9b85b/index.html
  61. 93
    1
      cache/2020/73dc1ad4719144f3768002aa5cef60ef/index.html
  62. 93
    1
      cache/2020/73f93e0e8e7810a36d88555c2cbfa573/index.html
  63. 93
    1
      cache/2020/77c968588b2e605d5b3050c45af53603/index.html
  64. 93
    1
      cache/2020/77db8cc6de2906f31a4d37d91a47a3aa/index.html
  65. 93
    1
      cache/2020/7cdc8defab9f52baa06e657ffa9db057/index.html
  66. 93
    1
      cache/2020/7e8f31c1021b2049977e3c92d3a3b356/index.html
  67. 93
    1
      cache/2020/7f71531b565d7a8b0a99100786687cfd/index.html
  68. 93
    1
      cache/2020/7f74e315811927454830814bcb659896/index.html
  69. 93
    1
      cache/2020/81585c1eca04b8e13fa1d096f70c96ec/index.html
  70. 93
    1
      cache/2020/82e58e715a4ddb17b2f9e2a023005b1a/index.html
  71. 93
    1
      cache/2020/85e0f968f6ac8dfdd76c7a76df6ef088/index.html
  72. 93
    1
      cache/2020/86939b13f2cea3d1ffbaa5b544fe5e45/index.html
  73. 93
    1
      cache/2020/874765e437a144748e9438d272b1177a/index.html
  74. 93
    1
      cache/2020/8d7e08c54e30cc6d35375da17e6a61c0/index.html
  75. 93
    1
      cache/2020/911b72ae5d6e140268adf8591aae7df3/index.html
  76. 93
    1
      cache/2020/91a099e7f48f8733274f7b27cb68b772/index.html
  77. 93
    1
      cache/2020/99c5bddeed5760b748ba9b219270d75d/index.html
  78. 93
    1
      cache/2020/9a3fecdca72af16f1403b9e77b6e8e04/index.html
  79. 93
    1
      cache/2020/a015cd984c70f739bf51aa6b2a80d141/index.html
  80. 93
    1
      cache/2020/a1ba10f6326b0ed4c9ca343a214f671d/index.html
  81. 93
    1
      cache/2020/a38442a0e3e291d654793c384e17e737/index.html
  82. 93
    1
      cache/2020/a70068c881eba36604b2f4f8aec54670/index.html
  83. 93
    1
      cache/2020/a72c83494fc6636cde5b73bd2b064958/index.html
  84. 93
    1
      cache/2020/a9155966aed8a47ec727d156bf8b5458/index.html
  85. 93
    1
      cache/2020/abb215ff6b7cb9c876db622d42385aca/index.html
  86. 93
    1
      cache/2020/ac3266635585d387973da1c64b546990/index.html
  87. 93
    1
      cache/2020/ad8fd9818243ad950a794021d3dc794c/index.html
  88. 93
    1
      cache/2020/af5d5f52466dfc2f59718294faa07418/index.html
  89. 93
    1
      cache/2020/afb9fa99e3c43324fbe57b416562b8f9/index.html
  90. 93
    1
      cache/2020/b33f1c0179a41a26c9c75499fdc970d8/index.html
  91. 93
    1
      cache/2020/b4edfe74a826089b329de71ea9c9b8c1/index.html
  92. 93
    1
      cache/2020/bdc65ed9d2657f45d13d97186072b415/index.html
  93. 93
    1
      cache/2020/be1507ea944c6b8d0abd2a6c09efdc43/index.html
  94. 93
    1
      cache/2020/be8e81e9337d81e7a31a5cc1f4d38435/index.html
  95. 93
    1
      cache/2020/bfce8545a2d7c8d51d3af19f61208134/index.html
  96. 93
    1
      cache/2020/c1c53ee2ef8544ad798629bf8a3b7249/index.html
  97. 93
    1
      cache/2020/c8a8edb7bc65f4ed6b0edc18010434cc/index.html
  98. 93
    1
      cache/2020/cbef115a80c646c9eddc61ac077a6891/index.html
  99. 93
    1
      cache/2020/ceecad22409cbd161b85bf5f18b09413/index.html
  100. 0
    0
      cache/2020/cf5eab15b9590499ccb6d989f50fe5e3/index.html

+ 93
- 1
cache/2020/02b1967f7086ab2d3eb84d2ce8129e95/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>Être libres à l’époque du numérique</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="http://blog.sens-public.org/marcellovitalirosati/tre-libres-lpoque-du-numrique/">Source originale du contenu</a></h2>
<p><img src="https://mpng.pngfly.com/20190123/bst/kisspng-linux-libre-free-software-foundation-latin-america-download-freedo-svg-clipart-1-432-free-freedo-p-5c49402ceb6da7.6071370315483044289643.jpg"/>
<p>Nous parlons de plus en plus de « numérique » en substantivant un adjectif qui – initialement – comporte une signification technique précise et qui devient désormais davantage un phénomène culturel qu’une notion liée à des outils technologiques particuliers. Cette universalisation du numérique nous permet de comprendre des changements qui affectent l’ensemble de notre société et notre façon de penser, comme l’a bien expliqué notamment Milad Doueihi par son concept de <a href="https://via.hypothes.is/http://www.hup.harvard.edu/catalog.php?isbn=9780674055247">« culture numérique »</a>.</p>
@@ -119,7 +141,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/02c4fd680fe2704b27f59a71a269b3db/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>COVID-19, l’ami des dominants</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="http://www.ardeur.net/2020/04/covid-19-lami-des-dominants/">Source originale du contenu</a></h2>
<p align="JUSTIFY"><strong>COVID-19, l’ami des dominants : un texte écrit par <a href="http://www.ardeur.net/nos-coordonnees/" target="_blank" rel="noopener noreferrer">l’équipe de L’ardeur</a>, association d’éducation populaire politique</strong></p>

@@ -178,7 +200,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 210
- 0
cache/2020/032142ee0df638618a8b145cb7ea9ebc/index.html View File

@@ -0,0 +1,210 @@
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Datasette: A Developer, a Shower and a Data-Inspired Moment (archive) — David Larlet</title>
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
<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>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://thenewstack.io/datasette-a-developer-a-shower-and-a-data-inspired-moment/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
<h1>Datasette: A Developer, a Shower and a Data-Inspired Moment</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://thenewstack.io/datasette-a-developer-a-shower-and-a-data-inspired-moment/">Source originale du contenu</a></h2>
<p>We tend to think of open source as a community, even as an altruistic endeavor. But sometimes a project can be “aggressively open source,” as <a href="https://datasette.readthedocs.io/en/stable/" class="ext-link" rel="external ">Datasette</a> founder <a href="https://twitter.com/simonw" class="ext-link" rel="external ">Simon Willison</a> puts it, for a bunch of “very selfish reasons.” Willison has written a great deal of open source (e.g., co-creator of <a href="https://www.djangoproject.com/" class="ext-link" rel="external ">Django</a>) and proprietary (e.g., co-founder of <a href="https://en.wikipedia.org/wiki/Lanyrd" class="ext-link" rel="external ">Lanyrd</a>) software in his career, but says he turns to open source as a “creative outlet” that lets him retain a measure of independence, even as full-time employment may constrain it.</p>

<p>You heard that right: Open source doesn’t always need to save the world. It’s enough if it saves an individual developer’s sanity.</p>

<p>Of course, many others do benefit from Willison’s open source contributions. But even if they didn’t, Willison would continue to open source his code. Why? Because it pushes him to write better software even as it helps him keep current with the wide variety of projects — <a href="https://github.com/simonw" class="ext-link" rel="external ">285 repositories and counting </a>— to which he contributes. It’s an incredibly <a href="https://twitter.com/simonw/status/1259180306038308865" class="ext-link" rel="external ">efficient</a> way to build. Willison says that something he enjoys about open source is that for every problem he solves, he’ll never have to solve it again. “The code will be out there forever,” he says.</p>

<p>Indeed, Willison’s approach to open source offers deep insights into how to set up a project for maximum community benefit — even when it’s a community of one.</p>

<h2>Of Showers and Steam</h2>

<p>As Willison explained in an interview, his need for Datasette, a tool for exploring and publishing data, was clear to him in 2009 while working at The Guardian, a UK newspaper. There he helped start <a href="https://www.theguardian.com/news/datablog+technology/data-visualisation" class="ext-link" rel="external ">the data blog</a>, a place to publish the data behind The Guardian’s stories. Though Willison ended up using Google Sheets as a way to publish the underlying static data sets, he longed for a better way to publish and query that data.</p>

<p>Years later, he had his Datasette “shower moment.”</p>

<p>“It was literally a moment and I was literally in the shower,” he says.</p>

<p>First, he reasoned, cloud providers were making hosting dynamic code cheap and easy. Second, he could insert <a href="https://www.sqlite.org/index.html" class="ext-link" rel="external ">SQLite</a>, a widely used, public domain, relational database, into places normally uninhabited by databases.</p>

<p>“If I get SQLite, then export the data, and I bundle it in with a Docker container with a little app that can give you an interface and stuff … Maybe that’s a really interesting space to be exploring,” he says.</p>

<p>And it was. Datasette was born.</p>

<p>But Datasette wasn’t merely a matter of tackling a technical problem. It was also a way for Willison to express himself and to maintain independence. Throughout his career, Willison had found himself within larger organizations. Such employment brings privilege, but it also imposes a restraint on a developer’s ability to build. He says part of his reason for starting Datasette was to have a creative outlet.</p>

<p>“It was an opportunity for me to get really deep into technology again,” he explains. “I wanted a project where I got to decide what to build and have that as my own personal place. It was almost a way of blowing off steam.”</p>

<h2>Open Source Maintenance Group with a Population of One</h2>

<p>Today Datasette has roughly 30 contributors, but most of the work is done by Willison. He’s OK with that. In fact, it’s great, he says, because outside contributions aren’t an unalloyed good.</p>

<p>“There’s a dream that you wake up one morning and there’s a beautiful, shining pull request with a new feature, but actually, if that happens, it’s kind of stressful,” Willison says. “Because you then have to go through the code and review it to make sure it fits the wider model of what you’re trying to build.”</p>

<p>One alternative, he says, is a plug-in architecture, which he incorporated into Datasette almost from the start.</p>

<p>“The beautiful thing about plugins is that I don’t have to give anyone permission to load your plugin, and they don’t even have to talk to me,” Willison explains. He says he could wake up one morning, and Datasette will have a brand new feature, without him doing anything. “And it doesn’t cause any harm to the core if it’s low quality or if it doesn’t quite work,” he says.</p>

<p>Not only does this plug-in architecture protect the Datasette core from <em>others’</em> bad code, but it also protects the core from <em>Willison’s</em> bad code. “I have a lot of crazy ideas, and I don’t want to put those into the core because maybe they’re terrible ideas, but there’s no harm at all in me putting them into a plugin,” he says.</p>

<p>The dream is to become a bit like WordPress, whose plug-in architecture he modeled for Datasette. “WordPress is a very decent CMS with 7,000 plugins that mean it can do anything. I want Datasette to be a ‘decent sort of engine’ for data analysis and exploration with 7,000 plugins that mean that if you want a map or chart or all of these different things, it’s all available to you,” Willison says.</p>

<h2>Open Source for ‘Very Selfish Reasons’</h2>

<p>If Willison’s plug-in approach protects himself and others from bad code, his embrace of open source is perhaps the best way he’s found to ensure he writes good code in the first place.</p>

<p>“Datasette is aggressively open source for a bunch of reasons,” Willison says. “Most of them are very selfish reasons.”</p>

<p>For starters, he explains, he’s written a lot of closed source in his career, including while at Lanyrd, which he and his co-founder/wife Natalie Downe <a href="https://blog.natbat.net/post/61658401806/lanyrd-from-idea-to-exit-the-story-of-our" class="ext-link" rel="external ">sold to Eventbrite</a>. Once you leave that employer, however, you don’t get to use that software again in the future, Willison says.</p>

<p>He points out that even if you’re writing software on your own and not for your employer, if it’s not open source you don’t really build it with a mind to having other people use it, which means it can go stale. When working in the open, by contrast, Willison says, “It forces me to write good code. It forces me to write really good documentation.” Not to mention great unit tests.</p>

<p>That documentation, including associated comments, helps to tell the story of his code. While that may prove useful for outside contributors, docs also helps Willison to pick up where he leaves off. Willison maintains 73 open source projects, and he says the only way you can maintain 73 projects is if you treat every single one of them as if you’re not a core maintainer. Each must have a ReadMe and tests and detailed issue threads discussing what he was working on. “Because then you can drop back into them after a six-month gap and be productive with them,” he says.</p>

<p>“I’m an open source maintenance group with a population of one,” Willison says. “I’m taking the lessons I learned [at Eventbrite], a 600-engineer organization, and applying them to a one-engineer organization.”</p>

<p>A moment of truth now looms for Willison. For the past year, he’s been a <a href="https://jsk.stanford.edu/" class="ext-link" rel="external ">John S. Knight Journalism Fellow</a> at Stanford University, getting paid to tinker with his Datasette dream. His current thought is to do freelance development using Datasette to solve interesting problems related to data journalism for a variety of organizations, which he says could be a great way to figure out what the software should do.</p>

<p>Are you interested in helping Willison shape the future of data journalism? Visit the <a href="https://datasette.readthedocs.io/en/stable/" class="ext-link" rel="external ">Datasette page</a> to contribute code, thoughts, documentation, and more.</p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil">🏠</a> •
<a href="/david/log/" title="Accès au flux RSS">🤖</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 37
- 0
cache/2020/032142ee0df638618a8b145cb7ea9ebc/index.md View File

@@ -0,0 +1,37 @@
title: Datasette: A Developer, a Shower and a Data-Inspired Moment
url: https://thenewstack.io/datasette-a-developer-a-shower-and-a-data-inspired-moment/
hash_url: 032142ee0df638618a8b145cb7ea9ebc

<p>We tend to think of open source as a community, even as an altruistic endeavor. But sometimes a project can be “aggressively open source,” as <a href="https://datasette.readthedocs.io/en/stable/" class="ext-link" rel="external ">Datasette</a> founder <a href="https://twitter.com/simonw" class="ext-link" rel="external ">Simon Willison</a> puts it, for a bunch of “very selfish reasons.” Willison has written a great deal of open source (e.g., co-creator of <a href="https://www.djangoproject.com/" class="ext-link" rel="external ">Django</a>) and proprietary (e.g., co-founder of <a href="https://en.wikipedia.org/wiki/Lanyrd" class="ext-link" rel="external ">Lanyrd</a>) software in his career, but says he turns to open source as a “creative outlet” that lets him retain a measure of independence, even as full-time employment may constrain it.</p>
<p>You heard that right: Open source doesn’t always need to save the world. It’s enough if it saves an individual developer’s sanity.</p>
<p>Of course, many others do benefit from Willison’s open source contributions. But even if they didn’t, Willison would continue to open source his code. Why? Because it pushes him to write better software even as it helps him keep current with the wide variety of projects — <a href="https://github.com/simonw" class="ext-link" rel="external ">285 repositories and counting </a>— to which he contributes. It’s an incredibly <a href="https://twitter.com/simonw/status/1259180306038308865" class="ext-link" rel="external ">efficient</a> way to build. Willison says that something he enjoys about open source is that for every problem he solves, he’ll never have to solve it again. “The code will be out there forever,” he says.</p>
<p>Indeed, Willison’s approach to open source offers deep insights into how to set up a project for maximum community benefit — even when it’s a community of one.</p>
<h2>Of Showers and Steam</h2>
<p>As Willison explained in an interview, his need for Datasette, a tool for exploring and publishing data, was clear to him in 2009 while working at The Guardian, a UK newspaper. There he helped start <a href="https://www.theguardian.com/news/datablog+technology/data-visualisation" class="ext-link" rel="external ">the data blog</a>, a place to publish the data behind The Guardian’s stories. Though Willison ended up using Google Sheets as a way to publish the underlying static data sets, he longed for a better way to publish and query that data.</p>
<p>Years later, he had his Datasette “shower moment.”</p>
<p>“It was literally a moment and I was literally in the shower,” he says.</p>
<p>First, he reasoned, cloud providers were making hosting dynamic code cheap and easy. Second, he could insert <a href="https://www.sqlite.org/index.html" class="ext-link" rel="external ">SQLite</a>, a widely used, public domain, relational database, into places normally uninhabited by databases.</p>



<p>“If I get SQLite, then export the data, and I bundle it in with a Docker container with a little app that can give you an interface and stuff … Maybe that’s a really interesting space to be exploring,” he says.</p>
<p>And it was. Datasette was born.</p>
<p>But Datasette wasn’t merely a matter of tackling a technical problem. It was also a way for Willison to express himself and to maintain independence. Throughout his career, Willison had found himself within larger organizations. Such employment brings privilege, but it also imposes a restraint on a developer’s ability to build. He says part of his reason for starting Datasette was to have a creative outlet.</p>
<p>“It was an opportunity for me to get really deep into technology again,” he explains. “I wanted a project where I got to decide what to build and have that as my own personal place. It was almost a way of blowing off steam.”</p>
<h2>Open Source Maintenance Group with a Population of One</h2>
<p>Today Datasette has roughly 30 contributors, but most of the work is done by Willison. He’s OK with that. In fact, it’s great, he says, because outside contributions aren’t an unalloyed good.</p>
<p>“There’s a dream that you wake up one morning and there’s a beautiful, shining pull request with a new feature, but actually, if that happens, it’s kind of stressful,” Willison says. “Because you then have to go through the code and review it to make sure it fits the wider model of what you’re trying to build.”</p>
<p>One alternative, he says, is a plug-in architecture, which he incorporated into Datasette almost from the start.</p>
<p>“The beautiful thing about plugins is that I don’t have to give anyone permission to load your plugin, and they don’t even have to talk to me,” Willison explains. He says he could wake up one morning, and Datasette will have a brand new feature, without him doing anything. “And it doesn’t cause any harm to the core if it’s low quality or if it doesn’t quite work,” he says.</p>
<p>Not only does this plug-in architecture protect the Datasette core from <em>others’</em> bad code, but it also protects the core from <em>Willison’s</em> bad code. “I have a lot of crazy ideas, and I don’t want to put those into the core because maybe they’re terrible ideas, but there’s no harm at all in me putting them into a plugin,” he says.</p>
<p>The dream is to become a bit like WordPress, whose plug-in architecture he modeled for Datasette. “WordPress is a very decent CMS with 7,000 plugins that mean it can do anything. I want Datasette to be a ‘decent sort of engine’ for data analysis and exploration with 7,000 plugins that mean that if you want a map or chart or all of these different things, it’s all available to you,” Willison says.</p>
<h2>Open Source for ‘Very Selfish Reasons’</h2>
<p>If Willison’s plug-in approach protects himself and others from bad code, his embrace of open source is perhaps the best way he’s found to ensure he writes good code in the first place.</p>
<p>“Datasette is aggressively open source for a bunch of reasons,” Willison says. “Most of them are very selfish reasons.”</p>
<p>For starters, he explains, he’s written a lot of closed source in his career, including while at Lanyrd, which he and his co-founder/wife Natalie Downe <a href="https://blog.natbat.net/post/61658401806/lanyrd-from-idea-to-exit-the-story-of-our" class="ext-link" rel="external ">sold to Eventbrite</a>. Once you leave that employer, however, you don’t get to use that software again in the future, Willison says.</p>
<p>He points out that even if you’re writing software on your own and not for your employer, if it’s not open source you don’t really build it with a mind to having other people use it, which means it can go stale. When working in the open, by contrast, Willison says, “It forces me to write good code. It forces me to write really good documentation.” Not to mention great unit tests.</p>
<p>That documentation, including associated comments, helps to tell the story of his code. While that may prove useful for outside contributors, docs also helps Willison to pick up where he leaves off. Willison maintains 73 open source projects, and he says the only way you can maintain 73 projects is if you treat every single one of them as if you’re not a core maintainer. Each must have a ReadMe and tests and detailed issue threads discussing what he was working on. “Because then you can drop back into them after a six-month gap and be productive with them,” he says.</p>
<p>“I’m an open source maintenance group with a population of one,” Willison says. “I’m taking the lessons I learned [at Eventbrite], a 600-engineer organization, and applying them to a one-engineer organization.”</p>
<p>A moment of truth now looms for Willison. For the past year, he’s been a <a href="https://jsk.stanford.edu/" class="ext-link" rel="external ">John S. Knight Journalism Fellow</a> at Stanford University, getting paid to tinker with his Datasette dream. His current thought is to do freelance development using Datasette to solve interesting problems related to data journalism for a variety of organizations, which he says could be a great way to figure out what the software should do.</p>
<p>Are you interested in helping Willison shape the future of data journalism? Visit the <a href="https://datasette.readthedocs.io/en/stable/" class="ext-link" rel="external ">Datasette page</a> to contribute code, thoughts, documentation, and more.</p>

+ 93
- 1
cache/2020/0fd34b15eca024dc3997303386b7476e/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>Coronavirus : l’étonnante politique de la Suède</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://www.contrepoints.org/2020/04/28/370150-coronavirus-letonnante-politique-de-la-suede">Source originale du contenu</a></h2>
<p><strong>Par Johan Norberg, depuis la Suède.</strong></p>

@@ -158,7 +180,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/10a0e890ada0487e0adf4548960f056f/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>How To Keep Believing in the Internet</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://jenmyers.net/daily/how-to-keep-believing-in-the-internet.html">Source originale du contenu</a></h2>
<p>About three weeks into the new year, I figured out that my personal internet was too loud. By “personal internet,” I mean my regular round of Twitter, websites and other social media. I don’t consume as much online as some people do, or even as much as I used to myself, and for a long time, this had me convinced that my time on the internet was harmless and not worth examining. Until I did examine it. And ended up taking a month’s vacation from much of it.</p>

@@ -70,7 +92,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/154a7a62b2eb5b0fbe17673fd7cbcf42/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>Computers as I used to love them</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://tonsky.me/blog/syncthing/">Source originale du contenu</a></h2>
<p>I’ve been struggling with file sync solutions <a href="https://tonsky.livejournal.com/323469.html">for years</a>. In the beginning, Dropbox was great, but in the last few years, they started to bloat up. I moved to iCloud, but it was even worse. Finally, a few days ago, after iCloud <a href="https://twitter.com/nikitonsky/status/1269741673715810304">cryptically broke again</a>, I decided it’s time to try something different.</p>

@@ -311,7 +333,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/17aa5580eb34f39f214e4a72458c535e/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>Thinking about the past, present, and future of web development</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://www.baldurbjarnason.com/past-present-future-web/">Source originale du contenu</a></h2>
<p class="decking">You're supposed to talk about the past, present, and future in the new year, right?</p>

@@ -141,7 +163,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/195a2ecd81fa25a7cf43248b809bf724/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>Honesty is the best policy</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://hankchizljaw.com/wrote/honesty-is-the-best-policy/">Source originale du contenu</a></h2>
<p><strong>Update - 6 February, 2020</strong>: Gatsby have now clarified their position by deleting <em>“a single image is often bigger than a JavaScript bundle”</em>, only with no explanation on why. As is increasingly the case, <code>trust--</code>.</p>

@@ -58,7 +80,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/1d190443e06aa99b44dd2a4d55b1b58e/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>The Secretive Company That Might End Privacy as We Know It</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://www.nytimes.com/2020/01/18/technology/clearview-privacy-facial-recognition.html">Source originale du contenu</a></h2>
<p class="css-1npvhc5 e1wiw3jv0">A little-known start-up helps law enforcement match photos of unknown people to their online images — and “might lead to a dystopian future or something,” a backer says.</p>

@@ -122,7 +144,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/1f01bec376e6423e9ea08aef6af23a34/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>Bill Gates' nuclear venture hits snag amid U.S. restrictions on China deals: WSJ</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://www.reuters.com/article/us-terrapower-china-idUSKCN1OV1S5">Source originale du contenu</a></h2>
<p>NEW YORK (Reuters) - TerraPower LLC, a nuclear energy venture chaired by Microsoft Corp co-founder Bill Gates, is seeking a new partner for early-stage trials of its technology after new U.S. rules forced it to abandon an agreement with China, company officials told the Wall Street Journal. </p>

@@ -66,7 +88,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/2343cdf9e5f75cc6bfba098799f0f2fd/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>A Future with No Future: Depression, the Left, and the Politics of Mental Health</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://lareviewofbooks.org/article/future-no-future-depression-left-politics-mental-health/">Source originale du contenu</a></h2>
<p><em>[W]e find that we endogenously produce our incapacity to even try, grow sick and depressed and motionless under all the merciless and circulatory conditions of all the capitalist yes and just can’t, even if we thought we really wanted to.</em></p>

@@ -144,7 +166,77 @@ Together.</em></p>
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/2390380d879c04ee56baf320b6f7e681/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>Twelve Million Phones, One Dataset, Zero Privacy</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://www.nytimes.com/interactive/2019/12/19/opinion/location-tracking-cell-phone.html">Source originale du contenu</a></h2>
<p>
<strong>Every minute of every day,</strong> everywhere on the planet, dozens of companies — largely unregulated, little scrutinized — are logging the movements of tens of millions of people with mobile phones and storing the information in gigantic data files. The Times <a href="https://www.nytimes.com/privacy-project">Privacy Project</a> obtained one such file, by far the largest and most sensitive ever to be reviewed by journalists. It holds more than 50 billion location pings from the phones of more than 12 million Americans as they moved through several major cities, including Washington, New York, San Francisco and Los Angeles.
@@ -411,7 +433,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/23b142e6e8edf164de61e003291e4619/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>Unreal Engine 5 is meant to ridicule web developers</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://www.theolognion.com/unreal-engine-5-is-meant-to-ridicule-web-developers/">Source originale du contenu</a></h2>
<p>Our sources report that the underlying reason behind the impressive tech demo for Unreal Engine 5  by Epic Games is to ridicule web developers. </p>

@@ -66,7 +88,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/24f52bba99b1423102f93cf86b948c5b/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>Journal-Lightweight</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://adactio.com/journal/16797">Source originale du contenu</a></h2>
<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>

@@ -110,7 +132,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
toggleTheme(selectedTheme)
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 93
- 1
cache/2020/25289703cb4dd3023c087715cddf6d55/index.html View File

@@ -23,7 +23,7 @@
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
@@ -31,6 +31,22 @@
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
@@ -41,6 +57,12 @@

<article>
<h1>What’s up with me?</h1>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
</p>
</nav>
<hr>
<h2><a href="https://helloanselm.com/writings/whats-up-with-me">Source originale du contenu</a></h2>
<p>I’ve turned pretty silent over the past months here and on Twitter. And there’s a bunch of reasons for it that I now want to share.</p>

@@ -90,7 +112,77 @@
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend>Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
<script type="text/javascript">
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild