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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
  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. In·directions
  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-07.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="Any time you have a design that references the same value across multiple pieces of UI, I’d suggest that is an opportunity for abstracting that value into a name that better describes the intention of the value in the design.">
  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>In·directions</h1>
  136. <p>Le <time datetime="2024-02-18">18 février 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/02/17/"
  143. title="Publication précédente : Quotidien">← 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/19/"
  150. title="Publication suivante : Injection">Suivant →</a>
  151. </p>
  152. </nav>
  153. <blockquote lang="en">
  154. <p>Any time you have a design that references the same value across multiple pieces of UI, I’d suggest that is an opportunity for <mark>abstracting</mark> that value into a name that better describes the intention of the value in the&nbsp;design.</p>
  155. <p><cite><em><a data-link-domain="jwdallas.com" href="https://jwdallas.com/posts/namingcssvariables/" hreflang="en"
  156. title="Consultation de l’article (anglais)">Naming Variables In CSS</a>
  157. <a href="/david/cache/2024/d0ffe1891c332b6fc6e7d7826d8489da/" hreflang="en"
  158. data-tippy data-description="Some collected thoughts around how to name variables in CSS. Ideas, conventions, and some do's and don't for consideration."
  159. data-source="https://jwdallas.com/posts/namingcssvariables/"
  160. data-date="2024-02-18"
  161. data-favicon="https://jwdallas.com/icons/favicon.ico"
  162. data-domain="jwdallas.com"
  163. ><svg xmlns="http://www.w3.org/2000/svg"
  164. width="24" height="24" viewBox="0 0 24 24" fill="none"
  165. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  166. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  167. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  168. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  169. </svg>
  170. <span class="sr-only">[archive]</span></a></em></cite></p>
  171. </blockquote>
  172. <p>Je me demande souvent quel est le bon niveau hiérarchique au sein des CSS modernes. L’approche constatée actuelle semble être de mettre des variables par couleur (par exemple) puis ensuite définir des variables intermédiaires pour leur donner un sens pour un contexte&nbsp;donné.</p>
  173. <pre><code>:root {
  174. --umap-color-darkBlue: #263B58;
  175. }
  176. button {
  177. --color-primary: var(--umap-color-darkBlue);
  178. }
  179. button.primary {
  180. background-color: var(--color-primary);
  181. }
  182. </code></pre>
  183. <p>Il s’agit ici de partir d’un exemple simpliste mais concret. J’imagine qu’il y a autant de dévelopeur·euse que de façon d’écrire ces 3&nbsp;seules déclarations&nbsp;:). Pourquoi <code>:root</code> et pas <code>html</code>&#8239;? Est-ce qu’il faut définir les couleurs primaires sur le <code>button</code> ou sur <code>form, nav</code>&#8239;? Ou faire sauter cet intermédiaire&#8239;? Est-ce qu’il faut <code>button.primary</code>, <code>.primary</code>, <code>.button-primary</code>, <code>.button.button-primary</code>&#8239;? Etc, etc.</p>
  184. <p>Et je ne mentionne même pas les solutions à partir de <code>:host</code> / <code>:host-context()</code> ou <code>:scope</code> qui sont encore d’autres façons de faire qui sont peut-être amenées à devenir&nbsp;populaires.</p>
  185. <p>Venant d’un langage dont l’<a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Zen_of_Python">un des mantras</a> est <q lang="en">There should be one-- and preferably only one --obvious way to do it.</q>, il est plus difficile de se retrouver devant une telle… flexibilité&#8239;? Lorsqu’on envisage un commun sur ces 10&nbsp;prochaines années, comment trouver une stratégie maintenable qui s’inscrira dans la durée avec&nbsp;enthousiasme&#8239;?</p>
  186. <p>Ce qui est certain, c’est que l’approche de Tailwind ne me convient pas du&nbsp;tout.</p>
  187. <blockquote lang="en">
  188. <p>To keep up with the ever-evolving CSS standard Tailwind introduced another set of language literals. Over the years Tailwind has grown from a simple set of atoms to a <mark>vendor-specific</mark> language with expressions, operators, and method&nbsp;calls.</p>
  189. <p><cite><em><a data-link-domain="nuejs.org" href="https://nuejs.org/blog/tailwind-misinformation-engine/" hreflang=""
  190. title="Consultation de l’article">Tailwind marketing and misinformation engine</a>
  191. <a href="/david/cache/2024/44c12c8fbb59c7239f0f3b04bae189b7/" hreflang=""
  192. data-tippy data-description="The origins of Tailwind and how it is framed against semantic CSS"
  193. data-source="https://nuejs.org/blog/tailwind-misinformation-engine/"
  194. data-date="2024-02-18"
  195. data-favicon="https://nuejs.org/img/favicon.svg"
  196. data-domain="nuejs.org"
  197. ><svg xmlns="http://www.w3.org/2000/svg"
  198. width="24" height="24" viewBox="0 0 24 24" fill="none"
  199. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  200. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  201. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  202. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  203. </svg>
  204. <span class="sr-only">[archive]</span></a></em></cite></p>
  205. </blockquote>
  206. <a href="#hr-77" title="Lien vers cette section de la page"><hr id="hr-77" /></a>
  207. <blockquote lang="en">
  208. <p><em>File over app</em> is a philosophy: if you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. <mark>Use tools that give you this&nbsp;freedom.</mark></p>
  209. <p><em>File over app</em> is an appeal to tool makers: accept that all software is ephemeral, and give people ownership over their&nbsp;data.</p>
  210. <p><cite><em><a data-link-domain="stephango.com" href="https://stephango.com/file-over-app" hreflang="en"
  211. title="Consultation de l’article (anglais)">File over app - Steph Ango</a>
  212. <a href="/david/cache/2024/20d288eb47779c4f1b3f36fb86aa7108/" hreflang="en"
  213. data-tippy data-description="If you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. Use tools that give you..."
  214. data-source="https://stephango.com/file-over-app"
  215. data-date="2024-02-18"
  216. data-favicon="https://stephango.com/icon.svg"
  217. data-domain="stephango.com"
  218. ><svg xmlns="http://www.w3.org/2000/svg"
  219. width="24" height="24" viewBox="0 0 24 24" fill="none"
  220. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  221. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  222. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  223. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  224. </svg>
  225. <span class="sr-only">[archive]</span></a></em></cite></p>
  226. </blockquote>
  227. <a href="#hr-78" title="Lien vers cette section de la page"><hr id="hr-78" /></a>
  228. <blockquote lang="en">
  229. <p>Learn about the systems that already exist, and build on them rather than around them. If an existing system doesn’t do what you want, maybe the problem is in the design of your system, not that&nbsp;one.</p>
  230. <p>If you do build a new component, make sure it’s of general utility. Don’t build infrastructure that solves only the problems of your own&nbsp;team.</p>
  231. <p>It’s easy to build complexity. In the rush to launch, it’s quicker and easier to code than to redesign. <mark>But the costs accumulate and you lose in the long&nbsp;run.</mark></p>
  232. <p><cite><em><a data-link-domain="commandcenter.blogspot.com" href="https://commandcenter.blogspot.com/2023/12/simplicity.html" hreflang="en"
  233. title="Consultation de l’article (anglais)">command center: Simplicity</a>
  234. <a href="/david/cache/2024/6b26bff7f4772cf8fb78878ff4f9594f/" hreflang="en"
  235. data-tippy data-description="In May 2009, Google hosted an internal Design Wizardry panel, with talks by Jeff Dean,  Mike Burrows, Paul Haahr, Alfred Spector, Bill Cou..."
  236. data-source="https://commandcenter.blogspot.com/2023/12/simplicity.html"
  237. data-date="2024-02-18"
  238. data-favicon="https://commandcenter.blogspot.com/favicon.ico"
  239. data-domain="commandcenter.blogspot.com"
  240. ><svg xmlns="http://www.w3.org/2000/svg"
  241. width="24" height="24" viewBox="0 0 24 24" fill="none"
  242. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  243. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  244. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  245. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  246. </svg>
  247. <span class="sr-only">[archive]</span></a></em></cite></p>
  248. </blockquote>
  249. <nav>
  250. <p>
  251. <a href="/david/2024/commun/"
  252. title="Liste de tous les articles 2024 associés à cette étiquette"
  253. rel="tag">#commun</a>
  254. <a href="/david/2024/dependance/"
  255. title="Liste de tous les articles 2024 associés à cette étiquette"
  256. rel="tag">#dépendance</a>
  257. <a href="/david/2024/technique/"
  258. title="Liste de tous les articles 2024 associés à cette étiquette"
  259. rel="tag">#technique</a>
  260. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  261. </p>
  262. </nav>
  263. <nav>
  264. <p>
  265. <a rel="prev"
  266. href="/david/2024/02/17/"
  267. title="Publication précédente : Quotidien">← Précédent</a> •
  268. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  269. • <a rel="next"
  270. href="/david/2024/02/19/"
  271. title="Publication suivante : Injection">Suivant →</a>
  272. </p>
  273. </nav>
  274. <form action="/david/recherche/" method="get">
  275. <fieldset>
  276. <legend>Recherche</legend>
  277. <label for="input-search">Termes de votre recherche :</label>
  278. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  279. <input type="submit" value="Chercher">
  280. <p id="indexation-infos">
  281. <small>
  282. Seuls les contenus de ces 8 dernières années sont indexés.
  283. </small>
  284. </p>
  285. </fieldset>
  286. </form>
  287. <aside>
  288. <theme-toggle></theme-toggle>
  289. </aside>
  290. </article>
  291. <hr>
  292. <footer>
  293. <p>
  294. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  295. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  296. <a href="http://larlet.com"
  297. title="Go to my English profile"
  298. data-instant>Pro</a>
  299. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  300. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  301. </p>
  302. <template id="theme-selector">
  303. <form>
  304. <style type="text/css">
  305. fieldset div {
  306. text-align: center;
  307. }
  308. </style>
  309. <fieldset>
  310. <legend>Thème</legend>
  311. <div>
  312. <label>
  313. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  314. Auto
  315. </label>
  316. <label>
  317. <input type="radio" value="dark" name="chosen-color-scheme">
  318. Foncé
  319. </label>
  320. <label>
  321. <input type="radio" value="light" name="chosen-color-scheme">
  322. Clair
  323. </label>
  324. </div>
  325. </fieldset>
  326. </form>
  327. </template>
  328. </footer>
  329. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  330. <script>
  331. class ThemeToggle extends HTMLElement {
  332. constructor() {
  333. super()
  334. const themeSelectorTemplate = document.querySelector('#theme-selector')
  335. const form = themeSelectorTemplate.content.firstElementChild
  336. this.attachShadow({ mode: 'open' })
  337. this.shadowRoot.appendChild(form.cloneNode(true))
  338. }
  339. connectedCallback() {
  340. const form = this.shadowRoot.querySelector('form')
  341. form.addEventListener('change', (e) => {
  342. const chosenColorScheme = e.target.value
  343. localStorage.setItem('theme', chosenColorScheme)
  344. toggleTheme(chosenColorScheme)
  345. })
  346. const selectedTheme = localStorage.getItem('theme')
  347. if (selectedTheme && selectedTheme !== 'undefined') {
  348. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  349. }
  350. }
  351. }
  352. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  353. window.addEventListener('load', () => {
  354. let colorsLayer = undefined
  355. let hasDarkRules = false
  356. for (const styleSheet of Array.from(document.styleSheets)) {
  357. let mediaRules = []
  358. for (const layerRule of styleSheet.cssRules) {
  359. if (!(layerRule instanceof CSSLayerBlockRule)) {
  360. continue
  361. }
  362. if (layerRule.name === 'colors') {
  363. colorsLayer = layerRule
  364. }
  365. for (const cssRule of layerRule.cssRules) {
  366. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  367. continue
  368. }
  369. // WARNING: Safari does not have/supports `conditionText`.
  370. if (cssRule.conditionText) {
  371. if (cssRule.conditionText !== prefersColorSchemeDark) {
  372. continue
  373. }
  374. } else {
  375. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  376. continue
  377. }
  378. }
  379. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  380. }
  381. }
  382. // WARNING: do not try to insert a Rule to a styleSheet you are
  383. // currently iterating on, otherwise the browser will be stuck
  384. // in a infinite loop…
  385. for (const mediaRule of mediaRules) {
  386. // Safari requires the `0` second parameter (even if default).
  387. colorsLayer.insertRule(mediaRule.cssText, 0)
  388. hasDarkRules = true
  389. }
  390. }
  391. if (hasDarkRules) {
  392. if ('customElements' in window && !customElements.get('theme-toggle')) {
  393. customElements.define('theme-toggle', ThemeToggle)
  394. }
  395. }
  396. })
  397. </script>
  398. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  399. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  400. <script>
  401. tippy('[data-tippy]', {
  402. content(reference) {
  403. reference.addEventListener('click', (e) => e.preventDefault())
  404. return `
  405. <h3 lang="fr">
  406. <img src="${reference.dataset.favicon}" loading="lazy">
  407. <a href="${reference.dataset.source}"
  408. >Article sur ${reference.dataset.domain}</a></h3>
  409. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  410. <div class="tippy-links" lang="fr">
  411. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  412. </div>
  413. `
  414. },
  415. allowHTML: true,
  416. interactive: true,
  417. delay: [150, 700],
  418. hideOnClick: false
  419. })
  420. </script>
  421. </body>
  422. </html>