Article

david/2024/01/01/index.html

@@ -383,14 +383,13 @@ Pb : mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/02/index.html

@@ -425,14 +425,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/03/index.html

@@ -372,14 +372,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/04/index.html

@@ -392,14 +392,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/05/index.html

@@ -398,14 +398,13 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/06/index.html

@@ -392,14 +392,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/07/index.html

@@ -438,14 +438,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/08/index.html

@@ -435,14 +435,13 @@ a::before {
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/09/index.html

@@ -406,14 +406,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/10/index.html

@@ -490,14 +490,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/11/index.html

@@ -450,14 +450,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/12/index.html

@@ -515,14 +515,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/13/index.html

@@ -421,14 +421,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/14/index.html

@@ -416,14 +416,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/15/index.html

@@ -368,14 +368,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/16/index.html

@@ -390,14 +390,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/17/index.html

@@ -435,14 +435,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/18/index.html

@@ -364,14 +364,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/19/index.html

@@ -414,14 +414,13 @@ quelqu’un nous&nbsp;voit</p>
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/20/index.html

@@ -449,14 +449,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/21/index.html

@@ -394,14 +394,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/22/index.html

@@ -474,14 +474,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/23/index.html

@@ -398,14 +398,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/24/index.html

@@ -399,14 +399,13 @@ par nos&nbsp;obscurités</p>
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/25/index.html

@@ -400,14 +400,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/26/index.html

@@ -422,14 +422,13 @@ Des affects, qui constituent la nécessaire force motrice du mouvement que nous
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/27/index.html

@@ -421,14 +421,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/28/index.html

@@ -392,14 +392,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/29/index.html

@@ -505,14 +505,13 @@ git archive --remote=larlet-fr-david-cache.git master | tar -x -C larlet-fr/davi
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/30/index.html

@@ -411,14 +411,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/01/31/index.html

@@ -435,14 +435,13 @@ Représentant de l’entreprise /  Représentant de&nbsp;l’association</p>
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/01/index.html

@@ -437,14 +437,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/02/index.html

@@ -454,14 +454,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/03/index.html

@@ -438,14 +438,13 @@ end run
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/04/index.html

@@ -468,14 +468,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/05/index.html

@@ -376,14 +376,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/06/index.html

@@ -419,14 +419,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/07/index.html

@@ -391,14 +391,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/08/index.html

@@ -384,14 +384,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/09/index.html

@@ -376,14 +376,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/10/index.html

@@ -379,14 +379,13 @@ etc.</p>
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/11/index.html

@@ -366,14 +366,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/12/index.html

@@ -456,14 +456,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/13/index.html

@@ -410,14 +410,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/14/index.html

@@ -378,14 +378,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/15/index.html

@@ -422,14 +422,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/16/index.html

@@ -416,14 +416,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/17/index.html

@@ -387,14 +387,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/18/index.html

@@ -458,14 +458,13 @@ button.primary {
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/19/index.html

@@ -464,14 +464,13 @@ $ python3 -c 'import secrets; print(secrets.token_hex(100))'
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/20/index.html

@@ -403,14 +403,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/21/index.html

@@ -439,14 +439,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/22/index.html

@@ -405,14 +405,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/23/index.html

@@ -440,14 +440,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/24/index.html

@@ -392,14 +392,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/25/index.html

@@ -406,14 +406,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/26/index.html

@@ -423,14 +423,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/27/index.html

@@ -393,14 +393,13 @@ Et je sais enfin qui je&nbsp;suis…</p>
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/28/index.html

@@ -420,14 +420,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/02/29/index.html

@@ -425,14 +425,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/01/index.html

@@ -425,14 +425,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/02/index.html

@@ -395,14 +395,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/03/index.html

@@ -463,14 +463,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/04/index.html

@@ -376,14 +376,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/05/index.html

@@ -391,14 +391,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/06/index.html

@@ -420,14 +420,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/07/index.html

@@ -425,14 +425,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/08/index.html

@@ -407,14 +407,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/09/index.html

@@ -437,14 +437,13 @@ Lovée dans mes&nbsp;bras</p>
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/10/index.html

@@ -366,14 +366,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/11/index.html

@@ -152,6 +152,10 @@
          title="Aller à la page de recherche"
          rel="search" data-no-instant>Recherche</a>
       
+        • <a rel="next"
+            href="/david/2024/03/12/"
+            title="Publication suivante : Surligner">Suivant →</a>
+      
     </p>
   </nav>
   
@@ -258,6 +262,10 @@
       
       <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
       
+        • <a rel="next"
+            href="/david/2024/03/12/"
+            title="Publication suivante : Surligner">Suivant →</a>
+      
     </p>
   </nav>
 
@@ -423,14 +431,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',

david/2024/03/12/index.html

@@ -0,0 +1,470 @@
+<!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>
+    Surligner
+  — David Larlet</title>
+  <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>
+  <!-- Documented, feel free to shoot an email. -->
+  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
+  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
+  <link rel="preload"
+        href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <meta name="description" content="A small JavaScript library to create and animate annotations on a web page">
+  <!-- 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">
+  
+<style type="text/css">
+  .tippy-content {
+    min-width: 280px;
+    padding: .5rem;
+    font-size: calc(var(--fluid-0) * 0.8);
+    font-family: var(--labor-font);
+    letter-spacing: initial;
+    text-align: left;
+  }
+  .tippy-content h3 {
+    margin-top: 0;
+  }
+  .tippy-content h3 img {
+    max-width: 2rem;
+    max-height: 2rem;
+    display: inline-block;
+  }
+  .tippy-content .tippy-links {
+    display: flex;
+    justify-content: space-around;
+  }
+  .tippy-content a {
+    padding: .4rem;
+    color: #F06048;
+  }
+</style>
+
+  <body data-instant-intensity="viewport-all">
+    <article>
+      
+  <header>
+    <hgroup>
+      <h1>Surligner</h1>
+      <p>Le <time datetime="2024-03-12">12 mars 2024</time></p>
+    </hgroup>
+  </header>
+  <nav>
+    <p>
+      
+        <a rel="prev"
+           href="/david/2024/03/11/"
+           title="Publication précédente : LoginWall">← Précédent</a> •
+      
+      <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
+      •
+      <a href="/david/recherche/"
+         title="Aller à la page de recherche"
+         rel="search" data-no-instant>Recherche</a>
+      
+    </p>
+  </nav>
+  
+
+<blockquote lang="en">
+<p>A small JavaScript library <mark>to create and animate annotations on a web&nbsp;page</mark></p>
+<p>Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned&nbsp;off.</p>
+<p>Rough Notation is 3.8kb in size when gzipped, and the code is available on&nbsp;GitHub.</p>
+<p><cite><em><a data-link-domain="roughnotation.com" href="https://roughnotation.com/">Rough&nbsp;Notation</a></em></cite></p>
+</blockquote>
+<p>J’utilise cette façon de mettre en avant des fragments de citations <a href="/david/2020/02/21/#surlignage">depuis un petit moment</a> et en passant <a data-link-domain="vanschklift.com" href="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21" hreflang="en"
+            title="Consultation de l’article (anglais)">par chez Biou</a>
+            <a href="/david/cache/2024/41e9f48de9ccd2449bceca518fff8606/" hreflang="en"
+                data-tippy data-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"
+                data-source="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21"
+                data-date="2024-03-12"
+                data-favicon="https://vanschklift.com/themes/wip/img/android-icon-192x192.png"
+                data-domain="vanschklift.com"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a> aujourd’hui, j’ai trouvé l’effet bien sympathique. Je ne l’applique pour l’instant(?) que sur la balise <code>&lt;mark&gt;</code> (relativement inoffensif si ça casse), en respectant <code>prefers-reduced-motion</code> et en animant que lorsque la partie surlignée devient visible grâce à <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver">IntersectionObserver</a>.</p>
+<p>Cela peut se révéler être distrayant pour certaines personnes car ça bouge à un endroit éloigné du point de lecture (merci @maiwann), invisible pour d’autres qui chargent les onglets sans être dessus (merci @lamecarlate). Il s’agit d’une famille d’animations pas trop invasives, encore moins essentielles, qui peuvent se révéler être de fausses bonnes idées. Je vais tester pour un temps, toujours dans cette recherche d’aller <a href="/david/2024/03/09/#hr-106">vers un peu plus de fantaisie</a>.</p>
+<p>N’hésitez pas à me faire des&nbsp;retours.</p>
+<a href="#hr-110" title="Lien vers cette section de la page"><hr id="hr-110" /></a>
+
+<blockquote>
+<p>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é. <mark>Ce sera issu d’un processus participatif en fonction des participant·e·s au&nbsp;départ.</mark></p>
+<p>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&nbsp;registrar.</p>
+<p>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&nbsp;inclusif.</p>
+<p><cite><em><a data-link-domain="hashbang.coop" href="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/" hreflang="fr"
+            title="Consultation de l’article">Appel à intérêt pour un bureau d’enregistrement coopératif</a>
+            <a href="/david/cache/2024/2c027efb3689a1067c7f32a659fd4092/" hreflang="fr"
+                data-tippy data-description="Nous lançons un projet pour gérer des noms de domaines dans une nouvelle coopérative"
+                data-source="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/"
+                data-date="2024-03-12"
+                data-favicon="https://hashbang.coop/static/images/favicon.1d2088a755c9.ico"
+                data-domain="hashbang.coop"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a></em></cite></p>
+</blockquote>
+<p>Superbe initiative, coopératives pour&nbsp;tou·tes&#8239;!</p>
+<a href="#hr-111" title="Lien vers cette section de la page"><hr id="hr-111" /></a>
+
+<blockquote lang="en">
+<p>I know a lot of people hate anti-ad-block popups, but to me they are&nbsp;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&nbsp;ad-blocking.[…]</p>
+<p>When we use web browsers, <strong>we</strong> are in more control than <strong>they</strong> are. <mark>That’s simply not the case when we’re inside an app they get to&nbsp;control.</mark></p>
+<p><cite><em><a data-link-domain="lmnt.me" href="https://lmnt.me/blog/anti-ad-block.html" hreflang="en"
+            title="Consultation de l’article (anglais)">Anti-Ad-Block</a>
+            <a href="/david/cache/2024/09cfcfafab15ad576de8b32d0046fb93/" hreflang="en"
+                data-tippy data-description="I know a lot of people hate anti-ad-block popups, but to me they are perfect."
+                data-source="https://lmnt.me/blog/anti-ad-block.html"
+                data-date="2024-03-12"
+                data-favicon="https://lmnt.me/lmnt.png"
+                data-domain="lmnt.me"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a></em></cite></p>
+</blockquote>
+<p>Ma configuration à ce sujet est assez extrême et il n’est pas rare (surtout sur les boutiques&#8239;!) que je doive m’y reprendre à pas mal de fois pour débloquer les <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/js-bloat/" hreflang="en"
+            title="Consultation de l’article (anglais)">megabytes de JavaScript</a>
+            <a href="/david/cache/2024/ad911ebf7ba5523ef0be1bdd599f7623/" hreflang="en"
+                data-tippy data-description="What is the average size of JavaScript code downloaded per website? Fuck around and find out!"
+                data-source="https://tonsky.me/blog/js-bloat/"
+                data-date="2024-03-03"
+                data-favicon="https://tonsky.me/i/favicon.png"
+                data-domain="tonsky.me"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a> à télécharger qui sont pertinents, ou plutôt nécessaires aux personnes ayant développé ces sites. Car pour ma part, je n’aurais besoin que de HTML dans 99% des&nbsp;cas…</p>
+<p>…dit-il en venant d’ajouter 13Ko de&nbsp;JS&nbsp;😬.</p>
+
+  
+    <nav>
+      <p>
+        
+          <a href="/david/2024/partage/"
+             title="Liste de tous les articles 2024 associés à cette étiquette"
+             rel="tag">#partage</a>
+        
+          <a href="/david/2024/technique/"
+             title="Liste de tous les articles 2024 associés à cette étiquette"
+             rel="tag">#technique</a>
+        
+          <a href="/david/2024/web/"
+             title="Liste de tous les articles 2024 associés à cette étiquette"
+             rel="tag">#web</a>
+        
+        <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
+      </p>
+    </nav>
+  
+  <nav>
+    <p>
+      
+        <a rel="prev"
+           href="/david/2024/03/11/"
+           title="Publication précédente : LoginWall">← Précédent</a> •
+      
+      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
+      
+    </p>
+  </nav>
+
+      
+        <form action="/david/recherche/" method="get">
+          <fieldset>
+            <legend>Recherche</legend>
+            <label for="input-search">Termes de votre recherche :</label>
+            <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
+            <input type="submit" value="Chercher">
+            <p id="indexation-infos">
+              <small>
+                Seuls les contenus de ces 8 dernières années sont indexés.
+              </small>
+            </p>
+          </fieldset>
+        </form>
+      
+      <aside>
+        <theme-toggle></theme-toggle>
+      </aside>
+    </article>
+    <hr>
+    <footer>
+      <p>
+        <a href="/david/" title="Aller à l’accueil">Accueil</a>
+        •
+        <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
+        •
+        <a href="http://larlet.com"
+           title="Go to my English profile"
+           data-instant>Pro</a>
+        •
+        <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
+        •
+        <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
+      </p>
+      <template id="theme-selector">
+        <form>
+          <style type="text/css">
+            fieldset div {
+              text-align: center;
+            }
+          </style>
+          <fieldset>
+            <legend>Thème</legend>
+            <div>
+              <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>
+            </div>
+          </fieldset>
+        </form>
+      </template>
+    </footer>
+    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
+    <script>
+      class ThemeToggle extends HTMLElement {
+        constructor() {
+          super()
+          const themeSelectorTemplate = document.querySelector('#theme-selector')
+          const form = themeSelectorTemplate.content.firstElementChild
+          this.attachShadow({ mode: 'open' })
+          this.shadowRoot.appendChild(form.cloneNode(true))
+        }
+
+        connectedCallback() {
+          const form = this.shadowRoot.querySelector('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 colorsLayer = undefined
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+          let mediaRules = []
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
+              continue
+            }
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.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) {
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
+            hasDarkRules = true
+          }
+        }
+
+        if (hasDarkRules) {
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
+        }
+      })
+    </script>
+    
+  <script src="/static/david/js/popper-2.11.8.min.js"></script>
+  <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
+  <script>
+    tippy('[data-tippy]', {
+      content(reference) {
+        reference.addEventListener('click', (e) => e.preventDefault())
+        return `
+        <h3 lang="fr">
+          <img src="${reference.dataset.favicon}" loading="lazy">
+          <a href="${reference.dataset.source}"
+            >Article sur ${reference.dataset.domain}</a></h3>
+        <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
+        <div class="tippy-links" lang="fr">
+          <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
+        </div>
+        `
+      },
+      allowHTML: true,
+      interactive: true,
+      delay: [150, 700],
+      hideOnClick: false
+    })
+  </script>
+  <script type="module">
+    import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
+
+    const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
+      for (const element of elements) {
+        if (element.intersectionRatio === 0) continue
+        const markElement = element.target
+        if (markElement.dataset.annotated) continue
+        const annotation = annotate(
+          markElement, {
+            type: 'highlight',
+            multiline: true,
+            color: markBackground,
+            animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+          }
+        )
+        annotation.show()
+        // Avoid the rough notation to be applied multiple times.
+        markElement.dataset.annotated = true
+      }
+    }, {threshold: 1.0})
+
+    for (const markElement of document.querySelectorAll('mark')) {
+      markElement.style.backgroundColor = 'inherit'
+      observer.observe(markElement)
+    }
+  </script>
+
+  </body>
+</html>

