123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452 |
- <!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>
- Vannerie
- — David Larlet</title>
- <script>
- function toggleTheme(themeName) {
- document.documentElement.classList.toggle(
- 'forced-dark',
- themeName === 'dark'
- )
- document.documentElement.classList.toggle(
- 'forced-light',
- themeName === 'light'
- )
- }
- const selectedTheme = localStorage.getItem('theme')
- if (selectedTheme !== 'undefined') {
- toggleTheme(selectedTheme)
- }
- </script>
- <!-- Documented, feel free to shoot an email. -->
- <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
- <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: dark)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: dark)"
- crossorigin>
- <link rel="preload"
- href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
- as="font"
- type="font/woff2"
- media="(prefers-color-scheme: dark)"
- crossorigin>
- <meta name="description" content="L’atelier du jour était une initiation à la vannerie, cette fois-ci avec / pour l’enfant. Depuis le temps qu’il veut m’accompagner, j’ai sauté sur l’occasion lorsqu’une animatrice d’atelier — ancienne enseignante, ça doit jouer — acceptât les personnes de son âge.">
- <!-- 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">
- <!-- To get attribution when linking on mastodon. -->
- <meta name="fediverse:creator" content="@david@larlet.fr">
-
- <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>Vannerie</h1>
- <p>Le <time datetime="2024-03-06">6 mars 2024</time></p>
- </hgroup>
- </header>
- <nav>
- <p>
-
- <a rel="prev"
- href="/david/2024/03/05/"
- 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/03/07/"
- title="Publication suivante : Sondages">Suivant →</a>
-
- </p>
- </nav>
-
- <p>L’atelier du jour était une initiation à la vannerie, cette fois-ci avec / pour l’enfant. Depuis le temps qu’il veut m’accompagner, j’ai sauté sur l’occasion lorsqu’une animatrice d’atelier — ancienne enseignante, ça doit jouer — acceptât les personnes de son âge.</p>
- <figure>
- <a href="/static/david/2024/2024-03-06-vannerie-panier.jpg"
- title="Cliquer pour une version haute résolution">
- <img
- src="/static/david/2024/2024-03-06-vannerie-panier.jpg"
- width="4032" height="3024"
- srcset="/static/david/2024/2024-03-06-vannerie-panier.jpg 4032w, /static/david/2024/2024-03-06-vannerie-panier_660x440.jpg 660w, /static/david/2024/2024-03-06-vannerie-panier_990x660.jpg 990w, /static/david/2024/2024-03-06-vannerie-panier_1320x880.jpg 1320w"
- sizes="min(100vw, calc(100vh * 4032 / 3024))"
- loading="lazy"
- decoding="async"
- alt="Un panier en vannerie.">
- </a>
- <figcaption>Un panier en vannerie, ça m’a pris 2h30.</figcaption>
- </figure>
- <p>Le <em>twist</em>, c’est que j’ai pu le faire aussi vu que nous étions les seuls présents pour la session au final. Autant dire qu’avec un cours particulier on a pu apprendre encore plus de choses ! Sur un spectre allant des techniques d’assouplissement à l’appropriation culturelle, on a passé un bon moment d’échanges. J’ai appris que la préparation du frêne noir utilisé dans la vannerie par les Premières Nations prend plusieurs mois, ce qui explique sa rareté (et son prix).</p>
- <figure>
- <a href="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg"
- title="Cliquer pour une version haute résolution">
- <img
- src="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg"
- width="3024" height="4032"
- srcset="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg 3024w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_660x440.jpg 660w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_990x660.jpg 990w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_1320x880.jpg 1320w"
- sizes="min(100vw, calc(100vh * 3024 / 4032))"
- loading="lazy"
- decoding="async"
- alt="Un sac à dos en vannerie.">
- </a>
- <figcaption>Un sac à dos en vannerie sur le dos de l’enfant.</figcaption>
- </figure>
- <p>Toujours cette sensation de créer des objets utiles à partir de pas grand chose et avec un minimum de matériel.</p>
- <a href="#hr-100" title="Lien vers cette section de la page"><hr id="hr-100" /></a>
-
- <blockquote lang="en">
- <p>Like Stimulus, but <em>a lot</em> smaller and a bit more webcomponenty?</p>
- <p><cite><em><a data-link-domain="github.com" href="https://github.com/johanhalse/musculus">Musculus</a></em></cite></p>
- </blockquote>
- <p>Découverte du jour que je trouve très inspirante. J’avais dans un coin de tête de tester des choses dans cette voie. Réussir à faire le pont entre les deux serait une très bonne combinaison. J’apprécie qu’une solution de test soit proposée, même si elle est légère (en terme de fiabilité) j’en peux plus d’attendre Playwright.</p>
- <a href="#hr-101" title="Lien vers cette section de la page"><hr id="hr-101" /></a>
-
- <blockquote>
- <p>End the battle. Use <code>infinity</code> to get the highest possible <code>z-index</code> and win forever.</p>
- <p>[…]</p>
- <p>But is <code>infinity</code> really any better than some arbitrarily big value like <code>9999px</code>? Functionally, no. Same end result. But I think <mark>it does help make code more self-documenting,</mark> because <code>infinity</code> conveys intent. It expresses that it’s all about the magnitude, not a specific magic number.</p>
- <p><cite><em><a data-link-domain="codersblock.com" href="https://codersblock.com/blog/playing-with-infinity-in-css/" hreflang="en"
- title="Consultation de l’article (anglais)">Playing with Infinity in CSS</a>
- <a href="/david/cache/2024/1f4e359d100592aee6e46505a40b2a01/" hreflang="en"
- data-tippy data-description="CSS has an infinity constant. When I first learned about this, my brain lit up with all kinds of absurd possibilities. Let’s discuss! There might even be some..."
- data-source="https://codersblock.com/blog/playing-with-infinity-in-css/"
- data-date="2024-03-06"
- data-favicon="https://codersblock.com/favicon-32x32.png"
- data-domain="codersblock.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>Autre découverte du jour. J’aime bien l’idée de pouvoir évacuer certaines valeurs magiques de manière explicite. J’ai la flemme de tester ce qu’un <code>calc(infinity - 1)</code> donnerait sur un <code>z-index</code> 🤭.</p>
-
-
- <nav>
- <p>
-
- <a href="/david/2024/apprentissage/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#apprentissage</a>
-
- <a href="/david/2024/parentalite/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#parentalité</a>
-
- <a href="/david/2024/protopie/"
- title="Liste de tous les articles 2024 associés à cette étiquette"
- rel="tag">#protopie</a>
-
- <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
- </p>
- </nav>
-
- <nav>
- <p>
-
- <a rel="prev"
- href="/david/2024/03/05/"
- 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/03/07/"
- title="Publication suivante : Sondages">Suivant →</a>
-
- </p>
- </nav>
-
-
- <form action="/david/recherche/" method="get">
- <fieldset>
- <legend>Recherche</legend>
- <label for="input-search">Termes de votre recherche :</label>
- <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
- <input type="submit" value="Chercher">
- <p id="indexation-infos">
- <small>
- Seuls les contenus de ces 8 dernières années sont indexés.
- </small>
- </p>
- </fieldset>
- </form>
-
- <aside>
- <theme-toggle></theme-toggle>
- </aside>
- </article>
- <hr>
- <footer>
- <p>
- <a href="/david/" title="Aller à l’accueil">Accueil</a>
- •
- <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
- •
- <a href="http://larlet.com"
- title="Go to my English profile"
- data-instant>Pro</a>
- •
- <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
- •
- <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
- </p>
- <template id="theme-selector">
- <form>
- <style type="text/css">
- fieldset div {
- text-align: center;
- }
- </style>
- <fieldset>
- <legend>Thème</legend>
- <div>
- <label>
- <input type="radio" value="auto" name="chosen-color-scheme" checked>
- Auto
- </label>
- <label>
- <input type="radio" value="dark" name="chosen-color-scheme">
- Foncé
- </label>
- <label>
- <input type="radio" value="light" name="chosen-color-scheme">
- Clair
- </label>
- </div>
- </fieldset>
- </form>
- </template>
- </footer>
- <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
- <script>
- class ThemeToggle extends HTMLElement {
- constructor() {
- super()
- const themeSelectorTemplate = document.querySelector('#theme-selector')
- const form = themeSelectorTemplate.content.firstElementChild
- this.attachShadow({ mode: 'open' })
- this.shadowRoot.appendChild(form.cloneNode(true))
- }
-
- connectedCallback() {
- const form = this.shadowRoot.querySelector('form')
- form.addEventListener('change', (e) => {
- const chosenColorScheme = e.target.value
- localStorage.setItem('theme', chosenColorScheme)
- toggleTheme(chosenColorScheme)
- })
-
- const selectedTheme = localStorage.getItem('theme')
- if (selectedTheme && selectedTheme !== 'undefined') {
- form.querySelector(`[value="${selectedTheme}"]`).checked = true
- }
- }
- }
-
- const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
- window.addEventListener('load', () => {
- let colorsLayer = undefined
- let hasDarkRules = false
- for (const styleSheet of Array.from(document.styleSheets)) {
- let mediaRules = []
- for (const layerRule of styleSheet.cssRules) {
- if (!(layerRule instanceof CSSLayerBlockRule)) {
- continue
- }
- if (layerRule.name === 'colors') {
- colorsLayer = layerRule
- }
- for (const cssRule of layerRule.cssRules) {
- if (cssRule.type !== CSSRule.MEDIA_RULE) {
- continue
- }
- // WARNING: Safari does not have/supports `conditionText`.
- if (cssRule.conditionText) {
- if (cssRule.conditionText !== prefersColorSchemeDark) {
- continue
- }
- } else {
- if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
- continue
- }
- }
- mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
- }
- }
-
- // WARNING: do not try to insert a Rule to a styleSheet you are
- // currently iterating on, otherwise the browser will be stuck
- // in a infinite loop…
- for (const mediaRule of mediaRules) {
- // Safari requires the `0` second parameter (even if default).
- colorsLayer.insertRule(mediaRule.cssText, 0)
- hasDarkRules = true
- }
- }
-
- if (hasDarkRules) {
- if ('customElements' in window && !customElements.get('theme-toggle')) {
- customElements.define('theme-toggle', ThemeToggle)
- }
- }
- })
- </script>
-
- <script src="/static/david/js/popper-2.11.8.min.js"></script>
- <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
- <script>
- tippy('[data-tippy]', {
- content(reference) {
- reference.addEventListener('click', (e) => e.preventDefault())
- return `
- <h3 lang="fr">
- <img src="${reference.dataset.favicon}" loading="lazy">
- <a href="${reference.dataset.source}"
- >Article sur ${reference.dataset.domain}</a></h3>
- <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
- <div class="tippy-links" lang="fr">
- <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
- </div>
- `
- },
- allowHTML: true,
- interactive: true,
- delay: [150, 700],
- hideOnClick: false
- })
- </script>
- <script type="module">
- import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
-
- const markObserver = new IntersectionObserver((entries, observer) => {
- const computedStyle = getComputedStyle(document.documentElement)
- const markBackground = computedStyle.getPropertyValue('--mark-background')
- for (const entry of entries) {
- if (entry.intersectionRatio === 0) continue
- const markElement = entry.target
- markElement.style.backgroundColor = 'inherit'
- const annotation = annotate(
- markElement, {
- type: 'highlight',
- multiline: true,
- color: markBackground,
- // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
- animate: false
- }
- )
- annotation.show()
- observer.unobserve(markElement)
- }
- }, {threshold: 1.0})
-
- for (const markElement of document.querySelectorAll('mark')) {
- markObserver.observe(markElement)
- }
- </script>
-
- </body>
- </html>
|