11 changed files with 788 additions and 69 deletions
+ 8
- 0
david/2024/02/27/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/28/" | |||
| title="Publication suivante : Dérèglement">Suivant →</a> | |||
| </p> | |||
| </nav> | |||
| @@ -220,6 +224,10 @@ Et je sais enfin qui je suis…</p> | |||
| <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a> | |||
| • <a rel="next" | |||
| href="/david/2024/02/28/" | |||
| title="Publication suivante : Dérèglement">Suivant →</a> | |||
| </p> | |||
| </nav> | |||
+ 414
- 0
david/2024/02/28/index.html
View File
| @@ -0,0 +1,414 @@ | |||
| <!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> | |||
| Dérèglement | |||
| — David Larlet</title> | |||
| <meta name="description" content="J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu frais…"> | |||
| <!-- 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>Dérèglement</h1> | |||
| <p>Le <time datetime="2024-02-28">28 février 2024</time></p> | |||
| </hgroup> | |||
| </header> | |||
| <nav> | |||
| <p> | |||
| <a rel="prev" | |||
| href="/david/2024/02/27/" | |||
| title="Publication précédente : Rédaction">← 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> | |||
| <p>J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu frais…</p> | |||
| <figure> | |||
| <a href="/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| width="960" height="2079" | |||
| srcset="/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 960 / 2079))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Capture d’écran de la météo, les températures vont de 14°C à -13°C en moins de 12 heures."> | |||
| </a> | |||
| <figcaption>#MeanwhileInCanada</figcaption> | |||
| </figure> | |||
| <a href="#hr-92" title="Lien vers cette section de la page"><hr id="hr-92" /></a> | |||
| <p>Le même jour, j’intègre les <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/directives.html#admonitions">admonitions</a> à un de nos outils interne et j’apprends qu’il est possible d’intégrer ce type de rendu pour le <a data-link-domain="github.com" href="https://github.com/orgs/community/discussions/16925"><em>markdown</em> servi par Microsoft Github</a> en lisant le <a data-link-domain="github.com" href="https://github.com/jgarber623/aria-collapsible">README de aria-collapsible</a>.</p> | |||
| <p>Au passage, j’apprends beaucoup en lisant le code de <em>Web Components</em> en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu’une sensibilité à l’accessibilité de leurs productions. Ici par exemple, je découvre comment faire des composants relativement défensifs.</p> | |||
| <a href="#hr-93" title="Lien vers cette section de la page"><hr id="hr-93" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Anyway, if you want to know some basic information about Passkeys I know a site you can check out.</p> | |||
| <p><cite><em><a data-link-domain="chriscoyier.net" href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Where I’m at on the whole CSS-Tricks thing</a> | |||
| <a href="/david/cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/" hreflang="en" | |||
| data-tippy data-description="It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now." | |||
| data-source="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" | |||
| data-date="2024-02-28" | |||
| data-favicon="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23f8d773%22></rect><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2290%22>👨💻</text></svg>" | |||
| data-domain="chriscoyier.net" | |||
| ><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>Beaucoup d’honnêteté et… une belle ressource de perdue, ou en passe de l’être. <em>Tricky.</em></p> | |||
| <a href="#hr-94" title="Lien vers cette section de la page"><hr id="hr-94" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning <mark>we don’t need to manually select lighter/darker colors</mark> for those states. And because we’re using OKLCH, the variations will be perceptually uniform, <a data-link-domain="lea.verou.me" href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we choose!</p> | |||
| <p><cite><em><a data-link-domain="abeautifulsite.net" href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Better Buttons with color-mix() and Custom Properties</a> | |||
| <a href="/david/cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/" hreflang="en" | |||
| data-tippy data-description="Let the browser and OKLCH do the hard work of styling states." | |||
| data-source="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" | |||
| data-date="2024-02-28" | |||
| data-favicon="https://www.abeautifulsite.net/images/logos/leaf.svg" | |||
| data-domain="abeautifulsite.net" | |||
| ><svg xmlns="http://www.w3.org/2000/svg" | |||
| width="24" height="24" viewBox="0 0 24 24" fill="none" | |||
| stroke="currentColor" stroke-width="2" stroke-linecap="square" | |||
| stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle> | |||
| <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> | |||
| <line x1="12" y1="17" x2="12.01" y2="17"></line> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span></a></em></cite></p> | |||
| </blockquote> | |||
| <p>Les personnes qui maîtrisent bien CSS vont avoir de plus en plus de valeur. À juste titre.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/documentation/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#documentation</a> | |||
| <a href="/david/2024/partage/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#partage</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/27/" | |||
| title="Publication précédente : Rédaction">← 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> | |||
+ 29
- 0
david/2024/_sources/2024-02-28 - Dereglement.md
View File
| @@ -0,0 +1,29 @@ | |||
| # Dérèglement | |||
| J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu frais… | |||
|  | |||
| --- | |||
| Le même jour, j’intègre les [admonitions](https://mistune.lepture.com/en/latest/directives.html#admonitions) à un de nos outils interne et j’apprends qu’il est possible d’intégrer ce type de rendu pour le [*markdown* servi par Microsoft Github](https://github.com/orgs/community/discussions/16925) en lisant le [README de aria-collapsible](https://github.com/jgarber623/aria-collapsible). | |||
| Au passage, j’apprends beaucoup en lisant le code de *Web Components* en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu’une sensibilité à l’accessibilité de leurs productions. Ici par exemple, je découvre comment faire des composants relativement défensifs. | |||
| --- | |||
| > [en] Anyway, if you want to know some basic information about Passkeys I know a site you can check out. | |||
| > | |||
| > <cite>*[Where I’m at on the whole CSS-Tricks thing](https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/)*</cite> | |||
| Beaucoup d’honnêteté et… une belle ressource de perdue, ou en passe de l’être. *Tricky.* | |||
| --- | |||
| > [en] Using `color-mix()`, we can adjust the tint/shade based on the background color, meaning ==we don’t need to manually select lighter/darker colors== for those states. And because we’re using OKLCH, the variations will be perceptually uniform, [unlike HSL](https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something). This means that tints and shades will look consistent for any color we choose! | |||
| > | |||
| > <cite>*[Better Buttons with color-mix() and Custom Properties](https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/)*</cite> | |||
| Les personnes qui maîtrisent bien CSS vont avoir de plus en plus de valeur. À juste titre. | |||
| #documentation #partage #solastalgia | |||
+ 88
- 0
david/2024/documentation/index.html
View File
| @@ -134,6 +134,94 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/28/" title="Lien permanent vers cet article">Dérèglement</a> <time datetime="2024-02-28">28 février 2024</time> | |||
| </h2> | |||
| <p>J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu frais…</p> | |||
| <figure> | |||
| <a href="/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| width="960" height="2079" | |||
| srcset="/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 960 / 2079))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Capture d’écran de la météo, les températures vont de 14°C à -13°C en moins de 12 heures."> | |||
| </a> | |||
| <figcaption>#MeanwhileInCanada</figcaption> | |||
| </figure> | |||
| <a href="#hr-92" title="Lien vers cette section de la page"><hr id="hr-92" /></a> | |||
| <p>Le même jour, j’intègre les <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/directives.html#admonitions">admonitions</a> à un de nos outils interne et j’apprends qu’il est possible d’intégrer ce type de rendu pour le <a data-link-domain="github.com" href="https://github.com/orgs/community/discussions/16925"><em>markdown</em> servi par Microsoft Github</a> en lisant le <a data-link-domain="github.com" href="https://github.com/jgarber623/aria-collapsible">README de aria-collapsible</a>.</p> | |||
| <p>Au passage, j’apprends beaucoup en lisant le code de <em>Web Components</em> en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu’une sensibilité à l’accessibilité de leurs productions. Ici par exemple, je découvre comment faire des composants relativement défensifs.</p> | |||
| <a href="#hr-93" title="Lien vers cette section de la page"><hr id="hr-93" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Anyway, if you want to know some basic information about Passkeys I know a site you can check out.</p> | |||
| <p><cite><em><a data-link-domain="chriscoyier.net" href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Where I’m at on the whole CSS-Tricks thing</a> | |||
| <a href="/david/cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/" hreflang="en" | |||
| data-tippy data-description="It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now." | |||
| data-source="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" | |||
| data-date="2024-02-28" | |||
| data-favicon="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23f8d773%22></rect><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2290%22>👨💻</text></svg>" | |||
| data-domain="chriscoyier.net" | |||
| ><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>Beaucoup d’honnêteté et… une belle ressource de perdue, ou en passe de l’être. <em>Tricky.</em></p> | |||
| <a href="#hr-94" title="Lien vers cette section de la page"><hr id="hr-94" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning <mark>we don’t need to manually select lighter/darker colors</mark> for those states. And because we’re using OKLCH, the variations will be perceptually uniform, <a data-link-domain="lea.verou.me" href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we choose!</p> | |||
| <p><cite><em><a data-link-domain="abeautifulsite.net" href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Better Buttons with color-mix() and Custom Properties</a> | |||
| <a href="/david/cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/" hreflang="en" | |||
| data-tippy data-description="Let the browser and OKLCH do the hard work of styling states." | |||
| data-source="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" | |||
| data-date="2024-02-28" | |||
| data-favicon="https://www.abeautifulsite.net/images/logos/leaf.svg" | |||
| data-domain="abeautifulsite.net" | |||
| ><svg xmlns="http://www.w3.org/2000/svg" | |||
| width="24" height="24" viewBox="0 0 24 24" fill="none" | |||
| stroke="currentColor" stroke-width="2" stroke-linecap="square" | |||
| stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle> | |||
| <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> | |||
| <line x1="12" y1="17" x2="12.01" y2="17"></line> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span></a></em></cite></p> | |||
| </blockquote> | |||
| <p>Les personnes qui maîtrisent bien CSS vont avoir de plus en plus de valeur. À juste titre.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/documentation/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#documentation</a> | |||
| <a href="/david/2024/partage/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#partage</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/31/" title="Lien permanent vers cet article">Mécénat</a> <time datetime="2024-01-31">31 janvier 2024</time> | |||
| </h2> | |||
+ 5
- 4
david/2024/index.html
View File
| @@ -191,7 +191,8 @@ | |||
| <a href="/david/2024/02/24/">Jour 1</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>. | |||
| <a href="/david/2024/02/27/">Rédaction</a>, | |||
| <a href="/david/2024/02/28/">Dérèglement</a>. | |||
| </p> | |||
| @@ -207,7 +208,7 @@ | |||
| <a href="/david/2024/communaute/" rel="tag">#communauté (5)</a>, | |||
| <a href="/david/2024/decision/" rel="tag">#décision (7)</a>, | |||
| <a href="/david/2024/dependance/" rel="tag">#dépendance (3)</a>, | |||
| <a href="/david/2024/documentation/" rel="tag">#documentation (1)</a>, | |||
| <a href="/david/2024/documentation/" rel="tag">#documentation (2)</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 (6)</a>, | |||
| @@ -223,14 +224,14 @@ | |||
| <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é (4)</a>, | |||
| <a href="/david/2024/partage/" rel="tag">#partage (3)</a>, | |||
| <a href="/david/2024/partage/" rel="tag">#partage (4)</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/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 (7)</a>, | |||
| <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (2)</a>, | |||
| <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (3)</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>, | |||
+ 88
- 0
david/2024/partage/index.html
View File
| @@ -134,6 +134,94 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/28/" title="Lien permanent vers cet article">Dérèglement</a> <time datetime="2024-02-28">28 février 2024</time> | |||
| </h2> | |||
| <p>J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu frais…</p> | |||
| <figure> | |||
| <a href="/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| width="960" height="2079" | |||
| srcset="/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 960 / 2079))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Capture d’écran de la météo, les températures vont de 14°C à -13°C en moins de 12 heures."> | |||
| </a> | |||
| <figcaption>#MeanwhileInCanada</figcaption> | |||
| </figure> | |||
| <a href="#hr-92" title="Lien vers cette section de la page"><hr id="hr-92" /></a> | |||
| <p>Le même jour, j’intègre les <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/directives.html#admonitions">admonitions</a> à un de nos outils interne et j’apprends qu’il est possible d’intégrer ce type de rendu pour le <a data-link-domain="github.com" href="https://github.com/orgs/community/discussions/16925"><em>markdown</em> servi par Microsoft Github</a> en lisant le <a data-link-domain="github.com" href="https://github.com/jgarber623/aria-collapsible">README de aria-collapsible</a>.</p> | |||
| <p>Au passage, j’apprends beaucoup en lisant le code de <em>Web Components</em> en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu’une sensibilité à l’accessibilité de leurs productions. Ici par exemple, je découvre comment faire des composants relativement défensifs.</p> | |||
| <a href="#hr-93" title="Lien vers cette section de la page"><hr id="hr-93" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Anyway, if you want to know some basic information about Passkeys I know a site you can check out.</p> | |||
| <p><cite><em><a data-link-domain="chriscoyier.net" href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Where I’m at on the whole CSS-Tricks thing</a> | |||
| <a href="/david/cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/" hreflang="en" | |||
| data-tippy data-description="It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now." | |||
| data-source="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" | |||
| data-date="2024-02-28" | |||
| data-favicon="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23f8d773%22></rect><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2290%22>👨💻</text></svg>" | |||
| data-domain="chriscoyier.net" | |||
| ><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>Beaucoup d’honnêteté et… une belle ressource de perdue, ou en passe de l’être. <em>Tricky.</em></p> | |||
| <a href="#hr-94" title="Lien vers cette section de la page"><hr id="hr-94" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning <mark>we don’t need to manually select lighter/darker colors</mark> for those states. And because we’re using OKLCH, the variations will be perceptually uniform, <a data-link-domain="lea.verou.me" href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we choose!</p> | |||
| <p><cite><em><a data-link-domain="abeautifulsite.net" href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Better Buttons with color-mix() and Custom Properties</a> | |||
| <a href="/david/cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/" hreflang="en" | |||
| data-tippy data-description="Let the browser and OKLCH do the hard work of styling states." | |||
| data-source="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" | |||
| data-date="2024-02-28" | |||
| data-favicon="https://www.abeautifulsite.net/images/logos/leaf.svg" | |||
| data-domain="abeautifulsite.net" | |||
| ><svg xmlns="http://www.w3.org/2000/svg" | |||
| width="24" height="24" viewBox="0 0 24 24" fill="none" | |||
| stroke="currentColor" stroke-width="2" stroke-linecap="square" | |||
| stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle> | |||
| <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> | |||
| <line x1="12" y1="17" x2="12.01" y2="17"></line> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span></a></em></cite></p> | |||
| </blockquote> | |||
| <p>Les personnes qui maîtrisent bien CSS vont avoir de plus en plus de valeur. À juste titre.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/documentation/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#documentation</a> | |||
| <a href="/david/2024/partage/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#partage</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/02/22/" title="Lien permanent vers cet article">Responsabilité</a> <time datetime="2024-02-22">22 février 2024</time> | |||
| </h2> | |||
+ 88
- 0
david/2024/solastalgia/index.html
View File
| @@ -134,6 +134,94 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/28/" title="Lien permanent vers cet article">Dérèglement</a> <time datetime="2024-02-28">28 février 2024</time> | |||
| </h2> | |||
| <p>J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu frais…</p> | |||
| <figure> | |||
| <a href="/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| width="960" height="2079" | |||
| srcset="/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 960 / 2079))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Capture d’écran de la météo, les températures vont de 14°C à -13°C en moins de 12 heures."> | |||
| </a> | |||
| <figcaption>#MeanwhileInCanada</figcaption> | |||
| </figure> | |||
| <a href="#hr-92" title="Lien vers cette section de la page"><hr id="hr-92" /></a> | |||
| <p>Le même jour, j’intègre les <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/directives.html#admonitions">admonitions</a> à un de nos outils interne et j’apprends qu’il est possible d’intégrer ce type de rendu pour le <a data-link-domain="github.com" href="https://github.com/orgs/community/discussions/16925"><em>markdown</em> servi par Microsoft Github</a> en lisant le <a data-link-domain="github.com" href="https://github.com/jgarber623/aria-collapsible">README de aria-collapsible</a>.</p> | |||
| <p>Au passage, j’apprends beaucoup en lisant le code de <em>Web Components</em> en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu’une sensibilité à l’accessibilité de leurs productions. Ici par exemple, je découvre comment faire des composants relativement défensifs.</p> | |||
| <a href="#hr-93" title="Lien vers cette section de la page"><hr id="hr-93" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Anyway, if you want to know some basic information about Passkeys I know a site you can check out.</p> | |||
| <p><cite><em><a data-link-domain="chriscoyier.net" href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Where I’m at on the whole CSS-Tricks thing</a> | |||
| <a href="/david/cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/" hreflang="en" | |||
| data-tippy data-description="It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now." | |||
| data-source="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" | |||
| data-date="2024-02-28" | |||
| data-favicon="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23f8d773%22></rect><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2290%22>👨💻</text></svg>" | |||
| data-domain="chriscoyier.net" | |||
| ><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>Beaucoup d’honnêteté et… une belle ressource de perdue, ou en passe de l’être. <em>Tricky.</em></p> | |||
| <a href="#hr-94" title="Lien vers cette section de la page"><hr id="hr-94" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning <mark>we don’t need to manually select lighter/darker colors</mark> for those states. And because we’re using OKLCH, the variations will be perceptually uniform, <a data-link-domain="lea.verou.me" href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we choose!</p> | |||
| <p><cite><em><a data-link-domain="abeautifulsite.net" href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" hreflang="en" | |||
| title="Consultation de l’article (anglais)">Better Buttons with color-mix() and Custom Properties</a> | |||
| <a href="/david/cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/" hreflang="en" | |||
| data-tippy data-description="Let the browser and OKLCH do the hard work of styling states." | |||
| data-source="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" | |||
| data-date="2024-02-28" | |||
| data-favicon="https://www.abeautifulsite.net/images/logos/leaf.svg" | |||
| data-domain="abeautifulsite.net" | |||
| ><svg xmlns="http://www.w3.org/2000/svg" | |||
| width="24" height="24" viewBox="0 0 24 24" fill="none" | |||
| stroke="currentColor" stroke-width="2" stroke-linecap="square" | |||
| stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle> | |||
| <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> | |||
| <line x1="12" y1="17" x2="12.01" y2="17"></line> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span></a></em></cite></p> | |||
| </blockquote> | |||
| <p>Les personnes qui maîtrisent bien CSS vont avoir de plus en plus de valeur. À juste titre.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/documentation/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#documentation</a> | |||
| <a href="/david/2024/partage/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#partage</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/02/26/" title="Lien permanent vers cet article">Galaxie</a> <time datetime="2024-02-26">26 février 2024</time> | |||
| </h2> | |||
+ 10
- 10
david/blogroll/index.html
View File
| @@ -246,32 +246,32 @@ | |||
| </dl> | |||
| <dl> | |||
| <dt> | |||
| <a href="https://www.la-grange.net/2024/02/16/retour">retour</a>, | |||
| 16-02-2024 | |||
| <a href="https://www.la-grange.net/2024/02/17/svg">SVG, l'année du dragon</a>, | |||
| 17-02-2024 | |||
| </dt> | |||
| <dd> | |||
| Cupertino, États-Unis, 16 février 2024 Dans la ville et ses monuments éloignés à tout jamais des dimensions humaines, où il est devenu de plus en plus difficile de creuser, la mémoire de la terre ne se cultive plus que dans le cœur des hommes. — Parfum de pagode, Anna Moï, urn:isbn:978-2-7526-0363-0 Sur le site et tout autour du site, j'observe souvent des oiseaux mouche en vol stationnaire… | |||
| San Francisco, 10 février 2024 Le Têt est l'occasion pour ceux-ci de tester leur immortalité en célébrant les traditions d'un temps ancien, immémorial. — Parfum de pagode, Anna Moï, urn:isbn:978-2-7526-0363-0 Départ à 0h20 dans la nuit de vendredi à samedi de San Francisco, j'arriverai à 4h00 dimanche matin à Tokyo. Temps pour dormir, temps pour penser à la semaine. De temps en temps pour me… | |||
| — <a href="https://www.la-grange.net/">Karl Dubost</a> | |||
| </dd> | |||
| </dl> | |||
| <dl> | |||
| <dt> | |||
| <a href="https://n.survol.fr/n/comment-developpera-t-on-demain">Comment développera-t-on demain ?</a>, | |||
| 15-02-2024 | |||
| <a href="https://www.la-grange.net/2024/02/16/retour">retour</a>, | |||
| 16-02-2024 | |||
| </dt> | |||
| <dd> | |||
| Les développeurs de mes équipes demandent depuis un moment des licences Github Copilot. J’ai vu quelques personnes parler de l’éditeur Cursor.sh. J’avoue que j’ai eu envie de tester un peu. Sur un projet perso j’ai tenté l’approche « allons-y totalement ». Je suis bluffé. Bon, j’ai encore le réflexe de chercher tout ce que je ne sais […] | |||
| — <a href="https://n.survol.fr/">Éric D.</a> | |||
| Cupertino, États-Unis, 16 février 2024 Dans la ville et ses monuments éloignés à tout jamais des dimensions humaines, où il est devenu de plus en plus difficile de creuser, la mémoire de la terre ne se cultive plus que dans le cœur des hommes. — Parfum de pagode, Anna Moï, urn:isbn:978-2-7526-0363-0 Sur le site et tout autour du site, j'observe souvent des oiseaux mouche en vol stationnaire… | |||
| — <a href="https://www.la-grange.net/">Karl Dubost</a> | |||
| </dd> | |||
| </dl> | |||
| <dl> | |||
| <dt> | |||
| <a href="https://www.la-grange.net/2024/02/15/concave">concave</a>, | |||
| <a href="https://n.survol.fr/n/comment-developpera-t-on-demain">Comment développera-t-on demain ?</a>, | |||
| 15-02-2024 | |||
| </dt> | |||
| <dd> | |||
| Cupertino, États-Unis, 15 février 2024 Les blocs démolis laissent à découvert, sur le mur mitoyen, les stigmates d'un quart de siècle de vie : traces de suie au-dessus des emplacements d'autels des ancêtres, anciennes fenêtres rebouchées, conduites de plomberie. — Parfum de pagode, Anna Moï, urn:isbn:978-2-7526-0363-0 Derrière l'hôtel près du bureau, le parking vide est blotti entre l'autoroute… | |||
| — <a href="https://www.la-grange.net/">Karl Dubost</a> | |||
| Les développeurs de mes équipes demandent depuis un moment des licences Github Copilot. J’ai vu quelques personnes parler de l’éditeur Cursor.sh. J’avoue que j’ai eu envie de tester un peu. Sur un projet perso j’ai tenté l’approche « allons-y totalement ». Je suis bluffé. Bon, j’ai encore le réflexe de chercher tout ce que je ne sais […] | |||
| — <a href="https://n.survol.fr/">Éric D.</a> | |||
| </dd> | |||
| </dl> | |||
| <dl> | |||
+ 4
- 3
david/index.html
View File
| @@ -143,6 +143,7 @@ | |||
| <h2>Publications 2024</h2> | |||
| <p>Liste des publications récentes en ordre anté-chronologique :</p> | |||
| <p> | |||
| <a href="/david/2024/02/28/">Dérèglement</a>, | |||
| <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>, | |||
| @@ -215,7 +216,7 @@ | |||
| <a href="/david/2024/communaute/" rel="tag">#communauté (5)</a>, | |||
| <a href="/david/2024/decision/" rel="tag">#décision (7)</a>, | |||
| <a href="/david/2024/dependance/" rel="tag">#dépendance (3)</a>, | |||
| <a href="/david/2024/documentation/" rel="tag">#documentation (1)</a>, | |||
| <a href="/david/2024/documentation/" rel="tag">#documentation (2)</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 (6)</a>, | |||
| @@ -231,14 +232,14 @@ | |||
| <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é (4)</a>, | |||
| <a href="/david/2024/partage/" rel="tag">#partage (3)</a>, | |||
| <a href="/david/2024/partage/" rel="tag">#partage (4)</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/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 (7)</a>, | |||
| <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (2)</a>, | |||
| <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (3)</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>, | |||
+ 42
- 52
david/log/index.xml
View File
| @@ -6,13 +6,54 @@ | |||
| <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-28T12:00:00+01:00</updated> | |||
| <updated>2024-02-29T12: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">Dérèglement</title> | |||
| <link href="https://larlet.fr/david/2024/02/28/" rel="alternate" type="text/html" /> | |||
| <updated>2024-02-28T12:00:00+01:00</updated> | |||
| <id>https://larlet.fr/david/2024/02/28/</id> | |||
| <summary type="html"> | |||
| <p>J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu&nbsp;frais…</p> | |||
| <figure> | |||
| <a href="https://larlet.fr/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="https://larlet.fr/static/david/2024/2024-02-28-courbe-temperature.jpg" | |||
| width="960" height="2079" | |||
| srcset="/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w" | |||
| sizes="min(100vw, calc(100vh * 960 / 2079))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Capture d’écran de la météo, les températures vont de 14°C à -13°C en moins de 12&nbsp;heures."> | |||
| </a> | |||
| <figcaption>#MeanwhileInCanada</figcaption> | |||
| </figure> | |||
| <hr /> | |||
| <p>Le même jour, j’intègre les <a href="https://mistune.lepture.com/en/latest/directives.html#admonitions">admonitions</a> à un de nos outils interne et j’apprends qu’il est possible d’intégrer ce type de rendu pour le <a href="https://github.com/orgs/community/discussions/16925"><em>markdown</em> servi par Microsoft Github</a> en lisant le <a href="https://github.com/jgarber623/aria-collapsible">README de aria-collapsible</a>.</p> | |||
| <p>Au passage, j’apprends beaucoup en lisant le code de <em>Web Components</em> en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu’une sensibilité à l’accessibilité de leurs productions. Ici par exemple, je découvre comment faire des composants relativement&nbsp;défensifs.</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>Anyway, if you want to know some basic information about Passkeys I know a site you can check&nbsp;out.</p> | |||
| <p><cite><em><a href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/">Where I’m at on the whole CSS-Tricks&nbsp;thing</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Beaucoup d’honnêteté et… une belle ressource de perdue, ou en passe de l’être. <em>Tricky.</em></p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning <mark>we don’t need to manually select lighter/darker colors</mark> for those states. And because we’re using OKLCH, the variations will be perceptually uniform, <a href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we&nbsp;choose!</p> | |||
| <p><cite><em><a href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/">Better Buttons with color-mix() and Custom&nbsp;Properties</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Les personnes qui maîtrisent bien CSS vont avoir de plus en plus de valeur. À juste&nbsp;titre.</p> | |||
| <nav><p><a href="https://larlet.fr/david/2024/documentation/">#documentation</a> <a href="https://larlet.fr/david/2024/partage/">#partage</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">Rédaction</title> | |||
| <link href="https://larlet.fr/david/2024/02/27/" rel="alternate" type="text/html" /> | |||
| @@ -1231,55 +1272,4 @@ Représentant de l’entreprise / Représentant de&nbsp;l’association< | |||
| <nav><p><a href="https://larlet.fr/david/2024/apprentissage/">#apprentissage</a> <a href="https://larlet.fr/david/2024/equipe/">#équipe</a> <a href="https://larlet.fr/david/2024/processus/">#processus</a></p></nav><hr/><p><a href="mailto:david@larlet.fr">Réagir ?</a></p></summary> | |||
| </entry> | |||
| <entry xml:lang="fr"> | |||
| <title type="html">Déploiement</title> | |||
| <link href="https://larlet.fr/david/2024/01/29/" rel="alternate" type="text/html" /> | |||
| <updated>2024-01-29T12:00:00+01:00</updated> | |||
| <id>https://larlet.fr/david/2024/01/29/</id> | |||
| <summary type="html"> | |||
| <blockquote> | |||
| <p>Ce qui me fait penser que cela fait plusieurs fois que je veux demander comment David déploie son&nbsp;site.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2024/01/24/herbe">herbe</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Mes <a href="https://git.larlet.fr/explore/repos">dépôts</a> contiennent le HTML généré car c’est ce que je considère comme étant la version pérenne de mes écrits donc je ne souhaite pas avoir une génération sur le serveur. Cela fait grossir le dépôt mais ça offre une tranquillité d’esprit de pouvoir observer les différences lorsque je modifie le&nbsp;moteur.</p> | |||
| <p>Il se trouve que ces dépôts sont sur le même serveur que celui qui sert les pages HTML que vous voyez. Je lance donc une commande distante avec <a href="https://minicli.readthedocs.io/">minicli</a> qui va faire une archive du dépôt git au bon endroit sur le&nbsp;serveur&nbsp;:</p> | |||
| <pre><code>git archive --remote=larlet-fr-index.git master | tar -x -C larlet-fr | |||
| git archive --remote=larlet-fr-david.git master | tar -x -C larlet-fr | |||
| git archive --remote=larlet-fr-david-cache.git master | tar -x -C larlet-fr/david | |||
| […] | |||
| </code></pre> | |||
| <p>J’itère ainsi sur chacun des dépôts concernés et l’avantage c’est que je peux donner un sous-dossier à la commande <code>tar</code> selon où je veux placer le contenu dans l’arborescence. Par exemple, ci-dessus, les articles archivés <code>larlet-fr-david-cache.git</code> arrivent directement dans mon dossier personnel <code>larlet-fr/david</code>. Il faut tout de même vérifier de ne pas écraser ses propres&nbsp;dossiers/fichiers.</p> | |||
| <p>Le déploiement met à ce jour une trentaine de secondes. Ce n’est pas optimisé mais je n’ai pas besoin de&nbsp;l’optimiser.</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>I therefore officially announce 2024&nbsp;to be the year when the square checkbox has finally&nbsp;died.</p> | |||
| <p><cite><em><a href="https://tonsky.me/blog/checkbox/">In Loving Memory of Square&nbsp;Checkbox</a></em></cite></p> | |||
| </blockquote> | |||
| <p>À quand une petite coche sur les <a href="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari">futurs toggle/switch natifs</a>&#8239;? Ou <a href="https://grumpy.website/1457">pire</a>&#8239;? 🙈</p> | |||
| <p>R.I.P. <a href="https://www.nubero.ch/blog/009/">les boutons</a>&nbsp;aussi…</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Les poètes et écrivains évitaient tous la colère des rois et des puissants par l’utilisation de métaphores. Mais c’est justement par cette analogie que cela devient&nbsp;intéressant.</p> | |||
| <p><mark>Les empires informatiques d’aujourd’hui comme exemples de l’absolutisme du pouvoir des siècles précédents posent la question plus qu’intéressantes sur la liberté d’expression.</mark> Quand tout l’espace de notre expression transite par un domaine privé et commercial, nous ne sommes plus dans l’espace public de notre expression mais bien dans cet espace contrôlé. Que devient le sens de notre communication si dès que nous sommes sur ces espaces, l’expression devient plus limitée que celle que l’espace public&nbsp;permet.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2024/01/26/fraichement">fraîchement</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Il est interdit de parler anglais dans les écoles québécoises. Il n’en fallait pas beaucoup plus pour que les élèves aient envie de l’apprendre et d’échanger entre eux dans cette langue. <em>Oppression + contre-pouvoir = culture&nbsp;commune.</em></p> | |||
| <p>Aussi, l’enseignement de l’anglais est relativement médiocre pour une province qui insiste sur le bilinguisme. Difficile d’en mesurer&nbsp;l’intention.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>[…] Je ne sais pas ce qui est le plus important, préserver un nom de domaine n’est qu’une partie. Préserver le contenu derrière le nom de domaine est plus difficile. Il faut penser serveurs, mise à jour de sécurité, les technologies utilisées, etc.</p> | |||
| <p>Le No JS pour les sites Web est rarement mentionné pour la longévité du contenu. Et pourtant c’est une pièce&nbsp;fondamentale.</p> | |||
| <p>Peut-être il serait plus important de <mark>penser à ce que les autres voudront préserver plutôt que de penser à ce que nous voulons transmettre.</mark> De même que voulons nous préserver des générations antérieures pour nous aider à mieux penser notre propre&nbsp;disparition.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2024/01/23/legacy">ce que nous&nbsp;laissons</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Peut-être que si chaque personne avait sa <a href="https://larlet.fr/david/cache/2024/">propre archive</a> des publications des autres, on aurait accès à un réseau de citations distribuées qui contribueraient à cette préservation. Et qui auraient été considérées comme étant «&nbsp;pertinentes&nbsp;» par les lecteur·ices&#8239;? Les guillemets sont importants car citation ne veut pas forcément dire caution ou intérêt le plus grand. Par exemple, l’<a href="https://www.la-grange.net/2024/01/22/carnet">anecdote</a> <q lang="fr">Je me pose de sérieuses questions sur l’image que nous renvoyons à notre enfant.</q> me fait beaucoup réfléchir et me donne envie de la conserver sans forcément la citer. Comment combiner réactions publiques et souvenirs plus&nbsp;intimes&#8239;?</p> | |||
| <p>Maintenant je vais vouloir citer encore plus d’articles de&nbsp;Karl&nbsp;(-:.</p> | |||
| <p><em>PS&nbsp;: Un réseau de <a href="https://flus.fr/">flus</a> ou <a href="https://readeck.org">readeck</a> serait aussi une option s’ils pouvaient devenir un des nœuds d’une archive distribuée et&nbsp;collective.</em></p> | |||
| <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> | |||
| </feed> | |||
+ 12
- 0
david/recherche/index.html
View File
| @@ -276,6 +276,12 @@ | |||
| </template> | |||
| <script id="search-index" type="application/json">[ | |||
| { | |||
| "title": "D\u00e9r\u00e8glement", | |||
| "url": "/david/2024/02/28/", | |||
| "date": "2024-02-28", | |||
| "content": "J\u2019avais d\u00e9j\u00e0 remarqu\u00e9 leur d\u00e9part tr\u00e8s tardif en d\u00e9cembre. Hier soir, j\u2019ai entendu mes premi\u00e8res bernaches. Demain matin, elles risquent d\u2019avoir un petit peu\u00a0frais\u2026 <a href=\"/static/david/2024/2024-02-28-courbe-temperature.jpg\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-02-28-courbe-temperature.jpg\" width=\"960\" height=\"2079\" srcset=\"/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w\" sizes=\"min(100vw, calc(100vh * 960 / 2079))\" loading=\"lazy\" decoding=\"async\" alt=\"Capture d\u2019\u00e9cran de la m\u00e9t\u00e9o, les temp\u00e9ratures vont de 14\u00b0C \u00e0 -13\u00b0C en moins de 12\u00a0heures.\"> #MeanwhileInCanada Le m\u00eame jour, j\u2019int\u00e8gre les admonitions \u00e0 un de nos outils interne et j\u2019apprends qu\u2019il est possible d\u2019int\u00e9grer ce type de rendu pour le markdown servi par Microsoft Github en lisant le README de aria-collapsible. Au passage, j\u2019apprends beaucoup en lisant le code de Web Components en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu\u2019une sensibilit\u00e9 \u00e0 l\u2019accessibilit\u00e9 de leurs productions. Ici par exemple, je d\u00e9couvre comment faire des composants relativement\u00a0d\u00e9fensifs. Anyway, if you want to know some basic information about Passkeys I know a site you can check\u00a0out. Where I\u2019m at on the whole CSS-Tricks\u00a0thing Beaucoup d\u2019honn\u00eatet\u00e9 et\u2026 une belle ressource de perdue, ou en passe de l\u2019\u00eatre. Tricky. Using color-mix(), we can adjust the tint/shade based on the background color, meaning we don\u2019t need to manually select lighter/darker colors for those states. And because we\u2019re using OKLCH, the variations will be perceptually uniform, unlike HSL. This means that tints and shades will look consistent for any color we\u00a0choose! Better Buttons with color-mix() and Custom\u00a0Properties Les personnes qui ma\u00eetrisent bien CSS vont avoir de plus en plus de valeur. \u00c0 juste\u00a0titre." | |||
| }, | |||
| { | |||
| "title": "R\u00e9daction", | |||
| "url": "/david/2024/02/27/", | |||
| @@ -624,6 +630,12 @@ | |||
| "date": "2024-01-01", | |||
| "content": "33\u202f% de 44\u00a0millions de consommateurs vont faire le Dry January 22\u202f% des consommateurs ont une conso excessive, c\u2019est-\u00e0-dire 10\u00a0verres/semaine max et plus de deux\u00a0verres/jour. Les seniors sont aussi tr\u00e8s touch\u00e9\u00b7es. L\u2019alcool est une drogue.. On peut faire la f\u00eate sans alcool et\u00a0s\u2019\u00e9clater. Quand on arr\u00eate\u00a0: bienfaits sur le foie, la peau, le coeur, etc\u2026 Pb\u00a0: m\u00e9moire, troubles cognitifs, responsable de cancer, pb sommeil, d\u00e9compensation de maladie psy,\u2026 41000\u00a0d\u00e9c\u00e8s par an en\u00a0France. Les cinq sympt\u00f4mes d\u00e9finissent un probl\u00e8me de\u00a0d\u00e9pendance\u00a0: Perte de\u00a0contr\u00f4le Usage\u00a0compulsif Envie\u00a0r\u00e9pressive Usage\u00a0chronique Cons\u00e9quences psychiques, physiques, sociales,\u2026 Bon Dry J. pour celleux qui le font\u202f! Moi j\u2019en\u00a0suis\u202f! @Air@framapiaf.org Dans mon entourage, de plus en plus de personnes que j\u2019estime ne boivent pas d\u2019alcool, de plus en plus de personnes qui vieillissent en deviennent d\u00e9pendantes. Je suis davantage attir\u00e9 par la premi\u00e8re option\u2026 et pas pour un seul\u00a0mois. Je me sens pr\u00eat, on verra bien o\u00f9 cela me\u00a0m\u00e8ne. Grosse envie de reprendre la CSS par ici en ce d\u00e9but d\u2019ann\u00e9e. Avec le dilemme de faire chuter cette motivation si je publie d\u00e8s maintenant avec l\u2019ancienne (qui restera effective sur les anciens articles). Je vais essayer de me\u00a0retenir." | |||
| }, | |||
| { | |||
| "title": "D\u00e9r\u00e8glement", | |||
| "url": "/david/2024/02/28/", | |||
| "date": "2024-02-28", | |||
| "content": "J\u2019avais d\u00e9j\u00e0 remarqu\u00e9 leur d\u00e9part tr\u00e8s tardif en d\u00e9cembre. Hier soir, j\u2019ai entendu mes premi\u00e8res bernaches. Demain matin, elles risquent d\u2019avoir un petit peu\u00a0frais\u2026 <a href=\"/static/david/2024/2024-02-28-courbe-temperature.jpg\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-02-28-courbe-temperature.jpg\" width=\"960\" height=\"2079\" srcset=\"/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w\" sizes=\"min(100vw, calc(100vh * 960 / 2079))\" loading=\"lazy\" decoding=\"async\" alt=\"Capture d\u2019\u00e9cran de la m\u00e9t\u00e9o, les temp\u00e9ratures vont de 14\u00b0C \u00e0 -13\u00b0C en moins de 12\u00a0heures.\"> #MeanwhileInCanada Le m\u00eame jour, j\u2019int\u00e8gre les admonitions \u00e0 un de nos outils interne et j\u2019apprends qu\u2019il est possible d\u2019int\u00e9grer ce type de rendu pour le markdown servi par Microsoft Github en lisant le README de aria-collapsible. Au passage, j\u2019apprends beaucoup en lisant le code de Web Components en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu\u2019une sensibilit\u00e9 \u00e0 l\u2019accessibilit\u00e9 de leurs productions. Ici par exemple, je d\u00e9couvre comment faire des composants relativement\u00a0d\u00e9fensifs. Anyway, if you want to know some basic information about Passkeys I know a site you can check\u00a0out. Where I\u2019m at on the whole CSS-Tricks\u00a0thing Beaucoup d\u2019honn\u00eatet\u00e9 et\u2026 une belle ressource de perdue, ou en passe de l\u2019\u00eatre. Tricky. Using color-mix(), we can adjust the tint/shade based on the background color, meaning we don\u2019t need to manually select lighter/darker colors for those states. And because we\u2019re using OKLCH, the variations will be perceptually uniform, unlike HSL. This means that tints and shades will look consistent for any color we\u00a0choose! Better Buttons with color-mix() and Custom\u00a0Properties Les personnes qui ma\u00eetrisent bien CSS vont avoir de plus en plus de valeur. \u00c0 juste\u00a0titre." | |||
| }, | |||
| { | |||
| "title": "R\u00e9daction", | |||
| "url": "/david/2024/02/27/", | |||
Loading…