david/2024/_sources/2024-03-12 - Surligner.md

@@ -0,0 +1,43 @@
+# Surligner
+
+> [en] A small JavaScript library ==to create and animate annotations on a web page==
+>
+> Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.
+>
+> Rough Notation is 3.8kb in size when gzipped, and the code is available on GitHub.
+>
+> <cite>*[Rough Notation](https://roughnotation.com/)*</cite>
+
+J’utilise cette façon de mettre en avant des fragments de citations [depuis un petit moment](/david/2020/02/21/#surlignage) et en passant [par chez Biou](https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21) aujourd’hui, j’ai trouvé l’effet bien sympathique. Je ne l’applique pour l’instant(?) que sur la balise `<mark>` (relativement inoffensif si ça casse), en respectant `prefers-reduced-motion` et en animant que lorsque la partie surlignée devient visible grâce à [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
+
+Cela peut se révéler être distrayant pour certaines personnes car ça bouge à un endroit éloigné du point de lecture (merci @maiwann), invisible pour d’autres qui chargent les onglets sans être dessus (merci @lamecarlate). Il s’agit d’une famille d’animations pas trop invasives, encore moins essentielles, qui peuvent se révéler être de fausses bonnes idées. Je vais tester pour un temps, toujours dans cette recherche d’aller [vers un peu plus de fantaisie](/david/2024/03/09/#hr-106).
+
+N’hésitez pas à me faire des retours.
+
+---
+
+> 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.==
+>
+> 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.
+>
+> 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.
+> 
+> <cite>*[Appel à intérêt pour un bureau d’enregistrement coopératif](https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/)*</cite>
+
+Superbe initiative, coopératives pour tou·tes !
+
+---
+
+> [en] I know a lot of people hate anti-ad-block popups, but to me they are perfect.
+>
+> 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.[…]
+>
+> When we use web browsers, **we** are in more control than **they** are. ==That’s simply not the case when we’re inside an app they get to control.==
+> 
+> <cite>*[Anti-Ad-Block](https://lmnt.me/blog/anti-ad-block.html)*</cite>
+
+Ma configuration à ce sujet est assez extrême et il n’est pas rare (surtout sur les boutiques !) que je doive m’y reprendre à pas mal de fois pour débloquer les [megabytes de JavaScript](https://tonsky.me/blog/js-bloat/) à télécharger qui sont pertinents, ou plutôt nécessaires aux personnes ayant développé ces sites. Car pour ma part, je n’aurais besoin que de HTML dans 99% des cas…
+
+…dit-il en venant d’ajouter 13Ko de JS 😬.
+
+#partage #technique #web

david/2024/index.html

@@ -209,7 +209,8 @@
       <a href="/david/2024/03/08/">Flow</a>, 
       <a href="/david/2024/03/09/">Marque</a>, 
       <a href="/david/2024/03/10/">Dune</a>, 
-      <a href="/david/2024/03/11/">LoginWall</a>.
+      <a href="/david/2024/03/11/">LoginWall</a>, 
+      <a href="/david/2024/03/12/">Surligner</a>.
       
     </p>
   
@@ -246,7 +247,7 @@
       <a href="/david/2024/opendata/" rel="tag">#opendata (1)</a>, 
       <a href="/david/2024/opensource/" rel="tag">#opensource (7)</a>, 
       <a href="/david/2024/parentalite/" rel="tag">#parentalité (5)</a>, 
-      <a href="/david/2024/partage/" rel="tag">#partage (4)</a>, 
+      <a href="/david/2024/partage/" rel="tag">#partage (5)</a>, 
       <a href="/david/2024/parvenir/" rel="tag">#parvenir (3)</a>, 
       <a href="/david/2024/photographie/" rel="tag">#photographie (2)</a>, 
       <a href="/david/2024/poesie/" rel="tag">#poésie (2)</a>, 
@@ -256,9 +257,9 @@
       <a href="/david/2024/psychologie/" rel="tag">#psychologie (10)</a>, 
       <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (5)</a>, 
       <a href="/david/2024/sport/" rel="tag">#sport (5)</a>, 
-      <a href="/david/2024/technique/" rel="tag">#technique (14)</a>, 
+      <a href="/david/2024/technique/" rel="tag">#technique (15)</a>, 
       <a href="/david/2024/velo/" rel="tag">#vélo (1)</a>, 
-      <a href="/david/2024/web/" rel="tag">#web (11)</a>.
+      <a href="/david/2024/web/" rel="tag">#web (12)</a>.
       
     </p>
   

david/2024/partage/index.html

@@ -134,6 +134,121 @@
     </p>
   </nav>
   
+    <h2>
+      <a href="/david/2024/03/12/" title="Lien permanent vers cet article">Surligner</a> <time datetime="2024-03-12">12 mars 2024</time>
+    </h2>
+    
+
+<blockquote lang="en">
+<p>A small JavaScript library <mark>to create and animate annotations on a web&nbsp;page</mark></p>
+<p>Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned&nbsp;off.</p>
+<p>Rough Notation is 3.8kb in size when gzipped, and the code is available on&nbsp;GitHub.</p>
+<p><cite><em><a data-link-domain="roughnotation.com" href="https://roughnotation.com/">Rough&nbsp;Notation</a></em></cite></p>
+</blockquote>
+<p>J’utilise cette façon de mettre en avant des fragments de citations <a href="/david/2020/02/21/#surlignage">depuis un petit moment</a> et en passant <a data-link-domain="vanschklift.com" href="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21" hreflang="en"
+            title="Consultation de l’article (anglais)">par chez Biou</a>
+            <a href="/david/cache/2024/41e9f48de9ccd2449bceca518fff8606/" hreflang="en"
+                data-tippy data-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"
+                data-source="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21"
+                data-date="2024-03-12"
+                data-favicon="https://vanschklift.com/themes/wip/img/android-icon-192x192.png"
+                data-domain="vanschklift.com"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a> aujourd’hui, j’ai trouvé l’effet bien sympathique. Je ne l’applique pour l’instant(?) que sur la balise <code>&lt;mark&gt;</code> (relativement inoffensif si ça casse), en respectant <code>prefers-reduced-motion</code> et en animant que lorsque la partie surlignée devient visible grâce à <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver">IntersectionObserver</a>.</p>
+<p>Cela peut se révéler être distrayant pour certaines personnes car ça bouge à un endroit éloigné du point de lecture (merci @maiwann), invisible pour d’autres qui chargent les onglets sans être dessus (merci @lamecarlate). Il s’agit d’une famille d’animations pas trop invasives, encore moins essentielles, qui peuvent se révéler être de fausses bonnes idées. Je vais tester pour un temps, toujours dans cette recherche d’aller <a href="/david/2024/03/09/#hr-106">vers un peu plus de fantaisie</a>.</p>
+<p>N’hésitez pas à me faire des&nbsp;retours.</p>
+<a href="#hr-110" title="Lien vers cette section de la page"><hr id="hr-110" /></a>
+
+<blockquote>
+<p>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é. <mark>Ce sera issu d’un processus participatif en fonction des participant·e·s au&nbsp;départ.</mark></p>
+<p>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&nbsp;registrar.</p>
+<p>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&nbsp;inclusif.</p>
+<p><cite><em><a data-link-domain="hashbang.coop" href="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/" hreflang="fr"
+            title="Consultation de l’article">Appel à intérêt pour un bureau d’enregistrement coopératif</a>
+            <a href="/david/cache/2024/2c027efb3689a1067c7f32a659fd4092/" hreflang="fr"
+                data-tippy data-description="Nous lançons un projet pour gérer des noms de domaines dans une nouvelle coopérative"
+                data-source="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/"
+                data-date="2024-03-12"
+                data-favicon="https://hashbang.coop/static/images/favicon.1d2088a755c9.ico"
+                data-domain="hashbang.coop"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a></em></cite></p>
+</blockquote>
+<p>Superbe initiative, coopératives pour&nbsp;tou·tes&#8239;!</p>
+<a href="#hr-111" title="Lien vers cette section de la page"><hr id="hr-111" /></a>
+
+<blockquote lang="en">
+<p>I know a lot of people hate anti-ad-block popups, but to me they are&nbsp;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&nbsp;ad-blocking.[…]</p>
+<p>When we use web browsers, <strong>we</strong> are in more control than <strong>they</strong> are. <mark>That’s simply not the case when we’re inside an app they get to&nbsp;control.</mark></p>
+<p><cite><em><a data-link-domain="lmnt.me" href="https://lmnt.me/blog/anti-ad-block.html" hreflang="en"
+            title="Consultation de l’article (anglais)">Anti-Ad-Block</a>
+            <a href="/david/cache/2024/09cfcfafab15ad576de8b32d0046fb93/" hreflang="en"
+                data-tippy data-description="I know a lot of people hate anti-ad-block popups, but to me they are perfect."
+                data-source="https://lmnt.me/blog/anti-ad-block.html"
+                data-date="2024-03-12"
+                data-favicon="https://lmnt.me/lmnt.png"
+                data-domain="lmnt.me"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a></em></cite></p>
+</blockquote>
+<p>Ma configuration à ce sujet est assez extrême et il n’est pas rare (surtout sur les boutiques&#8239;!) que je doive m’y reprendre à pas mal de fois pour débloquer les <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/js-bloat/" hreflang="en"
+            title="Consultation de l’article (anglais)">megabytes de JavaScript</a>
+            <a href="/david/cache/2024/ad911ebf7ba5523ef0be1bdd599f7623/" hreflang="en"
+                data-tippy data-description="What is the average size of JavaScript code downloaded per website? Fuck around and find out!"
+                data-source="https://tonsky.me/blog/js-bloat/"
+                data-date="2024-03-03"
+                data-favicon="https://tonsky.me/i/favicon.png"
+                data-domain="tonsky.me"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a> à télécharger qui sont pertinents, ou plutôt nécessaires aux personnes ayant développé ces sites. Car pour ma part, je n’aurais besoin que de HTML dans 99% des&nbsp;cas…</p>
+<p>…dit-il en venant d’ajouter 13Ko de&nbsp;JS&nbsp;😬.</p>
+
+    
+      <nav>
+        <p>
+          
+            <a href="/david/2024/partage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#partage</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+  
     <h2>
       <a href="/david/2024/02/28/" title="Lien permanent vers cet article">Dérèglement</a> <time datetime="2024-02-28">28 février 2024</time>
     </h2>

david/2024/technique/index.html

@@ -134,6 +134,121 @@
     </p>
   </nav>
   
+    <h2>
+      <a href="/david/2024/03/12/" title="Lien permanent vers cet article">Surligner</a> <time datetime="2024-03-12">12 mars 2024</time>
+    </h2>
+    
+
+<blockquote lang="en">
+<p>A small JavaScript library <mark>to create and animate annotations on a web&nbsp;page</mark></p>
+<p>Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned&nbsp;off.</p>
+<p>Rough Notation is 3.8kb in size when gzipped, and the code is available on&nbsp;GitHub.</p>
+<p><cite><em><a data-link-domain="roughnotation.com" href="https://roughnotation.com/">Rough&nbsp;Notation</a></em></cite></p>
+</blockquote>
+<p>J’utilise cette façon de mettre en avant des fragments de citations <a href="/david/2020/02/21/#surlignage">depuis un petit moment</a> et en passant <a data-link-domain="vanschklift.com" href="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21" hreflang="en"
+            title="Consultation de l’article (anglais)">par chez Biou</a>
+            <a href="/david/cache/2024/41e9f48de9ccd2449bceca518fff8606/" hreflang="en"
+                data-tippy data-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"
+                data-source="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21"
+                data-date="2024-03-12"
+                data-favicon="https://vanschklift.com/themes/wip/img/android-icon-192x192.png"
+                data-domain="vanschklift.com"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a> aujourd’hui, j’ai trouvé l’effet bien sympathique. Je ne l’applique pour l’instant(?) que sur la balise <code>&lt;mark&gt;</code> (relativement inoffensif si ça casse), en respectant <code>prefers-reduced-motion</code> et en animant que lorsque la partie surlignée devient visible grâce à <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver">IntersectionObserver</a>.</p>
+<p>Cela peut se révéler être distrayant pour certaines personnes car ça bouge à un endroit éloigné du point de lecture (merci @maiwann), invisible pour d’autres qui chargent les onglets sans être dessus (merci @lamecarlate). Il s’agit d’une famille d’animations pas trop invasives, encore moins essentielles, qui peuvent se révéler être de fausses bonnes idées. Je vais tester pour un temps, toujours dans cette recherche d’aller <a href="/david/2024/03/09/#hr-106">vers un peu plus de fantaisie</a>.</p>
+<p>N’hésitez pas à me faire des&nbsp;retours.</p>
+<a href="#hr-110" title="Lien vers cette section de la page"><hr id="hr-110" /></a>
+
+<blockquote>
+<p>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é. <mark>Ce sera issu d’un processus participatif en fonction des participant·e·s au&nbsp;départ.</mark></p>
+<p>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&nbsp;registrar.</p>
+<p>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&nbsp;inclusif.</p>
+<p><cite><em><a data-link-domain="hashbang.coop" href="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/" hreflang="fr"
+            title="Consultation de l’article">Appel à intérêt pour un bureau d’enregistrement coopératif</a>
+            <a href="/david/cache/2024/2c027efb3689a1067c7f32a659fd4092/" hreflang="fr"
+                data-tippy data-description="Nous lançons un projet pour gérer des noms de domaines dans une nouvelle coopérative"
+                data-source="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/"
+                data-date="2024-03-12"
+                data-favicon="https://hashbang.coop/static/images/favicon.1d2088a755c9.ico"
+                data-domain="hashbang.coop"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a></em></cite></p>
+</blockquote>
+<p>Superbe initiative, coopératives pour&nbsp;tou·tes&#8239;!</p>
+<a href="#hr-111" title="Lien vers cette section de la page"><hr id="hr-111" /></a>
+
+<blockquote lang="en">
+<p>I know a lot of people hate anti-ad-block popups, but to me they are&nbsp;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&nbsp;ad-blocking.[…]</p>
+<p>When we use web browsers, <strong>we</strong> are in more control than <strong>they</strong> are. <mark>That’s simply not the case when we’re inside an app they get to&nbsp;control.</mark></p>
+<p><cite><em><a data-link-domain="lmnt.me" href="https://lmnt.me/blog/anti-ad-block.html" hreflang="en"
+            title="Consultation de l’article (anglais)">Anti-Ad-Block</a>
+            <a href="/david/cache/2024/09cfcfafab15ad576de8b32d0046fb93/" hreflang="en"
+                data-tippy data-description="I know a lot of people hate anti-ad-block popups, but to me they are perfect."
+                data-source="https://lmnt.me/blog/anti-ad-block.html"
+                data-date="2024-03-12"
+                data-favicon="https://lmnt.me/lmnt.png"
+                data-domain="lmnt.me"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a></em></cite></p>
+</blockquote>
+<p>Ma configuration à ce sujet est assez extrême et il n’est pas rare (surtout sur les boutiques&#8239;!) que je doive m’y reprendre à pas mal de fois pour débloquer les <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/js-bloat/" hreflang="en"
+            title="Consultation de l’article (anglais)">megabytes de JavaScript</a>
+            <a href="/david/cache/2024/ad911ebf7ba5523ef0be1bdd599f7623/" hreflang="en"
+                data-tippy data-description="What is the average size of JavaScript code downloaded per website? Fuck around and find out!"
+                data-source="https://tonsky.me/blog/js-bloat/"
+                data-date="2024-03-03"
+                data-favicon="https://tonsky.me/i/favicon.png"
+                data-domain="tonsky.me"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a> à télécharger qui sont pertinents, ou plutôt nécessaires aux personnes ayant développé ces sites. Car pour ma part, je n’aurais besoin que de HTML dans 99% des&nbsp;cas…</p>
+<p>…dit-il en venant d’ajouter 13Ko de&nbsp;JS&nbsp;😬.</p>
+
+    
+      <nav>
+        <p>
+          
+            <a href="/david/2024/partage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#partage</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+  
     <h2>
       <a href="/david/2024/03/08/" title="Lien permanent vers cet article">Flow</a> <time datetime="2024-03-08">8 mars 2024</time>
     </h2>

david/2024/web/index.html

@@ -134,6 +134,121 @@
     </p>
   </nav>
   
+    <h2>
+      <a href="/david/2024/03/12/" title="Lien permanent vers cet article">Surligner</a> <time datetime="2024-03-12">12 mars 2024</time>
+    </h2>
+    
+
+<blockquote lang="en">
+<p>A small JavaScript library <mark>to create and animate annotations on a web&nbsp;page</mark></p>
+<p>Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned&nbsp;off.</p>
+<p>Rough Notation is 3.8kb in size when gzipped, and the code is available on&nbsp;GitHub.</p>
+<p><cite><em><a data-link-domain="roughnotation.com" href="https://roughnotation.com/">Rough&nbsp;Notation</a></em></cite></p>
+</blockquote>
+<p>J’utilise cette façon de mettre en avant des fragments de citations <a href="/david/2020/02/21/#surlignage">depuis un petit moment</a> et en passant <a data-link-domain="vanschklift.com" href="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21" hreflang="en"
+            title="Consultation de l’article (anglais)">par chez Biou</a>
+            <a href="/david/cache/2024/41e9f48de9ccd2449bceca518fff8606/" hreflang="en"
+                data-tippy data-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"
+                data-source="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21"
+                data-date="2024-03-12"
+                data-favicon="https://vanschklift.com/themes/wip/img/android-icon-192x192.png"
+                data-domain="vanschklift.com"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a> aujourd’hui, j’ai trouvé l’effet bien sympathique. Je ne l’applique pour l’instant(?) que sur la balise <code>&lt;mark&gt;</code> (relativement inoffensif si ça casse), en respectant <code>prefers-reduced-motion</code> et en animant que lorsque la partie surlignée devient visible grâce à <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver">IntersectionObserver</a>.</p>
+<p>Cela peut se révéler être distrayant pour certaines personnes car ça bouge à un endroit éloigné du point de lecture (merci @maiwann), invisible pour d’autres qui chargent les onglets sans être dessus (merci @lamecarlate). Il s’agit d’une famille d’animations pas trop invasives, encore moins essentielles, qui peuvent se révéler être de fausses bonnes idées. Je vais tester pour un temps, toujours dans cette recherche d’aller <a href="/david/2024/03/09/#hr-106">vers un peu plus de fantaisie</a>.</p>
+<p>N’hésitez pas à me faire des&nbsp;retours.</p>
+<a href="#hr-110" title="Lien vers cette section de la page"><hr id="hr-110" /></a>
+
+<blockquote>
+<p>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é. <mark>Ce sera issu d’un processus participatif en fonction des participant·e·s au&nbsp;départ.</mark></p>
+<p>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&nbsp;registrar.</p>
+<p>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&nbsp;inclusif.</p>
+<p><cite><em><a data-link-domain="hashbang.coop" href="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/" hreflang="fr"
+            title="Consultation de l’article">Appel à intérêt pour un bureau d’enregistrement coopératif</a>
+            <a href="/david/cache/2024/2c027efb3689a1067c7f32a659fd4092/" hreflang="fr"
+                data-tippy data-description="Nous lançons un projet pour gérer des noms de domaines dans une nouvelle coopérative"
+                data-source="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/"
+                data-date="2024-03-12"
+                data-favicon="https://hashbang.coop/static/images/favicon.1d2088a755c9.ico"
+                data-domain="hashbang.coop"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a></em></cite></p>
+</blockquote>
+<p>Superbe initiative, coopératives pour&nbsp;tou·tes&#8239;!</p>
+<a href="#hr-111" title="Lien vers cette section de la page"><hr id="hr-111" /></a>
+
+<blockquote lang="en">
+<p>I know a lot of people hate anti-ad-block popups, but to me they are&nbsp;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&nbsp;ad-blocking.[…]</p>
+<p>When we use web browsers, <strong>we</strong> are in more control than <strong>they</strong> are. <mark>That’s simply not the case when we’re inside an app they get to&nbsp;control.</mark></p>
+<p><cite><em><a data-link-domain="lmnt.me" href="https://lmnt.me/blog/anti-ad-block.html" hreflang="en"
+            title="Consultation de l’article (anglais)">Anti-Ad-Block</a>
+            <a href="/david/cache/2024/09cfcfafab15ad576de8b32d0046fb93/" hreflang="en"
+                data-tippy data-description="I know a lot of people hate anti-ad-block popups, but to me they are perfect."
+                data-source="https://lmnt.me/blog/anti-ad-block.html"
+                data-date="2024-03-12"
+                data-favicon="https://lmnt.me/lmnt.png"
+                data-domain="lmnt.me"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a></em></cite></p>
+</blockquote>
+<p>Ma configuration à ce sujet est assez extrême et il n’est pas rare (surtout sur les boutiques&#8239;!) que je doive m’y reprendre à pas mal de fois pour débloquer les <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/js-bloat/" hreflang="en"
+            title="Consultation de l’article (anglais)">megabytes de JavaScript</a>
+            <a href="/david/cache/2024/ad911ebf7ba5523ef0be1bdd599f7623/" hreflang="en"
+                data-tippy data-description="What is the average size of JavaScript code downloaded per website? Fuck around and find out!"
+                data-source="https://tonsky.me/blog/js-bloat/"
+                data-date="2024-03-03"
+                data-favicon="https://tonsky.me/i/favicon.png"
+                data-domain="tonsky.me"
+                ><svg xmlns="http://www.w3.org/2000/svg"
+                    width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
+                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <span class="sr-only">[archive]</span></a> à télécharger qui sont pertinents, ou plutôt nécessaires aux personnes ayant développé ces sites. Car pour ma part, je n’aurais besoin que de HTML dans 99% des&nbsp;cas…</p>
+<p>…dit-il en venant d’ajouter 13Ko de&nbsp;JS&nbsp;😬.</p>
+
+    
+      <nav>
+        <p>
+          
+            <a href="/david/2024/partage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#partage</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+  
     <h2>
       <a href="/david/2024/03/11/" title="Lien permanent vers cet article">LoginWall</a> <time datetime="2024-03-11">11 mars 2024</time>
     </h2>

david/index.html

@@ -447,6 +447,7 @@
   </style>
   <p>Liste des publications récentes en ordre anté-chronologique :</p>
   <p>
+    <a href="/david/2024/03/12/" data-partage data-technique data-web  title="Étiquettes : partage, technique, web.">Surligner</a>,
     <a href="/david/2024/03/11/" data-decentralisation data-dependance data-web  title="Étiquettes : décentralisation, dépendance, web.">LoginWall</a>,
     <a href="/david/2024/03/10/" data-adaptation data-cinema data-lecture  title="Étiquettes : adaptation, cinéma, lecture.">Dune</a>,
     <a href="/david/2024/03/09/" data-evolution data-identite data-poesie  title="Étiquettes : évolution, identité, poésie.">Marque</a>,
@@ -553,7 +554,7 @@
     <a href="/david/2024/opendata/" data-tag="opendata" rel="tag">#opendata (1)</a>,
     <a href="/david/2024/opensource/" data-tag="opensource" rel="tag">#opensource (7)</a>,
     <a href="/david/2024/parentalite/" data-tag="parentalite" rel="tag">#parentalité (5)</a>,
-    <a href="/david/2024/partage/" data-tag="partage" rel="tag">#partage (4)</a>,
+    <a href="/david/2024/partage/" data-tag="partage" rel="tag">#partage (5)</a>,
     <a href="/david/2024/parvenir/" data-tag="parvenir" rel="tag">#parvenir (3)</a>,
     <a href="/david/2024/photographie/" data-tag="photographie" rel="tag">#photographie (2)</a>,
     <a href="/david/2024/poesie/" data-tag="poesie" rel="tag">#poésie (2)</a>,
@@ -563,9 +564,9 @@
     <a href="/david/2024/psychologie/" data-tag="psychologie" rel="tag">#psychologie (10)</a>,
     <a href="/david/2024/solastalgia/" data-tag="solastalgia" rel="tag">#solastalgia (5)</a>,
     <a href="/david/2024/sport/" data-tag="sport" rel="tag">#sport (5)</a>,
-    <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (14)</a>,
+    <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (15)</a>,
     <a href="/david/2024/velo/" data-tag="velo" rel="tag">#vélo (1)</a>,
-    <a href="/david/2024/web/" data-tag="web" rel="tag">#web (11)</a>.
+    <a href="/david/2024/web/" data-tag="web" rel="tag">#web (12)</a>.
       
     
   </p>

david/log/index.xml

@@ -13,6 +13,44 @@
     </author>
     <rights>Copyright (c) 2004-2024, David Larlet</rights>
     
+        <entry xml:lang="fr">
+            <title type="html">Surligner</title>
+            <link href="https://larlet.fr/david/2024/03/12/" rel="alternate" type="text/html" />
+            <updated>2024-03-12T12:00:00+01:00</updated>
+            <id>https://larlet.fr/david/2024/03/12/</id>
+            <summary type="html">
+
+&lt;blockquote lang=&quot;en&quot;&gt;
+&lt;p&gt;A small JavaScript library &lt;mark&gt;to create and animate annotations on a web&amp;nbsp;page&lt;/mark&gt;&lt;/p&gt;
+&lt;p&gt;Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned&amp;nbsp;off.&lt;/p&gt;
+&lt;p&gt;Rough Notation is 3.8kb in size when gzipped, and the code is available on&amp;nbsp;GitHub.&lt;/p&gt;
+&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://roughnotation.com/&quot;&gt;Rough&amp;nbsp;Notation&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;J’utilise cette façon de mettre en avant des fragments de citations &lt;a href=&quot;https://larlet.fr/david/2020/02/21/#surlignage&quot;&gt;depuis un petit moment&lt;/a&gt; et en passant &lt;a href=&quot;https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21&quot;&gt;par chez Biou&lt;/a&gt; aujourd’hui, j’ai trouvé l’effet bien sympathique. Je ne l’applique pour l’instant(?) que sur la balise &lt;code&gt;&amp;lt;mark&amp;gt;&lt;/code&gt; (relativement inoffensif si ça casse), en respectant &lt;code&gt;prefers-reduced-motion&lt;/code&gt; et en animant que lorsque la partie surlignée devient visible grâce à &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver&quot;&gt;IntersectionObserver&lt;/a&gt;.&lt;/p&gt;
+&lt;p&gt;Cela peut se révéler être distrayant pour certaines personnes car ça bouge à un endroit éloigné du point de lecture (merci @maiwann), invisible pour d’autres qui chargent les onglets sans être dessus (merci @lamecarlate). Il s’agit d’une famille d’animations pas trop invasives, encore moins essentielles, qui peuvent se révéler être de fausses bonnes idées. Je vais tester pour un temps, toujours dans cette recherche d’aller &lt;a href=&quot;https://larlet.fr/david/2024/03/09/#hr-106&quot;&gt;vers un peu plus de fantaisie&lt;/a&gt;.&lt;/p&gt;
+&lt;p&gt;N’hésitez pas à me faire des&amp;nbsp;retours.&lt;/p&gt;
+&lt;hr /&gt;
+
+&lt;blockquote&gt;
+&lt;p&gt;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é. &lt;mark&gt;Ce sera issu d’un processus participatif en fonction des participant·e·s au&amp;nbsp;départ.&lt;/mark&gt;&lt;/p&gt;
+&lt;p&gt;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&amp;nbsp;registrar.&lt;/p&gt;
+&lt;p&gt;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&amp;nbsp;inclusif.&lt;/p&gt;
+&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/&quot;&gt;Appel à intérêt pour un bureau d’enregistrement&amp;nbsp;coopératif&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;Superbe initiative, coopératives pour&amp;nbsp;tou·tes&amp;#8239;!&lt;/p&gt;
+&lt;hr /&gt;
+
+&lt;blockquote lang=&quot;en&quot;&gt;
+&lt;p&gt;I know a lot of people hate anti-ad-block popups, but to me they are&amp;nbsp;perfect.&lt;/p&gt;
+&lt;p&gt;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&amp;nbsp;ad-blocking.[…]&lt;/p&gt;
+&lt;p&gt;When we use web browsers, &lt;strong&gt;we&lt;/strong&gt; are in more control than &lt;strong&gt;they&lt;/strong&gt; are. &lt;mark&gt;That’s simply not the case when we’re inside an app they get to&amp;nbsp;control.&lt;/mark&gt;&lt;/p&gt;
+&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://lmnt.me/blog/anti-ad-block.html&quot;&gt;Anti-Ad-Block&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;Ma configuration à ce sujet est assez extrême et il n’est pas rare (surtout sur les boutiques&amp;#8239;!) que je doive m’y reprendre à pas mal de fois pour débloquer les &lt;a href=&quot;https://tonsky.me/blog/js-bloat/&quot;&gt;megabytes de JavaScript&lt;/a&gt; à télécharger qui sont pertinents, ou plutôt nécessaires aux personnes ayant développé ces sites. Car pour ma part, je n’aurais besoin que de HTML dans 99% des&amp;nbsp;cas…&lt;/p&gt;
+&lt;p&gt;…dit-il en venant d’ajouter 13Ko de&amp;nbsp;JS&amp;nbsp;😬.&lt;/p&gt;
+&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/partage/&quot;&gt;#partage&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/web/&quot;&gt;#web&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
+        </entry>
+    
         <entry xml:lang="fr">
             <title type="html">LoginWall</title>
             <link href="https://larlet.fr/david/2024/03/11/" rel="alternate" type="text/html" />
@@ -1185,21 +1223,4 @@ button.primary {
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/apprentissage/&quot;&gt;#apprentissage&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/echanges/&quot;&gt;#échanges&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/photographie/&quot;&gt;#photographie&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
         </entry>
     
-        <entry xml:lang="fr">
-            <title type="html">Violence</title>
-            <link href="https://larlet.fr/david/2024/02/11/" rel="alternate" type="text/html" />
-            <updated>2024-02-11T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2024/02/11/</id>
-            <summary type="html">
-&lt;p&gt;Il y a une forme de violence à dire —&amp;nbsp;de manière plus ou moins directe&amp;nbsp;— à des personnes que les outils numériques qu’elles utilisent ne sont pas appropriés. D’autant plus en ne proposant pas d’alternative réellement&amp;nbsp;utilisable&amp;nbsp;:&amp;nbsp;&lt;/p&gt;
-&lt;ul&gt;
-&lt;li&gt;dans le contexte de littératie numérique de la&amp;nbsp;personne,&lt;/li&gt;
-&lt;li&gt;dans le contexte culturel du groupe de travail autour de la&amp;nbsp;personne,&lt;/li&gt;
-&lt;li&gt;dans les priorités actuelles du groupe pour lequel l’informatique reste un outil&amp;nbsp;et/ou&lt;/li&gt;
-&lt;li&gt;dans la situation de détresse en&amp;nbsp;cours.&lt;/li&gt;
-&lt;/ul&gt;
-&lt;p&gt;Si la &lt;em&gt;ré&lt;/em&gt;-action est inappropriée, c’est peut-être que l’action initiale ne l’était pas non&amp;nbsp;plus…&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/communaute/&quot;&gt;#communauté&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/opensource/&quot;&gt;#opensource&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/psychologie/&quot;&gt;#psychologie&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
-        </entry>
-    
 </feed>

david/recherche/index.html

@@ -276,6 +276,12 @@
     </template>
     
     <script id="search-index" type="application/json">[
+  {
+    "title": "Surligner",
+    "url": "/david/2024/03/12/",
+    "date": "2024-03-12",
+    "content": "A small JavaScript library to create and animate annotations on a web\u00a0page Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned\u00a0off. Rough Notation is 3.8kb in size when gzipped, and the code is available on\u00a0GitHub. Rough\u00a0Notation J\u2019utilise cette fa\u00e7on de mettre en avant des fragments de citations depuis un petit moment et en passant par chez Biou aujourd\u2019hui, j\u2019ai trouv\u00e9 l\u2019effet bien sympathique. Je ne l\u2019applique pour l\u2019instant(?) que sur la balise <mark> (relativement inoffensif si \u00e7a casse), en respectant prefers-reduced-motion et en animant que lorsque la partie surlign\u00e9e devient visible gr\u00e2ce \u00e0 IntersectionObserver. Cela peut se r\u00e9v\u00e9ler \u00eatre distrayant pour certaines personnes car \u00e7a bouge \u00e0 un endroit \u00e9loign\u00e9 du point de lecture (merci @maiwann), invisible pour d\u2019autres qui chargent les onglets sans \u00eatre dessus (merci @lamecarlate). Il s\u2019agit d\u2019une famille d\u2019animations pas trop invasives, encore moins essentielles, qui peuvent se r\u00e9v\u00e9ler \u00eatre de fausses bonnes id\u00e9es. Je vais tester pour un temps, toujours dans cette recherche d\u2019aller vers un peu plus de fantaisie. N\u2019h\u00e9sitez pas \u00e0 me faire des\u00a0retours. Ce qu\u2019Hashbang propose est de cr\u00e9er un registrar sous forme de SCIC avec en plus un processus participatif pour d\u00e9finir les services et leurs tarifs. Le premier service propos\u00e9 sera certainement le nom de domaine, mais personne ne peut actuellement d\u00e9finir quel tarif sera propos\u00e9. Ce sera issu d\u2019un processus participatif en fonction des participant\u00b7e\u00b7s au\u00a0d\u00e9part. Chez Hashbang, nous portons un regard attentif aux enjeux environnementaux et nous proposons donc de mesurer et limiter l\u2019impact environnemental des activit\u00e9s du\u00a0registrar. Nous souhaitons \u00e9galement s\u2019assurer qu\u2019il n\u2019y ait pas de discriminations et que les personnes minoris\u00e9\u00b7e\u00b7s puissent s\u2019emparer de cet espace. Il faut donc s\u2019attendre \u00e0 ce qu\u2019il y ait des \u00e9v\u00e9nements en mixit\u00e9 choisie et du langage\u00a0inclusif. Appel \u00e0 int\u00e9r\u00eat pour un bureau d\u2019enregistrement\u00a0coop\u00e9ratif Superbe initiative, coop\u00e9ratives pour\u00a0tou\u00b7tes\u202f! I know a lot of people hate anti-ad-block popups, but to me they are\u00a0perfect. 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\u00a0ad-blocking.[\u2026] When we use web browsers, we are in more control than they are. That\u2019s simply not the case when we\u2019re inside an app they get to\u00a0control. Anti-Ad-Block Ma configuration \u00e0 ce sujet est assez extr\u00eame et il n\u2019est pas rare (surtout sur les boutiques\u202f!) que je doive m\u2019y reprendre \u00e0 pas mal de fois pour d\u00e9bloquer les megabytes de JavaScript \u00e0 t\u00e9l\u00e9charger qui sont pertinents, ou plut\u00f4t n\u00e9cessaires aux personnes ayant d\u00e9velopp\u00e9 ces sites. Car pour ma part, je n\u2019aurais besoin que de HTML dans 99% des\u00a0cas\u2026 \u2026dit-il en venant d\u2019ajouter 13Ko de\u00a0JS\u00a0\ud83d\ude2c."
+  },
   {
     "title": "LoginWall",
     "url": "/david/2024/03/11/",
@@ -702,6 +708,12 @@
     "date": "2024-01-01",
     "content": "33\u202f% de 44\u00a0millions de consommateurs vont faire le Dry January 22\u202f% des consommateurs ont une conso excessive, c\u2019est-\u00e0-dire 10\u00a0verres/semaine max et plus de deux\u00a0verres/jour. Les seniors sont aussi tr\u00e8s touch\u00e9\u00b7es. L\u2019alcool est une drogue.. On peut faire la f\u00eate sans alcool et\u00a0s\u2019\u00e9clater. Quand on arr\u00eate\u00a0: bienfaits sur le foie, la peau, le coeur, etc\u2026 Pb\u00a0: m\u00e9moire, troubles cognitifs, responsable de cancer, pb sommeil, d\u00e9compensation de maladie psy,\u2026 41000\u00a0d\u00e9c\u00e8s par an en\u00a0France. Les cinq sympt\u00f4mes d\u00e9finissent un probl\u00e8me de\u00a0d\u00e9pendance\u00a0: Perte de\u00a0contr\u00f4le Usage\u00a0compulsif Envie\u00a0r\u00e9pressive Usage\u00a0chronique Cons\u00e9quences psychiques, physiques, sociales,\u2026 Bon Dry J. pour celleux qui le font\u202f! Moi j\u2019en\u00a0suis\u202f! @Air@framapiaf.org Dans mon entourage, de plus en plus de personnes que j\u2019estime ne boivent pas d\u2019alcool, de plus en plus de personnes qui vieillissent en deviennent d\u00e9pendantes. Je suis davantage attir\u00e9 par la premi\u00e8re option\u2026 et pas pour un seul\u00a0mois. Je me sens pr\u00eat, on verra bien o\u00f9 cela me\u00a0m\u00e8ne. Grosse envie de reprendre la CSS par ici en ce d\u00e9but d\u2019ann\u00e9e. Avec le dilemme de faire chuter cette motivation si je publie d\u00e8s maintenant avec l\u2019ancienne (qui restera effective sur les anciens articles). Je vais essayer de me\u00a0retenir."
   },
+  {
+    "title": "Surligner",
+    "url": "/david/2024/03/12/",
+    "date": "2024-03-12",
+    "content": "A small JavaScript library to create and animate annotations on a web\u00a0page Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned\u00a0off. Rough Notation is 3.8kb in size when gzipped, and the code is available on\u00a0GitHub. Rough\u00a0Notation J\u2019utilise cette fa\u00e7on de mettre en avant des fragments de citations depuis un petit moment et en passant par chez Biou aujourd\u2019hui, j\u2019ai trouv\u00e9 l\u2019effet bien sympathique. Je ne l\u2019applique pour l\u2019instant(?) que sur la balise <mark> (relativement inoffensif si \u00e7a casse), en respectant prefers-reduced-motion et en animant que lorsque la partie surlign\u00e9e devient visible gr\u00e2ce \u00e0 IntersectionObserver. Cela peut se r\u00e9v\u00e9ler \u00eatre distrayant pour certaines personnes car \u00e7a bouge \u00e0 un endroit \u00e9loign\u00e9 du point de lecture (merci @maiwann), invisible pour d\u2019autres qui chargent les onglets sans \u00eatre dessus (merci @lamecarlate). Il s\u2019agit d\u2019une famille d\u2019animations pas trop invasives, encore moins essentielles, qui peuvent se r\u00e9v\u00e9ler \u00eatre de fausses bonnes id\u00e9es. Je vais tester pour un temps, toujours dans cette recherche d\u2019aller vers un peu plus de fantaisie. N\u2019h\u00e9sitez pas \u00e0 me faire des\u00a0retours. Ce qu\u2019Hashbang propose est de cr\u00e9er un registrar sous forme de SCIC avec en plus un processus participatif pour d\u00e9finir les services et leurs tarifs. Le premier service propos\u00e9 sera certainement le nom de domaine, mais personne ne peut actuellement d\u00e9finir quel tarif sera propos\u00e9. Ce sera issu d\u2019un processus participatif en fonction des participant\u00b7e\u00b7s au\u00a0d\u00e9part. Chez Hashbang, nous portons un regard attentif aux enjeux environnementaux et nous proposons donc de mesurer et limiter l\u2019impact environnemental des activit\u00e9s du\u00a0registrar. Nous souhaitons \u00e9galement s\u2019assurer qu\u2019il n\u2019y ait pas de discriminations et que les personnes minoris\u00e9\u00b7e\u00b7s puissent s\u2019emparer de cet espace. Il faut donc s\u2019attendre \u00e0 ce qu\u2019il y ait des \u00e9v\u00e9nements en mixit\u00e9 choisie et du langage\u00a0inclusif. Appel \u00e0 int\u00e9r\u00eat pour un bureau d\u2019enregistrement\u00a0coop\u00e9ratif Superbe initiative, coop\u00e9ratives pour\u00a0tou\u00b7tes\u202f! I know a lot of people hate anti-ad-block popups, but to me they are\u00a0perfect. 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\u00a0ad-blocking.[\u2026] When we use web browsers, we are in more control than they are. That\u2019s simply not the case when we\u2019re inside an app they get to\u00a0control. Anti-Ad-Block Ma configuration \u00e0 ce sujet est assez extr\u00eame et il n\u2019est pas rare (surtout sur les boutiques\u202f!) que je doive m\u2019y reprendre \u00e0 pas mal de fois pour d\u00e9bloquer les megabytes de JavaScript \u00e0 t\u00e9l\u00e9charger qui sont pertinents, ou plut\u00f4t n\u00e9cessaires aux personnes ayant d\u00e9velopp\u00e9 ces sites. Car pour ma part, je n\u2019aurais besoin que de HTML dans 99% des\u00a0cas\u2026 \u2026dit-il en venant d\u2019ajouter 13Ko de\u00a0JS\u00a0\ud83d\ude2c."
+  },
   {
     "title": "LoginWall",
     "url": "/david/2024/03/11/",

david/templates/article_2024.html

@@ -112,14 +112,13 @@
   <script type="module">
     import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
 
-    const computedStyle = getComputedStyle(document.documentElement)
-    const markBackground = computedStyle.getPropertyValue('--mark-background')
-
     const observer = new IntersectionObserver(elements => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const markBackground = computedStyle.getPropertyValue('--mark-background')
       for (const element of elements) {
-        if (element.intersectionRatio < 1) return
+        if (element.intersectionRatio === 0) continue
         const markElement = element.target
-        if (markElement.dataset.annotated) return
+        if (markElement.dataset.annotated) continue
         const annotation = annotate(
           markElement, {
             type: 'highlight',