Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  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. Étiquette #évolution
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #évolution">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2024-01-13.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#évolution</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p class="center">
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/#tags-2024"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. </p>
  127. </nav>
  128. <h2>
  129. <a href="/david/2024/01/11/" title="Lien permanent vers cet article">Impact</a> <time datetime="2024-01-11">11 janvier 2024</time>
  130. </h2>
  131. <blockquote lang="en">
  132. <p>If front web developers work closer to the users’ needs and problems, <mark>if they feel more implicated in the user experience,</mark> they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]</p>
  133. <p>Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people’s lives and understanding the impact of what we are&nbsp;creating.</p>
  134. <p><cite><em><a data-link-domain="gericci.me" href="https://gericci.me/we-need-to-talk-about-the-front-web-5.html">Part 5: Clues to Fix the Front Web</a> <a href="/david/cache/2024/40aada3cc8d6897fda5a277c4299c1fd/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
  135. </blockquote>
  136. <p>Même si je m’émeus encore de l’esthétique d’un <em>Web Component</em> ou d’une nouvelle technique CSS, j’essaye d’être plus attentif au fil des ans à l’impact potentiel des bouts de code que j’assemble. C’est là où <a data-link-domain="daverupert.com" href="https://daverupert.com/2022/06/demo-to-demo-loop/">les démo</a> <a href="/david/cache/2024/9f8c0e75066c1882a3b4ce084e3223ed/" title="Copie locale au 2024-01-09">[archive]</a> prennent tout leur sens pour vérifier la pertinence de ce qui a été produit. Se libérer de l’égoïsme technique pour aller vers le soin porté aux utilisateur·ices, essayer de comprendre leurs besoins, synthétiser, proposer, se tromper, recommencer. Dans une spirale d’essais-erreurs, on se rapproche d’un centre enviable où les contraintes techniques sont minimisées et les besoins proches d’être comblés. Chaque partie ayant un petit peu appris sur l’autre au cours de ce bout de chemin&nbsp;commun.</p>
  137. <p><strong>Une carrière est la cartographie de ces expériences.</strong> Savoir identifier les <em>optima</em> locaux qui ont pu procurer de la joie ainsi que les lieux de convergence où l’on aime bien aller car il y a le bon dosage effort / récompense. Apprendre à reconnaître les sentiers hasardeux où l’on a déjà laissé des plumes et reconnaître aussi qu’un contexte et des personnes peuvent&nbsp;changer.</p>
  138. <p>Admettre que l’on a soi-même changé tout au long de ce&nbsp;cheminement.</p>
  139. <blockquote lang="en">
  140. <p>At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP&nbsp;request.</p>
  141. <p>No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re&nbsp;selling.</p>
  142. <p><mark>Customers want software that delivers problem-solving <em>impact</em>.</mark> And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.</p>
  143. <p><cite><em><a data-link-domain="hoho.com" href="https://hoho.com/posts/your-stack-is-not-the-product/">Your tech stack is not the product</a> <a href="/david/cache/2024/877b1e29328f6ad1b6fef26d7407ec5f/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
  144. </blockquote>
  145. <hr />
  146. <blockquote lang="en">
  147. <p>You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix&nbsp;them.</p>
  148. <p><cite><em><a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size">Designing better target sizes</a> <a href="/david/cache/2024/c98206d38897264005bcd5b453d032b1/" title="Copie locale au 2024-01-10">[archive]</a></em></cite></p>
  149. </blockquote>
  150. <p>Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses <em>paddings</em> mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un <code>:after</code> pour ça <a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size#mobile-menu">lorsqu’il s’agit d’icônes</a>&nbsp;notamment&nbsp;:</p>
  151. <pre><code>.search__filter:after {
  152. content: &quot;&quot;;
  153. position: absolute;
  154. inset: 0;
  155. z-index: -1;
  156. transform: scale(2);
  157. }
  158. </code></pre>
  159. <p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</p>
  160. <nav>
  161. <p>
  162. <a href="/david/2024/evolution/"
  163. title="Liste de tous les articles 2024 associés à cette étiquette"
  164. rel="tag">#évolution</a>
  165. <a href="/david/2024/technique/"
  166. title="Liste de tous les articles 2024 associés à cette étiquette"
  167. rel="tag">#technique</a>
  168. <a href="/david/2024/web/"
  169. title="Liste de tous les articles 2024 associés à cette étiquette"
  170. rel="tag">#web</a>
  171. <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
  172. </p>
  173. </nav>
  174. <hr>
  175. </article>
  176. <hr>
  177. <footer>
  178. <p>
  179. <nobr>
  180. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  181. </nobr>
  182. <nobr>
  183. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  184. </nobr>
  185. <nobr>
  186. <a href="http://larlet.com"
  187. title="Go to my English profile"
  188. data-instant>Pro</a>
  189. </nobr>
  190. <nobr>
  191. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  192. </nobr>
  193. <nobr>
  194. <abbr class="nowrap"
  195. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  196. </nobr>
  197. </p>
  198. <template id="theme-selector">
  199. <form>
  200. <style type="text/css">
  201. fieldset {
  202. text-align: center;
  203. }
  204. </style>
  205. <fieldset>
  206. <legend>Thème
  207. </legend>
  208. <label>
  209. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  210. Auto
  211. </label>
  212. <label>
  213. <input type="radio" value="dark" name="chosen-color-scheme">
  214. Foncé
  215. </label>
  216. <label>
  217. <input type="radio" value="light" name="chosen-color-scheme">
  218. Clair
  219. </label>
  220. </fieldset>
  221. </form>
  222. </template>
  223. </footer>
  224. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  225. <script>
  226. class ThemeToggle extends HTMLElement {
  227. constructor() {
  228. super()
  229. const themeSelectorTemplate = document.querySelector('#theme-selector')
  230. const form = themeSelectorTemplate.content.firstElementChild
  231. this.attachShadow({ mode: 'open' })
  232. this.shadowRoot.appendChild(form.cloneNode(true))
  233. }
  234. connectedCallback() {
  235. const form = this.shadowRoot.querySelector('form')
  236. form.addEventListener('change', (e) => {
  237. const chosenColorScheme = e.target.value
  238. localStorage.setItem('theme', chosenColorScheme)
  239. toggleTheme(chosenColorScheme)
  240. })
  241. const selectedTheme = localStorage.getItem('theme')
  242. if (selectedTheme && selectedTheme !== 'undefined') {
  243. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  244. }
  245. }
  246. }
  247. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  248. window.addEventListener('load', () => {
  249. let colorsLayer = undefined
  250. let hasDarkRules = false
  251. for (const styleSheet of Array.from(document.styleSheets)) {
  252. let mediaRules = []
  253. for (const layerRule of styleSheet.cssRules) {
  254. if (!(layerRule instanceof CSSLayerBlockRule)) {
  255. continue
  256. }
  257. if (layerRule.name === 'colors') {
  258. colorsLayer = layerRule
  259. }
  260. for (const cssRule of layerRule.cssRules) {
  261. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  262. continue
  263. }
  264. // WARNING: Safari does not have/supports `conditionText`.
  265. if (cssRule.conditionText) {
  266. if (cssRule.conditionText !== prefersColorSchemeDark) {
  267. continue
  268. }
  269. } else {
  270. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  271. continue
  272. }
  273. }
  274. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  275. }
  276. }
  277. // WARNING: do not try to insert a Rule to a styleSheet you are
  278. // currently iterating on, otherwise the browser will be stuck
  279. // in a infinite loop…
  280. for (const mediaRule of mediaRules) {
  281. // Safari requires the `0` second parameter (even if default).
  282. colorsLayer.insertRule(mediaRule.cssText, 0)
  283. hasDarkRules = true
  284. }
  285. }
  286. if (hasDarkRules) {
  287. if ('customElements' in window && !customElements.get('theme-toggle')) {
  288. customElements.define('theme-toggle', ThemeToggle)
  289. }
  290. }
  291. })
  292. </script>
  293. </body>
  294. </html>