davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Browse Source

Links

master
David Larlet 1 month ago
parent
23ef3486cb
commit
a8fe8c5860
Signed by: David Larlet <david@larlet.fr> GPG Key ID: 3E2953A359E7E7BD
7 changed files with 691 additions and 0 deletions
Split View Show Diff Stats
  1. 182
    0
      cache/2024/09cfcfafab15ad576de8b32d0046fb93/index.html
  2. 15
    0
      cache/2024/09cfcfafab15ad576de8b32d0046fb93/index.md
  3. 215
    0
      cache/2024/2c027efb3689a1067c7f32a659fd4092/index.html
  4. 10
    0
      cache/2024/2c027efb3689a1067c7f32a659fd4092/index.md
  5. 215
    0
      cache/2024/41e9f48de9ccd2449bceca518fff8606/index.html
  6. 48
    0
      cache/2024/41e9f48de9ccd2449bceca518fff8606/index.md
  7. 6
    0
      cache/2024/index.html

+ 182
- 0
cache/2024/09cfcfafab15ad576de8b32d0046fb93/index.html View File

@@ -0,0 +1,182 @@
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
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>Anti-Ad-Block (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- 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="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.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>
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://lmnt.me/blog/anti-ad-block.html">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>Anti-Ad-Block</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://lmnt.me/blog/anti-ad-block.html" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-03-12
</p>
</nav>
<hr>
<p>I know a lot of people hate anti-ad-block popups, but to me they are perfect.</p>
<p>In presenting those popups, those websites demonstrate that they realize the lack of control they have. They show us so plainly that they are unable to make money from us, which leaves them no option but to grovel and beg us to turn off ad-blocking.</p>
<p>It makes me feel good to have that be acknowledged.</p>
<p>When we use web browsers, <strong>we</strong> are in more control than <strong>they</strong> are. That’s simply not the case when we’re inside an app they get to control.</p>
<p>In a web browser, we can remove their ability to extract value from us. Those popups don’t make me want to turn off my ad-blocker. They make me want to close the tab.</p>
<p>Once again, it should be said that personal sites are where it’s at, because personal blogs are not trying to pull this kind of stupid shit.</p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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-5.1.0.min.js" type="module"></script>
<script>
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 && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

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>

+ 15
- 0
cache/2024/09cfcfafab15ad576de8b32d0046fb93/index.md View File

@@ -0,0 +1,15 @@
title: Anti-Ad-Block
url: https://lmnt.me/blog/anti-ad-block.html
hash_url: 09cfcfafab15ad576de8b32d0046fb93
archive_date: 2024-03-12
og_image:
description: I know a lot of people hate anti-ad-block popups, but to me they are perfect.
favicon: https://lmnt.me/lmnt.png
language: en_US

<p>I know a lot of people hate anti-ad-block popups, but to me they are perfect.</p>
<p>In presenting those popups, those websites demonstrate that they realize the lack of control they have. They show us so plainly that they are unable to make money from us, which leaves them no option but to grovel and beg us to turn off ad-blocking.</p>
<p>It makes me feel good to have that be acknowledged.</p>
<p>When we use web browsers, <strong>we</strong> are in more control than <strong>they</strong> are. That’s simply not the case when we’re inside an app they get to control.</p>
<p>In a web browser, we can remove their ability to extract value from us. Those popups don’t make me want to turn off my ad-blocker. They make me want to close the tab.</p>
<p>Once again, it should be said that personal sites are where it’s at, because personal blogs are not trying to pull this kind of stupid shit.</p>

+ 215
- 0
cache/2024/2c027efb3689a1067c7f32a659fd4092/index.html View File

@@ -0,0 +1,215 @@
<!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` element
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>Appel à intérêt pour un bureau d’enregistrement coopératif (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- 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="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.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>
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://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>Appel à intérêt pour un bureau d’enregistrement coopératif</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-03-12
</p>
</nav>
<hr>
<p data-block-key="csryn">TLDR :</p>
<ul><li data-block-key="e1615">nous lançons un projet pour gérer des noms de domaines dans une nouvelle coopérative</li><li data-block-key="607sp">répondez à <a href="https://hashbang.coop/formulaire-dinteret-pour-un-bureau-denregistrement-cooperatif/">ce court formulaire</a> pour nous aider ou nous rejoindre</li></ul>
<p data-block-key="76is0">Le 28 février 2023, je postais le sondage suivant sur Mastodon :</p>
<blockquote data-block-key="7p3at">Qui serait partant·e pour participer (ou être client·e) du premier registrar sous forme de société coopérative d'intérêt collectif ?<br><a href="https://framapiaf.org/@arthru/109942709471820424">28 févr. 2023, 14:56</a> - <a href="https://framapiaf.org/@arthru">@arthru@framapiaf.org</a></blockquote>
<p data-block-key="as4gn">809 personnes ont répondu, dont 465 (57,4784 %) ont répondu positivement, 26 (3,21384 %) ont répondu négativement, et 318 (39,3078 %) étaient juste curieux ou curieuses.</p>
<p data-block-key="1fj4i">Fun fact : la somme des pourcentages sur mastodon ne fait pas 100 %, j'ai dû aller fouiller le style dans le html pour trouver les pourcentages exactes qui donnent bien 100 % et 809 répondant·e·s.</p>
<h2 data-block-key="9uhkr">Qu'est ce qu'un registrar ?</h2>
<p data-block-key="ap4fs">Un bureau d'enregistrement ou un registraire de nom de domaine, ou un registrar en anglais, est en charge de la gestion et de la commercialisation d'un nom de domaine entre un registre (en anglais Network Information Center, NIC) et un·e client·e, qui en a alors l'usage pendant une durée donnée.</p>
<p data-block-key="ec1b5">Le nom de domaine est un élément fondamentale d'internet, car il fait le lien entre un nom compréhensible humainement, et une adresse IP composée de 4 nombres entre 0 et 256 séparés par des . (points) en IPv4, ou 8 groupes de 4 caractères entre 0 et 9 et entre A et F, séparés par des : (deux points) en IPv6. Il est utilisé pour accèder à un site web, pour envoyer et recevoir des emails, et beaucoup plus généralement sur internet.</p>
<p data-block-key="d4hrn">Le registrar vend l'usage des noms de domaine, et inclus en général l'hébergement DNS (le protocole permettant de faire ce lien entre nom de adresse). Il propose généralement l'hébergement mail et l'hébergement web.</p>
<p data-block-key="b83r8">Le nom de domaine est alors un produit d'appel pour d'autres services à plus forte valeur ajoutée.</p>
<h2 data-block-key="1qmn9">Quel est le problème des registrars actuels ?</h2>
<p data-block-key="2mknt">Les registraires actuels sont des entreprises commerciales à but lucratif. Cela signifie que les personnes détenant ces entreprises décident des tarifs appliquées, des services proposés et du support, le marché guidant leurs décisions.</p>
<p data-block-key="62aer">Lorsque j'ai publié le sondage, c'était en réaction à l'annonce de la vente de Gandi à Total Webhosting Solutions. Des craintes avaient alors été publiées à propos de la hausse des prix et de la baisse de qualité qui pourraient avoir lieu chez Gandi suite à ce rachat, ce qui aurait déjà été constaté suite à d'autres rachats de la part de Total Webhosting Solutions.</p>
<p data-block-key="35ol0">Je n'ai pas personnellement constaté de baisse de qualité, mais il y a bien eu une hausse des prix : des boites mails précédemment inclues avec l'achat du nom de domaine ne l'étaient plus, et ont maintenant un tarif qu'on peut juger élevé.</p>
<p data-block-key="d9bmh">EDIT : j'ai participé à un comité de pilotage informatique du Groupement Régional Alimentaire de Proximité où nous avons parlé ½h des problèmes de disponibilité et de délivrabilité de Gandi Mail...</p>
<p data-block-key="1b5ku">Cette situation illustre la problématique : un registrar peut changer de politique du jour au lendemain sans prendre en considération ses usagers et usagères.</p>
<h2 data-block-key="1tlr">Comment une société coopérative d'intérêt collectif (SCIC) peut résoudre ce problème ?</h2>
<p data-block-key="crrat">Une SCIC est une coopérative qui associe obligatoirement autour d'un projet des salarié·e·s, des bénéficiaires et des contributeurs ou contributrices pour produire des services d'intérêt collectif au profit d'un territoire ou d'une filière d'activités.</p>
<p data-block-key="1bdbr">Dans notre cas, il s'agirait de regrouper les personnes qui utilisent des noms de domaines dans leurs activités professionnelles ou personnelles autour de la gestion (achat et exploitation) de ces noms de domaines.</p>
<p data-block-key="eim8o">Une SCIC suit le principes démocratique « une personne, une voix », sans prendre en compte le nombre de parts sociales (actions) détenues au capital. Ainsi, chaque personne associée peut faire porter sa voix pour les décisions de la coopérative.</p>
<p data-block-key="3ocvf">Une SCIC ne peut pas être vendue : seule la coopérative peut mettre en vente ou racheter des parts sociales. Elle ne peut donc pas être vendue à un fond d'investissement ou à un groupe plus important qui décidera seul des politiques tarifaires ou des niveaux de service.</p>
<p data-block-key="8ta7h">C'est également un rempart contre la spéculation financière : les parts ne peuvent pas être vendues à un tiers, et le prix de vente ne peut être supérieur à la valeur nominale de la part sociale.</p>
<h2 data-block-key="6ofr0">Quelle proposition de valeur ?</h2>
<p data-block-key="aelia">Ce qu'Hashbang propose est de créer un registrar sous forme de SCIC avec en plus un processus participatif pour définir les services et leurs tarifs. Le premier service proposé sera certainement le nom de domaine, mais personne ne peut actuellement définir quel tarif sera proposé. Ce sera issu d'un processus participatif en fonction des participant·e·s au départ.</p>
<p data-block-key="askb5">Chez Hashbang, nous portons un regard attentif aux enjeux environnementaux et nous proposons donc de mesurer et limiter l'impact environnemental des activités du registrar.</p>
<p data-block-key="1kn9n">Nous souhaitons également s'assurer qu'il n'y ait pas de discriminations et que les personnes minorisé·e·s puissent s'emparer de cet espace. Il faut donc s'attendre à ce qu'il y ait des événements en mixité choisie et du langage inclusif.</p>
<p data-block-key="9dm7j">La sécurité doit être de mise pour un service de gestion de nom de domaine : DNSSEC, TLS, TOTP seront de la partie.</p>
<p data-block-key="a8nnf">Les performances et la résilience seront également à prendre en compte. Nous devons assurer une disponibilité importante pour le DNS, qui est une infrastructure de base pour les client·e·s.</p>
<p data-block-key="1pm84">Une politique d'achats responsables sera également mis en place, privilégiant le reconditionné, le local (avec une échelle à définir) et l'Économie Sociale et Solidaire.</p>
<p data-block-key="dbt08">EDIT : c'était tellement évident que ça a été oublié : seul du logiciel libre sera utilisé et produit. </p>
<h2 data-block-key="5r1dj">Pourquoi ça a mis tant de temps à démarrer ?</h2>
<p data-block-key="9mlms">Il a fallu un an pour monter en compétence et savoir comment tout ça pourrait être fait, commencer à discuter à des structures d'accompagnement et de financement.</p>
<p data-block-key="518kl">J'ai pu suivre une formation d'administration DNS dispensée par l'AFNIC (♥ Stéphane Bortzmeyer), me former sur EPP, DNSSEC, étudier les procédures d'accréditation des différents registres, réfléchir à une architecture Anycast, me questionner sur BGP, sur les Address Space utilisables, etc... (ouais, j'ai dumpé des mots clefs).</p>
<p data-block-key="cj0t">Pour les structures d'accompagnement, l'URSCOP AURA est la structure idéale pour accompagner un projet de création de SCIC. Cette association a les méthodes nécessaires pour accompagner et financer un tel projet collectif.</p>
<p data-block-key="3e0p1">Mais...</p>
<p data-block-key="4cc4v">Il y a un mais...</p>
<p data-block-key="9jjfr">Créer une SCIC nécessite d'être plusieurs, et aujourd'hui, il n'y a qu'Hashbang pour porter ce projet. Nous cherchons donc en priorité les futures clientes et clients et des personnes pouvant travailler dans la coopérative et la soutenir financièrement.</p>
<p data-block-key="4tu4">Nous avons donc mis en place <a href="/formulaire-dinteret-pour-un-bureau-denregistrement-cooperatif/">un formulaire pour commencer à récolter les contacts des personnes intéressées</a>. Merci de le remplir et de le partager dans vos réseaux !</p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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-5.1.0.min.js" type="module"></script>
<script>
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 && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

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>

+ 10
- 0
cache/2024/2c027efb3689a1067c7f32a659fd4092/index.md
File diff suppressed because it is too large
View File


+ 215
- 0
cache/2024/41e9f48de9ccd2449bceca518fff8606/index.html View File

@@ -0,0 +1,215 @@
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
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>Time for a refresh! (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- 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="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.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>
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://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>Time for a refresh!</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-03-12
</p>
</nav>
<hr>
<div class="post-excerpt"><p>It has been a while since I last changed the theme of this blog! Seems that with all the time spent at home in the last three months, I had some new blog posts ideas, but blogging on the old boring theme was not so motivating. So I made a this one by combining some open source libs.</p></div>

<div class="post-content"><p>The main idea here is to mimic an annotated article done with LaTeX<sup id="fnref:0"><a href="#fn:0">0</a></sup>. I reused several open source components:</p>

<ul>
<li><a href="https://latex.now.sh/" hreflang="en">LaTeX.css</a>: the main style of this theme</li>
<li><a href="https://roughnotation.com/" hreflang="en">Rough Notation</a>: this library is providing all the annotations: underline, highlight, circle, etc.</li>
<li><a href="https://github.com/goblindegook/littlefoot" hreflang="en">Littlefoot</a>: A library to provide nice footnotes</li>
<li><a href="https://pidila.gitlab.io/scampi/" hreflang="fr">Scampi</a>: I only used the skip-links module of this library.</li>
</ul>

<p>Moreover, I wanted to have a more personal touch, so I created my own font based on my not so beautiful handwriting (I am a lefty, eh.) To do so, I used <a href="https://www.calligraphr.com/en/" hreflang="en">Calligraphr</a>, combined with <a href="https://procreate.art/">Procreate</a> on an iPad with an Apple Pencil. The result is not 100% accurate, since the font is still missing lots of ligatures, but I find it good enough for the effort. <span class="handwritten">What do you think?</span></p>

<p>I mapped some annotations provided by Rough Notation to html5 elements, for example:</p>

<ul>
<li><mark><code>mark</code></mark></li>
<li><s><code>s</code> (strikethrough)</s></li>
<li><strong><code>strong</code></strong></li>
<li>
<blockquote><code>blockquote</code> for long quotes with lost of stuff to say, not like here for example.</blockquote>
</li>
</ul>

<p>I wanted to be able to annotate articles with some side notes<sup id="fnref:1"><a href="#fn:1">1</a></sup>. These notes are okay on desktop when there is space in the side margins, but on mobile we don’t have this space. I discovered the <a href="http://www.bigfootjs.com/" hreflang="en">bigfoot</a> library<sup id="fnref:2"><a href="#fn:2">2</a></sup>, which creates “pop over” notes, but this library did not seem to be maintained since 4 years and it was still depending on jQuery. I thus found an alternative in the <a href="https://github.com/goblindegook/littlefoot" hreflang="en">littlefoot</a> library, which is still maintained and does not depend on jQuery. I may add at a later stage the side notes feature on desktop. I still have some stuff to fix here and there in this theme, but globally this is it!</p>
<div class="footnotes">
<ol>
<li class="footnote" id="fn:0">
<p>I really like LaTeX, but I don&#8217;t have so many occasions to use it these days. <a aria-label="return to article" href="#fnref:0" title="return to article"> ↩</a></p>
</li>
<li class="footnote" id="fn:1">
<p>The kind of stuff that happens regularly when you annotate a document. <a aria-label="return to article" href="#fnref:1" title="return to article"> ↩</a></p>
</li>
<li class="footnote" id="fn:2">
<p>and the <a href="https://plugins.dotaddict.org/dc2/details/bigfoot" hreflang="fr">corresponding plugin</a> for <a href="https://www.dotclear.org">dotclear</a> by <a href="https://www.open-time.net/" hreflang="fr">Franck</a> <a aria-label="return to article" href="#fnref:2" title="return to article"> ↩</a></p>
</li>
</ol>
</div>
</div>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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-5.1.0.min.js" type="module"></script>
<script>
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 && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

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>

+ 48
- 0
cache/2024/41e9f48de9ccd2449bceca518fff8606/index.md View File

@@ -0,0 +1,48 @@
title: Time for a refresh!
url: https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21
hash_url: 41e9f48de9ccd2449bceca518fff8606
archive_date: 2024-03-12
og_image: https://vanschklift.com/themes/wip/img/android-icon-192x192.png
description: It has been a while since I last changed the theme of this blog! Seems that with all the time spent at home in the last three months, I had some new blog posts ideas, but blogging
favicon: https://vanschklift.com/themes/wip/img/android-icon-192x192.png
language: en_US
<div class="post-excerpt"><p>It has been a while since I last changed the theme of this blog! Seems that with all the time spent at home in the last three months, I had some new blog posts ideas, but blogging on the old boring theme was not so motivating. So I made a this one by combining some open source libs.</p></div>
<div class="post-content"><p>The main idea here is to mimic an annotated article done with LaTeX<sup id="fnref:0"><a href="#fn:0">0</a></sup>. I reused several open source components:</p>
<ul>
<li><a href="https://latex.now.sh/" hreflang="en">LaTeX.css</a>: the main style of this theme</li>
<li><a href="https://roughnotation.com/" hreflang="en">Rough Notation</a>: this library is providing all the annotations: underline, highlight, circle, etc.</li>
<li><a href="https://github.com/goblindegook/littlefoot" hreflang="en">Littlefoot</a>: A library to provide nice footnotes</li>
<li><a href="https://pidila.gitlab.io/scampi/" hreflang="fr">Scampi</a>: I only used the skip-links module of this library.</li>
</ul>
<p>Moreover, I wanted to have a more personal touch, so I created my own font based on my not so beautiful handwriting (I am a lefty, eh.) To do so, I used <a href="https://www.calligraphr.com/en/" hreflang="en">Calligraphr</a>, combined with <a href="https://procreate.art/">Procreate</a> on an iPad with an Apple Pencil. The result is not 100% accurate, since the font is still missing lots of ligatures, but I find it good enough for the effort. <span class="handwritten">What do you think?</span></p>
<p>I mapped some annotations provided by Rough Notation to html5 elements, for example:</p>
<ul>
<li><mark><code>mark</code></mark></li>
<li><s><code>s</code> (strikethrough)</s></li>
<li><strong><code>strong</code></strong></li>
<li>
<blockquote><code>blockquote</code> for long quotes with lost of stuff to say, not like here for example.</blockquote>
</li>
</ul>
<p>I wanted to be able to annotate articles with some side notes<sup id="fnref:1"><a href="#fn:1">1</a></sup>. These notes are okay on desktop when there is space in the side margins, but on mobile we don’t have this space. I discovered the <a href="http://www.bigfootjs.com/" hreflang="en">bigfoot</a> library<sup id="fnref:2"><a href="#fn:2">2</a></sup>, which creates “pop over” notes, but this library did not seem to be maintained since 4 years and it was still depending on jQuery. I thus found an alternative in the <a href="https://github.com/goblindegook/littlefoot" hreflang="en">littlefoot</a> library, which is still maintained and does not depend on jQuery. I may add at a later stage the side notes feature on desktop. I still have some stuff to fix here and there in this theme, but globally this is it!</p>
<div class="footnotes">
<ol>
<li class="footnote" id="fn:0">
<p>I really like LaTeX, but I don&#8217;t have so many occasions to use it these days. <a aria-label="return to article" href="#fnref:0" title="return to article"> ↩</a></p>
</li>
<li class="footnote" id="fn:1">
<p>The kind of stuff that happens regularly when you annotate a document. <a aria-label="return to article" href="#fnref:1" title="return to article"> ↩</a></p>
</li>
<li class="footnote" id="fn:2">
<p>and the <a href="https://plugins.dotaddict.org/dc2/details/bigfoot" hreflang="fr">corresponding plugin</a> for <a href="https://www.dotclear.org">dotclear</a> by <a href="https://www.open-time.net/" hreflang="fr">Franck</a> <a aria-label="return to article" href="#fnref:2" title="return to article"> ↩</a></p>
</li>
</ol>
</div>
</div>

+ 6
- 0
cache/2024/index.html View File

@@ -166,6 +166,8 @@
<li><a href="/david/cache/2024/f5b5c3dff862cc55318684cf434b8d74/" title="Accès à l’article dans le cache local : “We Are All Socialists in Our Private Lives”">“We Are All Socialists in Our Private Lives”</a> (<a href="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private" title="Accès à l’article original distant : “We Are All Socialists in Our Private Lives”">original</a>)</li>
<li><a href="/david/cache/2024/09cfcfafab15ad576de8b32d0046fb93/" title="Accès à l’article dans le cache local : Anti-Ad-Block">Anti-Ad-Block</a> (<a href="https://lmnt.me/blog/anti-ad-block.html" title="Accès à l’article original distant : Anti-Ad-Block">original</a>)</li>
<li><a href="/david/cache/2024/0deb984b2f799d391607afcaa488446d/" title="Accès à l’article dans le cache local : Announcing Interop 2024">Announcing Interop 2024</a> (<a href="https://hacks.mozilla.org/2024/02/announcing-interop-2024/" title="Accès à l’article original distant : Announcing Interop 2024">original</a>)</li>
<li><a href="/david/cache/2024/ffaf50bf5d5e4cf870a618b518ee5ba7/" title="Accès à l’article dans le cache local : Portable EPUBs">Portable EPUBs</a> (<a href="https://willcrichton.net/notes/portable-epubs/" title="Accès à l’article original distant : Portable EPUBs">original</a>)</li>
@@ -300,10 +302,14 @@
<li><a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Accès à l’article dans le cache local : Ma page /now (ou plutôt /en-ce-moment)">Ma page /now (ou plutôt /en-ce-moment)</a> (<a href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment" title="Accès à l’article original distant : Ma page /now (ou plutôt /en-ce-moment)">original</a>)</li>
<li><a href="/david/cache/2024/41e9f48de9ccd2449bceca518fff8606/" title="Accès à l’article dans le cache local : Time for a refresh!">Time for a refresh!</a> (<a href="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21" title="Accès à l’article original distant : Time for a refresh!">original</a>)</li>
<li><a href="/david/cache/2024/9b4b5364526390ba1db9c4a651ea8311/" title="Accès à l’article dans le cache local : Teaming is hard because you’re probably not really on a team">Teaming is hard because you’re probably not really on a team</a> (<a href="https://www.strategy-business.com/article/Teaming-is-hard-because-youre-probably-not-really-on-a-team" title="Accès à l’article original distant : Teaming is hard because you’re probably not really on a team">original</a>)</li>
<li><a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Accès à l’article dans le cache local : The UX of HTML ⚒ Nerd">The UX of HTML ⚒ Nerd</a> (<a href="https://vasilis.nl/nerd/the-ux-of-html/" title="Accès à l’article original distant : The UX of HTML ⚒ Nerd">original</a>)</li>
<li><a href="/david/cache/2024/2c027efb3689a1067c7f32a659fd4092/" title="Accès à l’article dans le cache local : Appel à intérêt pour un bureau d’enregistrement coopératif">Appel à intérêt pour un bureau d’enregistrement coopératif</a> (<a href="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/" title="Accès à l’article original distant : Appel à intérêt pour un bureau d’enregistrement coopératif">original</a>)</li>
<li><a href="/david/cache/2024/e58d4c2ceeab475aba6a179c035852f8/" title="Accès à l’article dans le cache local : Trois réponses sur ma thèse">Trois réponses sur ma thèse</a> (<a href="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/" title="Accès à l’article original distant : Trois réponses sur ma thèse">original</a>)</li>
<li><a href="/david/cache/2024/b1da1249f2db388d7e84d6ad23c2fc5d/" title="Accès à l’article dans le cache local : Data Luddism">Data Luddism</a> (<a href="https://www.danmcquillan.org/dataluddism.html" title="Accès à l’article original distant : Data Luddism">original</a>)</li>

Write Preview
Loading…
Cancel
Save