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

Article

master
David Larlet 2 weeks ago
parent
8aa3482e44
commit
6e77448445
Signed by: David Larlet <david@larlet.fr> GPG Key ID: 3E2953A359E7E7BD
11 changed files with 690 additions and 45 deletions
Split View Show Diff Stats
  1. 4
    4
      david/2024/04/05/index.html
  2. 428
    0
      david/2024/04/07/index.html
  3. 4
    4
      david/2024/04/08/index.html
  4. 17
    0
      david/2024/_sources/2024-04-07 - Piscine.md
  5. 66
    0
      david/2024/courage/index.html
  6. 4
    3
      david/2024/index.html
  7. 66
    0
      david/2024/sport/index.html
  8. 66
    0
      david/2024/technique/index.html
  9. 4
    3
      david/index.html
  10. 19
    31
      david/log/index.xml
  11. 12
    0
      david/recherche/index.html

+ 4
- 4
david/2024/04/05/index.html View File

@@ -153,8 +153,8 @@
rel="search" data-no-instant>Recherche</a>
• <a rel="next"
href="/david/2024/04/08/"
title="Publication suivante : Éclipse">Suivant →</a>
href="/david/2024/04/07/"
title="Publication suivante : Piscine">Suivant →</a>
</p>
</nav>
@@ -225,8 +225,8 @@
<a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
• <a rel="next"
href="/david/2024/04/08/"
title="Publication suivante : Éclipse">Suivant →</a>
href="/david/2024/04/07/"
title="Publication suivante : Piscine">Suivant →</a>
</p>
</nav>

+ 428
- 0
david/2024/04/07/index.html View File

@@ -0,0 +1,428 @@
<!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>
Piscine
— 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="Il est tellement difficile de se remettre à nager. La première séance de l’année est toujours une agonie. Cent mètres, les bras qui brûlent et le souffle court. Cinq cent et déjà incapable d’aller plus loin. Heureusement que c’est le même rituel chaque année… et la promesse des lacs qui dégèlent participe à ma motivation.">
<!-- 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>Piscine</h1>
<p>Le <time datetime="2024-04-07">7 avril 2024</time></p>
</hgroup>
</header>
<nav>
<p>
<a rel="prev"
href="/david/2024/04/05/"
title="Publication précédente : Productivité">← 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>
• <a rel="next"
href="/david/2024/04/08/"
title="Publication suivante : Éclipse">Suivant →</a>
</p>
</nav>
<p>Il est tellement difficile de se remettre à nager. La première séance de l’année est toujours une agonie. Cent mètres, les bras qui brûlent et le souffle court. Cinq cent et déjà incapable d’aller plus loin. Heureusement que c’est le même rituel chaque année… et la promesse des lacs qui dégèlent participe à ma&nbsp;motivation.</p>
<a href="#hr-144" title="Lien vers cette section de la page"><hr id="hr-144" /></a>

<blockquote lang="en">
<p>While global variables scoped to the <code>:root</code> let me define system-wide defaults, I also like to scope variables for styles that change with utility classes to the element&nbsp;itself.</p>
<p>CSS variables scoped to an element can use other CSS variables as their value. But <mark>scoping them to the element provides an easy way to modify&nbsp;them.</mark></p>
<p><cite><em><a data-link-domain="gomakethings.com" href="https://gomakethings.com/an-advanced-way-to-use-css-variables/" hreflang="en"
title="Consultation de l’article (anglais)">An advanced way to use CSS variables</a>
<a href="/david/cache/2024/a16101277229b3aeca8ac3249c84320c/" hreflang="en"
data-tippy data-description="Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects."
data-source="https://gomakethings.com/an-advanced-way-to-use-css-variables/"
data-date="2024-04-08"
data-favicon="https://gomakethings.com/img/favicon.ico"
data-domain="gomakethings.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></em></cite></p>
</blockquote>
<p>Les variables CSS combinées à <code>:has()</code> + <code>:is()</code> + <code>:where()</code> transforment complètement la façon d’interagir avec une page pour pouvoir la styler. <a href="/david/2024/01/02/" title="Fondations">Je</a> <a href="/david/2024/03/07/#hr-102">me</a> <a href="/david/2024/03/08/#hr-104">répète</a> mais vraiment je ne m’en remets pas. À mon niveau de bidouilleur, c’est un pan entier de mon métier qui est en train d’être transformé. Si je savais ce dont je parlais, je comparerais ça à un changement de paradigme aussi fondamental que de l’objet au fonctionnel par exemple. <em>Prends tes gouttes&nbsp;papi.</em></p>
<p>D’autres exemples documentés <a data-link-domain="dev.37signals.com" href="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/" hreflang="en"
title="Consultation de l’article (anglais)">sur le blog dev de 37signals</a>
<a href="/david/cache/2024/d90fde4ef3c84ad3d765dda386a97562/" hreflang="en"
data-tippy data-description="An in-depth look at how 37signals built ONCE/Campfire using modern features, vanilla CSS, and no frameworks or preprocessors."
data-source="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/"
data-date="2024-04-08"
data-favicon="https://dev.37signals.com/assets/images/global/favicon.png"
data-domain="dev.37signals.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> (oui, je&nbsp;sais…).</p>

