28 muutettua tiedostoa jossa 133 lisäystä ja 133 poistoa
+ 1
- 1
david/2024/01/01/index.html
Näytä tiedosto
| @@ -155,7 +155,7 @@ Pb : mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco | |||
| <li>Conséquences psychiques, physiques, sociales,…</li> | |||
| </ul> | |||
| <p>Bon Dry J. pour celleux qui le font ! Moi j’en suis !</p> | |||
| <p><cite><a href="https://framapiaf.org/@Air/111681709094993435" data-link-domain="framapiaf.org">@Air@framapiaf.org</a></cite></p> | |||
| <p><cite><a data-link-domain="framapiaf.org" href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p> | |||
| </blockquote> | |||
| <p>Dans mon entourage, de plus en plus de personnes que j’estime ne boivent pas d’alcool, de plus en plus de personnes qui vieillissent en deviennent dépendantes. Je suis davantage attiré par la première option… et pas pour un seul mois.</p> | |||
| <p>Je me sens prêt, on verra bien où cela me mène.</p> | |||
+ 8
- 8
david/2024/01/02/index.html
Näytä tiedosto
| @@ -139,20 +139,20 @@ | |||
| <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses : des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du temps.</p> | |||
| <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em> modernes :</p> | |||
| <ul> | |||
| <li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy Bell ;</li> | |||
| <li><a href="https://www.joshwcomeau.com/css/custom-css-reset/" data-link-domain="joshwcomeau.com">My Custom CSS Reset</a> par Josh W. Comeau ;</li> | |||
| <li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam Suzanne ;</li> | |||
| <li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy Thomas.</li> | |||
| <li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy Bell ;</li> | |||
| <li><a data-link-domain="joshwcomeau.com" href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau ;</li> | |||
| <li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam Suzanne ;</li> | |||
| <li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy Thomas.</li> | |||
| </ul> | |||
| <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.</p> | |||
| <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.</p> | |||
| <p>Je finis par tout jeter / ré-interroger et je m’en sors avec 6 règles.</p> | |||
| <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>] — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu" data-link-domain="code.larlet.fr">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.</p> | |||
| <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>] — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.</p> | |||
| <p>Je suis satisfait de mon résultat très minimaliste du jour.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des rêves.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train" data-link-domain="la-grange.net">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2023/07/10/notes-train">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| </blockquote> | |||
| <p>🧡</p> | |||
| <hr /> | |||
| @@ -171,7 +171,7 @@ | |||
| </a> | |||
| <figcaption>Capture d’écran de l’essai.</figcaption> | |||
| </figure> | |||
| <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la poubelle.</p> | |||
| <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la poubelle.</p> | |||
| <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi ? Oui, et ça ouvre des perspectives d’agencements photographiques à explorer…</p> | |||
+ 2
- 2
david/2024/01/03/index.html
Näytä tiedosto
| @@ -136,8 +136,8 @@ | |||
| </p> | |||
| </nav> | |||
| <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.</p> | |||
| <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre avec.</p> | |||
| <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.</p> | |||
| <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre avec.</p> | |||
| <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes sections.</p> | |||
| <p>Je m’amuse comme un petit fou même si la CSS fait subitement 350 lignes.</p> | |||
| <hr /> | |||
+ 1
- 1
david/2024/01/04/index.html
Näytä tiedosto
| @@ -143,7 +143,7 @@ | |||
| </blockquote> | |||
| <p>Dans un chalet pour quelques jours. Des randonnées à trois générations. Toujours ces questionnements autour de la propriété. Concilier tous les besoins, accepter de changer de vie, ne pas savoir si on serait finalement entourés d’une culture qui ne nous correspond pas (et qui ne nous attire pas non plus). Trouver le bon tempo.</p> | |||
| <hr /> | |||
| <p>Je me demande s’il serait pertinent <a href="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/" data-link-domain="blog.stephaniestimac.com">d’utiliser <code>text-wrap</code></a> [<a href="/david/cache/2024/b31ba18e3de1fc479b79f1885043026a/" title="Copie locale au 2024-01-07">archive</a>] sachant que mes titres ne font qu’un seul mot et que je m’occupe déjà des veuves / orphelines typographiques avec <a data-link-domain="git.larlet.fr" href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/branch/master/typography.py">un script Python</a> que l’on a fait avec <a href="https://ronan.amicel.net/" data-link-domain="ronan.amicel.net">Ronan</a> à l’époque <a href="/david/2020/05/26/">de MesConseilsCovid / Covidoudou</a>.</p> | |||
| <p>Je me demande s’il serait pertinent <a data-link-domain="blog.stephaniestimac.com" href="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/">d’utiliser <code>text-wrap</code></a> [<a href="/david/cache/2024/b31ba18e3de1fc479b79f1885043026a/" title="Copie locale au 2024-01-07">archive</a>] sachant que mes titres ne font qu’un seul mot et que je m’occupe déjà des veuves / orphelines typographiques avec <a data-link-domain="git.larlet.fr" href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/branch/master/typography.py">un script Python</a> que l’on a fait avec <a data-link-domain="ronan.amicel.net" href="https://ronan.amicel.net/">Ronan</a> à l’époque <a href="/david/2020/05/26/">de MesConseilsCovid / Covidoudou</a>.</p> | |||
| <p>Je tente de rendre les citations explicites car on m’a déjà fait le retour de ne pas tout de suite comprendre une publication qui commence par une citation : <q>Ah je croyais que c’était de toi !</q>.</p> | |||
| <pre><code>blockquote::before { | |||
| content: "citation"; | |||
+ 3
- 3
david/2024/01/05/index.html
Näytä tiedosto
| @@ -143,7 +143,7 @@ | |||
| <p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des « propositions » au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous : « Qu’est-ce qui pourrait améliorer la situation ? Que pourrais-je proposer ? » Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une « solution » parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non négative.</p> | |||
| <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre « Changez votre langage, changez votre culture »</cite></p> | |||
| </blockquote> | |||
| <p>On pourrait y voir de la <a href="https://fr.wikipedia.org/wiki/Novlangue" data-link-domain="fr.wikipedia.org">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer — peut-être temporairement — une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces pratiques.</p> | |||
| <p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer — peut-être temporairement — une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces pratiques.</p> | |||
| <p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a> ? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà dé·fini.</p> | |||
| <blockquote> | |||
| @@ -152,10 +152,10 @@ | |||
| <p><cite><em>Ibid.</em></cite></p> | |||
| </blockquote> | |||
| <hr /> | |||
| <p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a href="https://mamot.fr/@nhoizey/111697128068526484" data-link-domain="mamot.fr">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions ?) en commun à ce sujet.</p> | |||
| <p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr" href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions ?) en commun à ce sujet.</p> | |||
| <p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte 🧑🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi ? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme ça.</strong></p> | |||
| <p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les couleurs.</p> | |||
| <p>Plus tard, <a href="https://mamot.fr/@emmanuelc/111700432836997597" data-link-domain="mamot.fr">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller ? Oui, mais il faudra toujours finir par le décortiquer.</p> | |||
| <p>Plus tard, <a data-link-domain="mamot.fr" href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller ? Oui, mais il faudra toujours finir par le décortiquer.</p> | |||
| <p>La CSS progresse, 426 lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette idée.</p> | |||
| <hr /> | |||
| <p>Randonnée de 8 km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances — qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons s’ouvrent.</p> | |||
+ 1
- 1
david/2024/01/06/index.html
Näytä tiedosto
| @@ -168,7 +168,7 @@ | |||
| Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir entièrement</p> | |||
| <p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est fun</p> | |||
| <p>« ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça va »</p> | |||
| <p><cite><a href="https://pipou.academy/@tiphaine/111629699683457788" data-link-domain="pipou.academy">@tiphaine@pipou.academy</a></cite></p> | |||
| <p><cite><a data-link-domain="pipou.academy" href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p> | |||
| </blockquote> | |||
+ 8
- 8
david/2024/01/07/index.html
Näytä tiedosto
| @@ -139,18 +139,18 @@ | |||
| <blockquote> | |||
| <p>Plus que 3 jours pour décider de l’usage de vos #impôts en donnant à des #assos !</p> | |||
| <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé ! 🤑💞</p> | |||
| <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé ! 🤑💞</p> | |||
| <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark> […]</p> | |||
| <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p> | |||
| <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p> | |||
| </blockquote> | |||
| <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre personnel.</p> | |||
| <p>Une forme d’impôt volontaire qui ne termine pas / <a title="Dryear(s)" href="/david/2024/01/01/">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p> | |||
| <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p> | |||
| <hr /> | |||
| <p>Pensée (genrée) du jour : un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la cuisine.</p> | |||
| <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine déguisée.</p> | |||
| <hr /> | |||
| <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse : il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de pratiques !</p> | |||
| <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/" data-link-domain="ricaud.me">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le but !).</p> | |||
| <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse : il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de pratiques !</p> | |||
| <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a data-link-domain="ricaud.me" href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le but !).</p> | |||
| <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de thème 😅.</p> | |||
| <p><em>Bientôt 500 lignes de CSS.</em></p> | |||
| <hr /> | |||
| @@ -158,7 +158,7 @@ | |||
| <blockquote> | |||
| <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p> | |||
| <p>Je suis impressionné.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche" data-link-domain="la-grange.net">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| </blockquote> | |||
| <p>Ce titre :)</p> | |||
| <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2 minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3 ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses inspirantes.</p> | |||
| @@ -167,10 +167,10 @@ | |||
| <blockquote lang="en"> | |||
| <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any more.</mark></p> | |||
| <p>We are primarily in the business of search and we’d like to stay focused on that.</p> | |||
| <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à « Reconsider your partnership with Brave »</em></cite></p> | |||
| <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à « Reconsider your partnership with Brave »</em></cite></p> | |||
| </blockquote> | |||
| <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez terrible.</p> | |||
| <p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy" data-link-domain="theverge.com">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle cryptonite.</p> | |||
| <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle cryptonite.</p> | |||
| <nav> | |||
+ 5
- 5
david/2024/01/08/index.html
Näytä tiedosto
| @@ -136,7 +136,7 @@ | |||
| </p> | |||
| </nav> | |||
| <p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a href="https://mistune.lepture.com/en/latest/" data-link-domain="mistune.lepture.com">mistune</a> et je m’en sers ensuite en CSS pour l’afficher dynamiquement :</p> | |||
| <p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/">mistune</a> et je m’en sers ensuite en CSS pour l’afficher dynamiquement :</p> | |||
| <pre><code>a[data-link-domain]::after { | |||
| content: " [" attr(data-link-domain) "]"; | |||
| font-size: smaller; | |||
| @@ -164,21 +164,21 @@ a::before { | |||
| } | |||
| </code></pre> | |||
| <p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience / accessibilité.</p> | |||
| <p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus tard.</p> | |||
| <p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus tard.</p> | |||
| <p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la durée.</p> | |||
| <p>Chaque lien distant prend une longueur non négligeable suite à ces deux ajouts 🤔.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit blog”.</p> | |||
| <p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p> | |||
| <p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p> | |||
| <blockquote lang="en"> | |||
| <p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this too).</p> | |||
| <p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy change”.</p> | |||
| <p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>Note : cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes articles.</p> | |||
| <hr /> | |||
+ 4
- 4
david/2024/01/09/index.html
Näytä tiedosto
| @@ -133,22 +133,22 @@ | |||
| </nav> | |||
| <p>Avec les amis, on profite des premières chutes de neige sur Montréal pour aller s’amuser sur le Mont Royal et vérifier que les skis de rando sont encore en bon état. Cinq minutes avant, je tirais l’enfant avec son baudrier en mode remontée musculaire, en pleine forme. Une descente entre les arbres même pas tant engagée et au moment de rejoindre le groupe, légère perte de contrôle dans un endroit très boisé. Mon ski se coince entre deux arbres assez fins mais suffisamment solides pour que ma cheville doive tourner dans le mauvais sens vu que mon corps a choisi de continuer sa course. <em>Ouille.</em></p> | |||
| <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a title="Objectif" href="/david/2024/01/06/">défi sportif</a>…</p> | |||
| <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a href="/david/2024/01/06/" title="Objectif">défi sportif</a>…</p> | |||
| <p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2 semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5 km à skis si j’en prends suffisamment soin d’ici là 🤞.</p> | |||
| <p>Ce soir, j’ai besoin d’y croire.</p> | |||
| <hr /> | |||
| <p>Copsaé publie un <a href="https://www.copsae.fr/" data-link-domain="copsae.fr">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a href="https://access42.net/" data-link-domain="access42.net">le sien</a>. J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples.</p> | |||
| <p>Copsaé publie un <a data-link-domain="copsae.fr" href="https://www.copsae.fr/">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a data-link-domain="access42.net" href="https://access42.net/">le sien</a>. Ne pas oublier <a data-link-domain="koena.net" href="https://koena.net/">Koena</a> aussi ! J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples.</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>In short, building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free. Leaning on those style hooks in your CSS selectors lets you reduce the number of moving parts in your site or application, and it can prevent accessibility bugs from creeping in down the road.</p> | |||
| <p><cite><em><a href="https://benmyers.dev/blog/semantic-selectors/" data-link-domain="benmyers.dev">Style with Stateful, Semantic Selectors</a> [<a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="benmyers.dev" href="https://benmyers.dev/blog/semantic-selectors/">Style with Stateful, Semantic Selectors</a> [<a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>C’est ce que j’essaye de faire depuis plusieurs années déjà et non seulement ça me permet d’améliorer le couple sémantique HTML/CSS mais ça rend mon JS plus résilient aussi !</p> | |||
| <blockquote lang="en"> | |||
| <p>Recently I decided to stop using the word <em>semantics</em>. Instead I talk about the <abbr title="User eXperience">UX</abbr> of <abbr title="HyperText Markup Language">HTML</abbr>. And all of a sudden my students are not allergic to <abbr>HTML</abbr> anymore but really interested. Instead of explaining the meaning of a certain element, I show them <em>what it does</em>. So we look at <em>what happens</em> when you add a label to an input: The input and the label now form a pair. You can now click on the label to interact with a checkbox. The label will be read out loud when you focus on an input with a screenreader. When you hover over a <em>label</em>, the hover state of the connected <em>input</em> is shown. My students <em>love</em> stuff like that. They care about <abbr>UX</abbr>.</p> | |||
| <p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/">The UX of HTML</a> [<a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/">The UX of HTML</a> [<a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
+ 1
- 1
david/2024/_sources/2024-01-09 - Blessure.md
Näytä tiedosto
| @@ -10,7 +10,7 @@ Ce soir, j’ai besoin d’y croire. | |||
| --- | |||
| Copsaé publie un [nouveau site web](https://www.copsae.fr/) qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour [le sien](https://access42.net/). J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples. | |||
| Copsaé publie un [nouveau site web](https://www.copsae.fr/) qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour [le sien](https://access42.net/). Ne pas oublier [Koena](https://koena.net/) aussi ! J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples. | |||
| --- | |||
+ 4
- 4
david/2024/accessibilite/index.html
Näytä tiedosto
| @@ -141,22 +141,22 @@ | |||
| <p>Avec les amis, on profite des premières chutes de neige sur Montréal pour aller s’amuser sur le Mont Royal et vérifier que les skis de rando sont encore en bon état. Cinq minutes avant, je tirais l’enfant avec son baudrier en mode remontée musculaire, en pleine forme. Une descente entre les arbres même pas tant engagée et au moment de rejoindre le groupe, légère perte de contrôle dans un endroit très boisé. Mon ski se coince entre deux arbres assez fins mais suffisamment solides pour que ma cheville doive tourner dans le mauvais sens vu que mon corps a choisi de continuer sa course. <em>Ouille.</em></p> | |||
| <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a title="Objectif" href="/david/2024/01/06/">défi sportif</a>…</p> | |||
| <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a href="/david/2024/01/06/" title="Objectif">défi sportif</a>…</p> | |||
| <p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2 semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5 km à skis si j’en prends suffisamment soin d’ici là 🤞.</p> | |||
| <p>Ce soir, j’ai besoin d’y croire.</p> | |||
| <hr /> | |||
| <p>Copsaé publie un <a href="https://www.copsae.fr/" data-link-domain="copsae.fr">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a href="https://access42.net/" data-link-domain="access42.net">le sien</a>. J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples.</p> | |||
| <p>Copsaé publie un <a data-link-domain="copsae.fr" href="https://www.copsae.fr/">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a data-link-domain="access42.net" href="https://access42.net/">le sien</a>. Ne pas oublier <a data-link-domain="koena.net" href="https://koena.net/">Koena</a> aussi ! J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples.</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>In short, building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free. Leaning on those style hooks in your CSS selectors lets you reduce the number of moving parts in your site or application, and it can prevent accessibility bugs from creeping in down the road.</p> | |||
| <p><cite><em><a href="https://benmyers.dev/blog/semantic-selectors/" data-link-domain="benmyers.dev">Style with Stateful, Semantic Selectors</a> [<a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="benmyers.dev" href="https://benmyers.dev/blog/semantic-selectors/">Style with Stateful, Semantic Selectors</a> [<a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>C’est ce que j’essaye de faire depuis plusieurs années déjà et non seulement ça me permet d’améliorer le couple sémantique HTML/CSS mais ça rend mon JS plus résilient aussi !</p> | |||
| <blockquote lang="en"> | |||
| <p>Recently I decided to stop using the word <em>semantics</em>. Instead I talk about the <abbr title="User eXperience">UX</abbr> of <abbr title="HyperText Markup Language">HTML</abbr>. And all of a sudden my students are not allergic to <abbr>HTML</abbr> anymore but really interested. Instead of explaining the meaning of a certain element, I show them <em>what it does</em>. So we look at <em>what happens</em> when you add a label to an input: The input and the label now form a pair. You can now click on the label to interact with a checkbox. The label will be read out loud when you focus on an input with a screenreader. When you hover over a <em>label</em>, the hover state of the connected <em>input</em> is shown. My students <em>love</em> stuff like that. They care about <abbr>UX</abbr>.</p> | |||
| <p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/">The UX of HTML</a> [<a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/">The UX of HTML</a> [<a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
+ 2
- 2
david/2024/accompagnement/index.html
Näytä tiedosto
| @@ -140,8 +140,8 @@ | |||
| </h2> | |||
| <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.</p> | |||
| <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre avec.</p> | |||
| <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.</p> | |||
| <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre avec.</p> | |||
| <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes sections.</p> | |||
| <p>Je m’amuse comme un petit fou même si la CSS fait subitement 350 lignes.</p> | |||
| <hr /> | |||
+ 2
- 2
david/2024/addiction/index.html
Näytä tiedosto
| @@ -172,7 +172,7 @@ | |||
| Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir entièrement</p> | |||
| <p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est fun</p> | |||
| <p>« ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça va »</p> | |||
| <p><cite><a href="https://pipou.academy/@tiphaine/111629699683457788" data-link-domain="pipou.academy">@tiphaine@pipou.academy</a></cite></p> | |||
| <p><cite><a data-link-domain="pipou.academy" href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p> | |||
| </blockquote> | |||
| @@ -201,7 +201,7 @@ Pb : mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco | |||
| <li>Conséquences psychiques, physiques, sociales,…</li> | |||
| </ul> | |||
| <p>Bon Dry J. pour celleux qui le font ! Moi j’en suis !</p> | |||
| <p><cite><a href="https://framapiaf.org/@Air/111681709094993435" data-link-domain="framapiaf.org">@Air@framapiaf.org</a></cite></p> | |||
| <p><cite><a data-link-domain="framapiaf.org" href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p> | |||
| </blockquote> | |||
| <p>Dans mon entourage, de plus en plus de personnes que j’estime ne boivent pas d’alcool, de plus en plus de personnes qui vieillissent en deviennent dépendantes. Je suis davantage attiré par la première option… et pas pour un seul mois.</p> | |||
| <p>Je me sens prêt, on verra bien où cela me mène.</p> | |||
+ 11
- 11
david/2024/apprentissage/index.html
Näytä tiedosto
| @@ -143,18 +143,18 @@ | |||
| <blockquote> | |||
| <p>Plus que 3 jours pour décider de l’usage de vos #impôts en donnant à des #assos !</p> | |||
| <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé ! 🤑💞</p> | |||
| <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé ! 🤑💞</p> | |||
| <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark> […]</p> | |||
| <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p> | |||
| <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p> | |||
| </blockquote> | |||
| <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre personnel.</p> | |||
| <p>Une forme d’impôt volontaire qui ne termine pas / <a title="Dryear(s)" href="/david/2024/01/01/">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p> | |||
| <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p> | |||
| <hr /> | |||
| <p>Pensée (genrée) du jour : un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la cuisine.</p> | |||
| <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine déguisée.</p> | |||
| <hr /> | |||
| <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse : il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de pratiques !</p> | |||
| <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/" data-link-domain="ricaud.me">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le but !).</p> | |||
| <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse : il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de pratiques !</p> | |||
| <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a data-link-domain="ricaud.me" href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le but !).</p> | |||
| <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de thème 😅.</p> | |||
| <p><em>Bientôt 500 lignes de CSS.</em></p> | |||
| <hr /> | |||
| @@ -162,7 +162,7 @@ | |||
| <blockquote> | |||
| <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p> | |||
| <p>Je suis impressionné.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche" data-link-domain="la-grange.net">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| </blockquote> | |||
| <p>Ce titre :)</p> | |||
| <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2 minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3 ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses inspirantes.</p> | |||
| @@ -171,10 +171,10 @@ | |||
| <blockquote lang="en"> | |||
| <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any more.</mark></p> | |||
| <p>We are primarily in the business of search and we’d like to stay focused on that.</p> | |||
| <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à « Reconsider your partnership with Brave »</em></cite></p> | |||
| <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à « Reconsider your partnership with Brave »</em></cite></p> | |||
| </blockquote> | |||
| <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez terrible.</p> | |||
| <p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy" data-link-domain="theverge.com">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle cryptonite.</p> | |||
| <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle cryptonite.</p> | |||
| @@ -190,7 +190,7 @@ | |||
| <p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des « propositions » au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous : « Qu’est-ce qui pourrait améliorer la situation ? Que pourrais-je proposer ? » Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une « solution » parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non négative.</p> | |||
| <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre « Changez votre langage, changez votre culture »</cite></p> | |||
| </blockquote> | |||
| <p>On pourrait y voir de la <a href="https://fr.wikipedia.org/wiki/Novlangue" data-link-domain="fr.wikipedia.org">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer — peut-être temporairement — une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces pratiques.</p> | |||
| <p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer — peut-être temporairement — une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces pratiques.</p> | |||
| <p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a> ? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà dé·fini.</p> | |||
| <blockquote> | |||
| @@ -199,10 +199,10 @@ | |||
| <p><cite><em>Ibid.</em></cite></p> | |||
| </blockquote> | |||
| <hr /> | |||
| <p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a href="https://mamot.fr/@nhoizey/111697128068526484" data-link-domain="mamot.fr">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions ?) en commun à ce sujet.</p> | |||
| <p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr" href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions ?) en commun à ce sujet.</p> | |||
| <p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte 🧑🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi ? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme ça.</strong></p> | |||
| <p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les couleurs.</p> | |||
| <p>Plus tard, <a href="https://mamot.fr/@emmanuelc/111700432836997597" data-link-domain="mamot.fr">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller ? Oui, mais il faudra toujours finir par le décortiquer.</p> | |||
| <p>Plus tard, <a data-link-domain="mamot.fr" href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller ? Oui, mais il faudra toujours finir par le décortiquer.</p> | |||
| <p>La CSS progresse, 426 lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette idée.</p> | |||
| <hr /> | |||
| <p>Randonnée de 8 km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances — qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons s’ouvrent.</p> | |||
+ 8
- 8
david/2024/communaute/index.html
Näytä tiedosto
| @@ -143,18 +143,18 @@ | |||
| <blockquote> | |||
| <p>Plus que 3 jours pour décider de l’usage de vos #impôts en donnant à des #assos !</p> | |||
| <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé ! 🤑💞</p> | |||
| <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé ! 🤑💞</p> | |||
| <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark> […]</p> | |||
| <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p> | |||
| <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p> | |||
| </blockquote> | |||
| <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre personnel.</p> | |||
| <p>Une forme d’impôt volontaire qui ne termine pas / <a title="Dryear(s)" href="/david/2024/01/01/">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p> | |||
| <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p> | |||
| <hr /> | |||
| <p>Pensée (genrée) du jour : un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la cuisine.</p> | |||
| <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine déguisée.</p> | |||
| <hr /> | |||
| <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse : il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de pratiques !</p> | |||
| <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/" data-link-domain="ricaud.me">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le but !).</p> | |||
| <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse : il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de pratiques !</p> | |||
| <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a data-link-domain="ricaud.me" href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le but !).</p> | |||
| <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de thème 😅.</p> | |||
| <p><em>Bientôt 500 lignes de CSS.</em></p> | |||
| <hr /> | |||
| @@ -162,7 +162,7 @@ | |||
| <blockquote> | |||
| <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p> | |||
| <p>Je suis impressionné.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche" data-link-domain="la-grange.net">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| </blockquote> | |||
| <p>Ce titre :)</p> | |||
| <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2 minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3 ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses inspirantes.</p> | |||
| @@ -171,10 +171,10 @@ | |||
| <blockquote lang="en"> | |||
| <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any more.</mark></p> | |||
| <p>We are primarily in the business of search and we’d like to stay focused on that.</p> | |||
| <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à « Reconsider your partnership with Brave »</em></cite></p> | |||
| <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à « Reconsider your partnership with Brave »</em></cite></p> | |||
| </blockquote> | |||
| <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez terrible.</p> | |||
| <p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy" data-link-domain="theverge.com">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle cryptonite.</p> | |||
| <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle cryptonite.</p> | |||
+ 3
- 3
david/2024/decision/index.html
Näytä tiedosto
| @@ -147,7 +147,7 @@ | |||
| <p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des « propositions » au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous : « Qu’est-ce qui pourrait améliorer la situation ? Que pourrais-je proposer ? » Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une « solution » parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non négative.</p> | |||
| <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre « Changez votre langage, changez votre culture »</cite></p> | |||
| </blockquote> | |||
| <p>On pourrait y voir de la <a href="https://fr.wikipedia.org/wiki/Novlangue" data-link-domain="fr.wikipedia.org">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer — peut-être temporairement — une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces pratiques.</p> | |||
| <p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer — peut-être temporairement — une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces pratiques.</p> | |||
| <p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a> ? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà dé·fini.</p> | |||
| <blockquote> | |||
| @@ -156,10 +156,10 @@ | |||
| <p><cite><em>Ibid.</em></cite></p> | |||
| </blockquote> | |||
| <hr /> | |||
| <p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a href="https://mamot.fr/@nhoizey/111697128068526484" data-link-domain="mamot.fr">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions ?) en commun à ce sujet.</p> | |||
| <p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr" href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions ?) en commun à ce sujet.</p> | |||
| <p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte 🧑🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi ? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme ça.</strong></p> | |||
| <p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les couleurs.</p> | |||
| <p>Plus tard, <a href="https://mamot.fr/@emmanuelc/111700432836997597" data-link-domain="mamot.fr">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller ? Oui, mais il faudra toujours finir par le décortiquer.</p> | |||
| <p>Plus tard, <a data-link-domain="mamot.fr" href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller ? Oui, mais il faudra toujours finir par le décortiquer.</p> | |||
| <p>La CSS progresse, 426 lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette idée.</p> | |||
| <hr /> | |||
| <p>Randonnée de 8 km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances — qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons s’ouvrent.</p> | |||
+ 2
- 2
david/2024/ecriture/index.html
Näytä tiedosto
| @@ -140,8 +140,8 @@ | |||
| </h2> | |||
| <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.</p> | |||
| <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre avec.</p> | |||
| <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.</p> | |||
| <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre avec.</p> | |||
| <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes sections.</p> | |||
| <p>Je m’amuse comme un petit fou même si la CSS fait subitement 350 lignes.</p> | |||
| <hr /> | |||
+ 3
- 3
david/2024/equipe/index.html
Näytä tiedosto
| @@ -147,7 +147,7 @@ | |||
| <p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des « propositions » au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous : « Qu’est-ce qui pourrait améliorer la situation ? Que pourrais-je proposer ? » Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une « solution » parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non négative.</p> | |||
| <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre « Changez votre langage, changez votre culture »</cite></p> | |||
| </blockquote> | |||
| <p>On pourrait y voir de la <a href="https://fr.wikipedia.org/wiki/Novlangue" data-link-domain="fr.wikipedia.org">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer — peut-être temporairement — une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces pratiques.</p> | |||
| <p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer — peut-être temporairement — une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces pratiques.</p> | |||
| <p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a> ? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà dé·fini.</p> | |||
| <blockquote> | |||
| @@ -156,10 +156,10 @@ | |||
| <p><cite><em>Ibid.</em></cite></p> | |||
| </blockquote> | |||
| <hr /> | |||
| <p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a href="https://mamot.fr/@nhoizey/111697128068526484" data-link-domain="mamot.fr">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions ?) en commun à ce sujet.</p> | |||
| <p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr" href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions ?) en commun à ce sujet.</p> | |||
| <p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte 🧑🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi ? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme ça.</strong></p> | |||
| <p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les couleurs.</p> | |||
| <p>Plus tard, <a href="https://mamot.fr/@emmanuelc/111700432836997597" data-link-domain="mamot.fr">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller ? Oui, mais il faudra toujours finir par le décortiquer.</p> | |||
| <p>Plus tard, <a data-link-domain="mamot.fr" href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller ? Oui, mais il faudra toujours finir par le décortiquer.</p> | |||
| <p>La CSS progresse, 426 lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette idée.</p> | |||
| <hr /> | |||
| <p>Randonnée de 8 km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances — qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons s’ouvrent.</p> | |||
+ 9
- 9
david/2024/experience/index.html
Näytä tiedosto
| @@ -143,20 +143,20 @@ | |||
| <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses : des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du temps.</p> | |||
| <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em> modernes :</p> | |||
| <ul> | |||
| <li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy Bell ;</li> | |||
| <li><a href="https://www.joshwcomeau.com/css/custom-css-reset/" data-link-domain="joshwcomeau.com">My Custom CSS Reset</a> par Josh W. Comeau ;</li> | |||
| <li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam Suzanne ;</li> | |||
| <li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy Thomas.</li> | |||
| <li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy Bell ;</li> | |||
| <li><a data-link-domain="joshwcomeau.com" href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau ;</li> | |||
| <li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam Suzanne ;</li> | |||
| <li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy Thomas.</li> | |||
| </ul> | |||
| <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.</p> | |||
| <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.</p> | |||
| <p>Je finis par tout jeter / ré-interroger et je m’en sors avec 6 règles.</p> | |||
| <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>] — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu" data-link-domain="code.larlet.fr">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.</p> | |||
| <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>] — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.</p> | |||
| <p>Je suis satisfait de mon résultat très minimaliste du jour.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des rêves.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train" data-link-domain="la-grange.net">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2023/07/10/notes-train">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| </blockquote> | |||
| <p>🧡</p> | |||
| <hr /> | |||
| @@ -175,7 +175,7 @@ | |||
| </a> | |||
| <figcaption>Capture d’écran de l’essai.</figcaption> | |||
| </figure> | |||
| <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la poubelle.</p> | |||
| <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la poubelle.</p> | |||
| <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi ? Oui, et ça ouvre des perspectives d’agencements photographiques à explorer…</p> | |||
| @@ -204,7 +204,7 @@ Pb : mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco | |||
| <li>Conséquences psychiques, physiques, sociales,…</li> | |||
| </ul> | |||
| <p>Bon Dry J. pour celleux qui le font ! Moi j’en suis !</p> | |||
| <p><cite><a href="https://framapiaf.org/@Air/111681709094993435" data-link-domain="framapiaf.org">@Air@framapiaf.org</a></cite></p> | |||
| <p><cite><a data-link-domain="framapiaf.org" href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p> | |||
| </blockquote> | |||
| <p>Dans mon entourage, de plus en plus de personnes que j’estime ne boivent pas d’alcool, de plus en plus de personnes qui vieillissent en deviennent dépendantes. Je suis davantage attiré par la première option… et pas pour un seul mois.</p> | |||
| <p>Je me sens prêt, on verra bien où cela me mène.</p> | |||
+ 8
- 8
david/2024/fediverse/index.html
Näytä tiedosto
| @@ -143,18 +143,18 @@ | |||
| <blockquote> | |||
| <p>Plus que 3 jours pour décider de l’usage de vos #impôts en donnant à des #assos !</p> | |||
| <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé ! 🤑💞</p> | |||
| <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé ! 🤑💞</p> | |||
| <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark> […]</p> | |||
| <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p> | |||
| <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p> | |||
| </blockquote> | |||
| <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre personnel.</p> | |||
| <p>Une forme d’impôt volontaire qui ne termine pas / <a title="Dryear(s)" href="/david/2024/01/01/">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p> | |||
| <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p> | |||
| <hr /> | |||
| <p>Pensée (genrée) du jour : un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la cuisine.</p> | |||
| <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine déguisée.</p> | |||
| <hr /> | |||
| <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse : il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de pratiques !</p> | |||
| <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/" data-link-domain="ricaud.me">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le but !).</p> | |||
| <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse : il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de pratiques !</p> | |||
| <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a data-link-domain="ricaud.me" href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le but !).</p> | |||
| <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de thème 😅.</p> | |||
| <p><em>Bientôt 500 lignes de CSS.</em></p> | |||
| <hr /> | |||
| @@ -162,7 +162,7 @@ | |||
| <blockquote> | |||
| <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p> | |||
| <p>Je suis impressionné.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche" data-link-domain="la-grange.net">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| </blockquote> | |||
| <p>Ce titre :)</p> | |||
| <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2 minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3 ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses inspirantes.</p> | |||
| @@ -171,10 +171,10 @@ | |||
| <blockquote lang="en"> | |||
| <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any more.</mark></p> | |||
| <p>We are primarily in the business of search and we’d like to stay focused on that.</p> | |||
| <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à « Reconsider your partnership with Brave »</em></cite></p> | |||
| <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à « Reconsider your partnership with Brave »</em></cite></p> | |||
| </blockquote> | |||
| <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez terrible.</p> | |||
| <p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy" data-link-domain="theverge.com">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle cryptonite.</p> | |||
| <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle cryptonite.</p> | |||
+ 6
- 6
david/2024/processus/index.html
Näytä tiedosto
| @@ -140,7 +140,7 @@ | |||
| </h2> | |||
| <p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a href="https://mistune.lepture.com/en/latest/" data-link-domain="mistune.lepture.com">mistune</a> et je m’en sers ensuite en CSS pour l’afficher dynamiquement :</p> | |||
| <p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/">mistune</a> et je m’en sers ensuite en CSS pour l’afficher dynamiquement :</p> | |||
| <pre><code>a[data-link-domain]::after { | |||
| content: " [" attr(data-link-domain) "]"; | |||
| font-size: smaller; | |||
| @@ -168,21 +168,21 @@ a::before { | |||
| } | |||
| </code></pre> | |||
| <p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience / accessibilité.</p> | |||
| <p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus tard.</p> | |||
| <p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus tard.</p> | |||
| <p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la durée.</p> | |||
| <p>Chaque lien distant prend une longueur non négligeable suite à ces deux ajouts 🤔.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit blog”.</p> | |||
| <p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p> | |||
| <p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p> | |||
| <blockquote lang="en"> | |||
| <p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this too).</p> | |||
| <p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy change”.</p> | |||
| <p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>Note : cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes articles.</p> | |||
| <hr /> | |||
| @@ -227,7 +227,7 @@ a::before { | |||
| Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir entièrement</p> | |||
| <p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est fun</p> | |||
| <p>« ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça va »</p> | |||
| <p><cite><a href="https://pipou.academy/@tiphaine/111629699683457788" data-link-domain="pipou.academy">@tiphaine@pipou.academy</a></cite></p> | |||
| <p><cite><a data-link-domain="pipou.academy" href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p> | |||
| </blockquote> | |||
+ 1
- 1
david/2024/protopie/index.html
Näytä tiedosto
| @@ -159,7 +159,7 @@ Pb : mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco | |||
| <li>Conséquences psychiques, physiques, sociales,…</li> | |||
| </ul> | |||
| <p>Bon Dry J. pour celleux qui le font ! Moi j’en suis !</p> | |||
| <p><cite><a href="https://framapiaf.org/@Air/111681709094993435" data-link-domain="framapiaf.org">@Air@framapiaf.org</a></cite></p> | |||
| <p><cite><a data-link-domain="framapiaf.org" href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p> | |||
| </blockquote> | |||
| <p>Dans mon entourage, de plus en plus de personnes que j’estime ne boivent pas d’alcool, de plus en plus de personnes qui vieillissent en deviennent dépendantes. Je suis davantage attiré par la première option… et pas pour un seul mois.</p> | |||
| <p>Je me sens prêt, on verra bien où cela me mène.</p> | |||
+ 5
- 5
david/2024/solastalgia/index.html
Näytä tiedosto
| @@ -140,7 +140,7 @@ | |||
| </h2> | |||
| <p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a href="https://mistune.lepture.com/en/latest/" data-link-domain="mistune.lepture.com">mistune</a> et je m’en sers ensuite en CSS pour l’afficher dynamiquement :</p> | |||
| <p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/">mistune</a> et je m’en sers ensuite en CSS pour l’afficher dynamiquement :</p> | |||
| <pre><code>a[data-link-domain]::after { | |||
| content: " [" attr(data-link-domain) "]"; | |||
| font-size: smaller; | |||
| @@ -168,21 +168,21 @@ a::before { | |||
| } | |||
| </code></pre> | |||
| <p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience / accessibilité.</p> | |||
| <p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus tard.</p> | |||
| <p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus tard.</p> | |||
| <p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la durée.</p> | |||
| <p>Chaque lien distant prend une longueur non négligeable suite à ces deux ajouts 🤔.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit blog”.</p> | |||
| <p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p> | |||
| <p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p> | |||
| <blockquote lang="en"> | |||
| <p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this too).</p> | |||
| <p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy change”.</p> | |||
| <p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>Note : cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes articles.</p> | |||
| <hr /> | |||
+ 5
- 5
david/2024/sport/index.html
Näytä tiedosto
| @@ -141,22 +141,22 @@ | |||
| <p>Avec les amis, on profite des premières chutes de neige sur Montréal pour aller s’amuser sur le Mont Royal et vérifier que les skis de rando sont encore en bon état. Cinq minutes avant, je tirais l’enfant avec son baudrier en mode remontée musculaire, en pleine forme. Une descente entre les arbres même pas tant engagée et au moment de rejoindre le groupe, légère perte de contrôle dans un endroit très boisé. Mon ski se coince entre deux arbres assez fins mais suffisamment solides pour que ma cheville doive tourner dans le mauvais sens vu que mon corps a choisi de continuer sa course. <em>Ouille.</em></p> | |||
| <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a title="Objectif" href="/david/2024/01/06/">défi sportif</a>…</p> | |||
| <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a href="/david/2024/01/06/" title="Objectif">défi sportif</a>…</p> | |||
| <p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2 semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5 km à skis si j’en prends suffisamment soin d’ici là 🤞.</p> | |||
| <p>Ce soir, j’ai besoin d’y croire.</p> | |||
| <hr /> | |||
| <p>Copsaé publie un <a href="https://www.copsae.fr/" data-link-domain="copsae.fr">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a href="https://access42.net/" data-link-domain="access42.net">le sien</a>. J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples.</p> | |||
| <p>Copsaé publie un <a data-link-domain="copsae.fr" href="https://www.copsae.fr/">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a data-link-domain="access42.net" href="https://access42.net/">le sien</a>. Ne pas oublier <a data-link-domain="koena.net" href="https://koena.net/">Koena</a> aussi ! J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples.</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>In short, building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free. Leaning on those style hooks in your CSS selectors lets you reduce the number of moving parts in your site or application, and it can prevent accessibility bugs from creeping in down the road.</p> | |||
| <p><cite><em><a href="https://benmyers.dev/blog/semantic-selectors/" data-link-domain="benmyers.dev">Style with Stateful, Semantic Selectors</a> [<a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="benmyers.dev" href="https://benmyers.dev/blog/semantic-selectors/">Style with Stateful, Semantic Selectors</a> [<a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>C’est ce que j’essaye de faire depuis plusieurs années déjà et non seulement ça me permet d’améliorer le couple sémantique HTML/CSS mais ça rend mon JS plus résilient aussi !</p> | |||
| <blockquote lang="en"> | |||
| <p>Recently I decided to stop using the word <em>semantics</em>. Instead I talk about the <abbr title="User eXperience">UX</abbr> of <abbr title="HyperText Markup Language">HTML</abbr>. And all of a sudden my students are not allergic to <abbr>HTML</abbr> anymore but really interested. Instead of explaining the meaning of a certain element, I show them <em>what it does</em>. So we look at <em>what happens</em> when you add a label to an input: The input and the label now form a pair. You can now click on the label to interact with a checkbox. The label will be read out loud when you focus on an input with a screenreader. When you hover over a <em>label</em>, the hover state of the connected <em>input</em> is shown. My students <em>love</em> stuff like that. They care about <abbr>UX</abbr>.</p> | |||
| <p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/">The UX of HTML</a> [<a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/">The UX of HTML</a> [<a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| @@ -198,7 +198,7 @@ | |||
| Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir entièrement</p> | |||
| <p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est fun</p> | |||
| <p>« ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça va »</p> | |||
| <p><cite><a href="https://pipou.academy/@tiphaine/111629699683457788" data-link-domain="pipou.academy">@tiphaine@pipou.academy</a></cite></p> | |||
| <p><cite><a data-link-domain="pipou.academy" href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p> | |||
| </blockquote> | |||
+ 17
- 17
david/2024/technique/index.html
Näytä tiedosto
| @@ -141,22 +141,22 @@ | |||
| <p>Avec les amis, on profite des premières chutes de neige sur Montréal pour aller s’amuser sur le Mont Royal et vérifier que les skis de rando sont encore en bon état. Cinq minutes avant, je tirais l’enfant avec son baudrier en mode remontée musculaire, en pleine forme. Une descente entre les arbres même pas tant engagée et au moment de rejoindre le groupe, légère perte de contrôle dans un endroit très boisé. Mon ski se coince entre deux arbres assez fins mais suffisamment solides pour que ma cheville doive tourner dans le mauvais sens vu que mon corps a choisi de continuer sa course. <em>Ouille.</em></p> | |||
| <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a title="Objectif" href="/david/2024/01/06/">défi sportif</a>…</p> | |||
| <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a href="/david/2024/01/06/" title="Objectif">défi sportif</a>…</p> | |||
| <p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2 semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5 km à skis si j’en prends suffisamment soin d’ici là 🤞.</p> | |||
| <p>Ce soir, j’ai besoin d’y croire.</p> | |||
| <hr /> | |||
| <p>Copsaé publie un <a href="https://www.copsae.fr/" data-link-domain="copsae.fr">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a href="https://access42.net/" data-link-domain="access42.net">le sien</a>. J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples.</p> | |||
| <p>Copsaé publie un <a data-link-domain="copsae.fr" href="https://www.copsae.fr/">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a data-link-domain="access42.net" href="https://access42.net/">le sien</a>. Ne pas oublier <a data-link-domain="koena.net" href="https://koena.net/">Koena</a> aussi ! J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des contre-exemples.</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>In short, building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free. Leaning on those style hooks in your CSS selectors lets you reduce the number of moving parts in your site or application, and it can prevent accessibility bugs from creeping in down the road.</p> | |||
| <p><cite><em><a href="https://benmyers.dev/blog/semantic-selectors/" data-link-domain="benmyers.dev">Style with Stateful, Semantic Selectors</a> [<a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="benmyers.dev" href="https://benmyers.dev/blog/semantic-selectors/">Style with Stateful, Semantic Selectors</a> [<a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>C’est ce que j’essaye de faire depuis plusieurs années déjà et non seulement ça me permet d’améliorer le couple sémantique HTML/CSS mais ça rend mon JS plus résilient aussi !</p> | |||
| <blockquote lang="en"> | |||
| <p>Recently I decided to stop using the word <em>semantics</em>. Instead I talk about the <abbr title="User eXperience">UX</abbr> of <abbr title="HyperText Markup Language">HTML</abbr>. And all of a sudden my students are not allergic to <abbr>HTML</abbr> anymore but really interested. Instead of explaining the meaning of a certain element, I show them <em>what it does</em>. So we look at <em>what happens</em> when you add a label to an input: The input and the label now form a pair. You can now click on the label to interact with a checkbox. The label will be read out loud when you focus on an input with a screenreader. When you hover over a <em>label</em>, the hover state of the connected <em>input</em> is shown. My students <em>love</em> stuff like that. They care about <abbr>UX</abbr>.</p> | |||
| <p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/">The UX of HTML</a> [<a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/">The UX of HTML</a> [<a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" title="Copie locale au 2024-01-08">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| @@ -166,7 +166,7 @@ | |||
| </h2> | |||
| <p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a href="https://mistune.lepture.com/en/latest/" data-link-domain="mistune.lepture.com">mistune</a> et je m’en sers ensuite en CSS pour l’afficher dynamiquement :</p> | |||
| <p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/">mistune</a> et je m’en sers ensuite en CSS pour l’afficher dynamiquement :</p> | |||
| <pre><code>a[data-link-domain]::after { | |||
| content: " [" attr(data-link-domain) "]"; | |||
| font-size: smaller; | |||
| @@ -194,21 +194,21 @@ a::before { | |||
| } | |||
| </code></pre> | |||
| <p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience / accessibilité.</p> | |||
| <p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus tard.</p> | |||
| <p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus tard.</p> | |||
| <p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la durée.</p> | |||
| <p>Chaque lien distant prend une longueur non négligeable suite à ces deux ajouts 🤔.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit blog”.</p> | |||
| <p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p> | |||
| <p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p> | |||
| <blockquote lang="en"> | |||
| <p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this too).</p> | |||
| <p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy change”.</p> | |||
| <p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| <p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p> | |||
| </blockquote> | |||
| <p>Note : cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes articles.</p> | |||
| <hr /> | |||
| @@ -224,20 +224,20 @@ a::before { | |||
| <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses : des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du temps.</p> | |||
| <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em> modernes :</p> | |||
| <ul> | |||
| <li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy Bell ;</li> | |||
| <li><a href="https://www.joshwcomeau.com/css/custom-css-reset/" data-link-domain="joshwcomeau.com">My Custom CSS Reset</a> par Josh W. Comeau ;</li> | |||
| <li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam Suzanne ;</li> | |||
| <li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy Thomas.</li> | |||
| <li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy Bell ;</li> | |||
| <li><a data-link-domain="joshwcomeau.com" href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau ;</li> | |||
| <li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam Suzanne ;</li> | |||
| <li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy Thomas.</li> | |||
| </ul> | |||
| <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.</p> | |||
| <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.</p> | |||
| <p>Je finis par tout jeter / ré-interroger et je m’en sors avec 6 règles.</p> | |||
| <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>] — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu" data-link-domain="code.larlet.fr">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.</p> | |||
| <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>] — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.</p> | |||
| <p>Je suis satisfait de mon résultat très minimaliste du jour.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des rêves.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train" data-link-domain="la-grange.net">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2023/07/10/notes-train">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| </blockquote> | |||
| <p>🧡</p> | |||
| <hr /> | |||
| @@ -256,7 +256,7 @@ a::before { | |||
| </a> | |||
| <figcaption>Capture d’écran de l’essai.</figcaption> | |||
| </figure> | |||
| <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la poubelle.</p> | |||
| <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la poubelle.</p> | |||
| <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi ? Oui, et ça ouvre des perspectives d’agencements photographiques à explorer…</p> | |||
+ 10
- 10
david/2024/web/index.html
Näytä tiedosto
| @@ -140,8 +140,8 @@ | |||
| </h2> | |||
| <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.</p> | |||
| <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre avec.</p> | |||
| <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA Writer ne ressemble plus au rendu sur la prévisualisation du site.</p> | |||
| <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre avec.</p> | |||
| <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes sections.</p> | |||
| <p>Je m’amuse comme un petit fou même si la CSS fait subitement 350 lignes.</p> | |||
| <hr /> | |||
| @@ -165,20 +165,20 @@ | |||
| <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses : des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du temps.</p> | |||
| <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em> modernes :</p> | |||
| <ul> | |||
| <li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy Bell ;</li> | |||
| <li><a href="https://www.joshwcomeau.com/css/custom-css-reset/" data-link-domain="joshwcomeau.com">My Custom CSS Reset</a> par Josh W. Comeau ;</li> | |||
| <li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam Suzanne ;</li> | |||
| <li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy Thomas.</li> | |||
| <li><a data-link-domain="piccalil.li" href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy Bell ;</li> | |||
| <li><a data-link-domain="joshwcomeau.com" href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau ;</li> | |||
| <li><a data-link-domain="github.com" href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam Suzanne ;</li> | |||
| <li><a data-link-domain="jgthms.com" href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy Thomas.</li> | |||
| </ul> | |||
| <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.</p> | |||
| <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com" href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com" href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.</p> | |||
| <p>Je finis par tout jeter / ré-interroger et je m’en sors avec 6 règles.</p> | |||
| <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>] — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu" data-link-domain="code.larlet.fr">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.</p> | |||
| <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>] — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.</p> | |||
| <p>Je suis satisfait de mon résultat très minimaliste du jour.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des rêves.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train" data-link-domain="la-grange.net">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2023/07/10/notes-train">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p> | |||
| </blockquote> | |||
| <p>🧡</p> | |||
| <hr /> | |||
| @@ -197,7 +197,7 @@ | |||
| </a> | |||
| <figcaption>Capture d’écran de l’essai.</figcaption> | |||
| </figure> | |||
| <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la poubelle.</p> | |||
| <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la poubelle.</p> | |||
| <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi ? Oui, et ça ouvre des perspectives d’agencements photographiques à explorer…</p> | |||
+ 1
- 1
david/log/index.xml
Näytä tiedosto
| @@ -24,7 +24,7 @@ | |||
| <p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2&nbsp;semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5&#8239;km à skis si j’en prends suffisamment soin d’ici&nbsp;là&nbsp;🤞.</p> | |||
| <p>Ce soir, j’ai besoin d’y&nbsp;croire.</p> | |||
| <hr /> | |||
| <p>Copsaé publie un <a href="https://www.copsae.fr/">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a href="https://access42.net/">le sien</a>. J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des&nbsp;contre-exemples.</p> | |||
| <p>Copsaé publie un <a href="https://www.copsae.fr/">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a href="https://access42.net/">le sien</a>. Ne pas oublier <a href="https://koena.net/">Koena</a> aussi&#8239;! J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des&nbsp;contre-exemples.</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
+ 2
- 2
site.py
Näytä tiedosto
| @@ -100,8 +100,8 @@ class CustomLinkAttributesRenderer(mistune.HTMLRenderer): | |||
| if title: | |||
| attrs["title"] = safe_entity(title) | |||
| attributes = {f' {attr}="{value}"' for attr, value in sorted(attrs.items())} | |||
| initial_link = f'<a{" ".join(attributes)}>{text}</a>' | |||
| attributes = {f'{attr}="{value}"' for attr, value in attrs.items()} | |||
| initial_link = f'<a {" ".join(sorted(attributes))}>{text}</a>' | |||
| archive_link = "" | |||
| hash_url = hashlib.md5(url.encode("utf-8")).hexdigest() | |||
Loading…