Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. <!DOCTYPE html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>
  13. Feutrage
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="Atelier du soir avec Jesse que je connaissais pour ses autres activités et c’était une surprise de retomber sur lui ! C’est une bonne personne 😊. Le problème des Affûtés c’est qu’iels arrivent un peu trop bien à me cibler !">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <style type="text/css">
  106. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Feutrage</h1>
  136. <p>Le <time datetime="2024-02-13">13 février 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/02/12/"
  143. title="Publication précédente : Renards">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. • <a rel="next"
  149. href="/david/2024/02/14/"
  150. title="Publication suivante : GéoCodage">Suivant →</a>
  151. </p>
  152. </nav>
  153. <p>Atelier du soir avec <a data-link-domain="wiseoakwilderness.com" href="https://wiseoakwilderness.com/">Jesse</a> que je connaissais pour ses autres activités et c’était une surprise de retomber sur lui&#8239;! C’est une bonne personne&nbsp;😊. Le problème des <a data-link-domain="les-affutes.ca" href="https://www.les-affutes.ca/">Affûtés</a> c’est qu’iels arrivent un peu trop bien à me <a href="/david/2024/01/21/" title="Bois">cibler</a>&#8239;!</p>
  154. <p>L’objectif était de faire une paire de mitaines à partir de laine brute, c’est une approche qui m’intéresse beaucoup car je n’arrive pas à accrocher au tricotage et j’ai pourtant de gros besoins à ce sujet (je ne taris pas d’éloge au sujet de <a data-link-domain="nature.larlet.fr" href="https://nature.larlet.fr/habillage/#laine">cette matière</a> par ailleurs, je ne vais pas me répéter ici). Je n’avais aucune idée de cette technique&nbsp;auparavant.</p>
  155. <figure>
  156. <a href="/static/david/2024/2024-02-13-laine-brute.jpg"
  157. title="Cliquer pour une version haute résolution">
  158. <img
  159. src="/static/david/2024/2024-02-13-laine-brute.jpg"
  160. width="2464" height="3285"
  161. srcset="/static/david/2024/2024-02-13-laine-brute.jpg 2464w, /static/david/2024/2024-02-13-laine-brute_660x440.jpg 660w, /static/david/2024/2024-02-13-laine-brute_990x660.jpg 990w, /static/david/2024/2024-02-13-laine-brute_1320x880.jpg 1320w"
  162. sizes="min(100vw, calc(100vh * 2464 / 3285))"
  163. loading="lazy"
  164. decoding="async"
  165. alt="De la laine relativement brute.">
  166. </a>
  167. <figcaption>De la laine relativement&nbsp;brute.</figcaption>
  168. </figure>
  169. <p>La laine provenait de la <a data-link-domain="etsy.com" href="https://www.etsy.com/ca/market/bure_bure">boutique BureBure</a> sur Etsy, ce qui a l’avantage de pouvoir s’en procurer facilement de manière indépendante. Pour une option plus locale, certaines évoquaient <a data-link-domain="lavieenalpaga.com" href="https://www.lavieenalpaga.com/">La Vie en Alpaga</a> mais c’est une laine plus fine qu’il vaut mieux couper d’après Jesse pour qu’elle arrive à feutrer plus facilement. J’ai appris qu’une bonne partie de la laine qui serait utilisable au Québec ne l’est pas faute de rentabilité. À moi de trouver une source&nbsp;locale.</p>
  170. <p>Je vais documenter la méthode car c’est faisable dans sa cuisine sans nécessiter d’outillage particulier et je compte bien continuer cet apprentissage. Cela demande quelques étapes et un petit tour de main, l’atelier était vraiment important pour devenir&nbsp;autonome.</p>
  171. <p>Matériel&nbsp;: un bac étanche, un natte pour faire des <em>maki</em> (véridique), un rectangle de papier bulles, un rectangle en plastique avec des trous (type rideau ou tapis de vaisselle). Le tout dimensionné pour le patron choisi qui peut être découpé dans un sac de course en plastique rigide. Ensuite, il ne faut que de l’eau chaude, du savon et du vinaigre. Autant dire que ce n’est pas le matériel qui coûte&nbsp;cher.</p>
  172. <ol>
  173. <li>On fait un patron ayant une taille d’environ 130% par rapport au résultat attendu, le principe est que la laine va s’agréger et donc réduire sa taille de manière significative lors du&nbsp;processus.</li>
  174. <li>On pose le patron dans le bac, sur la natte + papier&nbsp;bulles.</li>
  175. <li>On ajoute trois couches de laine en commençant par la fibre à l’horizontale puis en croisant les fibres, on fait en sorte que ça dépasse pour pouvoir faire la jonction avec la face arrière du&nbsp;patron.</li>
  176. <li>On recouvre avec le tapis en plastique puis on arrose d’eau très chaude et de&nbsp;savon.</li>
  177. <li>On masse avec tendresse pour ne pas faire de trous au début, c’est cette action qui va relier les différents filaments de laine progressivement (c’est le feutrage à proprement&nbsp;parler).</li>
  178. <li>On retourne et on replie l’excédent sur les bords du patron avant d’ajouter nos trois couches de laine sur cette nouvelle&nbsp;face.</li>
  179. <li>Arrivé à cette étape, on a notre structure et on n’ajoutera plus de laine (à part souci). La simplicité du processus est&nbsp;incroyable.</li>
  180. <li>On fait bien le détourage du pouce dans le cas d’une mitaine. Ne pas oublier de replier le bord en bas, il faut laisser un trou pour le passage de la&nbsp;main&#8239;!</li>
  181. <li>On continue de masser recto-verso un très grand nombre de fois en ajoutant de l’eau chaude et du savon (le foulage) jusqu’à ce que ça tienne bien et que l’on puisse extraire le&nbsp;patron.</li>
  182. <li>On peut maintenant rouler nos <em>maki</em>&#8239;! Cela permet de masser le rouleau et d’avoir d’autres angles pour les fibres. Il faut aussi se concentrer sur les bords pour arrondir les angles et commencer à former la&nbsp;mitaine.</li>
  183. <li>Au bout d’un moment —&nbsp;ces premières étapes ont pris une bonne heure&nbsp;— on passe à la deuxième mitaine, retour à l’étape&nbsp;2…</li>
  184. <li>Avec les deux mitaines en main, on peut les feutrer/fouler réciproquement en se frottant les mains toujours en ajoutant du savon et de l’eau brulante (c’est un atelier vraiment propre) pendant là aussi de longues minutes, l’objectif est d’arriver à approcher de la taille finale désirée. On frotte dans le sens où on veut réduire la taille, par exemple en horizontal sur l’ouverture pour&nbsp;resserrer.</li>
  185. <li>On termine en rinçant abondamment le savon et en plongeant la pièce dans une solution vinaigrée pour changer le pH, ce qui fixe le tout et adouci la&nbsp;laine.</li>
  186. <li>(Optionnel) Il est possible de réduire encore <em>a posteriori</em> en remouillant avec du savon MAIS il n’est pas possible de revenir en arrière donc il vaut mieux s’arrêter trop tôt plutôt que trop tard, d’autant que ça rétrécit au&nbsp;séchage.</li>
  187. </ol>
  188. <p>Il y a très peu de pertes dans le processus même si ça prend beaucoup de savon. Le gros intérêt de la technique, c’est que la pièce est vraiment adaptée au support sur laquelle on la feutre+foule (ici mes mains). Il est possible de couper le surplus en bas pour égaliser mais je préfère que ça remonte plus haut sur l’avant-bras. Le résultat est un peu rigide car j’ai privilégié la chaleur (et les erreurs de débutant) mais il est possible de mettre moins de laine. J’arrive néanmoins à tenir un bâton de ski sans&nbsp;forcer.</p>
  189. <figure>
  190. <a href="/static/david/2024/2024-02-13-mitaines-feutrage.jpg"
  191. title="Cliquer pour une version haute résolution">
  192. <img
  193. src="/static/david/2024/2024-02-13-mitaines-feutrage.jpg"
  194. width="3024" height="4032"
  195. srcset="/static/david/2024/2024-02-13-mitaines-feutrage.jpg 3024w, /static/david/2024/2024-02-13-mitaines-feutrage_660x440.jpg 660w, /static/david/2024/2024-02-13-mitaines-feutrage_990x660.jpg 990w, /static/david/2024/2024-02-13-mitaines-feutrage_1320x880.jpg 1320w"
  196. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  197. loading="lazy"
  198. decoding="async"
  199. alt="Les mitaines réalisées qui sèchent verticalement.">
  200. </a>
  201. <figcaption>Le résultat après 4 heures de travail et pas mal d’huile de&nbsp;coude.</figcaption>
  202. </figure>
  203. <p>Anecdote&nbsp;: j’étais le plus jeune et le seul homme, c’était intéressant d’être au sein de cette <em>sororité des aînées</em>, il ne manquait qu’une cheminée pour avoir une soirée d’anecdotes québécoises au coin du&nbsp;feu&nbsp;🤗.</p>
  204. <p>Au retour, après avoir essoré les mitaines pour qu’elles ne gouttent pas trop, j’ai pu les mettre pour qu’elles affrontent leur première tempête de neige improvisée. Même mouillées et dégoulinantes, j’arrivais à garder mes mains au chaud à l’intérieur… ah, la laine&nbsp;&lt;3. J’ai hâte de tester avec avec une sous-couche et/ou une sur-couche, ça tombe bien car les températures redescendent&nbsp;enfin.</p>
  205. <nav>
  206. <p>
  207. <a href="/david/2024/apprentissage/"
  208. title="Liste de tous les articles 2024 associés à cette étiquette"
  209. rel="tag">#apprentissage</a>
  210. <a href="/david/2024/processus/"
  211. title="Liste de tous les articles 2024 associés à cette étiquette"
  212. rel="tag">#processus</a>
  213. <a href="/david/2024/protopie/"
  214. title="Liste de tous les articles 2024 associés à cette étiquette"
  215. rel="tag">#protopie</a>
  216. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  217. </p>
  218. </nav>
  219. <nav>
  220. <p>
  221. <a rel="prev"
  222. href="/david/2024/02/12/"
  223. title="Publication précédente : Renards">← Précédent</a> •
  224. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  225. • <a rel="next"
  226. href="/david/2024/02/14/"
  227. title="Publication suivante : GéoCodage">Suivant →</a>
  228. </p>
  229. </nav>
  230. <form action="/david/recherche/" method="get">
  231. <fieldset>
  232. <legend>Recherche</legend>
  233. <label for="input-search">Termes de votre recherche :</label>
  234. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  235. <input type="submit" value="Chercher">
  236. <p id="indexation-infos">
  237. <small>
  238. Seuls les contenus de ces 8 dernières années sont indexés.
  239. </small>
  240. </p>
  241. </fieldset>
  242. </form>
  243. <aside>
  244. <theme-toggle></theme-toggle>
  245. </aside>
  246. </article>
  247. <hr>
  248. <footer>
  249. <p>
  250. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  251. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  252. <a href="http://larlet.com"
  253. title="Go to my English profile"
  254. data-instant>Pro</a>
  255. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  256. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  257. </p>
  258. <template id="theme-selector">
  259. <form>
  260. <style type="text/css">
  261. fieldset div {
  262. text-align: center;
  263. }
  264. </style>
  265. <fieldset>
  266. <legend>Thème</legend>
  267. <div>
  268. <label>
  269. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  270. Auto
  271. </label>
  272. <label>
  273. <input type="radio" value="dark" name="chosen-color-scheme">
  274. Foncé
  275. </label>
  276. <label>
  277. <input type="radio" value="light" name="chosen-color-scheme">
  278. Clair
  279. </label>
  280. </div>
  281. </fieldset>
  282. </form>
  283. </template>
  284. </footer>
  285. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  286. <script>
  287. class ThemeToggle extends HTMLElement {
  288. constructor() {
  289. super()
  290. const themeSelectorTemplate = document.querySelector('#theme-selector')
  291. const form = themeSelectorTemplate.content.firstElementChild
  292. this.attachShadow({ mode: 'open' })
  293. this.shadowRoot.appendChild(form.cloneNode(true))
  294. }
  295. connectedCallback() {
  296. const form = this.shadowRoot.querySelector('form')
  297. form.addEventListener('change', (e) => {
  298. const chosenColorScheme = e.target.value
  299. localStorage.setItem('theme', chosenColorScheme)
  300. toggleTheme(chosenColorScheme)
  301. })
  302. const selectedTheme = localStorage.getItem('theme')
  303. if (selectedTheme && selectedTheme !== 'undefined') {
  304. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  305. }
  306. }
  307. }
  308. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  309. window.addEventListener('load', () => {
  310. let colorsLayer = undefined
  311. let hasDarkRules = false
  312. for (const styleSheet of Array.from(document.styleSheets)) {
  313. let mediaRules = []
  314. for (const layerRule of styleSheet.cssRules) {
  315. if (!(layerRule instanceof CSSLayerBlockRule)) {
  316. continue
  317. }
  318. if (layerRule.name === 'colors') {
  319. colorsLayer = layerRule
  320. }
  321. for (const cssRule of layerRule.cssRules) {
  322. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  323. continue
  324. }
  325. // WARNING: Safari does not have/supports `conditionText`.
  326. if (cssRule.conditionText) {
  327. if (cssRule.conditionText !== prefersColorSchemeDark) {
  328. continue
  329. }
  330. } else {
  331. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  332. continue
  333. }
  334. }
  335. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  336. }
  337. }
  338. // WARNING: do not try to insert a Rule to a styleSheet you are
  339. // currently iterating on, otherwise the browser will be stuck
  340. // in a infinite loop…
  341. for (const mediaRule of mediaRules) {
  342. // Safari requires the `0` second parameter (even if default).
  343. colorsLayer.insertRule(mediaRule.cssText, 0)
  344. hasDarkRules = true
  345. }
  346. }
  347. if (hasDarkRules) {
  348. if ('customElements' in window && !customElements.get('theme-toggle')) {
  349. customElements.define('theme-toggle', ThemeToggle)
  350. }
  351. }
  352. })
  353. </script>
  354. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  355. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  356. <script>
  357. tippy('[data-tippy]', {
  358. content(reference) {
  359. reference.addEventListener('click', (e) => e.preventDefault())
  360. return `
  361. <h3 lang="fr">
  362. <img src="${reference.dataset.favicon}" loading="lazy">
  363. <a href="${reference.dataset.source}"
  364. >Article sur ${reference.dataset.domain}</a></h3>
  365. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  366. <div class="tippy-links" lang="fr">
  367. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  368. </div>
  369. `
  370. },
  371. allowHTML: true,
  372. interactive: true,
  373. delay: [150, 700],
  374. hideOnClick: false
  375. })
  376. </script>
  377. <script type="module">
  378. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  379. const markObserver = new IntersectionObserver((entries, observer) => {
  380. const computedStyle = getComputedStyle(document.documentElement)
  381. const markBackground = computedStyle.getPropertyValue('--mark-background')
  382. for (const entry of entries) {
  383. if (entry.intersectionRatio === 0) continue
  384. const markElement = entry.target
  385. markElement.style.backgroundColor = 'inherit'
  386. const annotation = annotate(
  387. markElement, {
  388. type: 'highlight',
  389. multiline: true,
  390. color: markBackground,
  391. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  392. animate: false
  393. }
  394. )
  395. annotation.show()
  396. observer.unobserve(markElement)
  397. }
  398. }, {threshold: 1.0})
  399. for (const markElement of document.querySelectorAll('mark')) {
  400. markObserver.observe(markElement)
  401. }
  402. </script>
  403. </body>
  404. </html>