<nav>
<p>
<a href="/david/2024/courage/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#courage</a>
<a href="/david/2024/sport/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#sport</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
</p>
</nav>
<nav>
<p>
<a rel="prev"
href="/david/2024/04/05/"
title="Publication précédente : Productivité">← Précédent</a> •
<a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
• <a rel="next"
href="/david/2024/04/08/"
title="Publication suivante : Éclipse">Suivant →</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 markObserver = new IntersectionObserver((entries, observer) => {
const computedStyle = getComputedStyle(document.documentElement)
const markBackground = computedStyle.getPropertyValue('--mark-background')
for (const entry of entries) {
if (entry.intersectionRatio === 0) continue
const markElement = entry.target
markElement.style.backgroundColor = 'inherit'
const annotation = annotate(
markElement, {
type: 'highlight',
multiline: true,
color: markBackground,
// animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
animate: false
}
)
annotation.show()
observer.unobserve(markElement)
}
}, {threshold: 1.0})

for (const markElement of document.querySelectorAll('mark')) {
markObserver.observe(markElement)
}
</script>

</body>
</html>

+ 4
- 4
david/2024/04/08/index.html View File

@@ -143,8 +143,8 @@
<p>
<a rel="prev"
href="/david/2024/04/05/"
title="Publication précédente : Productivité">← Précédent</a> •
href="/david/2024/04/07/"
title="Publication précédente : Piscine">← Précédent</a> •
<a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
•
@@ -213,8 +213,8 @@
<p>
<a rel="prev"
href="/david/2024/04/05/"
title="Publication précédente : Productivité">← Précédent</a> •
href="/david/2024/04/07/"
title="Publication précédente : Piscine">← Précédent</a> •
<a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>

+ 17
- 0
david/2024/_sources/2024-04-07 - Piscine.md View File

@@ -0,0 +1,17 @@
# Piscine

Il est tellement difficile de se remettre à nager. La première séance de l’année est toujours une agonie. Cent mètres, les bras qui brûlent et le souffle court. Cinq cent et déjà incapable d’aller plus loin. Heureusement que c’est le même rituel chaque année… et la promesse des lacs qui dégèlent participe à ma motivation.

---

