15 changed files with 1720 additions and 127 deletions
+ 8
- 0
david/2024/02/25/index.html
View File
| @@ -152,6 +152,10 @@ | |||
| title="Aller à la page de recherche" | |||
| rel="search" data-no-instant>Recherche</a> | |||
| • <a rel="next" | |||
| href="/david/2024/02/26/" | |||
| title="Publication suivante : Galaxie">Suivant →</a> | |||
| </p> | |||
| </nav> | |||
| @@ -233,6 +237,10 @@ | |||
| <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a> | |||
| • <a rel="next" | |||
| href="/david/2024/02/26/" | |||
| title="Publication suivante : Galaxie">Suivant →</a> | |||
| </p> | |||
| </nav> | |||
+ 425
- 0
david/2024/02/26/index.html
View File
| @@ -0,0 +1,425 @@ | |||
| <!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> | |||
| Galaxie | |||
| — David Larlet</title> | |||
| <meta name="description" content="Anecdote du jour qui met le sourire de bon matin."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Is that even respected? Retrospectively? What a shAItshow… | |||
| https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> | |||
| <meta name="robots" content="noai, noimageai"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2024-02-03.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> | |||
| <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> | |||
| <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>Galaxie</h1> | |||
| <p>Le <time datetime="2024-02-26">26 février 2024</time></p> | |||
| </hgroup> | |||
| </header> | |||
| <nav> | |||
| <p> | |||
| <a rel="prev" | |||
| href="/david/2024/02/25/" | |||
| title="Publication précédente : Jour 2">← 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/02/27/" | |||
| title="Publication suivante : Rédaction">Suivant →</a> | |||
| </p> | |||
| </nav> | |||
| <p>Anecdote du jour qui met le sourire de bon matin.</p> | |||
| <figure> | |||
| <a href="/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| width="4032" height="3024" | |||
| srcset="/static/david/2024/2024-02-26-neige-galaxie.jpg 4032w, /static/david/2024/2024-02-26-neige-galaxie_660x440.jpg 660w, /static/david/2024/2024-02-26-neige-galaxie_990x660.jpg 990w, /static/david/2024/2024-02-26-neige-galaxie_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 4032 / 3024))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="De la neige qui tombe à gros flocon."> | |||
| </a> | |||
| <figcaption>L’espace d’un instant, par la fenêtre.</figcaption> | |||
| </figure> | |||
| <blockquote> | |||
| <p>— Oh la belle neige !<br /> | |||
| — Il pleut des étoiles, la galaxie est en train de tomber.<br /> | |||
| — ❤️</p> | |||
| </blockquote> | |||
| <a href="#hr-89" title="Lien vers cette section de la page"><hr id="hr-89" /></a> | |||
| <blockquote lang="en"> | |||
| <p>CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party components.</p> | |||
| <p><cite><em><a data-link-domain="lea.verou.me" href="https://lea.verou.me/docs/var-groups/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Proposal: CSS Variable Groups</a> | |||
| <a href="/david/cache/2024/0cc2e9c6b29f8326b2ff628f64e22888/" hreflang="en" | |||
| data-tippy data-description="CSS Variable Groups is a way to define multiple properties under the same namespace" | |||
| data-source="https://lea.verou.me/docs/var-groups/" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://lea.verou.me/mark.svg" | |||
| data-domain="lea.verou.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>Heureusement que Lea Verou <a href="/david/2024/02/18/" title="In·directions">me lit</a> et traduit ça en proposition de <a data-link-domain="github.com" href="https://github.com/w3c/csswg-drafts/issues/9992">standardisation</a> en quelques jours au lieu de chialer 😅🙇. Trop hâte !</p> | |||
| <a href="#hr-90" title="Lien vers cette section de la page"><hr id="hr-90" /></a> | |||
| <blockquote lang="en"> | |||
| <p><mark>Maybe that’s ok.</mark> The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems — in that case you might as well not have plugins.</p> | |||
| <p><cite><em><a data-link-domain="css-tricks.com" href="https://css-tricks.com/designing-a-javascript-plugin-system/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Designing a JavaScript Plugin System</a> | |||
| <a href="/david/cache/2024/d9c30865dde8c88394ba054836a18ae3/" hreflang="en" | |||
| data-tippy data-description="WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too." | |||
| data-source="https://css-tricks.com/designing-a-javascript-plugin-system/" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://css-tricks.com/favicon.svg" | |||
| data-domain="css-tricks.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>Problématique du jour : comment concevoir un système de <em>plugins</em> qui soit le bon compromis entre flexibilité et stabilité ? Ce n’est pas si évident, encore plus dans un écosystème aussi évolutif que JavaScript.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/parentalite/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#parentalité</a> | |||
| <a href="/david/2024/poesie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#poésie</a> | |||
| <a href="/david/2024/solastalgia/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#solastalgia</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/02/25/" | |||
| title="Publication précédente : Jour 2">← Précédent</a> • | |||
| <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a> | |||
| • <a rel="next" | |||
| href="/david/2024/02/27/" | |||
| title="Publication suivante : Rédaction">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> | |||
| </body> | |||
| </html> | |||
+ 387
- 0
david/2024/02/27/index.html
View File
| @@ -0,0 +1,387 @@ | |||
| <!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> | |||
| Rédaction | |||
| — David Larlet</title> | |||
| <meta name="description" content="Je suis curieux de savoir comment tu rédiges ces textes ! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu écris tout à chaud une fois chez toi ? Ou tu écris quelques jours après sur des souvenirs qui s’effritent déjà mais ça n’a pas d’importance ? 🙂"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Is that even respected? Retrospectively? What a shAItshow… | |||
| https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> | |||
| <meta name="robots" content="noai, noimageai"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2024-02-03.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> | |||
| <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> | |||
| <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>Rédaction</h1> | |||
| <p>Le <time datetime="2024-02-27">27 février 2024</time></p> | |||
| </hgroup> | |||
| </header> | |||
| <nav> | |||
| <p> | |||
| <a rel="prev" | |||
| href="/david/2024/02/26/" | |||
| title="Publication précédente : Galaxie">← 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> | |||
| <p>Je suis curieux de savoir comment tu rédiges ces textes ! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu écris tout à chaud une fois chez toi ? Ou tu écris quelques jours après sur des souvenirs qui s’effritent déjà mais ça n’a pas d’importance ? 🙂</p> | |||
| <p><cite><em>Question de <a data-link-domain="social.bim.land" href="https://social.bim.land/@mlbiche">@mlbiche</a> sur masto</em></cite></p> | |||
| </blockquote> | |||
| <p>Il m’arrive de prendre des notes lors de sorties plus contemplatives (et moins risquées pour mes doigts !) mais c’est assez rare. Je n’arrive pas à écrire une histoire en étant en train de la vivre, c’est comme de faire des vidéos, j’ai l’impression de trop me mettre en scène sinon. Lorsque le récit influe sur le déroulé, ça brise quelque chose au niveau de son authenticité et de mon ressenti.</p> | |||
| <p>En général, je rédige cela à la maison, à chaud. Une fois que toutes les affaires ont été mises à sécher. Avec parfois des bribes qui s’agencent lors du long retour en voiture. Si j’attends plus de 24h, ce ne sont pas tant les souvenirs qui s’effritent que la motivation à les partager qui s’envole, ça m’est déjà arrivé plusieurs fois.</p> | |||
| <a href="#hr-91" title="Lien vers cette section de la page"><hr id="hr-91" /></a> | |||
| <blockquote> | |||
| <p>Nos vies sont faites de métal incandescent.<br /> | |||
| Tant qu’elles rougeoient, nous en restons les forgerons.<br /> | |||
| Créateurs et inventeurs de nous-mêmes.</p> | |||
| <p>Mais comme le métal du forgeron qui refroidit, comme la coulée de lave qui atteint l’extrémité de son expansion, nos vies se figent.<br /> | |||
| Ce n’est qu’à cet instant précis que l’on peut dire qui on a été. quand la coulée de la vie a pris sa forme définitive.</p> | |||
| <p>D’ici je la contemple, cette vie. Ma vie.<br /> | |||
| Et je sais enfin qui je suis…</p> | |||
| <p><cite><em>La saga de Grimr</em>, Jérémie Moreau</cite></p> | |||
| </blockquote> | |||
| <p>Rétrospective sous forme de <a data-link-domain="ut7.fr" href="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Conseil</a> | |||
| <a href="/david/cache/2024/f3974ec778551dd1c3134c8094c3372b/" hreflang="en" | |||
| data-tippy data-description="Un conseil, c’est une réunion en cercle où les personnes se parlent et font l’expérience individuelle de ce que c’est que d’appartenir au groupe." | |||
| data-source="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://www.ut7.fr/favicon-192x192.png" | |||
| data-domain="ut7.fr" | |||
| ><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. Je suis de plus en plus tenté d’introduire une 6<sup>e</sup> étape qui serait autour du pardon. <q>Je te pardonne pour …, cela m’a permis d’apprendre … </q>. J’ai l’intuition que cela pourrait ajouter quelque chose pour un groupe relativement intime qui s’inscrit dans la durée.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/ecriture/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#écriture</a> | |||
| <a href="/david/2024/processus/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#processus</a> | |||
| <a href="/david/2024/psychologie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#psychologie</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/02/26/" | |||
| title="Publication précédente : Galaxie">← 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> | |||
| </body> | |||
| </html> | |||
+ 27
- 0
david/2024/_sources/2024-02-26 - Galaxie.md
View File
| @@ -0,0 +1,27 @@ | |||
| # Galaxie | |||
| Anecdote du jour qui met le sourire de bon matin. | |||
|  | |||
| > — Oh la belle neige ! | |||
| > — Il pleut des étoiles, la galaxie est en train de tomber. | |||
| > — ❤️ | |||
| --- | |||
| > [en] CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party components. | |||
| > | |||
| > <cite>*[Proposal: CSS Variable Groups](https://lea.verou.me/docs/var-groups/)*</cite> | |||
| Heureusement que Lea Verou [me lit](/david/2024/02/18/) et traduit ça en proposition de [standardisation](https://github.com/w3c/csswg-drafts/issues/9992) en quelques jours au lieu de chialer 😅🙇. Trop hâte ! | |||
| --- | |||
| > [en] ==Maybe that’s ok.== The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems — in that case you might as well not have plugins. | |||
| > | |||
| > <cite>*[Designing a JavaScript Plugin System](https://css-tricks.com/designing-a-javascript-plugin-system/)*</cite> | |||
| Problématique du jour : comment concevoir un système de *plugins* qui soit le bon compromis entre flexibilité et stabilité ? Ce n’est pas si évident, encore plus dans un écosystème aussi évolutif que JavaScript. | |||
| #parentalité #poésie #solastalgia | |||
+ 27
- 0
david/2024/_sources/2024-02-27 - Redaction.md
View File
| @@ -0,0 +1,27 @@ | |||
| # Rédaction | |||
| > Je suis curieux de savoir comment tu rédiges ces textes ! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu écris tout à chaud une fois chez toi ? Ou tu écris quelques jours après sur des souvenirs qui s’effritent déjà mais ça n’a pas d’importance ? 🙂 | |||
| > | |||
| > <cite>*Question de [@mlbiche](https://social.bim.land/@mlbiche) sur masto*</cite> | |||
| Il m’arrive de prendre des notes lors de sorties plus contemplatives (et moins risquées pour mes doigts !) mais c’est assez rare. Je n’arrive pas à écrire une histoire en étant en train de la vivre, c’est comme de faire des vidéos, j’ai l’impression de trop me mettre en scène sinon. Lorsque le récit influe sur le déroulé, ça brise quelque chose au niveau de son authenticité et de mon ressenti. | |||
| En général, je rédige cela à la maison, à chaud. Une fois que toutes les affaires ont été mises à sécher. Avec parfois des bribes qui s’agencent lors du long retour en voiture. Si j’attends plus de 24h, ce ne sont pas tant les souvenirs qui s’effritent que la motivation à les partager qui s’envole, ça m’est déjà arrivé plusieurs fois. | |||
| --- | |||
| > Nos vies sont faites de métal incandescent. | |||
| > Tant qu’elles rougeoient, nous en restons les forgerons. | |||
| > Créateurs et inventeurs de nous-mêmes. | |||
| > | |||
| > Mais comme le métal du forgeron qui refroidit, comme la coulée de lave qui atteint l’extrémité de son expansion, nos vies se figent. | |||
| > Ce n’est qu’à cet instant précis que l’on peut dire qui on a été. quand la coulée de la vie a pris sa forme définitive. | |||
| > | |||
| > D’ici je la contemple, cette vie. Ma vie. | |||
| > Et je sais enfin qui je suis… | |||
| > | |||
| > <cite>*La saga de Grimr*, Jérémie Moreau</cite> | |||
| Rétrospective sous forme de [Conseil](https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html) aujourd’hui. Je suis de plus en plus tenté d’introduire une 6<sup>e</sup> étape qui serait autour du pardon. <q>Je te pardonne pour …, cela m’a permis d’apprendre … </q>. J’ai l’intuition que cela pourrait ajouter quelque chose pour un groupe relativement intime qui s’inscrit dans la durée. | |||
| #écriture #processus #psychologie | |||
+ 61
- 0
david/2024/ecriture/index.html
View File
| @@ -134,6 +134,67 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/27/" title="Lien permanent vers cet article">Rédaction</a> <time datetime="2024-02-27">27 février 2024</time> | |||
| </h2> | |||
| <blockquote> | |||
| <p>Je suis curieux de savoir comment tu rédiges ces textes ! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu écris tout à chaud une fois chez toi ? Ou tu écris quelques jours après sur des souvenirs qui s’effritent déjà mais ça n’a pas d’importance ? 🙂</p> | |||
| <p><cite><em>Question de <a data-link-domain="social.bim.land" href="https://social.bim.land/@mlbiche">@mlbiche</a> sur masto</em></cite></p> | |||
| </blockquote> | |||
| <p>Il m’arrive de prendre des notes lors de sorties plus contemplatives (et moins risquées pour mes doigts !) mais c’est assez rare. Je n’arrive pas à écrire une histoire en étant en train de la vivre, c’est comme de faire des vidéos, j’ai l’impression de trop me mettre en scène sinon. Lorsque le récit influe sur le déroulé, ça brise quelque chose au niveau de son authenticité et de mon ressenti.</p> | |||
| <p>En général, je rédige cela à la maison, à chaud. Une fois que toutes les affaires ont été mises à sécher. Avec parfois des bribes qui s’agencent lors du long retour en voiture. Si j’attends plus de 24h, ce ne sont pas tant les souvenirs qui s’effritent que la motivation à les partager qui s’envole, ça m’est déjà arrivé plusieurs fois.</p> | |||
| <a href="#hr-91" title="Lien vers cette section de la page"><hr id="hr-91" /></a> | |||
| <blockquote> | |||
| <p>Nos vies sont faites de métal incandescent.<br /> | |||
| Tant qu’elles rougeoient, nous en restons les forgerons.<br /> | |||
| Créateurs et inventeurs de nous-mêmes.</p> | |||
| <p>Mais comme le métal du forgeron qui refroidit, comme la coulée de lave qui atteint l’extrémité de son expansion, nos vies se figent.<br /> | |||
| Ce n’est qu’à cet instant précis que l’on peut dire qui on a été. quand la coulée de la vie a pris sa forme définitive.</p> | |||
| <p>D’ici je la contemple, cette vie. Ma vie.<br /> | |||
| Et je sais enfin qui je suis…</p> | |||
| <p><cite><em>La saga de Grimr</em>, Jérémie Moreau</cite></p> | |||
| </blockquote> | |||
| <p>Rétrospective sous forme de <a data-link-domain="ut7.fr" href="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Conseil</a> | |||
| <a href="/david/cache/2024/f3974ec778551dd1c3134c8094c3372b/" hreflang="en" | |||
| data-tippy data-description="Un conseil, c’est une réunion en cercle où les personnes se parlent et font l’expérience individuelle de ce que c’est que d’appartenir au groupe." | |||
| data-source="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://www.ut7.fr/favicon-192x192.png" | |||
| data-domain="ut7.fr" | |||
| ><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. Je suis de plus en plus tenté d’introduire une 6<sup>e</sup> étape qui serait autour du pardon. <q>Je te pardonne pour …, cela m’a permis d’apprendre … </q>. J’ai l’intuition que cela pourrait ajouter quelque chose pour un groupe relativement intime qui s’inscrit dans la durée.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/ecriture/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#écriture</a> | |||
| <a href="/david/2024/processus/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#processus</a> | |||
| <a href="/david/2024/psychologie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#psychologie</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a> | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/01/14/" title="Lien permanent vers cet article">Fiction</a> <time datetime="2024-01-14">14 janvier 2024</time> | |||
| </h2> | |||
+ 9
- 6
david/2024/index.html
View File
| @@ -189,7 +189,9 @@ | |||
| <a href="/david/2024/02/22/">Responsabilité</a>, | |||
| <a href="/david/2024/02/23/">Préparatifs</a>, | |||
| <a href="/david/2024/02/24/">Jour 1</a>, | |||
| <a href="/david/2024/02/25/">Jour 2</a>. | |||
| <a href="/david/2024/02/25/">Jour 2</a>, | |||
| <a href="/david/2024/02/26/">Galaxie</a>, | |||
| <a href="/david/2024/02/27/">Rédaction</a>. | |||
| </p> | |||
| @@ -208,7 +210,7 @@ | |||
| <a href="/david/2024/documentation/" rel="tag">#documentation (1)</a>, | |||
| <a href="/david/2024/dystopie/" rel="tag">#dystopie (2)</a>, | |||
| <a href="/david/2024/echanges/" rel="tag">#échanges (5)</a>, | |||
| <a href="/david/2024/ecriture/" rel="tag">#écriture (5)</a>, | |||
| <a href="/david/2024/ecriture/" rel="tag">#écriture (6)</a>, | |||
| <a href="/david/2024/equipe/" rel="tag">#équipe (7)</a>, | |||
| <a href="/david/2024/evolution/" rel="tag">#évolution (6)</a>, | |||
| <a href="/david/2024/experience/" rel="tag">#expérience (11)</a>, | |||
| @@ -220,14 +222,15 @@ | |||
| <a href="/david/2024/lecture/" rel="tag">#lecture (1)</a>, | |||
| <a href="/david/2024/opendata/" rel="tag">#opendata (1)</a>, | |||
| <a href="/david/2024/opensource/" rel="tag">#opensource (6)</a>, | |||
| <a href="/david/2024/parentalite/" rel="tag">#parentalité (3)</a>, | |||
| <a href="/david/2024/parentalite/" rel="tag">#parentalité (4)</a>, | |||
| <a href="/david/2024/partage/" rel="tag">#partage (3)</a>, | |||
| <a href="/david/2024/parvenir/" rel="tag">#parvenir (1)</a>, | |||
| <a href="/david/2024/photographie/" rel="tag">#photographie (2)</a>, | |||
| <a href="/david/2024/processus/" rel="tag">#processus (9)</a>, | |||
| <a href="/david/2024/poesie/" rel="tag">#poésie (1)</a>, | |||
| <a href="/david/2024/processus/" rel="tag">#processus (10)</a>, | |||
| <a href="/david/2024/protopie/" rel="tag">#protopie (6)</a>, | |||
| <a href="/david/2024/psychologie/" rel="tag">#psychologie (6)</a>, | |||
| <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (1)</a>, | |||
| <a href="/david/2024/psychologie/" rel="tag">#psychologie (7)</a>, | |||
| <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (2)</a>, | |||
| <a href="/david/2024/sport/" rel="tag">#sport (4)</a>, | |||
| <a href="/david/2024/technique/" rel="tag">#technique (12)</a>, | |||
| <a href="/david/2024/velo/" rel="tag">#vélo (1)</a>, | |||
+ 91
- 0
david/2024/parentalite/index.html
View File
| @@ -134,6 +134,97 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/26/" title="Lien permanent vers cet article">Galaxie</a> <time datetime="2024-02-26">26 février 2024</time> | |||
| </h2> | |||
| <p>Anecdote du jour qui met le sourire de bon matin.</p> | |||
| <figure> | |||
| <a href="/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| width="4032" height="3024" | |||
| srcset="/static/david/2024/2024-02-26-neige-galaxie.jpg 4032w, /static/david/2024/2024-02-26-neige-galaxie_660x440.jpg 660w, /static/david/2024/2024-02-26-neige-galaxie_990x660.jpg 990w, /static/david/2024/2024-02-26-neige-galaxie_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 4032 / 3024))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="De la neige qui tombe à gros flocon."> | |||
| </a> | |||
| <figcaption>L’espace d’un instant, par la fenêtre.</figcaption> | |||
| </figure> | |||
| <blockquote> | |||
| <p>— Oh la belle neige !<br /> | |||
| — Il pleut des étoiles, la galaxie est en train de tomber.<br /> | |||
| — ❤️</p> | |||
| </blockquote> | |||
| <a href="#hr-89" title="Lien vers cette section de la page"><hr id="hr-89" /></a> | |||
| <blockquote lang="en"> | |||
| <p>CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party components.</p> | |||
| <p><cite><em><a data-link-domain="lea.verou.me" href="https://lea.verou.me/docs/var-groups/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Proposal: CSS Variable Groups</a> | |||
| <a href="/david/cache/2024/0cc2e9c6b29f8326b2ff628f64e22888/" hreflang="en" | |||
| data-tippy data-description="CSS Variable Groups is a way to define multiple properties under the same namespace" | |||
| data-source="https://lea.verou.me/docs/var-groups/" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://lea.verou.me/mark.svg" | |||
| data-domain="lea.verou.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>Heureusement que Lea Verou <a href="/david/2024/02/18/" title="In·directions">me lit</a> et traduit ça en proposition de <a data-link-domain="github.com" href="https://github.com/w3c/csswg-drafts/issues/9992">standardisation</a> en quelques jours au lieu de chialer 😅🙇. Trop hâte !</p> | |||
| <a href="#hr-90" title="Lien vers cette section de la page"><hr id="hr-90" /></a> | |||
| <blockquote lang="en"> | |||
| <p><mark>Maybe that’s ok.</mark> The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems — in that case you might as well not have plugins.</p> | |||
| <p><cite><em><a data-link-domain="css-tricks.com" href="https://css-tricks.com/designing-a-javascript-plugin-system/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Designing a JavaScript Plugin System</a> | |||
| <a href="/david/cache/2024/d9c30865dde8c88394ba054836a18ae3/" hreflang="en" | |||
| data-tippy data-description="WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too." | |||
| data-source="https://css-tricks.com/designing-a-javascript-plugin-system/" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://css-tricks.com/favicon.svg" | |||
| data-domain="css-tricks.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>Problématique du jour : comment concevoir un système de <em>plugins</em> qui soit le bon compromis entre flexibilité et stabilité ? Ce n’est pas si évident, encore plus dans un écosystème aussi évolutif que JavaScript.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/parentalite/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#parentalité</a> | |||
| <a href="/david/2024/poesie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#poésie</a> | |||
| <a href="/david/2024/solastalgia/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#solastalgia</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a> | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/01/28/" title="Lien permanent vers cet article">Jour 2</a> <time datetime="2024-01-28">28 janvier 2024</time> | |||
| </h2> | |||
+ 366
- 0
david/2024/poesie/index.html
View File
| @@ -0,0 +1,366 @@ | |||
| <!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> | |||
| Étiquette #poésie | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #poésie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Is that even respected? Retrospectively? What a shAItshow… | |||
| https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> | |||
| <meta name="robots" content="noai, noimageai"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2024-02-03.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> | |||
| <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> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <hgroup> | |||
| <h1>#poésie</h1> | |||
| <p>Publications relatives à cette étiquette</p> | |||
| </hgroup> | |||
| </header> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| Accueil</a> | |||
| • | |||
| <a rel="tags" | |||
| href="/david/2024/#tags" | |||
| title="Liste de toutes les étiquettes"> | |||
| Étiquettes</a> | |||
| • | |||
| <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a> | |||
| • | |||
| <a href="/david/log/" title="Accès au flux RSS">Suivre</a> | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/26/" title="Lien permanent vers cet article">Galaxie</a> <time datetime="2024-02-26">26 février 2024</time> | |||
| </h2> | |||
| <p>Anecdote du jour qui met le sourire de bon matin.</p> | |||
| <figure> | |||
| <a href="/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| width="4032" height="3024" | |||
| srcset="/static/david/2024/2024-02-26-neige-galaxie.jpg 4032w, /static/david/2024/2024-02-26-neige-galaxie_660x440.jpg 660w, /static/david/2024/2024-02-26-neige-galaxie_990x660.jpg 990w, /static/david/2024/2024-02-26-neige-galaxie_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 4032 / 3024))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="De la neige qui tombe à gros flocon."> | |||
| </a> | |||
| <figcaption>L’espace d’un instant, par la fenêtre.</figcaption> | |||
| </figure> | |||
| <blockquote> | |||
| <p>— Oh la belle neige !<br /> | |||
| — Il pleut des étoiles, la galaxie est en train de tomber.<br /> | |||
| — ❤️</p> | |||
| </blockquote> | |||
| <a href="#hr-89" title="Lien vers cette section de la page"><hr id="hr-89" /></a> | |||
| <blockquote lang="en"> | |||
| <p>CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party components.</p> | |||
| <p><cite><em><a data-link-domain="lea.verou.me" href="https://lea.verou.me/docs/var-groups/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Proposal: CSS Variable Groups</a> | |||
| <a href="/david/cache/2024/0cc2e9c6b29f8326b2ff628f64e22888/" hreflang="en" | |||
| data-tippy data-description="CSS Variable Groups is a way to define multiple properties under the same namespace" | |||
| data-source="https://lea.verou.me/docs/var-groups/" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://lea.verou.me/mark.svg" | |||
| data-domain="lea.verou.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>Heureusement que Lea Verou <a href="/david/2024/02/18/" title="In·directions">me lit</a> et traduit ça en proposition de <a data-link-domain="github.com" href="https://github.com/w3c/csswg-drafts/issues/9992">standardisation</a> en quelques jours au lieu de chialer 😅🙇. Trop hâte !</p> | |||
| <a href="#hr-90" title="Lien vers cette section de la page"><hr id="hr-90" /></a> | |||
| <blockquote lang="en"> | |||
| <p><mark>Maybe that’s ok.</mark> The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems — in that case you might as well not have plugins.</p> | |||
| <p><cite><em><a data-link-domain="css-tricks.com" href="https://css-tricks.com/designing-a-javascript-plugin-system/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Designing a JavaScript Plugin System</a> | |||
| <a href="/david/cache/2024/d9c30865dde8c88394ba054836a18ae3/" hreflang="en" | |||
| data-tippy data-description="WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too." | |||
| data-source="https://css-tricks.com/designing-a-javascript-plugin-system/" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://css-tricks.com/favicon.svg" | |||
| data-domain="css-tricks.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>Problématique du jour : comment concevoir un système de <em>plugins</em> qui soit le bon compromis entre flexibilité et stabilité ? Ce n’est pas si évident, encore plus dans un écosystème aussi évolutif que JavaScript.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/parentalite/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#parentalité</a> | |||
| <a href="/david/2024/poesie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#poésie</a> | |||
| <a href="/david/2024/solastalgia/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#solastalgia</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</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> | |||
| </body> | |||
| </html> | |||
+ 61
- 0
david/2024/processus/index.html
View File
| @@ -134,6 +134,67 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/27/" title="Lien permanent vers cet article">Rédaction</a> <time datetime="2024-02-27">27 février 2024</time> | |||
| </h2> | |||
| <blockquote> | |||
| <p>Je suis curieux de savoir comment tu rédiges ces textes ! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu écris tout à chaud une fois chez toi ? Ou tu écris quelques jours après sur des souvenirs qui s’effritent déjà mais ça n’a pas d’importance ? 🙂</p> | |||
| <p><cite><em>Question de <a data-link-domain="social.bim.land" href="https://social.bim.land/@mlbiche">@mlbiche</a> sur masto</em></cite></p> | |||
| </blockquote> | |||
| <p>Il m’arrive de prendre des notes lors de sorties plus contemplatives (et moins risquées pour mes doigts !) mais c’est assez rare. Je n’arrive pas à écrire une histoire en étant en train de la vivre, c’est comme de faire des vidéos, j’ai l’impression de trop me mettre en scène sinon. Lorsque le récit influe sur le déroulé, ça brise quelque chose au niveau de son authenticité et de mon ressenti.</p> | |||
| <p>En général, je rédige cela à la maison, à chaud. Une fois que toutes les affaires ont été mises à sécher. Avec parfois des bribes qui s’agencent lors du long retour en voiture. Si j’attends plus de 24h, ce ne sont pas tant les souvenirs qui s’effritent que la motivation à les partager qui s’envole, ça m’est déjà arrivé plusieurs fois.</p> | |||
| <a href="#hr-91" title="Lien vers cette section de la page"><hr id="hr-91" /></a> | |||
| <blockquote> | |||
| <p>Nos vies sont faites de métal incandescent.<br /> | |||
| Tant qu’elles rougeoient, nous en restons les forgerons.<br /> | |||
| Créateurs et inventeurs de nous-mêmes.</p> | |||
| <p>Mais comme le métal du forgeron qui refroidit, comme la coulée de lave qui atteint l’extrémité de son expansion, nos vies se figent.<br /> | |||
| Ce n’est qu’à cet instant précis que l’on peut dire qui on a été. quand la coulée de la vie a pris sa forme définitive.</p> | |||
| <p>D’ici je la contemple, cette vie. Ma vie.<br /> | |||
| Et je sais enfin qui je suis…</p> | |||
| <p><cite><em>La saga de Grimr</em>, Jérémie Moreau</cite></p> | |||
| </blockquote> | |||
| <p>Rétrospective sous forme de <a data-link-domain="ut7.fr" href="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Conseil</a> | |||
| <a href="/david/cache/2024/f3974ec778551dd1c3134c8094c3372b/" hreflang="en" | |||
| data-tippy data-description="Un conseil, c’est une réunion en cercle où les personnes se parlent et font l’expérience individuelle de ce que c’est que d’appartenir au groupe." | |||
| data-source="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://www.ut7.fr/favicon-192x192.png" | |||
| data-domain="ut7.fr" | |||
| ><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. Je suis de plus en plus tenté d’introduire une 6<sup>e</sup> étape qui serait autour du pardon. <q>Je te pardonne pour …, cela m’a permis d’apprendre … </q>. J’ai l’intuition que cela pourrait ajouter quelque chose pour un groupe relativement intime qui s’inscrit dans la durée.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/ecriture/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#écriture</a> | |||
| <a href="/david/2024/processus/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#processus</a> | |||
| <a href="/david/2024/psychologie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#psychologie</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a> | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/23/" title="Lien permanent vers cet article">Préparatifs</a> <time datetime="2024-02-23">23 février 2024</time> | |||
| </h2> | |||
+ 61
- 0
david/2024/psychologie/index.html
View File
| @@ -134,6 +134,67 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/27/" title="Lien permanent vers cet article">Rédaction</a> <time datetime="2024-02-27">27 février 2024</time> | |||
| </h2> | |||
| <blockquote> | |||
| <p>Je suis curieux de savoir comment tu rédiges ces textes ! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu écris tout à chaud une fois chez toi ? Ou tu écris quelques jours après sur des souvenirs qui s’effritent déjà mais ça n’a pas d’importance ? 🙂</p> | |||
| <p><cite><em>Question de <a data-link-domain="social.bim.land" href="https://social.bim.land/@mlbiche">@mlbiche</a> sur masto</em></cite></p> | |||
| </blockquote> | |||
| <p>Il m’arrive de prendre des notes lors de sorties plus contemplatives (et moins risquées pour mes doigts !) mais c’est assez rare. Je n’arrive pas à écrire une histoire en étant en train de la vivre, c’est comme de faire des vidéos, j’ai l’impression de trop me mettre en scène sinon. Lorsque le récit influe sur le déroulé, ça brise quelque chose au niveau de son authenticité et de mon ressenti.</p> | |||
| <p>En général, je rédige cela à la maison, à chaud. Une fois que toutes les affaires ont été mises à sécher. Avec parfois des bribes qui s’agencent lors du long retour en voiture. Si j’attends plus de 24h, ce ne sont pas tant les souvenirs qui s’effritent que la motivation à les partager qui s’envole, ça m’est déjà arrivé plusieurs fois.</p> | |||
| <a href="#hr-91" title="Lien vers cette section de la page"><hr id="hr-91" /></a> | |||
| <blockquote> | |||
| <p>Nos vies sont faites de métal incandescent.<br /> | |||
| Tant qu’elles rougeoient, nous en restons les forgerons.<br /> | |||
| Créateurs et inventeurs de nous-mêmes.</p> | |||
| <p>Mais comme le métal du forgeron qui refroidit, comme la coulée de lave qui atteint l’extrémité de son expansion, nos vies se figent.<br /> | |||
| Ce n’est qu’à cet instant précis que l’on peut dire qui on a été. quand la coulée de la vie a pris sa forme définitive.</p> | |||
| <p>D’ici je la contemple, cette vie. Ma vie.<br /> | |||
| Et je sais enfin qui je suis…</p> | |||
| <p><cite><em>La saga de Grimr</em>, Jérémie Moreau</cite></p> | |||
| </blockquote> | |||
| <p>Rétrospective sous forme de <a data-link-domain="ut7.fr" href="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Conseil</a> | |||
| <a href="/david/cache/2024/f3974ec778551dd1c3134c8094c3372b/" hreflang="en" | |||
| data-tippy data-description="Un conseil, c’est une réunion en cercle où les personnes se parlent et font l’expérience individuelle de ce que c’est que d’appartenir au groupe." | |||
| data-source="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://www.ut7.fr/favicon-192x192.png" | |||
| data-domain="ut7.fr" | |||
| ><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. Je suis de plus en plus tenté d’introduire une 6<sup>e</sup> étape qui serait autour du pardon. <q>Je te pardonne pour …, cela m’a permis d’apprendre … </q>. J’ai l’intuition que cela pourrait ajouter quelque chose pour un groupe relativement intime qui s’inscrit dans la durée.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/ecriture/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#écriture</a> | |||
| <a href="/david/2024/processus/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#processus</a> | |||
| <a href="/david/2024/psychologie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#psychologie</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a> | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/21/" title="Lien permanent vers cet article">Cinéma</a> <time datetime="2024-02-21">21 février 2024</time> | |||
| </h2> | |||
+ 91
- 0
david/2024/solastalgia/index.html
View File
| @@ -134,6 +134,97 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/26/" title="Lien permanent vers cet article">Galaxie</a> <time datetime="2024-02-26">26 février 2024</time> | |||
| </h2> | |||
| <p>Anecdote du jour qui met le sourire de bon matin.</p> | |||
| <figure> | |||
| <a href="/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| width="4032" height="3024" | |||
| srcset="/static/david/2024/2024-02-26-neige-galaxie.jpg 4032w, /static/david/2024/2024-02-26-neige-galaxie_660x440.jpg 660w, /static/david/2024/2024-02-26-neige-galaxie_990x660.jpg 990w, /static/david/2024/2024-02-26-neige-galaxie_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 4032 / 3024))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="De la neige qui tombe à gros flocon."> | |||
| </a> | |||
| <figcaption>L’espace d’un instant, par la fenêtre.</figcaption> | |||
| </figure> | |||
| <blockquote> | |||
| <p>— Oh la belle neige !<br /> | |||
| — Il pleut des étoiles, la galaxie est en train de tomber.<br /> | |||
| — ❤️</p> | |||
| </blockquote> | |||
| <a href="#hr-89" title="Lien vers cette section de la page"><hr id="hr-89" /></a> | |||
| <blockquote lang="en"> | |||
| <p>CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party components.</p> | |||
| <p><cite><em><a data-link-domain="lea.verou.me" href="https://lea.verou.me/docs/var-groups/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Proposal: CSS Variable Groups</a> | |||
| <a href="/david/cache/2024/0cc2e9c6b29f8326b2ff628f64e22888/" hreflang="en" | |||
| data-tippy data-description="CSS Variable Groups is a way to define multiple properties under the same namespace" | |||
| data-source="https://lea.verou.me/docs/var-groups/" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://lea.verou.me/mark.svg" | |||
| data-domain="lea.verou.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>Heureusement que Lea Verou <a href="/david/2024/02/18/" title="In·directions">me lit</a> et traduit ça en proposition de <a data-link-domain="github.com" href="https://github.com/w3c/csswg-drafts/issues/9992">standardisation</a> en quelques jours au lieu de chialer 😅🙇. Trop hâte !</p> | |||
| <a href="#hr-90" title="Lien vers cette section de la page"><hr id="hr-90" /></a> | |||
| <blockquote lang="en"> | |||
| <p><mark>Maybe that’s ok.</mark> The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems — in that case you might as well not have plugins.</p> | |||
| <p><cite><em><a data-link-domain="css-tricks.com" href="https://css-tricks.com/designing-a-javascript-plugin-system/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Designing a JavaScript Plugin System</a> | |||
| <a href="/david/cache/2024/d9c30865dde8c88394ba054836a18ae3/" hreflang="en" | |||
| data-tippy data-description="WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too." | |||
| data-source="https://css-tricks.com/designing-a-javascript-plugin-system/" | |||
| data-date="2024-02-27" | |||
| data-favicon="https://css-tricks.com/favicon.svg" | |||
| data-domain="css-tricks.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>Problématique du jour : comment concevoir un système de <em>plugins</em> qui soit le bon compromis entre flexibilité et stabilité ? Ce n’est pas si évident, encore plus dans un écosystème aussi évolutif que JavaScript.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/parentalite/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#parentalité</a> | |||
| <a href="/david/2024/poesie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#poésie</a> | |||
| <a href="/david/2024/solastalgia/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#solastalgia</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a> | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> <time datetime="2024-01-08">8 janvier 2024</time> | |||
| </h2> | |||
+ 8
- 5
david/index.html
View File
| @@ -143,6 +143,8 @@ | |||
| <h2>Publications 2024</h2> | |||
| <p>Liste des publications récentes en ordre anté-chronologique :</p> | |||
| <p> | |||
| <a href="/david/2024/02/27/">Rédaction</a>, | |||
| <a href="/david/2024/02/26/">Galaxie</a>, | |||
| <a href="/david/2024/02/25/">Jour 2</a>, | |||
| <a href="/david/2024/02/24/">Jour 1</a>, | |||
| <a href="/david/2024/02/23/">Préparatifs</a>, | |||
| @@ -216,7 +218,7 @@ | |||
| <a href="/david/2024/documentation/" rel="tag">#documentation (1)</a>, | |||
| <a href="/david/2024/dystopie/" rel="tag">#dystopie (2)</a>, | |||
| <a href="/david/2024/echanges/" rel="tag">#échanges (5)</a>, | |||
| <a href="/david/2024/ecriture/" rel="tag">#écriture (5)</a>, | |||
| <a href="/david/2024/ecriture/" rel="tag">#écriture (6)</a>, | |||
| <a href="/david/2024/equipe/" rel="tag">#équipe (7)</a>, | |||
| <a href="/david/2024/evolution/" rel="tag">#évolution (6)</a>, | |||
| <a href="/david/2024/experience/" rel="tag">#expérience (11)</a>, | |||
| @@ -228,14 +230,15 @@ | |||
| <a href="/david/2024/lecture/" rel="tag">#lecture (1)</a>, | |||
| <a href="/david/2024/opendata/" rel="tag">#opendata (1)</a>, | |||
| <a href="/david/2024/opensource/" rel="tag">#opensource (6)</a>, | |||
| <a href="/david/2024/parentalite/" rel="tag">#parentalité (3)</a>, | |||
| <a href="/david/2024/parentalite/" rel="tag">#parentalité (4)</a>, | |||
| <a href="/david/2024/partage/" rel="tag">#partage (3)</a>, | |||
| <a href="/david/2024/parvenir/" rel="tag">#parvenir (1)</a>, | |||
| <a href="/david/2024/photographie/" rel="tag">#photographie (2)</a>, | |||
| <a href="/david/2024/processus/" rel="tag">#processus (9)</a>, | |||
| <a href="/david/2024/poesie/" rel="tag">#poésie (1)</a>, | |||
| <a href="/david/2024/processus/" rel="tag">#processus (10)</a>, | |||
| <a href="/david/2024/protopie/" rel="tag">#protopie (6)</a>, | |||
| <a href="/david/2024/psychologie/" rel="tag">#psychologie (6)</a>, | |||
| <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (1)</a>, | |||
| <a href="/david/2024/psychologie/" rel="tag">#psychologie (7)</a>, | |||
| <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (2)</a>, | |||
| <a href="/david/2024/sport/" rel="tag">#sport (4)</a>, | |||
| <a href="/david/2024/technique/" rel="tag">#technique (12)</a>, | |||
| <a href="/david/2024/velo/" rel="tag">#vélo (1)</a>, | |||
+ 74
- 116
david/log/index.xml
View File
| @@ -6,13 +6,86 @@ | |||
| <link href="https://larlet.fr/david/" rel="alternate" type="text/html" /> | |||
| <link href="https://larlet.fr/david/log/" rel="self" /> | |||
| <id>https://larlet.fr/david/</id> | |||
| <updated>2024-02-27T12:00:00+01:00</updated> | |||
| <updated>2024-02-28T12:00:00+01:00</updated> | |||
| <author> | |||
| <name>David Larlet</name> | |||
| <uri>https://larlet.fr/david/</uri> | |||
| </author> | |||
| <rights>Copyright (c) 2004-2024, David Larlet</rights> | |||
| <entry xml:lang="fr"> | |||
| <title type="html">Rédaction</title> | |||
| <link href="https://larlet.fr/david/2024/02/27/" rel="alternate" type="text/html" /> | |||
| <updated>2024-02-27T12:00:00+01:00</updated> | |||
| <id>https://larlet.fr/david/2024/02/27/</id> | |||
| <summary type="html"> | |||
| <blockquote> | |||
| <p>Je suis curieux de savoir comment tu rédiges ces textes&#8239;! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu écris tout à chaud une fois chez toi&#8239;? Ou tu écris quelques jours après sur des souvenirs qui s’effritent déjà mais ça n’a pas&nbsp;d’importance&#8239;?&nbsp;🙂</p> | |||
| <p><cite><em>Question de <a href="https://social.bim.land/@mlbiche">@mlbiche</a> sur&nbsp;masto</em></cite></p> | |||
| </blockquote> | |||
| <p>Il m’arrive de prendre des notes lors de sorties plus contemplatives (et moins risquées pour mes doigts&#8239;!) mais c’est assez rare. Je n’arrive pas à écrire une histoire en étant en train de la vivre, c’est comme de faire des vidéos, j’ai l’impression de trop me mettre en scène sinon. Lorsque le récit influe sur le déroulé, ça brise quelque chose au niveau de son authenticité et de mon&nbsp;ressenti.</p> | |||
| <p>En général, je rédige cela à la maison, à chaud. Une fois que toutes les affaires ont été mises à sécher. Avec parfois des bribes qui s’agencent lors du long retour en voiture. Si j’attends plus de 24h, ce ne sont pas tant les souvenirs qui s’effritent que la motivation à les partager qui s’envole, ça m’est déjà arrivé plusieurs&nbsp;fois.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Nos vies sont faites de métal incandescent.<br /> | |||
| Tant qu’elles rougeoient, nous en restons les forgerons.<br /> | |||
| Créateurs et inventeurs de&nbsp;nous-mêmes.</p> | |||
| <p>Mais comme le métal du forgeron qui refroidit, comme la coulée de lave qui atteint l’extrémité de son expansion, nos vies se figent.<br /> | |||
| Ce n’est qu’à cet instant précis que l’on peut dire qui on a été. quand la coulée de la vie a pris sa forme&nbsp;définitive.</p> | |||
| <p>D’ici je la contemple, cette vie. Ma vie.<br /> | |||
| Et je sais enfin qui je&nbsp;suis…</p> | |||
| <p><cite><em>La saga de Grimr</em>, Jérémie&nbsp;Moreau</cite></p> | |||
| </blockquote> | |||
| <p>Rétrospective sous forme de <a href="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html">Conseil</a> aujourd’hui. Je suis de plus en plus tenté d’introduire une 6<sup>e</sup> étape qui serait autour du pardon. <q>Je te pardonne pour …, cela m’a permis d’apprendre … </q>. J’ai l’intuition que cela pourrait ajouter quelque chose pour un groupe relativement intime qui s’inscrit dans la&nbsp;durée.</p> | |||
| <nav><p><a href="https://larlet.fr/david/2024/ecriture/">#écriture</a> <a href="https://larlet.fr/david/2024/processus/">#processus</a> <a href="https://larlet.fr/david/2024/psychologie/">#psychologie</a></p></nav><hr/><p><a href="mailto:david@larlet.fr">Réagir ?</a></p></summary> | |||
| </entry> | |||
| <entry xml:lang="fr"> | |||
| <title type="html">Galaxie</title> | |||
| <link href="https://larlet.fr/david/2024/02/26/" rel="alternate" type="text/html" /> | |||
| <updated>2024-02-26T12:00:00+01:00</updated> | |||
| <id>https://larlet.fr/david/2024/02/26/</id> | |||
| <summary type="html"> | |||
| <p>Anecdote du jour qui met le sourire de bon&nbsp;matin.</p> | |||
| <figure> | |||
| <a href="https://larlet.fr/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="https://larlet.fr/static/david/2024/2024-02-26-neige-galaxie.jpg" | |||
| width="4032" height="3024" | |||
| srcset="/static/david/2024/2024-02-26-neige-galaxie.jpg 4032w, /static/david/2024/2024-02-26-neige-galaxie_660x440.jpg 660w, /static/david/2024/2024-02-26-neige-galaxie_990x660.jpg 990w, /static/david/2024/2024-02-26-neige-galaxie_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 4032 / 3024))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="De la neige qui tombe à gros flocon."> | |||
| </a> | |||
| <figcaption>L’espace d’un instant, par la&nbsp;fenêtre.</figcaption> | |||
| </figure> | |||
| <blockquote> | |||
| <p>— Oh la belle neige&#8239;!<br /> | |||
| —&nbsp;Il pleut des étoiles, la galaxie est en train de tomber.<br /> | |||
| —&nbsp;❤️</p> | |||
| </blockquote> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party&nbsp;components.</p> | |||
| <p><cite><em><a href="https://lea.verou.me/docs/var-groups/">Proposal: CSS Variable&nbsp;Groups</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Heureusement que Lea Verou <a href="https://larlet.fr/david/2024/02/18/">me lit</a> et traduit ça en proposition de <a href="https://github.com/w3c/csswg-drafts/issues/9992">standardisation</a> en quelques jours au lieu de chialer&nbsp;😅🙇. Trop&nbsp;hâte&#8239;!</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p><mark>Maybe that’s ok.</mark> The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems — in that case you might as well not have&nbsp;plugins.</p> | |||
| <p><cite><em><a href="https://css-tricks.com/designing-a-javascript-plugin-system/">Designing a JavaScript Plugin&nbsp;System</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Problématique du jour&nbsp;: comment concevoir un système de <em>plugins</em> qui soit le bon compromis entre flexibilité et stabilité&#8239;? Ce n’est pas si évident, encore plus dans un écosystème aussi évolutif que&nbsp;JavaScript.</p> | |||
| <nav><p><a href="https://larlet.fr/david/2024/parentalite/">#parentalité</a> <a href="https://larlet.fr/david/2024/poesie/">#poésie</a> <a href="https://larlet.fr/david/2024/solastalgia/">#solastalgia</a></p></nav><hr/><p><a href="mailto:david@larlet.fr">Réagir ?</a></p></summary> | |||
| </entry> | |||
| <entry xml:lang="fr"> | |||
| <title type="html">Jour&nbsp;2</title> | |||
| <link href="https://larlet.fr/david/2024/02/25/" rel="alternate" type="text/html" /> | |||
| @@ -1209,119 +1282,4 @@ git archive --remote=larlet-fr-david-cache.git master | tar -x -C larlet-fr/davi | |||
| <nav><p><a href="https://larlet.fr/david/2024/echanges/">#échanges</a> <a href="https://larlet.fr/david/2024/technique/">#technique</a> <a href="https://larlet.fr/david/2024/web/">#web</a></p></nav><hr/><p><a href="mailto:david@larlet.fr">Réagir ?</a></p></summary> | |||
| </entry> | |||
| <entry xml:lang="fr"> | |||
| <title type="html">Jour&nbsp;2</title> | |||
| <link href="https://larlet.fr/david/2024/01/28/" rel="alternate" type="text/html" /> | |||
| <updated>2024-01-28T12:00:00+01:00</updated> | |||
| <id>https://larlet.fr/david/2024/01/28/</id> | |||
| <summary type="html"> | |||
| <p>Même avec la nourriture suspendue, les souris on fait un sacré raffut. Elles devaient elles aussi avoir trop chaud. Après avoir dormi avec 2&nbsp;fenêtres ouvertes, il fait tout de même 18°C au réveil. Parfait pour notre gruau de camping (seconde tradition avec les nouilles instantanées), cette fois à la neige&nbsp;fondue.</p> | |||
| <p>On prend le temps d’aller faire un petit tour à skis sur le lac car c’est une première pour l’enfant. On suit des traces de lapins qui nous mènent à un point d’eau liquide qui est un point de concentration de la faune locale. Si on avait su avant, on aurait peut-être pris le risque de s’en approcher avec nos gourdes. C’est peut-être mieux de ne pas l’avoir su&nbsp;avant.</p> | |||
| <figure> | |||
| <a href="https://larlet.fr/static/david/2024/2024-01-28-lac-foret.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="https://larlet.fr/static/david/2024/2024-01-28-lac-foret.jpg" | |||
| width="3024" height="4032" | |||
| srcset="/static/david/2024/2024-01-28-lac-foret.jpg 3024w, /static/david/2024/2024-01-28-lac-foret_660x440.jpg 660w, /static/david/2024/2024-01-28-lac-foret_990x660.jpg 990w, /static/david/2024/2024-01-28-lac-foret_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 3024 / 4032))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Un lac gelé avec la forêt en arrière plan."> | |||
| </a> | |||
| <figcaption>Une bonne ambiance hivernale mais sans la fraîcheur de la&nbsp;saison.</figcaption> | |||
| </figure> | |||
| <p>Une fois le matériel rangé, on repart. Cette fois j’ai resserré le système de tractage improvisé avec des tuyaux en PVC de la <em>pulka</em>. Et j’ai aussi troqué les peaux complètes pour des demi-peaux, ça me permet de glisser un peu plus dans les descentes mais quand même pas trop. Difficile de ne pas forcer sur la cheville lorsqu’on est contraint par l’étroitesse du chemin. Bon puis il y a vraiment trop d’arbres dans ces&nbsp;forêts&nbsp;:p.</p> | |||
| <p>On s’amuse vraiment sur ce retour et je suis obligé d’imposer des pauses pour ne pas arriver dans le même état que la veille (et me faire semer). L’enfant serait partant pour ne pas s’arrêter du tout, ça fait plaisir. On prend confiance et on enchaîne les bosses. Nos seules traces de la veille aident pas mal. Les conditions sont vraiment chaudes pour la&nbsp;saison.</p> | |||
| <figure> | |||
| <a href="https://larlet.fr/static/david/2024/2024-01-28-neige-collante.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="https://larlet.fr/static/david/2024/2024-01-28-neige-collante.jpg" | |||
| width="4032" height="3024" | |||
| srcset="/static/david/2024/2024-01-28-neige-collante.jpg 4032w, /static/david/2024/2024-01-28-neige-collante_660x440.jpg 660w, /static/david/2024/2024-01-28-neige-collante_990x660.jpg 990w, /static/david/2024/2024-01-28-neige-collante_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 4032 / 3024))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="De la neige qui pend d’un arbre."> | |||
| </a> | |||
| <figcaption>Lorsqu’on me demande si la neige était&nbsp;collante.</figcaption> | |||
| </figure> | |||
| <p>Nous sommes progressivement rejoints par les skieur·euses qui descendent à travers les arbres et à une centaine de mètres de la voiture, il y a un passage plus difficile que les autres&nbsp;: une pente qui arrive sur un pont. On passe sur le côté pour être retenus par la neige fraîche mais la <em>pulka</em> décide de faire le drapeau et de prendre la «&nbsp;piste&nbsp;» tapée principale. J’essaye de la rattraper tant bien que mal tout en attendant / prenant soin de l’enfant et je me retrouve dans le décor. Encore. Ce n’est pas tant la chute que de forcer pour s’extraire de la neige tout en étant harnaché et les skis empêtrés dans les arbres qui me fait forcer sur les mauvais tendons… si près du but c’est&nbsp;rageant&nbsp;😔.</p> | |||
| <p>Une sortie haute en émotions. Je vais maintenant pouvoir prendre le temps de soigner cette <a href="https://larlet.fr/david/2024/01/09/">blessure</a>&nbsp;correctement.</p> | |||
| <nav><p><a href="https://larlet.fr/david/2024/experience/">#expérience</a> <a href="https://larlet.fr/david/2024/foret/">#forêt</a> <a href="https://larlet.fr/david/2024/parentalite/">#parentalité</a></p></nav><hr/><p><a href="mailto:david@larlet.fr">Réagir ?</a></p></summary> | |||
| </entry> | |||
| <entry xml:lang="fr"> | |||
| <title type="html">Jour&nbsp;1</title> | |||
| <link href="https://larlet.fr/david/2024/01/27/" rel="alternate" type="text/html" /> | |||
| <updated>2024-01-27T12:00:00+01:00</updated> | |||
| <id>https://larlet.fr/david/2024/01/27/</id> | |||
| <summary type="html"> | |||
| <p>De la pluie verglaçante depuis 2&nbsp;jours. Une cheville pas encore opérationnelle. Mais de l’envie et une réservation depuis deux mois pour une première sortie hivernale en refuge. Ensemble. La route pour y aller est déjà épique et des flocons gros comme des pastèques s’écrasent sur le pare-brise. Il est rare au Québec de suivre un <em>pickup</em> qui ne dépasse pas les 70&#8239;km/h sur&nbsp;l’autoroute.</p> | |||
| <p>C’est aussi la première sortie pour la <em>pulka</em> ramenée de France cet été. Le temps de charger et de se préparer, la neige est déjà moins intense. Néanmoins, dès les premières centaines de mètres, je sens bien que ça va être galère. La montée est vraiment pentue et les skis-raquettes de l’enfant ne sont pas adaptés à ces conditions ce qui le rend <del>pénible</del> ronchon. De mon côté, avec les peaux complètes ça passe mais je force énormément car je dois bien avoir 35&#8239;kg à tracter derrière. On fait au moins deux kilomètres comme ça… avant de se rendre compte que l’on est sur la montée de ski de randonnée de la Montagne&nbsp;Noire&#8239;!</p> | |||
| <figure> | |||
| <a href="https://larlet.fr/static/david/2024/2024-01-27-enfant-qui-skie.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="https://larlet.fr/static/david/2024/2024-01-27-enfant-qui-skie.jpg" | |||
| width="3024" height="4032" | |||
| srcset="/static/david/2024/2024-01-27-enfant-qui-skie.jpg 3024w, /static/david/2024/2024-01-27-enfant-qui-skie_660x440.jpg 660w, /static/david/2024/2024-01-27-enfant-qui-skie_990x660.jpg 990w, /static/david/2024/2024-01-27-enfant-qui-skie_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 3024 / 4032))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Un enfant en train de skier sur un chemin."> | |||
| </a> | |||
| <figcaption>Avant que tout ne&nbsp;dérape.</figcaption> | |||
| </figure> | |||
| <p>Grosse erreur d’orientation qui nous coûte cher&nbsp;: impossible de descendre par cette montée et couper par la forêt serait très hasardeux, sans compter mon état. L’heure tourne et on finit par descendre en ayant déchaussé tous les deux. Deux paires de skis en plus à retenir à bout de bras en ayant le choix entre un chemin de 30&nbsp;cm de large tapé qui glisse ou un mètre de poudreuse tout autour. C’est un peu casse patte, juste ce qu’il me fallait pour une rééducation&nbsp;active&nbsp;😬.</p> | |||
| <figure> | |||
| <a href="https://larlet.fr/static/david/2024/2024-01-27-attache-pulka.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="https://larlet.fr/static/david/2024/2024-01-27-attache-pulka.jpg" | |||
| width="2320" height="3088" | |||
| srcset="/static/david/2024/2024-01-27-attache-pulka.jpg 2320w, /static/david/2024/2024-01-27-attache-pulka_660x440.jpg 660w, /static/david/2024/2024-01-27-attache-pulka_990x660.jpg 990w, /static/david/2024/2024-01-27-attache-pulka_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 2320 / 3088))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="La pulka visible depuis mon entre-jambe."> | |||
| </a> | |||
| <figcaption>Un point de vue&nbsp;discutable.</figcaption> | |||
| </figure> | |||
| <p>Quasi-retour au point de départ, à deux doigts d’abandonner vue l’énergie que l’on vient de dépenser&nbsp;: <q lang="fr">c’est pas la grosse marrade</q>. Une pause bienvenue et le chemin loupé qui semble accueillant me font hésiter tout de même. Je prends finalement la décision d’y aller car dans mon souvenir c’est accessible (si on ne se trompe pas de sentier…). Prise de risque assez élevée au passage, il ne faut pas d’autres erreurs ou problèmes sur le trajet ou on va finir à la frontale (au mieux). Difficile de savoir jusqu’où est-ce que ça va être tracé&nbsp;aussi.</p> | |||
| <p>Ce nouveau chemin est beaucoup plus adapté à notre niveau (de forme). Le système d’attache de la <em>pulka</em> est loin d’être optimal mais ça passe, même entre les arbres. L’enfant prend confiance et s’amuse dans les descentes. On arrive enfin au refuge sans encombres, il est 15&#8239;h passé et on n’a pas mangé, à peine bu 200&nbsp;ml depuis le départ… il va falloir recharger les corps avant demain sinon ça va&nbsp;piquer.</p> | |||
| <figure> | |||
| <a href="https://larlet.fr/static/david/2024/2024-01-27-dessins-cartes.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="https://larlet.fr/static/david/2024/2024-01-27-dessins-cartes.jpg" | |||
| width="3024" height="4032" | |||
| srcset="/static/david/2024/2024-01-27-dessins-cartes.jpg 3024w, /static/david/2024/2024-01-27-dessins-cartes_660x440.jpg 660w, /static/david/2024/2024-01-27-dessins-cartes_990x660.jpg 990w, /static/david/2024/2024-01-27-dessins-cartes_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 3024 / 4032))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Des cartes dessinées à la bougie visible en fond."> | |||
| </a> | |||
| <figcaption>Le dessin à la bougie, c’est mieux à&nbsp;deux.</figcaption> | |||
| </figure> | |||
| <p>Heureusement, cet endroit est assez fabuleux et il y a une ambiance brumeuse qui lui donne un aspect féérique. Une fois repus, on va faire un tour sur le lac en contrebas. Il sautille sur le chemin (moi pas) et semble déjà avoir oublié les péripéties de la matinée. On passe une bonne soirée à faire des cadavre-exquis et à dessiner des cartes. Il fait 27°C dans le refuge, on supporte nos caleçons mais c’est un peu limite pour aller chercher la neige à faire&nbsp;fondre&#8239;!</p> | |||
| <figure> | |||
| <a href="https://larlet.fr/static/david/2024/2024-01-27-enfant-lac.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="https://larlet.fr/static/david/2024/2024-01-27-enfant-lac.jpg" | |||
| width="4032" height="3024" | |||
| srcset="/static/david/2024/2024-01-27-enfant-lac.jpg 4032w, /static/david/2024/2024-01-27-enfant-lac_660x440.jpg 660w, /static/david/2024/2024-01-27-enfant-lac_990x660.jpg 990w, /static/david/2024/2024-01-27-enfant-lac_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 4032 / 3024))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Un enfant sur un lac gelé (le lac, pas l’enfant)."> | |||
| </a> | |||
| <figcaption>Un enfant sur un lac gelé (le lac, pas l’enfant). Il est 17h17. Je crois que j’aime de plus en plus les photos qui ont du&nbsp;grain.</figcaption> | |||
| </figure> | |||
| <p>Vu le bruit que font les souris alors qu’il y a encore de la lumière, la nuit risque de ne pas être de tout repos… On s’endort au son du poêle qui&nbsp;craque.</p> | |||
| <nav><p><a href="https://larlet.fr/david/2024/experience/">#expérience</a> <a href="https://larlet.fr/david/2024/foret/">#forêt</a> <a href="https://larlet.fr/david/2024/parentalite/">#parentalité</a></p></nav><hr/><p><a href="mailto:david@larlet.fr">Réagir ?</a></p></summary> | |||
| </entry> | |||
| </feed> | |||
+ 24
- 0
david/recherche/index.html
View File
| @@ -276,6 +276,18 @@ | |||
| </template> | |||
| <script id="search-index" type="application/json">[ | |||
| { | |||
| "title": "R\u00e9daction", | |||
| "url": "/david/2024/02/27/", | |||
| "date": "2024-02-27", | |||
| "content": "Je suis curieux de savoir comment tu r\u00e9diges ces textes\u202f! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu \u00e9cris tout \u00e0 chaud une fois chez toi\u202f? Ou tu \u00e9cris quelques jours apr\u00e8s sur des souvenirs qui s\u2019effritent d\u00e9j\u00e0 mais \u00e7a n\u2019a pas\u00a0d\u2019importance\u202f?\u00a0\ud83d\ude42 Question de @mlbiche sur\u00a0masto Il m\u2019arrive de prendre des notes lors de sorties plus contemplatives (et moins risqu\u00e9es pour mes doigts\u202f!) mais c\u2019est assez rare. Je n\u2019arrive pas \u00e0 \u00e9crire une histoire en \u00e9tant en train de la vivre, c\u2019est comme de faire des vid\u00e9os, j\u2019ai l\u2019impression de trop me mettre en sc\u00e8ne sinon. Lorsque le r\u00e9cit influe sur le d\u00e9roul\u00e9, \u00e7a brise quelque chose au niveau de son authenticit\u00e9 et de mon\u00a0ressenti. En g\u00e9n\u00e9ral, je r\u00e9dige cela \u00e0 la maison, \u00e0 chaud. Une fois que toutes les affaires ont \u00e9t\u00e9 mises \u00e0 s\u00e9cher. Avec parfois des bribes qui s\u2019agencent lors du long retour en voiture. Si j\u2019attends plus de 24h, ce ne sont pas tant les souvenirs qui s\u2019effritent que la motivation \u00e0 les partager qui s\u2019envole, \u00e7a m\u2019est d\u00e9j\u00e0 arriv\u00e9 plusieurs\u00a0fois. Nos vies sont faites de m\u00e9tal incandescent. Tant qu\u2019elles rougeoient, nous en restons les forgerons. Cr\u00e9ateurs et inventeurs de\u00a0nous-m\u00eames. Mais comme le m\u00e9tal du forgeron qui refroidit, comme la coul\u00e9e de lave qui atteint l\u2019extr\u00e9mit\u00e9 de son expansion, nos vies se figent. Ce n\u2019est qu\u2019\u00e0 cet instant pr\u00e9cis que l\u2019on peut dire qui on a \u00e9t\u00e9. quand la coul\u00e9e de la vie a pris sa forme\u00a0d\u00e9finitive. D\u2019ici je la contemple, cette vie. Ma vie. Et je sais enfin qui je\u00a0suis\u2026 La saga de Grimr, J\u00e9r\u00e9mie\u00a0Moreau R\u00e9trospective sous forme de Conseil aujourd\u2019hui. Je suis de plus en plus tent\u00e9 d\u2019introduire une 6e \u00e9tape qui serait autour du pardon. Je te pardonne pour \u2026, cela m\u2019a permis d\u2019apprendre \u2026 . J\u2019ai l\u2019intuition que cela pourrait ajouter quelque chose pour un groupe relativement intime qui s\u2019inscrit dans la\u00a0dur\u00e9e." | |||
| }, | |||
| { | |||
| "title": "Galaxie", | |||
| "url": "/david/2024/02/26/", | |||
| "date": "2024-02-26", | |||
| "content": "Anecdote du jour qui met le sourire de bon\u00a0matin. <a href=\"/static/david/2024/2024-02-26-neige-galaxie.jpg\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-02-26-neige-galaxie.jpg\" width=\"4032\" height=\"3024\" srcset=\"/static/david/2024/2024-02-26-neige-galaxie.jpg 4032w, /static/david/2024/2024-02-26-neige-galaxie_660x440.jpg 660w, /static/david/2024/2024-02-26-neige-galaxie_990x660.jpg 990w, /static/david/2024/2024-02-26-neige-galaxie_1320x880.jpg 1320w\" sizes=\"min(100vw, calc(100vh * 4032 / 3024))\" loading=\"lazy\" decoding=\"async\" alt=\"De la neige qui tombe \u00e0 gros flocon.\"> L\u2019espace d\u2019un instant, par la\u00a0fen\u00eatre. \u2014 Oh la belle neige\u202f! \u2014\u00a0Il pleut des \u00e9toiles, la galaxie est en train de tomber. \u2014\u00a0\u2764\ufe0f CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party\u00a0components. Proposal: CSS Variable\u00a0Groups Heureusement que Lea Verou me lit et traduit \u00e7a en proposition de standardisation en quelques jours au lieu de chialer\u00a0\ud83d\ude05\ud83d\ude47. Trop\u00a0h\u00e2te\u202f! Maybe that\u2019s ok. The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems \u2014 in that case you might as well not have\u00a0plugins. Designing a JavaScript Plugin\u00a0System Probl\u00e9matique du jour\u00a0: comment concevoir un syst\u00e8me de plugins qui soit le bon compromis entre flexibilit\u00e9 et stabilit\u00e9\u202f? Ce n\u2019est pas si \u00e9vident, encore plus dans un \u00e9cosyst\u00e8me aussi \u00e9volutif que\u00a0JavaScript." | |||
| }, | |||
| { | |||
| "title": "Jour 2", | |||
| "url": "/david/2024/02/25/", | |||
| @@ -612,6 +624,18 @@ | |||
| "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": "R\u00e9daction", | |||
| "url": "/david/2024/02/27/", | |||
| "date": "2024-02-27", | |||
| "content": "Je suis curieux de savoir comment tu r\u00e9diges ces textes\u202f! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu \u00e9cris tout \u00e0 chaud une fois chez toi\u202f? Ou tu \u00e9cris quelques jours apr\u00e8s sur des souvenirs qui s\u2019effritent d\u00e9j\u00e0 mais \u00e7a n\u2019a pas\u00a0d\u2019importance\u202f?\u00a0\ud83d\ude42 Question de @mlbiche sur\u00a0masto Il m\u2019arrive de prendre des notes lors de sorties plus contemplatives (et moins risqu\u00e9es pour mes doigts\u202f!) mais c\u2019est assez rare. Je n\u2019arrive pas \u00e0 \u00e9crire une histoire en \u00e9tant en train de la vivre, c\u2019est comme de faire des vid\u00e9os, j\u2019ai l\u2019impression de trop me mettre en sc\u00e8ne sinon. Lorsque le r\u00e9cit influe sur le d\u00e9roul\u00e9, \u00e7a brise quelque chose au niveau de son authenticit\u00e9 et de mon\u00a0ressenti. En g\u00e9n\u00e9ral, je r\u00e9dige cela \u00e0 la maison, \u00e0 chaud. Une fois que toutes les affaires ont \u00e9t\u00e9 mises \u00e0 s\u00e9cher. Avec parfois des bribes qui s\u2019agencent lors du long retour en voiture. Si j\u2019attends plus de 24h, ce ne sont pas tant les souvenirs qui s\u2019effritent que la motivation \u00e0 les partager qui s\u2019envole, \u00e7a m\u2019est d\u00e9j\u00e0 arriv\u00e9 plusieurs\u00a0fois. Nos vies sont faites de m\u00e9tal incandescent. Tant qu\u2019elles rougeoient, nous en restons les forgerons. Cr\u00e9ateurs et inventeurs de\u00a0nous-m\u00eames. Mais comme le m\u00e9tal du forgeron qui refroidit, comme la coul\u00e9e de lave qui atteint l\u2019extr\u00e9mit\u00e9 de son expansion, nos vies se figent. Ce n\u2019est qu\u2019\u00e0 cet instant pr\u00e9cis que l\u2019on peut dire qui on a \u00e9t\u00e9. quand la coul\u00e9e de la vie a pris sa forme\u00a0d\u00e9finitive. D\u2019ici je la contemple, cette vie. Ma vie. Et je sais enfin qui je\u00a0suis\u2026 La saga de Grimr, J\u00e9r\u00e9mie\u00a0Moreau R\u00e9trospective sous forme de Conseil aujourd\u2019hui. Je suis de plus en plus tent\u00e9 d\u2019introduire une 6e \u00e9tape qui serait autour du pardon. Je te pardonne pour \u2026, cela m\u2019a permis d\u2019apprendre \u2026 . J\u2019ai l\u2019intuition que cela pourrait ajouter quelque chose pour un groupe relativement intime qui s\u2019inscrit dans la\u00a0dur\u00e9e." | |||
| }, | |||
| { | |||
| "title": "Galaxie", | |||
| "url": "/david/2024/02/26/", | |||
| "date": "2024-02-26", | |||
| "content": "Anecdote du jour qui met le sourire de bon\u00a0matin. <a href=\"/static/david/2024/2024-02-26-neige-galaxie.jpg\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-02-26-neige-galaxie.jpg\" width=\"4032\" height=\"3024\" srcset=\"/static/david/2024/2024-02-26-neige-galaxie.jpg 4032w, /static/david/2024/2024-02-26-neige-galaxie_660x440.jpg 660w, /static/david/2024/2024-02-26-neige-galaxie_990x660.jpg 990w, /static/david/2024/2024-02-26-neige-galaxie_1320x880.jpg 1320w\" sizes=\"min(100vw, calc(100vh * 4032 / 3024))\" loading=\"lazy\" decoding=\"async\" alt=\"De la neige qui tombe \u00e0 gros flocon.\"> L\u2019espace d\u2019un instant, par la\u00a0fen\u00eatre. \u2014 Oh la belle neige\u202f! \u2014\u00a0Il pleut des \u00e9toiles, la galaxie est en train de tomber. \u2014\u00a0\u2764\ufe0f CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party\u00a0components. Proposal: CSS Variable\u00a0Groups Heureusement que Lea Verou me lit et traduit \u00e7a en proposition de standardisation en quelques jours au lieu de chialer\u00a0\ud83d\ude05\ud83d\ude47. Trop\u00a0h\u00e2te\u202f! Maybe that\u2019s ok. The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems \u2014 in that case you might as well not have\u00a0plugins. Designing a JavaScript Plugin\u00a0System Probl\u00e9matique du jour\u00a0: comment concevoir un syst\u00e8me de plugins qui soit le bon compromis entre flexibilit\u00e9 et stabilit\u00e9\u202f? Ce n\u2019est pas si \u00e9vident, encore plus dans un \u00e9cosyst\u00e8me aussi \u00e9volutif que\u00a0JavaScript." | |||
| }, | |||
| { | |||
| "title": "Jour 2", | |||
| "url": "/david/2024/02/25/", | |||
Loading…