#web
Publications relatives à cette étiquette
Tooltipopover
Popover API – This provides a declarative mechanism to create content that always renders in the topmost-layer, so that it overlays other web page content. This can be useful for building features like tooltips and notifications. Support for popover was the #1 author request in the recent State of HTML survey.
Ma première intuition pour enrichir les liens de la version archivée était de passer par des éléments natifs (comme toujours). Initialement, j’ai même envisagé un élément <dialog> qui est déjà mieux supporté mais ça rentrait mal dans le DOM là où je voulais l’insérer. Je me met alors en quête d’un polyfill pour la Popover API qui pourrait convenir mais j’ai un peu peur des effets de bord vu que je découvre et qu’il y a quand même pas mal de possibilités. J’en suis même à me lire une bonne page de doc
[archive] pour essayer de comprendre la distinction entre les deux.
Je finis par abandonner cette piste et je me dis que ça pourrait être un Web Component intéressant. Je m’arrache les cheveux un bon petit moment sur le positionnement et je capitule en me disant qu’il y a déjà des personnes qui ont produit des outils comme Floating UI ou Tippy.js. Choisir c’est renoncer… et j’ai fait les deux à la fois en optant pour Tippy qui prend soin de l’accessibilité [archive]. J’ai trop besoin d’avoir l’expérience de l’interface pour pouvoir affiner par la suite et faire les choses à ma sauce.
N’hésitez pas à jouer avec et à me faire des retours, c’est amené à évoluer.
My recipe for fiction set ten years in the future used to be 90% already-here, 9% not-here-yet but predictable, and 1% who-ordered-that. But unfortunately the ratios have changed. I think we're now down to maybe 80% already-here —climate change takes a huge toll on infrastructure— then 15% not-here-yet but predictable, and a whopping 5% of utterly unpredictable deep craziness.
Cela me rappelle une discussion récente au sujet du manque de pertinence de la météo et de la difficulté à faire de la prédiction sur des données rendues obsolètes par le changement climatique. Les modèles ne sont pas (encore ?) adaptés à un tel chaos.
Manifestement, les écrivains non plus.
Someone out there is working on it: a geolocation-aware social media scraping deep learning application, that uses a gamified, competitive interface to reward its “players” for joining in acts of mob violence against whoever the app developer hates. Probably it has an inoccuous-seeming but highly addictive training mode to get the users accustomed to working in teams and obeying the app's instructions—think Ingress or Pokemon Go. Then, at some pre-planned zero hour, it switches mode and starts rewarding players for violence—players who have been primed to think of their targets as vermin, by a steady drip-feed of micro-targeted dehumanizing propaganda delivered over a period of months.
Ibid.
Ah si en fait 😬.
If we want a system that is consistent with the flourishing of life on earth, we will need a system that mimics nature. Our current economic model doesn’t - for many reasons - and needs to change. Looking at nature, including our own human nature in our private lives, gives us many ideas for what this new, harmonious system could look like.
Il n’y a que les classes moyennes qui peuvent être socialistes. C’était tout l’enjeu de leur destruction pour n’avoir plus que des personnes qui aient peur de perdre le trop peu ou le vraiment beaucoup qu’elles ont. Et la peur rend la manipulation tellement plus facile…
If a monkey hoarded more bananas than it could eat, while most of the other monkeys starved, scientists would study that monkey to figure out what the heck was wrong with it. When humans do it, we put them on the cover of Forbes.
Ibid.
🙈
Déploiement
Ce qui me fait penser que cela fait plusieurs fois que je veux demander comment David déploie son site.
Mes dépôts contiennent le HTML généré car c’est ce que je considère comme étant la version pérenne de mes écrits donc je ne souhaite pas avoir une génération sur le serveur. Cela fait grossir le dépôt mais ça offre une tranquillité d’esprit de pouvoir observer les différences lorsque je modifie le moteur.
Il se trouve que ces dépôts sont sur le même serveur que celui qui sert les pages HTML que vous voyez. Je lance donc une commande distante avec minicli qui va faire une archive du dépôt git au bon endroit sur le serveur :
git archive --remote=larlet-fr-index.git master | tar -x -C larlet-fr
git archive --remote=larlet-fr-david.git master | tar -x -C larlet-fr
git archive --remote=larlet-fr-david-cache.git master | tar -x -C larlet-fr/david
[…]
J’itère ainsi sur chacun des dépôts concernés et l’avantage c’est que je peux donner un sous-dossier à la commande tar selon où je veux placer le contenu dans l’arborescence. Par exemple, ci-dessus, les articles archivés larlet-fr-david-cache.git arrivent directement dans mon dossier personnel larlet-fr/david. Il faut tout de même vérifier de ne pas écraser ses propres dossiers/fichiers.
Le déploiement met à ce jour une trentaine de secondes. Ce n’est pas optimisé mais je n’ai pas besoin de l’optimiser.
I therefore officially announce 2024 to be the year when the square checkbox has finally died.
À quand une petite coche sur les futurs toggle/switch natifs [archive] ? Ou pire ? 🙈
R.I.P. les boutons [archive] aussi…
Les poètes et écrivains évitaient tous la colère des rois et des puissants par l’utilisation de métaphores. Mais c’est justement par cette analogie que cela devient intéressant.
Les empires informatiques d’aujourd’hui comme exemples de l’absolutisme du pouvoir des siècles précédents posent la question plus qu’intéressantes sur la liberté d’expression. Quand tout l’espace de notre expression transite par un domaine privé et commercial, nous ne sommes plus dans l’espace public de notre expression mais bien dans cet espace contrôlé. Que devient le sens de notre communication si dès que nous sommes sur ces espaces, l’expression devient plus limitée que celle que l’espace public permet.
Il est interdit de parler anglais dans les écoles québécoises. Il n’en fallait pas beaucoup plus pour que les élèves aient envie de l’apprendre et d’échanger entre eux dans cette langue. Oppression + contre-pouvoir = culture commune.
Aussi, l’enseignement de l’anglais est relativement médiocre pour une province qui insiste sur le bilinguisme. Difficile d’en mesurer l’intention.
[…] Je ne sais pas ce qui est le plus important, préserver un nom de domaine n’est qu’une partie. Préserver le contenu derrière le nom de domaine est plus difficile. Il faut penser serveurs, mise à jour de sécurité, les technologies utilisées, etc.
Le No JS pour les sites Web est rarement mentionné pour la longévité du contenu. Et pourtant c’est une pièce fondamentale.
Peut-être il serait plus important de penser à ce que les autres voudront préserver plutôt que de penser à ce que nous voulons transmettre. De même que voulons nous préserver des générations antérieures pour nous aider à mieux penser notre propre disparition.
Peut-être que si chaque personne avait sa propre archive des publications des autres, on aurait accès à un réseau de citations distribuées qui contribueraient à cette préservation. Et qui auraient été considérées comme étant « pertinentes » par les lecteur·ices ? Les guillemets sont importants car citation ne veut pas forcément dire caution ou intérêt le plus grand. Par exemple, l’anecdote
[archive] Je me pose de sérieuses questions sur l’image que nous renvoyons à notre enfant.
me fait beaucoup réfléchir et me donne envie de la conserver sans forcément la citer. Comment combiner réactions publiques et souvenirs plus intimes ?
Maintenant je vais vouloir citer encore plus d’articles de Karl (-:.
PS : Un réseau de flus ou readeck serait aussi une option s’ils pouvaient devenir un des nœuds d’une archive distribuée et collective.
Vieillesse
Je travaille dans des équipes techniques informatiques, le web, les nouvelles technologies, les startups. Autour de moi je ne vois que des jeunes, avec quelques rares personnes de ma génération.
Il n’y a quasiment aucune personne de 50 ans ou plus dans les équipes techniques. Les exemples que j’ai en tête sont quelques pointures nationales ou internationales, pas du tout représentatives du métier.
Cet onglet d’Éric D. est ouvert dans mon navigateur depuis plus d’un an (rassurez-vous, il était bien entouré avec au moins 300 collègues). Le temps passant, je me pose également ces questions…
Il y a deux aspects :
- Jusqu’à quand est-ce que l’on aura besoin de moi ?
- Jusqu’à quand est-ce que j’aurai besoin de coder ?
Sur la première, j’ai l’impression que l’expérience de base s’accumule et aura toujours une certaine valeur, je ne vois pas vraiment de plateau depuis 25 ans mais des centres d’intérêts qui évoluent plutôt en étoile. Certains sont des impasses — ou mis en dormance plus ou moins prolongée —, d’autres sont temporels et/ou gagnent un regain d’intérêt au gré de produits et de rencontres. Ce n’est pas tant d’avoir appris à apprendre que d’avoir croisé suffisamment de situations pour permettre à des équipes de sauter certains fossés ou sentir lorsqu’il y a un outil / techno / pattern qui vaut le coup. Je ne me sens pas obsolète et encore moins face à une IA-llucinante actuelle qui nécessite cette expérience.
C’est le deuxième point qui est critique car il touche à l’envie et peut-être que d’ici quelques années la technique m’intéressera moins pour plein de raisons (stagnation, répétition, sentiment d’inutilité, consommation de ressources, etc). Et peut-être que le code ne sera plus alors une expression de ma personnalité à laquelle je voudrai consacrer autant de temps. Et peut-être que je n’aurai plus envie de transmettre non plus à des personnes moins expérimentées pour ces mêmes raisons. Aujourd’hui, derrière ce besoin de coder, il y a cette nécessité d’apprendre en continu et de me sentir capable d’avoir un semblant d’impact sur ce monde.
Je peux aussi considérer que je ne suis qu’à la moitié de ma carrière technique. C’est vertigineux exprimé ainsi. Et pourquoi pas.
After almost 10 years of remote work, it would be close to impossible for me to go back to an office.
J’ai souvent ce sentiment (je partage les autres points de l’article aussi). Je ne sais pas du tout ce que ça ferait de retourner dans un bureau mais au-delà de cette hypothèse physique, c’est le côté avec subordination / pyramidal que j’ai l’impression d’avoir dépassé sans vraiment de possibilité de retour en arrière. Il n’y a que dans des collectifs bien spécifiques que j’aurais une chance de trouver une place qui me soit acceptable.
Voir aussi cette discussion à ce sujet.
J’ai de plus en plus de mal avec les légalistes donneurs de leçons qui utilisent le ton le plus anxiogèno-aggressif qui soit. La vieillesse a ceci de bon que je commence à savoir retourner ces situations en interrogeant les intentions et les peurs de ces personnes.
The big one is that the logical alternatives to Node – the “no Node” work environments developers are likely to reach for aren’t going to be based on JavaScript. Import maps mean that browsers effectively have an API surface that non-JS projects can use to build a dependency management system. Much of the tooling surrounding JavaScript is now implemented in Rust, not JS – much of it driven by Deno itself – and that makes it more easily accessible outside both the Node and Deno ecosystems.
Je partage l’analyse de Baldur, l’avenir est à la rouille. De Biome à Ruff en passant par rye ou hurl pour n’en citer que quelques uns, Rust est en train de devenir un véritable atout pour tout ce qui est outils-performants-autour-du-web.
Les (vieilles) mauvaises langues pourraient dire que l’on arrive au bout de la décennie tout-JS, surtout avec l’arrivée de WebAssembly+Python 🤞.
Impact
If front web developers work closer to the users’ needs and problems, if they feel more implicated in the user experience, they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]
Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people’s lives and understanding the impact of what we are creating.
Même si je m’émeus encore de l’esthétique d’un Web Component ou d’une nouvelle technique CSS, j’essaye d’être plus attentif au fil des ans à l’impact potentiel des bouts de code que j’assemble. C’est là où les démo [archive] prennent tout leur sens pour vérifier la pertinence de ce qui a été produit. Se libérer de l’égoïsme technique pour aller vers le soin porté aux utilisateur·ices, essayer de comprendre leurs besoins, synthétiser, proposer, se tromper, recommencer. Dans une spirale d’essais-erreurs, on se rapproche d’un centre enviable où les contraintes techniques sont minimisées et les besoins proches d’être comblés. Chaque partie ayant un petit peu appris sur l’autre au cours de ce bout de chemin commun.
Une carrière est la cartographie de ces expériences. Savoir identifier les optima locaux qui ont pu procurer de la joie ainsi que les lieux de convergence où l’on aime bien aller car il y a le bon dosage effort / récompense. Apprendre à reconnaître les sentiers hasardeux où l’on a déjà laissé des plumes et reconnaître aussi qu’un contexte et des personnes peuvent changer.
Admettre que l’on a soi-même changé tout au long de ce cheminement.
At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP request.
No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re selling.
Customers want software that delivers problem-solving impact. And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.
You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix them.
Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses paddings mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un :after pour ça lorsqu’il s’agit d’icônes notamment :
.search__filter:after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
transform: scale(2);
}
Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans Polypane que j’utilise depuis peu et que je n’ai pas pleinement exploré.
Appariement
Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera Century Supra qui fera la paire avec Concourse pour du sans serif (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.
Au niveau de la taille, j’ai enfin l’occasion de tester un échelle modulaire 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.
Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux CSS layers 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.
Je m’amuse comme un petit fou même si la CSS fait subitement 350 lignes.
Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre. Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés : le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la vie.
Journal 1947-1955, Anaïs Nin
L’introduction de Alors nous irons trouver la beauté ailleurs par Corinne Morel Darleux m’aura suffit pour aujourd’hui 🙂.
On a couru 10 km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps ! La récompense a été de croiser un renard urbain de vraiment très près, moins de 5 mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10 ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait -6°C.
Tout ça pour aller chercher un bidon d’huile pour la transmission de la voiture.
Fondations
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 grids, des layers, 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.
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 reset modernes :
- A (more) Modern CSS Reset par Andy Bell ;
- My Custom CSS Reset par Josh W. Comeau ;
- CSS Remedy par Jen Simmons et Miriam Suzanne ;
- A tiny modern CSS reset par Jeremy Thomas.
J’aimerais commencer ma CSS par @layer reset mais c’est sur du Baseline™ 2022. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. Au pire, cette page nue est consultable et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des CSS layers mais quand je fais une refonte de cet espace je ne suis pas que 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. Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture. Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.
Je finis par tout jeter / ré-interroger et je m’en sors avec 6 règles.
J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — coucou Antoine [archive] — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui est le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations à fond perdu tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.
Je suis satisfait de mon résultat très minimaliste du jour.
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.
🧡
Plus tard, je me rends compte en voulant faire les choses proprement que j’avais déjà fait des essais il y a un peu plus d’un an :
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 layers qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, en retraite)). Il n’est pas exclus que les essais actuels finissent également à la poubelle.
Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi ? Oui, et ça ouvre des perspectives d’agencements photographiques à explorer…