> [en] While global variables scoped to the `:root` let me define system-wide defaults, I also like to scope variables for styles that change with utility classes to the element itself.
>
> CSS variables scoped to an element can use other CSS variables as their value. But ==scoping them to the element provides an easy way to modify them.==
>
> <cite>*[An advanced way to use CSS variables](https://gomakethings.com/an-advanced-way-to-use-css-variables/)*</cite>

Les variables CSS combinées à `:has()` + `:is()` + `:where()` transforment complètement la façon d’interagir avec une page pour pouvoir la styler. [Je](/david/2024/01/02/) [me](/david/2024/03/07/#hr-102) [répète](/david/2024/03/08/#hr-104) mais vraiment je ne m’en remets pas. À mon niveau de bidouilleur, c’est un pan entier de mon métier qui est en train d’être transformé. Si je savais ce dont je parlais, je comparerais ça à un changement de paradigme aussi fondamental que de l’objet au fonctionnel par exemple. *Prends tes gouttes papi.*

D’autres exemples documentés [sur le blog dev de 37signals](https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/) (oui, je sais…).

#courage #sport #technique

+ 66
- 0
david/2024/courage/index.html View File

@@ -134,6 +134,72 @@
</p>
</nav>
<h2>
<a href="/david/2024/04/07/" title="Lien permanent vers cet article">Piscine</a> <time datetime="2024-04-07">7 avril 2024</time>
</h2>
<p>Il est tellement difficile de se remettre à nager. La première séance de l’année est toujours une agonie. Cent mètres, les bras qui brûlent et le souffle court. Cinq cent et déjà incapable d’aller plus loin. Heureusement que c’est le même rituel chaque année… et la promesse des lacs qui dégèlent participe à ma&nbsp;motivation.</p>
<a href="#hr-144" title="Lien vers cette section de la page"><hr id="hr-144" /></a>

<blockquote lang="en">
<p>While global variables scoped to the <code>:root</code> let me define system-wide defaults, I also like to scope variables for styles that change with utility classes to the element&nbsp;itself.</p>
<p>CSS variables scoped to an element can use other CSS variables as their value. But <mark>scoping them to the element provides an easy way to modify&nbsp;them.</mark></p>
<p><cite><em><a data-link-domain="gomakethings.com" href="https://gomakethings.com/an-advanced-way-to-use-css-variables/" hreflang="en"
title="Consultation de l’article (anglais)">An advanced way to use CSS variables</a>
<a href="/david/cache/2024/a16101277229b3aeca8ac3249c84320c/" hreflang="en"
data-tippy data-description="Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects."
data-source="https://gomakethings.com/an-advanced-way-to-use-css-variables/"
data-date="2024-04-08"
data-favicon="https://gomakethings.com/img/favicon.ico"
data-domain="gomakethings.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></em></cite></p>
</blockquote>
<p>Les variables CSS combinées à <code>:has()</code> + <code>:is()</code> + <code>:where()</code> transforment complètement la façon d’interagir avec une page pour pouvoir la styler. <a href="/david/2024/01/02/" title="Fondations">Je</a> <a href="/david/2024/03/07/#hr-102">me</a> <a href="/david/2024/03/08/#hr-104">répète</a> mais vraiment je ne m’en remets pas. À mon niveau de bidouilleur, c’est un pan entier de mon métier qui est en train d’être transformé. Si je savais ce dont je parlais, je comparerais ça à un changement de paradigme aussi fondamental que de l’objet au fonctionnel par exemple. <em>Prends tes gouttes&nbsp;papi.</em></p>
<p>D’autres exemples documentés <a data-link-domain="dev.37signals.com" href="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/" hreflang="en"
title="Consultation de l’article (anglais)">sur le blog dev de 37signals</a>
<a href="/david/cache/2024/d90fde4ef3c84ad3d765dda386a97562/" hreflang="en"
data-tippy data-description="An in-depth look at how 37signals built ONCE/Campfire using modern features, vanilla CSS, and no frameworks or preprocessors."
data-source="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/"
data-date="2024-04-08"
data-favicon="https://dev.37signals.com/assets/images/global/favicon.png"
data-domain="dev.37signals.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> (oui, je&nbsp;sais…).</p>

<nav>
<p>
<a href="/david/2024/courage/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#courage</a>
<a href="/david/2024/sport/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#sport</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
</p>
</nav>
<h2>
<a href="/david/2024/03/24/" title="Lien permanent vers cet article">Cage</a> <time datetime="2024-03-24">24 mars 2024</time>
</h2>

+ 4
- 3
david/2024/index.html View File

@@ -233,6 +233,7 @@
<a href="/david/2024/04/02/">Porte</a>,
<a href="/david/2024/04/03/">Décision</a>,
<a href="/david/2024/04/05/">Productivité</a>,
<a href="/david/2024/04/07/">Piscine</a>,
<a href="/david/2024/04/08/">Éclipse</a>.
</p>
@@ -249,7 +250,7 @@
<a href="/david/2024/cinema/" rel="tag">#cinéma (1)</a>,
<a href="/david/2024/commun/" rel="tag">#commun (11)</a>,
<a href="/david/2024/communaute/" rel="tag">#communauté (6)</a>,
<a href="/david/2024/courage/" rel="tag">#courage (1)</a>,
<a href="/david/2024/courage/" rel="tag">#courage (2)</a>,
<a href="/david/2024/decentralisation/" rel="tag">#décentralisation (1)</a>,
<a href="/david/2024/deception/" rel="tag">#déception (3)</a>,
<a href="/david/2024/decision/" rel="tag">#décision (8)</a>,
@@ -282,8 +283,8 @@
<a href="/david/2024/protopie/" rel="tag">#protopie (9)</a>,
<a href="/david/2024/psychologie/" rel="tag">#psychologie (12)</a>,
<a href="/david/2024/solastalgia/" rel="tag">#solastalgia (5)</a>,
<a href="/david/2024/sport/" rel="tag">#sport (6)</a>,
<a href="/david/2024/technique/" rel="tag">#technique (21)</a>,
<a href="/david/2024/sport/" rel="tag">#sport (7)</a>,
<a href="/david/2024/technique/" rel="tag">#technique (22)</a>,
<a href="/david/2024/velo/" rel="tag">#vélo (1)</a>,
<a href="/david/2024/web/" rel="tag">#web (14)</a>.

+ 66
- 0
david/2024/sport/index.html View File

@@ -134,6 +134,72 @@
</p>
</nav>
<h2>
<a href="/david/2024/04/07/" title="Lien permanent vers cet article">Piscine</a> <time datetime="2024-04-07">7 avril 2024</time>
</h2>
<p>Il est tellement difficile de se remettre à nager. La première séance de l’année est toujours une agonie. Cent mètres, les bras qui brûlent et le souffle court. Cinq cent et déjà incapable d’aller plus loin. Heureusement que c’est le même rituel chaque année… et la promesse des lacs qui dégèlent participe à ma&nbsp;motivation.</p>
<a href="#hr-144" title="Lien vers cette section de la page"><hr id="hr-144" /></a>

<blockquote lang="en">
<p>While global variables scoped to the <code>:root</code> let me define system-wide defaults, I also like to scope variables for styles that change with utility classes to the element&nbsp;itself.</p>
<p>CSS variables scoped to an element can use other CSS variables as their value. But <mark>scoping them to the element provides an easy way to modify&nbsp;them.</mark></p>
<p><cite><em><a data-link-domain="gomakethings.com" href="https://gomakethings.com/an-advanced-way-to-use-css-variables/" hreflang="en"
title="Consultation de l’article (anglais)">An advanced way to use CSS variables</a>
<a href="/david/cache/2024/a16101277229b3aeca8ac3249c84320c/" hreflang="en"
data-tippy data-description="Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects."
data-source="https://gomakethings.com/an-advanced-way-to-use-css-variables/"
data-date="2024-04-08"
data-favicon="https://gomakethings.com/img/favicon.ico"
data-domain="gomakethings.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></em></cite></p>
</blockquote>
<p>Les variables CSS combinées à <code>:has()</code> + <code>:is()</code> + <code>:where()</code> transforment complètement la façon d’interagir avec une page pour pouvoir la styler. <a href="/david/2024/01/02/" title="Fondations">Je</a> <a href="/david/2024/03/07/#hr-102">me</a> <a href="/david/2024/03/08/#hr-104">répète</a> mais vraiment je ne m’en remets pas. À mon niveau de bidouilleur, c’est un pan entier de mon métier qui est en train d’être transformé. Si je savais ce dont je parlais, je comparerais ça à un changement de paradigme aussi fondamental que de l’objet au fonctionnel par exemple. <em>Prends tes gouttes&nbsp;papi.</em></p>
<p>D’autres exemples documentés <a data-link-domain="dev.37signals.com" href="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/" hreflang="en"
title="Consultation de l’article (anglais)">sur le blog dev de 37signals</a>
<a href="/david/cache/2024/d90fde4ef3c84ad3d765dda386a97562/" hreflang="en"
data-tippy data-description="An in-depth look at how 37signals built ONCE/Campfire using modern features, vanilla CSS, and no frameworks or preprocessors."
data-source="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/"
data-date="2024-04-08"
data-favicon="https://dev.37signals.com/assets/images/global/favicon.png"
data-domain="dev.37signals.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> (oui, je&nbsp;sais…).</p>

<nav>
<p>
<a href="/david/2024/courage/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#courage</a>
<a href="/david/2024/sport/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#sport</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
</p>
</nav>
<h2>
<a href="/david/2024/03/14/" title="Lien permanent vers cet article">Montre 2</a> <time datetime="2024-03-14">14 mars 2024</time>
</h2>

+ 66
- 0
david/2024/technique/index.html View File

@@ -134,6 +134,72 @@
</p>
</nav>
<h2>
<a href="/david/2024/04/07/" title="Lien permanent vers cet article">Piscine</a> <time datetime="2024-04-07">7 avril 2024</time>
</h2>
<p>Il est tellement difficile de se remettre à nager. La première séance de l’année est toujours une agonie. Cent mètres, les bras qui brûlent et le souffle court. Cinq cent et déjà incapable d’aller plus loin. Heureusement que c’est le même rituel chaque année… et la promesse des lacs qui dégèlent participe à ma&nbsp;motivation.</p>
<a href="#hr-144" title="Lien vers cette section de la page"><hr id="hr-144" /></a>

<blockquote lang="en">
<p>While global variables scoped to the <code>:root</code> let me define system-wide defaults, I also like to scope variables for styles that change with utility classes to the element&nbsp;itself.</p>
<p>CSS variables scoped to an element can use other CSS variables as their value. But <mark>scoping them to the element provides an easy way to modify&nbsp;them.</mark></p>
<p><cite><em><a data-link-domain="gomakethings.com" href="https://gomakethings.com/an-advanced-way-to-use-css-variables/" hreflang="en"
title="Consultation de l’article (anglais)">An advanced way to use CSS variables</a>
<a href="/david/cache/2024/a16101277229b3aeca8ac3249c84320c/" hreflang="en"
data-tippy data-description="Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects."
data-source="https://gomakethings.com/an-advanced-way-to-use-css-variables/"
data-date="2024-04-08"
data-favicon="https://gomakethings.com/img/favicon.ico"
data-domain="gomakethings.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></em></cite></p>
</blockquote>
<p>Les variables CSS combinées à <code>:has()</code> + <code>:is()</code> + <code>:where()</code> transforment complètement la façon d’interagir avec une page pour pouvoir la styler. <a href="/david/2024/01/02/" title="Fondations">Je</a> <a href="/david/2024/03/07/#hr-102">me</a> <a href="/david/2024/03/08/#hr-104">répète</a> mais vraiment je ne m’en remets pas. À mon niveau de bidouilleur, c’est un pan entier de mon métier qui est en train d’être transformé. Si je savais ce dont je parlais, je comparerais ça à un changement de paradigme aussi fondamental que de l’objet au fonctionnel par exemple. <em>Prends tes gouttes&nbsp;papi.</em></p>
<p>D’autres exemples documentés <a data-link-domain="dev.37signals.com" href="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/" hreflang="en"
title="Consultation de l’article (anglais)">sur le blog dev de 37signals</a>
<a href="/david/cache/2024/d90fde4ef3c84ad3d765dda386a97562/" hreflang="en"
data-tippy data-description="An in-depth look at how 37signals built ONCE/Campfire using modern features, vanilla CSS, and no frameworks or preprocessors."
data-source="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/"
data-date="2024-04-08"
data-favicon="https://dev.37signals.com/assets/images/global/favicon.png"
data-domain="dev.37signals.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> (oui, je&nbsp;sais…).</p>

<nav>
<p>
<a href="/david/2024/courage/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#courage</a>
<a href="/david/2024/sport/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#sport</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
</p>
</nav>
<h2>
<a href="/david/2024/03/26/" title="Lien permanent vers cet article">GPX Viewer</a> <time datetime="2024-03-26">26 mars 2024</time>
</h2>

+ 4
- 3
david/index.html View File

@@ -469,6 +469,7 @@
<p>Liste des publications récentes en ordre anté-chronologique :</p>
<p>
<a href="/david/2024/04/08/" data-enthousiasme data-experience data-photographie title="Étiquettes : enthousiasme, expérience, photographie.">Éclipse</a>,
<a href="/david/2024/04/07/" data-courage data-sport data-technique title="Étiquettes : courage, sport, technique.">Piscine</a>,
<a href="/david/2024/04/05/" data-documentation data-experience data-psychologie title="Étiquettes : documentation, expérience, psychologie.">Productivité</a>,
<a href="/david/2024/04/03/" data-equipe data-experience data-gratitude title="Étiquettes : équipe, expérience, gratitude.">Décision</a>,
<a href="/david/2024/04/02/" data-commun data-opensource data-protopie title="Étiquettes : commun, opensource, protopie.">Porte</a>,
@@ -572,7 +573,7 @@
<a href="/david/2024/cinema/" data-tag="cinema" rel="tag">#cinéma (1)</a>,
<a href="/david/2024/commun/" data-tag="commun" rel="tag">#commun (11)</a>,
<a href="/david/2024/communaute/" data-tag="communaute" rel="tag">#communauté (6)</a>,
<a href="/david/2024/courage/" data-tag="courage" rel="tag">#courage (1)</a>,
<a href="/david/2024/courage/" data-tag="courage" rel="tag">#courage (2)</a>,
<a href="/david/2024/decentralisation/" data-tag="decentralisation" rel="tag">#décentralisation (1)</a>,
<a href="/david/2024/deception/" data-tag="deception" rel="tag">#déception (3)</a>,
<a href="/david/2024/decision/" data-tag="decision" rel="tag">#décision (8)</a>,
@@ -605,8 +606,8 @@
<a href="/david/2024/protopie/" data-tag="protopie" rel="tag">#protopie (9)</a>,
<a href="/david/2024/psychologie/" data-tag="psychologie" rel="tag">#psychologie (12)</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 (6)</a>,
<a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (21)</a>,
<a href="/david/2024/sport/" data-tag="sport" rel="tag">#sport (7)</a>,
<a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (22)</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 (14)</a>.

+ 19
- 31
david/log/index.xml View File

@@ -55,6 +55,25 @@
&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/enthousiasme/&quot;&gt;#enthousiasme&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/experience/&quot;&gt;#expérience&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">Piscine</title>
<link href="https://larlet.fr/david/2024/04/07/" rel="alternate" type="text/html" />
<updated>2024-04-07T12:00:00+01:00</updated>
<id>https://larlet.fr/david/2024/04/07/</id>
<summary type="html">
&lt;p&gt;Il est tellement difficile de se remettre à nager. La première séance de l’année est toujours une agonie. Cent mètres, les bras qui brûlent et le souffle court. Cinq cent et déjà incapable d’aller plus loin. Heureusement que c’est le même rituel chaque année… et la promesse des lacs qui dégèlent participe à ma&amp;nbsp;motivation.&lt;/p&gt;
&lt;hr /&gt;

&lt;blockquote lang=&quot;en&quot;&gt;
&lt;p&gt;While global variables scoped to the &lt;code&gt;:root&lt;/code&gt; let me define system-wide defaults, I also like to scope variables for styles that change with utility classes to the element&amp;nbsp;itself.&lt;/p&gt;
&lt;p&gt;CSS variables scoped to an element can use other CSS variables as their value. But &lt;mark&gt;scoping them to the element provides an easy way to modify&amp;nbsp;them.&lt;/mark&gt;&lt;/p&gt;
&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://gomakethings.com/an-advanced-way-to-use-css-variables/&quot;&gt;An advanced way to use CSS&amp;nbsp;variables&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Les variables CSS combinées à &lt;code&gt;:has()&lt;/code&gt; + &lt;code&gt;:is()&lt;/code&gt; + &lt;code&gt;:where()&lt;/code&gt; transforment complètement la façon d’interagir avec une page pour pouvoir la styler. &lt;a href=&quot;https://larlet.fr/david/2024/01/02/&quot;&gt;Je&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/03/07/#hr-102&quot;&gt;me&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/03/08/#hr-104&quot;&gt;répète&lt;/a&gt; mais vraiment je ne m’en remets pas. À mon niveau de bidouilleur, c’est un pan entier de mon métier qui est en train d’être transformé. Si je savais ce dont je parlais, je comparerais ça à un changement de paradigme aussi fondamental que de l’objet au fonctionnel par exemple. &lt;em&gt;Prends tes gouttes&amp;nbsp;papi.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;D’autres exemples documentés &lt;a href=&quot;https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/&quot;&gt;sur le blog dev de 37signals&lt;/a&gt; (oui, je&amp;nbsp;sais…).&lt;/p&gt;
&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/courage/&quot;&gt;#courage&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/sport/&quot;&gt;#sport&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&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">Productivité</title>
<link href="https://larlet.fr/david/2024/04/05/" rel="alternate" type="text/html" />
@@ -1283,35 +1302,4 @@ Lovée dans mes&amp;nbsp;bras&lt;/p&gt;
&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/dependance/&quot;&gt;#dépendance&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/sport/&quot;&gt;#sport&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&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">Simple</title>
<link href="https://larlet.fr/david/2024/03/01/" rel="alternate" type="text/html" />
<updated>2024-03-01T12:00:00+01:00</updated>
<id>https://larlet.fr/david/2024/03/01/</id>
<summary type="html">

&lt;blockquote lang=&quot;en&quot;&gt;
&lt;p&gt;We can bring that into RSS by treating any interaction as content. If you post something, thats an entry in your feed (as before). If you comment on something, thats also an entry in your feed. If you like something, thats another entry in your feed. If you follow someone (which would mean subscribing to some RSS feed), thats also another entry in your feed. To mark that interactive nature of some feed entry, &lt;mark&gt;we can simple extend RSS a&amp;nbsp;bit&lt;/mark&gt;&lt;/p&gt;
&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://gist.github.com/loreanvictor/bddd8824c744024d338e935bd7e96707&quot;&gt;Interaction as&amp;nbsp;Content&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Tout est dans le &lt;q lang=&quot;en&quot;&gt;simple&lt;/q&gt;&amp;nbsp;🙃.&lt;/p&gt;
&lt;p&gt;Rédiger une spécification comme &lt;a href=&quot;https://en.wikipedia.org/wiki/Media_RSS&quot;&gt;Media RSS&lt;/a&gt; n’est déjà pas trivial mais alors faire en sorte que cela soit adopté et devienne un standard c’est une autre paire de&amp;nbsp;manches.&lt;/p&gt;

&lt;blockquote lang=&quot;en&quot;&gt;
&lt;p&gt;RSS originated in 1999, and has strived to be a simple, easy to understand format, with relatively modest goals. After it became a popular format, &lt;mark&gt;developers wanted to extend it&lt;/mark&gt; using modules defined in namespaces, as specified by the&amp;nbsp;W3C.&lt;/p&gt;
&lt;p&gt;RSS 2.0&amp;nbsp;adds that capability, following a simple rule. A RSS feed may contain elements and attributes not described on this page, only if those elements and attributes are defined in a&amp;nbsp;namespace.&lt;/p&gt;
&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.rssboard.org/rss-specification#extendingRss&quot;&gt;RSS&amp;nbsp;2.0&amp;nbsp;Specification&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Beaucoup de personnes ont envie de faire davantage avec RSS, c’est la diffusion à une échelle non anecdotique qui est difficile. Peut-être qu’un acteur comme Mastodon pourrait peser dans la balance d’une telle&amp;nbsp;initiative.&lt;/p&gt;

&lt;blockquote lang=&quot;en&quot;&gt;
&lt;p&gt;Another feature area I would think about is interactivity. I’m fascinated with Google’s work in Gmail around “Inbox Actions” – basically the one-click buttons to perform an email action like RSVP, or reviewing a bug. Here’s an explainer with some&amp;nbsp;examples.&lt;/p&gt;
&lt;p&gt;Let’s call it Feed Actions. &lt;mark&gt;Feed Actions could also be an RSS&amp;nbsp;extension.&lt;/mark&gt;&lt;/p&gt;
&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://interconnected.org/home/2021/05/26/chrome_and_rss&quot;&gt;Three requests for the Google Chrome team as they experiment with&amp;nbsp;RSS&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;J’ai deux communautés dans lesquelles c’est même devenu un &lt;em&gt;running gag&lt;/em&gt; de créer un outil qui explorerait de nouvelles&amp;nbsp;possibilités.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2021/05/26/&quot;&gt;Suivez-moi&lt;/a&gt; et vous n’aurez plus jamais faim&amp;#8239;! Gniarkgniarkgniark&amp;nbsp;🦁⚡️&lt;/p&gt;
&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/evolution/&quot;&gt;#évolution&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/laboratoire/&quot;&gt;#laboratoire&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>
</feed>

+ 12
- 0
david/recherche/index.html View File

@@ -282,6 +282,12 @@
"date": "2024-04-08",
"content": "Il y a l\u2019\u00e9clipse et puis il y a toute l\u2019ambiance autour. Je crois que c\u2019est ce qui m\u2019a le plus marqu\u00e9, cet \u00e9merveillement doubl\u00e9 d\u2019un enthousiasme collectif. Lorsque tout le monde retire les lunettes ou m\u00eame un peu avant lorsque la lumi\u00e8re change et que l\u2019on voit un coucher (??) de soleil en version acc\u00e9l\u00e9r\u00e9 qui s\u2019avance vers nous en pleine\u00a0apr\u00e8s-midi. L\u2019\u00e9clipse totale \u00e9tait cens\u00e9e \u00eatre de 1\u202fmin 45\u202fsec \u00e0 ma position mais alors en ressenti derri\u00e8re l\u2019objectif c\u2019\u00e9tait du 20\u00a0secondes\u202f! \u00c0 peine le temps de r\u00e9duire au maximum l\u2019exposition et de d\u00e9clencher. J\u2019avais fait une mise au point sur un avion au pr\u00e9alable et j\u2019\u00e9tais pass\u00e9 en manuel mais c\u2019\u00e9tait stupide et \u00e7a a rendu floues toutes les photos\u2026 jusqu\u2019aux deux derni\u00e8res. Coup de bol d\u2019avoir pris le temps de tester l\u2019autofocus en sentant venir la\u00a0fin. <a href=\"/static/david/2024/2024-04-08-eclipse-1.jpg\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-04-08-eclipse-1.jpg\" width=\"2000\" height=\"2000\" srcset=\"/static/david/2024/2024-04-08-eclipse-1.jpg 2000w, /static/david/2024/2024-04-08-eclipse-1_660x440.jpg 660w, /static/david/2024/2024-04-08-eclipse-1_990x660.jpg 990w, /static/david/2024/2024-04-08-eclipse-1_1320x880.jpg 1320w\" sizes=\"min(100vw, calc(100vh * 2000 / 2000))\" loading=\"lazy\" decoding=\"async\" alt=\"Le moment de l\u2019\u00e9clipse o\u00f9 la lune passe totalement devant le soleil.\"> J\u2019\u00e9tais tellement content de d\u00e9couvrir des \u00e9ruptions solaires au d\u00e9veloppement\u00a0! En \u00e9tant sur la fin, cela permet d\u2019\u00eatre vraiment \u00e0 la limite de la couronne solaire et de photographier un ph\u00e9nom\u00e8ne que je ne pensait pas possible avec mon\u00a0mat\u00e9riel. Et puis, il y a ce moment o\u00f9 l\u2019hyst\u00e9rie collective redevient s\u00e9rieuse car il faut remettre les lunettes et prendre le temps de se demander ce qu\u2019il vient de se\u00a0passer. <a href=\"/static/david/2024/2024-04-08-eclipse-2.jpg\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-04-08-eclipse-2.jpg\" width=\"3840\" height=\"2560\" srcset=\"/static/david/2024/2024-04-08-eclipse-2.jpg 3840w, /static/david/2024/2024-04-08-eclipse-2_660x440.jpg 660w, /static/david/2024/2024-04-08-eclipse-2_990x660.jpg 990w, /static/david/2024/2024-04-08-eclipse-2_1320x880.jpg 1320w\" sizes=\"min(100vw, calc(100vh * 3840 / 2560))\" loading=\"lazy\" decoding=\"async\" alt=\"Le moment de l\u2019\u00e9clipse o\u00f9 la lune va d\u00e9couvrir le soleil.\"> En mode halo au d\u00e9veloppement car c\u2019est quand m\u00eame\u00a0sympa. Fait \u00e9tonnant, quelques petites minutes apr\u00e8s l\u2019apog\u00e9e, on voyait un avion et surtout son ombre projet\u00e9e de mani\u00e8re inhabituelle. J\u2019ai l\u2019intuition qu\u2019il \u00e9tait dans une zone qui n\u2019arrive jamais en temps normal car cet angle lumineux n\u2019est pas possible. J\u2019aurais d\u00fb prendre une photo pour pouvoir faire des calculs \u00e0 ce\u00a0sujet."
},
{
"title": "Piscine",
"url": "/david/2024/04/07/",
"date": "2024-04-07",
"content": "Il est tellement difficile de se remettre \u00e0 nager. La premi\u00e8re s\u00e9ance de l\u2019ann\u00e9e est toujours une agonie. Cent m\u00e8tres, les bras qui br\u00fblent et le souffle court. Cinq cent et d\u00e9j\u00e0 incapable d\u2019aller plus loin. Heureusement que c\u2019est le m\u00eame rituel chaque ann\u00e9e\u2026 et la promesse des lacs qui d\u00e9g\u00e8lent participe \u00e0 ma\u00a0motivation. While global variables scoped to the :root let me define system-wide defaults, I also like to scope variables for styles that change with utility classes to the element\u00a0itself. CSS variables scoped to an element can use other CSS variables as their value. But scoping them to the element provides an easy way to modify\u00a0them. An advanced way to use CSS\u00a0variables Les variables CSS combin\u00e9es \u00e0 :has() + :is() + :where() transforment compl\u00e8tement la fa\u00e7on d\u2019interagir avec une page pour pouvoir la styler. Je me r\u00e9p\u00e8te mais vraiment je ne m\u2019en remets pas. \u00c0 mon niveau de bidouilleur, c\u2019est un pan entier de mon m\u00e9tier qui est en train d\u2019\u00eatre transform\u00e9. Si je savais ce dont je parlais, je comparerais \u00e7a \u00e0 un changement de paradigme aussi fondamental que de l\u2019objet au fonctionnel par exemple. Prends tes gouttes\u00a0papi. D\u2019autres exemples document\u00e9s sur le blog dev de 37signals (oui, je\u00a0sais\u2026)."
},
{
"title": "Productivit\u00e9",
"url": "/david/2024/04/05/",
@@ -822,6 +828,12 @@
"date": "2024-04-08",
"content": "Il y a l\u2019\u00e9clipse et puis il y a toute l\u2019ambiance autour. Je crois que c\u2019est ce qui m\u2019a le plus marqu\u00e9, cet \u00e9merveillement doubl\u00e9 d\u2019un enthousiasme collectif. Lorsque tout le monde retire les lunettes ou m\u00eame un peu avant lorsque la lumi\u00e8re change et que l\u2019on voit un coucher (??) de soleil en version acc\u00e9l\u00e9r\u00e9 qui s\u2019avance vers nous en pleine\u00a0apr\u00e8s-midi. L\u2019\u00e9clipse totale \u00e9tait cens\u00e9e \u00eatre de 1\u202fmin 45\u202fsec \u00e0 ma position mais alors en ressenti derri\u00e8re l\u2019objectif c\u2019\u00e9tait du 20\u00a0secondes\u202f! \u00c0 peine le temps de r\u00e9duire au maximum l\u2019exposition et de d\u00e9clencher. J\u2019avais fait une mise au point sur un avion au pr\u00e9alable et j\u2019\u00e9tais pass\u00e9 en manuel mais c\u2019\u00e9tait stupide et \u00e7a a rendu floues toutes les photos\u2026 jusqu\u2019aux deux derni\u00e8res. Coup de bol d\u2019avoir pris le temps de tester l\u2019autofocus en sentant venir la\u00a0fin. <a href=\"/static/david/2024/2024-04-08-eclipse-1.jpg\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-04-08-eclipse-1.jpg\" width=\"2000\" height=\"2000\" srcset=\"/static/david/2024/2024-04-08-eclipse-1.jpg 2000w, /static/david/2024/2024-04-08-eclipse-1_660x440.jpg 660w, /static/david/2024/2024-04-08-eclipse-1_990x660.jpg 990w, /static/david/2024/2024-04-08-eclipse-1_1320x880.jpg 1320w\" sizes=\"min(100vw, calc(100vh * 2000 / 2000))\" loading=\"lazy\" decoding=\"async\" alt=\"Le moment de l\u2019\u00e9clipse o\u00f9 la lune passe totalement devant le soleil.\"> J\u2019\u00e9tais tellement content de d\u00e9couvrir des \u00e9ruptions solaires au d\u00e9veloppement\u00a0! En \u00e9tant sur la fin, cela permet d\u2019\u00eatre vraiment \u00e0 la limite de la couronne solaire et de photographier un ph\u00e9nom\u00e8ne que je ne pensait pas possible avec mon\u00a0mat\u00e9riel. Et puis, il y a ce moment o\u00f9 l\u2019hyst\u00e9rie collective redevient s\u00e9rieuse car il faut remettre les lunettes et prendre le temps de se demander ce qu\u2019il vient de se\u00a0passer. <a href=\"/static/david/2024/2024-04-08-eclipse-2.jpg\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-04-08-eclipse-2.jpg\" width=\"3840\" height=\"2560\" srcset=\"/static/david/2024/2024-04-08-eclipse-2.jpg 3840w, /static/david/2024/2024-04-08-eclipse-2_660x440.jpg 660w, /static/david/2024/2024-04-08-eclipse-2_990x660.jpg 990w, /static/david/2024/2024-04-08-eclipse-2_1320x880.jpg 1320w\" sizes=\"min(100vw, calc(100vh * 3840 / 2560))\" loading=\"lazy\" decoding=\"async\" alt=\"Le moment de l\u2019\u00e9clipse o\u00f9 la lune va d\u00e9couvrir le soleil.\"> En mode halo au d\u00e9veloppement car c\u2019est quand m\u00eame\u00a0sympa. Fait \u00e9tonnant, quelques petites minutes apr\u00e8s l\u2019apog\u00e9e, on voyait un avion et surtout son ombre projet\u00e9e de mani\u00e8re inhabituelle. J\u2019ai l\u2019intuition qu\u2019il \u00e9tait dans une zone qui n\u2019arrive jamais en temps normal car cet angle lumineux n\u2019est pas possible. J\u2019aurais d\u00fb prendre une photo pour pouvoir faire des calculs \u00e0 ce\u00a0sujet."
},
{
"title": "Piscine",
"url": "/david/2024/04/07/",
"date": "2024-04-07",
"content": "Il est tellement difficile de se remettre \u00e0 nager. La premi\u00e8re s\u00e9ance de l\u2019ann\u00e9e est toujours une agonie. Cent m\u00e8tres, les bras qui br\u00fblent et le souffle court. Cinq cent et d\u00e9j\u00e0 incapable d\u2019aller plus loin. Heureusement que c\u2019est le m\u00eame rituel chaque ann\u00e9e\u2026 et la promesse des lacs qui d\u00e9g\u00e8lent participe \u00e0 ma\u00a0motivation. While global variables scoped to the :root let me define system-wide defaults, I also like to scope variables for styles that change with utility classes to the element\u00a0itself. CSS variables scoped to an element can use other CSS variables as their value. But scoping them to the element provides an easy way to modify\u00a0them. An advanced way to use CSS\u00a0variables Les variables CSS combin\u00e9es \u00e0 :has() + :is() + :where() transforment compl\u00e8tement la fa\u00e7on d\u2019interagir avec une page pour pouvoir la styler. Je me r\u00e9p\u00e8te mais vraiment je ne m\u2019en remets pas. \u00c0 mon niveau de bidouilleur, c\u2019est un pan entier de mon m\u00e9tier qui est en train d\u2019\u00eatre transform\u00e9. Si je savais ce dont je parlais, je comparerais \u00e7a \u00e0 un changement de paradigme aussi fondamental que de l\u2019objet au fonctionnel par exemple. Prends tes gouttes\u00a0papi. D\u2019autres exemples document\u00e9s sur le blog dev de 37signals (oui, je\u00a0sais\u2026)."
},
{
"title": "Productivit\u00e9",
"url": "/david/2024/04/05/",

Write Preview
Loading…
Cancel
Save