Fetching og_image and description meta with lassie

cache.py

@@ -10,6 +10,7 @@ from pathlib import Path
 from time import perf_counter
 
 import httpx
+import lassie
 import lxml
 import markdown
 from jinja2 import Environment as Env
@@ -50,6 +51,8 @@ class Cache:
     url: str
     hash_url: str
     archive_date: str
+    og_image: str
+    description: str
 
     @staticmethod
     def all(source_dir=CACHE_PATH):
@@ -58,7 +61,11 @@ class Cache:
             url = metadata["url"][0]
             hash_url = metadata["hash_url"][0]
             archive_date = metadata["archive_date"][0]
-            yield Cache(title, content, url, hash_url, archive_date)
+            og_image = metadata.get("og_image", [""])[0]
+            description = metadata.get("description", [""])[0]
+            yield Cache(
+                title, content, url, hash_url, archive_date, og_image, description
+            )
 
     @staticmethod
     def one(hash_url):
@@ -97,6 +104,24 @@ def create(hash_url):
     print(f"Done: {LOCAL_DOMAIN}/david/cache/{YEAR}/{hash_url}/")
 
 
+def save(
+    title, content, url, hash_url, archive_date, cache_path, og_image, description
+):
+    template = environment.get_template("cache_article.md")
+    page = template.render(
+        title=title,
+        content=content,
+        url=url,
+        hash_url=hash_url,
+        archive_date=archive_date,
+        og_image=og_image,
+        description=description,
+    )
+    result_path = os.path.join(cache_path, "index.md")
+    open(result_path, "w").write(page)
+    return result_path
+
+
 @cli
 def generate():
     """Generate caches MD files into HTML files."""
@@ -113,6 +138,52 @@ def generate():
     print(f"Done: {LOCAL_DOMAIN}/david/cache/{YEAR}/")
 
 
+def fetch_metadata(title, url, description):
+    """Fetch additional metadata."""
+    data = lassie.fetch(url)
+    og_image = ""
+    for image in data.get("images"):
+        if image.get("type") == "og:image":
+            og_image = image["src"]
+            break
+    if data.get("title") != title:
+        print(data.get("title"), "vs.", title, url)
+    description = description or data.get("description", "")
+    return og_image, description
+
+
+@cli
+def metadata():
+    """Fetch additional metadata for existing archives."""
+    for cache in Cache.all():
+        if cache.description or cache.url.startswith(
+            (
+                "https://www.la-grange.net",
+                "https://tw5.immateriel.fr",
+                "https://gilest.org",
+                "https://vasilis.nl",
+                "https://www.danmcquillan.org",
+                "https://public-inbox.org",
+            )
+        ):
+            print("Skipping", cache.url)
+            continue
+        print("Fetching metadata for", cache.url, cache.title)
+        og_image, description = fetch_metadata(
+            cache.title, cache.url, cache.description
+        )
+        save(
+            cache.title,
+            cache.content,
+            cache.url,
+            cache.hash_url,
+            cache.archive_date,
+            os.path.join(CACHE_PATH, cache.hash_url),
+            og_image,
+            description,
+        )
+
+
 @cli
 def new(url):
     """Turn the given URL into a MD and a HTML files.
@@ -134,16 +205,10 @@ def new(url):
         os.makedirs(cache_path)
     archive_date = date.today()
     # Caching a markdown file.
-    template = environment.get_template("cache_article.md")
-    page = template.render(
-        title=title,
-        content=content,
-        url=url,
-        hash_url=hash_url,
-        archive_date=archive_date,
+    og_image, description = fetch_metadata(title, url, "")
+    result_path = save(
+        title, content, url, hash_url, archive_date, cache_path, og_image, description
     )
-    result_path = os.path.join(cache_path, "index.md")
-    open(result_path, "w").write(page)
     # Generating the HTML file.
     create(hash_url)
     md_line = f"> <cite>*[{title}]({url})*</cite>"

cache/2024/0676c7ccf1ab2b380641866789366d26/index.md

@@ -2,7 +2,9 @@ title: The Performance Inequality Gap, 2024
 url: https://infrequently.org/2024/01/performance-inequality-gap-2024/
 hash_url: 0676c7ccf1ab2b380641866789366d26
 archive_date: 2024-01-31
-  
+og_image: https://infrequently.org/2024/01/performance-inequality-gap-2024/single_core_scores.png
+description: How much HTML, CSS, and JavaScript can we afford? More than in years past, but much less than frontend developers are burdening users with.
+
 <p>It's time once again to update our priors regarding the global device and network situation. What's changed since last year? And how much more HTML, CSS, and (particularly) JavaScript can a new project afford?</p>
 <p></p>
 <h2 id="the-budget%2C-2024">The Budget, 2024 <a class="permalink" href="#the-budget%2C-2024">#</a></h2>
@@ -586,4 +588,4 @@ archive_date: 2024-01-31
 <p>The stories that propped up <abbr>IE8</abbr>-focused frameworks like Angular and React in the mobile era have only served as comforting myths to ward off emerging device and network reality. For the past decade, the important question hasn't been if enough good technology existed, but rather how long the delusions would keep hold.</p>
 <p>The community wanted to live in a different world than the one we inhabit, so we collectively mis-predicted. A healthy web community will value learning faster.</p>
 <p>How deep was the branch? And how many cycles will the fault cost us? If CPUs and networks continue to improve at the rate of the past two years, and <abbr>INP</abbr> finally forces a reckoning, the answer might be as little as a decade. I fear we will not be so lucky; an entire generation has been trained to ignore reality, to prize tribalism rather than engineering rigor, and to devalue fundamentals. Those folks may not find the next couple of years to their liking.</p>
-<p>Front-end's hangover from the JavaScript party is gonna <em>suck</em>.</p>
+<p>Front-end's hangover from the JavaScript party is gonna <em>suck</em>.</p>

cache/2024/076169df8a4bd9dde9a4637c6b306dff/index.md

@@ -2,9 +2,11 @@ title: Ma page /now (ou plutôt /en-ce-moment)
 url: https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment
 hash_url: 076169df8a4bd9dde9a4637c6b306dff
 archive_date: 2024-01-07
+og_image: https://blog.professeurjoachim.com/media/pages/billet/ma-page-now-ou-plutot-en-ce-moment/4217ba82c9-1705597826/ogimage.png
+description: La page /now a été proposée par Derek Sivers pour spécifier de manière très flexible un format de page web sur laquelle on peut en apprendre plus sur …
 
 <div class="big"><p>Si tu suis mon blog via RSS, déjà le flux est réparé (youpi), mais surtout tu as dû voir arriver une nouvelle page : “En ce moment”. Quès aco ?</p></div>
-      
+
 <p>La page <code>/now</code> a été proposée par <a href="https://sive.rs/now">Derek Sivers</a> pour spécifier de manière très flexible un format de page web sur laquelle on peut en apprendre plus sur la personne qui a entretient le site.</p>
 <blockquote>
 <p>So a website with a link that says “now” goes to a page that tells you what this person is focused on at this point in their life. For short, we call it a “now page”.<br>
@@ -32,4 +34,4 @@ Pour l’instant seule une partie de la page apparaît sur le flux RSS. C’est
 <li><a href="https://gersande.com/blogue/now/">https://gersande.com/blogue/now/</a></li>
 <li><a href="https://blog.poslovitch.fr/en-ce-moment">https://blog.poslovitch.fr/en-ce-moment</a></li>
 <li><a href="https://kevinronceray.com/fr/now">https://kevinronceray.com/fr/now</a></li>
-</ul> 
+</ul>

cache/2024/09c0739036ea4a8b6c985e127fe7e3c8/index.md

@@ -2,6 +2,8 @@ title: ☕️ Journal : Carnets
 url: https://thom4.net/2023/02/01/carnets/
 hash_url: 09c0739036ea4a8b6c985e127fe7e3c8
 archive_date: 2024-01-11
+og_image: https://thom4.net/images/thomas-parisot.jpg
+description: J’aurais pu m’en rendre compte il y a vingt ans, mais il me manquait le recul de deux décennies.
 
 <p>J’aurais pu m’en rendre compte il y a vingt ans,<br>
 mais il me manquait le recul de deux décennies.</p>

cache/2024/112d32ccefb9aec48180de42e1fe1534/index.md

@@ -2,69 +2,39 @@ title: Quand je serai bien vieux
 url: https://n.survol.fr/n/quand-je-serai-bien-vieux
 hash_url: 112d32ccefb9aec48180de42e1fe1534
 archive_date: 2024-01-16
+og_image: 
+description: Quand vous serez bien vieille, au soir, à la chandelle, Assise auprès du feu, dévidant et filant, Pierre de Ronsard
 
 <blockquote class="wp-block-quote"><p>Quand vous serez bien vieille, au soir, à la chan­delle,<br>Assise auprès du feu, dévi­dant et filant,</p><cite>Pierre de Ronsard</cite></blockquote>
 
-
-
 <p>Je travaille dans des équipes tech­niques infor­ma­tiques, le web, les nouvelles tech­no­lo­gies, les star­tups. Autour de moi je ne vois que des jeunes, avec quelques rares personnes de ma géné­ra­tion.</p>
 
-
-
 <p>Il n’y a quasi­ment aucune personne de 50 ans ou plus dans les équipes tech­niques. Les exemples que j’ai en tête sont quelques poin­tures natio­nales ou inter­na­tio­nales, pas du tout repré­sen­ta­tives du métier.</p>
 
-
-
 <p>Je n’ai que 43 ans mais ça fait déjà 10 ans que je suis dans les plus âgés des dépar­te­ments tech­niques. C’est hallu­ci­nant quand j’y pense. Le temps ne se dérou­lant que dans un sens, ça ne risque pas de s’ar­ran­ger.</p>
 
-
-
 <hr class="wp-block-separator has-alpha-channel-opacity">
 
-
-
 <p>J’ai un peu ri (jaune) quand un coach m’a dit à 36 ans « tu entames ta seconde moitié de carrière, il va falloir te fixer quelque part ». Désor­mais je ne ris plus.</p>
 
-
-
 <p>Ayant bifurqué vers les postes de direc­tion, j’ai proba­ble­ment un peu plus de temps que d’autres devant moi mais la ques­tion finira par arri­ver, surtout dans mon domaine profes­sion­nel :</p>
 
-
-
 <p>Qui donc m’em­bau­chera quand j’au­rai 55, 60 ou 65 ans ? Ne risque-je pas de me retrou­ver sur le carreau ?</p>
 
-
-
 <hr class="wp-block-separator has-alpha-channel-opacity">
 
-
-
 <p>Fut un temps je pensais juste à trou­ver une place où je puisse rester 10 ans. En réalité il faudrait plutôt parler de 15 ans ou plus.</p>
 
-
-
 <p>Et là je regarde autour de moi, dans le milieu des star­tups et boites tech. Il est très diffi­cile de se proje­ter à 10 ou 15 ans. Il peut se passer mille choses.</p>
 
-
-
 <p>Entre un échec, des plans de licen­cie­ment, un rachat, ou juste un licen­cie­ment indi­vi­duel pour faire place à quelqu’un de plus jeune ou qui aura vécu l’étape d’après de l’évo­lu­tion de l’en­tre­pri­se… je ne me sens pas du tout <em>en sécu­rité</em> pour me dire que j’y serais encore à l’âge de ma retraite.</p>
 
-
-
 <p>Si quoi que ce soit se passe, je risque de repar­tir à cher­cher un poste au mauvais moment, à un âge où ce sera diffi­cile.</p>
 
-
-
 <p>L’autre option c’est quit­ter le monde des nouvelles entre­prises, star­tups et boites hyper tech pour entrer dans un grand groupe. Ces grands groupes sont plus stables, et plus habi­tués à garder des sala­riés jusqu’à la retraite.</p>
 
-
-
 <p>Ce n’est pas magique non plus et ça peut être diffi­cile de taper à la porte à 60 ou 65 ans. Et donc, à partir de quel âge faut-il que je m’ima­gine devoir cher­cher une place dans un grand groupe pour ma fin de carrière si jamais l’en­tre­prise où je suis n’est pas devenu un grand groupe entre temps ?</p>
 
-
-
 <hr class="wp-block-separator has-alpha-channel-opacity">
 
-
-
 <p>Je ne sais pas et ça m’oc­cupe l’es­prit. J’ai l’im­pres­sion d’avoir une horloge biolo­gique que je ne dois plus igno­rer. Le gouver­ne­ment qui pense à chaque fois rallon­ger l’âge de départ à la retraite sans réel­le­ment chan­ger l’em­ploi des seniors n’aide pas beau­coup à ma séré­nité. </p>

cache/2024/1d60fc5548a6fe61da80a4e16892fa0c/index.md

@@ -2,22 +2,27 @@ title: Deep Democracy - IAPOP
 url: https://iapop.com/deep-democracy/
 hash_url: 1d60fc5548a6fe61da80a4e16892fa0c
 archive_date: 2024-01-31
+og_image: 
+description: Definition of Deep Democracy The concept of Deep Democracy was developed by Arnold Mindell. It is defined as an attitude and a principle. Attitude: Deep Democracy is an attitude that […]
 
 <h3>Definition of Deep Democracy</h3>
 <p>The concept of Deep Democracy was developed by Arnold Mindell. It is defined as an attitude and a principle.</p>
-<p class="quote">Attitude:	Deep Democracy is an attitude that focuses on the awareness of voices that are both central and marginal. This type of awareness can be focused on groups, organizations, one’s own inner experiences, people in conflict, etc. Allowing oneself to take seriously seemingly unimportant events and feelings can often bring unexpected solutions to both group and inner conflicts.</p>
-<p class="quote">Principle: 	Unlike “classical” democracy, which focuses on majority rule, Deep Democracy suggests that all voices, states of awareness, and frameworks of reality are important. Deep Democracy also suggests that the information carried within these voices, awarenesses, and frameworks are all needed to understand the complete process of the system. The meaning of this information appears, when the various frameworks and voices are relating to each other. Deep Democracy is a process of relationship, not a state-oriented still picture, or a set of policies.</p>
+<p class="quote">Attitude:  Deep Democracy is an attitude that focuses on the awareness of voices that are both central and marginal. This type of awareness can be focused on groups, organizations, one’s own inner experiences, people in conflict, etc. Allowing oneself to take seriously seemingly unimportant events and feelings can often bring unexpected solutions to both group and inner conflicts.</p>
+<p class="quote">Principle:     Unlike “classical” democracy, which focuses on majority rule, Deep Democracy suggests that all voices, states of awareness, and frameworks of reality are important. Deep Democracy also suggests that the information carried within these voices, awarenesses, and frameworks are all needed to understand the complete process of the system. The meaning of this information appears, when the various frameworks and voices are relating to each other. Deep Democracy is a process of relationship, not a state-oriented still picture, or a set of policies.</p>
 <p>From Deep Democracy principle and attitude, Glossary: [1]</p>
 <h3>A Brief History of Deep Democracy</h3>
 <p>Deep Democracy is a psycho-social-political paradigm and methodology. The term Deep Democracy was developed by Arny Mindell in 1988 and first appeared in Leader as Martial Artist (Mindell, 1992). Mindell, a physicist and Jungian Analyst had researched and written extensively on how awareness creates reality and how we perceive it on different levels, creating different frameworks of reality. An example for this is how we perceive time: the measurable reality of the seconds ticking in a clock, the dreamlike “subjective” perception of time as it passes during an encounter with a lover, and the sentient essence of timelessness as we catch the moment of a sunrise that goes beyond time as we know it and replaces, for a moment, the concept of future with hope. Mindell calls his paradigm Processwork, which formulates these principles and demonstrates how they can be used in psychotherapy in many of his books. In the late eighties he started to formulate them as a political principle that he called Deep Democracy. Unlike “classical” democracy, which focuses on majority rule, Deep Democracy suggests that all voices, states of awareness, and frameworks of reality are important. Deep Democracy also suggests that the information carried within these voices, awarenesses, and frameworks are all needed to understand the complete process of the system. Deep Democracy is an attitude that focuses on the awareness of voices that are both central and marginal.</p>
-<p>			
-</p><div class="ngg-gallery-singlepic-image ngg-left">
+<p>         
+</p>
+<div class="ngg-gallery-singlepic-image ngg-left">
 <a href="https://iapop.com/wp-content/gallery/admin/crdlse300.gif" title="" data-src="https://iapop.com/wp-content/gallery/admin/crdlse300.gif" data-thumbnail="https://iapop.com/wp-content/gallery/admin/thumbs/thumbs_crdlse300.gif" data-image-id="26" data-title="CR DL SE outlines" data-description="" target="_self" class="shutterset_f8297252056becfbf675efe5c4f6b8f7">
 <img class="ngg-singlepic" src="https://iapop.com/wp-content/gallery/admin/cache/crdlse300.gif-nggid0226-ngg0dyn-0x0x100-00f0w010c010r110f110r010t010.gif" alt="CR DL SE outlines" title="CR DL SE outlines">
 </a>
-</div><p>
+</div>
+<p>
 This type of awareness can be focused on groups, organizations, one’s own inner experiences, people in conflict, etc. Allowing oneself to take seriously seemingly unimportant events and feelings can often bring unexpected solutions to both group and inner conflicts.
-</p><p>Although the term and the concepts of Deep Democracy are now being used by various groups in different ways they have a common denominator that Mindell describes so well: An experience of Deep Democracy as a process of flow in which all actors on the stage are needed to create the play that we are watching.</p>
+</p>
+<p>Although the term and the concepts of Deep Democracy are now being used by various groups in different ways they have a common denominator that Mindell describes so well: An experience of Deep Democracy as a process of flow in which all actors on the stage are needed to create the play that we are watching.</p>
 <p>Numerous attempts to implement Deep Democracy are occurring simultaneously throughout the world. Just as conventional democracy strives to include all people in a political process, Deep Democracy furthers this by striving to foster a deeper level of dialogue and inclusivity that is open to including not only all people in the sense of the right to vote but is also open to allowing space for various and competing views, tensions, feelings, and styles of communication in a way that supports awareness of relative rank, power, and privilege and the ways in which these tend to marginalize various views, individuals, and groups.</p>
 <p class="quote">Deep Democracy is our sense that the world is here to help us to become our entire selves, and that we are here to help the world to become whole (Mindell, 1992).</p>
 <h3>Roots of Democracy</h3>
@@ -58,4 +63,4 @@ Deep Democracy has crossed over into many fields and has been picked up by many
 <p>One of the primary concerns of Deep Democracy is the use, maintenance, and awareness of metaskills (Arnold Mindell, 1992, p. 49). The concept of openness to diversity and dialogue between various views doesn’t mean that the facilitator is a pushover—that is only one metaskill (although it often reflects a lack of awareness). Facilitators must also at times practice, embody, and express other metaskills such as toughness, anger, intractability, love, detachment, concern for the well being of the others, and a genuine desire to achieve consensus. Some of the metaskills in that list are organic responses. However, when a facilitator uses her internal organic responses to better inform her intervention, that is a metaskill. This is the reason why the human development—the internal psychological and spiritual growth and inner peace—of the facilitator is so important.</p>
 <p>Deep Democracy involves not only openness to other individuals, groups, and diverse views but an openness to experience; which includes feelings, dreams, body symptoms, altered states of consciousness, synchronicities, and an awareness of signals, roles, and the structural dynamics of the interactions between the parties involved.<br>
 Repression and exploitation are the two most basic modern forms of structural violence; cardiovascular diseases and cancer are the two basic somatic conditions brought on by modernization. Repression and cardiovascular diseases are similar in that both impede circulation. Exploitation and cancer resemble each other in that a part of the social or human organism lives at the expense of the rest. Peace research and health research are metaphors for each other; each can learn from the other. Similarly, both peace theory and medical science emphasize the role of consciousness and mobilization in healing.</p>
-<p>The relationship between somatic experience, altered states of consciousness, and conflict may not be only metaphorical. Ikeda says that Buddhism (and other spiritual traditions) “transcends the dimension on which all phenomena are perceived as interrelated and reveals the dynamism of the universal life on which all interrelations depend.” Similarly, Process Oriented Psychology (also known as Process Work) and its Worldwork theories and practice use experiential phenomena to reveal the deeper underlying universal dynamic and its interrelations on a practical level.</p>
+<p>The relationship between somatic experience, altered states of consciousness, and conflict may not be only metaphorical. Ikeda says that Buddhism (and other spiritual traditions) “transcends the dimension on which all phenomena are perceived as interrelated and reveals the dynamism of the universal life on which all interrelations depend.” Similarly, Process Oriented Psychology (also known as Process Work) and its Worldwork theories and practice use experiential phenomena to reveal the deeper underlying universal dynamic and its interrelations on a practical level.</p>

cache/2024/1f40a33f9c57a16d420eb0868a129e96/index.md

@@ -2,10 +2,13 @@ title: Notes from “An approach to computing and sustainability inspired from p
 url: https://blog.jim-nielsen.com/2024/notes-from-computing-sustainably/
 hash_url: 1f40a33f9c57a16d420eb0868a129e96
 archive_date: 2024-01-15
+og_image: 
+description: Writing about the big beautiful mess that is making things for the world wide web.
 
 <p class="image-container"><img src="https://cdn.jim-nielsen.com/blog/2023/mcdonalds-tech.jpg" alt="Patent-application-like drawing with a person on a sofa looking at a TV with a hamburger on it and a caption bubble that says, “Say 'McDonalds' to end commercial”">
 
-</p><blockquote>
+</p>
+<blockquote>
 <p>I am interested in computers as a way to do more than consume.</p>
 </blockquote>
 <p>That’s how Devine starts <a href="https://www.youtube.com/watch?v=T3u7bGgVspM">their talk from Strangeloop</a>. <a href="https://blog.jim-nielsen.com/2023/precarious-modern-computing/">I’ve linked to them before</a>, as they have an interesting perspective on computing in the 21st century (given, in part, their environment of living on a boat).</p>
@@ -40,4 +43,4 @@ archive_date: 2024-01-15
 <p>This insight seems to come from Devine’s experience of living on a sailboat, which is an environment that is constantly imposing limitations.</p>
 <p>For example, Devine notes that on a boat you have a limited supply of power. When you can’t do something on a boat because you don’t have the power, people’s natural inclination is to respond, “Well then just add more power”. Devine notes that is a possibility, but there’s a tradeoff: it produces more weight on the boat which means (for example) that it will be harder to outrun storms and they’ll therefore need more power to move the boat at the same speed as before. There’s a balance to it all.</p>
 <p>Going back to the original quote, the insight here (I think) is: systems that preserve transparency into the mechanisms of their inner workings encourage more mindful, deliberate use based in reality because people develop knowledge through use. (This stands in contrast to a system whose inner workings are opaque and therefore antithetical to developing knowledge because they reveal no <a href="https://adactio.com/journal/6786">seams</a> to their true nature.)</p>
-<p>I think there’s a parallel here to the abstractions we use in software (like web frameworks) and how they choose to reveal their own inner workings (or not). But I will leave that as an exercise for the reader — and myself, perhaps in another post.</p>
+<p>I think there’s a parallel here to the abstractions we use in software (like web frameworks) and how they choose to reveal their own inner workings (or not). But I will leave that as an exercise for the reader — and myself, perhaps in another post.</p>

cache/2024/1fe484434058e9c44d21bfebb0ddba31/index.md

@@ -2,6 +2,8 @@ title: ce que nous laissons
 url: https://www.la-grange.net/2024/01/23/legacy
 hash_url: 1fe484434058e9c44d21bfebb0ddba31
 archive_date: 2024-01-28
+og_image: 
+description: 
 
 <figure>
   <img src="https://www.la-grange.net/2024/01/23/3152-ciel.jpg" alt="Ciel nuageux au dessus de maisons. On ne voit que le premier étage des maisons.">
@@ -31,4 +33,4 @@ archive_date: 2024-01-28
 <p><a href="https://carnet.fabriquedunumerique.org/les-editions-cartoneras-innovation-editoriale-et-fabrication-artisanale-de-livres-dans-une-perspective-sociale-et-ecologique/">Les éditions « cartoneras » : innovation éditoriale et fabrication artisanale de livres dans une perspective sociale et écologique</a> via <a href="https://mastodon.cloud/@reneaudet@mamot.fr/111800175336291625">René Audet</a></p>
 <blockquote>
 <p>Présentée comme « l’une des pratiques éditoriales les plus révolutionnaires de ces dernières années 6», les Éditions Eloísa Cartonera fabriquent ainsi des livres ayant un « aspect rudimentaire » : les couvertures sont faites en carton recyclé et peintes à la main, les pages sont photocopiées ou imprimées à la maison, puis maintenues par des agrafes ou collées à la couverture7. À cela s’ajoute une production aux tirages limités qui dépend directement de la demande.</p>
-</blockquote>
+</blockquote>

cache/2024/284205d0f99390dd18d3af12ff53227c/index.md

@@ -2,6 +2,8 @@ title: Redeployment Part Two
 url: https://brr.fyi/posts/redeployment-part-two
 hash_url: 284205d0f99390dd18d3af12ff53227c
 archive_date: 2024-01-21
+og_image: https://brr.fyi/media/redeployment-part-two/redeployment-part-two-icon.jpg
+description: First flight to the South Pole after a long, isolated winter. Winterover staff handing over their work and preparing to depart.
 
 <p><em>This is part two of a multi-part series. Check out
     <a href="https://brr.fyi/posts/redeployment-part-one">part one</a> if you haven’t already, then check out
@@ -451,4 +453,4 @@ archive_date: 2024-01-21
 </p>
 <p><em>This is part two of a multi-part series. Check out
     <a href="https://brr.fyi/posts/redeployment-part-one">part one</a> if you haven’t already, then check out
-    <a href="https://brr.fyi/posts/redeployment-part-three">part three</a> next!</em></p>
+    <a href="https://brr.fyi/posts/redeployment-part-three">part three</a> next!</em></p>

cache/2024/291cddda62f18ec9355ec98761b7e9d9/index.md

@@ -2,6 +2,8 @@ title: Writing with AI
 url: https://ia.net/topics/writing-with-ai
 hash_url: 291cddda62f18ec9355ec98761b7e9d9
 archive_date: 2024-01-21
+og_image: https://ia.net/wp-content/uploads/2023/11/keep-it-real-writing-with-AI-1024x475.png
+description: When ChatGPT came out one year ago, we wanted to know whether and how it could be used for writing. We put it to the test.
 
 <p>When ChatGPT came out one year ago, we wanted to know whether and how it could be used for writing. We put it to the test and came up with a careful answer.</p>
 <p>This article is part two of a series about the <a href="https://ia.net/topics/no-feature">history</a>, reason, and the <a href="https://ia.net/topics/ia-writer-7">design</a> of iA Writer 7, our cautious response to AI. In this article, we answer the following five questions:</p>
@@ -122,4 +124,4 @@ archive_date: 2024-01-21
 <li>How do we make human and artificial text discernible as we write without adding a lot of methodical, technical and graphical complexity?</li>
 </ul>
 <p>At first we thought that we should simply quote AI like we quote other authors. <em>Maybe we could use single straight quotes for AI text, or something like that.</em> But we soon found out that markup doesn’t work at all. Quoting AI is not the same as quoting people. When we use artificial text, we don’t necessarily quote entire sentences or paragraphs. What happens is nitty-gritty patchwork. And ideally, in the end we edit all AI away. How should that work? This is a riddle we had to solve in design and code. Stay tuned to see our solution.</p>
-<p><em>This article is part two of a series about the <a href="https://ia.net/topics/no-feature">history</a>, reason, and the <a href="https://ia.net/topics/ia-writer-7">design</a> of iA Writer 7, our cautious response to AI.</em></p>
+<p><em>This article is part two of a series about the <a href="https://ia.net/topics/no-feature">history</a>, reason, and the <a href="https://ia.net/topics/ia-writer-7">design</a> of iA Writer 7, our cautious response to AI.</em></p>

cache/2024/30b40ff8034212e070dc7daf2b9406e9/index.md

@@ -2,6 +2,8 @@ title: an "archives first" approach to mailing lists
 url: https://public-inbox.org/README.html
 hash_url: 30b40ff8034212e070dc7daf2b9406e9
 archive_date: 2024-01-19
+og_image: 
+description: 
 
 <pre>public-inbox - an "archives first" approach to mailing lists
 ------------------------------------------------------------
@@ -97,10 +99,10 @@ Hacking
 
 AGPL source code is available via git:
 
-	git clone <a href="https://public-inbox.org/public-inbox.git">https://public-inbox.org/public-inbox.git</a>
-	git clone <a href="https://repo.or.cz/public-inbox.git">https://repo.or.cz/public-inbox.git</a>
-	torsocks git clone <a href="http://7fh6tueqddpjyxjmgtdiueylzoqt6pt7hec3pukyptlmohoowvhde4yd.onion/public-inbox.git">http://7fh6tueqddpjyxjmgtdiueylzoqt6pt7hec3pukyptlmohoowvhde4yd.onion/public-inbox.git</a>
-	torsocks git clone <a href="http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/public-inbox">http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/public-inbox</a>
+    git clone <a href="https://public-inbox.org/public-inbox.git">https://public-inbox.org/public-inbox.git</a>
+    git clone <a href="https://repo.or.cz/public-inbox.git">https://repo.or.cz/public-inbox.git</a>
+    torsocks git clone <a href="http://7fh6tueqddpjyxjmgtdiueylzoqt6pt7hec3pukyptlmohoowvhde4yd.onion/public-inbox.git">http://7fh6tueqddpjyxjmgtdiueylzoqt6pt7hec3pukyptlmohoowvhde4yd.onion/public-inbox.git</a>
+    torsocks git clone <a href="http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/public-inbox">http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/public-inbox</a>
 
 See below for contact info.
 
@@ -112,7 +114,7 @@ public-inbox discussion is self-hosting on public-inbox.org
 Please send comments, user/developer discussion, patches, bug reports,
 and pull requests to our public-inbox address at:
 
-	meta@public-inbox.org
+    meta@public-inbox.org
 
 Please Cc: all recipients when replying as we do not require
 subscription.  This also makes it easier to rope in folks of
@@ -121,26 +123,26 @@ on git@vger.kernel.org).
 
 The archives are readable via IMAP, NNTP or HTTP:
 
-	<a href="nntps://news.public-inbox.org/inbox.comp.mail.public-inbox.meta">nntps://news.public-inbox.org/inbox.comp.mail.public-inbox.meta</a>
-	imaps://;AUTH=ANONYMOUS@public-inbox.org/inbox.comp.mail.public-inbox.meta.0
-	<a href="https://public-inbox.org/meta/">https://public-inbox.org/meta/</a>
+    <a href="nntps://news.public-inbox.org/inbox.comp.mail.public-inbox.meta">nntps://news.public-inbox.org/inbox.comp.mail.public-inbox.meta</a>
+    imaps://;AUTH=ANONYMOUS@public-inbox.org/inbox.comp.mail.public-inbox.meta.0
+    <a href="https://public-inbox.org/meta/">https://public-inbox.org/meta/</a>
 
 AUTH=ANONYMOUS is recommended for IMAP, but any username + password works
 
 And as Tor hidden services:
 
-	<a href="http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/meta/">http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/meta/</a>
-	<a href="nntp://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/inbox.comp.mail.public-inbox.meta">nntp://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/inbox.comp.mail.public-inbox.meta</a>
-	imap://;AUTH=ANONYMOUS@4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/inbox.comp.mail.public-inbox.meta.0
+    <a href="http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/meta/">http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/meta/</a>
+    <a href="nntp://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/inbox.comp.mail.public-inbox.meta">nntp://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/inbox.comp.mail.public-inbox.meta</a>
+    imap://;AUTH=ANONYMOUS@4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/inbox.comp.mail.public-inbox.meta.0
 
 You may also clone all messages via git:
 
-	git clone --mirror <a href="https://public-inbox.org/meta/">https://public-inbox.org/meta/</a>
-	torsocks git clone --mirror <a href="http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/meta/">http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/meta/</a>
+    git clone --mirror <a href="https://public-inbox.org/meta/">https://public-inbox.org/meta/</a>
+    torsocks git clone --mirror <a href="http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/meta/">http://4uok3hntl7oi7b4uf4rtfwefqeexfzil2w6kgk2jn5z2f764irre7byd.onion/meta/</a>
 
 POP3 access instructions are at:
 
-	<a href="https://public-inbox.org/meta/_/text/help/#pop3">https://public-inbox.org/meta/_/text/help/#pop3</a>
+    <a href="https://public-inbox.org/meta/_/text/help/#pop3">https://public-inbox.org/meta/_/text/help/#pop3</a>
 
 Anti-Spam
 ---------
@@ -192,4 +194,4 @@ Additional permission under GNU GPL version 3 section 7:
     Corresponding Source for a non-source form of such a combination
     shall include the source code for the parts of OpenSSL used as well
     as that of the covered work.
-</pre>
+</pre>

cache/2024/34fec23081019abd741e0578b050c40e/index.md

@@ -2,6 +2,8 @@ title: Tools shape practices shape tools…
 url: https://www.quaternum.net/2024/01/08/tools-shape-practices-shape-tools/
 hash_url: 34fec23081019abd741e0578b050c40e
 archive_date: 2024-01-11
+og_image: 
+description: Je découvre (très) tardivement ce _mantra_, ou plutôt ce positionnement récursif et infini : les pratiques modèlent les outils qui modèlent les pratiques etc.
 
 <blockquote>
 <p>When i first saw it, i felt it so nicely expressed something that had been deep in my heart. I continue to unfold its many meanings: both broader and more specific than F/LOSS culture.<br>
@@ -9,4 +11,4 @@ Doriane, <a href="https://practices.tools/">https://practices.tools</a></p>
 </blockquote>
 <p>Je découvre (très) tardivement ce <em>mantra</em>, ou plutôt ce positionnement récursif et infini : les pratiques modèlent les outils qui modèlent les pratiques qui modèlent les pratiques qui etc.
 Je partage le sentiment de Doriane, à tel point qu’il s’agit là en partie du sujet de ma thèse : les pratiques et les outils sont imbriqués, phénomène que j’ai conceptualisé cela sous le nom de <a href="https://www.quaternum.net/2023/06/02/fabrique-concept/">fabrique</a>.
-Je trouve cette idée du sticker web qui tourne particulièrement bien trouvée.</p>
+Je trouve cette idée du sticker web qui tourne particulièrement bien trouvée.</p>

cache/2024/3debc675a055d691b32c7d6904531eb4/index.md

@@ -2,6 +2,8 @@ title: How Google perfected the web
 url: https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization
 hash_url: 3debc675a055d691b32c7d6904531eb4
 archive_date: 2024-01-09
+og_image: https://cdn.vox-cdn.com/thumbor/rI0hi-8y0YsMgQMRiktUVnB_dqY=/204x320:2796x1681/fit-in/1200x630/cdn.vox-cdn.com/uploads/chorus_asset/file/25205711/236934_The_Perfect_Webpage_Google_SEO.jpg
+description: How the internet reshaped itself around Google’s search algorithms — and into a world where websites look the same.
 
 <div class="text-block ">
 <p>As the 14th season of Bravo’s <em>Real Housewives of New York City </em>came to a close this fall, I found myself on Reddit, reading rumors about the marriage and divorce timeline of one of the show’s stars. Redditors wanted more clues about a fishy relationship history to see if they could uncover a cheating scandal.</p>
@@ -31,8 +33,6 @@ archive_date: 2024-01-09
 
 </div>
 
-
-
 <div class="text-block ">
 <h2>1. Site performance and accessibility</h2>
 <p>There’s an inherent contradiction in what Google promises is the best way to succeed on Search. Publicly, Google representatives like search liaison Danny Sullivan give a simple, almost quaint answer to business owners who want help: you just need to make great content for people, not Google’s robots.</p>
@@ -56,8 +56,6 @@ archive_date: 2024-01-09
 
 </div>
 
-
-
 <div class="text-block ">
 <h2>2. Page design and structure of articles</h2>
 <p>The small, behind-the-scenes changes site operators deployed over the years have made browsing the web — especially on mobile — more frictionless and enjoyable. But Google’s preferences and systems don’t just guide how sites run: Search has also influenced how information looks and how audiences experience the internet. The project of optimizing your digital existence for Google doesn’t stop at page design. The content has to conform, too.</p>
@@ -81,8 +79,6 @@ archive_date: 2024-01-09
 
 </div>
 
-
-
 <div class="text-block ">
 <h2>3. Keyword research and what content is made</h2>
 <p>For publishers handcuffed to Google Search traffic, there’s often no reason to produce content if people aren’t searching for it. So marketers, writers, and bloggers use a suite of keyword research tools to assess whether there’s enough interest to write the article or make the video in the first place. The result is that publishers end up producing a mountain of material, with Google keywords essentially acting like the assigning editor.</p>
@@ -128,8 +124,6 @@ archive_date: 2024-01-09
 
 </div>
 
-
-
 <div class="text-block ">
 <h2>4.  Building “trust,” Google’s way</h2>
 <p>If you’re a regular reader of <em>The Verge</em>, you might have noticed some changes to our author bylines in recent months: they’re a lot longer, with more details, name-dropping, and quantifying our professional experiences. You can thank Google for that.</p>
@@ -157,8 +151,6 @@ archive_date: 2024-01-09
 
 </div>
 
-
-
 <div class="text-block  endmark">
 <h2>5. Generative AI and the future of Search</h2>
 <p>Earlier this year, Google unveiled what could become the biggest shift in how people find information online since the advent of Search: <a href="https://www.theverge.com/2023/5/10/23717120/google-search-ai-results-generated-experience-io">results generated using artificial intelligence</a>.</p>
@@ -186,4 +178,4 @@ archive_date: 2024-01-09
 
 <p>It’s all but certain that a new era of content relentlessly optimized for AI search engines is bound to result in the same kinds of problems we have today. And with that realization, there is a chance at another way forward, without the almost religious dependence on Google; searching and creating for a vacillating overlord feels increasingly futile. And when the creators and searchers leave the web for good, Google will have nobody to blame but itself.</p>
 
-</div>
+</div>

cache/2024/3ea27fca4fabb81676fc1b98264f3bd8/index.md

@@ -2,6 +2,8 @@ title: It’s OK to call it Artificial Intelligence
 url: https://simonwillison.net/2024/Jan/7/call-it-ai/
 hash_url: 3ea27fca4fabb81676fc1b98264f3bd8
 archive_date: 2024-01-13
+og_image: 
+description: Update 9th January 2024: This post was clumsily written and failed to make the point I wanted it to make. I’ve published a follow-up, What I should have said about …
 
 <p><em><strong>Update 9th January 2024</strong>: This post was clumsily written and failed to make the point I wanted it to make. I’ve published a follow-up, <a href="https://simonwillison.net/2024/Jan/9/what-i-should-have-said-about-ai/">What I should have said about the term Artificial Intelligence</a> which you should read instead.</em></p>
 <p><em>My original post follows.</em></p>
@@ -44,8 +46,6 @@ archive_date: 2024-01-13
 
 <p>I don’t think refusing to use the term AI is an effective tool to help us do that.</p>
 
-
-
 <h4 id="not-agi-instead">Let’s tell people it’s “not AGI” instead</h4>
 <p>If we’re going to use “Artificial Intelligence” to describe the entire field of machine learning, generative models, deep learning, computer vision and so on... what should we do about the science fiction definition of AI that’s already lodged in people’s heads?</p>
 <p>Our goal here is clear: we want people to understand that the LLM-powered tools they are interacting with today aren’t actually anything like the omniscient AIs they’ve seen in science fiction for the <a href="https://en.wikipedia.org/wiki/Erewhon">past ~150 years</a>.</p>
@@ -76,4 +76,4 @@ archive_date: 2024-01-13
 <p>A lot of insiders—not practitioners as such, but marketers &amp; executives—use “AI” as the label not in spite of its confusion with the layperson’s definition, but because of it. Investors who vaguely associate it with machine-god hegemony assume that it will be very profitable. Users assume it will solve their problems. It’s a term whose primary purpose has become deceptive.</p>
 <p>At the same time, a lot of the deception is unintentional. When you exist in a sector of the industry that the public knows as “AI”, that the media calls “AI”, that industry publications refer to as “AI”, that other products identify as “AI”, going out on a limb and trying to build a brand identity around pedantic hairsplitting around “LLMs” and “machine learning” is a massive uphill battle which you are disincentivized at every possible turn to avoid.</p>
 </blockquote>
-<p>Glyph’s closing thought here reflects my own experience: I tried to avoid leaning too hard into the term “AI” myself, but eventually it felt like an uphill battle that was resulting in little to no positive impact.</p>
+<p>Glyph’s closing thought here reflects my own experience: I tried to avoid leaning too hard into the term “AI” myself, but eventually it felt like an uphill battle that was resulting in little to no positive impact.</p>

cache/2024/40aada3cc8d6897fda5a277c4299c1fd/index.md

@@ -2,6 +2,8 @@ title: We Need to Talk About the Front Web
 url: https://gericci.me/we-need-to-talk-about-the-front-web-5.html
 hash_url: 40aada3cc8d6897fda5a277c4299c1fd
 archive_date: 2024-01-09
+og_image: https://gericci.me/img/touch-icon-iphone-retina.png
+description: Clues to Fix the Front Web
 
 <p>In the previous articles of this series, we have seen 
 <a href="we-need-to-talk-about-the-front-web-2.html">
@@ -34,12 +36,11 @@ they're always surprised when they realise they are going to learn
 HTML and CSS with me!
 </p>
 
-    <p>All gets worse once we realize that those who are 
+<p>All gets worse once we realize that those who are 
 teaching the future front web developers are also developers 
 that have come from the same flawed curriculum, with 
 the same prejudices against the front, and the same lack 
 of proper knowledge of the nature of the web.</p>
-
 <p>In their education, the <strong>advantages and singularities 
 of the front web disappear</strong> in favour of tools and 
 “higher” goals as back development.

cache/2024/4a56aa5497e68df0c5bb1d5331203219/index.md

@@ -2,8 +2,15 @@ title: When “Everything” Becomes Too Much: The npm Package Chaos of 2024
 url: https://socket.dev/blog/when-everything-becomes-too-much
 hash_url: 4a56aa5497e68df0c5bb1d5331203219
 archive_date: 2024-01-09
+og_image: https://cdn.sanity.io/images/cgdhsj6q/production/558608ba2958fabcc2578bbceb58f5061460fb32-1024x1024.png?w=1000&fit=max&auto=format
+description: An NPM user named PatrickJS launched a troll campaign with a package called "everything," which depends on all public npm packages.
 
-<p>Happy 2024, folks! Just when we thought we'd seen it all, an npm user named PatrickJS, aka <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/user/gdi2290">gdi2290</a>, threw us a curveball. He (<a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://uncenter.dev/posts/npm-install-everything/">along with a group of contributors</a>) kicked off the year with a bang, launching a troll campaign that uploaded an npm package aptly named <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/package/everything"><code>everything</code></a>. This package, true to its name, depends on every other public npm package, creating millions of transitive dependencies.</p><h3>The Chaos Unleashed</h3><p>The <code>everything</code> package and its 3,000+ sub-packages have caused a <a class="chakra-link css-pmuo56" href="https://socket.dev/glossary/denial-of-service-dos">Denial of Service (DOS)</a> for anyone who installs it. We're talking about storage space running out and system resource exhaustion.</p><p>But that's not all. The creator took their prank to the next level by setting up http://everything.npm.lol, showcasing the chaos they unleashed. They even included a meme from Skyrim, adding some humor (or mockery, depending on your perspective) to the situation.</p><h4><code>everything</code>'s <code>package.json</code> file</h4><pre class="css-1nw4yob"><code class="chakra-code css-y2ougk" lang="json">{
+<p>Happy 2024, folks! Just when we thought we'd seen it all, an npm user named PatrickJS, aka <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/user/gdi2290">gdi2290</a>, threw us a curveball. He (<a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://uncenter.dev/posts/npm-install-everything/">along with a group of contributors</a>) kicked off the year with a bang, launching a troll campaign that uploaded an npm package aptly named <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/package/everything"><code>everything</code></a>. This package, true to its name, depends on every other public npm package, creating millions of transitive dependencies.</p>
+<h3>The Chaos Unleashed</h3>
+<p>The <code>everything</code> package and its 3,000+ sub-packages have caused a <a class="chakra-link css-pmuo56" href="https://socket.dev/glossary/denial-of-service-dos">Denial of Service (DOS)</a> for anyone who installs it. We're talking about storage space running out and system resource exhaustion.</p>
+<p>But that's not all. The creator took their prank to the next level by setting up http://everything.npm.lol, showcasing the chaos they unleashed. They even included a meme from Skyrim, adding some humor (or mockery, depending on your perspective) to the situation.</p>
+<h4><code>everything</code>'s <code>package.json</code> file</h4>
+<pre class="css-1nw4yob"><code class="chakra-code css-y2ougk" lang="json">{
   "name": "everything",
   "version": "3.0.0",
   "description": "npm install everything",
@@ -34,4 +41,19 @@ archive_date: 2024-01-09
     "@everything-registry/chunk-3": "0.1.0",
     "@everything-registry/chunk-4": "0.1.0"
   }
-}</code></pre><h3>Echoes of the Past</h3><p>This isn't the first time we've seen such a stunt. Last year, the <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/package/no-one-left-behind/overview/2018.2.10"><code>no-one-left-behind</code></a> package by <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/user/zalastax">Zalastax</a> attempted something similar. It was removed, but then reemerged under a different scope with over 33,000 sub-packages. It's like playing whack-a-mole with npm packages!</p><p>It’s also reminiscent of a package called “hoarders” that used to directly depend on every module on npm (approximately 20,000 in 2012). It was published by software engineer Josh Holbrook, created to be “node.js's most complete utility grab bag.”</p><p>In an effort to maintain a secure and reliable ecosystem for JavaScript developers, <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://github.com/jfhbrook/hoarders#history">hoarders was effectively “cancelled”</a> by Isaac Schlueter (creator of the npm package manager) after a year, due to the strain it caused on the registry's database.</p><h3>Unintended Consequences</h3><p>The "everything" package, with its 5 sub-packages and thousands of dependencies, has essentially locked down the ability for authors to unpublish their packages. This situation is due to npm's policy shift following the infamous <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://qz.com/646467/how-one-programmer-broke-the-internet-by-deleting-a-tiny-piece-of-code">"left-pad" incident in 2016</a>, where a popular package <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/package/left-pad"><code>left-pad</code></a> was removed, grinding development to a halt across much of the developer world. In response, npm tightened its <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://docs.npmjs.com/policies/unpublish">rules around unpublishing</a>, specifically preventing the unpublishing of any package that is used by another package.</p><p>Ironically, this policy trapped PatrickJS in his own web. Upon realizing the impact of his prank, he attempted to remove the <code>everything</code> package but was unable to do so. He reached out to the npm support team for help, but the damage was done.</p><p>PatrickJS wrote this apology on GitHub in a <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://github.com/everything-registry/everything/issues/17">since-removed GitHub issue</a>:</p><blockquote>Hi all! First, just want to apologize about any difficulties this package has caused. We are working to resolve the issues and we have contacted NPM regarding support with this matter (see below). We appreciate your patience.<br><br>The major issue here is that when a package depends on another package at a specific version, that version cannot be unpublished. We've since realized there is an issue with "star" versions - a.k.a depending on any/all versions of another package ( "package-xyz": "*" ) - any version of that package is now unable to unpublish. As I previously mentioned, we've reached out to npm and are hoping they can either A) allow folks to unpublish when the packages that depend on them use a "star" version, B) not permit star versions in published packages going forward, or as a last resort, C) remove our npm organization entirely (and remove all of the packages that are blocking unpublishing). As far as we can tell, there is simply nothing we can do on our own - we can't unpublish the packages ourselves (because other packages depend on them) and publishing a new version over them doesn't change anything.</blockquote><p>However, we now see that while <code>everything</code> remains on the registry, the <code>@everything-registry</code> scoped packages have been made private, potentially offering a resolution.</p><h3>The Ripple Effect</h3><p>This whole saga is more than just a digital prank. It highlights the <a class="chakra-link css-pmuo56" href="https://socket.dev/blog/inside-node-modules">ongoing challenges</a> in package management within the npm ecosystem. For developers, it's a reminder of the cascading effects of dependencies and the importance of mindful package creation, maintenance, and consumption.</p><img alt=" " loading="lazy" src="https://cdn.sanity.io/images/cgdhsj6q/production/14461d25dd2f7a1cf456a840fe3bc1e98670e3e0-2162x1902.png?w=1600&amp;fit=max&amp;auto=format"><p>As we navigate the open source world, incidents like the <code>everything</code> package remind us of the delicate balance between freedom and responsibility in open-source software.</p><p>Install <a class="chakra-link css-pmuo56" href="https://socket.dev/github-app">Socket for GitHub</a> to stay secure this year, and let's see what the rest of 2024 has in store for us!</p>
+}</code></pre>
+<h3>Echoes of the Past</h3>
+<p>This isn't the first time we've seen such a stunt. Last year, the <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/package/no-one-left-behind/overview/2018.2.10"><code>no-one-left-behind</code></a> package by <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/user/zalastax">Zalastax</a> attempted something similar. It was removed, but then reemerged under a different scope with over 33,000 sub-packages. It's like playing whack-a-mole with npm packages!</p>
+<p>It’s also reminiscent of a package called “hoarders” that used to directly depend on every module on npm (approximately 20,000 in 2012). It was published by software engineer Josh Holbrook, created to be “node.js's most complete utility grab bag.”</p>
+<p>In an effort to maintain a secure and reliable ecosystem for JavaScript developers, <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://github.com/jfhbrook/hoarders#history">hoarders was effectively “cancelled”</a> by Isaac Schlueter (creator of the npm package manager) after a year, due to the strain it caused on the registry's database.</p>
+<h3>Unintended Consequences</h3>
+<p>The "everything" package, with its 5 sub-packages and thousands of dependencies, has essentially locked down the ability for authors to unpublish their packages. This situation is due to npm's policy shift following the infamous <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://qz.com/646467/how-one-programmer-broke-the-internet-by-deleting-a-tiny-piece-of-code">"left-pad" incident in 2016</a>, where a popular package <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/package/left-pad"><code>left-pad</code></a> was removed, grinding development to a halt across much of the developer world. In response, npm tightened its <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://docs.npmjs.com/policies/unpublish">rules around unpublishing</a>, specifically preventing the unpublishing of any package that is used by another package.</p>
+<p>Ironically, this policy trapped PatrickJS in his own web. Upon realizing the impact of his prank, he attempted to remove the <code>everything</code> package but was unable to do so. He reached out to the npm support team for help, but the damage was done.</p>
+<p>PatrickJS wrote this apology on GitHub in a <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://github.com/everything-registry/everything/issues/17">since-removed GitHub issue</a>:</p>
+<blockquote>Hi all! First, just want to apologize about any difficulties this package has caused. We are working to resolve the issues and we have contacted NPM regarding support with this matter (see below). We appreciate your patience.<br><br>The major issue here is that when a package depends on another package at a specific version, that version cannot be unpublished. We've since realized there is an issue with "star" versions - a.k.a depending on any/all versions of another package ( "package-xyz": "*" ) - any version of that package is now unable to unpublish. As I previously mentioned, we've reached out to npm and are hoping they can either A) allow folks to unpublish when the packages that depend on them use a "star" version, B) not permit star versions in published packages going forward, or as a last resort, C) remove our npm organization entirely (and remove all of the packages that are blocking unpublishing). As far as we can tell, there is simply nothing we can do on our own - we can't unpublish the packages ourselves (because other packages depend on them) and publishing a new version over them doesn't change anything.</blockquote>
+<p>However, we now see that while <code>everything</code> remains on the registry, the <code>@everything-registry</code> scoped packages have been made private, potentially offering a resolution.</p>
+<h3>The Ripple Effect</h3>
+<p>This whole saga is more than just a digital prank. It highlights the <a class="chakra-link css-pmuo56" href="https://socket.dev/blog/inside-node-modules">ongoing challenges</a> in package management within the npm ecosystem. For developers, it's a reminder of the cascading effects of dependencies and the importance of mindful package creation, maintenance, and consumption.</p>
+<p><img alt=" " loading="lazy" src="https://cdn.sanity.io/images/cgdhsj6q/production/14461d25dd2f7a1cf456a840fe3bc1e98670e3e0-2162x1902.png?w=1600&amp;fit=max&amp;auto=format">
+<p>As we navigate the open source world, incidents like the <code>everything</code> package remind us of the delicate balance between freedom and responsibility in open-source software.</p></p>
+<p>Install <a class="chakra-link css-pmuo56" href="https://socket.dev/github-app">Socket for GitHub</a> to stay secure this year, and let's see what the rest of 2024 has in store for us!</p>

cache/2024/5030196507bcf3e06162e9eaed40abbe/index.md

@@ -2,6 +2,8 @@ title: Blogging and Composting
 url: https://blog.jim-nielsen.com/2023/blogging-and-compositing/
 hash_url: 5030196507bcf3e06162e9eaed40abbe
 archive_date: 2024-01-11
+og_image: 
+description: Writing about the big beautiful mess that is making things for the world wide web.
 
 <p>Here’s a thought: blogging is like composting.</p>
 <p>The banana is what you’re after.</p>
@@ -13,4 +15,4 @@ archive_date: 2024-01-11
 <p>Even if the banana was spoiled when you opened it, you can still compost it.</p>
 <p>Similarly, even if you ship nothing, there’s a blog post in that failure-to-ship.</p>
 <p>Composting recycles organic materials to enrich future plant soil.</p>
-<p>Similarly, blogging recycles experience to enrich future projects (and self) with wisdom.</p>
+<p>Similarly, blogging recycles experience to enrich future projects (and self) with wisdom.</p>

cache/2024/55477786fc56b6fc37bb97231b634d90/index.md

@@ -2,6 +2,8 @@ title: Fabrique : concept
 url: https://www.quaternum.net/2023/06/02/fabrique-concept/
 hash_url: 55477786fc56b6fc37bb97231b634d90
 archive_date: 2024-01-07
+og_image: 
+description: Le terme fabrique définit une approche spécifique dans la création et dans la production d’artefact, y compris dans le domaine de l’édition.
 
 <p>Le terme <em>fabrique</em> définit une approche spécifique dans la création et dans la production d’artefact, y compris dans le domaine de l’édition.
 Pour débuter un échange <em>épistolaire</em>, par carnets <a href="https://blank.blue/fabrique/la-fabrique-a-faire/">interposés</a>, je me lance enfin dans la définition de ce concept.
@@ -367,174 +369,3 @@ Je laisse également cette question ouverte, et je ne prolonge pas plus, pour le
 <p>En guise de conclusion, ou d’ouverture vers d’autres explorations de ce concept, notons que la fabrique peut être l’occasion d’un mouvement circulaire, double, ou réflexif.
 En produisant un artefact avec une fabrique, la fabrique est elle-même modifiée, complétée, reconfigurée, autour de la production d’un artefact.</p>
 <p>Cette définition, qui tient plus de la prémisse d’une recherche en cours, permet d’identifier les enjeux et les tensions qui existent lorsque l’on parle de <em>fabrique</em>, et qui mérite d’être prolongée, dans un nouvel échange (j’espère).</p>
-<h2 id="références">Références</h2>
-
-
-
-
-
-
-
-
-
-
-
-
-
-<section class="hugo-cite-bibliography">
-<dl>
-
-
-<p id="eyrolles_les_2009">
-<dt>
-Eyrolles
-
-
-(2009)</dt>
-
-<dd>
-
-
-
-
-
-
-
-
-
-
-
-<span itemscope itemtype="https://schema.org/Book" data-type="book"><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="familyName">Eyrolles</span>, 
-<meta itemprop="givenName" content="Serge">
-S.</span> 
-(<span itemprop="datePublished">2009</span>).
-<span itemprop="name">
-<i>Les 100 mots de l’édition</i></span> (<span>1re éd</span>).
-<meta itemprop="contentLocation" value="Paris"> 
-<span itemprop="publisher" itemtype="http://schema.org/Organization" itemscope="">
-<span itemprop="name">Presses universitaires de France</span></span>.</span>
-
-
-
-
-</dd>
-
-</p>
-
-<p id="flusser_petite_2002">
-<dt>
-Flusser
-
-
-(2002)</dt>
-
-<dd>
-
-
-
-
-
-
-
-
-
-
-
-<span itemscope itemtype="https://schema.org/Book" data-type="book"><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="familyName">Flusser</span>, 
-<meta itemprop="givenName" content="Vilèm">
-V.</span> 
-(<span itemprop="datePublished">2002</span>).
-<span itemprop="name">
-<i>Petite philosophie du design</i></span>.
-<meta itemprop="contentLocation" value="Belfort, France"> 
-<span itemprop="publisher" itemtype="http://schema.org/Organization" itemscope="">
-<span itemprop="name">Circé</span></span>.</span>
-
-
-
-
-</dd>
-
-</p>
-
-<p id="flusser_shape_2013">
-<dt>
-Flusser
-
-
-(2013)</dt>
-
-<dd>
-
-
-
-
-
-
-
-
-
-
-
-<span itemscope itemtype="https://schema.org/Book" data-type="book"><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="familyName">Flusser</span>, 
-<meta itemprop="givenName" content="Vilém">
-V.</span> 
-(<span itemprop="datePublished">2013</span>).
-<span itemprop="name">
-<i>Shape of Things: a Philosophy of Design</i></span>.
-<meta itemprop="contentLocation" value="London"> 
-<span itemprop="publisher" itemtype="http://schema.org/Organization" itemscope="">
-<span itemprop="name">Reaktion Books</span></span>.</span>
-
-
-
-
-</dd>
-
-</p>
-
-<p id="ingold_faire_2017">
-<dt>
-Ingold, 
-Gosselin &amp; Afeissa
-
-
-(2017)</dt>
-
-<dd>
-
-
-
-
-
-
-
-
-
-
-
-<span itemscope itemtype="https://schema.org/Book" data-type="book"><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="familyName">Ingold</span>, 
-<meta itemprop="givenName" content="Tim">
-T.</span>, 
-<span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="familyName">Gosselin</span>, 
-<meta itemprop="givenName" content="Hervé.">
-H.</span> &amp; <span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="familyName">Afeissa</span>, 
-<meta itemprop="givenName" content="Hicham-Stéphane">
-H.</span> 
-(<span itemprop="datePublished">2017</span>).
-<span itemprop="name">
-<i>Faire: anthropologie, archéologie, art et architecture</i></span>.
-<meta itemprop="contentLocation" value="Bellevaux"> 
-<span itemprop="publisher" itemtype="http://schema.org/Organization" itemscope="">
-<span itemprop="name">Éditions Dehors</span></span>.</span>
-
-
-
-
-</dd>
-
-</p>
-
-
-</dl>
-</section>

cache/2024/62bf3ce6ef66e39b7f250a6123d92e66/index.md

@@ -2,7 +2,9 @@ title: Tomorrow & Tomorrow & Tomorrow
 url: https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow
 hash_url: 62bf3ce6ef66e39b7f250a6123d92e66
 archive_date: 2024-01-11
-      
+og_image: 
+description: We realize then that it is just the patterns of events in space which are repeating in the building or the town: and nothing else.
+
 <blockquote>
 <p>
 We realize then that it is just the patterns of events in space which are repeating in the building or the town: and nothing else.

cache/2024/6c3a6c638625148d7bb6a5c438c9b22a/index.md

@@ -2,22 +2,102 @@ title: Yearnotes #4 • détour.studio
 url: https://détour.studio/yearnotes/4/
 hash_url: 6c3a6c638625148d7bb6a5c438c9b22a
 archive_date: 2024-01-29
+og_image: https://détour.studio/weeknotes/images/2023/12/vercors-pre-peret.jpg
+description: Quatre années se sont écoulées depuis la première note hebdomadaire. 2024 est une année de dépassement : celle de ma plus longue activité professionnelle depuis que j’ai commencé à travailler en 2004. 20 ans. Bientôt la moitié de ma vie.
 
-<p>Quatre années se sont écoulées depuis <a href="https://détour.studio/weeknotes/1/">la première note hebdomadaire</a>. 2024 est une année de <em>dépassement</em> : celle de ma plus longue activité professionnelle depuis que j’ai commencé à travailler en 2004. 20 ans. Bientôt la moitié de ma vie.</p><p>J’ai demandé à <a href="https://fr.linkedin.com/in/marie-michel-b7758520">Marie Michel</a> ce qu’elle aurait aimé apprendre de mon activité en 2023. Un regard posé à la fois en rétrospective et en perspectives.</p>
-<h3 id="est-ce-que-tu-es-satisfait-de-ton-ratio-temps-travaillé--salaire-">Est-ce que tu es satisfait de ton ratio temps travaillé / salaire ?</h3><p>Oui sur l’aspect temps travaillé : j’ai pris deux pauses de 3 semaines, et quelques une de 1 semaine, en plus de la <a href="https://mixitconf.org/2017/travailler-moins-pour-gagner-moins">semaine de 4 jours</a>.</p><p>Je suis satisfait de l’équilibre temps facturé (en baisse), temps contribué (en hausse) et temps de repos (en hausse).</p><p>Mon salaire choisi<sup id="fnref:1"></sup> n’a pas bougé par rapport à 2021 et 2022.
-Mes besoins de vie ont augmenté cette année : déménagement et aménagement dans un nouveau logement, taxe foncière, menus travaux, séances de thérapie familiale à Bordeaux.</p><p>Je n’ai pas épargné. J’ai même plutôt puisé dans mes économies/capital.</p><p>Actuellement, je suis en tension entre augmenter mes tarifs et augmenter le salaire. Je questionne <a href="https://www.24joursdeweb.fr/2023/juste-place-vs-juste-prix/">juste place vs. juste prix</a> comme l’écrit Julie — salaire idéal, salaire confortable.</p><p>Je n’ai pas très envie de travailler plus — j’ai envie d’écarter cette option d’emblée. Augmenter le salaire augmente la pression sur la facturation. Augmenter les tarifs augmente la pression sur les clients.</p>
-<h3 id="avec-quelles-personnes-as-tu-pris-du-plaisir-à-travailler-et-serais-tu-prêt-à-réitérer-lexpérience-dans-les-années-à-venir-">Avec quelles personnes as-tu pris du plaisir à travailler et serais-tu prêt à réitérer l’expérience dans les années à venir ?</h3><p>Tellement de monde 😊</p><p><strong>Valentine</strong> : super compréhensive de mon rythme et de ma charge de travail en début d’année. On a une grande facilité à améliorer nos manières de travailler ensemble. Elle a de bonnes idées. On a pu être dans de la qualité sans pression.</p><p><strong>Philippe et Jérôme</strong> : on a décortiqué le mécanisme de l’accord d’intéressement de <a href="https://solstice.coop">notre CAE</a>, identifié des variables d’ajustements, comment font d’autres coopératives, où sont les pièges, quels sont les risques. Beaucoup d’apprentissages, à notre rythme.</p><p><strong><a href="https://www.batissedeliens.com/">Laura</a></strong> : découverte d’une super binôme à la fois à l’<a href="https://usinevivante.org">Usine Vivante</a> et avec la <a href="https://solstice.coop">coopérative Solstice</a>. On a bien bossé la raison d’être de l’Usine, partagé pas mal de réflexions sur les interactions humaines et été un appui mutuel dans des moments difficiles.</p><p><strong>Sofia</strong> : nos logiques de pensées et d’organisation se complètent <em>et</em> se comprennent bien depuis plusieurs années. Elle m’a sauvé en déminant une erreur financière dans un projet. Elle est d’excellent conseil quant aux outils d’animation liés au design d’interface et à la priorisation d’idées/choix.</p><p><strong>Anne, Anne-Sophie, Aymeric, Juliette, Mathilde, Maud et Roxann</strong> : c’est une de mes équipes préférées. Je n’avais pas connu ça depuis celle de <a href="https://www.bbc.co.uk/rd/people/thomas-parisot">Peaks.js</a> et des <a href="https://www.bbc.co.uk/rd/projects/editorial-algorithms">algorithmes éditoriaux</a>, avec <a href="https://www.bbc.co.uk/rd/people/chris-needham">Chris</a> et <a href="https://www.bbc.co.uk/rd/people/olivier-thereaux">Olivier</a>. On gère le budget ensemble, navigue dans les (dys)fonctionnements institutionnels et coordonne si bien le triptyque recherche utilisateur/design/développement. Les retours terrains sont excellents. Y’a une chouette ambiance et une amélioration continue de nos pratiques de travail. C’est une réussite, à quelques mois du franchissement de la ligne d’arrivée de ce projet de quatre années.</p><p><strong>Paul et Nadia</strong> : mention spéciale pour ces personnes reçues en entretien d’embauche… c’est du travail ! J’ai aimé leur pragmatisme, leur esprit de synthèse et le soin envers leur équipe.</p>
-<h3 id="quest-ce-que-tu-as-appris-qui-pourra-te-resservir-sur-des-aspects-opérationnels-">Qu’est-ce que tu as appris qui pourra te resservir sur des aspects opérationnels ?</h3><p>Des apprentissages <strong>techniques</strong>, principalement grâce à l’arrivée de Maud dans l’équipe CartoBio. J’ai progressé sur PostgreSQL et à la marge, JavaScript/TypeScript.</p><p>Le principal domaine de l’année a été… le <strong>recrutement</strong>. De la fabrication d’une offre (qu’est-ce qu’on veut ?), à la rencontre (qui es-tu ?) et à l’accueil (de quoi as-tu besoin pour te sentir bien ?). Ça m’a occupé une bonne moitié de l’année.</p><p>J’ai eu la confirmation que ma <strong>capacité à poser des questions</strong> et à expliciter étaient des atouts pour communiquer, donc écrire des lettres d’information — de la prise de note de réunion jusqu’à leur transcription digeste, avec des petites touches actionnables. Par exemple, en plus des dates de conseils d’administration, un rappel en une ligne de la procédure pour y assister, et rejoindre cet organe de travail.</p><p>J’ai beaucoup appris en <strong>psychologie systémique</strong>. J’avais envie de regarder autrement des situations bloquées ou prises dans des boucles répétitives. J’ai eu davantage recours à des médiations pour décaler, recréer de l’ouverture.</p><p>J’ai aussi appris que je n’ai pas appris autant que je voulais, qu’il me manquait des personnes proches, géographiquement et/ou de pensée, pour explorer des sujets. J’ai beaucoup fait par moi-même. J’aimerais changer ce déséquilibre.</p><p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/01/acab-bike.jpg" alt loading="lazy"><figcaption>Vélo abandonné à Montréal (janvier 2023).</figcaption></figure></p>
-<h3 id="dans-quels-types-de-tâches-tépanouis-tu-le-plus-">Dans quels types de tâches t’épanouis-tu le plus ?</h3><p>Il y’a clairement un triptyque <strong>défricher</strong>, <strong>explorer</strong> et <strong>clarifier</strong>.</p><p>J’adore aller chercher de la matière à réfléchir (quand on sait qu’on ne sait pas, sans savoir par où commencer), observer, cartographier, relier puis ramener à ce qu’on veut, au sens de ce qui nous réunit.</p><p>Je m’épanouis beaucoup dans la <strong>réflexion</strong>, au sens de renvoyer à l’autre des choses (remercier, dire ce que j’y vois, apprécie, encourage).<br>Et donc la <strong>relecture</strong>. De relier à ce que la personne y a mis, avec ses intentions, envies et doutes.</p><p>J’adore <strong>documenter</strong>. Que ça soit des <em>processus</em>, en <em>prospective</em> ou <em>rétrospective</em>. De manière orale (présentation à une conférence/séminaire/colloque), ou écrite (billet de blog).</p><p>Et puis <strong>décaler</strong>, les pensées, les situations et les perspectives. On a fait le tour de sujet ? Mais si on le prend comme ça, ça vient créer de l’ouverture ?</p>
-<h3 id="est-ce-quil-y-a-quelque-chose-que-tu-aimerais-faire-et-que-tu-nas-pas-fait-dans-lannée-">Est-ce qu’il y a quelque chose que tu aimerais faire et que tu n’as pas fait dans l’année ?</h3><p>J’aimerais retrouver de la confiance pour écrire des billets de blog conséquents, pas juste des entrées de journal. Expliquer pourquoi/comment je suis revenu au <em>smartphone</em>, comment j’aborde le recrutement de personnes, comment j’ai vécu sans posséder de voiture depuis 10 ans, etc.</p><p>Peut-être investir un peu de temps pour réparer l’<a href="https://github.com/thom4parisot/webextension-fip/">extension de navigateur qui permet d’écouter FIP en un clic</a> ? J’avoue, j’ai pas trop le cœur à <em>travailler</em> encore après le <em>travail</em>.</p><p>J’aimerais à nouveau contribuer à un projet existant, éloigné de mes cercles sociaux mais proche de mes centres d’intérêt. Un truc en rapport avec l’eau, ou l’alimentation, comme avec les <a href="https://resiliencealimentaire.org/">Greniers d’Abondance</a> il y’a quelques années.</p>
-<h3 id="cest-quoi-ta-prochaine-formation-">C’est quoi ta prochaine formation ?</h3><p>J’ai pas mal d’envies à ce niveau. Et certainement que je ne ferai pas tout cette année — voire rien du tout de cette liste.</p><p>L’organisation du travail mène à la psychologie du travail, et donc aux <strong>risques psychosociaux</strong>. J’aimerais avoir de meilleurs clés de compréhension, et d’outils à proposer quand je repère les situations.</p><p>Du droit à l’environnement ? Pour explorer une couche administrative experte dont les rouages m’échappent. Quels recours ? Pourquoi ? Comment ? Pour ne pas être dans le “non ce projet est nul” en me basant que sur mes goûts personnels/orientations politiques.</p><p>J’aimerais en savoir plus sur le <strong>milieu coopératif</strong>, du juridique jusqu’aux caractéristiques singulières. Peut-être pour être plus en phase avec le projet politique de base (mettre en commun nos outils de travail).</p><p>Pourquoi pas de la médiation ? Comme <a href="https://blog.notmyidea.org/">Alexis</a> s’y colle, j’attendrai ses retours sur le sujet pour savoir en quoi m’outiller.</p><p>J’aimerais à nouveau progresser en <strong>expérience utilisateur</strong>. Il me manque de quoi trier/ordonner/prioriser de manière collective. J’apprends plus facilement en voyant/par la pratique qu’en lisant des recettes.</p><p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/04/studio.jpg" alt loading="lazy"><figcaption>Premier aménagement du bureau-mezzanine (avril 2023).</figcaption></figure></p>
-<h3 id="quelles-sont-les-conditions-dune-bonne-concentration--et-à-linverse-quest-ce-qui-te-fait-perdre-le-fil-quand-tu-travailles-">Quelles sont les conditions d’une bonne concentration ? et à l’inverse, qu’est-ce qui te fait perdre le fil quand tu travailles ?</h3><p>Les deux réponses sont fortement liées.</p><p>Je suis tout terrain en terme de concentration : dans un train, un hamac, un bar, une pièce bondée et sans table, je m’en sors.</p><p>Par contre si on m’interpelle, sans trop vérifier la disponibilité, en cherchant le contact au regard, c’est sûr, je décroche. Idem si ma journée est fractionnée — visio, court temps pour moi, autre visio, bientôt la pause déj, etc.</p>
-<h3 id="ça-a-été-lequel-ton-jour-de-lannée-préféré-2023-du-point-de-vue-professionnel-">Ça a été lequel ton jour de l’année préféré 2023 du point de vue professionnel ?</h3><p>Il y en a plusieurs qui m’ont beaucoup plu, alors j’en choisis un par <em>strate</em> :</p><ul><li>CAE Solstice : celui où on a décidé posément lors d’un déjeuner à qui on allait proposer le poste de Direction Générale ;</li><li>La Zone : celui où s’est tenue la visio de médiation pour régler un conflit de facturation — j’étais en terrasse, au soleil, à Vincennes ;</li><li>CartoBio : celui où on a importé 16000 parcellaires d’un coup ;</li><li>et sinon, quand on a mis en ligne le site des <a href="https://editionsrepas.fr">Éditions REPAS</a>.</li></ul><p>Des victoires/réussites avec un avant/après, en somme.</p><p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/07/col-rousset.jpg" alt loading="lazy"><figcaption>Vue sur le Haut Diois depuis le pied du But Sapiau (juillet 2023).</figcaption></figure></p>
-<h3 id="cest-quoi-les-domaines-de-réflexion-qui-te-rendent-vivant-">C’est quoi les domaines de réflexion qui te rendent vivant ?</h3><p>La réduction de la <strong>charge cognitive</strong> : se déplacer dans un lieu, dans une interface logicielle, dans un processus de travail, dans une organisation… et même un récit — que ça soit une infolettre ou un poème.</p><p>Si j’écrivais <strong>faire ensemble</strong>, ça serait <em>faux</em>. C’est une combinaison de <strong>expérimenter des chemins vers un monde auquel j’aspire</strong> et de <strong>les partager</strong>. Ça m’intéresse de le faire, et ça ne m’intéresse pas si c’est juste pour moi. Le prompt, c’est écouter mes dissonnances cognitives et suivre le fil. Y cogiter à plusieurs, lire à ces sujets, tester seul ou à plusieurs, le restituer/mettre en œuvre. Arrêter, continuer, recommencer.</p><p>Il y a la <strong>cuisine</strong> qui est une grande source de plaisir et de créativité. J’adore observer, apprendre des autres, tester ou répéter des combinaisons de produits jusqu’à plus soif. C’est un <a href="https://fr.wikipedia.org/wiki/Action-RPG">Action RPG</a> mais dans l’assiette.</p>
-<h3 id="à-quoi-tu-nas-pas-envie-de-passer-du-temps-à-réfléchir-lannée-prochaine-">À quoi tu n’as pas envie de passer du temps à réfléchir l’année prochaine ?</h3><p>Je n’ai pas l’impression d’avoir un <em>sujet</em> sur lequel ne pas réfléchir, mais plutôt un <strong>comment</strong> et <strong>avec qui</strong> je ne voudrais pas le faire.</p><p>Je n’ai plus très envie de travailler dans un groupe qui n’a pas envie de s’améliorer en continu, qui n’a pas à cœur de se passer de postures asymétriques, qui n’a pas d’ouverture, qui n’a pas envie.</p><p>Enfin si : j’aimerais bien ne plus cogiter à des <strong>raisons d’être</strong> 😅. Ça m’a bien occupé ces deux dernières années, j’aimerais passer à autre chose quand on aura rendu la copie cette année. J’ai envie de regagner de la place pour d’autres choses plus créatives cette année.</p>
-<h3 id="avec-qui-tas-envie-de-traîner-en-2024-">Avec qui t’as envie de traîner en 2024 ?</h3><p>Ah la la, tellement d’envies là encore !</p><p>Avec Galcérand, pour travailler la question de l’eau, au niveau communal, agricole et environnemental.</p><p>Avec Julie, pour imprimer avec les navigateurs web ou créer un site Web frugal.</p><p>Avec Antoine, pour les fabriques d’écriture numérique et mettre en page des livres/pages Web imprimables.</p><p>Avec Clémentine et/ou Elsa et/ou Françoise, pour mettre en pages des récits autour de la vie affective ou de violences sexuelles.</p><p>Avec ManuCoop, pour ajouter de la <em>recherche</em> à mes actions, à mes réflexions.</p><p>Avec des passeur·ses d’autres coopératives d’activité, pour résonner/raisonner en écho.</p><p>Avec toi, pour plein de raisons, dont les réflexions autour du travail, des coopératives, d’écriture et de mise en communs.</p><p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/09/amplepuis.jpg" alt loading="lazy"><figcaption>Chemin de l’industrie à Amplepuis (septembre 2023).</figcaption></figure></p>
-<h3 id="quel-outil-pourrait-faciliter-ta-vie-que-tu-navais-pas-lannée-passée-">Quel outil pourrait faciliter ta vie, que tu n’avais pas l’année passée ?</h3><p>J’aimerais en <strong>enlever</strong> et <strong>mieux en utiliser</strong>.</p><p>En enlever, pour révéler des frictions, interroger à nouveau leur utilisation. Pour distinguer le confort de l’habitude, de l’utilité.</p><p>Mieux en utiliser, ça serait soit mon système d’exploitation (via des raccourcis clavier, en utilisant moins la souris/pavé tactile) soit mon éditeur de code (fonctionnalités avancées, des chemins dont je n’avais pas connaissance).</p><p>Je n’ai pas du tout envie d’avoir recours à des intelligences artificielles. C’est comme la voiture. Plutôt recours à l’intelligence collective qu’artificielle. Aux transports en commun qu’individuels.</p>
-<h3 id="quelle-personnalité-illustre-aimerais-tu-rencontrer--pourquoi-">Quelle personnalité illustre aimerais-tu rencontrer ? Pourquoi ?</h3><p>Au début, je n’avais pas d’idée. Je me rends compte que je m’en fiche pas mal qu’une personne soit illustre ou pas.</p><p>Et puis… le nom d’Annie Ernaux m’est venu. J’adore son écriture, et quand elle en parle. Son recours à ses carnets de note, à l’interrogation de ses sensations corporelles pour trouver les bons mots.</p><p>J’aimerais l’écouter à propos des futurs, comment elle voit les années qui viennent de s’écouler, comment elle cultive sa joie de vivre.</p>
-<h3 id="combien-de-km-en-train-tu-vas-faire-dans-lannée-">Combien de km en train tu vas faire dans l’année ?</h3><p>Bonne question : je n’ai aucune idée du nombre de kilomètres parcourus les années précédentes. Allez, estimation : en 2022 je dirais 6000 kilomètres (+6000 avec un aller vers Montréal), et en 2023 12000 (+6000 avec un retour depuis Montréal). Ça me parait délirant d’engloutir autant de kilomètres avec du transport occasionnel.</p><p>J’aimerais bouger moins loin cette année. C’était trop et trop souvent l’an dernier. À vue de nez, je dirais entre 6000 et 8000 kilomètres maximum. Moins loin. J’aime bien la règle de 1h de transport = 1 jour sur place.</p><p>Pour mieux affiner, j’ai <a href="https://www.thetrainline.com/fr/terms/privacy#:~:text=Vos%20droits">demandé mes données à Trainline</a>… mais en résulte qu’iels ont appliqué le <em>droit à l’oubli</em>, et que je suis bloqué hors de mon compte.</p>
-<h3 id="ça-va-être-quoi-ta-présence-à-lusine-vivante-dans-lannée--en-temps-et-en-présence-">Ça va être quoi ta présence à l’Usine Vivante dans l’année ? En temps et en présence ?</h3><p>Je pense que ça sera plus réduit qu’en 2023. Pour prendre du recul et cultiver davantage le soutien, pour que d’autres trouvent leur place/rythme sans se brûler les ailes.</p><p>Et bien l’auto-rénovation ça me dirait bien. Je me sens encore gauche sur le bricolage, j’ai besoin de mise en confiance pour relier idées et réalisations.</p><p>L’écriture aussi, pour envisager un recueil de fiction/poésie. J’ai souvent des débuts d’histoires qui s’écrivent en prenant une photo dans ma tête. Je ne m’étais pas trop dit que j’étais à même d’aller plus loin, et pourtant…</p><p>Quelque chose qui aurait trait à l’auto-gestion aussi. Je m’ennuie souvent à attendre dans les groupes, je ne sais pas trop quoi en faire.</p>
-<h3 id="quest-ce-que-tu-nachèteras-pas-cette-année-">Qu’est-ce que tu n’achèteras pas cette année ?</h3><p>Du miso, c’est sûr ! J’aimerais continuer ma production actuelle 😊</p><p>Du tofu, ça serait génial ! J’aimerais apprendre à en faire à partir de pois chiche ou de soja local.</p><p>Une voiture, toujours pas.</p><p>Des billets d’avion, non. Pas avant mes 50 ans, voire 60 ans. Peut-être que l’aller-retour Montréal/Paris de 2023 était le dernier de ma vie. En tous cas, j’aime le penser ainsi.</p><p>De l’outillage de bricolage. J’aimerais continuer à fonctionner uniquement sur du prêt entre voisin·ne et de l’emprunt à la bricothèque.</p><p>Des livres ? Non je plaisante, ça je garde. Ça m’aide à grandir.</p><p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/12/vercors-pre-peret.jpg" alt loading="lazy"><figcaption>Approche de Pré Péret dans le Vercors (décembre 2023).</figcaption></figure></p>
+<p>Quatre années se sont écoulées depuis <a href="https://détour.studio/weeknotes/1/">la première note hebdomadaire</a>. 2024 est une année de <em>dépassement</em> : celle de ma plus longue activité professionnelle depuis que j’ai commencé à travailler en 2004. 20 ans. Bientôt la moitié de ma vie.</p>
+<p>J’ai demandé à <a href="https://fr.linkedin.com/in/marie-michel-b7758520">Marie Michel</a> ce qu’elle aurait aimé apprendre de mon activité en 2023. Un regard posé à la fois en rétrospective et en perspectives.</p>
+<h3 id="est-ce-que-tu-es-satisfait-de-ton-ratio-temps-travaillé--salaire-">Est-ce que tu es satisfait de ton ratio temps travaillé / salaire ?</h3>
+<p>Oui sur l’aspect temps travaillé : j’ai pris deux pauses de 3 semaines, et quelques une de 1 semaine, en plus de la <a href="https://mixitconf.org/2017/travailler-moins-pour-gagner-moins">semaine de 4 jours</a>.</p>
+<p>Je suis satisfait de l’équilibre temps facturé (en baisse), temps contribué (en hausse) et temps de repos (en hausse).</p>
+<p>Mon salaire choisi<sup id="fnref:1"></sup> n’a pas bougé par rapport à 2021 et 2022.
+Mes besoins de vie ont augmenté cette année : déménagement et aménagement dans un nouveau logement, taxe foncière, menus travaux, séances de thérapie familiale à Bordeaux.</p>
+<p>Je n’ai pas épargné. J’ai même plutôt puisé dans mes économies/capital.</p>
+<p>Actuellement, je suis en tension entre augmenter mes tarifs et augmenter le salaire. Je questionne <a href="https://www.24joursdeweb.fr/2023/juste-place-vs-juste-prix/">juste place vs. juste prix</a> comme l’écrit Julie — salaire idéal, salaire confortable.</p>
+<p>Je n’ai pas très envie de travailler plus — j’ai envie d’écarter cette option d’emblée. Augmenter le salaire augmente la pression sur la facturation. Augmenter les tarifs augmente la pression sur les clients.</p>
+<h3 id="avec-quelles-personnes-as-tu-pris-du-plaisir-à-travailler-et-serais-tu-prêt-à-réitérer-lexpérience-dans-les-années-à-venir-">Avec quelles personnes as-tu pris du plaisir à travailler et serais-tu prêt à réitérer l’expérience dans les années à venir ?</h3>
+<p>Tellement de monde 😊</p>
+<p><strong>Valentine</strong> : super compréhensive de mon rythme et de ma charge de travail en début d’année. On a une grande facilité à améliorer nos manières de travailler ensemble. Elle a de bonnes idées. On a pu être dans de la qualité sans pression.</p>
+<p><strong>Philippe et Jérôme</strong> : on a décortiqué le mécanisme de l’accord d’intéressement de <a href="https://solstice.coop">notre CAE</a>, identifié des variables d’ajustements, comment font d’autres coopératives, où sont les pièges, quels sont les risques. Beaucoup d’apprentissages, à notre rythme.</p>
+<p><strong><a href="https://www.batissedeliens.com/">Laura</a></strong> : découverte d’une super binôme à la fois à l’<a href="https://usinevivante.org">Usine Vivante</a> et avec la <a href="https://solstice.coop">coopérative Solstice</a>. On a bien bossé la raison d’être de l’Usine, partagé pas mal de réflexions sur les interactions humaines et été un appui mutuel dans des moments difficiles.</p>
+<p><strong>Sofia</strong> : nos logiques de pensées et d’organisation se complètent <em>et</em> se comprennent bien depuis plusieurs années. Elle m’a sauvé en déminant une erreur financière dans un projet. Elle est d’excellent conseil quant aux outils d’animation liés au design d’interface et à la priorisation d’idées/choix.</p>
+<p><strong>Anne, Anne-Sophie, Aymeric, Juliette, Mathilde, Maud et Roxann</strong> : c’est une de mes équipes préférées. Je n’avais pas connu ça depuis celle de <a href="https://www.bbc.co.uk/rd/people/thomas-parisot">Peaks.js</a> et des <a href="https://www.bbc.co.uk/rd/projects/editorial-algorithms">algorithmes éditoriaux</a>, avec <a href="https://www.bbc.co.uk/rd/people/chris-needham">Chris</a> et <a href="https://www.bbc.co.uk/rd/people/olivier-thereaux">Olivier</a>. On gère le budget ensemble, navigue dans les (dys)fonctionnements institutionnels et coordonne si bien le triptyque recherche utilisateur/design/développement. Les retours terrains sont excellents. Y’a une chouette ambiance et une amélioration continue de nos pratiques de travail. C’est une réussite, à quelques mois du franchissement de la ligne d’arrivée de ce projet de quatre années.</p>
+<p><strong>Paul et Nadia</strong> : mention spéciale pour ces personnes reçues en entretien d’embauche… c’est du travail ! J’ai aimé leur pragmatisme, leur esprit de synthèse et le soin envers leur équipe.</p>
+<h3 id="quest-ce-que-tu-as-appris-qui-pourra-te-resservir-sur-des-aspects-opérationnels-">Qu’est-ce que tu as appris qui pourra te resservir sur des aspects opérationnels ?</h3>
+<p>Des apprentissages <strong>techniques</strong>, principalement grâce à l’arrivée de Maud dans l’équipe CartoBio. J’ai progressé sur PostgreSQL et à la marge, JavaScript/TypeScript.</p>
+<p>Le principal domaine de l’année a été… le <strong>recrutement</strong>. De la fabrication d’une offre (qu’est-ce qu’on veut ?), à la rencontre (qui es-tu ?) et à l’accueil (de quoi as-tu besoin pour te sentir bien ?). Ça m’a occupé une bonne moitié de l’année.</p>
+<p>J’ai eu la confirmation que ma <strong>capacité à poser des questions</strong> et à expliciter étaient des atouts pour communiquer, donc écrire des lettres d’information — de la prise de note de réunion jusqu’à leur transcription digeste, avec des petites touches actionnables. Par exemple, en plus des dates de conseils d’administration, un rappel en une ligne de la procédure pour y assister, et rejoindre cet organe de travail.</p>
+<p>J’ai beaucoup appris en <strong>psychologie systémique</strong>. J’avais envie de regarder autrement des situations bloquées ou prises dans des boucles répétitives. J’ai eu davantage recours à des médiations pour décaler, recréer de l’ouverture.</p>
+<p>J’ai aussi appris que je n’ai pas appris autant que je voulais, qu’il me manquait des personnes proches, géographiquement et/ou de pensée, pour explorer des sujets. J’ai beaucoup fait par moi-même. J’aimerais changer ce déséquilibre.</p>
+<p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/01/acab-bike.jpg" alt loading="lazy"><figcaption>Vélo abandonné à Montréal (janvier 2023).</figcaption></figure></p>
+<h3 id="dans-quels-types-de-tâches-tépanouis-tu-le-plus-">Dans quels types de tâches t’épanouis-tu le plus ?</h3>
+<p>Il y’a clairement un triptyque <strong>défricher</strong>, <strong>explorer</strong> et <strong>clarifier</strong>.</p>
+<p>J’adore aller chercher de la matière à réfléchir (quand on sait qu’on ne sait pas, sans savoir par où commencer), observer, cartographier, relier puis ramener à ce qu’on veut, au sens de ce qui nous réunit.</p>
+<p>Je m’épanouis beaucoup dans la <strong>réflexion</strong>, au sens de renvoyer à l’autre des choses (remercier, dire ce que j’y vois, apprécie, encourage).<br>Et donc la <strong>relecture</strong>. De relier à ce que la personne y a mis, avec ses intentions, envies et doutes.</p>
+<p>J’adore <strong>documenter</strong>. Que ça soit des <em>processus</em>, en <em>prospective</em> ou <em>rétrospective</em>. De manière orale (présentation à une conférence/séminaire/colloque), ou écrite (billet de blog).</p>
+<p>Et puis <strong>décaler</strong>, les pensées, les situations et les perspectives. On a fait le tour de sujet ? Mais si on le prend comme ça, ça vient créer de l’ouverture ?</p>
+<h3 id="est-ce-quil-y-a-quelque-chose-que-tu-aimerais-faire-et-que-tu-nas-pas-fait-dans-lannée-">Est-ce qu’il y a quelque chose que tu aimerais faire et que tu n’as pas fait dans l’année ?</h3>
+<p>J’aimerais retrouver de la confiance pour écrire des billets de blog conséquents, pas juste des entrées de journal. Expliquer pourquoi/comment je suis revenu au <em>smartphone</em>, comment j’aborde le recrutement de personnes, comment j’ai vécu sans posséder de voiture depuis 10 ans, etc.</p>
+<p>Peut-être investir un peu de temps pour réparer l’<a href="https://github.com/thom4parisot/webextension-fip/">extension de navigateur qui permet d’écouter FIP en un clic</a> ? J’avoue, j’ai pas trop le cœur à <em>travailler</em> encore après le <em>travail</em>.</p>
+<p>J’aimerais à nouveau contribuer à un projet existant, éloigné de mes cercles sociaux mais proche de mes centres d’intérêt. Un truc en rapport avec l’eau, ou l’alimentation, comme avec les <a href="https://resiliencealimentaire.org/">Greniers d’Abondance</a> il y’a quelques années.</p>
+<h3 id="cest-quoi-ta-prochaine-formation-">C’est quoi ta prochaine formation ?</h3>
+<p>J’ai pas mal d’envies à ce niveau. Et certainement que je ne ferai pas tout cette année — voire rien du tout de cette liste.</p>
+<p>L’organisation du travail mène à la psychologie du travail, et donc aux <strong>risques psychosociaux</strong>. J’aimerais avoir de meilleurs clés de compréhension, et d’outils à proposer quand je repère les situations.</p>
+<p>Du droit à l’environnement ? Pour explorer une couche administrative experte dont les rouages m’échappent. Quels recours ? Pourquoi ? Comment ? Pour ne pas être dans le “non ce projet est nul” en me basant que sur mes goûts personnels/orientations politiques.</p>
+<p>J’aimerais en savoir plus sur le <strong>milieu coopératif</strong>, du juridique jusqu’aux caractéristiques singulières. Peut-être pour être plus en phase avec le projet politique de base (mettre en commun nos outils de travail).</p>
+<p>Pourquoi pas de la médiation ? Comme <a href="https://blog.notmyidea.org/">Alexis</a> s’y colle, j’attendrai ses retours sur le sujet pour savoir en quoi m’outiller.</p>
+<p>J’aimerais à nouveau progresser en <strong>expérience utilisateur</strong>. Il me manque de quoi trier/ordonner/prioriser de manière collective. J’apprends plus facilement en voyant/par la pratique qu’en lisant des recettes.</p>
+<p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/04/studio.jpg" alt loading="lazy"><figcaption>Premier aménagement du bureau-mezzanine (avril 2023).</figcaption></figure></p>
+<h3 id="quelles-sont-les-conditions-dune-bonne-concentration--et-à-linverse-quest-ce-qui-te-fait-perdre-le-fil-quand-tu-travailles-">Quelles sont les conditions d’une bonne concentration ? et à l’inverse, qu’est-ce qui te fait perdre le fil quand tu travailles ?</h3>
+<p>Les deux réponses sont fortement liées.</p>
+<p>Je suis tout terrain en terme de concentration : dans un train, un hamac, un bar, une pièce bondée et sans table, je m’en sors.</p>
+<p>Par contre si on m’interpelle, sans trop vérifier la disponibilité, en cherchant le contact au regard, c’est sûr, je décroche. Idem si ma journée est fractionnée — visio, court temps pour moi, autre visio, bientôt la pause déj, etc.</p>
+<h3 id="ça-a-été-lequel-ton-jour-de-lannée-préféré-2023-du-point-de-vue-professionnel-">Ça a été lequel ton jour de l’année préféré 2023 du point de vue professionnel ?</h3>
+<p>Il y en a plusieurs qui m’ont beaucoup plu, alors j’en choisis un par <em>strate</em> :</p>
+<ul><li>CAE Solstice : celui où on a décidé posément lors d’un déjeuner à qui on allait proposer le poste de Direction Générale ;</li><li>La Zone : celui où s’est tenue la visio de médiation pour régler un conflit de facturation — j’étais en terrasse, au soleil, à Vincennes ;</li><li>CartoBio : celui où on a importé 16000 parcellaires d’un coup ;</li><li>et sinon, quand on a mis en ligne le site des <a href="https://editionsrepas.fr">Éditions REPAS</a>.</li></ul>
+<p>Des victoires/réussites avec un avant/après, en somme.</p>
+<p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/07/col-rousset.jpg" alt loading="lazy"><figcaption>Vue sur le Haut Diois depuis le pied du But Sapiau (juillet 2023).</figcaption></figure></p>
+<h3 id="cest-quoi-les-domaines-de-réflexion-qui-te-rendent-vivant-">C’est quoi les domaines de réflexion qui te rendent vivant ?</h3>
+<p>La réduction de la <strong>charge cognitive</strong> : se déplacer dans un lieu, dans une interface logicielle, dans un processus de travail, dans une organisation… et même un récit — que ça soit une infolettre ou un poème.</p>
+<p>Si j’écrivais <strong>faire ensemble</strong>, ça serait <em>faux</em>. C’est une combinaison de <strong>expérimenter des chemins vers un monde auquel j’aspire</strong> et de <strong>les partager</strong>. Ça m’intéresse de le faire, et ça ne m’intéresse pas si c’est juste pour moi. Le prompt, c’est écouter mes dissonnances cognitives et suivre le fil. Y cogiter à plusieurs, lire à ces sujets, tester seul ou à plusieurs, le restituer/mettre en œuvre. Arrêter, continuer, recommencer.</p>
+<p>Il y a la <strong>cuisine</strong> qui est une grande source de plaisir et de créativité. J’adore observer, apprendre des autres, tester ou répéter des combinaisons de produits jusqu’à plus soif. C’est un <a href="https://fr.wikipedia.org/wiki/Action-RPG">Action RPG</a> mais dans l’assiette.</p>
+<h3 id="à-quoi-tu-nas-pas-envie-de-passer-du-temps-à-réfléchir-lannée-prochaine-">À quoi tu n’as pas envie de passer du temps à réfléchir l’année prochaine ?</h3>
+<p>Je n’ai pas l’impression d’avoir un <em>sujet</em> sur lequel ne pas réfléchir, mais plutôt un <strong>comment</strong> et <strong>avec qui</strong> je ne voudrais pas le faire.</p>
+<p>Je n’ai plus très envie de travailler dans un groupe qui n’a pas envie de s’améliorer en continu, qui n’a pas à cœur de se passer de postures asymétriques, qui n’a pas d’ouverture, qui n’a pas envie.</p>
+<p>Enfin si : j’aimerais bien ne plus cogiter à des <strong>raisons d’être</strong> 😅. Ça m’a bien occupé ces deux dernières années, j’aimerais passer à autre chose quand on aura rendu la copie cette année. J’ai envie de regagner de la place pour d’autres choses plus créatives cette année.</p>
+<h3 id="avec-qui-tas-envie-de-traîner-en-2024-">Avec qui t’as envie de traîner en 2024 ?</h3>
+<p>Ah la la, tellement d’envies là encore !</p>
+<p>Avec Galcérand, pour travailler la question de l’eau, au niveau communal, agricole et environnemental.</p>
+<p>Avec Julie, pour imprimer avec les navigateurs web ou créer un site Web frugal.</p>
+<p>Avec Antoine, pour les fabriques d’écriture numérique et mettre en page des livres/pages Web imprimables.</p>
+<p>Avec Clémentine et/ou Elsa et/ou Françoise, pour mettre en pages des récits autour de la vie affective ou de violences sexuelles.</p>
+<p>Avec ManuCoop, pour ajouter de la <em>recherche</em> à mes actions, à mes réflexions.</p>
+<p>Avec des passeur·ses d’autres coopératives d’activité, pour résonner/raisonner en écho.</p>
+<p>Avec toi, pour plein de raisons, dont les réflexions autour du travail, des coopératives, d’écriture et de mise en communs.</p>
+<p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/09/amplepuis.jpg" alt loading="lazy"><figcaption>Chemin de l’industrie à Amplepuis (septembre 2023).</figcaption></figure></p>
+<h3 id="quel-outil-pourrait-faciliter-ta-vie-que-tu-navais-pas-lannée-passée-">Quel outil pourrait faciliter ta vie, que tu n’avais pas l’année passée ?</h3>
+<p>J’aimerais en <strong>enlever</strong> et <strong>mieux en utiliser</strong>.</p>
+<p>En enlever, pour révéler des frictions, interroger à nouveau leur utilisation. Pour distinguer le confort de l’habitude, de l’utilité.</p>
+<p>Mieux en utiliser, ça serait soit mon système d’exploitation (via des raccourcis clavier, en utilisant moins la souris/pavé tactile) soit mon éditeur de code (fonctionnalités avancées, des chemins dont je n’avais pas connaissance).</p>
+<p>Je n’ai pas du tout envie d’avoir recours à des intelligences artificielles. C’est comme la voiture. Plutôt recours à l’intelligence collective qu’artificielle. Aux transports en commun qu’individuels.</p>
+<h3 id="quelle-personnalité-illustre-aimerais-tu-rencontrer--pourquoi-">Quelle personnalité illustre aimerais-tu rencontrer ? Pourquoi ?</h3>
+<p>Au début, je n’avais pas d’idée. Je me rends compte que je m’en fiche pas mal qu’une personne soit illustre ou pas.</p>
+<p>Et puis… le nom d’Annie Ernaux m’est venu. J’adore son écriture, et quand elle en parle. Son recours à ses carnets de note, à l’interrogation de ses sensations corporelles pour trouver les bons mots.</p>
+<p>J’aimerais l’écouter à propos des futurs, comment elle voit les années qui viennent de s’écouler, comment elle cultive sa joie de vivre.</p>
+<h3 id="combien-de-km-en-train-tu-vas-faire-dans-lannée-">Combien de km en train tu vas faire dans l’année ?</h3>
+<p>Bonne question : je n’ai aucune idée du nombre de kilomètres parcourus les années précédentes. Allez, estimation : en 2022 je dirais 6000 kilomètres (+6000 avec un aller vers Montréal), et en 2023 12000 (+6000 avec un retour depuis Montréal). Ça me parait délirant d’engloutir autant de kilomètres avec du transport occasionnel.</p>
+<p>J’aimerais bouger moins loin cette année. C’était trop et trop souvent l’an dernier. À vue de nez, je dirais entre 6000 et 8000 kilomètres maximum. Moins loin. J’aime bien la règle de 1h de transport = 1 jour sur place.</p>
+<p>Pour mieux affiner, j’ai <a href="https://www.thetrainline.com/fr/terms/privacy#:~:text=Vos%20droits">demandé mes données à Trainline</a>… mais en résulte qu’iels ont appliqué le <em>droit à l’oubli</em>, et que je suis bloqué hors de mon compte.</p>
+<h3 id="ça-va-être-quoi-ta-présence-à-lusine-vivante-dans-lannée--en-temps-et-en-présence-">Ça va être quoi ta présence à l’Usine Vivante dans l’année ? En temps et en présence ?</h3>
+<p>Je pense que ça sera plus réduit qu’en 2023. Pour prendre du recul et cultiver davantage le soutien, pour que d’autres trouvent leur place/rythme sans se brûler les ailes.</p>
+<p>Et bien l’auto-rénovation ça me dirait bien. Je me sens encore gauche sur le bricolage, j’ai besoin de mise en confiance pour relier idées et réalisations.</p>
+<p>L’écriture aussi, pour envisager un recueil de fiction/poésie. J’ai souvent des débuts d’histoires qui s’écrivent en prenant une photo dans ma tête. Je ne m’étais pas trop dit que j’étais à même d’aller plus loin, et pourtant…</p>
+<p>Quelque chose qui aurait trait à l’auto-gestion aussi. Je m’ennuie souvent à attendre dans les groupes, je ne sais pas trop quoi en faire.</p>
+<h3 id="quest-ce-que-tu-nachèteras-pas-cette-année-">Qu’est-ce que tu n’achèteras pas cette année ?</h3>
+<p>Du miso, c’est sûr ! J’aimerais continuer ma production actuelle 😊</p>
+<p>Du tofu, ça serait génial ! J’aimerais apprendre à en faire à partir de pois chiche ou de soja local.</p>
+<p>Une voiture, toujours pas.</p>
+<p>Des billets d’avion, non. Pas avant mes 50 ans, voire 60 ans. Peut-être que l’aller-retour Montréal/Paris de 2023 était le dernier de ma vie. En tous cas, j’aime le penser ainsi.</p>
+<p>De l’outillage de bricolage. J’aimerais continuer à fonctionner uniquement sur du prêt entre voisin·ne et de l’emprunt à la bricothèque.</p>
+<p>Des livres ? Non je plaisante, ça je garde. Ça m’aide à grandir.</p>
+<p><figure class="markdown-image"><img src="https://détour.studio/weeknotes/images/2023/12/vercors-pre-peret.jpg" alt loading="lazy"><figcaption>Approche de Pré Péret dans le Vercors (décembre 2023).</figcaption></figure></p>

cache/2024/7136e0810bfa42c4a9ca798a55cd2d53/index.md

@@ -2,6 +2,8 @@ title: Where have all the flowers gone?
 url: https://daverupert.com/2024/01/where-have-all-the-websites-gone/
 hash_url: 7136e0810bfa42c4a9ca798a55cd2d53
 archive_date: 2024-01-19
+og_image: 
+description: A post from Jason Velazquez called “Where have all the websites gone?” crossed my socials. It’s a good lament about the dearth of interesting content on the internet and how we’re stuck in the same boring content silos.
 
 <p>A post from Jason Velazquez called “<a href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/">Where have all the websites gone?</a>” crossed my socials. It’s a good lament about the dearth of interesting content on the internet and how we’re stuck in the same boring content silos.</p>
 <p>The question reminded me of a song by Pete Seeger called “<em>Where have all the flowers gone?</em>” In the song Pete wonders aloud about the flowers now missing from the field…</p>
@@ -41,4 +43,4 @@ Oh, when will you ever learn?
 <p>So where have all the websites gone? Well, the people who make them have all gone to war for the capitalist machine. They grew up and got jobs. A natural part of growing up. Silos came and plucked their voices. Invasive memes and short form content grew in their place. Hustle overtook leisure. Harassment overtook openness. Influence overtook creativity. An economy of interestingness replaced by one of followers, likes, and engagement metrics.</p>
 <p>One important thing to note; websites aren’t extinct. In fact, you’re on one now! Uploading your own words is ancient technology but still works.</p>
 <p>I loved Jason’s point about the curators and it illuminated something I don’t think I fully understood before. Curators and aggregators are integral to the ecosystem. If we all create, steal, and regurgitate the same content then we only reinforce our own echo chamber. Aggregators bridge subcultures in a world of content bubbles and subreddits. They share curios from the web you may have missed, subverting the FOMO-based dopamine addiction machine using RSS. They find beauty in the mundane and surface wisdom from obscure writings. That is valuable, worth more than gold.</p>
-<p><a href="https://robinrendle.com/notes/i-am-a-poem-i-am-not-software/">We are poems, not software</a> and in need of a reforestation of our curators. To paraphrase Mr. Rogers in these dire times, “Look for the aggregators…”</p>
+<p><a href="https://robinrendle.com/notes/i-am-a-poem-i-am-not-software/">We are poems, not software</a> and in need of a reforestation of our curators. To paraphrase Mr. Rogers in these dire times, “Look for the aggregators…”</p>

cache/2024/790f724c45b26de460f9eeac04d48884/index.md

@@ -2,7 +2,9 @@ title: carnet d'archéologue
 url: https://www.la-grange.net/2024/01/22/carnet
 hash_url: 790f724c45b26de460f9eeac04d48884
 archive_date: 2024-01-28
-    
+og_image: 
+description: 
+
 <figure>
   <img src="https://www.la-grange.net/2024/01/20/3134-carnets.jpg" alt="Carnets de notes en archéologie écrit en japonais avec des dessins.">
   <figcaption>Shibuya, Japon, 22 janvier 2024</figcaption>
@@ -67,4 +69,4 @@ archive_date: 2024-01-28
 <p>Je ne sais pas encore très bien comment absorber cela. :) Je me pose de sérieuses questions sur l'image que nous renvoyons à notre enfant.</p>
 <hr>
 <p>Question du soir entre nous : <strong>Pourquoi dit-on un « trailer » en anglais pour les bandes-annonces de cinéma ?</strong> Un trailer c'est ce que l'on met à l'arrière d'une voiture (comme une remorque). Or les bandes annonces sont avant la diffusion du film temporellement et également physiquement au cinéma. La <a href="https://en.wikipedia.org/wiki/Trailer_(promotion">réponse</a>) est parce que cela n'a pas toujours été le cas justement au cinéma. Les trailers étaient diffusés après le film comme une invitation à aller voir autre chose maintenant que vous avez vu cela. L'habitude culturelle du film n'existait pas encore vraiment. D'ailleurs le premier trailer était une annonce pour un spectacle de Broadway.</p>
-<p>Du coup, je me demande la variété lexicale et sémantique des bande-annonces à travers les pays.</p>
+<p>Du coup, je me demande la variété lexicale et sémantique des bande-annonces à travers les pays.</p>

cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/index.md

@@ -2,15 +2,17 @@ title: Opening Mail / frantic.im
 url: https://frantic.im/opening-mail/
 hash_url: 7a223e552e8a8e3e11c759cbc5bc3ffa
 archive_date: 2024-01-07
+og_image: https://frantic.im/figma/og_opening_mail.png
+description: First make the change easy, then make the easy change.
 
 <p>I never liked opening envelopes; they’re tricky and ripping them open is annoying. My letters would get stuck or tear with the envelope.</p>
 <p>The mail just used to stack up, and I’d miss important stuff because of it.</p>
 <p>But then I found this cool little gadget from Japan.</p>
-<a href="https://www.amazon.com/dp/B001GR4DQ8" target="_blank">
+<p><a href="https://www.amazon.com/dp/B001GR4DQ8" target="_blank">
   <img src="https://frantic.im/assets/ceramic-letter-opener.jpg">
-</a>
+</a></p>
 <p>It’s well-made, affordable, and feels good to use. Plus, it’s safe.</p>
 <p>The best part? It actually made me enjoy opening my mail.</p>
 <p>After this experience, I started thinking differently about unpleasent tasks. Is there a tool or a service that add delight to mundane things?</p>
 <p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but they like building their own blog engine to make blogging more pleasant (I’m very guilty of this too).</p>
-<p>Kent Beck <a href="https://twitter.com/KentBeck/status/250733358307500032">nailed it</a>: “for each desired change, make the change easy (warning: this may be hard), then make the easy change”.</p>
+<p>Kent Beck <a href="https://twitter.com/KentBeck/status/250733358307500032">nailed it</a>: “for each desired change, make the change easy (warning: this may be hard), then make the easy change”.</p>

cache/2024/7d2d2bce96cbc020423299e7de03d2cf/index.md

@@ -2,6 +2,8 @@ title: Disillusioned with Deno
 url: https://www.baldurbjarnason.com/2024/disillusioned-with-deno/
 hash_url: 7d2d2bce96cbc020423299e7de03d2cf
 archive_date: 2024-01-16
+og_image: 
+description: This is a part of a series where I review the work I’ve done over the past couple of years.
 
 <p>It’s inevitable that once you decide to review your own business and media strategy, you start to rethink and review other decisions you’ve made in the past.</p>
 <p>One of those decisions is <a href="https://deno.com/">Deno</a>, which I’ve used to most of my personal projects and experiments over the past couple of years. Most of these projects have been on the simpler side – command-line scripts or small websites. I made the <a href="https://softwarecrisis.dev/">softwarecrisis.dev</a> newsletter landing page using <a href="https://lume.land/">Lume and Deno</a>, for example. I used Deno to make most of the prototypes for the research project that followed <a href="https://www.colophon.cards/">Colophon Cards</a>. It’s very useful.</p>

cache/2024/7ed7f4aefae1b5af33b3ec1f607a633f/index.md

@@ -2,21 +2,17 @@ title: L’Observatoire des perspectives utopiques
 url: https://lobsoco.com/perspectives-utopiques-vague-3/
 hash_url: 7ed7f4aefae1b5af33b3ec1f607a633f
 archive_date: 2024-01-24
-
-## Explorer 3 modèles de société
-
-La première vague de l’Observatoire des perspectives utopiques a été réalisée en 2019. Notre désir d’explorer comment les Français se représentent une société idéale était né du sentiment que, le projet « moderne » ayant en quelque sorte rempli son contrat et révélant désormais surtout sa face sombre, les sociétés occidentales souffraient d’un manque d’idéaux, d’un déficit d’objectifs collectifs à atteindre, d’une panne du désir d’avenir.
-
-Avec nos partenaires (l’ADEME, BPI France Le Lab et la Chaire ESCP – Bearing Point), nous avions donc élaboré une méthodologie d’enquête consistant à recueillir comment un échantillon représentatif de Français évaluaient trois « sociétés idéales » que nous avions élaborées à partir d’idées portées par des auteurs, des mouvements sociaux, des courants politiques… ainsi que leurs aspirations par rapport à différentes dimensions plus spécifiques de l’organisation de la société.
-
-## Quel impact de la crise sanitaire sur les représentations de la société idéale ?
-
-Depuis, les Français, comme l’ensemble des habitants du monde, ont vécu un évènement inédit aux impacts majeurs : la crise sanitaire. La sidération qui nous a saisi face à la violence du choc, à la radicalité des mesures adoptées en réaction et au bouleversement des modes de vie qui l’a accompagné ont créé un contexte favorable à la réflexion sur le sens à donner à cet « évènement » et sur les conséquences qu’il convenait d’en déduire, tant sur l’organisation de la vie économique et sociale qu’à échelle individuelle des priorités à donner à l’existence. Les premiers mois de la crise sanitaire ont donné lieu à des débats prolifiques. Beaucoup se sont mis à penser (ou à espérer) que le « monde d’après » serait nécessairement différent du « monde d’avant ». Les enquêtes que nous menons à L’ObSoCo sur divers aspects des modes de vie et de consommation ont eu tendance à montrer que, hormis l’accélération de la numérisation des modes de vie et les effets de la diffusion du télétravail, le balancier du changement avait une forte tendance à revenir vers sa position initiale. Mais qu’en est-il des manières dont les Français se représentent une société idéale ?
-
-L’expérience de la crise sanitaire a-t-elle conduit à des réaménagements des idéaux et des aspirations tels qu’ils étaient relevés en 2019 par l’Observatoire ?  C’est notamment pour répondre à cette question que, avec l’Ademe et BPI France Le Lab, nous avons décidé de relancer l’enquête, à l’identique de celle de 2019*, deux ans et demi plus tard, « à froid », alors que la phase de sidération est désormais derrière nous, que la pandémie – toujours là – fait moins de ravages depuis la vaccination massive et que nous avons appris à « vivre avec ».
-
-* Une deuxième vague de l’enquête, centrée sur l’évaluation des 3 modèles de société, a été conduite en juin 2020, à la sortie du premier confinement.
-
-## Méthodologie
-
-Le terrain de cet Observatoire des perspectives utopiques a été mené du 17 au 27 janvier 2022 auprès d’un échantillon de 4000 personnes représentatives de la population française âgée de 18 à 75 ans. Le terrain s’est donc tenu avant le début de la guerre en Ukraine.
+og_image: https://lobsoco.com/wp-content/uploads/2022/03/Utopies-Vague-3.jpg
+description: Avec le soutien de nos partenaires Accédez ci-dessous aux principaux enseignements (classés par thématiques) de l’Observatoire.
+
+<h2>Explorer 3 modèles de société</h2>
+<p>La première vague de l’Observatoire des perspectives utopiques a été réalisée en 2019. Notre désir d’explorer comment les Français se représentent une société idéale était né du sentiment que, le projet « moderne » ayant en quelque sorte rempli son contrat et révélant désormais surtout sa face sombre, les sociétés occidentales souffraient d’un manque d’idéaux, d’un déficit d’objectifs collectifs à atteindre, d’une panne du désir d’avenir.</p>
+<p>Avec nos partenaires (l’ADEME, BPI France Le Lab et la Chaire ESCP – Bearing Point), nous avions donc élaboré une méthodologie d’enquête consistant à recueillir comment un échantillon représentatif de Français évaluaient trois « sociétés idéales » que nous avions élaborées à partir d’idées portées par des auteurs, des mouvements sociaux, des courants politiques… ainsi que leurs aspirations par rapport à différentes dimensions plus spécifiques de l’organisation de la société.</p>
+<h2>Quel impact de la crise sanitaire sur les représentations de la société idéale ?</h2>
+<p>Depuis, les Français, comme l’ensemble des habitants du monde, ont vécu un évènement inédit aux impacts majeurs : la crise sanitaire. La sidération qui nous a saisi face à la violence du choc, à la radicalité des mesures adoptées en réaction et au bouleversement des modes de vie qui l’a accompagné ont créé un contexte favorable à la réflexion sur le sens à donner à cet « évènement » et sur les conséquences qu’il convenait d’en déduire, tant sur l’organisation de la vie économique et sociale qu’à échelle individuelle des priorités à donner à l’existence. Les premiers mois de la crise sanitaire ont donné lieu à des débats prolifiques. Beaucoup se sont mis à penser (ou à espérer) que le « monde d’après » serait nécessairement différent du « monde d’avant ». Les enquêtes que nous menons à L’ObSoCo sur divers aspects des modes de vie et de consommation ont eu tendance à montrer que, hormis l’accélération de la numérisation des modes de vie et les effets de la diffusion du télétravail, le balancier du changement avait une forte tendance à revenir vers sa position initiale. Mais qu’en est-il des manières dont les Français se représentent une société idéale ?</p>
+<p>L’expérience de la crise sanitaire a-t-elle conduit à des réaménagements des idéaux et des aspirations tels qu’ils étaient relevés en 2019 par l’Observatoire ?  C’est notamment pour répondre à cette question que, avec l’Ademe et BPI France Le Lab, nous avons décidé de relancer l’enquête, à l’identique de celle de 2019*, deux ans et demi plus tard, « à froid », alors que la phase de sidération est désormais derrière nous, que la pandémie – toujours là – fait moins de ravages depuis la vaccination massive et que nous avons appris à « vivre avec ».</p>
+<ul>
+<li>Une deuxième vague de l’enquête, centrée sur l’évaluation des 3 modèles de société, a été conduite en juin 2020, à la sortie du premier confinement.</li>
+</ul>
+<h2>Méthodologie</h2>
+<p>Le terrain de cet Observatoire des perspectives utopiques a été mené du 17 au 27 janvier 2022 auprès d’un échantillon de 4000 personnes représentatives de la population française âgée de 18 à 75 ans. Le terrain s’est donc tenu avant le début de la guerre en Ukraine.</p>

cache/2024/82b88d48d8043d79425ce8afd8dff42e/index.md

@@ -2,6 +2,8 @@ title: Echoing Wirth's plea for lean software
 url: https://blog.testdouble.com/posts/2024-01-24-plea-for-lean/
 hash_url: 82b88d48d8043d79425ce8afd8dff42e
 archive_date: 2024-01-24
+og_image: https://cdn-blog.testdouble.com/img/social/plea-for-lean.3bebefc81990d30cfac86b0fb4b51b954caa42a793911c74b6cf339ab364b095.png
+description: Niklaus Wirth's plea for lean software is even more valid today.
 
 <p>Our industry lost one of its great minds on New Year’s Day as Niklaus Wirth passed at the age of 89. My first real computer programming class in high school used Pascal, which he designed in 1970, and the majority of my college courses used Modula-2, which he also designed in 1975. Both of these languages advanced the field of programming with innovations like modules, one-pass compilation, and concurrent programming. The type safety, clarity, and compiler support made these languages very approachable and easy to learn, likely keeping me on the path of a career in our industry. One of his greatest contributions to our field, that seems eerily prescient now,  is his article “A Plea for Lean Software” published in Computer magazine in 1995.</p>
 <p>The article laments the fact that we have been conditioned with significant advances in hardware, leading to software that is unnecessarily bloated. Humorously, the article begins by addressing how memory requirements jump “from several to many megabytes." I am writing this blog post in a browser window that is consuming 700MB while reviewing his article in Preview, clocking in at just shy of 1GB of memory consumption, almost proving his point 29 years later.</p>
@@ -15,8 +17,7 @@ archive_date: 2024-01-24
 <p>We see this all. the. time. Software businesses that are bootstrapped or early stage have to focus maniacally on only building the features that are proven to be critical to adoption. Then as adoption picks up, a second or third round of funding comes in, and these same businesses accelerate right out of the lean startup mindset. That first sales hire brings every idea to the table that a prospect may have mentioned into the newer and longer list of <strong>critical features</strong>. Immature product management does a poor job of validating the features and pruning the list into the set of features that truly drive outcomes.</p>
 <p>It results in large systems that are extremely difficult for end users to operate within. Simplicity is inversely proportional to the number of features available for use.</p>
 
-<img src="https://cdn-blog.testdouble.com/img/plea-for-lean/simplicity-graph.f6526546c7913435ddea37cc72251c703d73bd6a7fc05e8b2bc7f3dc0fa98798.png" alt="Simplicity vs Features" class="" loading="eager">
-
+<p><img src="https://cdn-blog.testdouble.com/img/plea-for-lean/simplicity-graph.f6526546c7913435ddea37cc72251c703d73bd6a7fc05e8b2bc7f3dc0fa98798.png" alt="Simplicity vs Features" class="" loading="eager"></p>
 <p>When simplicity goes away, businesses are then forced to invest in other areas like documentation, training, and customer support. All for a user experience that is more likely to drive away new customers instead of achieving the original goal of bringing more users in. If you don’t believe me, ask yourself how often you see teams prioritize removing neglected features as part of their planning?</p>
 <p><em>Any and all features mean design becomes more complicated and usability more cumbersome.</em></p>
 <p>This incessant accumulation of features results in another cause for inefficiency: larger and larger software organizations.</p>
@@ -28,4 +29,4 @@ archive_date: 2024-01-24
 <p><strong>A Plea for Lean Software Teams</strong></p>
 <p>If we are to get back to leaner and more efficient software development organizations, we need to solve both of these problems - too many features and too many developers.</p>
 <p>Businesses need highly capable product managers who focus relentlessly on driving outcomes, not output. It’s exciting to see many of the agile consultants I used to work with focusing more in this space. It’s one of the reasons we’re extremely excited about <a href="../2023-11-08-test-double-acquires-pathfinder">working with Pathfinder Product</a> more closely. Great product managers are difficult to find, but when you have highly capable people in these roles, they have an outsized impact on the business.</p>
-<p>Further, if we have learned anything in the last 3 years as an industry, it should be to strive for building small, highly efficient teams and avoiding bloated, overstaffed organizations at all costs. Larger teams move slower, create more incidental complexity, and are much more susceptible to the layoffs we’ve all been suffering through. Engineering leaders would be well served to focus on hiring smaller teams and providing them with sufficient time and support to create simple solutions that generate business value.</p>
+<p>Further, if we have learned anything in the last 3 years as an industry, it should be to strive for building small, highly efficient teams and avoiding bloated, overstaffed organizations at all costs. Larger teams move slower, create more incidental complexity, and are much more susceptible to the layoffs we’ve all been suffering through. Engineering leaders would be well served to focus on hiring smaller teams and providing them with sufficient time and support to create simple solutions that generate business value.</p>

cache/2024/84f8caf3e7f7b3de9e18281749c3687f/index.md

@@ -1,19 +1,21 @@
-title: Until the Right Design Emerges...
-url: https://lukew.com/ff/entry.asp?2036
-hash_url: 84f8caf3e7f7b3de9e18281749c3687f
-archive_date: 2024-01-13
-
-<p class="feature">Too often, the process of design is cut short. When faced with user needs or product requirements, many designers draft a mockup or wireframe informed by what they've seen or <a href="https://www.lukew.com/ff/entry.asp?2027">experienced before</a>. But that's actually when the design process starts, not ends.</p>
-
-<blockquote>"Art does not begin with imitation, but with discipline."—Sun Ra, 1956</blockquote>
-
-<p>Your first design, while it may seem like a solution, is usually just an early definition of the problem you are trying to solve. This iteration surfaces unanswered questions, puts assumptions to the test, and generally works to establish what you need to learn next.</p>
-
-<blockquote>"Design is the art of gradually applying constraints until only one solution remains."—Unknown</blockquote>
-
-<p>Each subsequent iteration is an attempt to better understand what is actually needed to solve the specific problem you're trying to address with your design. The more deeply you <a href="https://www.lukew.com/ff/entry.asp?151">understand the problem</a>, the more likely you are to land on an elegant and effective solution. The process of iteration is a constant learning process that gradually reveals the right path forward.</p>
-
-<blockquote>"True simplicity is, well, you just keep on going and going until you get to the point where you go... Yeah, well, of course."
-—Jonathan Ive, September, 2013</blockquote>
-
-<p>When the right approach reveals itself, it feels obvious. But only in retrospect. <strong>Design is only obvious in retrospect.</strong> It takes iteration and discipline to get there. But when you do get there, it's much easier to explain your design decisions to others. You know why the design is the right one and can frame your rationale in the context of the problem you are trying to solve. This makes <a href="https://www.lukew.com/ff/entry.asp?76">presenting designs</a> easier and highlights the strategic impact of designers.</p>
+title: Until the Right Design Emerges...
+url: https://lukew.com/ff/entry.asp?2036
+hash_url: 84f8caf3e7f7b3de9e18281749c3687f
+archive_date: 2024-01-13
+og_image: https://static.lukew.com/lukew_og_img7.png
+description: Too often, the process of design is cut short. When faced with user needs or product requirements, many designers draft a mockup or wireframe informed by what they've seen or experienced before
+
+<p class="feature">Too often, the process of design is cut short. When faced with user needs or product requirements, many designers draft a mockup or wireframe informed by what they've seen or <a href="https://www.lukew.com/ff/entry.asp?2027">experienced before</a>. But that's actually when the design process starts, not ends.</p>
+
+<blockquote>"Art does not begin with imitation, but with discipline."—Sun Ra, 1956</blockquote>
+
+<p>Your first design, while it may seem like a solution, is usually just an early definition of the problem you are trying to solve. This iteration surfaces unanswered questions, puts assumptions to the test, and generally works to establish what you need to learn next.</p>
+
+<blockquote>"Design is the art of gradually applying constraints until only one solution remains."—Unknown</blockquote>
+
+<p>Each subsequent iteration is an attempt to better understand what is actually needed to solve the specific problem you're trying to address with your design. The more deeply you <a href="https://www.lukew.com/ff/entry.asp?151">understand the problem</a>, the more likely you are to land on an elegant and effective solution. The process of iteration is a constant learning process that gradually reveals the right path forward.</p>
+
+<blockquote>"True simplicity is, well, you just keep on going and going until you get to the point where you go... Yeah, well, of course."
+—Jonathan Ive, September, 2013</blockquote>
+
+<p>When the right approach reveals itself, it feels obvious. But only in retrospect. <strong>Design is only obvious in retrospect.</strong> It takes iteration and discipline to get there. But when you do get there, it's much easier to explain your design decisions to others. You know why the design is the right one and can frame your rationale in the context of the problem you are trying to solve. This makes <a href="https://www.lukew.com/ff/entry.asp?76">presenting designs</a> easier and highlights the strategic impact of designers.</p>

cache/2024/877ad04fd329c26c80113e15dec540df/index.md

@@ -2,6 +2,8 @@ title: The Walk and Talk: Everything We Know
 url: https://craigmod.com/ridgeline/176/
 hash_url: 877ad04fd329c26c80113e15dec540df
 archive_date: 2024-01-18
+og_image: https://craigmod.com/ridgeline/images/176/176.jpg
+description: Kevin Kelly and my notes detailing everything we've learned walking and talking these past six years
 
 <p>Happy holidays, walkers!</p>
 <p><a href="https://kk.org">Kevin Kelly</a> and I began talking while walking together some twelve years ago, near his home in Pacifica. Eventually, we branched out, and for these past six years have been running more “formalized” walk-and-talks across five countries with some 40+ people. We’ve walked-and-talked in China, Spain, England, Japan, and Thailand. These experiences are some of the best weeks of our lives.</p>
@@ -224,4 +226,4 @@ archive_date: 2024-01-18
 <p>We feel exceedingly lucky to have run our walk-and-talks these past few years. They’ve been some of the most rewarding weeks of our lives.</p>
 <p>If you host a walk-and-talk of your own, please let us know what methods did not work for you, and if you created any improvements. Where did you walk? What would you change? Let us know!</p>
 <p>— Kevin and Craig</p>
-<img src="https://craigmod.com//ridgeline/images/175/craig.jpg" alt="craig and kevin">
+<p><img src="https://craigmod.com//ridgeline/images/175/craig.jpg" alt="craig and kevin"></p>

cache/2024/87c468a4eddabe5d2c28e902d7f17504/index.md

@@ -2,7 +2,9 @@ title: je ne sais pas pourquoi
 url: https://www.la-grange.net/2024/01/11/pourquoi
 hash_url: 87c468a4eddabe5d2c28e902d7f17504
 archive_date: 2024-01-11
-  
+og_image: 
+description: 
+
 <figure>
   <img src="https://www.la-grange.net/2024/01/09/3045-glace.jpg" alt="Cubes de glace étalés sur la chaussée à côté de boîte en plastique et d'un poteau rouge. La glace a un peu fondu.">
   <figcaption>Roppongi, Japon, 9 janvier 2024</figcaption>
@@ -30,4 +32,4 @@ archive_date: 2024-01-11
 <hr>
 <p>J'ai commencé à lire <a href="https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/">Let’s learn how modern JavaScript frameworks work by building one</a>. Mais il me manque quelque chose. Peut-être une visualisation ? et de meilleurs exemples.</p>
 <hr>
-<p>Dans Carbone 14, récemment, il y avait une <a href="https://podcasts.apple.com/fr/podcast/sapiens-sa-naissance-sa-conqu%C3%AAte-du-monde/id300710648?i=1000640745006">émission sur l'homo sapiens et autres hominidés</a>. On parle souvent de l'humain façonnant son environnement et de l'humain s'ajustant à son environnement. L'invité parlait d'une intimité plus grande en parlant d'adaptation et d'ajustement à l'environnement façonné par l'humain. En transformant son environnement, nous nous transformons nous-même dans le même temps.</p>
+<p>Dans Carbone 14, récemment, il y avait une <a href="https://podcasts.apple.com/fr/podcast/sapiens-sa-naissance-sa-conqu%C3%AAte-du-monde/id300710648?i=1000640745006">émission sur l'homo sapiens et autres hominidés</a>. On parle souvent de l'humain façonnant son environnement et de l'humain s'ajustant à son environnement. L'invité parlait d'une intimité plus grande en parlant d'adaptation et d'ajustement à l'environnement façonné par l'humain. En transformant son environnement, nous nous transformons nous-même dans le même temps.</p>

cache/2024/89dbef9daef24f311b6401cef62f5855/index.md

@@ -2,157 +2,83 @@ title: Des Oloés
 url: https://tw5.immateriel.fr/wiki/immateriel/b/YXGEDFB
 hash_url: 89dbef9daef24f311b6401cef62f5855
 archive_date: 2024-01-11
-
-Une chaise, un lit, un canapé, une baignoire, une place de métro, un banc dans un parc, un muret. Un fauteuil à roulettes, une file d’attente, une branche, une buche, un abri de tramway, une marche d’escalier. Une plage, un kiosque, un socle de statue, un recoin de cafétéria. Un bar sans BFM, une borne kilométrique, une alcôve, une serre, un divan de musée. Un pont. Un toit. Un rocher au soleil. Un compartiment vide, un rebord de fenêtre, un parpaing de parking, un tapis enroulé. Un pouf. Une malle. Un siège de WC. Un tas de feuilles sous un arbre, la pelouse des piscines renommée solarium, la salle des pas perdus quand elle n’est pas devenue une galerie marchande. Un cube dans une galerie. Le bas des toboggans. Une cabine d’essayage au fond d’un magasin. Un tabouret de cuisine, un rempart, un trépied, une dune, une clairière, un opéra fermé. Un squat. Une salle de sport en grève. Un coussin, une chauffeuse. Une butte, une balançoire. Un corps nu qu’on aime (ou habillé) (s’y appuyer). Un édredon. Une méridienne.
-
-Un oloé.
-
-Le livre que vous allez lire a déjà vécu plusieurs vies, presque jumelles, jamais semblables. Tout a commencé par une commande de Mélico[1], un site web disparu sur lequel on pouvait entendre des entretiens avec des libraires, trouver des articles les concernant mais aussi des textes d’auteurs évoquant les livres, la lecture. C’est grâce à Hélène Clemente du SNL et à Pierre Cohen-Hadria, qui menait alors les interviews, que j’ai trouvé un lieu où faire vivre ce mot inventé : oloé. O-L-O-É. Où lire ou écrire. Où lire où écrire. N’importe quel espace, meuble, objet détourné qui le permette.
-
-La parution se faisait alors en feuilleton, à un rythme mensuel. En 2011, les textes furent réunis dans un livre numérique avec liens et photos publié par le collectif D-Fiction. Assez vite, alors que je ne m’attendais à rien, j’ai eu la surprise de voir que le mot plaisait, que certains lecteurs se l’appropriaient en décrivant leurs lieux fétiches, au point qu’un site fut créé par l’écrivain Joachim Séné pour regrouper leurs textes : Des oloés du monde entier[2].
-
-Sortir, chercher un lieu où lire où écrire parce qu’on ne peut pas le faire chez soi. Ne pas trouver. Ne pas se décourager. Inventer un mot pour ce manque, écrire tout autour, publier le texte. Voir que l’oloé se propage : voilà l’histoire.
-
-À la relecture, je m’aperçois que c’est également un livre sur un livre, Franck, paru en 2010. À l’époque, j’étais très marquée par les années passées à l’écrire, puis sa publication chez Stock. Si je devais reprendre Des Oloés à zéro, aujourd’hui, ce serait peut-être autre chose, qui sait.
-
-Dans cette nouvelle version, vous trouverez quelques différences, parfois des retraits (j’ai supprimé photos et liens), des ajouts surtout : des notes, des propositions pour ceux qui auraient envie de s’y mettre, d’écrire leurs propres oloés et un livret final comprenant des textes de Thierry Beinstingel, Pierre Cohen-Hadria, Virginie Gautier, Maryse Hache, Olivier Hodasava, Christine Jeanney, Pierre Ménard, Juliette Mézenc, Franck Queyraud, Joachim Séné et Lucien Suel. Qu’ils soient tous très chaleureusement remerciés, avec une pensée pour Maryse, disparue en 2012 et qui reste présente dans nos esprits à tous.
-
-Où lire sur une avenue ? Comment réussir à écrire quand les radios, leurs flashs, leurs tubes ont envahi les cafés, les boutiques et le système nerveux, les couloirs, les entrées, les quais ? Où s’asseoir quand tout nous porte à marcher en pressant le pas, serrer son sac et droit devant rentrer chez soi le plus vite possible ? Où penser ? Où rêver ?
-
-Les oloés, ce seraient ces endroits où lire où écrire (le second o pouvant se comprendre également, c’est au choix, comme un ou), de ville, de mer, de campagne qui font une brèche, nous y accueillent. L’idée n’est pas de fuir mais plutôt de creuser. Parfois ils seront désignés avec précision, comme c’est le cas pour la chaise-table du Cent Quatre trouvée dans un jardin aujourd’hui disparu. Lorsque l’oloé sera privé, on se réservera le droit de rester vague. Des lieux où s’attacher, se concentrer, se laisser distraire ; s’alléger, se lester, jouer des dimensions.
-
-Oui, c’est facile, un inventaire, facile de dresser une liste, moins simple de s’y inscrire, d’abandonner ses impatiences et son désir de résultat (réconfort tangible du chapitre lu, de la page au net) pour s’amalgamer à sa chaise au centre des cris. S’en emparer, de ces lieux conçus on ne sait plus pourquoi, les épier au moins : le poste d’observation, c’est l’urgence.
-
-D’entrée, sur chaque pouce de terrain (hors sol chic, pratiques éthérées), on trouve poudre aux yeux et pics de ciment.
-
-(Regardez, on a monté le décor. Faites comme si vous étiez à l’aise, tant pis pour vos synapses, vos fesses, votre respiration. C’est fait exprès pour vous, qu’on vous dit, ces espaces, parois et stands, alors simulez le bien-être, allez, vite, payez, cher, stop, à d’autres, au coin, au large, au poste, au clou, ailleurs, tirez-vous. Et revenez, bien sûr.
-
-(on ne vous l’a pas dit, on vous l’a fait comprendre et vous l’avez compris)
-
-Ne personnifiez pas la misère, n’étalez pas le dégoût. Ayez l’air, ayez l’air, encastré, démembré, mieux que ça, tordez-vous.
-
-Comment, que faire de vos corps ? Quels corps au juste ? Votre intime c’est notre surface. On vous l’extirpe, le met à jour, l’adoucit ce qu’il faut. Pas trop, quand même, vous devez rester armé, cuirassé au cas où. On vous le revend le triple, comptez dessus.
-
-Vos émois ? Lesquels ? Des émois à la mode, j’espère.
-
-Le présent ? Là, total, intégré et pourtant pas de temps mort, pas de circonvolution, n’insistez pas.
-
-Ah.)
-
-Facile mais ajoutons quand même, pour les détourner, qu’ils résistent : hamacs, gradins, rambardes, chaises longues et nattes, futons, sofas, strapontins et parquets. Loges, gazons, duvets, abribus, banquettes, cagibis et terrasses, aéroports, laveries. Salles d’attente diverses. Impasses, replis. Inconforts à briser ou soigner ou défendre
-
-tout ce qui pousse à l’angle
-
-dans les rayons, le vent
-
-dans l’absence et le quart
-
-le silence impossible
-
-dans le concret des pieds posés, des hanches, des mains qui se saisissent, des doigts qui frappent, tournent une page, forment des boucles
-
-sur des planches, scènes, paliers, ces entraves et sangles nouées dénouées nouées
-
-dans l’inquiétude, le souvenir, les images mentales
-
-dans la perte de repères et la transformation
-
-dans leurs mots, dans ce qu’on leur devine, ce qu’on espère de courbe
-
-(on voudrait les manipuler, extraire la sève, sauter dans le vide et ne plus avoir peur)
-
-dans cette échappée permanente qui peut rendre fou on le sait
-
-aller chercher partout ce qu’on pourrait devenir hors formulaire
-
-hors facture et hors agenda
-
-hors prévision, réaction à l’oral, à l’écrit quand on vous dit sans le dire ne vous trompez pas de langue, sachez vous habiller, marcher, rire selon le schéma en pièce jointe
-
-regarder par en dessous, de haut, de biais selon la tendance du jour sachez répondre
-
-ne pas répondre
-
-vous adapter sans réclamer le dû
-
-désirer quoi ?
-
-tendre la main
-
-ou non ?
-
-si on n’y pense pas
-
-si on n’en rêve pas
-
-si on se contente de
-
-si on se réduit à
-
-c’est mort
-
-en passer par l’escrime, absorptions, envolées
-
-en passer par le risque
-
-même très petit risque
-
-Dans l’oloé on cherchera à rester libre, assis, couché, debout, même sur le flanc.
-
-#1 Chaise-table de la halle Curial
-
-Début 2009, je me suis retrouvée pour la première fois en résidence d’écriture, au CentQuatre, ou 104, à Paris. L’établissement artistique, ancien site des Pompes funèbres, ex-atelier de fabrication de cercueils et de décorations mortuaires, de réparation de corbillards, commençait à ouvrir ses portes. C’était alors un espace vide, gris, nu, soumis à des travaux qui n’en finissaient pas. L’entrée était sonorisée, on y entendait des bruitages, des poèmes – mal, à cause des perceuses, des marteaux. Une librairie allait s’installer, et la Villa Arpel de Mon Oncle, le film de Jacques Tati, ancrer son décor pour quelques semaines. Pour l’instant, rien. Personne, en dehors des vigiles, des agents d’accueil, des femmes de ménage. Il faisait -13°, c’était un mois de janvier glacial. Dans un coin de la halle Curial où jadis circulaient des chevaux, seul un jardin potager semi-vertical planté d’asparagus, affleurant au-dessus de caisses empilées les unes sur les autres où dormaient des graines, des bulbes, des noyaux, pouvait donner envie d’arrêter sa marche. Il y avait de quoi se cacher un peu.
-
-Parler de cette chaise-table en bois faite d’un bloc, située dans le jardin du 104, c’est sans doute commencer d’expliquer ce que je souhaite faire ici. Chacun ses obsessions, bien sûr. L’une des miennes, c’est cette place dans le monde que le monde vous octroie ou non, que vous allez chercher ou non, que vous investissez ou non. Une place qui parfois s’offre mais qu’il vous faut souvent inventer et défendre. Une place où lire écrire, disons.
-
-Ce qui traverse quand on décide d’écrire, ce à quoi on échappe et ce qui nous contient quand c’est lire qui nous prend, c’est cela que je voudrais pour guide. Que la ville nous chasse, cherche à nous empêcher, depuis des années c’est certain. Mais qu’on guette (un luxe à s’octroyer, c’est tout) et voilà qu’elle sécrète dans un même mouvement interstices, fissures, venelles où s’immiscer pour lire écrire penser rêver mettez-y ce que vous vous voulez. Tout cela on le sait, mais…
-
-Cette chaise-table du 104, par exemple, personne ne la voit. Personne ne s’aperçoit qu’on en trouve même deux, placées en vis-à-vis, à l’entrée du jardin de la halle Curial. Entre les plantes-bouteilles, les casques où écouter des pas sur le gravier et les sculptures d’enfants elles n’attendent que nous, on croirait deux trains qui se croisent. C’est Mawa, femme de ménage, mère d’une petite fille gardée à la crèche rue Curial, là, tout près, qui me l’a fait connaître. On s’est installées face à face, chacune sa travée, a posé les mains sur la table. On s’est appuyées au dossier, a souri, soulagées d’échapper pour un instant aux verticales. Puis on s’est aperçues qu’en s’asseyant vraiment, jambes et buste alignés, comme pour une longue pause, on avait les pieds dans la terre, qu’on pouvait la remuer – qui l’aurait soupçonné, à nous voir ? On a discuté des slogans de Christian Prigent, lancés d’habitude à toute volée par les haut-parleurs de la halle, à l’angle, brouillés, hachés, bouillie de sons à qui la direction, à cette époque, avait coupé le sifflet. L’auteur allait venir et on n’était pas sûr qu’il aurait apprécié, ai-je cru comprendre, mais peut-être l’ai-je imaginé. On a parlé enfants, vide, plein, maison de Mon oncle, surgissement de Jacques Tati entre avril et mai.
-
-Je me suis dit : enfin un bon endroit pour lire écrire dans ce 104 qui écrase et fatigue, écartèle aux points telluriques – on en part en petits morceaux. Et puis non. Pas lu pas écrit grand-chose malgré la terre et la verrière, les plantes qui protègent des regards. À l’étage les agents d’accueil tapotaient la vitre, me faisaient signe. Je relevais la tête, on riait. Je revenais au carnet mais c’était compliqué, il y avait trop à voir et surtout à entendre. Des écrans avaient été installés par une étudiante des Beaux-Arts (bruit de fond) ; les travaux se poursuivaient côté librairie (martèlements), les slogans reprenaient.
-
-Quand la librairie a ouvert, à trois mètres, l’attraction fut trop forte, de toute façon. Partout ailleurs, au-delà des fluctuations, dérives, disparitions d’œuvres et d’artistes rien n’avait encore d’histoire tandis qu’elle, étagères arrondies et blondes, chaque livre aimé et choisi, semblait là depuis dix ans. Fureter, s’asseoir, regarder à la dérobée. Retourner en tous sens les cartes, BD, CD, gadgets, et bien sûr les livres : comment l’étroite chaise-table aurait-elle pu lutter ?
-
-Ne pas tenir en place, ici, et donc partir.
-
-Propositions d’écriture
-
-S’installer à l’intérieur d’une œuvre d’art dans un musée ou une galerie, autrement dit dans un lieu a priori inconfortable pour écrire, peut-être intimidant et cependant dédié à l’art. Examiner ce qui se produit et l’écrire. Est-ce qu’on trouve où s’asseoir, et comment ? Le corps est-il à l’aise ? Se fait-on déloger ? Si oui, au bout de combien de temps ? Poursuivre l’expérience le plus longtemps possible en notant les solutions de repli, les émotions perçues, le sentiment de solitude ou, au contraire, de victoire après l’accaparement du lieu.
-
-Variante • Choisir n’importe quel lieu non destiné à l’écriture (chantier, quai, entrepôt…) à la condition qu’il soit vide.
-
-#2 Parasites au jardin secret
-
-Parce que j’y reviens souvent, ce lieu, depuis la parution du livre, est devenu purement et simplement l’oloé 2, dont je parle ainsi, tandis que les autres ont perdu leur numérotation.
-
-Mi-juillet, déjà, le soleil peine dans ce jardin de l’Oise. D’instinct, pour l’avoir pratiqué autrement, on sait que le bon endroit pour lire écrire est ancré dans cette courbe que font le groseillier, le framboisier, les orties et le poirier, semi-cachette d’où épier les murs, la haie du voisin et les briques. Les abeilles et moucherons chaloupent, s’intéressent au clavier, à l’appareil-photo. La route est loin, le chemin derrière la clôture peu fréquenté.
-
-Quelqu’un a installé un banc (tous ne sont pas accessibles) qu’on retourne et déplace à deux. On serait mieux par terre mais c’est encore mouillé de la nuit.
-
-Un chant, soleil, quelques obliques. C’est vert, paisible, à peine un vent léger, à peine un avion sous les nuages. Pourtant, des mots qui blessent, durent, empêchent d’avancer, s’interposent au moment d’écrire : pourquoi ? Des mots entendus au moins deux ans plus tôt, injustes et mal venus, à propos d’un autre travail, mais c’était alors, ce travail : écrire sur le ténu, le fugace, sur ce qu’on perçoit à peine. Et à vouloir reprendre même d’une autre façon cette tentative les jugements affleurent à nouveau, la voix surtout, son grain, le ton et le débit – les mots, pas tant que ça. Qu’en faire ?
-
-Ciel gris. Un ciel mouvant décidément – mais écrivant ciel gris, majuscule, point, pas plus, dix touches sur le clavier, quelque chose se déchire soudain, ces deux mots justement comme sur une feuille lancée en l’air. À la barre, Dita Kepler[3]. Sous l’écorce, dans les buissons, partout elle accuse, prononce vol et contrefaçon : ciel gris tu l’as déjà écrit, tu t’en sers pour moi, tu te souviens ?
-
-Banc de face, de profil, accueillir ce qui vient et qui soit autre que la colère, autre que le texte en cours.
-
-Quoi donc ? Ah, si : rêvé cette nuit d’une lecture en public avec Catherine Deneuve qui était écrivain. Elle m’expliquait le principe de son texte : des variations autour d’adjectifs commençant tous par f, dont fier, furieux. Sans même l’entendre lire l’idée m’enchantait.
-
-(et là imaginer la suite d’adjectifs, y river les jugements, les décaper, les tordre, les plaquer au sol)
-
-Au réveil, à sa suite, est née une autre idée. De celles qui permettent de se ré-approprier ce qu’on a jeté de vous, s’imposent à l’instant après avoir attendu des semaines, des mois pour se manifester. Parfait.
-
-Soleil à nouveau sur le banc. Les mots blessants s’éloignent, toujours aux aguets cependant, tandis qu’un insecte indéterminé, long et gracile, traverse l’écran. S’éloignent seuls, sans qu’on s’en préoccupe ?
-
-Ceux qui de cette façon s’arrogent le jugement, font et défont la pelote même sans volonté, par simple maladresse, perdent tant par ailleurs, qu’on les laisse aux clôtures. Je laisse, tu laisses, nous laissons. Groseilles, framboises dans le dos. Abeille, guêpe, moucheron, mouvement de recul et à gauche dans l’herbe deux romans entamés : pour éloigner sa bouche, au type, ce qu’il a dit au téléphone alors qu’on n’avait rien demandé, il suffit sans doute d’en ouvrir, rouvrir un.
-
-Il mit ses mains devant ses yeux et risqua un regard jusqu’au hublot. Au-dehors, un aileron brillait, comme chauffé à blanc dans l’éclat du soleil. Alentour, tout était obscur et cette obscurité était très certainement emplie d’étoiles qu’il était impossible de voir.
-
-Arthur C. Clarke, 2001 : L’odyssée de l’espace, traduit de l’anglais par Michel Demuth.
-
-Proposition d’écriture
-
-S’installer dans le lieu le plus propice, le plus paradisiaque qui soit pour écrire. Examiner ce qui parasite, les pensées gênantes, paralysantes, jugements sur soi ou son travail de personnes faisant autorité, etc. Ne pas les décrire. Ne pas écrire pour se venger ni les analyser. Noter au contraire ce qui les suit, bifurque, leur permet de glisser. Les utiliser pour décrire le lieu.
-
-Si rien ne se produit, si aucun malaise préalable n’empêche d’écrire, examiner en quoi la perfection du lieu et du moment présent permet, ou non, de le faire.
-
-Et si rien ne vient, rester là et lire.
+og_image: 
+description: 
+
+<p>Une chaise, un lit, un canapé, une baignoire, une place de métro, un banc dans un parc, un muret. Un fauteuil à roulettes, une file d’attente, une branche, une buche, un abri de tramway, une marche d’escalier. Une plage, un kiosque, un socle de statue, un recoin de cafétéria. Un bar sans BFM, une borne kilométrique, une alcôve, une serre, un divan de musée. Un pont. Un toit. Un rocher au soleil. Un compartiment vide, un rebord de fenêtre, un parpaing de parking, un tapis enroulé. Un pouf. Une malle. Un siège de WC. Un tas de feuilles sous un arbre, la pelouse des piscines renommée solarium, la salle des pas perdus quand elle n’est pas devenue une galerie marchande. Un cube dans une galerie. Le bas des toboggans. Une cabine d’essayage au fond d’un magasin. Un tabouret de cuisine, un rempart, un trépied, une dune, une clairière, un opéra fermé. Un squat. Une salle de sport en grève. Un coussin, une chauffeuse. Une butte, une balançoire. Un corps nu qu’on aime (ou habillé) (s’y appuyer). Un édredon. Une méridienne.</p>
+<p>Un oloé.</p>
+<p>Le livre que vous allez lire a déjà vécu plusieurs vies, presque jumelles, jamais semblables. Tout a commencé par une commande de Mélico[1], un site web disparu sur lequel on pouvait entendre des entretiens avec des libraires, trouver des articles les concernant mais aussi des textes d’auteurs évoquant les livres, la lecture. C’est grâce à Hélène Clemente du SNL et à Pierre Cohen-Hadria, qui menait alors les interviews, que j’ai trouvé un lieu où faire vivre ce mot inventé : oloé. O-L-O-É. Où lire ou écrire. Où lire où écrire. N’importe quel espace, meuble, objet détourné qui le permette.</p>
+<p>La parution se faisait alors en feuilleton, à un rythme mensuel. En 2011, les textes furent réunis dans un livre numérique avec liens et photos publié par le collectif D-Fiction. Assez vite, alors que je ne m’attendais à rien, j’ai eu la surprise de voir que le mot plaisait, que certains lecteurs se l’appropriaient en décrivant leurs lieux fétiches, au point qu’un site fut créé par l’écrivain Joachim Séné pour regrouper leurs textes : Des oloés du monde entier[2].</p>
+<p>Sortir, chercher un lieu où lire où écrire parce qu’on ne peut pas le faire chez soi. Ne pas trouver. Ne pas se décourager. Inventer un mot pour ce manque, écrire tout autour, publier le texte. Voir que l’oloé se propage : voilà l’histoire.</p>
+<p>À la relecture, je m’aperçois que c’est également un livre sur un livre, Franck, paru en 2010. À l’époque, j’étais très marquée par les années passées à l’écrire, puis sa publication chez Stock. Si je devais reprendre Des Oloés à zéro, aujourd’hui, ce serait peut-être autre chose, qui sait.</p>
+<p>Dans cette nouvelle version, vous trouverez quelques différences, parfois des retraits (j’ai supprimé photos et liens), des ajouts surtout : des notes, des propositions pour ceux qui auraient envie de s’y mettre, d’écrire leurs propres oloés et un livret final comprenant des textes de Thierry Beinstingel, Pierre Cohen-Hadria, Virginie Gautier, Maryse Hache, Olivier Hodasava, Christine Jeanney, Pierre Ménard, Juliette Mézenc, Franck Queyraud, Joachim Séné et Lucien Suel. Qu’ils soient tous très chaleureusement remerciés, avec une pensée pour Maryse, disparue en 2012 et qui reste présente dans nos esprits à tous.</p>
+<p>Où lire sur une avenue ? Comment réussir à écrire quand les radios, leurs flashs, leurs tubes ont envahi les cafés, les boutiques et le système nerveux, les couloirs, les entrées, les quais ? Où s’asseoir quand tout nous porte à marcher en pressant le pas, serrer son sac et droit devant rentrer chez soi le plus vite possible ? Où penser ? Où rêver ?</p>
+<p>Les oloés, ce seraient ces endroits où lire où écrire (le second o pouvant se comprendre également, c’est au choix, comme un ou), de ville, de mer, de campagne qui font une brèche, nous y accueillent. L’idée n’est pas de fuir mais plutôt de creuser. Parfois ils seront désignés avec précision, comme c’est le cas pour la chaise-table du Cent Quatre trouvée dans un jardin aujourd’hui disparu. Lorsque l’oloé sera privé, on se réservera le droit de rester vague. Des lieux où s’attacher, se concentrer, se laisser distraire ; s’alléger, se lester, jouer des dimensions.</p>
+<p>Oui, c’est facile, un inventaire, facile de dresser une liste, moins simple de s’y inscrire, d’abandonner ses impatiences et son désir de résultat (réconfort tangible du chapitre lu, de la page au net) pour s’amalgamer à sa chaise au centre des cris. S’en emparer, de ces lieux conçus on ne sait plus pourquoi, les épier au moins : le poste d’observation, c’est l’urgence.</p>
+<p>D’entrée, sur chaque pouce de terrain (hors sol chic, pratiques éthérées), on trouve poudre aux yeux et pics de ciment.</p>
+<p>(Regardez, on a monté le décor. Faites comme si vous étiez à l’aise, tant pis pour vos synapses, vos fesses, votre respiration. C’est fait exprès pour vous, qu’on vous dit, ces espaces, parois et stands, alors simulez le bien-être, allez, vite, payez, cher, stop, à d’autres, au coin, au large, au poste, au clou, ailleurs, tirez-vous. Et revenez, bien sûr.</p>
+<p>(on ne vous l’a pas dit, on vous l’a fait comprendre et vous l’avez compris)</p>
+<p>Ne personnifiez pas la misère, n’étalez pas le dégoût. Ayez l’air, ayez l’air, encastré, démembré, mieux que ça, tordez-vous.</p>
+<p>Comment, que faire de vos corps ? Quels corps au juste ? Votre intime c’est notre surface. On vous l’extirpe, le met à jour, l’adoucit ce qu’il faut. Pas trop, quand même, vous devez rester armé, cuirassé au cas où. On vous le revend le triple, comptez dessus.</p>
+<p>Vos émois ? Lesquels ? Des émois à la mode, j’espère.</p>
+<p>Le présent ? Là, total, intégré et pourtant pas de temps mort, pas de circonvolution, n’insistez pas.</p>
+<p>Ah.)</p>
+<p>Facile mais ajoutons quand même, pour les détourner, qu’ils résistent : hamacs, gradins, rambardes, chaises longues et nattes, futons, sofas, strapontins et parquets. Loges, gazons, duvets, abribus, banquettes, cagibis et terrasses, aéroports, laveries. Salles d’attente diverses. Impasses, replis. Inconforts à briser ou soigner ou défendre</p>
+<p>tout ce qui pousse à l’angle</p>
+<p>dans les rayons, le vent</p>
+<p>dans l’absence et le quart</p>
+<p>le silence impossible</p>
+<p>dans le concret des pieds posés, des hanches, des mains qui se saisissent, des doigts qui frappent, tournent une page, forment des boucles</p>
+<p>sur des planches, scènes, paliers, ces entraves et sangles nouées dénouées nouées</p>
+<p>dans l’inquiétude, le souvenir, les images mentales</p>
+<p>dans la perte de repères et la transformation</p>
+<p>dans leurs mots, dans ce qu’on leur devine, ce qu’on espère de courbe</p>
+<p>(on voudrait les manipuler, extraire la sève, sauter dans le vide et ne plus avoir peur)</p>
+<p>dans cette échappée permanente qui peut rendre fou on le sait</p>
+<p>aller chercher partout ce qu’on pourrait devenir hors formulaire</p>
+<p>hors facture et hors agenda</p>
+<p>hors prévision, réaction à l’oral, à l’écrit quand on vous dit sans le dire ne vous trompez pas de langue, sachez vous habiller, marcher, rire selon le schéma en pièce jointe</p>
+<p>regarder par en dessous, de haut, de biais selon la tendance du jour sachez répondre</p>
+<p>ne pas répondre</p>
+<p>vous adapter sans réclamer le dû</p>
+<p>désirer quoi ?</p>
+<p>tendre la main</p>
+<p>ou non ?</p>
+<p>si on n’y pense pas</p>
+<p>si on n’en rêve pas</p>
+<p>si on se contente de</p>
+<p>si on se réduit à</p>
+<p>c’est mort</p>
+<p>en passer par l’escrime, absorptions, envolées</p>
+<p>en passer par le risque</p>
+<p>même très petit risque</p>
+<p>Dans l’oloé on cherchera à rester libre, assis, couché, debout, même sur le flanc.</p>
+<h1>1 Chaise-table de la halle Curial</h1>
+<p>Début 2009, je me suis retrouvée pour la première fois en résidence d’écriture, au CentQuatre, ou 104, à Paris. L’établissement artistique, ancien site des Pompes funèbres, ex-atelier de fabrication de cercueils et de décorations mortuaires, de réparation de corbillards, commençait à ouvrir ses portes. C’était alors un espace vide, gris, nu, soumis à des travaux qui n’en finissaient pas. L’entrée était sonorisée, on y entendait des bruitages, des poèmes – mal, à cause des perceuses, des marteaux. Une librairie allait s’installer, et la Villa Arpel de Mon Oncle, le film de Jacques Tati, ancrer son décor pour quelques semaines. Pour l’instant, rien. Personne, en dehors des vigiles, des agents d’accueil, des femmes de ménage. Il faisait -13°, c’était un mois de janvier glacial. Dans un coin de la halle Curial où jadis circulaient des chevaux, seul un jardin potager semi-vertical planté d’asparagus, affleurant au-dessus de caisses empilées les unes sur les autres où dormaient des graines, des bulbes, des noyaux, pouvait donner envie d’arrêter sa marche. Il y avait de quoi se cacher un peu.</p>
+<p>Parler de cette chaise-table en bois faite d’un bloc, située dans le jardin du 104, c’est sans doute commencer d’expliquer ce que je souhaite faire ici. Chacun ses obsessions, bien sûr. L’une des miennes, c’est cette place dans le monde que le monde vous octroie ou non, que vous allez chercher ou non, que vous investissez ou non. Une place qui parfois s’offre mais qu’il vous faut souvent inventer et défendre. Une place où lire écrire, disons.</p>
+<p>Ce qui traverse quand on décide d’écrire, ce à quoi on échappe et ce qui nous contient quand c’est lire qui nous prend, c’est cela que je voudrais pour guide. Que la ville nous chasse, cherche à nous empêcher, depuis des années c’est certain. Mais qu’on guette (un luxe à s’octroyer, c’est tout) et voilà qu’elle sécrète dans un même mouvement interstices, fissures, venelles où s’immiscer pour lire écrire penser rêver mettez-y ce que vous vous voulez. Tout cela on le sait, mais…</p>
+<p>Cette chaise-table du 104, par exemple, personne ne la voit. Personne ne s’aperçoit qu’on en trouve même deux, placées en vis-à-vis, à l’entrée du jardin de la halle Curial. Entre les plantes-bouteilles, les casques où écouter des pas sur le gravier et les sculptures d’enfants elles n’attendent que nous, on croirait deux trains qui se croisent. C’est Mawa, femme de ménage, mère d’une petite fille gardée à la crèche rue Curial, là, tout près, qui me l’a fait connaître. On s’est installées face à face, chacune sa travée, a posé les mains sur la table. On s’est appuyées au dossier, a souri, soulagées d’échapper pour un instant aux verticales. Puis on s’est aperçues qu’en s’asseyant vraiment, jambes et buste alignés, comme pour une longue pause, on avait les pieds dans la terre, qu’on pouvait la remuer – qui l’aurait soupçonné, à nous voir ? On a discuté des slogans de Christian Prigent, lancés d’habitude à toute volée par les haut-parleurs de la halle, à l’angle, brouillés, hachés, bouillie de sons à qui la direction, à cette époque, avait coupé le sifflet. L’auteur allait venir et on n’était pas sûr qu’il aurait apprécié, ai-je cru comprendre, mais peut-être l’ai-je imaginé. On a parlé enfants, vide, plein, maison de Mon oncle, surgissement de Jacques Tati entre avril et mai.</p>
+<p>Je me suis dit : enfin un bon endroit pour lire écrire dans ce 104 qui écrase et fatigue, écartèle aux points telluriques – on en part en petits morceaux. Et puis non. Pas lu pas écrit grand-chose malgré la terre et la verrière, les plantes qui protègent des regards. À l’étage les agents d’accueil tapotaient la vitre, me faisaient signe. Je relevais la tête, on riait. Je revenais au carnet mais c’était compliqué, il y avait trop à voir et surtout à entendre. Des écrans avaient été installés par une étudiante des Beaux-Arts (bruit de fond) ; les travaux se poursuivaient côté librairie (martèlements), les slogans reprenaient.</p>
+<p>Quand la librairie a ouvert, à trois mètres, l’attraction fut trop forte, de toute façon. Partout ailleurs, au-delà des fluctuations, dérives, disparitions d’œuvres et d’artistes rien n’avait encore d’histoire tandis qu’elle, étagères arrondies et blondes, chaque livre aimé et choisi, semblait là depuis dix ans. Fureter, s’asseoir, regarder à la dérobée. Retourner en tous sens les cartes, BD, CD, gadgets, et bien sûr les livres : comment l’étroite chaise-table aurait-elle pu lutter ?</p>
+<p>Ne pas tenir en place, ici, et donc partir.</p>
+<p>Propositions d’écriture</p>
+<p>S’installer à l’intérieur d’une œuvre d’art dans un musée ou une galerie, autrement dit dans un lieu a priori inconfortable pour écrire, peut-être intimidant et cependant dédié à l’art. Examiner ce qui se produit et l’écrire. Est-ce qu’on trouve où s’asseoir, et comment ? Le corps est-il à l’aise ? Se fait-on déloger ? Si oui, au bout de combien de temps ? Poursuivre l’expérience le plus longtemps possible en notant les solutions de repli, les émotions perçues, le sentiment de solitude ou, au contraire, de victoire après l’accaparement du lieu.</p>
+<p>Variante • Choisir n’importe quel lieu non destiné à l’écriture (chantier, quai, entrepôt…) à la condition qu’il soit vide.</p>
+<h1>2 Parasites au jardin secret</h1>
+<p>Parce que j’y reviens souvent, ce lieu, depuis la parution du livre, est devenu purement et simplement l’oloé 2, dont je parle ainsi, tandis que les autres ont perdu leur numérotation.</p>
+<p>Mi-juillet, déjà, le soleil peine dans ce jardin de l’Oise. D’instinct, pour l’avoir pratiqué autrement, on sait que le bon endroit pour lire écrire est ancré dans cette courbe que font le groseillier, le framboisier, les orties et le poirier, semi-cachette d’où épier les murs, la haie du voisin et les briques. Les abeilles et moucherons chaloupent, s’intéressent au clavier, à l’appareil-photo. La route est loin, le chemin derrière la clôture peu fréquenté.</p>
+<p>Quelqu’un a installé un banc (tous ne sont pas accessibles) qu’on retourne et déplace à deux. On serait mieux par terre mais c’est encore mouillé de la nuit.</p>
+<p>Un chant, soleil, quelques obliques. C’est vert, paisible, à peine un vent léger, à peine un avion sous les nuages. Pourtant, des mots qui blessent, durent, empêchent d’avancer, s’interposent au moment d’écrire : pourquoi ? Des mots entendus au moins deux ans plus tôt, injustes et mal venus, à propos d’un autre travail, mais c’était alors, ce travail : écrire sur le ténu, le fugace, sur ce qu’on perçoit à peine. Et à vouloir reprendre même d’une autre façon cette tentative les jugements affleurent à nouveau, la voix surtout, son grain, le ton et le débit – les mots, pas tant que ça. Qu’en faire ?</p>
+<p>Ciel gris. Un ciel mouvant décidément – mais écrivant ciel gris, majuscule, point, pas plus, dix touches sur le clavier, quelque chose se déchire soudain, ces deux mots justement comme sur une feuille lancée en l’air. À la barre, Dita Kepler[3]. Sous l’écorce, dans les buissons, partout elle accuse, prononce vol et contrefaçon : ciel gris tu l’as déjà écrit, tu t’en sers pour moi, tu te souviens ?</p>
+<p>Banc de face, de profil, accueillir ce qui vient et qui soit autre que la colère, autre que le texte en cours.</p>
+<p>Quoi donc ? Ah, si : rêvé cette nuit d’une lecture en public avec Catherine Deneuve qui était écrivain. Elle m’expliquait le principe de son texte : des variations autour d’adjectifs commençant tous par f, dont fier, furieux. Sans même l’entendre lire l’idée m’enchantait.</p>
+<p>(et là imaginer la suite d’adjectifs, y river les jugements, les décaper, les tordre, les plaquer au sol)</p>
+<p>Au réveil, à sa suite, est née une autre idée. De celles qui permettent de se ré-approprier ce qu’on a jeté de vous, s’imposent à l’instant après avoir attendu des semaines, des mois pour se manifester. Parfait.</p>
+<p>Soleil à nouveau sur le banc. Les mots blessants s’éloignent, toujours aux aguets cependant, tandis qu’un insecte indéterminé, long et gracile, traverse l’écran. S’éloignent seuls, sans qu’on s’en préoccupe ?</p>
+<p>Ceux qui de cette façon s’arrogent le jugement, font et défont la pelote même sans volonté, par simple maladresse, perdent tant par ailleurs, qu’on les laisse aux clôtures. Je laisse, tu laisses, nous laissons. Groseilles, framboises dans le dos. Abeille, guêpe, moucheron, mouvement de recul et à gauche dans l’herbe deux romans entamés : pour éloigner sa bouche, au type, ce qu’il a dit au téléphone alors qu’on n’avait rien demandé, il suffit sans doute d’en ouvrir, rouvrir un.</p>
+<p>Il mit ses mains devant ses yeux et risqua un regard jusqu’au hublot. Au-dehors, un aileron brillait, comme chauffé à blanc dans l’éclat du soleil. Alentour, tout était obscur et cette obscurité était très certainement emplie d’étoiles qu’il était impossible de voir.</p>
+<p>Arthur C. Clarke, 2001 : L’odyssée de l’espace, traduit de l’anglais par Michel Demuth.</p>
+<p>Proposition d’écriture</p>
+<p>S’installer dans le lieu le plus propice, le plus paradisiaque qui soit pour écrire. Examiner ce qui parasite, les pensées gênantes, paralysantes, jugements sur soi ou son travail de personnes faisant autorité, etc. Ne pas les décrire. Ne pas écrire pour se venger ni les analyser. Noter au contraire ce qui les suit, bifurque, leur permet de glisser. Les utiliser pour décrire le lieu.</p>
+<p>Si rien ne se produit, si aucun malaise préalable n’empêche d’écrire, examiner en quoi la perfection du lieu et du moment présent permet, ou non, de le faire.</p>
+<p>Et si rien ne vient, rester là et lire.</p>

cache/2024/956819385548bba6e768563b12edc2d6/index.md

@@ -2,7 +2,9 @@ title: herbe
 url: https://www.la-grange.net/2024/01/24/herbe
 hash_url: 956819385548bba6e768563b12edc2d6
 archive_date: 2024-01-28
-    
+og_image: 
+description: 
+
 <figure>
   <img src="https://www.la-grange.net/2024/01/24/3154-herbe.jpg" alt="Couverte du livre la fraîcheur de l'herbe avec une illustration de graminées.">
   <figcaption>Komagome, Japon, 24 janvier 2024</figcaption>
@@ -28,5 +30,4 @@ archive_date: 2024-01-28
 <hr>
 <p><a href="https://www.stefanjudis.com/today-i-learned/oklch-perceived-lightness/">oklch() retains perceived lightness for different hue angles</a></p>
 <hr>
-<p><a href="https://svg.bradwoods.io/lessons/viewbox">A creative coding lesson. How the SVG ViewBox works</a></p>
-
+<p><a href="https://svg.bradwoods.io/lessons/viewbox">A creative coding lesson. How the SVG ViewBox works</a></p>

cache/2024/9b4b5364526390ba1db9c4a651ea8311/index.md

@@ -1,58 +1,54 @@
-title: Teaming is hard because you’re probably not really on a team
-url: https://www.strategy-business.com/article/Teaming-is-hard-because-youre-probably-not-really-on-a-team
-hash_url: 9b4b5364526390ba1db9c4a651ea8311
-archive_date: 2024-01-29
-
-<p>We’ve been thinking a lot about teams lately. As more companies release formal policies around hybrid and remote work, leaders are telling us that remote work has made working together, or teaming, difficult and has frayed the culture of their organizations. Of course, many companies, including our own, PwC, have long embraced remote work, with great success. And if we listen carefully to the types of problems leaders and workers say they’re encountering with teaming, the reality is that most of these issues existed prior to the pandemic.</p>
-
-
-
-<p>Many, if not most, workers are frustrated with the groups of people they work with. Leaders and members struggle with long hours, inefficient ways of working, lack of accountability, and frustrating group dynamics. The COVID-19 pandemic didn’t create a teaming crisis. It exposed deficiencies in the in-person model while introducing even more complexity.</p>
-
-<p>In the course of our work with clients across various industries, we have identified several issues that contribute to this frustration. But the most basic one is this: in many cases, people are not and have never been on real teams, nor should they be.</p>
-
-<h3>If not teams, then what?</h3>
-
-<p>Teams don’t exist simply because someone puts some names in boxes on an org chart and assigns a leader. Quite the opposite. Teams exist for specific reasons and have specific supporting structures. Our colleague <a href="https://www.strategyand.pwc.com/gx/en/insights/katzenbach-center.html?utm_campaign=sbpwc&amp;utm_medium=site&amp;utm_source=articletext" target="_blank">Jon Katzenbach</a> defines a real team as a small group of people with complementary skills who are committed to a shared purpose, who succeed or fail together, and who hold one another accountable.</p>
-
-
-
-<p>If you feel that your group is missing any one of these ingredients, you might not be part of a real team. This isn’t inherently a bad thing. But it does prompt the question: what should you call the group of people you work with every day?</p>
-
-<p>We can typically break down collaboration groups into three types:</p>
-
-<p><strong>• Real teams</strong> are all about solving the hardest, most complex problems. A diverse set of perspectives and skills is required to untangle these sorts of problems, for which there is no obvious solution. Members of a real team trust one another and work toward a common goal. Real teams are thoughtful. Team members argue, and they push one another to do better. Real teams require nimble leaders who prioritize building connections within the team. They create clear boundaries that reinforce a strong sense of trust. They have a shared purpose and clear norms. And, importantly, they produce a collective output. If you see a group of people focusing intently on solving a single, very complex problem, you’re probably looking at a real team.</p>
-
-<p><strong>• Working groups</strong> are all about efficiency. Most people spend most of their productive time in working groups. We’ll say it again: there is nothing wrong with being in a working group. In fact, working groups are often best suited to the tasks at hand. Managers of working groups focus heavily on techniques to make their collaboration more efficient. Members assign work, share information, and complete tasks individually. Individual accountability is high; emotional commitment and sense of shared purpose are relatively low. If you see people execute a disciplined “five-minute stand-up,” they’re acting like a working group.</p>
-
-<p><strong>• Teams-in-name-only</strong> are groups that claim to be a team, but lack emotional commitment and shared purpose. They are like working groups, but without the efficient processes and individual responsibility. Work gets done, but not always in the most efficient or effective manner. Being on a team-in-name-only requires neither discipline nor commitment, which typically makes it the default mode of working. If a team-in-name-only has a leader, she or he often has minimal leadership skills. Members of a team-in-name-only spend a lot of time talking about their own individual responsibilities, and team meetings become a series of one-on-one conversations between managers and their subordinates. If you aren’t having conversations about how you work, your objectives, and your commitments to the people you work with, there’s a good chance you are functioning as a team-in-name-only. The five-minute stand-up that lasts 90 minutes is a common characteristic of a team-in-name-only.</p>
-
-<p>Although most people are told that they’re part of a team, the reality is that, more often than not, they’re members of a team-in-name-only.</p>
-
-
-
-<h3>Why does work feel so much harder now?</h3>
-
-<p>Consider how you probably would have solved a problem or worked through a crisis as recently as February 2020. The process probably would have begun with a manager saying, “Team, I think it’s going to be a long week,” and you and your fellow group members would have responded in kind. You would have rolled up your sleeves, found a place to serve as your war room, and figured out a way to get the task done. You might not have worked together in the most effective or satisfying way, but you would have worked hard and produced a result.</p>
-
-<p>This is a quintessential team-in-name-only experience—a recipe for a result that is acceptable or even good, but not necessarily satisfying or great. As we flash forward to the present, many organizations still haven’t decided to work smarter. Rather, they’ve doubled down on this version of “non-teaming.” Here are two ways the team-in-name-only is manifested today:</p>
-
-<div class="pullquote">
-<p>The five-minute stand-up that lasts 90 minutes is a common characteristic of a team-in-name-only.</p>
-</div>
-
-<p><strong>1. Meeting bloat.</strong> When a leader avoids making decisions or it’s unclear who should be in the room, the default approach is to have more meetings or invite more people. But what happens when a meeting is no longer confined to a physical space? The ten people who used to max out the available seating in a small conference room can quickly turn into 50 people on a video call, most of whom are unsure of their role, why they were invited, or whether they could have declined the invitation.</p>
-
-<p><strong>2. Excess use of email and chat.</strong> In a pre-pandemic world, managers and colleagues could complement these less-effective communication modes with in-person contact (whether it was planned or spontaneous). Now that in-person connections are not always available, we have overcorrected with a less-than-ideal technology solution.</p>
-
-<p>Both of these outcomes have made work harder and are a direct result of not being deliberate about how to work as individuals and as a collective. So, what are some of the choices and decisions you need to make to be most effective in your work?</p>
-
-<p><strong>Ask whether you need to function as a working group or a real team.</strong> Recognize that those two ways of working together look very different. It’s not impossible to switch between them. But it’s helpful to be clear which mode you’re using and why. Are the problems this group needs to solve sufficiently complex to warrant the expenditure of emotional energy it takes to build a real team? Is the expected output a collective effort that requires active problem-solving? Or is a high-functioning, efficient working group good enough?</p>
-
-<p></p>
-
-<p><strong>Shrink your group size.</strong> We’ve found that the ideal size for virtual teams is actually three individuals, potentially four if the leader isn’t a full-time member of the team. Having more people involved requires significant facilitation and strong norms in order for the group to be effective. Look at any meeting you host, and ask if everyone really needs to be involved. Working groups can often handle a larger size (six to eight participants), as long as the purpose of the meeting is well understood (e.g., information-sharing versus problem-solving).</p>
-
-<p><strong>Make the implicit explicit.</strong> As your teams and groups add and lose members, it becomes necessary to reinforce norms. Don’t rely on informal means of reinforcing teaming behaviors. Be deliberate about discussing matters like when you communicate, how meetings will be run, and the expectations team members have of one another.</p>
-
-<p>These suggestions aren’t silver bullets, but by making deliberate choices about how to collaborate, you can avoid the worst of both worlds: a bloated team-in-name-only that has unclear expectations. After identifying whether your work requires a real team or a working group, you can start taking advantage of remote and hybrid work’s benefits instead of constantly grappling with its downsides.</p>
+title: Teaming is hard because you’re probably not really on a team
+url: https://www.strategy-business.com/article/Teaming-is-hard-because-youre-probably-not-really-on-a-team
+hash_url: 9b4b5364526390ba1db9c4a651ea8311
+archive_date: 2024-01-29
+og_image: https://www.strategy-business.com/media/image/44400500b_thumb5_690x400.jpg
+description: Hybrid and remote work are complicating many of the collaborative challenges that were present long before the pandemic arrived.
+
+<p>We’ve been thinking a lot about teams lately. As more companies release formal policies around hybrid and remote work, leaders are telling us that remote work has made working together, or teaming, difficult and has frayed the culture of their organizations. Of course, many companies, including our own, PwC, have long embraced remote work, with great success. And if we listen carefully to the types of problems leaders and workers say they’re encountering with teaming, the reality is that most of these issues existed prior to the pandemic.</p>
+
+<p>Many, if not most, workers are frustrated with the groups of people they work with. Leaders and members struggle with long hours, inefficient ways of working, lack of accountability, and frustrating group dynamics. The COVID-19 pandemic didn’t create a teaming crisis. It exposed deficiencies in the in-person model while introducing even more complexity.</p>
+
+<p>In the course of our work with clients across various industries, we have identified several issues that contribute to this frustration. But the most basic one is this: in many cases, people are not and have never been on real teams, nor should they be.</p>
+
+<h3>If not teams, then what?</h3>
+
+<p>Teams don’t exist simply because someone puts some names in boxes on an org chart and assigns a leader. Quite the opposite. Teams exist for specific reasons and have specific supporting structures. Our colleague <a href="https://www.strategyand.pwc.com/gx/en/insights/katzenbach-center.html?utm_campaign=sbpwc&amp;utm_medium=site&amp;utm_source=articletext" target="_blank">Jon Katzenbach</a> defines a real team as a small group of people with complementary skills who are committed to a shared purpose, who succeed or fail together, and who hold one another accountable.</p>
+
+<p>If you feel that your group is missing any one of these ingredients, you might not be part of a real team. This isn’t inherently a bad thing. But it does prompt the question: what should you call the group of people you work with every day?</p>
+
+<p>We can typically break down collaboration groups into three types:</p>
+
+<p><strong>• Real teams</strong> are all about solving the hardest, most complex problems. A diverse set of perspectives and skills is required to untangle these sorts of problems, for which there is no obvious solution. Members of a real team trust one another and work toward a common goal. Real teams are thoughtful. Team members argue, and they push one another to do better. Real teams require nimble leaders who prioritize building connections within the team. They create clear boundaries that reinforce a strong sense of trust. They have a shared purpose and clear norms. And, importantly, they produce a collective output. If you see a group of people focusing intently on solving a single, very complex problem, you’re probably looking at a real team.</p>
+
+<p><strong>• Working groups</strong> are all about efficiency. Most people spend most of their productive time in working groups. We’ll say it again: there is nothing wrong with being in a working group. In fact, working groups are often best suited to the tasks at hand. Managers of working groups focus heavily on techniques to make their collaboration more efficient. Members assign work, share information, and complete tasks individually. Individual accountability is high; emotional commitment and sense of shared purpose are relatively low. If you see people execute a disciplined “five-minute stand-up,” they’re acting like a working group.</p>
+
+<p><strong>• Teams-in-name-only</strong> are groups that claim to be a team, but lack emotional commitment and shared purpose. They are like working groups, but without the efficient processes and individual responsibility. Work gets done, but not always in the most efficient or effective manner. Being on a team-in-name-only requires neither discipline nor commitment, which typically makes it the default mode of working. If a team-in-name-only has a leader, she or he often has minimal leadership skills. Members of a team-in-name-only spend a lot of time talking about their own individual responsibilities, and team meetings become a series of one-on-one conversations between managers and their subordinates. If you aren’t having conversations about how you work, your objectives, and your commitments to the people you work with, there’s a good chance you are functioning as a team-in-name-only. The five-minute stand-up that lasts 90 minutes is a common characteristic of a team-in-name-only.</p>
+
+<p>Although most people are told that they’re part of a team, the reality is that, more often than not, they’re members of a team-in-name-only.</p>
+
+<h3>Why does work feel so much harder now?</h3>
+
+<p>Consider how you probably would have solved a problem or worked through a crisis as recently as February 2020. The process probably would have begun with a manager saying, “Team, I think it’s going to be a long week,” and you and your fellow group members would have responded in kind. You would have rolled up your sleeves, found a place to serve as your war room, and figured out a way to get the task done. You might not have worked together in the most effective or satisfying way, but you would have worked hard and produced a result.</p>
+
+<p>This is a quintessential team-in-name-only experience—a recipe for a result that is acceptable or even good, but not necessarily satisfying or great. As we flash forward to the present, many organizations still haven’t decided to work smarter. Rather, they’ve doubled down on this version of “non-teaming.” Here are two ways the team-in-name-only is manifested today:</p>
+
+<div class="pullquote">
+<p>The five-minute stand-up that lasts 90 minutes is a common characteristic of a team-in-name-only.</p>
+</div>
+
+<p><strong>1. Meeting bloat.</strong> When a leader avoids making decisions or it’s unclear who should be in the room, the default approach is to have more meetings or invite more people. But what happens when a meeting is no longer confined to a physical space? The ten people who used to max out the available seating in a small conference room can quickly turn into 50 people on a video call, most of whom are unsure of their role, why they were invited, or whether they could have declined the invitation.</p>
+
+<p><strong>2. Excess use of email and chat.</strong> In a pre-pandemic world, managers and colleagues could complement these less-effective communication modes with in-person contact (whether it was planned or spontaneous). Now that in-person connections are not always available, we have overcorrected with a less-than-ideal technology solution.</p>
+
+<p>Both of these outcomes have made work harder and are a direct result of not being deliberate about how to work as individuals and as a collective. So, what are some of the choices and decisions you need to make to be most effective in your work?</p>
+
+<p><strong>Ask whether you need to function as a working group or a real team.</strong> Recognize that those two ways of working together look very different. It’s not impossible to switch between them. But it’s helpful to be clear which mode you’re using and why. Are the problems this group needs to solve sufficiently complex to warrant the expenditure of emotional energy it takes to build a real team? Is the expected output a collective effort that requires active problem-solving? Or is a high-functioning, efficient working group good enough?</p>
+
+<p></p>
+
+<p><strong>Shrink your group size.</strong> We’ve found that the ideal size for virtual teams is actually three individuals, potentially four if the leader isn’t a full-time member of the team. Having more people involved requires significant facilitation and strong norms in order for the group to be effective. Look at any meeting you host, and ask if everyone really needs to be involved. Working groups can often handle a larger size (six to eight participants), as long as the purpose of the meeting is well understood (e.g., information-sharing versus problem-solving).</p>
+
+<p><strong>Make the implicit explicit.</strong> As your teams and groups add and lose members, it becomes necessary to reinforce norms. Don’t rely on informal means of reinforcing teaming behaviors. Be deliberate about discussing matters like when you communicate, how meetings will be run, and the expectations team members have of one another.</p>
+
+<p>These suggestions aren’t silver bullets, but by making deliberate choices about how to collaborate, you can avoid the worst of both worlds: a bloated team-in-name-only that has unclear expectations. After identifying whether your work requires a real team or a working group, you can start taking advantage of remote and hybrid work’s benefits instead of constantly grappling with its downsides.</p>

cache/2024/9bc04d41d25fc73391116d99b7259a3d/index.md

@@ -2,7 +2,9 @@ title: notes
 url: https://www.la-grange.net/2023/07/10/notes-train
 hash_url: 9bc04d41d25fc73391116d99b7259a3d
 archive_date: 2024-01-07
-  
+og_image: 
+description: 
+
 <figure>
   <img src="https://www.la-grange.net/2023/07/10/0797-batiment-visage.jpg" alt="bâtiments avec deux signes blancs. L'ensemble donne un peu l'impression d'un visage.">
   <figcaption>Cupertino, États-Unis, 10 juillet 2023</figcaption>
@@ -37,4 +39,4 @@ archive_date: 2024-01-07
 <blockquote>
 <p>The README is mostly an extended apology for the developer experience and note that the project is unmaintained.</p>
 </blockquote>
-<p>Je crois que c'est une bonne attitude.</p>
+<p>Je crois que c'est une bonne attitude.</p>

cache/2024/9f8c0e75066c1882a3b4ce084e3223ed/index.md

@@ -2,11 +2,13 @@ title: The Demo → Demo Loop
 url: https://daverupert.com/2022/06/demo-to-demo-loop/
 hash_url: 9f8c0e75066c1882a3b4ce084e3223ed
 archive_date: 2024-01-09
+og_image: https://daverupert.com/images/opengraph/demoloop.png?reset=1
+description: The personal blog of Dave Rupert, web developer and podcaster from Austin, TX.
 
-<picture>
+<p><picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://daverupert.com/images/posts/2022/squiggle-dark.png"></source>
   <img alt="The design squiggle with a tightening loop overlayed" src="https://daverupert.com/images/posts/2022/squiggle.png">
-</picture>
+</picture></p>
 <p>I’m 100% convinced that working demo-to-demo is the secret formula to making successful creative products.</p>
 <ul>
 <li>Video games have a strong history of <a href="https://daverupert.com/2021/10/the-mistake-every-new-game-developer-makes/">ritualizing prototypes</a>, play testing, and <a href="https://daverupert.com/2020/09/follow-the-fun/">following the fun</a>. There’s even some <a href="https://www.microsoft.com/en-us/research/publication/what-went-right-and-what-went-wrong-an-analysis-of-155-postmortems-from-game-development/">data that suggests prototypes increase your chances of success</a>.</li>
@@ -23,4 +25,4 @@ archive_date: 2024-01-09
 <p>Demos improve workflows. Breaking up large tasks into “what can I demo next” is an exciting way to work. There’s always an immediate goal for me to find a demo-able checkpoint where I can get tactical feedback frequently. It can save a lot of rework and we can catch ourselves going down a bad path early.</p>
 <p>Demos improve project scoping. Demos and prototypes give you a good idea of <em>what’s easy</em> and <em>what’s hard</em> in the underlying system. Demoing often means you and others may be able to spot problems far off or find “fast paths” mid-flight. Often slight corrections or adjustments to the design can save weeks or months of work without sacrificing quality or user experience.</p>
 <p>If I’m honest, “Dailies” are probably overkill, but I wouldn’t hate it. I would certainly prefer daily demos over vague, ritualistic standup-speak. It’s worth noting here that not all days or weeks are bangers. What’s important is establishing an organizational practice of demo’ing and honing your skills and confidence at providing demos.</p>
-<p>The point is, do whatever is a right fit for your organization but <strong>never wait too long to demo</strong>. Allow room for ad hoc “hallway” demos to happen. And move the needle closer to daily.</p>
+<p>The point is, do whatever is a right fit for your organization but <strong>never wait too long to demo</strong>. Allow room for ad hoc “hallway” demos to happen. And move the needle closer to daily.</p>

cache/2024/a3ccfb51f65cd59f375d5424d243e012/index.md

@@ -2,10 +2,10 @@ title: In Praise of Buttons
 url: https://www.nubero.ch/blog/009/
 hash_url: a3ccfb51f65cd59f375d5424d243e012
 archive_date: 2024-01-28
+og_image: https://www.nubero.ch/transfer/permanent/nubero_socialmedia_icon.png
+description: Nuberodesign: Agentur für Grafikdesign, Animation, Videoproduktion und Usability in Winterthur
 
-
-Form is Function in Graphical User Interfaces
-
+<p>Form is Function in Graphical User Interfaces</p>
 <p class="paragraph">
 In any design discipline there are always certain trends. One of these trends seems to be that buttons are now considered uncool. It doesn’t matter if they are buttons on physical objects or in graphical user interfaces.
 </p>
@@ -18,9 +18,6 @@ Buttons aren’t new. And for exactly that reason, they are uncool. Like hammers
 That is a problem if you’re a dishonest designer. After all, how do you tell your client that you’ve just reinvented the wheel? You can’t just use boring old buttons in your shiny new product. So what do you do? You redesign the look or the function of a button (or both) and sell it as “the newest development in design” – totally dis­re­gar­ding the needs of the user and compromising your integrity as a designer along the way.
 </p>
 
-
-
-
 <p class="baumedium">Buttons on Screens</p>
 
 <p class="paragraph">
@@ -35,7 +32,6 @@ The answer is clearly: No, it is not!
 Consider the image below: In the first row we see a series of icons that are supposed to be buttons. The only way you could potentially recognise them as such, however, would be if they were implemented in a user interface. So it is in fact only the <em>context</em> that lets you recognise them as buttons, not their <em>appearance</em> by themselves.
 </p>
 
-
 <p class="essaynote">Two rows of buttons. Which appear more inviting to interact with?
 </p>
 
@@ -47,7 +43,6 @@ Compare the icons in the upper row with their counterparts in the lower row. Her
 How important signifiers are becomes clear when you look at the physical objects around you. Take the Swiss Army Knife in the picture below for example. The small groove that you see in the main blade (and in almost every hinged tool of a Swiss Army Knife) is called the “nail nick”. Not only does this nail nick allow you to insert your finger­nail and pull the tool out, it also <em>looks like it allows for precisely that.</em> Pay attention to its exact shape too. It mirrors the slight curvature of a fingernail. And it doesn’t stop there: The angles of the walls <em>inside</em> the groove are contoured in such a way that your fingernail is guided deeper into the nail nick, ensuring a secure hold for pulling.
 </p>
 
-
 <p class="essaynote">This is the nail nick in the main blade of a Swiss Army Knife. It gives the user a clue that an action can occur here and that this action probably involves a fingernail.
 </p>
 
@@ -63,7 +58,6 @@ Look at the image of the buttons once more, and this time, try to find groups th
 There is another thing to consider. Take a look at the next picture.
 </p>
 
-
 <p class="essaynote">The buttons in the upper row not only <em>communicate</em> what they do badly, they <em>function</em> badly as well.
 </p>
 
@@ -71,20 +65,15 @@ There is another thing to consider. Take a look at the next picture.
 The pink colour shows where a button can actually be clicked or touched, that is to say, it shows the region where the software will register an input. In the upper row, that is quite a small area if you think of it in terms of square-pixels. That being said, the clickable area in mouse-interfaces <em>might</em> sometimes be the same in the upper row as in the lower row. In touch interfaces however, that is often not the case. There, the actual outline of the graphic – let’s say the minus – is often the only thing that can be touched. So when you quickly tap your screen and don’t hit the target precisely, you might completely miss the button.
 </p>
 
-
-
-
 <p class="baumedium">Text in Buttons</p>
 
 <p class="paragraph">
 The importance of button shapes becomes even more apparent, when the buttons are actually just words, not icons. The example below shows the Terms and Conditions of an iOS update. You can see that the two words, “Agree” and “Disagree”, don’t stick out too much in an environment that already has a lot of text in it. Apple’s way of showing the user that the two words are actually buttons is done solely with colour. The default option of agreeing is also not differentiating itself enough from the disagree option. The only difference is a slightly bolder (but not really bold) typeface. And lastly, speaking of type­faces, the one that Apple chose – specially designed actually – is also not the best for user interfaces.
 </p>
 
-
 <p class="essaynote">Everything that can go wrong, will go wrong: The people who designed this blindly followed the notion, that removing everything they perceived as ornamental would result in simplicity.
 </p>
 
-
 <p class="paragraph">
 Now compare the example from Apple above with my redesign below. Look at the difference that the button shapes and a better choice of typeface make. The typeface in question is called “FF Unit” and has less ambiguous letter shapes than Apple’s “San Francisco”. Granted, this is less important in long text than it is in individual words, but since we want the same typeface for both our buttons and the legal text, choosing a typeface <em>like</em> FF Unit becomes rather obvious. Lastly, I used a slight shadow to set apart the scrollable text of the Terms and Conditions from the surrounding interface. This too makes for a better visual distinction between the different elements on screen.
 </p>
@@ -95,9 +84,6 @@ Now compare the example from Apple above with my redesign below. Look at the dif
 <p class="essaynote">Just because a user interface uses 3D-buttons and some shading doesn’t mean that it has to look tacky. In fact, if you have to make the choice between tacky-but-usable and minimalistic-but-hard-to-use, tacky is the way to go. You don’t have to make that choice though: It’s perfectly possible to create something that is both good-looking <em>and</em> easy to use.
 </p>
 
-
-
-
 <p class="baumedium">Direct Manipulation</p>
 
 <p class="paragraph">
@@ -113,9 +99,9 @@ A button in a graphical user interface that has no button shape will likely give
 </p>
 
 <p class="nubero-video">
-	<video autoplay muted loop playsinline preload="metadata" poster="pictures/buttons_a_2x.png">
-		<source src="videos/hand.mp4" type="video/mp4">
-	</source></video>
+    <video autoplay muted loop playsinline preload="metadata" poster="pictures/buttons_a_2x.png">
+        <source src="videos/hand.mp4" type="video/mp4">
+    </source></video>
 </p>
 <p></p>
 <p class="essaynote">While the user cannot be sure that his tap on the upper arrow was registered by the device (and might therefore try multiple times), the “button depressed” state of the 3D-button signals to him that his action was successful.
@@ -130,32 +116,20 @@ Visual feedback is, of course, just one way to solve this. Acoustic or haptic fe
 </p>
 
 <p class="nubero-video">
-	<video autoplay muted loop playsinline preload="metadata" poster="pictures/iphone-album_2x.jpg">
-		<source src="videos/iphone_album.mp4" type="video/mp4">
-	</source></video>
+    <video autoplay muted loop playsinline preload="metadata" poster="pictures/iphone-album_2x.jpg">
+        <source src="videos/iphone_album.mp4" type="video/mp4">
+    </source></video>
 </p>
 <p></p>
 <p class="essaynote">One last example: In this video, you can see the Photos app as it appears in iOS 17, alternating with a redesign done by me. Apple is using lazy button shapes for “Select” and the ellipsis character (…) on the right. On the left however, the button for going to your albums is just the word “Albums” and a little arrow shape. Why those two different concepts on the same screen? In the redesign, everything that works like a button also looks like one. This, in my opinion, is how it should be done.
 </p>
 
-
-
-
 <p class="baumedium">Misguided Sentimentalism?</p>
 
 <p class="paragraph">
 Critics of my position may point to what they believe is some sort of sentimentalism for old user interfaces on my part. It’s true that the problems I point to in this piece are of the kind that I consider solved in many of the older user interfaces. That has nothing to do with being sentimental however. Products have to work properly. If a button is the right choice, use a button. If it’s not, don’t. But if you are going to implement a design element that <em>works</em> like a button, it should <em>look</em> like one too.
 </p>
 
-
-
-
-
-
-
-
-
-
 <p class="barbottom"></p>
 <ol>
 
@@ -169,7 +143,6 @@ Critics of my position may point to what they believe is some sort of sentimenta
 
 </ol>
 
-
 <p class="bartopbottom"></p>
 
 <p class="postscript">
@@ -178,4 +151,4 @@ Does <em>every</em> virtual button – every button in a graphical user interfac
 
 <p class="postscript">
 The whole idea is to reduce cognitive load. And since the brain works by recognising patterns and dividing the environment up into areas, this reduction is best done by making elements with different functions appear markedly distinct from one another. It is, in other words, a fallacy to believe, that the brain has an easier time if everything looks “simplified” in the way which happens with the flat design doctrine. The opposite is the case.
-</p>
+</p>

cache/2024/b1da1249f2db388d7e84d6ad23c2fc5d/index.md

@@ -2,6 +2,8 @@ title: Data Luddism
 url: https://www.danmcquillan.org/dataluddism.html
 hash_url: b1da1249f2db388d7e84d6ad23c2fc5d
 archive_date: 2024-01-09
+og_image: 
+description: 
 
 <p><img src="https://www.danmcquillan.org/images/burnmill.jpg"></p>
 <p>I propose Data Luddism as a radical response to the productive power of big data and predictive algorithms. My starting point is not the Romantic neo-Luddism of Kirkpatrick Sale but the historical Luddism of 1811-1816, and the Luddites' own rhetoric regarding their resistance to 'obnoxious machines' [1].</p>
@@ -12,4 +14,4 @@ archive_date: 2024-01-09
 An example is the recent proposal that the blockchain (the technology behind bitcoin) can enable distributed collaborative organizations and tackle traditional issues related to shared common-pool resources, such as the free rider problem [3]. If we are serious about resisting the injustices that could come from data-driven algorithmic preemption we have a lot to learn from the historical Luddites, but also that we have the opportunity to 'hack' the machines in the service of a positive social vision. </p>
 <p>[1] Binfield, K. ed., 2004. Writings of the Luddites, Baltimore: Johns Hopkins University Press.</p>
 <p>[2] McQuillan, D., 2015. Algorithmic states of exception. European Journal of Cultural Studies, 18(4-5), pp.564–576. Available at: http://ecs.sagepub.com/content/18/4-5/564 </p>
-<p>[3] David Bollier, 2015. The Blockchain: A Promising New Infrastructure for Online Commons. Available at: http://www.bollier.org/blog/blockchain-promising-new-infrastructure-online-commons </p>
+<p>[3] David Bollier, 2015. The Blockchain: A Promising New Infrastructure for Online Commons. Available at: http://www.bollier.org/blog/blockchain-promising-new-infrastructure-online-commons </p>

cache/2024/b31ba18e3de1fc479b79f1885043026a/index.md

@@ -2,6 +2,8 @@ title: When to use CSS text-wrap: balance; vs text-wrap: pretty;
 url: https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/
 hash_url: b31ba18e3de1fc479b79f1885043026a
 archive_date: 2024-01-07
+og_image: https://blog.stephaniestimac.comundefined
+description: A ruthless look at when to use these two CSS text-wrap values.
 
 <p>At the start of the year I had written about how I wanted to spend this year writing about new CSS features landing in browsers. Life happened and it was in my best interest to do things off the web and away from my computer. But I'm picking this back up again because I'm genuinely back in a space to be exploring and creating things again. I wanted to start this little post off like this for anyone else who is struggling with burnout. It's okay to take a break. It's beneficial for your brain and the rest of you. Side projects will always be there to work on.</p>
 <p>Now onto good ol' text-wrap.</p>
@@ -23,4 +25,4 @@ archive_date: 2024-01-07
 <p>Support for <code>pretty</code> is again quite sparse, with only Chromium browser support. Hopefully Firefox and Safari will ship these to help improve typography on the web.</p>
 <h2 id="balance-and-pretty">Balance and Pretty <a class="direct-link" href="#balance-and-pretty">#</a></h2>
 <p>Use <code>text-wrap: balance;</code> on headings and subheadings. And use <code>text-wrap: pretty;</code> on paragraphs of text to get rid of orphans on the last line. Despite the Chromium-only support, these would be a good candidate for progressive enhancement. It won't negatively affect the experience if someone is not in a supported browser, but it will some visual balance to the page for those in a browser where supported.</p>
-<p>Here's the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap">link out to MDN for text-wrap</a>.</p>
+<p>Here's the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap">link out to MDN for text-wrap</a>.</p>

cache/2024/b351cda8d2ccd73362ca1729845b7e79/index.md

@@ -1,125 +1,121 @@
-title: New HTML Control Lands in Safari
-url: https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari
-hash_url: b351cda8d2ccd73362ca1729845b7e79
-archive_date: 2024-01-28
-
-<p>Native toggle switches landed in one browser. Safari introduced this new HTML control as part of the <a href="https://webkit.org/blog/14885/release-notes-for-safari-technology-preview-185/">Safari Technology Preview 185 release</a> and then <a href="https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-186#New-Features">expanded it in the 186 release</a>.</p>
-
-<p>Creating a semi-native HTML toggle switch component is quite <em>hacky</em>. It involves using a checkbox, adding the "switch" ARIA role, removing its appearance with CSS, and adding styles to make it look like the classic switch or however we want —<a href="https://codepen.io/collection/aMPYMo">check this toggles collection</a>.</p>
-
-<p>And even doing all that, some things cannot be avoided. For example, developers can still set the indeterminate attribute into the base checkbox using JavaScript, which would make the toggle switch invalid.</p>
-
-<p>A native solution would prevent these problems and provide a better experience. Even when it's only an experiment on one browser and has some issues (as we'll describe soon), this attempt is welcomed, and I hope it gets traction.</p>
-
-<h2 id="how-does-it-work">
-  How does it work?
-</h2>
-
-<p>Safari's implementation is as straightforward as it can be. Just add the <code>switch</code> attribute to a regular checkbox, and you'll be done!</p>
-
-<div class="highlight js-code-highlight">
-<pre class="highlight html"><code><span class="c">&lt;!-- this will render a checkbox --&gt;</span>
-<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="nt">/&gt;</span>
-
-<span class="c">&lt;!-- this will render a toggle switch --&gt;</span>
-<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>
-</code></pre>
-</div>
-
-
-
-<p>It's really that simple. There is no need for additional CSS, JS, or anything complicated, and the browser will take care of the rest, including out-of-the-box interactions and styles.</p>
-
-<figure>
-  <p>
-    <img src="https://alvaromontoro.com/images/blog/safari-toggle-1.webp" alt="Just add the switch attribute to a checkbox. There is some HTML code in a box: With arrows pointing to checkboxes (from the first line of code) and toggle switches (from the second line of code)" loading="lazy">
-  </p>
-  <figcaption>Just add the switch attribute to a checkbox!</figcaption>
-</figure>
-
-
-
-<p>The default visualization resembles the toggle switch of iOS, but as part of the feature, Safari includes two pseudo-elements <code>::track</code> and <code>::thumb</code> that make it easy to update the look and feel of the control. <a href="https://twitter.com/yisibl/status/1737739579418141116">@yisibl added a few examples of how they work</a> (you'll need Safari Technology Preview 185 or above to see them).</p>
-
-<h3 id="thoughts-on-this-syntax">
-  Thoughts on this syntax
-</h3>
-
-<p>Having a <code>switch</code> attribute in the checkbox makes it easy, but it also may be misleading as it looks like it equates toggle switches to checkboxes. While this may seem logical to many, it is unfair to the switch control, which becomes a "sub-control" <em>tightly coupled</em> to the checkbox.</p>
-
-<p>They are not the same component: they have different values (checked/unchecked vs. on/off), one of them has an indeterminate state (checkbox, although it's not technically a state), and one is supposed to have an action associated on change (switch).</p>
-
-<p>So why couple them? Just because they look the same or behave in a "similar way"? That's wrong. Following that logic, we shouldn't have inputs of the type <code>number</code>, <code>date</code>, <code>password</code>, <code>email</code>, <code>search</code>... because we already have the text input to handle all of them.<br>
-</p>
-
-<div class="highlight js-code-highlight">
-<pre class="highlight html"><code><span class="c">&lt;!-- We don't do this --&gt;</span>
-<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">number</span> <span class="nt">/&gt;</span>
-<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">date</span> <span class="nt">/&gt;</span>
-<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">password</span> <span class="nt">/&gt;</span>
-
-<span class="c">&lt;!-- So why do this? --&gt;</span>
-<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>
-
-<span class="c">&lt;!-- Wouldn't this make more sense? --&gt;</span>
-<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"switch"</span> <span class="nt">/&gt;</span>
-</code></pre>
-</div>
-
-
-
-<p>In my opinion, a toggle switch should be its own type of input. And not a "sub-type" or "sub-control" dependent on the checkbox.</p>
-
-<h2 id="pros-and-cons">
-  Pros and cons
-</h2>
-
-<p>As with every technology —especially a new one—, Safari's toggle switch has good and bad things. Here are some pros and cons of this component.</p>
-
-<h3 id="pros">
-  Pros
-</h3>
-
-<ul>
-<li>
-<strong>Provides native support for the control</strong>: no need for hacky or complex solutions that require too much code and may be error-prone.</li>
-<li>
-<strong>Straightforward interface</strong>: easy to implement (add an attribute!) and easy-to-follow new pseudo-elements (<code>::track</code> and <code>::thumb</code>).</li>
-<li>
-<strong>Easy styling in CSS</strong>: with the introduction of two pseudo-elements (<code>::track</code> and <code>::thumb</code>), changing the styles of the components would become simple.</li>
-<li>
-<strong>Accessibility out of the box</strong>: the control is announced correctly by the Voice Over screen reader without needing extra ARIA labels or roles. <a href="https://adrianroselli.com/2021/10/switch-role-support.html#Update02">Adrian Roselli ran tests and shared the results</a> over time.</li>
-</ul>
-
-<p>
-  <img src="https://alvaromontoro.com/images/blog/safari-toggle-2.webp" alt="Summary of pros in image format" loading="lazy">
-</p>
-
-<h3 id="cons">
-  Cons
-</h3>
-
-<ul>
-<li>
-<strong>Non-standard feature</strong>: this is a Safari proposal and hasn't been adopted by other browsers or taken into the standard.</li>
-<li>
-<strong>Safari-only feature</strong>: as it is a new suggestion by Safari, it will work only on Safari and only in the Technology Preview version of the browser (from version 185).</li>
-<li>
-<strong>Default styles are <em>sketchy</em></strong>: the toggle looks like the regular iOS toggle, but <a href="https://front-end.social/@alvaromontoro/111763578202895753">it presents some issues when scaling and applying zoom</a>.</li>
-</ul>
-
-<p>Considering those cons, it is safe to say that <strong>this is not a production-ready feature</strong>. At least not yet. It could be an excellent case for progressive enhancement approaches (maybe the reason why they made it an attribute instead of a full type: falling back into a checkbox if not supported), but waiting to see how the component moves forward is better. It is still too early.</p>
-
-<p>
-  <img src="https://alvaromontoro.com/images/blog/safari-toggle-3.webp" alt="Summary of cons in image format" loading="lazy">
-</p>
-
-<h2 id="final-thoughts">
-  Final thoughts
-</h2>
-
-<p>Toggle switches are a great addition to a browser, and the Safari team did nicely adding it to the Technology Preview version. Still, the implementation feels a bit rushed —maybe Safari is trying to earn brownie points with developers while shaking the "The New IE Browser" label?</p>
-
-<p>One of the things that is more counterintuitive is the used syntax. Having a <code>switch</code> attribute in the checkbox makes it easy, but it also unnecessarily associates both controls and doesn't follow the same notation that other form controls follow. I wouldn't be surprised if this is one thing that changes when —not if— this proposal moves forward. So beware of support and likely changes in the future.</p>
-
-<p>As I said, this is a great addition to the form controls. I hope it triggers a deeper conversation about its addition to the standard. I look forward to what it becomes and the possibility of using it on any browser.</p>
+title: New HTML Control Lands in Safari
+url: https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari
+hash_url: b351cda8d2ccd73362ca1729845b7e79
+archive_date: 2024-01-28
+og_image: https://alvaromontoro.com/images/blog/safari-toggle-0.webp
+description: Toggle switches are a common request by Designers and Developers. Safari proposed a native way to create switches in HTML without the hassle of dealing with CSS or unnecessary control states.
+
+<p>Native toggle switches landed in one browser. Safari introduced this new HTML control as part of the <a href="https://webkit.org/blog/14885/release-notes-for-safari-technology-preview-185/">Safari Technology Preview 185 release</a> and then <a href="https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-186#New-Features">expanded it in the 186 release</a>.</p>
+
+<p>Creating a semi-native HTML toggle switch component is quite <em>hacky</em>. It involves using a checkbox, adding the "switch" ARIA role, removing its appearance with CSS, and adding styles to make it look like the classic switch or however we want —<a href="https://codepen.io/collection/aMPYMo">check this toggles collection</a>.</p>
+
+<p>And even doing all that, some things cannot be avoided. For example, developers can still set the indeterminate attribute into the base checkbox using JavaScript, which would make the toggle switch invalid.</p>
+
+<p>A native solution would prevent these problems and provide a better experience. Even when it's only an experiment on one browser and has some issues (as we'll describe soon), this attempt is welcomed, and I hope it gets traction.</p>
+
+<h2 id="how-does-it-work">
+  How does it work?
+</h2>
+
+<p>Safari's implementation is as straightforward as it can be. Just add the <code>switch</code> attribute to a regular checkbox, and you'll be done!</p>
+
+<div class="highlight js-code-highlight">
+<pre class="highlight html"><code><span class="c">&lt;!-- this will render a checkbox --&gt;</span>
+<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="nt">/&gt;</span>
+
+<span class="c">&lt;!-- this will render a toggle switch --&gt;</span>
+<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>
+</code></pre>
+</div>
+
+<p>It's really that simple. There is no need for additional CSS, JS, or anything complicated, and the browser will take care of the rest, including out-of-the-box interactions and styles.</p>
+
+<figure>
+  <p>
+    <img src="https://alvaromontoro.com/images/blog/safari-toggle-1.webp" alt="Just add the switch attribute to a checkbox. There is some HTML code in a box: With arrows pointing to checkboxes (from the first line of code) and toggle switches (from the second line of code)" loading="lazy">
+  </p>
+  <figcaption>Just add the switch attribute to a checkbox!</figcaption>
+</figure>
+
+<p>The default visualization resembles the toggle switch of iOS, but as part of the feature, Safari includes two pseudo-elements <code>::track</code> and <code>::thumb</code> that make it easy to update the look and feel of the control. <a href="https://twitter.com/yisibl/status/1737739579418141116">@yisibl added a few examples of how they work</a> (you'll need Safari Technology Preview 185 or above to see them).</p>
+
+<h3 id="thoughts-on-this-syntax">
+  Thoughts on this syntax
+</h3>
+
+<p>Having a <code>switch</code> attribute in the checkbox makes it easy, but it also may be misleading as it looks like it equates toggle switches to checkboxes. While this may seem logical to many, it is unfair to the switch control, which becomes a "sub-control" <em>tightly coupled</em> to the checkbox.</p>
+
+<p>They are not the same component: they have different values (checked/unchecked vs. on/off), one of them has an indeterminate state (checkbox, although it's not technically a state), and one is supposed to have an action associated on change (switch).</p>
+
+<p>So why couple them? Just because they look the same or behave in a "similar way"? That's wrong. Following that logic, we shouldn't have inputs of the type <code>number</code>, <code>date</code>, <code>password</code>, <code>email</code>, <code>search</code>... because we already have the text input to handle all of them.<br>
+</p>
+
+<div class="highlight js-code-highlight">
+<pre class="highlight html"><code><span class="c">&lt;!-- We don't do this --&gt;</span>
+<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">number</span> <span class="nt">/&gt;</span>
+<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">date</span> <span class="nt">/&gt;</span>
+<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">password</span> <span class="nt">/&gt;</span>
+
+<span class="c">&lt;!-- So why do this? --&gt;</span>
+<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">switch</span> <span class="nt">/&gt;</span>
+
+<span class="c">&lt;!-- Wouldn't this make more sense? --&gt;</span>
+<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"switch"</span> <span class="nt">/&gt;</span>
+</code></pre>
+</div>
+
+<p>In my opinion, a toggle switch should be its own type of input. And not a "sub-type" or "sub-control" dependent on the checkbox.</p>
+
+<h2 id="pros-and-cons">
+  Pros and cons
+</h2>
+
+<p>As with every technology —especially a new one—, Safari's toggle switch has good and bad things. Here are some pros and cons of this component.</p>
+
+<h3 id="pros">
+  Pros
+</h3>
+
+<ul>
+<li>
+<strong>Provides native support for the control</strong>: no need for hacky or complex solutions that require too much code and may be error-prone.</li>
+<li>
+<strong>Straightforward interface</strong>: easy to implement (add an attribute!) and easy-to-follow new pseudo-elements (<code>::track</code> and <code>::thumb</code>).</li>
+<li>
+<strong>Easy styling in CSS</strong>: with the introduction of two pseudo-elements (<code>::track</code> and <code>::thumb</code>), changing the styles of the components would become simple.</li>
+<li>
+<strong>Accessibility out of the box</strong>: the control is announced correctly by the Voice Over screen reader without needing extra ARIA labels or roles. <a href="https://adrianroselli.com/2021/10/switch-role-support.html#Update02">Adrian Roselli ran tests and shared the results</a> over time.</li>
+</ul>
+
+<p>
+  <img src="https://alvaromontoro.com/images/blog/safari-toggle-2.webp" alt="Summary of pros in image format" loading="lazy">
+</p>
+
+<h3 id="cons">
+  Cons
+</h3>
+
+<ul>
+<li>
+<strong>Non-standard feature</strong>: this is a Safari proposal and hasn't been adopted by other browsers or taken into the standard.</li>
+<li>
+<strong>Safari-only feature</strong>: as it is a new suggestion by Safari, it will work only on Safari and only in the Technology Preview version of the browser (from version 185).</li>
+<li>
+<strong>Default styles are <em>sketchy</em></strong>: the toggle looks like the regular iOS toggle, but <a href="https://front-end.social/@alvaromontoro/111763578202895753">it presents some issues when scaling and applying zoom</a>.</li>
+</ul>
+
+<p>Considering those cons, it is safe to say that <strong>this is not a production-ready feature</strong>. At least not yet. It could be an excellent case for progressive enhancement approaches (maybe the reason why they made it an attribute instead of a full type: falling back into a checkbox if not supported), but waiting to see how the component moves forward is better. It is still too early.</p>
+
+<p>
+  <img src="https://alvaromontoro.com/images/blog/safari-toggle-3.webp" alt="Summary of cons in image format" loading="lazy">
+</p>
+
+<h2 id="final-thoughts">
+  Final thoughts
+</h2>
+
+<p>Toggle switches are a great addition to a browser, and the Safari team did nicely adding it to the Technology Preview version. Still, the implementation feels a bit rushed —maybe Safari is trying to earn brownie points with developers while shaking the "The New IE Browser" label?</p>
+
+<p>One of the things that is more counterintuitive is the used syntax. Having a <code>switch</code> attribute in the checkbox makes it easy, but it also unnecessarily associates both controls and doesn't follow the same notation that other form controls follow. I wouldn't be surprised if this is one thing that changes when —not if— this proposal moves forward. So beware of support and likely changes in the future.</p>
+
+<p>As I said, this is a great addition to the form controls. I hope it triggers a deeper conversation about its addition to the standard. I look forward to what it becomes and the possibility of using it on any browser.</p>

cache/2024/b692faaa55fd2775e957b20e833e9e5e/index.md

@@ -2,6 +2,8 @@ title: fraîchement
 url: https://www.la-grange.net/2024/01/26/fraichement
 hash_url: b692faaa55fd2775e957b20e833e9e5e
 archive_date: 2024-01-28
+og_image: 
+description: 
 
 <figure>
   <img src="https://www.la-grange.net/2024/01/26/3159-chauffage.jpg" alt="Détail de la lampe à chauffer.">
@@ -63,4 +65,4 @@ archive_date: 2024-01-28
 <blockquote>
 <p>Originally intended as a short-term tech demo, Ingenuity logged 72 flights over three years on Mars. It accumulated more than two hours of flight time, traveling 11 miles (18km).</p>
 <p>That’s more than 14 times farther than planned, according to Nasa. It soared as high as 79ft (24 metres) and hit speeds of up to 22.4mph (36km/h).</p>
-</blockquote>
+</blockquote>

cache/2024/ba977526c7a8cab6935708b2cdba5c0c/index.md

@@ -2,14 +2,17 @@ title: Aging programmer
 url: https://world.hey.com/jorge/aging-programmer-d448bdec
 hash_url: ba977526c7a8cab6935708b2cdba5c0c
 archive_date: 2024-01-16
+og_image: https://world.hey.com/jorge/d448bdec/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCQlJ3eHpnPSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f579b9de96167f6689c8040e1984a393e4a86b84/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDRG9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtDc0FScEFuWUNPZ3h4ZFdGc2FYUjVhUzA2Q25OMGNtbHdWQT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--5f3b12054ee1575e23e552561c36229a846c13ea/oziel-gomez-x7gz40Z9ObM-unsplash-2.jpg
+description: Back in college, they told me that I would start my career writing code, but eventually, I would move to a position where I would ask others to code my designs. To celebrate that this turned out to be completely false, here are some assorted reflections as a 40-year-old programmer that looks back
 
 <div>  
   <figure class="attachment attachment--preview attachment--lightboxable attachment--jpg">
       <a download="oziel-gomez-x7gz40Z9ObM-unsplash-2.jpg" title="Download oziel-gomez-x7gz40Z9ObM-unsplash-2.jpg" data-click-proxy-target="lightbox_link_blob_952594452" href="https://world.hey.com/jorge/d448bdec/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCQlJ3eHpnPSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f579b9de96167f6689c8040e1984a393e4a86b84/oziel-gomez-x7gz40Z9ObM-unsplash-2.jpg?disposition=attachment">
         <img src="https://world.hey.com/jorge/d448bdec/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCQlJ3eHpnPSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f579b9de96167f6689c8040e1984a393e4a86b84/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDam9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFLQUIya0NBQVU2REhGMVlXeHBkSGxwU3pvTGJHOWhaR1Z5ZXdZNkNYQmhaMlV3T2cxamIyRnNaWE5qWlZRPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--0b5e092e6240e14fab357b4c1013c9a0c881ff87/oziel-gomez-x7gz40Z9ObM-unsplash-2.jpg" alt="oziel-gomez-x7gz40Z9ObM-unsplash-2.jpg" srcset="https://world.hey.com/jorge/d448bdec/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCQlJ3eHpnPSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f579b9de96167f6689c8040e1984a393e4a86b84/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDam9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUQya0NBQW82REhGMVlXeHBkSGxwUVRvTGJHOWhaR1Z5ZXdZNkNYQmhaMlV3T2cxamIyRnNaWE5qWlZRPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--a8a2bb6a9884c661ef30854054544882621a1752/oziel-gomez-x7gz40Z9ObM-unsplash-2.jpg 2x, https://world.hey.com/jorge/d448bdec/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCQlJ3eHpnPSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f579b9de96167f6689c8040e1984a393e4a86b84/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDam9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFLQUZta0NBQTg2REhGMVlXeHBkSGxwUERvTGJHOWhaR1Z5ZXdZNkNYQmhaMlV3T2cxamIyRnNaWE5qWlZRPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--9b7ba00c32731d121dd7ff5706d31cc3652788dd/oziel-gomez-x7gz40Z9ObM-unsplash-2.jpg 3x" decoding="async" loading="lazy">
 </a>
-  </figure><p>Back in college, they told me that I would start my career writing code, but eventually, I would move to a position where I would ask others to code my designs. To celebrate that this turned out to be completely false, here are some assorted reflections as a 40-year-old programmer that looks back:</p></div><p><br></p><ul><li>Compared to my younger versions, I feel at my best. Of course, acquired technical knowledge helps, but experience and knowing how to approach work make a more significant difference. I think I'm much better than 15 years ago, and I hope I am much worse than 15 years from now. That feeling of continuous learning means the world to me.</li><li>Related: working with people you can learn from is a wonderful source of motivation.</li><li>I carry many of the defects I had, but now I know myself and their impact much better, so at least I can try to counter them.</li><li>My desire to manage people is at all-time lows.</li><li>My desire to discuss technical stuff with people, both to help and be helped, is at all-time highs.</li><li>I am way more predictable with my throughput.</li><li>I used to be very sensitive to tone and manners in the working place. I still am. </li><li>I've learned to offer myself a chance to reconsider technical battles. Before, I fought them all until the end; now, I happily change course early when the smell isn't right or when I run out of appetite.</li><li>When I started, I didn't spend a second thinking about time, scope, and appetite. Now, I rarely do anything where those aren't the decision-making force.</li><li>I don't enjoy switching contexts. My perfect agenda is composed of a single meaty task I can focus on for days.</li><li>Communicating effectively is a complex skill that takes years to develop, and an essential one if you want to program professionally.</li><li>I am way more cautious when deploying things.</li><li>I have no idea about how effective pair programming is. My desire to discover it is zero.</li><li>Similarly, I don't discuss the benefits of getting people in the same room to solve a problem, but I am not super interested either. </li><li>I enjoy being challenged and the feeling of not knowing how to solve a problem at first.</li><li>I am a generalist at heart. Too much infrastructure work and I miss product development. Too much backend, and I miss frontend. This comes with positives and negatives, but I accept it's just how I am wired. I never understood why some people despise the term full-stack.</li><li>After almost 10 years of remote work, it would be close to impossible for me to go back to an office.</li><li>I have come to consider accountability an essential perk. I started my career in a place where, in general, nobody cared about anything. I need exactly the opposite environment for my own sanity. </li><li>I am skeptical by default about any hot new things in the programming space. I think this can be a double-edged sword. Younger me was the opposite.</li><li>"No matter how it looks at first, it's always a people problem", by Gerald Weinberg, is essentially true and something to have very present by technically-minded people.</li></ul>
-  <blockquote>Do people lose interest in programming as they age? Is it accurate to expect that older programmers are slower, make more mistakes, and would rather be doing something else such as managing programmers?</blockquote>
+  </figure><p>Back in college, they told me that I would start my career writing code, but eventually, I would move to a position where I would ask others to code my designs. To celebrate that this turned out to be completely false, here are some assorted reflections as a 40-year-old programmer that looks back:</p></div>
+<p><br></p>
+<ul><li>Compared to my younger versions, I feel at my best. Of course, acquired technical knowledge helps, but experience and knowing how to approach work make a more significant difference. I think I'm much better than 15 years ago, and I hope I am much worse than 15 years from now. That feeling of continuous learning means the world to me.</li><li>Related: working with people you can learn from is a wonderful source of motivation.</li><li>I carry many of the defects I had, but now I know myself and their impact much better, so at least I can try to counter them.</li><li>My desire to manage people is at all-time lows.</li><li>My desire to discuss technical stuff with people, both to help and be helped, is at all-time highs.</li><li>I am way more predictable with my throughput.</li><li>I used to be very sensitive to tone and manners in the working place. I still am. </li><li>I've learned to offer myself a chance to reconsider technical battles. Before, I fought them all until the end; now, I happily change course early when the smell isn't right or when I run out of appetite.</li><li>When I started, I didn't spend a second thinking about time, scope, and appetite. Now, I rarely do anything where those aren't the decision-making force.</li><li>I don't enjoy switching contexts. My perfect agenda is composed of a single meaty task I can focus on for days.</li><li>Communicating effectively is a complex skill that takes years to develop, and an essential one if you want to program professionally.</li><li>I am way more cautious when deploying things.</li><li>I have no idea about how effective pair programming is. My desire to discover it is zero.</li><li>Similarly, I don't discuss the benefits of getting people in the same room to solve a problem, but I am not super interested either. </li><li>I enjoy being challenged and the feeling of not knowing how to solve a problem at first.</li><li>I am a generalist at heart. Too much infrastructure work and I miss product development. Too much backend, and I miss frontend. This comes with positives and negatives, but I accept it's just how I am wired. I never understood why some people despise the term full-stack.</li><li>After almost 10 years of remote work, it would be close to impossible for me to go back to an office.</li><li>I have come to consider accountability an essential perk. I started my career in a place where, in general, nobody cared about anything. I need exactly the opposite environment for my own sanity. </li><li>I am skeptical by default about any hot new things in the programming space. I think this can be a double-edged sword. Younger me was the opposite.</li><li>"No matter how it looks at first, it's always a people problem", by Gerald Weinberg, is essentially true and something to have very present by technically-minded people.</li></ul>
+<blockquote>Do people lose interest in programming as they age? Is it accurate to expect that older programmers are slower, make more mistakes, and would rather be doing something else such as managing programmers?</blockquote>
 
 <p>No, no and no.</p>
-

cache/2024/c3272392d462da90874d32841e5caac8/index.md

@@ -2,6 +2,8 @@ title: Where have all the websites gone?
 url: https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/
 hash_url: c3272392d462da90874d32841e5caac8
 archive_date: 2024-01-09
+og_image: https://fromjason.xyz/img/opengraph-60.png
+description: It feels like all the cool websites from the late 2000s are gone. But maybe we are looking at this the wrong way. Maybe it is us who vanished.
 
 <p>It’s Tuesday morning. The year is 2009. You’re just waking up after a long and boozy New Year’s Eve with friends. Your head rings, and your mouth is the type of dry that makes you question your adulthood. You feel something scratch against your arm. Did you take a lover last night? Sort of. It’s a pizza box. Meat lovers.</p>
 <p>You reach for your phone. There’s no TikTok or Snapchat yet. Facebook and Instagram are a thing, but they exist as a type of social syndicator— a place to see what your friends were up to last night. You already know as much. The occasional whiff of rank vodka keeps your memory jogged. You tap the browser icon and start typing a webaddress, perhaps appending <code>www</code> as a precautionary relic. <em>Who got drunker than me</em>, you wonder. After a brief page load, you arrive at textsfromlastnight.com. “<em>I cant get the smell of ass out of my nose</em>,” reads the top post.</p>
@@ -28,4 +30,4 @@ archive_date: 2024-01-09
 <p>Here’s the best part. You can be that curator right now, at this very moment. You can start to rebuild the interconnectivity that made the web fun to explore. And you don’t need to be a computer scientist to do it.</p>
 <p>Open a Linktree account or whatever. And instead of adding your other social media accounts, add three links to your favorite blog posts. Or, add links to a few artists with their own sites. Or your favorite aggregator sites. It doesn’t matter what you include, so long as we make portals to other digital green spaces that exist outside of Instagram.</p>
 <p><strong>Then, throw that list into your link-in-bio</strong>. I just <a href="https://www.instagram.com/jasondotgov/">swapped my IG link</a> from my home page to a post listing my favorite blogging platforms. Most, if not all, are from “indie” developers. And who knows, maybe someone clicks on it and the web gains a new writer. How cool would that be?</p>
-<p>So what do ya say? Let's make a bunch of open web <em>portals</em> for 2024! I guess I set this up for a two-parter, haven’t I? I’ll see you at the next post.</p>
+<p>So what do ya say? Let's make a bunch of open web <em>portals</em> for 2024! I guess I set this up for a two-parter, haven’t I? I’ll see you at the next post.</p>

cache/2024/c4751e7c80b292e3533ee6b3e057b702/index.md

@@ -2,6 +2,8 @@ title: Manuel de survie de la femme dans la tech
 url: https://www.duchess-france.fr/dossier/women%20in%20tech/alli%C3%A9s/2023/01/15/manuel-survie-femme-tech.html
 hash_url: c4751e7c80b292e3533ee6b3e057b702
 archive_date: 2024-01-21
+og_image: 
+description: Je vois de plus en plus de femmes rejoindre l’informatique, et c’est une très bonne chose. Je vois aussi trop de femmes patir de sexisme ordinaire, se remettre en question encore et encore… et quitter le milieu au bout de quelques années. J’ai mis du temps à apprendre certaines choses.
 
 <p>Je vois de plus en plus de femmes rejoindre l’informatique, et c’est une très bonne chose. Je vois aussi trop de femmes patir de sexisme ordinaire, se remettre en question encore et encore… et quitter le milieu au bout de quelques années. J’ai mis du temps à apprendre certaines choses. Je voudrais vous faire gagner ces dix ans, pour qu’on arrive à une parité réelle dans le secteur numérique. Je m’adresse également à toutes les personnes qui souhaitent voir plus de femmes et personnes non binaires dans leurs équipes. Les femmes sont fortement incitées à faire un choix entre l’ambition (business and successful woman) et l’altruisme (femme qui colle aux codes et fait correctement son travail, loin de l’argent). Ce choix injuste et superflu résulte des stéréotypes que nous allons parcourir à travers cet article.</p>
 

cache/2024/c98206d38897264005bcd5b453d032b1/index.md

@@ -2,21 +2,23 @@ title: Designing better target sizes
 url: https://ishadeed.com/article/target-size
 hash_url: c98206d38897264005bcd5b453d032b1
 archive_date: 2024-01-10
+og_image: https://ishadeed.com/assets/target-size/twitter-card.jpg
+description: An interactive guide on designing better target sizes on the web.
 
 <h2 id="intro">Intro</h2>
 <p>As a user, you need to interact with clickable UI elements like buttons, links, cards, and more.</p>
 <p>If an action has a small target size, it will be harder for the user to click, or they might click an adjacent action element by mistake.</p>
 <p>Let’s take a look at the following example.</p>
-<astro-island uid="1rP0JF" prefix="r1" component-url="https://ishadeed.com/_astro/Demo1.8eWum0Xi.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true]}' ssr="" client="visible" opts='{"name":"Demo1","value":true}' await-children=""><div><p>Try to hover on an item ☝️ </p></div></astro-island>
+<p><astro-island uid="1rP0JF" prefix="r1" component-url="https://ishadeed.com/_astro/Demo1.8eWum0Xi.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true]}' ssr="" client="visible" opts='{"name":"Demo1","value":true}' await-children=""><div><p>Try to hover on an item ☝️ </p></div></astro-island></p>
 <p>Notice the small target size? We can address this by increasing the target size.</p>
 <p>When the target size is increased, it becomes easier for a user to click and interact with an element.</p>
-<astro-island uid="3MEby" prefix="r2" component-url="https://ishadeed.com/_astro/Demo1.8eWum0Xi.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"Demo1","value":true}' await-children=""></astro-island>
+<p><astro-island uid="3MEby" prefix="r2" component-url="https://ishadeed.com/_astro/Demo1.8eWum0Xi.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"Demo1","value":true}' await-children=""></astro-island></p>
 <p><strong>Hover over the menu and toggle the checkbox</strong> to observe the difference between small and large target sizes.</p>
 <h2 id="what-is-a-target-size">What is a target size?</h2>
-<astro-island uid="2131rO" prefix="r71" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"The specific region within a user interface element where a user clicks, touches, or taps to trigger an action."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>The specific region within a user interface element where a user clicks, touches, or taps to trigger an action.</p></div></blockquote></astro-island>
+<p><astro-island uid="2131rO" prefix="r71" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"The specific region within a user interface element where a user clicks, touches, or taps to trigger an action."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>The specific region within a user interface element where a user clicks, touches, or taps to trigger an action.</p></div></blockquote></astro-island></p>
 <p>Today, users interact with a UI in various ways; it’s not solely about clicking an element with a mouse.</p>
 <p>Below is a table illustrating how multiple input types can function on the same device.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/input-types.TICJ3qfC_26stTG.png" type="image/png"><source srcset="https://ishadeed.com/_astro/input-types.TICJ3qfC_ZHx551.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/input-types.TICJ3qfC_26stTG.png" alt="A visual that shows the different input types for mobile, tablet, and desktop" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/input-types.TICJ3qfC_26stTG.png" type="image/png"><source srcset="https://ishadeed.com/_astro/input-types.TICJ3qfC_ZHx551.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/input-types.TICJ3qfC_26stTG.png" alt="A visual that shows the different input types for mobile, tablet, and desktop" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>That thing caused to have many names for the topic:</p>
 <ul>
 <li>Apple calls it a <strong>hit target</strong></li>
@@ -27,18 +29,18 @@ archive_date: 2024-01-10
 </ul>
 <p>When talking about this, it’s important to know the context. For example, <strong>on mobile it’s the touch or tap</strong>, but on <strong>a device with a mouse it’s the click target</strong>.</p>
 <p>Here is an example of that.</p>
-<astro-island uid="Z14dVCp" prefix="r3" component-url="https://ishadeed.com/_astro/DemoContext.riEHUkJo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"DemoContext","value":true}' await-children=""><div><div class="example-wrapper center"><div class="demo-context"><div><svg viewbox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M12.3484 12.808C12.3484 14.675 15.1484 14.675 15.1484 12.808C15.1484 10.941 12.3484 10.941 12.3484 12.808Z" fill="black"></path><path d="M17.8914 12.808C17.8914 14.675 20.6914 14.675 20.6914 12.808C20.6914 10.941 17.8914 10.941 17.8914 12.808Z" fill="black"></path><path d="M6.94414 12.808C6.94414 14.675 9.74414 14.675 9.74414 12.808C9.74414 10.941 6.94414 10.941 6.94414 12.808Z" fill="black"></path><path d="M9.51938 3.20386H18.5079C23.6037 3.20386 27.7754 7.34814 27.7754 12.4724C27.7754 17.5967 23.6311 21.741 18.5068 21.741H16.1826L9.26688 26.8653L9.26797 21.7127C4.28369 21.5727 0.252249 17.4841 0.252249 12.4441C0.251156 7.34842 4.42369 3.20414 9.51969 3.20414L9.51938 3.20386ZM9.51938 20.4239H10.5836V24.2596L15.735 20.4239H18.5066C22.9023 20.4239 26.458 16.8681 26.458 12.4724C26.458 8.0767 22.9023 4.52098 18.5066 4.52098L9.51916 4.51988C5.12344 4.51988 1.56771 8.0756 1.56771 12.4713C1.56771 16.8682 5.12366 20.4239 9.51938 20.4239Z" fill="black"></path></g></svg><p>I checked the order page on my <span>phone</span> and tried to <span>tap</span> the order button but it’s not responding.</p></div></div></div></div></astro-island>
+<p><astro-island uid="Z14dVCp" prefix="r3" component-url="https://ishadeed.com/_astro/DemoContext.riEHUkJo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"DemoContext","value":true}' await-children=""><div><div class="example-wrapper center"><div class="demo-context"><div><svg viewbox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M12.3484 12.808C12.3484 14.675 15.1484 14.675 15.1484 12.808C15.1484 10.941 12.3484 10.941 12.3484 12.808Z" fill="black"></path><path d="M17.8914 12.808C17.8914 14.675 20.6914 14.675 20.6914 12.808C20.6914 10.941 17.8914 10.941 17.8914 12.808Z" fill="black"></path><path d="M6.94414 12.808C6.94414 14.675 9.74414 14.675 9.74414 12.808C9.74414 10.941 6.94414 10.941 6.94414 12.808Z" fill="black"></path><path d="M9.51938 3.20386H18.5079C23.6037 3.20386 27.7754 7.34814 27.7754 12.4724C27.7754 17.5967 23.6311 21.741 18.5068 21.741H16.1826L9.26688 26.8653L9.26797 21.7127C4.28369 21.5727 0.252249 17.4841 0.252249 12.4441C0.251156 7.34842 4.42369 3.20414 9.51969 3.20414L9.51938 3.20386ZM9.51938 20.4239H10.5836V24.2596L15.735 20.4239H18.5066C22.9023 20.4239 26.458 16.8681 26.458 12.4724C26.458 8.0767 22.9023 4.52098 18.5066 4.52098L9.51916 4.51988C5.12344 4.51988 1.56771 8.0756 1.56771 12.4713C1.56771 16.8682 5.12366 20.4239 9.51938 20.4239Z" fill="black"></path></g></svg><p>I checked the order page on my <span>phone</span> and tried to <span>tap</span> the order button but it’s not responding.</p></div></div></div></div></astro-island></p>
 <p>For clarity purposes, I will refer to the concept as target size for the rest of the guide, even though I wrote about it and called it <a href="https://ishadeed.com/article/clickable-area/">clickable area</a> years ago.</p>
 <h2 id="inclusive-target-size">Inclusive target size</h2>
 <h3 id="minimum-target-size">Minimum target size</h3>
 <p>According to the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html">WCAG 2.5.5</a> guidelines, the target size must at least be 24 by 24 CSS pixels. I want to emphasize that this is about the target size, not the icon size.</p>
 <p>Let’s take the following example. We have a mobile menu. The size of the icon is 24 by 24 pixels.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/min-target-size-1.bf6twW3i_1qhhM0.png" type="image/png"><source srcset="https://ishadeed.com/_astro/min-target-size-1.bf6twW3i_ihIre.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/min-target-size-1.bf6twW3i_1qhhM0.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/min-target-size-1.bf6twW3i_1qhhM0.png" type="image/png"><source srcset="https://ishadeed.com/_astro/min-target-size-1.bf6twW3i_ihIre.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/min-target-size-1.bf6twW3i_1qhhM0.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>However, the target size is 44 by 44 pixels. This is the area where the
 user can hover or tap.</p>
 <p>The recommended size differs from one platform to another. For example, Material for Android recommends a 48 by 48 pixels target size.</p>
 <p>As per the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.5.8</a>, for a target size to pass, it should have a minimum of 24 by 24-pixel target size and it shouldn’t overlap with other targets.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/min-target-size-2.bCoimqde_Z2staXt.png" type="image/png"><source srcset="https://ishadeed.com/_astro/min-target-size-2.bCoimqde_1tIouG.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/min-target-size-2.bCoimqde_Z2staXt.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/min-target-size-2.bCoimqde_Z2staXt.png" type="image/png"><source srcset="https://ishadeed.com/_astro/min-target-size-2.bCoimqde_1tIouG.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/min-target-size-2.bCoimqde_Z2staXt.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Notice when the target size is less than 24 by 24 pixels, the circles overlap.
 The target size failed. This is as per the WCAG 2.2 guidelines.</p>
 <figure><picture> <source srcset="https://ishadeed.com/_astro/min-target-size-3.6qqxqgwd_Z17Ni1N.png" type="image/png"><source srcset="https://ishadeed.com/_astro/min-target-size-3.6qqxqgwd_Z2fMQmz.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/min-target-size-3.6qqxqgwd_Z17Ni1N.png" alt="" loading="lazy" decoding="async"> </source></source></picture> <figcaption><p>Left: the actions compared to the screen size. Right: the actions
@@ -51,12 +53,12 @@ compared to my thumb finger.</p></figcaption></figure>
 <a href="https://www.figma.com/community/file/966820396083110735">Source</a></p></figcaption></figure>
 <p>It’s beneficial to have specific rules, but it doesn’t mean they should be followed blindly. It’s crucial to consistently test the UI targets.</p>
 <h3 id="applying-fitts-law">Applying Fitt’s Law</h3>
-<astro-island uid="175nIu" prefix="r72" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{&quot;content&quot;:[0,&quot;It's a principle that says it's faster to click or touch bigger objects that are closer to you.&quot;]}" ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>It's a principle that says it's faster to click or touch bigger objects that are closer to you.</p></div></blockquote></astro-island>
+<p><astro-island uid="175nIu" prefix="r72" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{&quot;content&quot;:[0,&quot;It's a principle that says it's faster to click or touch bigger objects that are closer to you.&quot;]}" ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>It's a principle that says it's faster to click or touch bigger objects that are closer to you.</p></div></blockquote></astro-island></p>
 <p>From a UI perspective, that means the bigger a call to action, the better for the user.</p>
 <p>In the following example, notice how much the distance between the input method and the button.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/fitt-law-1.E_ddOyn4_JNlX3.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fitt-law-1.E_ddOyn4_ZtLPYr.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fitt-law-1.E_ddOyn4_JNlX3.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/fitt-law-1.E_ddOyn4_JNlX3.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fitt-law-1.E_ddOyn4_ZtLPYr.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fitt-law-1.E_ddOyn4_JNlX3.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>With a larger button, the distance and time required for both the initial and final movements decrease.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/fitt-law-2.JYstwono_Z2olxMJ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fitt-law-2.JYstwono_1rfn3H.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fitt-law-2.JYstwono_Z2olxMJ.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/fitt-law-2.JYstwono_Z2olxMJ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fitt-law-2.JYstwono_1rfn3H.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fitt-law-2.JYstwono_Z2olxMJ.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>What are the initial and final movements? As per <a href="https://en.wikipedia.org/wiki/Fitts%27s_law">Wikipedia</a>:</p>
 <ul>
 <li><strong>Initial movement</strong>: a fast but imprecise movement towards the target.</li>
@@ -65,37 +67,37 @@ compared to my thumb finger.</p></figcaption></figure>
 <p>We can compare this to a real-life case. Imagine a physical keyboard. The
 buttons that need to be used the most (Enter, Esc, Space, Shift) are larger
 and closer to the user’s fingers than the rest of the buttons.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/fitt-law-3.tRicewH2_rqW8J.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fitt-law-3.tRicewH2_ZM9fNK.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fitt-law-3.tRicewH2_rqW8J.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/fitt-law-3.tRicewH2_rqW8J.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fitt-law-3.tRicewH2_ZM9fNK.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fitt-law-3.tRicewH2_rqW8J.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Or even better, we can see that in action. In the previous section, I mentioned
 how the target sizes should be larger for car UIs, and how how that is
 somehow related to Fitt’s law.</p>
-<astro-island uid="1UNHK0" prefix="r4" component-url="https://ishadeed.com/_astro/CarUI.BOI0hj1P.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Toggle between the options and see how the target size changes."]}' ssr="" client="visible" opts='{"name":"CarUI","value":true}' await-children=""><div><p>Toggle between the options and see how the target size changes.</p></div></astro-island>
+<p><astro-island uid="1UNHK0" prefix="r4" component-url="https://ishadeed.com/_astro/CarUI.BOI0hj1P.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Toggle between the options and see how the target size changes."]}' ssr="" client="visible" opts='{"name":"CarUI","value":true}' await-children=""><div><p>Toggle between the options and see how the target size changes.</p></div></astro-island></p>
 <h3 id="spacing-around-the-targets">Spacing around the targets</h3>
-<astro-island uid="1pdmST" prefix="r73" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Make sure that the spacing between each target is enough and prevent clicking or tapping a target by mistake."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>Make sure that the spacing between each target is enough and prevent clicking or tapping a target by mistake.</p></div></blockquote></astro-island>
+<p><astro-island uid="1pdmST" prefix="r73" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Make sure that the spacing between each target is enough and prevent clicking or tapping a target by mistake."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>Make sure that the spacing between each target is enough and prevent clicking or tapping a target by mistake.</p></div></blockquote></astro-island></p>
 <p>Consider the following example. We have three buttons, and the target size for each of them is 44 by 44 pixels.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/target-spacing-1.I1X5nan6_1SRiX9.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-spacing-1.I1X5nan6_RBcdo.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-spacing-1.I1X5nan6_1SRiX9.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/target-spacing-1.I1X5nan6_1SRiX9.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-spacing-1.I1X5nan6_RBcdo.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-spacing-1.I1X5nan6_1SRiX9.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>When the user tries to tap an action on mobile, the average thumb size
 is large, thus might result in tapping an action item by mistake.</p>
 <p>In the following figure, the circle represents a thumb. Notice how it touches two target items.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/target-spacing-2.kfqtbf8K_w16Iz.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-spacing-2.kfqtbf8K_Zuf01b.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-spacing-2.kfqtbf8K_w16Iz.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/target-spacing-2.kfqtbf8K_w16Iz.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-spacing-2.kfqtbf8K_Zuf01b.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-spacing-2.kfqtbf8K_w16Iz.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>According to a <a href="http://touchlab.mit.edu/publications/2003_009.pdf">study</a>
 by the MIT Touch Lab of human fingertips, the average size of the index
 finger is 1.6 to 2 cm, which translates to a width of 45 - 57 pixels.</p>
 <p>To apply that, we need to increase the spacing between the items.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/target-spacing-3.7pTWY6zY_l5OPl.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-spacing-3.7pTWY6zY_ZFagTp.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-spacing-3.7pTWY6zY_l5OPl.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/target-spacing-3.7pTWY6zY_l5OPl.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-spacing-3.7pTWY6zY_ZFagTp.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-spacing-3.7pTWY6zY_l5OPl.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Now it’s less likely that the user will tap a target by mistake.</p>
 <h3 id="visual-target-feedback">Visual target feedback</h3>
-<astro-island uid="2bhe3X" prefix="r74" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"When hovering over or tapping a target, displaying visual feedback is beneficial, as it enhances the time to action."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>When hovering over or tapping a target, displaying visual feedback is beneficial, as it enhances the time to action.</p></div></blockquote></astro-island>
+<p><astro-island uid="2bhe3X" prefix="r74" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"When hovering over or tapping a target, displaying visual feedback is beneficial, as it enhances the time to action."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>When hovering over or tapping a target, displaying visual feedback is beneficial, as it enhances the time to action.</p></div></blockquote></astro-island></p>
 <p>This is useful for elements without clear boundaries. For example, a link or an icon-only button.</p>
 <p>Try to hover over one of the buttons below.</p>
-<astro-island uid="1Q9JtP" prefix="r75" component-url="https://ishadeed.com/_astro/VisualFeedback.KoO0MgZL.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"VisualFeedback","value":true}' await-children=""></astro-island>
+<p><astro-island uid="1Q9JtP" prefix="r75" component-url="https://ishadeed.com/_astro/VisualFeedback.KoO0MgZL.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"VisualFeedback","value":true}' await-children=""></astro-island></p>
 <p>Adding visual feedback sets expectations for the user. It’s like a hint that lets them know the target area boundaries.</p>
 <p>Here is another example of a menu.</p>
-<astro-island uid="13Y4L0" prefix="r76" component-url="https://ishadeed.com/_astro/VisualFeedback.KoO0MgZL.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"VisualFeedback","value":true}' await-children=""></astro-island>
+<p><astro-island uid="13Y4L0" prefix="r76" component-url="https://ishadeed.com/_astro/VisualFeedback.KoO0MgZL.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"VisualFeedback","value":true}' await-children=""></astro-island></p>
 <h3 id="multi-input-sources">Multi-input sources</h3>
-<astro-island uid="1l9apY" prefix="r77" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"A target size that works well with a mouse might be hard to tap on mobile. Make sure the target size is big enough."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>A target size that works well with a mouse might be hard to tap on mobile. Make sure the target size is big enough.</p></div></blockquote></astro-island>
+<p><astro-island uid="1l9apY" prefix="r77" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"A target size that works well with a mouse might be hard to tap on mobile. Make sure the target size is big enough."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>A target size that works well with a mouse might be hard to tap on mobile. Make sure the target size is big enough.</p></div></blockquote></astro-island></p>
 <p>An example of that would be to compare how clicking a target with a mouse versus tapping with a finger.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/target-rwd-1.amrPG9os_1IvNtk.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-rwd-1.amrPG9os_KBtxm.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-rwd-1.amrPG9os_1IvNtk.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/target-rwd-1.amrPG9os_1IvNtk.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-rwd-1.amrPG9os_KBtxm.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-rwd-1.amrPG9os_1IvNtk.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>In this example, the radio button is small compared to the user’s finger,
 but it’s almost the same size as the computer pointer. The idea here is
 to make sure a target size works with multiple input sources.</p>
@@ -104,7 +106,7 @@ to make sure a target size works with multiple input sources.</p>
 <p>There is a common term which is ”<strong>fat finger</strong> problem”. It means that the user’s finger is too big to accurately tap on the touch targers. In this case, I can blame the small touch targets only.</p>
 <p>To demonstrate that, I made the following interactive playground that helps in visualizing your finger touch size.</p>
 <p><strong>Please note that the following demo works on mobile only. Not on mobile, no problem! See the video tab.</strong></p>
-<astro-island uid="1Wgx9I" prefix="r5" component-url="https://ishadeed.com/_astro/TouchTest.EuL0qnw3.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"TouchTest$1","value":true}' await-children=""><div><p class="_tabsWrapper_3fegj_69"><button class="_button_3fegj_74 _isActive_3fegj_87">Demo</button><button class="_button_3fegj_74">Video</button></p><div id="touchTest" class="example-wrapper center _touchTestwrapper_3fegj_1"><div><div><p>Try to tap any of the following menu items.</p><p class="_box_3fegj_62"></p></div><p>This is an estimation only. It will differ from a device to another.</p></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/touch-test.png" src="https://ishadeed.com/assets/target-size/videos/touch-test.mp4" controls="" controlslist="nodownload"></video></p></div></astro-island>
+<p><astro-island uid="1Wgx9I" prefix="r5" component-url="https://ishadeed.com/_astro/TouchTest.EuL0qnw3.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"TouchTest$1","value":true}' await-children=""><div><p class="_tabsWrapper_3fegj_69"><button class="_button_3fegj_74 _isActive_3fegj_87">Demo</button><button class="_button_3fegj_74">Video</button></p><div id="touchTest" class="example-wrapper center _touchTestwrapper_3fegj_1"><div><div><p>Try to tap any of the following menu items.</p><p class="_box_3fegj_62"></p></div><p>This is an estimation only. It will differ from a device to another.</p></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/touch-test.png" src="https://ishadeed.com/assets/target-size/videos/touch-test.mp4" controls="" controlslist="nodownload"></video></p></div></astro-island></p>
 <p>I used the snippet shown on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Touch/radiusX">MDN website</a>. While this might not be perfect, at least it’s useful to demonstrate the concept.</p>
 <p>We need to get the <code>radiusX</code> and <code>radiusY</code>, then multiply them by 2.</p>
 <pre class="language-js"><code is:raw="" class="language-js">box<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"touchstart"</span><span class="token punctuation">,</span> getTouchSize<span class="token punctuation">)</span>
@@ -116,7 +118,7 @@ to make sure a target size works with multiple input sources.</p>
 <span class="token punctuation">}</span></code></pre>
 <p>We can take this further and show what the target size looks like on your phone. Once you tap on the cross area, the UI will get your finger size and append it to the question.</p>
 <p>Notice how the target size is compared to the radio button.</p>
-<astro-island uid="Z1d9DfT" prefix="r6" component-url="https://ishadeed.com/_astro/TouchTestDemo.63BHA1EC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"TouchTest","value":true}' await-children=""><div><p class="_tabsWrapper_1yyl2_82"><button class="_button_1yyl2_87 _isActive_1yyl2_100">Demo</button><button class="_button_1yyl2_87">Video</button></p><div class="demo-content"><div><div id="touchTesDemo" class="example-wrapper center _touchTestwrapperDemo_1yyl2_1"><div><div class="_touchResult_1yyl2_21"><p>W: 32, H: 32</p><p class="_cross_1yyl2_33"></p><p>👋 Tap here to get your finger size</p></div></div></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/touch-demo.png" src="https://ishadeed.com/assets/target-size/videos/touch-demo.mp4" controls="" controlslist="nodownload"></video></p></div></div></astro-island>
+<p><astro-island uid="Z1d9DfT" prefix="r6" component-url="https://ishadeed.com/_astro/TouchTestDemo.63BHA1EC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"TouchTest","value":true}' await-children=""><div><p class="_tabsWrapper_1yyl2_82"><button class="_button_1yyl2_87 _isActive_1yyl2_100">Demo</button><button class="_button_1yyl2_87">Video</button></p><div class="demo-content"><div><div id="touchTesDemo" class="example-wrapper center _touchTestwrapperDemo_1yyl2_1"><div><div class="_touchResult_1yyl2_21"><p>W: 32, H: 32</p><p class="_cross_1yyl2_33"></p><p>👋 Tap here to get your finger size</p></div></div></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/touch-demo.png" src="https://ishadeed.com/assets/target-size/videos/touch-demo.mp4" controls="" controlslist="nodownload"></video></p></div></div></astro-island></p>
 <p>Interesting, right?</p>
 <h3 id="touch-size-differs-based-on-the-touch-angle">Touch size differs based on the touch angle</h3>
 <p>It’s important to keep in mind that the user might use the touch in two different ways:</p>
@@ -128,14 +130,14 @@ to make sure a target size works with multiple input sources.</p>
 <p>When using the fingertip, the finger is titled with an angle.</p>
 <h4 id="finger-pad">Finger pad</h4>
 <p>When using the finger pad, the finger isn’t tilted, but this can increase the issue of the target being hidden while the user’s finger is above it.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/finger-tip-1.Dxt6CXvq_Z187QcV.png" type="image/png"><source srcset="https://ishadeed.com/_astro/finger-tip-1.Dxt6CXvq_Z262b8T.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/finger-tip-1.Dxt6CXvq_Z187QcV.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/finger-tip-1.Dxt6CXvq_Z187QcV.png" type="image/png"><source srcset="https://ishadeed.com/_astro/finger-tip-1.Dxt6CXvq_Z262b8T.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/finger-tip-1.Dxt6CXvq_Z187QcV.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>In the following illustration, notice how the search icon is still visible
 when the user is using their fingertip.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/finger-tip-2.mERclBS9_2hs6Rl.png" type="image/png"><source srcset="https://ishadeed.com/_astro/finger-tip-2.mERclBS9_1jxLVn.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/finger-tip-2.mERclBS9_2hs6Rl.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
-<astro-island uid="2fkQFq" prefix="r78" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{&quot;content&quot;:[0,&quot;Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they're trying to hit.&quot;],&quot;source&quot;:[0,&quot;UX movement&quot;],&quot;link&quot;:[0,&quot;https://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/&quot;]}" ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they're trying to hit.</p><p>- <a href="https://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">UX movement</a></p></div></blockquote></astro-island>
+<p><picture> <source srcset="https://ishadeed.com/_astro/finger-tip-2.mERclBS9_2hs6Rl.png" type="image/png"><source srcset="https://ishadeed.com/_astro/finger-tip-2.mERclBS9_1jxLVn.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/finger-tip-2.mERclBS9_2hs6Rl.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<astro-island uid="2fkQFq" prefix="r78" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{&quot;content&quot;:[0,&quot;Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they're trying to hit.&quot;],&quot;source&quot;:[0,&quot;UX movement&quot;],&quot;link&quot;:[0,&quot;https://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/&quot;]}" ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they're trying to hit.</p><p>- <a href="https://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">UX movement</a></p></div></blockquote></astro-island></p>
 <p>The touch with the finger pad is often at an angle, which makes it shape like an oval. The touch with the finger pad is larger but often hides the target you’re tapping.</p>
 <p>Here is a figure that shows a comparison.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/finger-tip-3.xY66qdf2_Z12Ps9n.png" type="image/png"><source srcset="https://ishadeed.com/_astro/finger-tip-3.xY66qdf2_ZsKIbK.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/finger-tip-3.xY66qdf2_Z12Ps9n.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/finger-tip-3.xY66qdf2_Z12Ps9n.png" type="image/png"><source srcset="https://ishadeed.com/_astro/finger-tip-3.xY66qdf2_ZsKIbK.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/finger-tip-3.xY66qdf2_Z12Ps9n.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h3 id="small-touch-sizes-are-hard-to-use-in-shaking-environments">Small touch sizes are hard to use in shaking environments</h3>
 <p>When a user is trying to tap a small target size, it isn’t that they are sitting in a perfect environment and just staring at the screen. People are busy and they want to achieve their goals fast.</p>
 <p>In the following interactive demo, I tried to simulate how a shaking environment makes using a small target much harder.</p>
@@ -143,54 +145,54 @@ when the user is using their fingertip.</p>
 <li>Turn on the “Stimulate shaking” toggle.</li>
 <li>Try to select one of the icons.</li>
 </ul>
-<astro-island uid="ZHilQs" prefix="r7" component-url="https://ishadeed.com/_astro/ShakingPhone.9bY4X2KJ.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ShakingPhone$1","value":true}' await-children=""><div><div class="shaking-test"><p><strong>⚠️ Motion warning:</strong> this example may affect people with visual sensitivities.</p><div class="box"><div class="content"><h3>Try to tap on one of the navigation items</h3><p>This is how it feels to navigate small target areas with a shaking device. Not cool, right?</p></div><p class="touch"></p></div><div class="info"><p>A simulation of how a mobile can shake in situation like being in public transportation, or driving on bumpy roads.</p></div></div></div></astro-island>
+<p><astro-island uid="ZHilQs" prefix="r7" component-url="https://ishadeed.com/_astro/ShakingPhone.9bY4X2KJ.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ShakingPhone$1","value":true}' await-children=""><div><div class="shaking-test"><p><strong>⚠️ Motion warning:</strong> this example may affect people with visual sensitivities.</p><div class="box"><div class="content"><h3>Try to tap on one of the navigation items</h3><p>This is how it feels to navigate small target areas with a shaking device. Not cool, right?</p></div><p class="touch"></p></div><div class="info"><p>A simulation of how a mobile can shake in situation like being in public transportation, or driving on bumpy roads.</p></div></div></div></astro-island></p>
 <p>It’s annoying, isn’t it? I hope the demo gave you the vibes of when you tap something by mistake.</p>
 <h3 id="using-touch-with-the-fingers-covered">Using touch with the fingers covered</h3>
 <p>A user might wear a glove in the winter and is trying to tab on a UI. This is a common and expected thing. In this case, if the target sizes are small and close to each other, the user will find a hard time trying to tap on an item.</p>
 <p>Here is a mocked comparison between the natural touch and the touch with gloves. Notice that it got slightly bigger with gloves. This is important to take into consideration.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/fingers-covered-1.gzu_BN_n_2qOi6k.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fingers-covered-1.gzu_BN_n_1iOIKy.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fingers-covered-1.gzu_BN_n_2qOi6k.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/fingers-covered-1.gzu_BN_n_2qOi6k.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fingers-covered-1.gzu_BN_n_1iOIKy.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fingers-covered-1.gzu_BN_n_2qOi6k.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p><strong>In the following example</strong>, try to switch the context between “Natural
 touch” or “Touch with gloves” and notice how it becomes harder to select
 a target.</p>
 <p>This is similar to what a user with gloves on experience.</p>
-<astro-island uid="1OXYxj" prefix="r8" component-url="https://ishadeed.com/_astro/HandGloves.61JqWuZ9.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ShakingPhone","value":true}' await-children=""><div class="hand-gloves"><div class="box"><div class="content"><h3>Try to tap on one of the navigation items</h3><p>This is a demo that shows the size of your finger when wearing a glove.</p></div><p class="touch"></p></div><div class="info"><p>The touch size interferes with the two actions.</p></div></div></astro-island>
+<p><astro-island uid="1OXYxj" prefix="r8" component-url="https://ishadeed.com/_astro/HandGloves.61JqWuZ9.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ShakingPhone","value":true}' await-children=""><div class="hand-gloves"><div class="box"><div class="content"><h3>Try to tap on one of the navigation items</h3><p>This is a demo that shows the size of your finger when wearing a glove.</p></div><p class="touch"></p></div><div class="info"><p>The touch size interferes with the two actions.</p></div></div></astro-island></p>
 <h3 id="spacing">Spacing</h3>
 <p>There are exceptions for a target size like inline elements or when there is a small target but it has a large spacing around it.</p>
 <p>According to the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html#dfn-pointer-input">WCAG 2.58</a>:</p>
-<astro-island uid="Z1728rp" prefix="r79" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;"]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;</p></div></blockquote></astro-island>
+<p><astro-island uid="Z1728rp" prefix="r79" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;"]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;</p></div></blockquote></astro-island></p>
 <h4 id="links">Links</h4>
 <p>For example, a link that is part of a paragraph is excluded from the target size recommendations.</p>
 <p>See the following example.</p>
-<astro-island uid="Z2heG9M" prefix="r80" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><p>As per <a href="#">this article</a>, it's recommended to stay calm at all times.</p></div></astro-island>
+<p><astro-island uid="Z2heG9M" prefix="r80" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><p>As per <a href="#">this article</a>, it's recommended to stay calm at all times.</p></div></astro-island></p>
 <p>The target size for the link is the same as the line height. No need to make it larger.</p>
 <p>However, that doesn’t mean we shouldn’t care about links. It’s equally important to a regular target area.</p>
-<astro-island uid="171Aws" prefix="r81" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><div><p class="_desc_65166_5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 17 17"><g clip-path="url(#clip0_2216_428)"><path fill="#E73C65" d="M8.5.928C4.31.928.9 4.336.9 8.528s3.409 7.6 7.6 7.6c4.192 0 7.6-3.408 7.6-7.6s-3.408-7.6-7.6-7.6zm2.512 9.103a.705.705 0 01-.496 1.2.664.664 0 01-.496-.208L8.5 9.52l-1.503 1.503a.692.692 0 01-.497.208.664.664 0 01-.496-.208.705.705 0 010-.992l1.504-1.503-1.504-1.504a.705.705 0 010-.992.705.705 0 01.992 0L8.5 7.536l1.503-1.504a.705.705 0 01.992 0 .705.705 0 010 .992L9.492 8.528l1.52 1.503z"></path></g><defs><clippath id="clip0_2216_428"><path fill="#fff" d="M0 0H16V16H0z" transform="translate(.5 .527)"></path></clippath></defs></svg>Don’t do this. The line height is too small.</p><p>As per this article, it’s recommended to keep calm at all times. If you need help, feel free to <a href="#">get in touch</a> for an appointment.</p></div></div></astro-island>
+<p><astro-island uid="171Aws" prefix="r81" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><div><p class="_desc_65166_5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 17 17"><g clip-path="url(#clip0_2216_428)"><path fill="#E73C65" d="M8.5.928C4.31.928.9 4.336.9 8.528s3.409 7.6 7.6 7.6c4.192 0 7.6-3.408 7.6-7.6s-3.408-7.6-7.6-7.6zm2.512 9.103a.705.705 0 01-.496 1.2.664.664 0 01-.496-.208L8.5 9.52l-1.503 1.503a.692.692 0 01-.497.208.664.664 0 01-.496-.208.705.705 0 010-.992l1.504-1.503-1.504-1.504a.705.705 0 010-.992.705.705 0 01.992 0L8.5 7.536l1.503-1.504a.705.705 0 01.992 0 .705.705 0 010 .992L9.492 8.528l1.52 1.503z"></path></g><defs><clippath id="clip0_2216_428"><path fill="#fff" d="M0 0H16V16H0z" transform="translate(.5 .527)"></path></clippath></defs></svg>Don’t do this. The line height is too small.</p><p>As per this article, it’s recommended to keep calm at all times. If you need help, feel free to <a href="#">get in touch</a> for an appointment.</p></div></div></astro-island></p>
 <p>It can get worse if there are multiple links in the same paragraph:</p>
-<astro-island uid="4pPB7" prefix="r82" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><div><p class="_desc_65166_5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 17 17"><g clip-path="url(#clip0_2216_428)"><path fill="#E73C65" d="M8.5.928C4.31.928.9 4.336.9 8.528s3.409 7.6 7.6 7.6c4.192 0 7.6-3.408 7.6-7.6s-3.408-7.6-7.6-7.6zm2.512 9.103a.705.705 0 01-.496 1.2.664.664 0 01-.496-.208L8.5 9.52l-1.503 1.503a.692.692 0 01-.497.208.664.664 0 01-.496-.208.705.705 0 010-.992l1.504-1.503-1.504-1.504a.705.705 0 010-.992.705.705 0 01.992 0L8.5 7.536l1.503-1.504a.705.705 0 01.992 0 .705.705 0 010 .992L9.492 8.528l1.52 1.503z"></path></g><defs><clippath id="clip0_2216_428"><path fill="#fff" d="M0 0H16V16H0z" transform="translate(.5 .527)"></path></clippath></defs></svg>Don’t do this. The line height is too small.</p><p>As per this article, it’s recommended to <a href="#">keep calm</a> at all times. If you need help, feel free to <a href="#">get in touch</a> for an appointment.</p></div></div></astro-island>
+<p><astro-island uid="4pPB7" prefix="r82" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><div><p class="_desc_65166_5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 17 17"><g clip-path="url(#clip0_2216_428)"><path fill="#E73C65" d="M8.5.928C4.31.928.9 4.336.9 8.528s3.409 7.6 7.6 7.6c4.192 0 7.6-3.408 7.6-7.6s-3.408-7.6-7.6-7.6zm2.512 9.103a.705.705 0 01-.496 1.2.664.664 0 01-.496-.208L8.5 9.52l-1.503 1.503a.692.692 0 01-.497.208.664.664 0 01-.496-.208.705.705 0 010-.992l1.504-1.503-1.504-1.504a.705.705 0 010-.992.705.705 0 01.992 0L8.5 7.536l1.503-1.504a.705.705 0 01.992 0 .705.705 0 010 .992L9.492 8.528l1.52 1.503z"></path></g><defs><clippath id="clip0_2216_428"><path fill="#fff" d="M0 0H16V16H0z" transform="translate(.5 .527)"></path></clippath></defs></svg>Don’t do this. The line height is too small.</p><p>As per this article, it’s recommended to <a href="#">keep calm</a> at all times. If you need help, feel free to <a href="#">get in touch</a> for an appointment.</p></div></div></astro-island></p>
 <p>Instead, we should increase the line height in CSS:</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span>
   <span class="token property">line-height</span><span class="token punctuation">:</span> 1.4<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="1DIU91" prefix="r83" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"4"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><div><p>As per this article, it’s recommended to <a href="#">keep calm</a> at all times. If you need help, feel free to <a href="#">get in touch</a> for an appointment.</p></div></div></astro-island>
+<p><astro-island uid="1DIU91" prefix="r83" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"4"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><div><p>As per this article, it’s recommended to <a href="#">keep calm</a> at all times. If you need help, feel free to <a href="#">get in touch</a> for an appointment.</p></div></div></astro-island></p>
 <h4 id="more-spacing-for-small-targets">More spacing for small targets</h4>
 <p>If there are multiple actions on mobile and their size is 48px or less, then it makes sense to have more spacing between them.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-1.cMIi5iEz_1xqhax.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-1.cMIi5iEz_2wprtu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-1.cMIi5iEz_1xqhax.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-1.cMIi5iEz_1xqhax.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-1.cMIi5iEz_2wprtu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-1.cMIi5iEz_1xqhax.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>If the spacing is small, then the small targets will fail. Here is a figure
 on how they will look like.</p>
 <figure><picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-2.1zPSdkr3_3YhVL.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-2.1zPSdkr3_12XsfI.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-2.1zPSdkr3_3YhVL.png" alt="" loading="lazy" decoding="async"> </source></source></picture> <figcaption>❌ Small targets need more spacing</figcaption></figure>
 <p>I have a real-life example that is very convincing. In Instagram, the comment’s like button is very small, but it works well because the spacing around it is large enough.</p>
 <p>See the following figure:</p>
-<picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-3.alOpO9pm_AloCY.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-3.alOpO9pm_1zkyVV.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-3.alOpO9pm_AloCY.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-3.alOpO9pm_AloCY.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-3.alOpO9pm_1zkyVV.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-3.alOpO9pm_AloCY.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>The target sizes are below the minimum, but they work very well because
 the surrounding space is large enough.</p>
 <p>See the following figure for the highlighted space. The green highlight is just the space around the target.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-4.gRQhUEl5_3GE4h.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-4.gRQhUEl5_12FOne.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-4.gRQhUEl5_3GE4h.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-4.gRQhUEl5_3GE4h.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-4.gRQhUEl5_12FOne.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-4.gRQhUEl5_3GE4h.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h4 id="less-spacing-for-large-targets">Less spacing for large targets</h4>
 <p>In the following examples, the spacing between the targets is zero, but due to their large size, it’s fine to have less or no spacing at all.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/large-target-spacing-1.V6iUc4le_ZKHYWq.png" type="image/png"><source srcset="https://ishadeed.com/_astro/large-target-spacing-1.V6iUc4le_dgalw.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/large-target-spacing-1.V6iUc4le_ZKHYWq.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/large-target-spacing-1.V6iUc4le_ZKHYWq.png" type="image/png"><source srcset="https://ishadeed.com/_astro/large-target-spacing-1.V6iUc4le_dgalw.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/large-target-spacing-1.V6iUc4le_ZKHYWq.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h4 id="target-size-that-grows-with-the-system-font-size">Target size that grows with the system font size</h4>
 <p>I did a test on Apple iOS to see if the system icons grow when I change the font size from the accessibility settings, and it did. If the user wants a bigger font, then the target size should grow proportionally for that.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/large-target-spacing-2.iiO6ATQo_Z1Kl4JP.png" type="image/png"><source srcset="https://ishadeed.com/_astro/large-target-spacing-2.iiO6ATQo_ZLlTqS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/large-target-spacing-2.iiO6ATQo_Z1Kl4JP.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/large-target-spacing-2.iiO6ATQo_Z1Kl4JP.png" type="image/png"><source srcset="https://ishadeed.com/_astro/large-target-spacing-2.iiO6ATQo_ZLlTqS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/large-target-spacing-2.iiO6ATQo_Z1Kl4JP.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>It’s not like we should do that for all apps, but it makes sense to think
 about it.</p>
 <h2 id="target-size-examples">Target size examples</h2>
@@ -198,9 +200,9 @@ about it.</p>
 <p>Let’s explore that in the following examples.</p>
 <h3 id="website-navigation">Website navigation</h3>
 <p>In this example, try to hover over a navigation item.</p>
-<astro-island uid="EoInw" prefix="r9" component-url="https://ishadeed.com/_astro/WebsiteNav.YZ97Zit8.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"WebsiteNav","value":true}' await-children=""><div><p>Try to hover on an item ☝️</p><p></p></div></astro-island>
+<p><astro-island uid="EoInw" prefix="r9" component-url="https://ishadeed.com/_astro/WebsiteNav.YZ97Zit8.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"WebsiteNav","value":true}' await-children=""><div><p>Try to hover on an item ☝️</p><p></p></div></astro-island></p>
 <p>Notice how the clickable area is small? That happened because that spacing is added to the outer container, not the link itself.</p>
-<astro-island uid="40L80" prefix="r10" component-url="https://ishadeed.com/_astro/WebsiteNav.YZ97Zit8.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Try to toggle the outline spacing, target area, or both!"],"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"WebsiteNav","value":true}' await-children=""><div><p>Try to toggle the outline spacing, target area, or both!</p></div></astro-island>
+<p><astro-island uid="40L80" prefix="r10" component-url="https://ishadeed.com/_astro/WebsiteNav.YZ97Zit8.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Try to toggle the outline spacing, target area, or both!"],"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"WebsiteNav","value":true}' await-children=""><div><p>Try to toggle the outline spacing, target area, or both!</p></div></astro-island></p>
 <p>Let’s take a look at the CSS.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav</span> <span class="token punctuation">{</span>
   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
@@ -220,22 +222,22 @@ about it.</p>
 <span class="token selector">​ .nav__item a</span> <span class="token punctuation">{</span>
   <span class="token property">padding</span><span class="token punctuation">:</span> 0.75rem 1rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="rWMHG" prefix="r11" component-url="https://ishadeed.com/_astro/WebsiteNav.YZ97Zit8.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Better now."],"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"WebsiteNav","value":true}' await-children=""></astro-island>
+<p><astro-island uid="rWMHG" prefix="r11" component-url="https://ishadeed.com/_astro/WebsiteNav.YZ97Zit8.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Better now."],"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"WebsiteNav","value":true}' await-children=""></astro-island></p>
 <p>Hover over a navigation item to see the difference.</p>
 <h3 id="dropdown-toggle">Dropdown toggle</h3>
 <p>In this example, the target size is only on the label, not the whole menu container.</p>
-<astro-island uid="pgavt" prefix="r12" component-url="https://ishadeed.com/_astro/DropdownToggle.v46l7Fin.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Try to hover on a menu ☝️"],"helper":[0,true],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"DropdownToggle","value":true}' await-children=""><div><div class="example-wrapper center"><p class="_dropdown_ixlv5_1"><label for=":r12R0:">Category</label><select name="" id=":r12R0:"><option value="">Web development</option><option value="">Web design</option><option value="">CSS</option></select></p></div><p>Try to hover on a menu ☝️</p></div></astro-island>
+<p><astro-island uid="pgavt" prefix="r12" component-url="https://ishadeed.com/_astro/DropdownToggle.v46l7Fin.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Try to hover on a menu ☝️"],"helper":[0,true],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"DropdownToggle","value":true}' await-children=""><div><div class="example-wrapper center"><p class="_dropdown_ixlv5_1"><label for=":r12R0:">Category</label><select name="" id=":r12R0:"><option value="">Web development</option><option value="">Web design</option><option value="">CSS</option></select></p></div><p>Try to hover on a menu ☝️</p></div></astro-island></p>
 <p>The target area is only on the text, and it’s trimmed. To fix that, we need to expand the target area of the whole container.</p>
 <p>I added the padding to the <code>&lt;select&gt;</code> menu itself, instead of the outer wrapper.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.dropdown__content</span> <span class="token punctuation">{</span>
   <span class="token property">padding</span><span class="token punctuation">:</span> 1.5rem 0.5rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
 <p>Here is the <strong>enhanced</strong> example.</p>
-<astro-island uid="zgecT" prefix="r13" component-url="https://ishadeed.com/_astro/DropdownToggle.v46l7Fin.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"content":[0,"Better, right?"],"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"DropdownToggle","value":true}' await-children=""><div><div class="example-wrapper center"><p class="_dropdown_ixlv5_1 _dropdownEnhanced_ixlv5_39"><label for=":r13R0:">Category</label><select name="" id=":r13R0:"><option value="">Web development</option><option value="">Web design</option><option value="">CSS</option></select></p></div><p>Better, right?</p></div></astro-island>
+<p><astro-island uid="zgecT" prefix="r13" component-url="https://ishadeed.com/_astro/DropdownToggle.v46l7Fin.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"content":[0,"Better, right?"],"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"DropdownToggle","value":true}' await-children=""><div><div class="example-wrapper center"><p class="_dropdown_ixlv5_1 _dropdownEnhanced_ixlv5_39"><label for=":r13R0:">Category</label><select name="" id=":r13R0:"><option value="">Web development</option><option value="">Web design</option><option value="">CSS</option></select></p></div><p>Better, right?</p></div></astro-island></p>
 <p>It’s just about adding the padding to the appropriate HTML element.</p>
 <h3 id="navigation-bar">Navigation bar</h3>
 <p>Here is an example where we have a bottom navigation for a website. Try to hover over an item to see its boundaries.</p>
-<astro-island uid="Zs8KPB" prefix="r84" component-url="https://ishadeed.com/_astro/BottomNavigation.wKeBXBWw.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true]}' ssr="" client="visible" opts='{"name":"BottomNavigation","value":true}' await-children=""><div><div class="example-wrapper center"><div class="_box_myits_1"><div class="_content_myits_89"><h3>Try to tap on one of the navigation items</h3><p>This is a demo that shows the size of your finger when wearing a glove.</p></div></div></div><p>Try to hover on an item ☝️</p><p></p></div></astro-island>
+<p><astro-island uid="Zs8KPB" prefix="r84" component-url="https://ishadeed.com/_astro/BottomNavigation.wKeBXBWw.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true]}' ssr="" client="visible" opts='{"name":"BottomNavigation","value":true}' await-children=""><div><div class="example-wrapper center"><div class="_box_myits_1"><div class="_content_myits_89"><h3>Try to tap on one of the navigation items</h3><p>This is a demo that shows the size of your finger when wearing a glove.</p></div></div></div><p>Try to hover on an item ☝️</p><p></p></div></astro-island></p>
 <p>Notice how the boundaries are small, compared to the space around the item itself.</p>
 <p>We can fix that in CSS by forcing each navigation item to fill the available width. To do that, we need to apply <code>flex: 1</code> on the navigation item.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav</span> <span class="token punctuation">{</span>
@@ -244,13 +246,13 @@ about it.</p>
 <span class="token selector">​ .nav__item</span> <span class="token punctuation">{</span>
   <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="Z2ww7XC" prefix="r85" component-url="https://ishadeed.com/_astro/BottomNavigation.wKeBXBWw.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"BottomNavigation","value":true}' await-children=""><div><div class="example-wrapper center"><div class="_box_myits_1"><div class="_content_myits_89"><h3>Try to tap on one of the navigation items</h3><p>This is a demo that shows the size of your finger when wearing a glove.</p></div></div></div><p></p></div></astro-island>
+<p><astro-island uid="Z2ww7XC" prefix="r85" component-url="https://ishadeed.com/_astro/BottomNavigation.wKeBXBWw.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"BottomNavigation","value":true}' await-children=""><div><div class="example-wrapper center"><div class="_box_myits_1"><div class="_content_myits_89"><h3>Try to tap on one of the navigation items</h3><p>This is a demo that shows the size of your finger when wearing a glove.</p></div></div></div><p></p></div></astro-island></p>
 <p>Much better now.</p>
 <h3 id="icon-buttons">Icon buttons</h3>
 <p>Another example where having a large target size is important is an icon button.</p>
 <p>As a designer, you might need to use an icon only due to cases like not having enough space, for example, or if the icon is too common.</p>
 <p>In the following demo, try to hover over one of the icons and notice how the thumb size overlaps between them. For larger thumbs, the probability of tapping by mistake is high.</p>
-<astro-island uid="1FAgGj" prefix="r14" component-url="https://ishadeed.com/_astro/IconButtons.qKnNiHGe.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"IconButtons","value":true}' await-children=""></astro-island>
+<p><astro-island uid="1FAgGj" prefix="r14" component-url="https://ishadeed.com/_astro/IconButtons.qKnNiHGe.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"IconButtons","value":true}' await-children=""></astro-island></p>
 <p>To fix that, we need to do the following:</p>
 <ul>
 <li>Increase the spacing between the two buttons</li>
@@ -263,19 +265,19 @@ about it.</p>
 <span class="token selector">​ .action__item</span> <span class="token punctuation">{</span>
   <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="Z6kBwC" prefix="r15" component-url="https://ishadeed.com/_astro/IconButtons.qKnNiHGe.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"IconButtons","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z6kBwC" prefix="r15" component-url="https://ishadeed.com/_astro/IconButtons.qKnNiHGe.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"IconButtons","value":true}' await-children=""></astro-island></p>
 <h3 id="safe-triangle-target-areas">Safe triangle target areas</h3>
 <p>It’s common to find multi-level menus on large websites like e-commerce apps, for example. Oftentimes, I find it hard to select an item from a multi-level menu, because the target area for the secondary menu is small.</p>
 <p>Let’s take the following example.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-1.gWdKi3yE_Z18UI7y.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-1.gWdKi3yE_2gbY1b.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-1.gWdKi3yE_Z18UI7y.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-1.gWdKi3yE_Z18UI7y.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-1.gWdKi3yE_2gbY1b.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-1.gWdKi3yE_Z18UI7y.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Try to hover over any of the menu items with an arrow. Notice how the secondary
 menu appears only when you hover on its parent. If the mouse goes out of
 that area, the secondary menu will disappear.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-2.83z9uuii_ZXtSqJ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-2.83z9uuii_2qCNH0.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-2.83z9uuii_ZXtSqJ.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-2.83z9uuii_ZXtSqJ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-2.83z9uuii_2qCNH0.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-2.83z9uuii_ZXtSqJ.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>To fix that, we need to follow the safe triangle method that was seen <a href="https://height.app/blog/guide-to-build-context-menus">first
 on Amazon</a>.</p>
 <p>The idea is that instead of the highlighted target area, there will be a triangle attached to the sub-menu that will create a larger target size.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-3.KwHHoU15_1ATFa3.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-3.KwHHoU15_Z49Kv9.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-3.KwHHoU15_1ATFa3.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-3.KwHHoU15_1ATFa3.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-3.KwHHoU15_Z49Kv9.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-3.KwHHoU15_1ATFa3.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>How does that work in code? Let’s break this down.</p>
 <ul>
 <li>The submenu has a rectangle that is attached to it.</li>
@@ -284,7 +286,7 @@ on Amazon</a>.</p>
 </ul>
 <h4 id="the-problem">The problem</h4>
 <p>We will use <code>clip-path</code> to create a triangle from the safe area element. That means we will need <strong>three points</strong>.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-4.VxSWoCWW_nAveQ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-4.VxSWoCWW_Z1hsUql.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-4.VxSWoCWW_nAveQ.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-4.VxSWoCWW_nAveQ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-4.VxSWoCWW_Z1hsUql.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-4.VxSWoCWW_nAveQ.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p><strong>The point that is close to the hand cursor is the dynamic one</strong> that
 we need to get. The other two points are static.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.safeAreaElement</span> <span class="token punctuation">{</span>
@@ -331,12 +333,12 @@ we need to get. The other two points are static.</p>
   <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--safe-start<span class="token punctuation">)</span><span class="token punctuation">,</span> 100% 100%<span class="token punctuation">,</span> 100% 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
 <p>To make sure we’re on the same page, here is the annotation of the HTML parts.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-5.ybtFLCHC_ZMUuo2.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-5.ybtFLCHC_Z2sYV4e.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-5.ybtFLCHC_ZMUuo2.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-5.ybtFLCHC_ZMUuo2.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-5.ybtFLCHC_Z2sYV4e.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-5.ybtFLCHC_ZMUuo2.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Also, here is what the default clipped area looks like.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-6.I2btTKYg_1DzkWG.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-6.I2btTKYg_Z1u5Hv.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-6.I2btTKYg_1DzkWG.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-6.I2btTKYg_1DzkWG.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-6.I2btTKYg_Z1u5Hv.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-6.I2btTKYg_1DzkWG.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h4 id="the-safe-triangle-area">The safe triangle area</h4>
 <p>The safe area is positioned relative to the secondary menu. It’s like an extension to the menu.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-7.2qp5GWHQ_Z13SblS.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-7.2qp5GWHQ_2levLQ.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-7.2qp5GWHQ_Z13SblS.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-7.2qp5GWHQ_Z13SblS.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-7.2qp5GWHQ_2levLQ.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-7.2qp5GWHQ_Z13SblS.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h4 id="get-the-mouse-x--y-coordinates">Get the mouse X &amp; Y coordinates</h4>
 <p>When the user hovers in the safe area, we need to get the mouse X &amp; Y coordinates. In Javascript, we get the X &amp; Y values for the whole page, so we need to scope them for the safe area element only.</p>
 <pre class="language-js"><code is:raw="" class="language-js">
@@ -365,7 +367,7 @@ we need to get. The other two points are static.</p>
 <li>The mouse X and Y then subtract the safe area left and top from each, respectively.</li>
 </ul>
 <p>This will give us the local coordinates scoped to the safe area.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-8.vEvvLEEa_17eNqj.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-8.vEvvLEEa_ZxOCeS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-8.vEvvLEEa_17eNqj.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-8.vEvvLEEa_17eNqj.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-8.vEvvLEEa_ZxOCeS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-8.vEvvLEEa_17eNqj.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Given the data we have now, we need to do a few more steps to get the X
 and Y percentage values to use in the <code>clip-path</code>.</p>
 <ul>
@@ -373,7 +375,7 @@ and Y percentage values to use in the <code>clip-path</code>.</p>
 <li>Any Y value below the main <code>&lt;li&gt;</code> isn’t needed (the black line)</li>
 <li>Convert those X and Y values into percentages by dividing them with the width and height of the safe area element, respectively.</li>
 </ul>
-<picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-9.bgggmP8x_201eKf.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-9.bgggmP8x_jVN53.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-9.bgggmP8x_201eKf.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-9.bgggmP8x_201eKf.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-9.bgggmP8x_jVN53.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-9.bgggmP8x_201eKf.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Take a look at the Javascript.</p>
 <pre class="language-js"><code is:raw="" class="language-js">
 <span class="token keyword">if</span> <span class="token punctuation">(</span>
@@ -392,19 +394,19 @@ and Y percentage values to use in the <code>clip-path</code>.</p>
 <span class="token punctuation">}</span></code></pre>
 <p>The magic here happens because <code>clip-path</code> disables pointer events for clipped areas. When we hover under the menu, it disappears as expected.</p>
 <p>Explore the interactive demo below and try to move the dynamic path point.</p>
-<astro-island uid="1pnaJG" prefix="r16" component-url="https://ishadeed.com/_astro/SafeTrianglePlay.JCL8WTQn.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"SafeTrianglePlay","value":true}' await-children=""><div><p class="_tabsWrapper_14lhn_134"><button class="_button_14lhn_139 _isActive_14lhn_152">Demo</button><button class="_button_14lhn_139">Video</button></p><div><div><div class="_safeTestPlay_14lhn_1"><ul><li>New project</li><li class="has-sub">Change workflow<span>➡️</span></li><li>Sort by</li><li>Filter by</li><li>Another item</li></ul><p class="_pathResult_14lhn_123">clip-path: polygon(<code>0% 0%</code>, <code>100% 100%</code>,<code>100% 0</code>);</p></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/safe-tri-1.png" src="https://ishadeed.com/assets/target-size/videos/safe-tri-1.mp4" controls="" controlslist="nodownload"></video></p></div></div></astro-island>
+<p><astro-island uid="1pnaJG" prefix="r16" component-url="https://ishadeed.com/_astro/SafeTrianglePlay.JCL8WTQn.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"SafeTrianglePlay","value":true}' await-children=""><div><p class="_tabsWrapper_14lhn_134"><button class="_button_14lhn_139 _isActive_14lhn_152">Demo</button><button class="_button_14lhn_139">Video</button></p><div><div><div class="_safeTestPlay_14lhn_1"><ul><li>New project</li><li class="has-sub">Change workflow<span>➡️</span></li><li>Sort by</li><li>Filter by</li><li>Another item</li></ul><p class="_pathResult_14lhn_123">clip-path: polygon(<code>0% 0%</code>, <code>100% 100%</code>,<code>100% 0</code>);</p></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/safe-tri-1.png" src="https://ishadeed.com/assets/target-size/videos/safe-tri-1.mp4" controls="" controlslist="nodownload"></video></p></div></div></astro-island></p>
 <p>Let’s explore a demo that uses the safe triangle method. First, try to hover with the default state, then change it to the safe area.</p>
-<astro-island uid="1YW1aH" prefix="r17" component-url="https://ishadeed.com/_astro/SafeTriangle.nCpnxMOa.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"name":[0,"wrapper 2"]}' ssr="" client="visible" opts='{"name":"SafeTriangle","value":true}' await-children=""><div><p class="_tabsWrapper_18mju_113"><button class="_button_18mju_118 _isActive_18mju_131">Demo</button><button class="_button_18mju_118">Video</button></p><div><div><div class="_safeTest_18mju_1"><ul><li>New project</li><li class="_hasSub_18mju_94 _hasSubActive_18mju_97">Change workflow<span>➡️</span></li><li>Sort by</li><li>Filter by</li><li>Another item</li></ul></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/safe-tri-2.png" src="https://ishadeed.com/assets/target-size/videos/safe-tri-2.mp4" controls="" controlslist="nodownload"></video></p></div></div></astro-island>
+<p><astro-island uid="1YW1aH" prefix="r17" component-url="https://ishadeed.com/_astro/SafeTriangle.nCpnxMOa.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"name":[0,"wrapper 2"]}' ssr="" client="visible" opts='{"name":"SafeTriangle","value":true}' await-children=""><div><p class="_tabsWrapper_18mju_113"><button class="_button_18mju_118 _isActive_18mju_131">Demo</button><button class="_button_18mju_118">Video</button></p><div><div><div class="_safeTest_18mju_1"><ul><li>New project</li><li class="_hasSub_18mju_94 _hasSubActive_18mju_97">Change workflow<span>➡️</span></li><li>Sort by</li><li>Filter by</li><li>Another item</li></ul></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/safe-tri-2.png" src="https://ishadeed.com/assets/target-size/videos/safe-tri-2.mp4" controls="" controlslist="nodownload"></video></p></div></div></astro-island></p>
 <h3 id="mobile-search">Mobile search</h3>
 <p>While researching, I found an interesting target size issue in a couple of websites. When the search is active, there are no clear boundaries for it. That causes the user to guess where to tab.</p>
 <p>In the following example, the search is shown once the mobile menu is toggled. However, it’s not clear where the boundaries of the search are.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/mobile-search-1.lhfbhihy_d0grH.png" type="image/png"><source srcset="https://ishadeed.com/_astro/mobile-search-1.lhfbhihy_Z1s4adu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/mobile-search-1.lhfbhihy_d0grH.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/mobile-search-1.lhfbhihy_d0grH.png" type="image/png"><source srcset="https://ishadeed.com/_astro/mobile-search-1.lhfbhihy_Z1s4adu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/mobile-search-1.lhfbhihy_d0grH.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>It’s not a good idea to let the user “guess” where the target area is.
 In this design, here is a comparison <strong>between my expectation and the actual
 target size</strong>.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/mobile-search-2.6fdQVi3Q_1aSf9Q.png" type="image/png"><source srcset="https://ishadeed.com/_astro/mobile-search-2.6fdQVi3Q_Zubbvl.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/mobile-search-2.6fdQVi3Q_1aSf9Q.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/mobile-search-2.6fdQVi3Q_1aSf9Q.png" type="image/png"><source srcset="https://ishadeed.com/_astro/mobile-search-2.6fdQVi3Q_Zubbvl.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/mobile-search-2.6fdQVi3Q_1aSf9Q.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>See the following demo. It’s confusing.</p>
-<astro-island uid="rTo2R" prefix="r18" component-url="https://ishadeed.com/_astro/MobileSearch.ntbnwgyB.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"content":[0,"Toggle the checkbox and see how the search makes you think that it spans to the far right."]}' ssr="" client="visible" opts='{"name":"MobileSearch","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_hbbaq_1"><p class="checkbox"><input id=":r18R5:" type="checkbox" class="sr-only _input_3qp17_1" checked><label class="_label_3qp17_16" for=":r18R5:">Toggle highlight</label></p><div class="_page_hbbaq_7 false"><div><p>Random title</p><p> This is a sample text. CSS is awesome.</p></div></div></div><p>Toggle the checkbox and see how the search makes you think that it spans to the far right.</p></div></astro-island>
+<p><astro-island uid="rTo2R" prefix="r18" component-url="https://ishadeed.com/_astro/MobileSearch.ntbnwgyB.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"content":[0,"Toggle the checkbox and see how the search makes you think that it spans to the far right."]}' ssr="" client="visible" opts='{"name":"MobileSearch","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_hbbaq_1"><p class="checkbox"><input id=":r18R5:" type="checkbox" class="sr-only _input_3qp17_1" checked><label class="_label_3qp17_16" for=":r18R5:">Toggle highlight</label></p><div class="_page_hbbaq_7 false"><div><p>Random title</p><p> This is a sample text. CSS is awesome.</p></div></div></div><p>Toggle the checkbox and see how the search makes you think that it spans to the far right.</p></div></astro-island></p>
 <p>To solve that, we need to expand the target area and make it fill the rest of the space.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.search-form</span> <span class="token punctuation">{</span>
   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
@@ -417,12 +419,12 @@ target size</strong>.</p>
   <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
   <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="ZwgKg2" prefix="r19" component-url="https://ishadeed.com/_astro/MobileSearch.ntbnwgyB.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"content":[0,"The search is positioned absolutely to the header with a limited width."],"variation":[0,"enhanced"]}' ssr="" client="visible" opts='{"name":"MobileSearch","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_hbbaq_1"><p class="checkbox"><input id=":r19R5:" type="checkbox" class="sr-only _input_3qp17_1" checked><label class="_label_3qp17_16" for=":r19R5:">Toggle highlight</label></p><div class="_page_hbbaq_7 _enhanced_hbbaq_109"><div><p>Random title</p><p> This is a sample text. CSS is awesome.</p></div></div></div><p>The search is positioned absolutely to the header with a limited width.</p></div></astro-island>
+<p><astro-island uid="ZwgKg2" prefix="r19" component-url="https://ishadeed.com/_astro/MobileSearch.ntbnwgyB.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"content":[0,"The search is positioned absolutely to the header with a limited width."],"variation":[0,"enhanced"]}' ssr="" client="visible" opts='{"name":"MobileSearch","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_hbbaq_1"><p class="checkbox"><input id=":r19R5:" type="checkbox" class="sr-only _input_3qp17_1" checked><label class="_label_3qp17_16" for=":r19R5:">Toggle highlight</label></p><div class="_page_hbbaq_7 _enhanced_hbbaq_109"><div><p>Random title</p><p> This is a sample text. CSS is awesome.</p></div></div></div><p>The search is positioned absolutely to the header with a limited width.</p></div></astro-island></p>
 <h3 id="active-navigation-border">Active Navigation border</h3>
 <p>This is an example of a navigation where the hovered item shows a bottom border. When you see that, you assume that the whole area is clickable.</p>
-<astro-island uid="1SK72H" prefix="r20" component-url="https://ishadeed.com/_astro/NavBottomBorder.rxRKGiDC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"NavBottomBorder","value":true}' await-children=""><div><p>Try to hover on an item ☝️</p></div></astro-island>
+<p><astro-island uid="1SK72H" prefix="r20" component-url="https://ishadeed.com/_astro/NavBottomBorder.rxRKGiDC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"NavBottomBorder","value":true}' await-children=""><div><p>Try to hover on an item ☝️</p></div></astro-island></p>
 <p>However, when you try to hover over another item, you will discover that the target area is only for the text. The border is just for visual purposes. Notice the outline around the inner item.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/nav-bottom-border.oj4vN2U9_1WWwv8.png" type="image/png"><source srcset="https://ishadeed.com/_astro/nav-bottom-border.oj4vN2U9_OWXam.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/nav-bottom-border.oj4vN2U9_1WWwv8.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/nav-bottom-border.oj4vN2U9_1WWwv8.png" type="image/png"><source srcset="https://ishadeed.com/_astro/nav-bottom-border.oj4vN2U9_OWXam.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/nav-bottom-border.oj4vN2U9_1WWwv8.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>The problem is that there is horizontal padding on the <code>&lt;li&gt;</code> element, and the <code>&lt;a&gt;</code> has vertical padding only.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav-item</span> <span class="token punctuation">{</span>
   <span class="token property">padding-left</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
@@ -449,7 +451,7 @@ target size</strong>.</p>
   <span class="token property">border-bottom-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
 <p>See it yourself in the following demo.</p>
-<astro-island uid="EyAQd" prefix="r21" component-url="https://ishadeed.com/_astro/NavBottomBorder.rxRKGiDC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"NavBottomBorder","value":true}' await-children=""><div><p>Try to hover on an item ☝️</p></div></astro-island>
+<p><astro-island uid="EyAQd" prefix="r21" component-url="https://ishadeed.com/_astro/NavBottomBorder.rxRKGiDC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"NavBottomBorder","value":true}' await-children=""><div><p>Try to hover on an item ☝️</p></div></astro-island></p>
 <p>Much better. Now the whole link is interacive.</p>
 <h3 id="player-ui">Player UI</h3>
 <p>In this example, we have an audio player UI.</p>
@@ -479,14 +481,14 @@ the clickable area will get bigger.</p>
   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">color-mix</span><span class="token punctuation">(</span>in srgb<span class="token punctuation">,</span> #9c3ce7<span class="token punctuation">,</span> white 70%<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
 <p>It’s much better now. Try to click anywhere on the progress bar. Play with the checkbox to see the before &amp; after.</p>
-<astro-island uid="Z1P9OSf" prefix="r22" component-url="https://ishadeed.com/_astro/PlayerUI.ZnDFoBQF.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"PlayerUI","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z1P9OSf" prefix="r22" component-url="https://ishadeed.com/_astro/PlayerUI.ZnDFoBQF.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"PlayerUI","value":true}' await-children=""></astro-island></p>
 <h3 id="avoid-dead-target-areas">Avoid dead target areas</h3>
 <p>A dead area is when there are multiple ways to do the same action. This can apply to a label and an icon.</p>
 <p>In the following example, there are two target areas (label + icon). Between them, there is a dead target area; when clicked or tapped, the action won’t be triggered.</p>
-<astro-island uid="ma1lq" prefix="r23" component-url="https://ishadeed.com/_astro/DeadAreas.ovHoBlHE.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true]}' ssr="" client="visible" opts='{"name":"DeadArea","value":true}' await-children=""><div><p class="example-wrapper center _wrapper_1e53f_1"></p><p>Try to hover between the label and icon</p></div></astro-island>
+<p><astro-island uid="ma1lq" prefix="r23" component-url="https://ishadeed.com/_astro/DeadAreas.ovHoBlHE.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true]}' ssr="" client="visible" opts='{"name":"DeadArea","value":true}' await-children=""><div><p class="example-wrapper center _wrapper_1e53f_1"></p><p>Try to hover between the label and icon</p></div></astro-island></p>
 <p>When the same target areas refer to the same action, it’s good to keep them as one target, or at least to remove the gap between them.</p>
 <p>In the following demo, I just removed the gap and the issue is fixed. Unless there is no real need for that, I would recommend combining them as one action.</p>
-<astro-island uid="Z1KwDX7" prefix="r24" component-url="https://ishadeed.com/_astro/DeadAreas.ovHoBlHE.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"enhanced"]}' ssr="" client="visible" opts='{"name":"DeadArea","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z1KwDX7" prefix="r24" component-url="https://ishadeed.com/_astro/DeadAreas.ovHoBlHE.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"enhanced"]}' ssr="" client="visible" opts='{"name":"DeadArea","value":true}' await-children=""></astro-island></p>
 <h3 id="extend-target-size-with-pseudo-elements">Extend target size with pseudo-elements</h3>
 <p>This is a useful technique that can increase the target size without changing the object size or padding. Here is a summary:</p>
 <ul>
@@ -495,7 +497,7 @@ the clickable area will get bigger.</p>
 <li>Done! 🥳</li>
 </ul>
 <p>In the following example, we have a simple link. Notice that the target area is highlighted.</p>
-<astro-island uid="ZpaUjB" prefix="r25" component-url="https://ishadeed.com/_astro/ExpandTarget.UVLz_TuK.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"],"helper":[0,true]}' ssr="" client="visible" opts='{"name":"ExpandTarget","value":true}' await-children=""></astro-island>
+<p><astro-island uid="ZpaUjB" prefix="r25" component-url="https://ishadeed.com/_astro/ExpandTarget.UVLz_TuK.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"],"helper":[0,true]}' ssr="" client="visible" opts='{"name":"ExpandTarget","value":true}' await-children=""></astro-island></p>
 <p>The hover effect is simple. Try to hover and see it.</p>
 <p>When we add a pseudo-element to the link, it will take the same target area as its parent. That means we can extend the target area in a very dynamic way.</p>
 <p>Try to hover over the purple square, and notice how it will trigger the hover effect on the link (its parent).</p>
@@ -514,10 +516,10 @@ the clickable area will get bigger.</p>
   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>194<span class="token punctuation">,</span> 170<span class="token punctuation">,</span> 216<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="1WDIR5" prefix="r26" component-url="https://ishadeed.com/_astro/ExpandTarget.UVLz_TuK.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Try to hover on the purple square. It will trigger the link."],"variation":[0,"2"],"helper":[0,true]}' ssr="" client="visible" opts='{"name":"ExpandTarget","value":true}' await-children=""><div><p>Try to hover on the purple square. It will trigger the link.</p></div></astro-island>
+<p><astro-island uid="1WDIR5" prefix="r26" component-url="https://ishadeed.com/_astro/ExpandTarget.UVLz_TuK.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Try to hover on the purple square. It will trigger the link."],"variation":[0,"2"],"helper":[0,true]}' ssr="" client="visible" opts='{"name":"ExpandTarget","value":true}' await-children=""><div><p>Try to hover on the purple square. It will trigger the link.</p></div></astro-island></p>
 <p>Interesting, right? We can take this even further and have two pseudo-elements (<code>:before</code> and <code>:after</code>).</p>
 <p>This technique can be extended to create more interesting interactions. See the following example.</p>
-<astro-island uid="Zm2kOJ" prefix="r27" component-url="https://ishadeed.com/_astro/ExpandTargetExample.TjNPOfag.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ExpandTargetExample","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Zm2kOJ" prefix="r27" component-url="https://ishadeed.com/_astro/ExpandTargetExample.TjNPOfag.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ExpandTargetExample","value":true}' await-children=""></astro-island></p>
 <p>When you hover over one of the links, its thumbnail will be triggered. Interesting, right? I used my <a href="https://debuggingcss.com/">Debugging CSS</a> book and <a href="https://defensivecss.dev/">Defensive CSS</a> as an example.</p>
 <p>Here is how I did it:</p>
 <ul>
@@ -553,9 +555,9 @@ the clickable area will get bigger.</p>
 <p>A common confusion that happens on the web is that you have a certain expectation for where the target area for a card is, and when you try to interact with it, it’s not as per your expectations.</p>
 <p>Using this solution will make the text hard to select. Use with caution and when necessary only.</p>
 <p>Consider the following example. Try to hover on the card and notice that only the title is clickable.</p>
-<astro-island uid="alkhL" prefix="r28" component-url="https://ishadeed.com/_astro/Card.HXVEtCTV.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"Card","value":true}' await-children=""></astro-island>
+<p><astro-island uid="alkhL" prefix="r28" component-url="https://ishadeed.com/_astro/Card.HXVEtCTV.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"Card","value":true}' await-children=""></astro-island></p>
 <p>The clickable area is only in the title.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/expand-target-card-2.PTN6qcho_ZvQD7A.png" type="image/png"><source srcset="https://ishadeed.com/_astro/expand-target-card-2.PTN6qcho_ZiePUN.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/expand-target-card-2.PTN6qcho_ZvQD7A.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/expand-target-card-2.PTN6qcho_ZvQD7A.png" type="image/png"><source srcset="https://ishadeed.com/_astro/expand-target-card-2.PTN6qcho_ZiePUN.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/expand-target-card-2.PTN6qcho_ZvQD7A.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Here is the card’s HTML markup.</p>
 <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cookies.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
@@ -574,13 +576,13 @@ the clickable area will get bigger.</p>
   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
   <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="Z1W7Ryd" prefix="r29" component-url="https://ishadeed.com/_astro/Card.HXVEtCTV.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"Card","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z1W7Ryd" prefix="r29" component-url="https://ishadeed.com/_astro/Card.HXVEtCTV.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"Card","value":true}' await-children=""></astro-island></p>
 <p>In this example, there is not much text, so the accessibility concern of text being not selectable might not be valid.</p>
 <p>However, I would be careful to use this solution if there is too much text in the card (e.g.: title, description, author name.. etc).</p>
 
 <p>Another use case for increasing the target size via pseudo-element is a mobile menu. I already showed a similar example but solved it via padding.</p>
 <p>See the following demo.</p>
-<astro-island uid="ZFnSBW" prefix="r30" component-url="https://ishadeed.com/_astro/MobileMenu.jhXdaTWo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"MobileMenu","value":true}' await-children=""></astro-island>
+<p><astro-island uid="ZFnSBW" prefix="r30" component-url="https://ishadeed.com/_astro/MobileMenu.jhXdaTWo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"MobileMenu","value":true}' await-children=""></astro-island></p>
 <p>The target size is small. You need to point the cursor or your finger exactly at the menu. We can add a pseudo-element that is larger than the menu, and it will solve the problem.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.menu:after</span> <span class="token punctuation">{</span>
   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
@@ -590,17 +592,17 @@ the clickable area will get bigger.</p>
   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
 <p>Easy and straightforward, right? Play with the demo below and see the difference.</p>
-<astro-island uid="ZOL472" prefix="r31" component-url="https://ishadeed.com/_astro/MobileMenu.jhXdaTWo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"MobileMenu","value":true}' await-children=""></astro-island>
+<p><astro-island uid="ZOL472" prefix="r31" component-url="https://ishadeed.com/_astro/MobileMenu.jhXdaTWo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"MobileMenu","value":true}' await-children=""></astro-island></p>
 <h4 id="modal-dismiss-button">Modal dismiss button</h4>
 <p>A model dismiss button is an important action that needs to be considered while building the UI.</p>
 <p>If the target size is too small, it will be hard to dismiss the modal, especially on touch devices.</p>
-<astro-island uid="12Mzfu" prefix="r32" component-url="https://ishadeed.com/_astro/ModalDismiss.F2g45n_x.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ModalDismiss","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1juvx_1"><div class="_modal_1juvx_7"><div class="_modalContent_1juvx_58"><p>title in here</p><p>a few description text just for the demo purpose.</p></div></div></div></div></astro-island>
+<p><astro-island uid="12Mzfu" prefix="r32" component-url="https://ishadeed.com/_astro/ModalDismiss.F2g45n_x.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ModalDismiss","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1juvx_1"><div class="_modal_1juvx_7"><div class="_modalContent_1juvx_58"><p>title in here</p><p>a few description text just for the demo purpose.</p></div></div></div></div></astro-island></p>
 <p>What are the solutions that we can do?</p>
 <ul>
 <li>Increase the size of the dismiss button.</li>
 <li>Increase the target area only by adding a pseudo-element</li>
 </ul>
-<picture> <source srcset="https://ishadeed.com/_astro/modal-1.-bVW1gH8_ZqytJw.png" type="image/png"><source srcset="https://ishadeed.com/_astro/modal-1.-bVW1gH8_22t23P.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/modal-1.-bVW1gH8_ZqytJw.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/modal-1.-bVW1gH8_ZqytJw.png" type="image/png"><source srcset="https://ishadeed.com/_astro/modal-1.-bVW1gH8_22t23P.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/modal-1.-bVW1gH8_ZqytJw.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>The first solution works, but it increases the size of the header, which
 isn’t needed. Also, designers won’t like that 😉.</p>
 <p>Instead, we can add a pseudo-element to the dismiss button and it will increase the size without affecting the modal header.</p>
@@ -611,14 +613,14 @@ isn’t needed. Also, designers won’t like that 😉.</p>
   <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="Z1ibAYg" prefix="r33" component-url="https://ishadeed.com/_astro/ModalDismiss.F2g45n_x.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"ModalDismiss","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1juvx_1"><div class="_modal_1juvx_7"><div class="_modalContent_1juvx_58"><p>title in here</p><p>a few description text just for the demo purpose.</p></div></div><p class="checkbox"><input id=":r33R2:" type="checkbox" class="sr-only _input_3qp17_1"><label class="_label_3qp17_16" for=":r33R2:">Enhance target size</label></p></div></div></astro-island>
+<p><astro-island uid="Z1ibAYg" prefix="r33" component-url="https://ishadeed.com/_astro/ModalDismiss.F2g45n_x.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"ModalDismiss","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1juvx_1"><div class="_modal_1juvx_7"><div class="_modalContent_1juvx_58"><p>title in here</p><p>a few description text just for the demo purpose.</p></div></div><p class="checkbox"><input id=":r33R2:" type="checkbox" class="sr-only _input_3qp17_1"><label class="_label_3qp17_16" for=":r33R2:">Enhance target size</label></p></div></div></astro-island></p>
 <p>Fixed 🥳</p>
 
 <p>An example of having a large target size is a section header. There is a link that redirects the user to the full content.</p>
 <p>At first glance, the arrow looks fine. Try to hover on the arrow link. Notice how the target area is small.</p>
-<astro-island uid="1xYYb7" prefix="r34" component-url="https://ishadeed.com/_astro/SectionHeader.IaPXyJUt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"SectionHeader","value":true}' await-children=""></astro-island>
+<p><astro-island uid="1xYYb7" prefix="r34" component-url="https://ishadeed.com/_astro/SectionHeader.IaPXyJUt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"SectionHeader","value":true}' await-children=""></astro-island></p>
 <p>The spacing around the arrow is padding for the section header.</p>
-<astro-island uid="LOF9P" prefix="r35" component-url="https://ishadeed.com/_astro/SectionHeader.IaPXyJUt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"SectionHeader","value":true}' await-children=""></astro-island>
+<p><astro-island uid="LOF9P" prefix="r35" component-url="https://ishadeed.com/_astro/SectionHeader.IaPXyJUt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"SectionHeader","value":true}' await-children=""></astro-island></p>
 <p>To fix that, we have two options:</p>
 <ul>
 <li>Remove padding from the header and add it to the arrow button.</li>
@@ -632,10 +634,10 @@ isn’t needed. Also, designers won’t like that 😉.</p>
   <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="1JmVfE" prefix="r36" component-url="https://ishadeed.com/_astro/SectionHeader.IaPXyJUt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"SectionHeader","value":true}' await-children=""></astro-island>
+<p><astro-island uid="1JmVfE" prefix="r36" component-url="https://ishadeed.com/_astro/SectionHeader.IaPXyJUt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"SectionHeader","value":true}' await-children=""></astro-island></p>
 <h4 id="search-component">Search component</h4>
 <p>Oftentimes, we add an icon to the search component. It’s recommended to give it a enough target size.</p>
-<astro-island uid="Xnm4j" prefix="r37" component-url="https://ishadeed.com/_astro/SearchFilter.DBhRpvXm.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"SearchFilter","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Xnm4j" prefix="r37" component-url="https://ishadeed.com/_astro/SearchFilter.DBhRpvXm.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"SearchFilter","value":true}' await-children=""></astro-island></p>
 <p>In the above example, the filter button size is constrained to the icon only. We can increase the size via padding, sizing the icon, or expanding the target area with an additional element.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.search__filter:after</span> <span class="token punctuation">{</span>
   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
@@ -644,11 +646,11 @@ isn’t needed. Also, designers won’t like that 😉.</p>
   <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>2<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="Z6GnhQ" prefix="r38" component-url="https://ishadeed.com/_astro/SearchFilter.DBhRpvXm.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"SearchFilter","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z6GnhQ" prefix="r38" component-url="https://ishadeed.com/_astro/SearchFilter.DBhRpvXm.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"SearchFilter","value":true}' await-children=""></astro-island></p>
 <p>Much better.</p>
 
 <p>In a profile menu toggle, having the action only on the arrow icon isn’t a good practice. It forces the user to laser-point their mouse to open the menu.</p>
-<astro-island uid="Z2i5n2K" prefix="r39" component-url="https://ishadeed.com/_astro/ProfileMenu.NcPq9QU7.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ProfileMenu","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z2i5n2K" prefix="r39" component-url="https://ishadeed.com/_astro/ProfileMenu.NcPq9QU7.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ProfileMenu","value":true}' await-children=""></astro-island></p>
 <p>Instead, the target size should be on the whole block (name, avatar, and icon). To do that, we can use a pseudo-element to extend the target size.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.siteHeaderActions</span> <span class="token punctuation">{</span>
   <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
@@ -658,15 +660,15 @@ isn’t needed. Also, designers won’t like that 😉.</p>
   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
   <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="219Gx6" prefix="r40" component-url="https://ishadeed.com/_astro/ProfileMenu.NcPq9QU7.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"ProfileMenu","value":true}' await-children=""></astro-island>
+<p><astro-island uid="219Gx6" prefix="r40" component-url="https://ishadeed.com/_astro/ProfileMenu.NcPq9QU7.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"ProfileMenu","value":true}' await-children=""></astro-island></p>
 <p>Even better, we can add a background and make it more clear that all of
 the block is clickable.</p>
-<astro-island uid="ZTA6BG" prefix="r41" component-url="https://ishadeed.com/_astro/ProfileMenu.NcPq9QU7.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"toggleEnhance":[0,true],"boxed":[0,true]}' ssr="" client="visible" opts='{"name":"ProfileMenu","value":true}' await-children=""></astro-island>
+<p><astro-island uid="ZTA6BG" prefix="r41" component-url="https://ishadeed.com/_astro/ProfileMenu.NcPq9QU7.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"toggleEnhance":[0,true],"boxed":[0,true]}' ssr="" client="visible" opts='{"name":"ProfileMenu","value":true}' await-children=""></astro-island></p>
 <h3 id="checkboxes-and-radio-buttons">Checkboxes and radio buttons</h3>
 <p>Let’s highlight something here. The default styling for checkboxes and radio buttons on the web isn’t accessible for touch users. I guess the reason is because these controls weren’t designed for touch in the first place.</p>
-<astro-island uid="Z1NAlBu" prefix="r42" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z1NAlBu" prefix="r42" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>
 <p>I experimented to validate that. In the following photo, see how the tip of my thumb is almost the size of three checkboxes. It’s very hard to choose an option. This is the default style for checkboxes.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/example-checkbox-1.QtNLxMH4_175es6.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-checkbox-1.QtNLxMH4_1DGMCK.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-checkbox-1.QtNLxMH4_175es6.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/example-checkbox-1.QtNLxMH4_175es6.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-checkbox-1.QtNLxMH4_1DGMCK.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-checkbox-1.QtNLxMH4_175es6.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Let’s explore how to make this much better.</p>
 <h4 id="link-the-input-with-the-label">Link the input with the label</h4>
 <p>Before diving into this solution, let’s highlight the issue it prevents.</p>
@@ -674,11 +676,11 @@ the block is clickable.</p>
 <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>Social media<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span></code></pre>
 <p>The target area will be only on the checkbox (the highlighted area).</p>
-<astro-island uid="TLr98" prefix="r43" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island>
+<p><astro-island uid="TLr98" prefix="r43" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>
 <p>To fix that, the input ID must be used in the <code>for</code> attribute of the label. Such a quick fix with a big impact on the user experience and accessibility.</p>
 <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Social media<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span></code></pre>
-<astro-island uid="RIQtj" prefix="r44" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island>
+<p><astro-island uid="RIQtj" prefix="r44" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>
 <h4 id="make-the-checkbox-bigger">Make the checkbox bigger</h4>
 <p>The next step is to increase the checkbox size. To make things easier, I will do a custom checkbox and hide the default one. This is better to have a consistent experience across different browsers and devices.</p>
 <ul>
@@ -693,38 +695,38 @@ the block is clickable.</p>
 <span class="token punctuation">/&gt;</span></span>
 Social media
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span></code></pre>
-<astro-island uid="2nCbld" prefix="r45" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island>
+<p><astro-island uid="2nCbld" prefix="r45" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>
 <h4 id="add-padding">Add padding</h4>
 <p>Increasing the padding around the checkbox will make the target area even larger.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">label</span> <span class="token punctuation">{</span>
   <span class="token property">padding-block</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="Z2cPodr" prefix="r46" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"4"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z2cPodr" prefix="r46" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"4"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>
 <h4 id="increase-spacing-between-each-row">Increase spacing between each row</h4>
 <p>You might be wondering, the article is about increasing the target size, but the checkboxes are too close to each other. Let’s fix that.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.form-group</span> <span class="token punctuation">{</span>
   <span class="token property">gap</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="s6o8o" prefix="r47" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"5"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island>
+<p><astro-island uid="s6o8o" prefix="r47" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"5"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>
 <h4 id="make-the-labels-equal-to-the-largest-one">Make the labels equal to the largest one</h4>
 <p>Currently, the width of each option is equal to its container. This is a large target area that can get even larger if the container is taking the full width.</p>
 <p>See the following example.</p>
-<astro-island uid="Z1i3zVB" prefix="r48" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"6"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z1i3zVB" prefix="r48" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"6"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>
 <p>This is a very large target area that isn’t needed in my opinion. What we can do instead is to limit the width of all options to the largest of them.</p>
 <p>We can get the benefit of <code>max-content</code> in CSS. When we add it to the options container, its width will be equal to the longest option.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.form-group</span> <span class="token punctuation">{</span>
   <span class="token property">width</span><span class="token punctuation">:</span> max-content<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="ZBIeVa" prefix="r49" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"7"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island>
+<p><astro-island uid="ZBIeVa" prefix="r49" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"7"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>
 <p>On mobile, we can increase the spacing between the checkbox items. We might not need that. Please make sure to test them.</p>
 <p>I made a final demo that show the process of enhancing the UI. Move the slider to see the gradual enhancement.</p>
-<astro-island uid="ZGMdKl" prefix="r50" component-url="https://ishadeed.com/_astro/DemoCheckbox.AEQa6zTC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"DemoCheckbox","value":true}' await-children=""></astro-island>
+<p><astro-island uid="ZGMdKl" prefix="r50" component-url="https://ishadeed.com/_astro/DemoCheckbox.AEQa6zTC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"DemoCheckbox","value":true}' await-children=""></astro-island></p>
 <p>With that, here is the enhanced target size with an actual larger thumb using them (Hey there!).</p>
-<picture> <source srcset="https://ishadeed.com/_astro/example-checkbox-2.s6ysUW0v_1a10bj.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-checkbox-2.s6ysUW0v_1GCylX.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-checkbox-2.s6ysUW0v_1a10bj.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/example-checkbox-2.s6ysUW0v_1a10bj.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-checkbox-2.s6ysUW0v_1GCylX.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-checkbox-2.s6ysUW0v_1a10bj.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>From the photo, I can see that my thumb tip is being able to tap a specific
 checkbox without worrying about checking one by mistake.</p>
 <p>Since humans like visuals more, here is a side-by-side comparison of the before and after.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/example-checkbox-3.VXbf8iIk_Z14ocTL.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-checkbox-3.VXbf8iIk_ZwLDJ7.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-checkbox-3.VXbf8iIk_Z14ocTL.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/example-checkbox-3.VXbf8iIk_Z14ocTL.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-checkbox-3.VXbf8iIk_ZwLDJ7.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-checkbox-3.VXbf8iIk_Z14ocTL.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Notice how the difference is clear. Always make sure to have a large target
 size. See the following video for me trying to use the checkboxes.</p>
 <video poster="https://ishadeed.com/assets/target-size/videos/test-poster.png" src="https://ishadeed.com/assets/target-size/videos/test-video.mp4" controls controlslist="nodownload"></video>
@@ -732,7 +734,7 @@ size. See the following video for me trying to use the checkboxes.</p>
 <p>Buttons are a foundational component of the web. On every website you visit, you might need to interact with a button. When built right, they can be effective and easy to use for the user.</p>
 <p>In the given example, two buttons are present. It’s possible to tap the wrong button due to their small size and minimal spacing.</p>
 <p>Try to change the thumb size and notice how the touch indicator can easily overlap the buttons at once. This isn’t good.</p>
-<astro-island uid="Z1IVVvi" prefix="r51" component-url="https://ishadeed.com/_astro/TouchIndicator.8MUI1jDX.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"TouchIndicator","value":true}' await-children=""><div class="touch-test"><div class="box"><div class="content undefined"><h3>Please review changes</h3><p>All changes will be saved upon confirming.</p></div><p class="touch"></p></div></div></astro-island>
+<p><astro-island uid="Z1IVVvi" prefix="r51" component-url="https://ishadeed.com/_astro/TouchIndicator.8MUI1jDX.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"TouchIndicator","value":true}' await-children=""><div class="touch-test"><div class="box"><div class="content undefined"><h3>Please review changes</h3><p>All changes will be saved upon confirming.</p></div><p class="touch"></p></div></div></astro-island></p>
 <p>We have two options to fix that:</p>
 <ul>
 <li>Increase button size and spacing</li>
@@ -747,7 +749,7 @@ tap a button my mistake.</p>
   <span class="token property">gap</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 <span class="token selector">​ .button</span> <span class="token punctuation">{</span>
-  
+
   <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem 1rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
 <p>Or..</p>
@@ -757,37 +759,36 @@ tap a button my mistake.</p>
   <span class="token property">gap</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 <span class="token selector">​ .button</span> <span class="token punctuation">{</span>
-  
+
   <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem 1rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
 <p>For the sake of this example, I will go with the first solution.</p>
-<astro-island uid="2en9q5" prefix="r52" component-url="https://ishadeed.com/_astro/TouchIndicator.8MUI1jDX.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"TouchIndicator","value":true}' await-children=""><div class="touch-test"><div class="box"><div class="content enhanced"><h3>Please review changes</h3><p>All changes will be saved upon confirming.</p></div><p class="touch"></p></div></div></astro-island>
+<p><astro-island uid="2en9q5" prefix="r52" component-url="https://ishadeed.com/_astro/TouchIndicator.8MUI1jDX.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"TouchIndicator","value":true}' await-children=""><div class="touch-test"><div class="box"><div class="content enhanced"><h3>Please review changes</h3><p>All changes will be saved upon confirming.</p></div><p class="touch"></p></div></div></astro-island></p>
 <h3 id="text-buttons">Text buttons</h3>
 <p>Text buttons are often used to give more focus to the surrounding content, or to use them as a secondary button.</p>
 <p>In the following demo, the text button “learn more” looks like it has a good target size. Toggle the outline and see it.</p>
-<astro-island uid="268TaJ" prefix="r53" component-url="https://ishadeed.com/_astro/TextButton.Gu2escNA.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true]}' ssr="" client="visible" opts='{"name":"TextButton","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1hqq0_1"><article class="_card_1hqq0_7"><img src="https://ishadeed.com/assets/target-size/cookies.jpg" alt=""><div><h3>Yummy cookies</h3><p>Learn how to make great cookies at home.</p></div></article></div></div></astro-island>
+<p><astro-island uid="268TaJ" prefix="r53" component-url="https://ishadeed.com/_astro/TextButton.Gu2escNA.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true]}' ssr="" client="visible" opts='{"name":"TextButton","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1hqq0_1"><article class="_card_1hqq0_7"><img src="https://ishadeed.com/assets/target-size/cookies.jpg" alt=""><div><h3>Yummy cookies</h3><p>Learn how to make great cookies at home.</p></div></article></div></div></astro-island></p>
 <p>The simplest fix is to add <code>padding</code> around the button itself.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.button</span> <span class="token punctuation">{</span>
-  
+
   <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="Z12Ob50" prefix="r54" component-url="https://ishadeed.com/_astro/TextButton.Gu2escNA.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true],"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"TextButton","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1hqq0_1"><article class="_card_1hqq0_7"><img src="https://ishadeed.com/assets/target-size/cookies.jpg" alt=""><div><h3>Yummy cookies</h3><p>Learn how to make great cookies at home.</p></div></article></div></div></astro-island>
+<p><astro-island uid="Z12Ob50" prefix="r54" component-url="https://ishadeed.com/_astro/TextButton.Gu2escNA.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true],"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"TextButton","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1hqq0_1"><article class="_card_1hqq0_7"><img src="https://ishadeed.com/assets/target-size/cookies.jpg" alt=""><div><h3>Yummy cookies</h3><p>Learn how to make great cookies at home.</p></div></article></div></div></astro-island></p>
 <p>Better, right?</p>
 <p>Another example where text buttons can be used is in a group of buttons. Say we have a modal with a confirm and cancel button.</p>
-<astro-island uid="1iLYfO" prefix="r55" component-url="https://ishadeed.com/_astro/ConfirmSection.7blkEYyt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true]}' ssr="" client="visible" opts='{"name":"ConfirmSection","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1dai1_1"><article class="_card_1dai1_7"><div><div><h3>Are you sure?</h3><p>You are about to change nothing since this is just a UI example.</p></div></div></article></div></div></astro-island>
+<p><astro-island uid="1iLYfO" prefix="r55" component-url="https://ishadeed.com/_astro/ConfirmSection.7blkEYyt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true]}' ssr="" client="visible" opts='{"name":"ConfirmSection","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1dai1_1"><article class="_card_1dai1_7"><div><div><h3>Are you sure?</h3><p>You are about to change nothing since this is just a UI example.</p></div></div></article></div></div></astro-island></p>
 <p>To fix that, we need to make sure that the text button has padding around it.</p>
-<astro-island uid="Z253uYi" prefix="r56" component-url="https://ishadeed.com/_astro/ConfirmSection.7blkEYyt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true],"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"ConfirmSection","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1dai1_1"><article class="_card_1dai1_7"><div><div><h3>Are you sure?</h3><p>You are about to change nothing since this is just a UI example.</p></div></div></article></div></div></astro-island>
-
+<p><astro-island uid="Z253uYi" prefix="r56" component-url="https://ishadeed.com/_astro/ConfirmSection.7blkEYyt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true],"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"ConfirmSection","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1dai1_1"><article class="_card_1dai1_7"><div><div><h3>Are you sure?</h3><p>You are about to change nothing since this is just a UI example.</p></div></div></article></div></div></astro-island></p>
 <p>The pagination is often used to organize large amounts of content so the user can access them easily.</p>
 <p>Let’s explore a pagination example that looks fine from a visual perspective, but raises important questions when it comes to the target area size.</p>
-<astro-island uid="Z1MgAO6" prefix="r57" component-url="https://ishadeed.com/_astro/Pagination.GQenUq0_.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"Pagination","value":true}' await-children=""></astro-island>
+<p><astro-island uid="Z1MgAO6" prefix="r57" component-url="https://ishadeed.com/_astro/Pagination.GQenUq0_.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"Pagination","value":true}' await-children=""></astro-island></p>
 <p>Notice the target area when it’s highlighted.</p>
 <ul>
 <li>Target size is small</li>
 <li>Spacing is large</li>
 </ul>
 <p>The spacing made look like the target size is large.</p>
-<astro-island uid="6P1w3" prefix="r58" component-url="https://ishadeed.com/_astro/Pagination.GQenUq0_.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"],"spacingIndicator":[0,true]}' ssr="" client="visible" opts='{"name":"Pagination","value":true}' await-children=""></astro-island>
+<p><astro-island uid="6P1w3" prefix="r58" component-url="https://ishadeed.com/_astro/Pagination.GQenUq0_.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"],"spacingIndicator":[0,true]}' ssr="" client="visible" opts='{"name":"Pagination","value":true}' await-children=""></astro-island></p>
 <p>To fix that, we need to:</p>
 <ul>
 <li>Reduce the spacing</li>
@@ -801,73 +802,72 @@ tap a button my mistake.</p>
 <span class="token selector">.pagination__item</span> <span class="token punctuation">{</span>
   <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="ZqBHF2" prefix="r59" component-url="https://ishadeed.com/_astro/Pagination.GQenUq0_.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"3"],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"Pagination","value":true}' await-children=""></astro-island>
+<p><astro-island uid="ZqBHF2" prefix="r59" component-url="https://ishadeed.com/_astro/Pagination.GQenUq0_.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"3"],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"Pagination","value":true}' await-children=""></astro-island></p>
 <h3 id="vertical-navigation">Vertical navigation</h3>
 <p>In a previous Twitter design, the navigation was as follows. Each nav item size depends on its content.</p>
-<astro-island uid="UgDd3" prefix="r60" component-url="https://ishadeed.com/_astro/VerticalNav.rwmZXwOt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"],"Indicator":[0,"Non-clickable area"]}' ssr="" client="visible" opts='{"name":"VerticalNav$1","value":true}' await-children=""></astro-island>
+<p><astro-island uid="UgDd3" prefix="r60" component-url="https://ishadeed.com/_astro/VerticalNav.rwmZXwOt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"],"Indicator":[0,"Non-clickable area"]}' ssr="" client="visible" opts='{"name":"VerticalNav$1","value":true}' await-children=""></astro-island></p>
 <p>This is a confusing behavior as the user might expect the full navigation element to be clickable.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/vertical-nav-1.enZO-EDj_13yyaV.png" type="image/png"><source srcset="https://ishadeed.com/_astro/vertical-nav-1.enZO-EDj_Z1rOaiu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/vertical-nav-1.enZO-EDj_13yyaV.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/vertical-nav-1.enZO-EDj_13yyaV.png" type="image/png"><source srcset="https://ishadeed.com/_astro/vertical-nav-1.enZO-EDj_Z1rOaiu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/vertical-nav-1.enZO-EDj_13yyaV.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Here is a version with each navigation item taking the full width. Much
 better.</p>
-<astro-island uid="R3q9F" prefix="r61" component-url="https://ishadeed.com/_astro/VerticalNav.rwmZXwOt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"],"toggleEnhance":[0,true],"helper":[0,"Toggle the checkbox to see the larger targets"]}' ssr="" client="visible" opts='{"name":"VerticalNav$1","value":true}' await-children=""><div><p>Toggle the checkbox to see the larger targets</p></div></astro-island>
+<p><astro-island uid="R3q9F" prefix="r61" component-url="https://ishadeed.com/_astro/VerticalNav.rwmZXwOt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"],"toggleEnhance":[0,true],"helper":[0,"Toggle the checkbox to see the larger targets"]}' ssr="" client="visible" opts='{"name":"VerticalNav$1","value":true}' await-children=""><div><p>Toggle the checkbox to see the larger targets</p></div></astro-island></p>
 <h3 id="category-list">Category list</h3>
 <p>In the following example, the target size is on the label only. The spacing around the labels is padding added to the <code>&lt;li&gt;</code> element, not the <code>&lt;a&gt;</code> element.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/category-list-1.84dVSplc_P5nbq.png" type="image/png"><source srcset="https://ishadeed.com/_astro/category-list-1.84dVSplc_ZOY3tL.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/category-list-1.84dVSplc_P5nbq.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/category-list-1.84dVSplc_P5nbq.png" type="image/png"><source srcset="https://ishadeed.com/_astro/category-list-1.84dVSplc_ZOY3tL.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/category-list-1.84dVSplc_P5nbq.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>To fix that:</p>
 <ul>
 <li>Move the icon inside the <code>&lt;a&gt;</code> element.</li>
 <li>We need to remove the padding from the <code>&lt;li&gt;</code> and add it to the <code>&lt;a&gt;</code> element, and force them to take the full width.</li>
 </ul>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav-item a</span> <span class="token punctuation">{</span>
-  
+
   <span class="token property">padding</span><span class="token punctuation">:</span> 0.8rem 1rem<span class="token punctuation">;</span>
   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="ZyUqp1" prefix="r62" component-url="https://ishadeed.com/_astro/CategoryList.AMHssFfm.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Toggle the checkbox. This demo is using a pseudo-element for interactivity purposes."],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"VerticalNav","value":true}' await-children=""><div><p>Toggle the checkbox. This demo is using a pseudo-element for interactivity purposes.</p></div></astro-island>
-
+<p><astro-island uid="ZyUqp1" prefix="r62" component-url="https://ishadeed.com/_astro/CategoryList.AMHssFfm.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Toggle the checkbox. This demo is using a pseudo-element for interactivity purposes."],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"VerticalNav","value":true}' await-children=""><div><p>Toggle the checkbox. This demo is using a pseudo-element for interactivity purposes.</p></div></astro-island></p>
 <p>On mobile, having a great scrolling experience is crucial to let the user explore more content. The other day, I was browsing Amazon on my mobile and noticed an interesting behavior.</p>
 <p>In the following figure, the scrollable section “You might also like” isn’t only on the cards, but also on the highlighted area underneath.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/scrolling-container-1.j0KqkTzR_oi5Tc.png" type="image/png"><source srcset="https://ishadeed.com/_astro/scrolling-container-1.j0KqkTzR_1nhgd9.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/scrolling-container-1.j0KqkTzR_oi5Tc.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/scrolling-container-1.j0KqkTzR_oi5Tc.png" type="image/png"><source srcset="https://ishadeed.com/_astro/scrolling-container-1.j0KqkTzR_1nhgd9.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/scrolling-container-1.j0KqkTzR_oi5Tc.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>In CSS, we can do such a thing by extending the bottom spacing. If we’re
 using CSS Scroll Snap, we need to add <code>padding-bottom</code> only.</p>
 <p>See the following demo.</p>
-<astro-island uid="QnnGW" prefix="r63" component-url="https://ishadeed.com/_astro/ScrollingContainer.J0ZtNdDg.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ScrollingContainer","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_8ctok_1 undefined"><div><h3>You might also like</h3><section class="_section_8ctok_12 false"><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Chocolate Cake</h4><p class="_desc_8ctok_43">Rich and moist chocolate cake with a velvety smooth ganache.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Strawberry Cheesecake</h4><p class="_desc_8ctok_43">Creamy cheesecake topped with fresh strawberries and a sweet glaze.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Apple Pie</h4><p class="_desc_8ctok_43">Flaky crust filled with cinnamon-spiced apples, baked to golden perfection.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Tiramisu</h4><p class="_desc_8ctok_43">Classic Italian dessert with layers of coffee-soaked ladyfingers and mascarpone cream.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Mango Sorbet</h4><p class="_desc_8ctok_43">Refreshing sorbet made with ripe mangoes, perfect for a tropical treat.</p></div></div></section></div><div><h3>Another section in here</h3><p>This is a random desc in here, just to show that there is another section under the scrollable one.</p></div></div></div></astro-island>
+<p><astro-island uid="QnnGW" prefix="r63" component-url="https://ishadeed.com/_astro/ScrollingContainer.J0ZtNdDg.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ScrollingContainer","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_8ctok_1 undefined"><div><h3>You might also like</h3><section class="_section_8ctok_12 false"><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Chocolate Cake</h4><p class="_desc_8ctok_43">Rich and moist chocolate cake with a velvety smooth ganache.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Strawberry Cheesecake</h4><p class="_desc_8ctok_43">Creamy cheesecake topped with fresh strawberries and a sweet glaze.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Apple Pie</h4><p class="_desc_8ctok_43">Flaky crust filled with cinnamon-spiced apples, baked to golden perfection.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Tiramisu</h4><p class="_desc_8ctok_43">Classic Italian dessert with layers of coffee-soaked ladyfingers and mascarpone cream.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Mango Sorbet</h4><p class="_desc_8ctok_43">Refreshing sorbet made with ripe mangoes, perfect for a tropical treat.</p></div></div></section></div><div><h3>Another section in here</h3><p>This is a random desc in here, just to show that there is another section under the scrollable one.</p></div></div></div></astro-island></p>
 <p>Try to scroll the section on mobile, and you will notice that the scrollable area is within the content only.</p>
 <p>We can extend that by increasing the bottom padding.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.section</span> <span class="token punctuation">{</span>
-  
+
   <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="aC2t" prefix="r64" component-url="https://ishadeed.com/_astro/ScrollingContainer.J0ZtNdDg.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Try to scroll the container on mobile."],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"ScrollingContainer","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_8ctok_1 _enhanced_8ctok_8"><div><h3>You might also like</h3><section class="_section_8ctok_12 false"><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Chocolate Cake</h4><p class="_desc_8ctok_43">Rich and moist chocolate cake with a velvety smooth ganache.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Strawberry Cheesecake</h4><p class="_desc_8ctok_43">Creamy cheesecake topped with fresh strawberries and a sweet glaze.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Apple Pie</h4><p class="_desc_8ctok_43">Flaky crust filled with cinnamon-spiced apples, baked to golden perfection.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Tiramisu</h4><p class="_desc_8ctok_43">Classic Italian dessert with layers of coffee-soaked ladyfingers and mascarpone cream.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Mango Sorbet</h4><p class="_desc_8ctok_43">Refreshing sorbet made with ripe mangoes, perfect for a tropical treat.</p></div></div></section></div><div><h3>Another section in here</h3><p>This is a random desc in here, just to show that there is another section under the scrollable one.</p></div></div><p>Try to scroll the container on mobile.</p></div></astro-island>
+<p><astro-island uid="aC2t" prefix="r64" component-url="https://ishadeed.com/_astro/ScrollingContainer.J0ZtNdDg.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Try to scroll the container on mobile."],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"ScrollingContainer","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_8ctok_1 _enhanced_8ctok_8"><div><h3>You might also like</h3><section class="_section_8ctok_12 false"><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Chocolate Cake</h4><p class="_desc_8ctok_43">Rich and moist chocolate cake with a velvety smooth ganache.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Strawberry Cheesecake</h4><p class="_desc_8ctok_43">Creamy cheesecake topped with fresh strawberries and a sweet glaze.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Apple Pie</h4><p class="_desc_8ctok_43">Flaky crust filled with cinnamon-spiced apples, baked to golden perfection.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Tiramisu</h4><p class="_desc_8ctok_43">Classic Italian dessert with layers of coffee-soaked ladyfingers and mascarpone cream.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Mango Sorbet</h4><p class="_desc_8ctok_43">Refreshing sorbet made with ripe mangoes, perfect for a tropical treat.</p></div></div></section></div><div><h3>Another section in here</h3><p>This is a random desc in here, just to show that there is another section under the scrollable one.</p></div></div><p>Try to scroll the container on mobile.</p></div></astro-island></p>
 <p>This is better. Some may say there’s a big spacing under the section, and I agree. However, sometimes it’s okay because the benefits outweigh the drawbacks.</p>
 <h3 id="placement-of-target-items">Placement of target items</h3>
 <p>In cases where there is an action item at the top and a result at the bottom, the user’s finger on mobile might cover the result, making it annoying to see the change when for example, changing tabs, or toggling an option from a list.</p>
 <p>This example is from this article.</p>
-<astro-island uid="ZCkO4u" prefix="r65" component-url="https://ishadeed.com/_astro/DemoContext.riEHUkJo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"DemoContext","value":true}' await-children=""><div><div class="example-wrapper center"><div class="demo-context"><div><svg viewbox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M12.3484 12.808C12.3484 14.675 15.1484 14.675 15.1484 12.808C15.1484 10.941 12.3484 10.941 12.3484 12.808Z" fill="black"></path><path d="M17.8914 12.808C17.8914 14.675 20.6914 14.675 20.6914 12.808C20.6914 10.941 17.8914 10.941 17.8914 12.808Z" fill="black"></path><path d="M6.94414 12.808C6.94414 14.675 9.74414 14.675 9.74414 12.808C9.74414 10.941 6.94414 10.941 6.94414 12.808Z" fill="black"></path><path d="M9.51938 3.20386H18.5079C23.6037 3.20386 27.7754 7.34814 27.7754 12.4724C27.7754 17.5967 23.6311 21.741 18.5068 21.741H16.1826L9.26688 26.8653L9.26797 21.7127C4.28369 21.5727 0.252249 17.4841 0.252249 12.4441C0.251156 7.34842 4.42369 3.20414 9.51969 3.20414L9.51938 3.20386ZM9.51938 20.4239H10.5836V24.2596L15.735 20.4239H18.5066C22.9023 20.4239 26.458 16.8681 26.458 12.4724C26.458 8.0767 22.9023 4.52098 18.5066 4.52098L9.51916 4.51988C5.12344 4.51988 1.56771 8.0756 1.56771 12.4713C1.56771 16.8682 5.12366 20.4239 9.51938 20.4239Z" fill="black"></path></g></svg><p>I checked the order page on my <span>phone</span> and tried to <span>tap</span> the order button but it’s not responding.</p></div></div></div></div></astro-island>
+<p><astro-island uid="ZCkO4u" prefix="r65" component-url="https://ishadeed.com/_astro/DemoContext.riEHUkJo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"DemoContext","value":true}' await-children=""><div><div class="example-wrapper center"><div class="demo-context"><div><svg viewbox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M12.3484 12.808C12.3484 14.675 15.1484 14.675 15.1484 12.808C15.1484 10.941 12.3484 10.941 12.3484 12.808Z" fill="black"></path><path d="M17.8914 12.808C17.8914 14.675 20.6914 14.675 20.6914 12.808C20.6914 10.941 17.8914 10.941 17.8914 12.808Z" fill="black"></path><path d="M6.94414 12.808C6.94414 14.675 9.74414 14.675 9.74414 12.808C9.74414 10.941 6.94414 10.941 6.94414 12.808Z" fill="black"></path><path d="M9.51938 3.20386H18.5079C23.6037 3.20386 27.7754 7.34814 27.7754 12.4724C27.7754 17.5967 23.6311 21.741 18.5068 21.741H16.1826L9.26688 26.8653L9.26797 21.7127C4.28369 21.5727 0.252249 17.4841 0.252249 12.4441C0.251156 7.34842 4.42369 3.20414 9.51969 3.20414L9.51938 3.20386ZM9.51938 20.4239H10.5836V24.2596L15.735 20.4239H18.5066C22.9023 20.4239 26.458 16.8681 26.458 12.4724C26.458 8.0767 22.9023 4.52098 18.5066 4.52098L9.51916 4.51988C5.12344 4.51988 1.56771 8.0756 1.56771 12.4713C1.56771 16.8682 5.12366 20.4239 9.51938 20.4239Z" fill="black"></path></g></svg><p>I checked the order page on my <span>phone</span> and tried to <span>tap</span> the order button but it’s not responding.</p></div></div></div></div></astro-island></p>
 <p>At first glance, the positioning of the radio buttons might seem okay. On mobile, it’s something different.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/placement-target-1.3wmZOrJa_Z1XLOjh.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-1.3wmZOrJa_Z1rag8C.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-1.3wmZOrJa_Z1XLOjh.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/placement-target-1.3wmZOrJa_Z1XLOjh.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-1.3wmZOrJa_Z1rag8C.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-1.3wmZOrJa_Z1XLOjh.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Notice how my thumb is covering the result. It’s hard to see the changes
 while my thumb is choosing an option.</p>
 <p>The fix is simple. The placement of the options should be at the bottom.</p>
-<astro-island uid="vmLPo" prefix="r66" component-url="https://ishadeed.com/_astro/DemoContext.riEHUkJo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"DemoContext","value":true}' await-children=""><div><div class="example-wrapper center"><div class="demo-context"><div><svg viewbox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M12.3484 12.808C12.3484 14.675 15.1484 14.675 15.1484 12.808C15.1484 10.941 12.3484 10.941 12.3484 12.808Z" fill="black"></path><path d="M17.8914 12.808C17.8914 14.675 20.6914 14.675 20.6914 12.808C20.6914 10.941 17.8914 10.941 17.8914 12.808Z" fill="black"></path><path d="M6.94414 12.808C6.94414 14.675 9.74414 14.675 9.74414 12.808C9.74414 10.941 6.94414 10.941 6.94414 12.808Z" fill="black"></path><path d="M9.51938 3.20386H18.5079C23.6037 3.20386 27.7754 7.34814 27.7754 12.4724C27.7754 17.5967 23.6311 21.741 18.5068 21.741H16.1826L9.26688 26.8653L9.26797 21.7127C4.28369 21.5727 0.252249 17.4841 0.252249 12.4441C0.251156 7.34842 4.42369 3.20414 9.51969 3.20414L9.51938 3.20386ZM9.51938 20.4239H10.5836V24.2596L15.735 20.4239H18.5066C22.9023 20.4239 26.458 16.8681 26.458 12.4724C26.458 8.0767 22.9023 4.52098 18.5066 4.52098L9.51916 4.51988C5.12344 4.51988 1.56771 8.0756 1.56771 12.4713C1.56771 16.8682 5.12366 20.4239 9.51938 20.4239Z" fill="black"></path></g></svg><p>I checked the order page on my <span>phone</span> and tried to <span>tap</span> the order button but it’s not responding.</p></div></div></div></div></astro-island>
-<picture> <source srcset="https://ishadeed.com/_astro/placement-target-2.LwjLzU3l_1UBqaJ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-2.LwjLzU3l_2sdYlo.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-2.LwjLzU3l_1UBqaJ.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><astro-island uid="vmLPo" prefix="r66" component-url="https://ishadeed.com/_astro/DemoContext.riEHUkJo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"DemoContext","value":true}' await-children=""><div><div class="example-wrapper center"><div class="demo-context"><div><svg viewbox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M12.3484 12.808C12.3484 14.675 15.1484 14.675 15.1484 12.808C15.1484 10.941 12.3484 10.941 12.3484 12.808Z" fill="black"></path><path d="M17.8914 12.808C17.8914 14.675 20.6914 14.675 20.6914 12.808C20.6914 10.941 17.8914 10.941 17.8914 12.808Z" fill="black"></path><path d="M6.94414 12.808C6.94414 14.675 9.74414 14.675 9.74414 12.808C9.74414 10.941 6.94414 10.941 6.94414 12.808Z" fill="black"></path><path d="M9.51938 3.20386H18.5079C23.6037 3.20386 27.7754 7.34814 27.7754 12.4724C27.7754 17.5967 23.6311 21.741 18.5068 21.741H16.1826L9.26688 26.8653L9.26797 21.7127C4.28369 21.5727 0.252249 17.4841 0.252249 12.4441C0.251156 7.34842 4.42369 3.20414 9.51969 3.20414L9.51938 3.20386ZM9.51938 20.4239H10.5836V24.2596L15.735 20.4239H18.5066C22.9023 20.4239 26.458 16.8681 26.458 12.4724C26.458 8.0767 22.9023 4.52098 18.5066 4.52098L9.51916 4.51988C5.12344 4.51988 1.56771 8.0756 1.56771 12.4713C1.56771 16.8682 5.12366 20.4239 9.51938 20.4239Z" fill="black"></path></g></svg><p>I checked the order page on my <span>phone</span> and tried to <span>tap</span> the order button but it’s not responding.</p></div></div></div></div></astro-island>
+<picture> <source srcset="https://ishadeed.com/_astro/placement-target-2.LwjLzU3l_1UBqaJ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-2.LwjLzU3l_2sdYlo.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-2.LwjLzU3l_1UBqaJ.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>A real-life example of this is a UX detail I like on TikTok. When you tab the
 progress bar of the video, the timing will be shown above in a large
 size.</p>
 <p>This is a great UX detail, as it doesn’t show the timing under my finger or next to it. See the following figure:</p>
-<picture> <source srcset="https://ishadeed.com/_astro/placement-target-vs-result.j7Un2NEp_Z2dUT9I.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-vs-result.j7Un2NEp_1qGa52.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-vs-result.j7Un2NEp_Z2dUT9I.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/placement-target-vs-result.j7Un2NEp_Z2dUT9I.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-vs-result.j7Un2NEp_1qGa52.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-vs-result.j7Un2NEp_Z2dUT9I.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>If the time were displayed on the progress bar itself, it would be harder
 for the user to spot it. Placing it at the top is better.</p>
 <p>On Instagram, it’s similar, but they also add a preview of the video.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/placement-target-vs-result-2.SK-0Rka5_ZAWA4X.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-vs-result-2.SK-0Rka5_Z1FaVUP.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-vs-result-2.SK-0Rka5_ZAWA4X.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/placement-target-vs-result-2.SK-0Rka5_ZAWA4X.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-vs-result-2.SK-0Rka5_Z1FaVUP.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-vs-result-2.SK-0Rka5_ZAWA4X.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h3 id="dominant-hand-of-the-user">Dominant hand of the user</h3>
 <p>Making it easy for the user to tap a target is not only about its size, but also it’s location. The following is an experiment based on a React hook by <a href="https://github.com/KittyGiraudel/dhand">Kitty Giraudel</a> called “dhand”.</p>
 <p>The idea is to guess what’s the dominant hand for the user and update the UI based on it.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/dominant-hand-1.wzgmkaOW_hGm1B.png" type="image/png"><source srcset="https://ishadeed.com/_astro/dominant-hand-1.wzgmkaOW_Z1nn4DA.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/dominant-hand-1.wzgmkaOW_hGm1B.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/dominant-hand-1.wzgmkaOW_hGm1B.png" type="image/png"><source srcset="https://ishadeed.com/_astro/dominant-hand-1.wzgmkaOW_Z1nn4DA.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/dominant-hand-1.wzgmkaOW_hGm1B.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>The assumption that this experience is based on is that a left-handed user
 will more likely tap on the far right of the UI. On the other hand, a right-handed
 will tap on the left side.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/dominant-hand-2.dp3ednDd_ZdLRWK.png" type="image/png"><source srcset="https://ishadeed.com/_astro/dominant-hand-2.dp3ednDd_Z1SQjCW.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/dominant-hand-2.dp3ednDd_ZdLRWK.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/dominant-hand-2.dp3ednDd_ZdLRWK.png" type="image/png"><source srcset="https://ishadeed.com/_astro/dominant-hand-2.dp3ednDd_Z1SQjCW.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/dominant-hand-2.dp3ednDd_ZdLRWK.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>With that info in mind, we can make decisions about what’s the dominant
 hand. It’s an interesting experience. If I can learn one thing from this,
 it’s that target area isn’t only about size, but also the location.</p>
@@ -879,24 +879,24 @@ it’s that target area isn’t only about size, but also the location.</p>
 <p>While this might not be needed for elements like buttons, it’s important for stuff like icon buttons, cards, tabs, mobile menus, you name it!</p>
 <h4 id="tabs-component">Tabs component</h4>
 <p>In a tabs component, the spacing should be around the tab item itself, not built from the outer padding of the parent.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/test-designers-1.pFkXV2JK_2iawU4.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-1.pFkXV2JK_1gTqaj.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-1.pFkXV2JK_2iawU4.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-1.pFkXV2JK_2iawU4.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-1.pFkXV2JK_1gTqaj.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-1.pFkXV2JK_2iawU4.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h4 id="slider-navigation">Slider navigation</h4>
 <p>This is a great example of keeping the UI as is, but expanding the target size to make it easier for the user to control the slider.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/test-designers-2.j5oDanki_1uKRsc.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-2.j5oDanki_mLj7q.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-2.j5oDanki_1uKRsc.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-2.j5oDanki_1uKRsc.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-2.j5oDanki_mLj7q.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-2.j5oDanki_1uKRsc.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>As a designer, thinking about those UI decisions upfront is important to
 deliver a great UX.</p>
 <h4 id="icon-buttons-1">Icon buttons</h4>
 <p>This applies to different cases and examples. Here is one for a modal dismiss button.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/test-designers-3._YGew-vA_FfQCk.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-3._YGew-vA_Zl0f7q.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-3._YGew-vA_FfQCk.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-3._YGew-vA_FfQCk.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-3._YGew-vA_Zl0f7q.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-3._YGew-vA_FfQCk.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>And this is for a close pattern that is placed at the top-right corner.
 Generally speaking, this pattern isn’t recommended.</p>
 <p>I spotted this in the tags menu in Threads by Meta.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/test-designers-4.3Jkk6XZv_Z1DDesl.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-4.3Jkk6XZv_2phMAP.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-4.3Jkk6XZv_Z1DDesl.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-4.3Jkk6XZv_Z1DDesl.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-4.3Jkk6XZv_2phMAP.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-4.3Jkk6XZv_Z1DDesl.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Here is my recommendation.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/test-designers-5.KR37WxIr_10hWCt.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-5.KR37WxIr_ZX97h.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-5.KR37WxIr_10hWCt.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-5.KR37WxIr_10hWCt.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-5.KR37WxIr_ZX97h.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-5.KR37WxIr_10hWCt.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h4 id="website-navigation-1">Website navigation</h4>
 <p>In a design tool like Figma, we sometimes forget the touch size details when we quickly mock up a UI. In this example, it’s a website header.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/test-designers-6.Vajf4ul-_Z29J3LM.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-6.Vajf4ul-_1fnDlW.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-6.Vajf4ul-_Z29J3LM.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-6.Vajf4ul-_Z29J3LM.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-6.Vajf4ul-_1fnDlW.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-6.Vajf4ul-_Z29J3LM.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>In this design, the navigation items target size is only on the text. This
 isn’t good. Don’t make the developer think twice like:</p>
 <ul>
@@ -904,14 +904,14 @@ isn’t good. Don’t make the developer think twice like:</p>
 <li>What if the user clicked <code>3px</code> above a navigation item?</li>
 </ul>
 <p>An experienced developer will fix that themselves, or ask the designer first. But we can’t assume that all developers are aware of this as people have different levels of knowledge, which is fine.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/test-designers-7.osLbV_Y9_1sfSGD.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-7.osLbV_Y9_qYLVS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-7.osLbV_Y9_1sfSGD.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-7.osLbV_Y9_1sfSGD.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-7.osLbV_Y9_qYLVS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-7.osLbV_Y9_1sfSGD.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h4 id="provide-a-target-size-component">Provide a target size component</h4>
 <p>Let’s suppose that you worked on a modal design and used an icon for a close button.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/target-size-component-1.VM9rVhCi_Z2iFmYe.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-size-component-1.VM9rVhCi_Z2ki0gm.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-size-component-1.VM9rVhCi_Z2iFmYe.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/target-size-component-1.VM9rVhCi_Z2iFmYe.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-size-component-1.VM9rVhCi_Z2ki0gm.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-size-component-1.VM9rVhCi_Z2iFmYe.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>In Figma, the close icon doesn’t have any boundaries other than the icon
 itself, thus indicating to the developer that it should be that way.</p>
 <p>In the following example, I placed the icon within a Target component. I can use this component anywhere in the design.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/target-size-component-2.BK1i_Aqk_y6EA1.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-size-component-2.BK1i_Aqk_wu2iS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-size-component-2.BK1i_Aqk_y6EA1.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/target-size-component-2.BK1i_Aqk_y6EA1.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-size-component-2.BK1i_Aqk_wu2iS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-size-component-2.BK1i_Aqk_y6EA1.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Making this clear in the design is important for both the designer and
 the developer. If they know it, it’s a friendly reminder. If not, then
 they’ve learned something new!</p>
@@ -919,7 +919,7 @@ they’ve learned something new!</p>
 <p>Once the design we have is well documented for target size rules, it’s time to test the UI for any small target sizes.</p>
 
 <p>The browser DevTools is a powerful way to detect and spot target size issues. The simplest thing you can do is to check the width of a target size by inspecting the element.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/developers-test-1.iJ5AJveK_2lN9xh.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-1.iJ5AJveK_1dNAcv.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-1.iJ5AJveK_2lN9xh.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/developers-test-1.iJ5AJveK_2lN9xh.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-1.iJ5AJveK_1dNAcv.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-1.iJ5AJveK_2lN9xh.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>This is good for testing a simple UI, but for a UI with lots of details,
 you will need to automate that somehow.</p>
 <h4 id="use-css-outline-to-have-a-look-at-the-target-size">Use CSS outline to have a look at the target size</h4>
@@ -928,38 +928,36 @@ you will need to automate that somehow.</p>
 <p>See it in the demo below:</p>
 <p class="codepen" data-height="504.97265625" data-theme-id="light" data-slug-hash="wvOWLQw" data-user="shadeed"></p>
 
-
 <p><a href="https://polypane.app/">Polypane browser</a> by Kilian Valkhof is a great browser for testing and debugging websites. There is a “Target size” debug feature that lets you pick a size for the cursor.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/developers-test-3.AfckxL0L_ZWiBSm.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-3.AfckxL0L_Z25ibe8.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-3.AfckxL0L_ZWiBSm.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/developers-test-3.AfckxL0L_ZWiBSm.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-3.AfckxL0L_Z25ibe8.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-3.AfckxL0L_ZWiBSm.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Once you pick the target size (48, 44, or 24), the cursor will become the
 size of the selected option. It’s useful to spot UI elements that will
 interfere with each other.</p>
 <p>Here is an example in testing my headers-css project, the search and menu buttons should have more spacing between each other.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/developers-test-4.jiYYm-Pw_ZrpaQ1.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-4.jiYYm-Pw_Z1zoJbM.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-4.jiYYm-Pw_ZrpaQ1.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/developers-test-4.jiYYm-Pw_ZrpaQ1.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-4.jiYYm-Pw_Z1zoJbM.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-4.jiYYm-Pw_ZrpaQ1.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Another detail that I liked in Polypane is highlighting small target areas
 and how they interfere with each other. Here is an example of the default
 HTML checkboxes:</p>
-<picture> <source srcset="https://ishadeed.com/_astro/developers-test-5.EVJscJ5s_ZCyg9D.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-5.EVJscJ5s_Z1KxOup.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-5.EVJscJ5s_ZCyg9D.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/developers-test-5.EVJscJ5s_ZCyg9D.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-5.EVJscJ5s_Z1KxOup.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-5.EVJscJ5s_ZCyg9D.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h2 id="real-life-examples">Real-life examples</h2>
 <p>You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix them.</p>
 
 <p>The other day, I was listenting to a Twitter space, and I was about to leave the space by mistake because the “Leave” button is overlapping with the context menu (AKA the dots icon).</p>
-<astro-island uid="ZDDoJP" prefix="r67" component-url="https://ishadeed.com/_astro/TwitterSpaces.U4-9hhPt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Try to hover on the Leave button or the dots menu."],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"TwitterSpaces","value":true}' await-children=""><div><p>Try to hover on the Leave button or the dots menu.</p></div></astro-island>
+<p><astro-island uid="ZDDoJP" prefix="r67" component-url="https://ishadeed.com/_astro/TwitterSpaces.U4-9hhPt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Try to hover on the Leave button or the dots menu."],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"TwitterSpaces","value":true}' await-children=""><div><p>Try to hover on the Leave button or the dots menu.</p></div></astro-island></p>
 <p>Did you notice that the dots and “leave” buttons overlap? Let me make it more clear.</p>
-<astro-island uid="2cur99" prefix="r68" component-url="https://ishadeed.com/_astro/TwitterSpaces.U4-9hhPt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"TwitterSpaces","value":true}' await-children=""></astro-island>
+<p><astro-island uid="2cur99" prefix="r68" component-url="https://ishadeed.com/_astro/TwitterSpaces.U4-9hhPt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"TwitterSpaces","value":true}' await-children=""></astro-island></p>
 <p>This isn’t good. To fix it, we simply need to add spacing between the icons buttons and the “leave” button.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.header</span> <span class="token punctuation">{</span>
-  
+
   <span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<astro-island uid="Z15cCbU" prefix="r69" component-url="https://ishadeed.com/_astro/TwitterSpaces.U4-9hhPt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Much better."],"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"TwitterSpaces","value":true}' await-children=""></astro-island>
-
+<p><astro-island uid="Z15cCbU" prefix="r69" component-url="https://ishadeed.com/_astro/TwitterSpaces.U4-9hhPt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Much better."],"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"TwitterSpaces","value":true}' await-children=""></astro-island></p>
 <p>While looking at a font in Adobe Fonts, I noticed an issue in the target size of the tag component.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-1.z4SgZnZ5_1Y2tLM.png" type="image/png"><source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-1.z4SgZnZ5_Q2Ur1.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/adobe-fonts-tag-1.z4SgZnZ5_1Y2tLM.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-1.z4SgZnZ5_1Y2tLM.png" type="image/png"><source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-1.z4SgZnZ5_Q2Ur1.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/adobe-fonts-tag-1.z4SgZnZ5_1Y2tLM.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>The target size of the tag is on the text only. As a user, you will expect
 that all of the tags is clickable. This is not good. I’m surprised to see
 that by Adobe.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-2.jlkOF7Ey_Z10pLdC.png" type="image/png"><source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-2.jlkOF7Ey_Z28pkyo.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/adobe-fonts-tag-2.jlkOF7Ey_Z10pLdC.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-2.jlkOF7Ey_Z10pLdC.png" type="image/png"><source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-2.jlkOF7Ey_Z28pkyo.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/adobe-fonts-tag-2.jlkOF7Ey_Z10pLdC.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Here is the CSS for the component:</p>
 <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spectrum-Tags-item<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listitem<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>English<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
@@ -971,7 +969,7 @@ that by Adobe.</p>
   <span class="token property">height</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
   <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span>
   <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
-  
+
 <span class="token punctuation">}</span></code></pre>
 <p>To fix that, we need to:</p>
 <ul>
@@ -989,11 +987,11 @@ that by Adobe.</p>
 <video poster="https://ishadeed.com/assets/target-size/videos/adobe-fonts-poster.png" src="https://ishadeed.com/assets/target-size/videos/adobe-fonts-tag.mp4" controls controlslist="nodownload"></video>
 <h3 id="backblaze-navigation">Backblaze navigation</h3>
 <p>I use Backblaze to back up my data and noticed something on the login page. The target size for the menu items is only on the text.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/backblaze-nav-1._NyIwUt3_1CKatB.png" type="image/png"><source srcset="https://ishadeed.com/_astro/backblaze-nav-1._NyIwUt3_Z2jgbA.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/backblaze-nav-1._NyIwUt3_1CKatB.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/backblaze-nav-1._NyIwUt3_1CKatB.png" type="image/png"><source srcset="https://ishadeed.com/_astro/backblaze-nav-1._NyIwUt3_Z2jgbA.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/backblaze-nav-1._NyIwUt3_1CKatB.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>In the UI, it indicates that the whole item is clickable because there
 are top and bottom borders.</p>
 <p>Again, the fix is similar to the previous Adobe example. We need to add the padding to the <code>&lt;a&gt;</code> element.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/backblaze-nav-2.sVNwrzNN_YTu6d.png" type="image/png"><source srcset="https://ishadeed.com/_astro/backblaze-nav-2.sVNwrzNN_ZF9VyY.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/backblaze-nav-2.sVNwrzNN_YTu6d.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/backblaze-nav-2.sVNwrzNN_YTu6d.png" type="image/png"><source srcset="https://ishadeed.com/_astro/backblaze-nav-2.sVNwrzNN_ZF9VyY.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/backblaze-nav-2.sVNwrzNN_YTu6d.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <h3 id="dribbble-navigation">Dribbble navigation</h3>
 <p>Yes, Dribbble! I found lots of interesting target size issues, so why not fix them? Even though Dribbble is full of beautiful but useless UIs with lots of shadows and trendy gradients.</p>
 <p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-1.l5TbdF-8_Z2iSl9l.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-1.l5TbdF-8_Z25gxWy.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-1.l5TbdF-8_Z2iSl9l.png" alt="" loading="lazy" decoding="async"> </source></source></picture>I added a
@@ -1007,13 +1005,13 @@ CSS outline and noticed the following issues:</p>
 <p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-2.jMb3iBtB_Z1ft6yV.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-2.jMb3iBtB_Z11Qjn9.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-2.jMb3iBtB_Z1ft6yV.png" alt="" loading="lazy" decoding="async"> </source></source></picture>I took it
 further and mocked up how this UI can be viewed compared to human
 fingers.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-3.FyLgrdba_c8rEM.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-3.FyLgrdba_pKeQz.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-3.FyLgrdba_c8rEM.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-3.FyLgrdba_c8rEM.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-3.FyLgrdba_pKeQz.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-3.FyLgrdba_c8rEM.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Since the CSS is written via Flexbox, I was able to increase the CSS <code>gap</code>
 and force the flex items to align normally.</p>
 <p>The web version:</p>
-<picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-4.fg_d5aRG_mNNVS.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-4.fg_d5aRG_AqB8F.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-4.fg_d5aRG_mNNVS.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-4.fg_d5aRG_mNNVS.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-4.fg_d5aRG_AqB8F.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-4.fg_d5aRG_mNNVS.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>And the mobile version:</p>
-<picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-5.m05M50JQ_Z1cU5R6.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-5.m05M50JQ_C5fim.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-5.m05M50JQ_Z1cU5R6.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-5.m05M50JQ_Z1cU5R6.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-5.m05M50JQ_C5fim.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-5.m05M50JQ_Z1cU5R6.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>But wait… why the “Go Pro” item doesn’t have a padding from the bottom?
 It’s because of this CSS:</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 949px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
@@ -1025,21 +1023,21 @@ It’s because of this CSS:</p>
 <h3 id="dribbble-checkbox-component">Dribbble checkbox component</h3>
 <p>Another example of Dribbble is the checkbox component. The target size is limited to the checkbox height only, while its container is large and is indicated with a border.</p>
 <p>You might argue that this is just a container. For me, as a user, I assumed that the whole area was clickable.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-6.Z8j5Mmi__2tNkAn.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-6.Z8j5Mmi__Z2mL11L.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-6.Z8j5Mmi__2tNkAn.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-6.Z8j5Mmi__2tNkAn.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-6.Z8j5Mmi__Z2mL11L.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-6.Z8j5Mmi__2tNkAn.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>What I did is that I removed the padding from the outer container and added
 it instead to the checkbox itself.</p>
 <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.checkbox-toggle-content</span> <span class="token punctuation">{</span>
-  
+
 <span class="token punctuation">}</span>
 <span class="token selector">​ .checkbox-radio-label</span> <span class="token punctuation">{</span>
   <span class="token property">padding</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre>
-<picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-7.SIWrOZU2_ZdG2qR.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-7.SIWrOZU2_Z4ff5.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-7.SIWrOZU2_ZdG2qR.png" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-7.SIWrOZU2_ZdG2qR.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-7.SIWrOZU2_Z4ff5.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-7.SIWrOZU2_ZdG2qR.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>
 <p>Much better.</p>
 <h2 id="target-size-cheatsheet">Target size cheatsheet</h2>
 <p>I worked on a simple A4 cheatsheet that summarize the most important points in the article. It’s only for 7.00 USD and you can purchase it as a support for this guide.</p>
-<picture> <source srcset="https://ishadeed.com/_astro/poster.XewPyGAC_ZKt6B2.jpg" type="image/jpg"><source srcset="https://ishadeed.com/_astro/poster.XewPyGAC_ZORkpD.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/poster.XewPyGAC_ZKt6B2.jpg" alt="" loading="lazy" decoding="async"> </source></source></picture>
-<astro-island uid="ZrxhmJ" prefix="r70" component-url="https://ishadeed.com/_astro/CheatSheetButton.Zrqypjtr.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"CheatSheetButton","value":true}' await-children=""></astro-island>
+<p><picture> <source srcset="https://ishadeed.com/_astro/poster.XewPyGAC_ZKt6B2.jpg" type="image/jpg"><source srcset="https://ishadeed.com/_astro/poster.XewPyGAC_ZORkpD.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/poster.XewPyGAC_ZKt6B2.jpg" alt="" loading="lazy" decoding="async"> </source></source></picture>
+<astro-island uid="ZrxhmJ" prefix="r70" component-url="https://ishadeed.com/_astro/CheatSheetButton.Zrqypjtr.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"CheatSheetButton","value":true}' await-children=""></astro-island></p>
 <h2 id="outro">Outro</h2>
 <p>When I started working on this article, I hadn’t expected it to grow that large. I initially wanted to make an interactive guide about the clickable area, but after a lot of research, I decided to call it “Target size”.</p>
 <p>I already published about <a href="https://ishadeed.com/article/clickable-area/">this topic</a> five years ago, but felt the need to do it again, and I’m glad for that.</p>
@@ -1059,4 +1057,4 @@ it instead to the checkbox itself.</p>
 <li>The <a href="https://www.joshwcomeau.com/snippets/react-hooks/use-mouse-position/">useMousePosition</a> hook by Joshua Comeau</li>
 <li><a href="https://kld.dev/building-table-of-contents/">Astro table of contents</a> by Kevin Drum</li>
 <li>This <a href="https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/">article</a> by Costa Alexoglou on Smashing Magazine inspired me to the solution of safe triangles, but I used a clip-path instead.</li>
-</ul>
+</ul>

cache/2024/cd2fda3dae5d89990f73fbdaa1c3b491/index.md

@@ -2,5 +2,32 @@ title: build a world, not an audience
 url: https://keningzhu.com/journal/build-a-world-not-an-audience
 hash_url: cd2fda3dae5d89990f73fbdaa1c3b491
 archive_date: 2024-01-11
+og_image: http://static1.squarespace.com/static/51e8148de4b01c1eb79c1977/5682f162b204d5635670f310/65544de372845e682bf5a326/1700503191865/11.20_world_not_audience.jpg?format=1500w
+description: don’t chase your audience, let them find your world.
 
-<h2>build a world, not a marketing funnel  </h2><p class="">in this digital age where everyone wants to “monetize” something, you constantly find yourself inside a marketing funnels — filled with shiny things, and quick-fix promises, and slippery slopes. </p><p class=""><strong>marketing funnels are everywhere.</strong> </p><p class=""><strong>digital worlds are rare.</strong> </p><p class="">so here is my strategy: </p><p class="">instead of “building an audience,” build a world. build a digital garden-ecosystem, that exists — first and primarily — <em>for itself</em>. a world that doesn’t need likes, traffic, subscribers, or clicks  — in order to validate its existence. </p><p class="">build a world that the RIGHT people — your kindred people — will discover, will gravitate towards, and fall in love with. build a world that no one else can replicate, except you. </p><p class="">build a world expansive enough to HOLD your work, your multi-faceted spirit — <em>and</em> your audience. <br><br></p><p class=""><span><em>here’s my bold promise:</em></span> <br></p><h2>if you can build a rich digital world, then your right audience will find you.<br>everything else that you seek<br>will come easily.<br></h2><p class="">why? because when you have a digital world, then all of the things people chase, those external markers of success — <em>validation, visibility, connection, community, subscribers, money</em> — they are <em>easy, external byproducts of your internal process.</em></p><p class=""><strong><em>when you build a world, you’re creating from your power. </em></strong></p><p class=""><strong><em>success is a byproduct of your creative rituals &amp; process.</em></strong></p><p class="">instead of sharing something that will disappear on someone’s feed, focus, instead, on growing a digital garden on YOUR website, that belongs only to you. </p><p class="">instead of chasing an particular audience, and pandering to your assumption of their needs, focus on building a rich, thriving world that YOUR people will be drawn to, like sweet birds and bees that come visit your garden.  <br><br></p><h2>don’t chase, let them find your world</h2><p class="">I’ll be honest, this is not an easy path. this is not traditional marketing. this is not an ideal strategy for you — if you don’t like the idea of creation, and sharing it, day after day.  </p><p class="">this method took took me a few years to figure out, haphazardly, to realize that it works, and <em>finally</em>, to articulate it — to figure out WHY it works.  </p><p class="">along the way, I waded through my own cycles of overwhelm, resistance, ghosting, and bad marketing experiments. I’ve found that for me, <strong>focusing on</strong> <strong>world-building over audience-growing</strong> — is how creatives can do marketing in a way that is in highest service of inspiration and creative flow — rather than resisting it. <br><br>pour your energy into creating your world. </p><p class="">your world is everything. your world is the vessel that holds your ideas, thoughts, dreams, expressions, is what builds trust with strangers, magnetizes opportunities, creates deep connections, what invites and nurtures an audience, and ultimately, it is what makes you money. <br></p><h2>a metaphor for this strategy </h2><p class="">let me leave you with a metaphor to describe this way. </p><p class=""><em>don’t be a hunter-gatherer in the wild, competing for food.</em> </p><p class=""><em>go build yourself a magical forest-farm, and grow your garden of nourishing things. and wait. trust that the right people will come. </em></p><p class=""><em>when they do, be hospitable and kind to them. you will recognize them, and they will recognize you. </em></p><p class=""><em>they will want to come back, again and again, and linger for a while. in the meantime, keep growing your world. feed yourself, and have plenty of abundance left over — to feed your guests.</em></p>
+<h2>build a world, not a marketing funnel  </h2>
+<p class="">in this digital age where everyone wants to “monetize” something, you constantly find yourself inside a marketing funnels — filled with shiny things, and quick-fix promises, and slippery slopes. </p>
+<p class=""><strong>marketing funnels are everywhere.</strong> </p>
+<p class=""><strong>digital worlds are rare.</strong> </p>
+<p class="">so here is my strategy: </p>
+<p class="">instead of “building an audience,” build a world. build a digital garden-ecosystem, that exists — first and primarily — <em>for itself</em>. a world that doesn’t need likes, traffic, subscribers, or clicks  — in order to validate its existence. </p>
+<p class="">build a world that the RIGHT people — your kindred people — will discover, will gravitate towards, and fall in love with. build a world that no one else can replicate, except you. </p>
+<p class="">build a world expansive enough to HOLD your work, your multi-faceted spirit — <em>and</em> your audience. <br><br></p>
+<p class=""><span><em>here’s my bold promise:</em></span> <br></p>
+<h2>if you can build a rich digital world, then your right audience will find you.<br>everything else that you seek<br>will come easily.<br></h2>
+<p class="">why? because when you have a digital world, then all of the things people chase, those external markers of success — <em>validation, visibility, connection, community, subscribers, money</em> — they are <em>easy, external byproducts of your internal process.</em></p>
+<p class=""><strong><em>when you build a world, you’re creating from your power. </em></strong></p>
+<p class=""><strong><em>success is a byproduct of your creative rituals &amp; process.</em></strong></p>
+<p class="">instead of sharing something that will disappear on someone’s feed, focus, instead, on growing a digital garden on YOUR website, that belongs only to you. </p>
+<p class="">instead of chasing an particular audience, and pandering to your assumption of their needs, focus on building a rich, thriving world that YOUR people will be drawn to, like sweet birds and bees that come visit your garden.  <br><br></p>
+<h2>don’t chase, let them find your world</h2>
+<p class="">I’ll be honest, this is not an easy path. this is not traditional marketing. this is not an ideal strategy for you — if you don’t like the idea of creation, and sharing it, day after day.  </p>
+<p class="">this method took took me a few years to figure out, haphazardly, to realize that it works, and <em>finally</em>, to articulate it — to figure out WHY it works.  </p>
+<p class="">along the way, I waded through my own cycles of overwhelm, resistance, ghosting, and bad marketing experiments. I’ve found that for me, <strong>focusing on</strong> <strong>world-building over audience-growing</strong> — is how creatives can do marketing in a way that is in highest service of inspiration and creative flow — rather than resisting it. <br><br>pour your energy into creating your world. </p>
+<p class="">your world is everything. your world is the vessel that holds your ideas, thoughts, dreams, expressions, is what builds trust with strangers, magnetizes opportunities, creates deep connections, what invites and nurtures an audience, and ultimately, it is what makes you money. <br></p>
+<h2>a metaphor for this strategy </h2>
+<p class="">let me leave you with a metaphor to describe this way. </p>
+<p class=""><em>don’t be a hunter-gatherer in the wild, competing for food.</em> </p>
+<p class=""><em>go build yourself a magical forest-farm, and grow your garden of nourishing things. and wait. trust that the right people will come. </em></p>
+<p class=""><em>when they do, be hospitable and kind to them. you will recognize them, and they will recognize you. </em></p>
+<p class=""><em>they will want to come back, again and again, and linger for a while. in the meantime, keep growing your world. feed yourself, and have plenty of abundance left over — to feed your guests.</em></p>

cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/index.md

@@ -2,6 +2,8 @@ title: Daring Fireball: The Vision Pro
 url: https://daringfireball.net/2024/01/the_vision_pro
 hash_url: cd9184008ba5d9e4c9be4d0a0eea4f60
 archive_date: 2024-01-31
+og_image: https://daringfireball.net/graphics/df-wide-card.png
+description: A headset, a spatial productivity platform, and a personal entertainment device.
 
 <p>For the last six days, I’ve been simultaneously testing three entirely new products from Apple. The first is a VR/AR headset with eye-tracking controls. The second is a revolutionary spatial computing productivity platform. The third is a breakthrough personal entertainment device.</p>
 
@@ -241,4 +243,4 @@ defined rectangular borders. </p>
 
 <p>Spatial computing in VisionOS is the real deal. It’s a legit productivity computing platform right now, and it’s only going to get better. It sounds like hype, but I truly believe this is a landmark breakthrough like the 1984 Macintosh and the 2007 iPhone.</p>
 
-<p>But if you were to try just one thing using Vision Pro — just one thing — it has to be watching a movie in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your wallet.</p>
+<p>But if you were to try just one thing using Vision Pro — just one thing — it has to be watching a movie in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your wallet.</p>

cache/2024/ce5fdc61fd66cdb9ce548fb543eba986/index.md

@@ -2,6 +2,8 @@ title: Unsigned Commits
 url: https://blog.glyph.im/2024/01/unsigned-commits.html
 hash_url: ce5fdc61fd66cdb9ce548fb543eba986
 archive_date: 2024-01-25
+og_image: 
+description: Deciphering Glyph, the blog of Glyph Lefkowitz.
 
 <p>I am going to tell you why I don’t think you should sign your Git commits, even
 though doing so with SSH keys is now easier than ever.  But first, to
@@ -267,4 +269,4 @@ you’d like to read more of it, or you’d like to support my <a href="https://
 endeavors</a>, you can <a href="https://www.patreon.com/join/8655595">support me on Patreon as
 well</a>!  I am also <a href="mailto:consulting@glyph.im">available for
 consulting work</a> if you think your organization
-could benefit from expertise on topics such as “What <em>else</em> should I <em>not</em> apply a cryptographic signature to?”.</p>
+could benefit from expertise on topics such as “What <em>else</em> should I <em>not</em> apply a cryptographic signature to?”.</p>

cache/2024/d236f33cf82727313d17cb23bf36a395/index.md

@@ -2,11 +2,10 @@ title: Reconsider your partnership with Brave
 url: https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6
 hash_url: d236f33cf82727313d17cb23bf36a395
 archive_date: 2024-01-07
+og_image: 
+description: Brave, as you know, is led by Brendan Eich. s homophobia is so disgusting that he was forced to resign as the leader...
 
-Our goal is to provide best web results in the world. That means including as many sources of search results we can get (even if may not like them personally) and this increases our resilience and lowers dependence on any single one.
-
-We believe that Kagi users deserve to have the best search results in the world, from a wide range of diverse sources. This ensures that if you can not find something on Kagi, you can not find it anywhere else.
-
-We evaluated APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder personal political views was not a factor in this evaluation for this or any any provider we added (for betteor or worse) and merit of technology was the main factor. Politics finding its way into tech is one of the reasons we do not have innovation any more (edit: a lot of people quoted this sentence as offputting. That line was unfortunate and added in the heat of the debate. It had nothing to do with Brave and was a reflection of how I personally felt answering 100s of messages simultaneously.)
-
-We are primarly in the business of search and we'd like to stay focused on that.
+<p>Our goal is to provide best web results in the world. That means including as many sources of search results we can get (even if may not like them personally) and this increases our resilience and lowers dependence on any single one.</p>
+<p>We believe that Kagi users deserve to have the best search results in the world, from a wide range of diverse sources. This ensures that if you can not find something on Kagi, you can not find it anywhere else.</p>
+<p>We evaluated APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder personal political views was not a factor in this evaluation for this or any any provider we added (for betteor or worse) and merit of technology was the main factor. Politics finding its way into tech is one of the reasons we do not have innovation any more (edit: a lot of people quoted this sentence as offputting. That line was unfortunate and added in the heat of the debate. It had nothing to do with Brave and was a reflection of how I personally felt answering 100s of messages simultaneously.)</p>
+<p>We are primarly in the business of search and we'd like to stay focused on that.</p>

cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/index.md

@@ -2,6 +2,8 @@ title: plaisir d'ébauche
 url: https://www.la-grange.net/2024/01/06/ebauche
 hash_url: d75afc90a9d3c3b5a56b69446795fbb5
 archive_date: 2024-01-07
+og_image: 
+description: 
 
 <figure>
   <img src="https://www.la-grange.net/2024/01/06/3008-furikake.jpg" alt="Feuilles de céleri et de persil, finement hâchées avec du zeste de citron.">
@@ -98,4 +100,4 @@ archive_date: 2024-01-07
 <li>Manage working-time reductions</li>
 <li>Reshape provisioning systems</li>
 <li>Political feasibility and opposition</li>
-</ul>
+</ul>

cache/2024/da7e5578fd96fe31d46bfb207d041880/index.md

@@ -2,6 +2,8 @@ title: Redeployment Part One
 url: https://brr.fyi/posts/redeployment-part-one
 hash_url: da7e5578fd96fe31d46bfb207d041880
 archive_date: 2024-01-21
+og_image: https://brr.fyi/media/redeployment-part-one/redeployment-part-one-icon.jpg
+description: Sunrise at the bottom of the world. Preparing South Pole Station to welcome its first new arrivals in almost nine months.
 
 <p><em>This is part one of a multi-part series. Check out
     <a href="https://brr.fyi/posts/redeployment-part-two">part two</a> and
@@ -359,4 +361,4 @@ archive_date: 2024-01-21
   faces to Pole for the first time in 8.5 months!</p>
 <p><em>This is part one of a multi-part series. Check out
     <a href="https://brr.fyi/posts/redeployment-part-two">part two</a> and
-    <a href="https://brr.fyi/posts/redeployment-part-three">part three</a> next!</em></p>
+    <a href="https://brr.fyi/posts/redeployment-part-three">part three</a> next!</em></p>

cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/index.md

@@ -2,7 +2,9 @@ title: The UX of HTML ⚒ Nerd
 url: https://vasilis.nl/nerd/the-ux-of-html/
 hash_url: e5056f8e0e6acf87c5777ba5b3a2ba92
 archive_date: 2024-01-08
-	
+og_image: 
+description: 
+
 <p>Recently when I gave a coding assignment — an art directed web page about a font — a student asked: does it have to be <em>semantic and shit?</em> The whole class looked up, curious about the answer — <em>please let it be no!</em> I answered that no, it doesn’t have to be semantic and shit, but it does have to be well designed and the user experience should be well considered. Relieved, all of my students agreed. They do care about a good user experience.</p>
 <p><span id="more-2095"></span></p>
 <p>The joke here is, of course, that a well considered user experience starts with well considered <abbr title="HyperText Markup Language">HTML</abbr>.</p>
@@ -19,4 +21,4 @@ archive_date: 2024-01-08
 <p>Yes, I know that some sectioning elements actually have some <abbr>UX</abbr> attached to it. But not that much <abbr>UX</abbr> if you compare it to the real interactive elements. Not getting your heading levels right is not at all as destructive as using divs instead of links. </p>
 <p>Now, I’m not saying that we should stop teaching people about heading levels and sections. We shouldn’t. Heading levels and sections do things as well. But we should think about <em>when</em> we teach these more complicated and subtle parts of <abbr>HTML</abbr>. First we need to get people exited about <abbr>HTML</abbr> by showing all the free yet complex layers of <abbr>UX</abbr> you get when you use the interactive elements properly. And then, when they do understand the interactive elements, when they’re really excited and they ask for more, show them the more obscure <abbr>UX</abbr> patterns. You need a good idea of what <abbr>UX</abbr> <em>is</em> before you can understand things like <a href="https://webaim.org/projects/screenreadersurvey9/#finding">the option to nagivate through the headings on the page</a> with a screen reader. Without an idea of what <abbr>UX</abbr> means you cannot understand what landmarks do. First start with the obvious, then show the details.</p>
 <p>I am very much looking forward to 15 more years of web conferences and publications. I look forward to seeing inspiring talks about the <abbr>UX</abbr> of <abbr>HTML</abbr>. Talks about the incredible radio button and its wonderful <em>indeterminate</em> state! Talks about validating forms in a friendly way with just <abbr>HTML</abbr> and some clever <abbr title="Cascading StyleSheets">CSS</abbr>. Talks about the different context menus that appear on different elements. In other words, talks about what <abbr>HTML</abbr> <em>does</em>, and much less about what it <em>means in theory</em>. Let’s talk about user experience, and let’s stop talking about semantics and shit.</p>
-<p><em>This article was also posted <a href="https://www.htmhell.dev/adventcalendar/2023/1/">on the 2023 HTMHell advent calendar</a>.</em></p>
+<p><em>This article was also posted <a href="https://www.htmhell.dev/adventcalendar/2023/1/">on the 2023 HTMHell advent calendar</a>.</em></p>

cache/2024/e5c1ca8e3beeb0d256a064832c3566aa/index.md

@@ -2,6 +2,8 @@ title: The personality of a personal website
 url: https://manuelmoreale.com/the-personality-of-a-personal-website
 hash_url: e5c1ca8e3beeb0d256a064832c3566aa
 archive_date: 2024-01-11
+og_image: 
+description: With his “ I am a poem I am not software” post Robin touched on an interesting problem related to personal websites. I’m not going to summarise …
 
 <p>With his “<a href="https://robinrendle.com/notes/i-am-a-poem-i-am-not-software/" rel="noreferrer" target="_blank">I am a poem I am not software</a>” post <a href="https://manuelmoreale.com/thoughts/pb-robin-rendle">Robin</a> touched on an interesting problem related to personal websites. I’m not going to summarise Robin’s post because his writing is great and you should read his words on his blog. </p>
 <blockquote>
@@ -11,4 +13,4 @@ archive_date: 2024-01-11
 <p>So which one of these should my site represent? Should my site be the personal site of the Manu freelance web developer, with his interests in digital typography, minimal design, and simple websites? Or should represent the slightly competitive on the basketball court Manu, who doesn’t really care all that much about winning but is concerned about having fun? Or maybe it should represent Manu the romantic partner, with all his worry about the practical aspects of life but also full of affection for his partner? The list goes on and on.</p>
 <p>All of these "me" have a different way of communicating because they all live in different parts of my life. Which one should this site represent? Hard to say.</p>
 <p>Personal sites—and, more broadly, our digital lives—are a mirror of who we are. Some of us will try to neatly organize everything under one hyper-curated digital roof while others will scatter things around on 12 different domains and 24 services. Some will design a site for themselves and not touch it again for a decade while others will feel the need to redesign every 6 months. Those are all right answers to a question that doesn’t have wrong answers.</p>
-<p>A personal site is—or at least it should be—a reflection of whoever you want to be. It could be the complete you, one of the many versions of you, or even an aspirational you. Just be comfortable in your digital home. It’s all that matters.</p>
+<p>A personal site is—or at least it should be—a reflection of whoever you want to be. It could be the complete you, one of the many versions of you, or even an aspirational you. Just be comfortable in your digital home. It’s all that matters.</p>

cache/2024/e8748af541273328d9aa9f1aeb1087b2/index.md

@@ -2,6 +2,8 @@ title: Redeployment Part Three
 url: https://brr.fyi/posts/redeployment-part-three
 hash_url: e8748af541273328d9aa9f1aeb1087b2
 archive_date: 2024-01-21
+og_image: https://brr.fyi/media/redeployment-part-three/redeployment-part-three-icon.jpg
+description: Departing Antarctica after 446 days on-ice. Relaxing in Christchurch, then heading home. What an adventure!
 
 <p><em>This is the third and final part of a three-part series. Check out
     <a href="https://brr.fyi/posts/redeployment-part-one">part one</a> and <a href="https://brr.fyi/posts/redeployment-part-two">part two</a> if you haven’t already!</em></p>
@@ -422,4 +424,4 @@ archive_date: 2024-01-21
   </a>
 </p>
 <p><em>This is the third and final part of a three-part series. Check out
-    <a href="https://brr.fyi/posts/redeployment-part-one">part one</a> and <a href="https://brr.fyi/posts/redeployment-part-two">part two</a> if you haven’t already.</em></p>
+    <a href="https://brr.fyi/posts/redeployment-part-one">part one</a> and <a href="https://brr.fyi/posts/redeployment-part-two">part two</a> if you haven’t already.</em></p>

cache/2024/ea2cfc9aa425a6967d2cacd9f96ceb9e/index.md

@@ -1,80 +1,81 @@
-title: Ask LukeW: New Ways into Web Content
-url: https://lukew.com/ff/entry.asp?2008
-hash_url: ea2cfc9aa425a6967d2cacd9f96ceb9e
-archive_date: 2024-01-13
-
-<p class="feature">Large language (AI) models allow us to rethink how to build software and design user interfaces. To that end, we made use of these new capabilities to create a different way of interacting with this site at: <a href="https://ask.lukew.com">ask.lukew.com</a></p>
-
-<p>Though quiet recently, this site built up a <a href="https://www.lukew.com/ff/">decent amount</a> of content over the past 27 years. Specifically, there's nearly 2,000 text articles, 375 presentations, 60 videos, and 3 books worth of explorations and explanations about all forms of digital product design from early Web sites to Mobile apps to Augmented Reality experiences.</p>
-
-<p><a href="//static.lukew.com/ask_lukew_data_2x.png"><img src="//static.lukew.com/ask_lukew_data.png" srcset="//static.lukew.com/ask_lukew_data.png, //static.lukew.com/ask_lukew_data_2x.png 2x" alt="2,000 articles, 375 presentations, 57 videos on LukeW's site"></a>
-</p>
-
-<p>Anyone interested in these materials, has essentially two options: search or browse. Searching (primarily through Google) gets people to a specific article, presentation, or video when they have a sense of what they're looking for. Browsing (on this site or other sites with links to this one) helps people discover things they might not have been explicitly looking for.</p>
-
-<p>But with over half a million written words, three and a half thousand minutes of video, and thousands of images it's hard to know what's available, to connect related content, and ultimately get the most value out of this site.</p>
-
-<p><a href="//static.lukew.com/ask_lukew_data2_2x.png"><img src="//static.lukew.com/ask_lukew_data2.png" srcset="//static.lukew.com/ask_lukew_data2.png, //static.lukew.com/ask_lukew_data2_2x.png 2x" alt="Search or browse the content on LukeW Ideation and Design"></a>
-</p>
-
-<p>Enter <a href="https://www.computer.org/csdl/magazine/co/2022/05/09771130/1DeEYd2FXZm">large-scale AI models for language</a> (LLMs). By making use of these models to perform a variety of language operations, we can re-index the content on this site by concepts using embeddings, and generate new ways to interact with it.</p>
-
-<p>We make use of large-language models to:</p>
-<ul>
-<li>summarize articles</li>
-<li>extract key concepts from articles</li>
-<li>create follow-on questions to ask with specific articles</li>
-<li>make exploratory questions to expose people to new content</li>
-<li>generate answers in response to what people ask</li>
-</ul>
-<p>This combination of language operations adds up to a very different new way to experience the content on <a href="https://ask.lukew.com">lukew.com</a></p>
-
-<p><a href="//static.lukew.com/ask_lukew_questions_2x.png"><img src="//static.lukew.com/ask_lukew_questions.png" srcset="//static.lukew.com/ask_lukew_questions.png, //static.lukew.com/ask_lukew_questions_2x.png 2x" alt="Suggested questions in the Ask LukeW interface"></a>
-</p>
-
-<p><a href="https://ask.lukew.com">Ask LukeW</a> starts off with a series of suggested questions that change each time someone loads the page. This not only helps with the "what should I ask?" problem of empty text fields but is also a compelling way to explore what the site has to offer. Of course, someone can start with their own specific question. But in testing, many folks gravitate to the suggestions first, which helps expose people to more of the breadth and depth of available content.</p>
-
-<p><a href="//static.lukew.com/ask_lukew_answer2_2x.png"><img src="//static.lukew.com/ask_lukew_answer2.png" srcset="//static.lukew.com/ask_lukew_answer2.png, //static.lukew.com/ask_lukew_answer2_2x.png 2x" alt="Generated answers and visual sources in the Ask LukeW interface"></a>
-</p>
-
-<p>After someone selects a question or types their own question, we generate an answer using the corpus of information on lukew.com. These results tend to be more opinionated than what a large language model operating solely on a much bigger set of content (like the Web) provides, even with prompt engineering to direct it toward specific kinds of answers (i.e. UI design-focused).</p>
-
-<p><a href="//static.lukew.com/ask_lukew_corpus_2x.png"><img src="//static.lukew.com/ask_lukew_corpus.png" srcset="//static.lukew.com/ask_lukew_corpus.png, //static.lukew.com/ask_lukew_corpus_2x.png 2x" alt="Comparing answers from a fixed corpus to ChatGPT in the Ask LukeW interface"></a>
-</p>
-
-<p>The content we use to answer someone's question can come from one or more articles so we give provide visual sources to make this clear. In the current build, we're citing Web pages but PDFs and videos are next. It's also worth noting that we follow-up each answer with additional suggested questions to once again give people a better sense of what they can ask next. No dead ends.</p>
-
-<p><a href="//static.lukew.com/ask_lukew_objects_2x.png"><img src="//static.lukew.com/ask_lukew_objects.png" srcset="//static.lukew.com/ask_lukew_objects.png, //static.lukew.com/ask_lukew_objects_2x.png 2x" alt="Sources object cards from the Ask LukeW interface"></a>
-</p>
-
-<p>If someone wants to go deeper into any of the sourced materials, they can select the card and get an article-specific experience. Here we make use of LLM language operations to create a summary, extract related topics and provide suggested questions that the article can answer. People can ask questions of just this document (as indicated by the green article "chip" in the question bar) or go back to site-wide questions by tapping the close (x) icon.</p>
-
-<p><a href="//static.lukew.com/ask_lukew_article_2x.png"><img src="//static.lukew.com/ask_lukew_article.png" srcset="//static.lukew.com/ask_lukew_article.png, //static.lukew.com/ask_lukew_article_2x.png 2x" alt="Article specific features in  the Ask LukeW interface"></a>
-</p>
-
-<p>As the number of answers builds up, we collapse each one automatically, so people can focus on the current question they've asked. This also makes it easier to scroll through a long conversation and pick out answers from short summaries consisting of the question and the first two lines of its answer.</p>
-
-<p>People can also pin individual question and answer pairs to save them for later and come back to previous conversations in addition to making new ones using the menu bar on the left.</p>
-
-<p><a href="//static.lukew.com/ask_lukew_conversation_2x.png"><img src="//static.lukew.com/ask_lukew_conversation.png" srcset="//static.lukew.com/ask_lukew_conversation.png, //static.lukew.com/ask_lukew_conversation_2x.png 2x" alt="Conversation listing in the Ask LukeW interface"></a>
-</p>
-
-<p>While there's a number of features in the <a href="https://ask.lukew.com">Ask LukeW</a> interface, it's mostly a beta. We don't save state from question to question so the kind of ongoing dialog people may expect from <a href="https://openai.com/blog/chatgpt">ChatGPT</a> isn't there yet, pinned answers and saved conversations are only done locally (cookie-based) and as mentioned before, PDFs and videos aren't yet part of the index.</p>
-
-<p>Despite that, it's been interesting to explore how an existing body of content can gain new life using large-language model technology. I've been regularly surprised and interested by questions like:</p>
-
-<ul>
-<li>How can progressive enhancement be used in software development?
-</li><li>What are the central mental traits that people unconsciously display through the products they buy?</li>
-<li>What are the design considerations for touch-based apps for kids?</li>
-<li>What is small multiples and how can it help people make sense of large amounts of information quickly and easily?</li>
-<li>What is the debate around the utility of usability testing in design?</li>
-</ul>
-
-<p>And I wrote all this content! Since that happened across a quarter century, maybe it's not that surprising that I don't remember it all. Anyhow... hope you also enjoy trying out <a href="https://ask.lukew.com">ask.lukew.com</a> and feel free to <a href="https://www.lukew.com/about/">send</a> any ideas or comments over.</p>
-
-<h2>Further Reading</h2>
-
-
-<h2>Acknowledgments</h2>
-<p>Big thanks to <a href="https://liyangguang.com/">Yangguang Li</a> (front end), <a href="https://twitter.com/swissgrid">Thanh Tran</a> (design), and <a href="https://twitter.com/sampullara">Sam Pullara</a> (back end) in helping pull together this <a href="https://ask.lukew.com">exploration</a><a></a>.</p>
+title: Ask LukeW: New Ways into Web Content
+url: https://lukew.com/ff/entry.asp?2008
+hash_url: ea2cfc9aa425a6967d2cacd9f96ceb9e
+archive_date: 2024-01-13
+og_image: https://static.lukew.com/ask_lukew_data.png
+description: Large language (AI) models allow us to rethink how to build software and design user interfaces. To that end, we made use of these new capabilities to create a different way of interacting with this site
+
+<p class="feature">Large language (AI) models allow us to rethink how to build software and design user interfaces. To that end, we made use of these new capabilities to create a different way of interacting with this site at: <a href="https://ask.lukew.com">ask.lukew.com</a></p>
+
+<p>Though quiet recently, this site built up a <a href="https://www.lukew.com/ff/">decent amount</a> of content over the past 27 years. Specifically, there's nearly 2,000 text articles, 375 presentations, 60 videos, and 3 books worth of explorations and explanations about all forms of digital product design from early Web sites to Mobile apps to Augmented Reality experiences.</p>
+
+<p><a href="//static.lukew.com/ask_lukew_data_2x.png"><img src="//static.lukew.com/ask_lukew_data.png" srcset="//static.lukew.com/ask_lukew_data.png, //static.lukew.com/ask_lukew_data_2x.png 2x" alt="2,000 articles, 375 presentations, 57 videos on LukeW's site"></a>
+</p>
+
+<p>Anyone interested in these materials, has essentially two options: search or browse. Searching (primarily through Google) gets people to a specific article, presentation, or video when they have a sense of what they're looking for. Browsing (on this site or other sites with links to this one) helps people discover things they might not have been explicitly looking for.</p>
+
+<p>But with over half a million written words, three and a half thousand minutes of video, and thousands of images it's hard to know what's available, to connect related content, and ultimately get the most value out of this site.</p>
+
+<p><a href="//static.lukew.com/ask_lukew_data2_2x.png"><img src="//static.lukew.com/ask_lukew_data2.png" srcset="//static.lukew.com/ask_lukew_data2.png, //static.lukew.com/ask_lukew_data2_2x.png 2x" alt="Search or browse the content on LukeW Ideation and Design"></a>
+</p>
+
+<p>Enter <a href="https://www.computer.org/csdl/magazine/co/2022/05/09771130/1DeEYd2FXZm">large-scale AI models for language</a> (LLMs). By making use of these models to perform a variety of language operations, we can re-index the content on this site by concepts using embeddings, and generate new ways to interact with it.</p>
+
+<p>We make use of large-language models to:</p>
+<ul>
+<li>summarize articles</li>
+<li>extract key concepts from articles</li>
+<li>create follow-on questions to ask with specific articles</li>
+<li>make exploratory questions to expose people to new content</li>
+<li>generate answers in response to what people ask</li>
+</ul>
+<p>This combination of language operations adds up to a very different new way to experience the content on <a href="https://ask.lukew.com">lukew.com</a></p>
+
+<p><a href="//static.lukew.com/ask_lukew_questions_2x.png"><img src="//static.lukew.com/ask_lukew_questions.png" srcset="//static.lukew.com/ask_lukew_questions.png, //static.lukew.com/ask_lukew_questions_2x.png 2x" alt="Suggested questions in the Ask LukeW interface"></a>
+</p>
+
+<p><a href="https://ask.lukew.com">Ask LukeW</a> starts off with a series of suggested questions that change each time someone loads the page. This not only helps with the "what should I ask?" problem of empty text fields but is also a compelling way to explore what the site has to offer. Of course, someone can start with their own specific question. But in testing, many folks gravitate to the suggestions first, which helps expose people to more of the breadth and depth of available content.</p>
+
+<p><a href="//static.lukew.com/ask_lukew_answer2_2x.png"><img src="//static.lukew.com/ask_lukew_answer2.png" srcset="//static.lukew.com/ask_lukew_answer2.png, //static.lukew.com/ask_lukew_answer2_2x.png 2x" alt="Generated answers and visual sources in the Ask LukeW interface"></a>
+</p>
+
+<p>After someone selects a question or types their own question, we generate an answer using the corpus of information on lukew.com. These results tend to be more opinionated than what a large language model operating solely on a much bigger set of content (like the Web) provides, even with prompt engineering to direct it toward specific kinds of answers (i.e. UI design-focused).</p>
+
+<p><a href="//static.lukew.com/ask_lukew_corpus_2x.png"><img src="//static.lukew.com/ask_lukew_corpus.png" srcset="//static.lukew.com/ask_lukew_corpus.png, //static.lukew.com/ask_lukew_corpus_2x.png 2x" alt="Comparing answers from a fixed corpus to ChatGPT in the Ask LukeW interface"></a>
+</p>
+
+<p>The content we use to answer someone's question can come from one or more articles so we give provide visual sources to make this clear. In the current build, we're citing Web pages but PDFs and videos are next. It's also worth noting that we follow-up each answer with additional suggested questions to once again give people a better sense of what they can ask next. No dead ends.</p>
+
+<p><a href="//static.lukew.com/ask_lukew_objects_2x.png"><img src="//static.lukew.com/ask_lukew_objects.png" srcset="//static.lukew.com/ask_lukew_objects.png, //static.lukew.com/ask_lukew_objects_2x.png 2x" alt="Sources object cards from the Ask LukeW interface"></a>
+</p>
+
+<p>If someone wants to go deeper into any of the sourced materials, they can select the card and get an article-specific experience. Here we make use of LLM language operations to create a summary, extract related topics and provide suggested questions that the article can answer. People can ask questions of just this document (as indicated by the green article "chip" in the question bar) or go back to site-wide questions by tapping the close (x) icon.</p>
+
+<p><a href="//static.lukew.com/ask_lukew_article_2x.png"><img src="//static.lukew.com/ask_lukew_article.png" srcset="//static.lukew.com/ask_lukew_article.png, //static.lukew.com/ask_lukew_article_2x.png 2x" alt="Article specific features in  the Ask LukeW interface"></a>
+</p>
+
+<p>As the number of answers builds up, we collapse each one automatically, so people can focus on the current question they've asked. This also makes it easier to scroll through a long conversation and pick out answers from short summaries consisting of the question and the first two lines of its answer.</p>
+
+<p>People can also pin individual question and answer pairs to save them for later and come back to previous conversations in addition to making new ones using the menu bar on the left.</p>
+
+<p><a href="//static.lukew.com/ask_lukew_conversation_2x.png"><img src="//static.lukew.com/ask_lukew_conversation.png" srcset="//static.lukew.com/ask_lukew_conversation.png, //static.lukew.com/ask_lukew_conversation_2x.png 2x" alt="Conversation listing in the Ask LukeW interface"></a>
+</p>
+
+<p>While there's a number of features in the <a href="https://ask.lukew.com">Ask LukeW</a> interface, it's mostly a beta. We don't save state from question to question so the kind of ongoing dialog people may expect from <a href="https://openai.com/blog/chatgpt">ChatGPT</a> isn't there yet, pinned answers and saved conversations are only done locally (cookie-based) and as mentioned before, PDFs and videos aren't yet part of the index.</p>
+
+<p>Despite that, it's been interesting to explore how an existing body of content can gain new life using large-language model technology. I've been regularly surprised and interested by questions like:</p>
+
+<ul>
+<li>How can progressive enhancement be used in software development?
+</li><li>What are the central mental traits that people unconsciously display through the products they buy?</li>
+<li>What are the design considerations for touch-based apps for kids?</li>
+<li>What is small multiples and how can it help people make sense of large amounts of information quickly and easily?</li>
+<li>What is the debate around the utility of usability testing in design?</li>
+</ul>
+
+<p>And I wrote all this content! Since that happened across a quarter century, maybe it's not that surprising that I don't remember it all. Anyhow... hope you also enjoy trying out <a href="https://ask.lukew.com">ask.lukew.com</a> and feel free to <a href="https://www.lukew.com/about/">send</a> any ideas or comments over.</p>
+
+<h2>Further Reading</h2>
+
+<h2>Acknowledgments</h2>
+<p>Big thanks to <a href="https://liyangguang.com/">Yangguang Li</a> (front end), <a href="https://twitter.com/swissgrid">Thanh Tran</a> (design), and <a href="https://twitter.com/sampullara">Sam Pullara</a> (back end) in helping pull together this <a href="https://ask.lukew.com">exploration</a><a></a>.</p>

cache/2024/f4d2d42eba58062be910407690ae447c/index.md

@@ -2,6 +2,8 @@ title: The Web Component Success Story
 url: https://jakelazaroff.com/words/the-web-component-success-story/
 hash_url: f4d2d42eba58062be910407690ae447c
 archive_date: 2024-01-31
+og_image: https://jakelazaroff.com/og/the-web-component-success-story.png
+description: Web components won't take web development by storm, or show us the One True Way to build websites. What they will do is let us collectively build a rich ecosystem of dynamic components that work with any web stack.
 
 <p>Tom MacWright wrote a short post wondering <a class="link" href="https://macwright.com/2024/01/24/on-web-components" data-astro-cid-bi7aps5f>why we don’t see prominent applications using web components</a><a class="tooltip" data-tooltip href="https://macwright.com/2024/01/24/on-web-components" data-astro-cid-bi7aps5f>  <span class="title" data-astro-cid-bi7aps5f>On Web Components</span>  <span class="href" data-astro-cid-bi7aps5f> <img class="favicon" src="https://macwright.com/css/favicon.png" alt="" data-astro-cid-bi7aps5f> <span class="url" data-astro-cid-bi7aps5f>macwright.com/2024/01/24/on-web-components</span> <svg xmlns="http://www.w3.org/2000/svg" class="arrow"> <use href="/icons.svg#share"></use> </svg> </span> </a>.</p>
 <p>That’s a fair question!
@@ -93,4 +95,4 @@ They don’t need to dethrone JavaScript frameworks.
 We probably won’t even all learn how to write them!</p>
 <p>What web components <em>will</em> do — at least, I hope — is let us collectively build a rich ecosystem of dynamic components that work with any web stack.
 No more silos.
-That’s the web component success story.</p>
+That’s the web component success story.</p>

cache/2024/faa1d8cae94da6838ff9351e5df791ca/index.md

@@ -2,11 +2,11 @@ title: Make the indie web easier
 url: https://gilest.org/indie-easy.html
 hash_url: faa1d8cae94da6838ff9351e5df791ca
 archive_date: 2024-01-09
+og_image: 
+description: 
 
 <p><img src="https://gilest.org/2024/dangerously-muddy.jpg" alt="A sign in a forest: DANGER, TRACK DANGEROUSLY MUDDY, DO NOT ENTER"></p>
 
-
-
 <p>OK, developers, I have a challenge for you.</p>
 
 <p>I’ll assume that we’re all on board with the 2024 indie web revival. We all want things to <a href="https://www.rollingstone.com/culture/culture-commentary/internet-future-about-to-get-weird-1234938403/">get weird again</a>, right? Yeah.</p>
@@ -39,4 +39,4 @@ archive_date: 2024-01-09
 
 <p>This is not easy.</p>
 
-<p>If we <em>truly</em> want to open up the web for everyone to publish on, we have to make it easier. Let’s give people choices. Let’s give people options for tools they can set up and use, with no more knowledge than the knowledge they already have.</p>
+<p>If we <em>truly</em> want to open up the web for everyone to publish on, we have to make it easier. Let’s give people choices. Let’s give people options for tools they can set up and use, with no more knowledge than the knowledge they already have.</p>

cache/2024/fd6eda56671045e0c1e2d215e07f1a6f/index.md

@@ -2,6 +2,8 @@ title: EffVer: Version your code by the effort required to upgrade
 url: https://jacobtomlinson.dev/effver/
 hash_url: fd6eda56671045e0c1e2d215e07f1a6f
 archive_date: 2024-01-18
+og_image: https://jacobtomlinson.dev/f5AJKsQ_5492213727072396532_huc4b23cc59301979e6c26bd5595602176_0_babdb9b3327c14bb629a3288d379177b.png
+description: Version numbers are hard to get right. Semantic Versioning (SemVer) communicates backward compatibility via version numbers which often lead to a false sense of security and broken promises.
 
 <p>Version numbers are hard to get right. Semantic Versioning <a href="https://semver.org/">(SemVer)</a> communicates backward compatibility via version numbers which often lead to a <a href="https://hynek.me/articles/semver-will-not-save-you/">false sense of security and broken promises</a>. Calendar Versioning <a href="https://calver.org/">(CalVer)</a> sits at the other extreme of communicating almost <a href="https://jacobtomlinson.dev/posts/2023/sometimes-i-regret-using-calver/">no useful information at all</a>.</p>
 <p>Going forward I plan to version the projects I work on in a way that communicates <em>how much effort I expect a user will need to spend to adopt the new version</em>. I’m going to refer to that scheme as <strong>Intended Effort Versioning (<span>EffVer</span> for short)</strong>.</p>
@@ -57,7 +59,8 @@ archive_date: 2024-01-18
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl"><span class="gh"># Markdown
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>[<span class="nt">![EffVer Versioning</span>](<span class="na">https://img.shields.io/badge/version_scheme-EffVer-0097a7</span>)](https://jacobtomlinson.dev/effver)
-</span></span></code></pre></div><h2 id="background-and-history">Background and history</h2>
+</span></span></code></pre></div>
+<h2 id="background-and-history">Background and history</h2>
 <p>At PyCon UK in 2023 I gave a lightning talk based on my blog post <a href="https://jacobtomlinson.dev/posts/2023/sometimes-i-regret-using-calver/">“Sometimes I regret using CalVer”</a>. My talk was immediately followed by <a href="https://hynek.me/about/">Hynek Schlawack</a> who aside from creating great Python libraries like <a href="https://github.com/python-attrs/attrs"><code>attrs</code></a> and <a href="https://github.com/hynek/structlog"><code>structlog</code></a> is known for his blog post <a href="https://hynek.me/articles/semver-will-not-save-you/">“Semantic Versioning Will Not Save You”</a>.</p>
 <p>Interestingly many folks assumed that our dislike of different version schemes meant we vehemently disagreed with each other, but far from it. We totally agreed that the two most popular versioning schemes were imperfect and this resulted in some excellent post-conference pub discussion.</p>
 <p>Ever since then I’ve not been able to stop thinking “there has to be another option”.</p>
@@ -89,4 +92,4 @@ archive_date: 2024-01-18
 <h3 id="momentum">Momentum</h3>
 <p>The biggest challenge for switching version scheme is the momentum of other schemes in the ecosystem. SemVer is well established, and CalVer is also very common. Because of that <span>EffVer</span> is intentionally identical in structure to SemVer. This means that any tooling or process assumptions built around SemVer will work for <span>EffVer</span>.</p>
 <p>Any SemVer project can switch to <span>EffVer</span> by just changing how they decide the version number of the next release. If you try <span>EffVer</span> out and would prefer to go back to traditional semantics then switching back is also just the same process change.</p>
-<p>Switching to CalVer is more of a one way street, and although some languages have a <a href="https://packaging.python.org/en/latest/specifications/version-specifiers/#version-epochs">process for switching back</a> it’s not guaranteed to be a smooth ride. So if you ever do switch to CalVer can I suggest you use <code>YY.MM.DD</code> instead of <code>YYYY.MM.DD</code>, that way you could switch back to <span>EffVer</span>/SemVer and keep your <em>major</em> version number below 100.</p>
+<p>Switching to CalVer is more of a one way street, and although some languages have a <a href="https://packaging.python.org/en/latest/specifications/version-specifiers/#version-epochs">process for switching back</a> it’s not guaranteed to be a smooth ride. So if you ever do switch to CalVer can I suggest you use <code>YY.MM.DD</code> instead of <code>YYYY.MM.DD</code>, that way you could switch back to <span>EffVer</span>/SemVer and keep your <em>major</em> version number below 100.</p>

cache/2024/ff566a58892db07815a327802fea66d3/index.md

@@ -2,6 +2,8 @@ title: In Loving Memory of Square Checkbox
 url: https://tonsky.me/blog/checkbox/
 hash_url: ff566a58892db07815a327802fea66d3
 archive_date: 2024-01-28
+og_image: 
+description: History of checkboxes and radio buttons in user interfaces
 
 <p>This is a checkbox:</p>
 <figure>
@@ -96,4 +98,4 @@ archive_date: 2024-01-28
 <p>I therefore officially announce 2024 to be the year when the square checkbox has finally died.</p>
 <figure>
 <img src="https://tonsky.me/blog/checkbox/rip@2x.jpg?t=1706441704">        </figure>
-<p>Kids these days will use a toggle anyway.</p>
+<p>Kids these days will use a toggle anyway.</p>

cache/2024/ffaf50bf5d5e4cf870a618b518ee5ba7/index.md

@@ -2,224 +2,156 @@ title: Portable EPUBs
 url: https://willcrichton.net/notes/portable-epubs/
 hash_url: ffaf50bf5d5e4cf870a618b518ee5ba7
 archive_date: 2024-01-25
-
-Despite decades of advances in document rendering technology, most of the world's documents are stuck in the 1990s due to the limitations of PDF. Yet, modern document formats like HTML have yet to provide a competitive alternative to PDF. This post explores why this is the case, and proposes a way forward based on the EPUB format.
-
-## The Good and Bad of PDF
-
-PDF is the de facto file format for reading and sharing digital documents like papers, textbooks, and flyers. People use the PDF format for several reasons:
-
-* PDFs are self-contained. A PDF is a single file that contains all the images, fonts, and other data needed to render it. It's easy to pass around a PDF. A PDF is unlikely to be missing some critical dependency on your computer.
-* PDFs are rendered consistently. A PDF specifies precisely how it should be rendered, so a PDF author can be confident that a reader will see the same document under any conditions.
-* PDFs are stable over time. PDFs from decades ago still render the same today. PDFs have a relatively stable standard. PDFs cannot be easily edited.
-
-
-Yet, in the 32 years since the initial release of PDF, a lot has changed. People print out documents less and less. People use phones, tablets, and e-readers to read digital documents. The internet happened; web browsers now provide a platform for rendering rich documents. These changes have laid bare the limitations of PDF:
-
-* PDFs cannot easily adapt to different screen sizes. Most PDFs are designed to mimic 8.5x11" paper (or worse, 145,161 km2). These PDFs are readable on a computer monitor, but they are less readable on a tablet, and far less readable on a phone.
-* PDFs cannot be easily understood by programs. A plain PDF is just a scattered sequence of lines and characters. For accessibility, screen readers may not know which order to read through the text. For data extraction, scraping tables out of a PDF is an open area of research.
-* PDFs cannot easily express interaction. PDFs were primarily designed as static documents that cannot react to user input beyond filling in forms.
-
-
-These pros and cons can be traced back to one key fact: the PDF representation of a document is fundamentally unstructured. A PDF consists of commands like:
-
-* Move the cursor to the right by 0.5 inches.
-* Set the current font color to black.
-* Draw the text "Hello World" at the current position.
-
-
-PDF commands are unstructured because a document's organization is only clear to a person looking at the rendered document, and not clear from the commands themselves. Reflowing, accessibility, data extraction, and interaction all rely on programmatically understanding the structure of a document. Hence, these aspects are not easy to integrate with PDFs.
-
-This raises the question: how can we design digital documents with the benefits of PDFs but without the limitations?
-
-## Can't We Just Fix PDF?
-
-A simple answer is to improve the PDF format. After all, we already have billions of PDFs — why reinvent the wheel?
-
-The designers of PDF are well aware of its limitations. I carefully hedged each bullet with "easily", because PDF does make it possible to overcome each limitation, at least partially. PDFs can be annotated with their logical structure to create a tagged PDF. Most PDF exporters will not add tags automatically — the simplest option is to use Adobe's subscription-only Acrobat Pro, which provides an "Automatically tag PDF" action. For example, here is a recent paper of mine with added tags:
-A LaTeX-generated paper with automatically added tags.
-
-If you squint, you can see that the logical structure closely resembles the HTML document model. The document has sections, headings, paragraphs, and links. Adobe characterizes the logical structure as an accessibility feature, but it has other benefits. You may be surprised to know that Adobe Acrobat allows you to reflow tagged PDFs at different screen sizes. You may be unsurprised to know that reflowing does not always work well. For example:
+og_image: 
+description: A proposal for the next generation of portable documents.
+
+<p>Despite decades of advances in document rendering technology, most of the world's documents are stuck in the 1990s due to the limitations of PDF. Yet, modern document formats like HTML have yet to provide a competitive alternative to PDF. This post explores why this is the case, and proposes a way forward based on the EPUB format.</p>
+<h2>The Good and Bad of PDF</h2>
+<p>PDF is the de facto file format for reading and sharing digital documents like papers, textbooks, and flyers. People use the PDF format for several reasons:</p>
+<ul>
+<li>PDFs are self-contained. A PDF is a single file that contains all the images, fonts, and other data needed to render it. It's easy to pass around a PDF. A PDF is unlikely to be missing some critical dependency on your computer.</li>
+<li>PDFs are rendered consistently. A PDF specifies precisely how it should be rendered, so a PDF author can be confident that a reader will see the same document under any conditions.</li>
+<li>PDFs are stable over time. PDFs from decades ago still render the same today. PDFs have a relatively stable standard. PDFs cannot be easily edited.</li>
+</ul>
+<p>Yet, in the 32 years since the initial release of PDF, a lot has changed. People print out documents less and less. People use phones, tablets, and e-readers to read digital documents. The internet happened; web browsers now provide a platform for rendering rich documents. These changes have laid bare the limitations of PDF:</p>
+<ul>
+<li>PDFs cannot easily adapt to different screen sizes. Most PDFs are designed to mimic 8.5x11" paper (or worse, 145,161 km2). These PDFs are readable on a computer monitor, but they are less readable on a tablet, and far less readable on a phone.</li>
+<li>PDFs cannot be easily understood by programs. A plain PDF is just a scattered sequence of lines and characters. For accessibility, screen readers may not know which order to read through the text. For data extraction, scraping tables out of a PDF is an open area of research.</li>
+<li>PDFs cannot easily express interaction. PDFs were primarily designed as static documents that cannot react to user input beyond filling in forms.</li>
+</ul>
+<p>These pros and cons can be traced back to one key fact: the PDF representation of a document is fundamentally unstructured. A PDF consists of commands like:</p>
+<ul>
+<li>Move the cursor to the right by 0.5 inches.</li>
+<li>Set the current font color to black.</li>
+<li>Draw the text "Hello World" at the current position.</li>
+</ul>
+<p>PDF commands are unstructured because a document's organization is only clear to a person looking at the rendered document, and not clear from the commands themselves. Reflowing, accessibility, data extraction, and interaction all rely on programmatically understanding the structure of a document. Hence, these aspects are not easy to integrate with PDFs.</p>
+<p>This raises the question: how can we design digital documents with the benefits of PDFs but without the limitations?</p>
+<h2>Can't We Just Fix PDF?</h2>
+<p>A simple answer is to improve the PDF format. After all, we already have billions of PDFs — why reinvent the wheel?</p>
+<p>The designers of PDF are well aware of its limitations. I carefully hedged each bullet with "easily", because PDF does make it possible to overcome each limitation, at least partially. PDFs can be annotated with their logical structure to create a tagged PDF. Most PDF exporters will not add tags automatically — the simplest option is to use Adobe's subscription-only Acrobat Pro, which provides an "Automatically tag PDF" action. For example, here is a recent paper of mine with added tags:
+A LaTeX-generated paper with automatically added tags.</p>
+<p>If you squint, you can see that the logical structure closely resembles the HTML document model. The document has sections, headings, paragraphs, and links. Adobe characterizes the logical structure as an accessibility feature, but it has other benefits. You may be surprised to know that Adobe Acrobat allows you to reflow tagged PDFs at different screen sizes. You may be unsurprised to know that reflowing does not always work well. For example:
 A section of the paper in its default fixed layout. Note that the second paragraph is wrapped around the code snippet.
-The same section of the paper after reflowing to a smaller width. Note that the code is now interleaved with the second paragraph.
-
-In theory, these issues could be fixed. If the world's PDF exporters could be modified to include logical structure. If Adobe's reflowing algorithm could be improved to fix its edge cases. If the reflowing algorithm could be specified, and if Adobe were willing to release it publicly, and if it were implemented in each PDF viewer. And that doesn't even cover interaction! So in practice, I don't think we can just fix the PDF format, at least within a reasonable time frame.
-
-## The Good and Bad of HTML
-
-In the meantime, we already have a structured document format which can be flexibly and interactively rendered: HTML (and CSS and Javascript, but here just collectively referred to as HTML). The HTML format provides almost exactly the inverse advantages and disadvantages of PDF.
-
-* HTML can more easily adapt to different screen sizes. Over the last 20 years, web developers and browser vendors have created a wide array of techniques for responsive design.
-* HTML can be more easily understood by a program. HTML provides both an inherent structure plus additional attributes to support accessibility tools.
-* HTML can more easily express interaction. People have used HTML to produce amazing interactive documents that would be impossible in PDF. Think: Distill.pub, Explorable Explanations, Bartosz Ciechanowski, and Bret Victor, just to name a few.
-
-
-Again, these advantages are hedged with "more easily". One can easily produce a convoluted or inaccessible HTML document. But on balance, these aspects are more true than not compared to PDF. However, HTML is lacking where PDF shines:
-
-* HTML is not self-contained. HTML files may contain URL references to external files that may be hosted on a server. One can rarely download an HTML file and have it render correctly without an internet connection.
-* HTML is not always rendered consistently. HTML's dynamic layout means that an author may not see the same document as a reader. Moreover, HTML layout is not fully specified, so browsers may differ in their implementation.
-* HTML is not fully stable over time. Browsers try to maintain backwards compatibility (come on and slam!), but the HTML format is still evolving. The HTML standard is a "living standard" due to the rapidly changing needs and feature sets of modern browsers.
-
-
-So I've been thinking: how can we design HTML documents to gain the benefits of PDFs without losing the key strengths of HTML? The rest of this document will present some early prototypes and tentative proposals in this direction.
-
-## Self-Contained HTML with EPUB
-
-First, how can we make HTML documents self-contained? This is an old problem with many potential solutions. WARC, webarchive, and MHTML are all file formats designed to contain all the resources needed to render a web page. But these formats are more designed for snapshotting an existing website, rather than serving as a single source of truth for a web document. From my research, the most sensible format for this purpose is EPUB.
-
-EPUB is a "distribution and interchange format for digital publications and documents", per the EPUB 3 Overview. Reductively, an EPUB is a ZIP archive of web files: HTML, CSS, JS, and assets like images and fonts. On a technical level, what distinguishes EPUB from archival formats is that EPUB includes well-specified files that describe metadata about a document. On a social level, EPUB appears to be the HTML publication format with the most adoption and momentum in 2024, compared to moribund formats like Mobi.
-
-The EPUB spec has all the gory details, but to give you a rough sense, a sample EPUB might have the following file structure:
-
-    sample.epub
-    ├── META-INF
-    │   └── container.xml
-    └── EPUB
-        ├── package.opf
-        ├── nav.xhtml
-        ├── chapter1.xhtml
-        ├── chapter2.xhtml
-        └── img
-            └── sample.jpg
-
-An EPUB contains content documents (like chapter1.xhtml and chapter2.xhtml) which contain the core HTML content. Content documents can contain relative links to assets in the EPUB, like img/sample.jpg. The navigation document (nav.xhtml) provides a table of contents, and the package document (package.opf) provides metadata about the document. These files collectively define one "rendition" of the whole document, and the container file (container.xml) points to each rendition contained in the EPUB.
-
-The EPUB format optimizes for machine-readable content and metadata. HTML content is required to be in XML format (hence, XHTML). Document metadata like the title and author is provided in structured form in the package document. The navigation document has a carefully prescribed tag structure so the TOC can be consistently extracted.
-
-Overall, EPUB's structured format makes it a solid candidate for a single-file HTML document container. However, EPUB is not a silver bullet. EPUB is quite permissive in what kinds of content can be put into a content document.
-
-For example, a major issue for self-containment is that EPUB content can embed external assets. A content document can legally include an image or font file whose src is a URL to a hosted server. This is not hypothetical, either; as of the time of writing, Google Doc's EPUB exporter will emit CSS that will @include external Google Fonts files. The problem is that such an EPUB will not render correctly without an internet connection, nor will it render correctly if Google changes the URLs of its font files.
-
-Hence, I will propose a new format which I call a portable EPUB, which is an EPUB with additional requirements and recommendations to improve PDF-like portability. The first requirement is:
-Local asset requirement: All assets (like images, scripts, and fonts) embedded in a content document of a portable EPUB must refer to local files included in the EPUB. Hyperlinks to external files are permissible.
-
-## Consistency vs. Flexibility in Rendering
-
-There is a fundamental tension between consistency and flexibility in document rendering. A PDF is consistent because it is designed to render in one way: one layout, one choice of fonts, one choice of colors, one pagination, and so on. Consistency is desirable because an author can be confident that their document will look good for a reader (or at least, not look bad). Consistency has subtler benefits — because a PDF is chunked into a consistent set of pages, a passage can be cited by referring to the page containing the passage.
-
-On the other hand, flexibility is desirable because people want to read documents under different conditions. Device conditions include screen size (from phone to monitor) and screen capabilities (E-ink vs. LCD). Some readers may prefer larger fonts or higher contrasts for visibility, alternative color schemes for color blindness, or alternative font faces for dyslexia. Sufficiently flexible documents can even permit readers to select a level of detail appropriate for their background (here's an example).
-
-Finding a balance between consistency and flexibility is arguably the most fundamental design challenge in attempting to replace PDF with EPUB. To navigate this trade-off, we first need to talk about EPUB reading systems, or the tools that render an EPUB for human consumption. To get a sense of variation between reading systems, I tried rendering this post as an EPUB (without any styling, just HTML) on four systems: Calibre, Adobe Digital Editions, Apple Books, and Amazon Kindle. This is how the first page looks on each system (omitting Calibre because it looked the same as Adobe Digital Editions):
-
-* Adobe Digital Editions
-* Apple Books
-* Amazon Kindle
-
-Calibre and Adobe Digital Editions both render the document in a plain web view, as if you opened the HTML file directly in the browser. Apple Books applies some styling, using the New York font by default and changing link decorations. Amazon Kindle increases the line height and also uses my Kindle's globally-configured default font, Palatino.
-
-As you can see, an EPUB may look quite different on different reading systems. The variation displayed above seems reasonable to me. But how different is too different? For instance, I was recently reading A History of Writing on my Kindle. Here's an example of how a figure in the book renders on the Kindle:
-A figure in the EPUB version of A History of Writing on my Kindle
-
-When I read this page, I thought, "wow, this looks like crap." The figure is way too small (although you can long-press the image and zoom), and the position of the figure seems nonsensical. I found a PDF version online, and indeed the PDF's figure has a proper size in the right location:
-A figure in the PDF version of A History of Writing on my Mac
-
-This is not a fully fair comparison, but it nonetheless exemplifies an author's reasonable concern today with EPUB: what if it makes my document looks like crap?
-
-## Principles for Consistent EPUB Rendering
-
-I think the core solution for consistently rendering EPUBs comes down to this:
-
-* The document format (i.e., portable EPUB) needs to establish a subset of HTML (call it "portable HTML") which could represent most, but not all, documents.
-* Reading systems need to guarantee that a document within the subset will always look reasonable under all reading conditions.
-* If a document uses features outside this subset, then the document author is responsible for ensuring the readability of the document.
-
-
-If someone wants to write a document such as this post, then that person need not be a frontend web developer to feel confident that their document will render reasonably. Conversely, if someone wants to stuff the entire Facebook interface into an EPUB, then fine, but it's on them to ensure the document is responsive.
-
-For instance, one simple version of portable HTML could be described by this grammar:
-
-    Document ::= <article> Block* </article>
-    Block    ::= <p> Inline* </p> | <figure> Block* </figure>
-    Inline   ::= text | <strong> Inline* </strong>
-
-The EPUB spec already defines a comparable subset for navigation documents. I am essentially proposing to extend this idea for content documents, but as a soft constraint rather than a hard constraint. Finding the right subset of HTML will take some experimentation, so I can only gesture toward the broad solution here.
+The same section of the paper after reflowing to a smaller width. Note that the code is now interleaved with the second paragraph.</p>
+<p>In theory, these issues could be fixed. If the world's PDF exporters could be modified to include logical structure. If Adobe's reflowing algorithm could be improved to fix its edge cases. If the reflowing algorithm could be specified, and if Adobe were willing to release it publicly, and if it were implemented in each PDF viewer. And that doesn't even cover interaction! So in practice, I don't think we can just fix the PDF format, at least within a reasonable time frame.</p>
+<h2>The Good and Bad of HTML</h2>
+<p>In the meantime, we already have a structured document format which can be flexibly and interactively rendered: HTML (and CSS and Javascript, but here just collectively referred to as HTML). The HTML format provides almost exactly the inverse advantages and disadvantages of PDF.</p>
+<ul>
+<li>HTML can more easily adapt to different screen sizes. Over the last 20 years, web developers and browser vendors have created a wide array of techniques for responsive design.</li>
+<li>HTML can be more easily understood by a program. HTML provides both an inherent structure plus additional attributes to support accessibility tools.</li>
+<li>HTML can more easily express interaction. People have used HTML to produce amazing interactive documents that would be impossible in PDF. Think: Distill.pub, Explorable Explanations, Bartosz Ciechanowski, and Bret Victor, just to name a few.</li>
+</ul>
+<p>Again, these advantages are hedged with "more easily". One can easily produce a convoluted or inaccessible HTML document. But on balance, these aspects are more true than not compared to PDF. However, HTML is lacking where PDF shines:</p>
+<ul>
+<li>HTML is not self-contained. HTML files may contain URL references to external files that may be hosted on a server. One can rarely download an HTML file and have it render correctly without an internet connection.</li>
+<li>HTML is not always rendered consistently. HTML's dynamic layout means that an author may not see the same document as a reader. Moreover, HTML layout is not fully specified, so browsers may differ in their implementation.</li>
+<li>HTML is not fully stable over time. Browsers try to maintain backwards compatibility (come on and slam!), but the HTML format is still evolving. The HTML standard is a "living standard" due to the rapidly changing needs and feature sets of modern browsers.</li>
+</ul>
+<p>So I've been thinking: how can we design HTML documents to gain the benefits of PDFs without losing the key strengths of HTML? The rest of this document will present some early prototypes and tentative proposals in this direction.</p>
+<h2>Self-Contained HTML with EPUB</h2>
+<p>First, how can we make HTML documents self-contained? This is an old problem with many potential solutions. WARC, webarchive, and MHTML are all file formats designed to contain all the resources needed to render a web page. But these formats are more designed for snapshotting an existing website, rather than serving as a single source of truth for a web document. From my research, the most sensible format for this purpose is EPUB.</p>
+<p>EPUB is a "distribution and interchange format for digital publications and documents", per the EPUB 3 Overview. Reductively, an EPUB is a ZIP archive of web files: HTML, CSS, JS, and assets like images and fonts. On a technical level, what distinguishes EPUB from archival formats is that EPUB includes well-specified files that describe metadata about a document. On a social level, EPUB appears to be the HTML publication format with the most adoption and momentum in 2024, compared to moribund formats like Mobi.</p>
+<p>The EPUB spec has all the gory details, but to give you a rough sense, a sample EPUB might have the following file structure:</p>
+<pre><code>sample.epub
+├── META-INF
+│   └── container.xml
+└── EPUB
+    ├── package.opf
+    ├── nav.xhtml
+    ├── chapter1.xhtml
+    ├── chapter2.xhtml
+    └── img
+        └── sample.jpg
+</code></pre>
+<p>An EPUB contains content documents (like chapter1.xhtml and chapter2.xhtml) which contain the core HTML content. Content documents can contain relative links to assets in the EPUB, like img/sample.jpg. The navigation document (nav.xhtml) provides a table of contents, and the package document (package.opf) provides metadata about the document. These files collectively define one "rendition" of the whole document, and the container file (container.xml) points to each rendition contained in the EPUB.</p>
+<p>The EPUB format optimizes for machine-readable content and metadata. HTML content is required to be in XML format (hence, XHTML). Document metadata like the title and author is provided in structured form in the package document. The navigation document has a carefully prescribed tag structure so the TOC can be consistently extracted.</p>
+<p>Overall, EPUB's structured format makes it a solid candidate for a single-file HTML document container. However, EPUB is not a silver bullet. EPUB is quite permissive in what kinds of content can be put into a content document.</p>
+<p>For example, a major issue for self-containment is that EPUB content can embed external assets. A content document can legally include an image or font file whose src is a URL to a hosted server. This is not hypothetical, either; as of the time of writing, Google Doc's EPUB exporter will emit CSS that will @include external Google Fonts files. The problem is that such an EPUB will not render correctly without an internet connection, nor will it render correctly if Google changes the URLs of its font files.</p>
+<p>Hence, I will propose a new format which I call a portable EPUB, which is an EPUB with additional requirements and recommendations to improve PDF-like portability. The first requirement is:
+Local asset requirement: All assets (like images, scripts, and fonts) embedded in a content document of a portable EPUB must refer to local files included in the EPUB. Hyperlinks to external files are permissible.</p>
+<h2>Consistency vs. Flexibility in Rendering</h2>
+<p>There is a fundamental tension between consistency and flexibility in document rendering. A PDF is consistent because it is designed to render in one way: one layout, one choice of fonts, one choice of colors, one pagination, and so on. Consistency is desirable because an author can be confident that their document will look good for a reader (or at least, not look bad). Consistency has subtler benefits — because a PDF is chunked into a consistent set of pages, a passage can be cited by referring to the page containing the passage.</p>
+<p>On the other hand, flexibility is desirable because people want to read documents under different conditions. Device conditions include screen size (from phone to monitor) and screen capabilities (E-ink vs. LCD). Some readers may prefer larger fonts or higher contrasts for visibility, alternative color schemes for color blindness, or alternative font faces for dyslexia. Sufficiently flexible documents can even permit readers to select a level of detail appropriate for their background (here's an example).</p>
+<p>Finding a balance between consistency and flexibility is arguably the most fundamental design challenge in attempting to replace PDF with EPUB. To navigate this trade-off, we first need to talk about EPUB reading systems, or the tools that render an EPUB for human consumption. To get a sense of variation between reading systems, I tried rendering this post as an EPUB (without any styling, just HTML) on four systems: Calibre, Adobe Digital Editions, Apple Books, and Amazon Kindle. This is how the first page looks on each system (omitting Calibre because it looked the same as Adobe Digital Editions):</p>
+<ul>
+<li>Adobe Digital Editions</li>
+<li>Apple Books</li>
+<li>Amazon Kindle</li>
+</ul>
+<p>Calibre and Adobe Digital Editions both render the document in a plain web view, as if you opened the HTML file directly in the browser. Apple Books applies some styling, using the New York font by default and changing link decorations. Amazon Kindle increases the line height and also uses my Kindle's globally-configured default font, Palatino.</p>
+<p>As you can see, an EPUB may look quite different on different reading systems. The variation displayed above seems reasonable to me. But how different is too different? For instance, I was recently reading A History of Writing on my Kindle. Here's an example of how a figure in the book renders on the Kindle:
+A figure in the EPUB version of A History of Writing on my Kindle</p>
+<p>When I read this page, I thought, "wow, this looks like crap." The figure is way too small (although you can long-press the image and zoom), and the position of the figure seems nonsensical. I found a PDF version online, and indeed the PDF's figure has a proper size in the right location:
+A figure in the PDF version of A History of Writing on my Mac</p>
+<p>This is not a fully fair comparison, but it nonetheless exemplifies an author's reasonable concern today with EPUB: what if it makes my document looks like crap?</p>
+<h2>Principles for Consistent EPUB Rendering</h2>
+<p>I think the core solution for consistently rendering EPUBs comes down to this:</p>
+<ul>
+<li>The document format (i.e., portable EPUB) needs to establish a subset of HTML (call it "portable HTML") which could represent most, but not all, documents.</li>
+<li>Reading systems need to guarantee that a document within the subset will always look reasonable under all reading conditions.</li>
+<li>If a document uses features outside this subset, then the document author is responsible for ensuring the readability of the document.</li>
+</ul>
+<p>If someone wants to write a document such as this post, then that person need not be a frontend web developer to feel confident that their document will render reasonably. Conversely, if someone wants to stuff the entire Facebook interface into an EPUB, then fine, but it's on them to ensure the document is responsive.</p>
+<p>For instance, one simple version of portable HTML could be described by this grammar:</p>
+<pre><code>Document ::= &lt;article&gt; Block* &lt;/article&gt;
+Block    ::= &lt;p&gt; Inline* &lt;/p&gt; | &lt;figure&gt; Block* &lt;/figure&gt;
+Inline   ::= text | &lt;strong&gt; Inline* &lt;/strong&gt;
+</code></pre>
+<p>The EPUB spec already defines a comparable subset for navigation documents. I am essentially proposing to extend this idea for content documents, but as a soft constraint rather than a hard constraint. Finding the right subset of HTML will take some experimentation, so I can only gesture toward the broad solution here.
 Portable HTML rendering requirement: if a document only uses features in the portable HTML subset, then a portable EPUB reading system must guarantee that the document will render reasonably.
-Portable HTML generation principle: when possible, systems that generate portable EPUBs should output portable HTML.
-
-A related challenge is to define when a particular rendering is "good" or "reasonable", so one could evaluate either a document or a reading system on its conformance to spec. For instance, if document content is accidentally rendered in an inaccesible location off-screen, then that would be a bad rendering. A more aggressive definition might say that any rendering which violates accessibility guidelines is a bad rendering. Again, finding the right standard for rendering quality will take some experimentation.
-
-If an author is particularly concerned about providing a single "canonical" rendering of their document, one fallback option is to provide a fixed-layout rendition. The EPUB format permits a rendition to specify that it should be rendered in fixed viewport size and optionally a fixed pagination. A fixed-layout rendition could then manually position all content on the page, similar to a PDF. Of course, this loses the flexibility of a reflowable rendition. But an EPUB could in theory provide multiple renditions, offering users the choice of whichever best suits their reading conditions and aesthetic preferences.
-Fixed-layout fallback principle: systems that generate portable EPUBs can consider providing both a reflowable and fixed-layout rendition of a document.
-
-It's possible that the reading system, the document author, and the reader can each express preferences about how a document should render. If these preferences are conflicting, then the renderer should generally prioritize the reader over the author, and the author over the reading system. This is an ideal use case for the "cascading" aspect of CSS:
-Cascading styles principle: both documents and reading systems should express stylistic preferences (such as font face, font size, and document width) as CSS styles which can be overriden (e.g., do not use !important). The reading system should load the CSS rules such that the priority order is reading system styles < document styles < reader styles.
-
-## A Lighter EPUB Reading System
-
-The act of working with PDFs is relatively fluid. I can download a PDF, quickly open it in a PDF reading system like Preview, and keep or discard the PDF as needed. But EPUB reading systems feel comparatively clunky. Loading an EPUB into Apple Books or Calibre will import the EPUB into the application's library, which both copies and potentially decompresses the file. Loading an EPUB on a Kindle requires waiting several minutes for the Send to Kindle service to complete.
-
-Worse, EPUB reading systems often don't give you appropriate control over rendering an EPUB. For example, to emulate the experience of reading a book, most reading systems will chunk an EPUB into pages. A reader cannot scroll the document but rather "turn" the page, meaning textually-adjacent content can be split up between pages. Whether a document is paginated or scrolled should be a reader's choice, but 3/4 reading systems I tested would only permit pagination (Calibre being the exception).
-
-Therefore I decided to build a lighter EPUB reading system, Bene. You're using it right now. This document is an EPUB — you can download it by clicking the button in the top-right corner. The styling and icons are mostly borrowed from pdf.js. Bene is implemented in Tauri, so it can work as both a desktop app and a browser app. Please appreciate this picture of Bene running as a desktop app:
-The Bene reading system running as a desktop app. Wow! It works!
-
-Bene is designed to make opening and reading an EPUB feel fast and non-committal. The app is much quicker to open on my Macbook (<1sec) than other desktop apps. It decompresses files on-the-fly so no additional disk space is used. The backend is implemented in Rust and compiled to Wasm for the browser version.
-
-The general design goal of Bene is to embody my ideals for a portable EPUB reader. That is, a utilitarian interface into an EPUB that satisfies my additional requirements for portability. Bene allows you to configure document rendering by changing the font size (try the +/- buttons in the top bar) and the viewer width (if you're on desktop, move your mouse over the right edge of the document, and drag the handle). Long-term, I want Bene to also provide richer document interactions than a standard EPUB reader, which means we must discuss scripting.
-
-## Defensively Scripting EPUBs
-
-To some people, the idea of code in their documents is unappealing. Last time one of my document-related projects was posted to Hacker News, the top comment was complaining about dynamic documents. The sentiment is understandable — concerns include:
-
-* Bad code: your document shouldn't crash or glitch due to a failure in a script.
-* Bad browsers: your document shouldn't fail to render when a browser updates.
-* Bad actors: a malicious document shouldn't be able to pwn your computer.
-* Bad interfaces: a script shouldn't cause your document to become unreadable.
-
-
-Yet, document scripting provides many opportunities for improving how we communicate information. For one example, if you haven't yet, try hovering your mouse over any instance of the term portable EPUB (or long press it on a touch screen). You should see a tooltip appear with the term's definition. The goal of these tooltips is to simplify reading a document that contains a lot of specialized notation or terminology. If you forget a definition, you can quickly look it up without having to jump around.
-
-The key design challenge is how to permit useful scripting behaviors while limiting the downsides of scripting. One strategy is as follows:
-Structure over scripts principle: documents should prefer structural annotations over scripts where possible. Documents should rely on reading systems to utilize structure where possible.
-
-As an example of this principle, consider how the portable EPUB definition and references are expressed in this document:
+Portable HTML generation principle: when possible, systems that generate portable EPUBs should output portable HTML.</p>
+<p>A related challenge is to define when a particular rendering is "good" or "reasonable", so one could evaluate either a document or a reading system on its conformance to spec. For instance, if document content is accidentally rendered in an inaccesible location off-screen, then that would be a bad rendering. A more aggressive definition might say that any rendering which violates accessibility guidelines is a bad rendering. Again, finding the right standard for rendering quality will take some experimentation.</p>
+<p>If an author is particularly concerned about providing a single "canonical" rendering of their document, one fallback option is to provide a fixed-layout rendition. The EPUB format permits a rendition to specify that it should be rendered in fixed viewport size and optionally a fixed pagination. A fixed-layout rendition could then manually position all content on the page, similar to a PDF. Of course, this loses the flexibility of a reflowable rendition. But an EPUB could in theory provide multiple renditions, offering users the choice of whichever best suits their reading conditions and aesthetic preferences.
+Fixed-layout fallback principle: systems that generate portable EPUBs can consider providing both a reflowable and fixed-layout rendition of a document.</p>
+<p>It's possible that the reading system, the document author, and the reader can each express preferences about how a document should render. If these preferences are conflicting, then the renderer should generally prioritize the reader over the author, and the author over the reading system. This is an ideal use case for the "cascading" aspect of CSS:
+Cascading styles principle: both documents and reading systems should express stylistic preferences (such as font face, font size, and document width) as CSS styles which can be overriden (e.g., do not use !important). The reading system should load the CSS rules such that the priority order is reading system styles &lt; document styles &lt; reader styles.</p>
+<h2>A Lighter EPUB Reading System</h2>
+<p>The act of working with PDFs is relatively fluid. I can download a PDF, quickly open it in a PDF reading system like Preview, and keep or discard the PDF as needed. But EPUB reading systems feel comparatively clunky. Loading an EPUB into Apple Books or Calibre will import the EPUB into the application's library, which both copies and potentially decompresses the file. Loading an EPUB on a Kindle requires waiting several minutes for the Send to Kindle service to complete.</p>
+<p>Worse, EPUB reading systems often don't give you appropriate control over rendering an EPUB. For example, to emulate the experience of reading a book, most reading systems will chunk an EPUB into pages. A reader cannot scroll the document but rather "turn" the page, meaning textually-adjacent content can be split up between pages. Whether a document is paginated or scrolled should be a reader's choice, but 3/4 reading systems I tested would only permit pagination (Calibre being the exception).</p>
+<p>Therefore I decided to build a lighter EPUB reading system, Bene. You're using it right now. This document is an EPUB — you can download it by clicking the button in the top-right corner. The styling and icons are mostly borrowed from pdf.js. Bene is implemented in Tauri, so it can work as both a desktop app and a browser app. Please appreciate this picture of Bene running as a desktop app:
+The Bene reading system running as a desktop app. Wow! It works!</p>
+<p>Bene is designed to make opening and reading an EPUB feel fast and non-committal. The app is much quicker to open on my Macbook (&lt;1sec) than other desktop apps. It decompresses files on-the-fly so no additional disk space is used. The backend is implemented in Rust and compiled to Wasm for the browser version.</p>
+<p>The general design goal of Bene is to embody my ideals for a portable EPUB reader. That is, a utilitarian interface into an EPUB that satisfies my additional requirements for portability. Bene allows you to configure document rendering by changing the font size (try the +/- buttons in the top bar) and the viewer width (if you're on desktop, move your mouse over the right edge of the document, and drag the handle). Long-term, I want Bene to also provide richer document interactions than a standard EPUB reader, which means we must discuss scripting.</p>
+<h2>Defensively Scripting EPUBs</h2>
+<p>To some people, the idea of code in their documents is unappealing. Last time one of my document-related projects was posted to Hacker News, the top comment was complaining about dynamic documents. The sentiment is understandable — concerns include:</p>
+<ul>
+<li>Bad code: your document shouldn't crash or glitch due to a failure in a script.</li>
+<li>Bad browsers: your document shouldn't fail to render when a browser updates.</li>
+<li>Bad actors: a malicious document shouldn't be able to pwn your computer.</li>
+<li>Bad interfaces: a script shouldn't cause your document to become unreadable.</li>
+</ul>
+<p>Yet, document scripting provides many opportunities for improving how we communicate information. For one example, if you haven't yet, try hovering your mouse over any instance of the term portable EPUB (or long press it on a touch screen). You should see a tooltip appear with the term's definition. The goal of these tooltips is to simplify reading a document that contains a lot of specialized notation or terminology. If you forget a definition, you can quickly look it up without having to jump around.</p>
+<p>The key design challenge is how to permit useful scripting behaviors while limiting the downsides of scripting. One strategy is as follows:
+Structure over scripts principle: documents should prefer structural annotations over scripts where possible. Documents should rely on reading systems to utilize structure where possible.</p>
+<p>As an example of this principle, consider how the portable EPUB definition and references are expressed in this document:
 Creating a definition
-Referencing a definition
-
-The definition uses the `<dfn>` element wrapped in a custom `<dfn-container>` element to indicate the scope of the definition. The reference to the definition uses a standard anchor with an addition data-target attribute to emphasize that a definition is being linked. The document itself does not provide a script. The Bene reading system automatically detects these annotations and provides the tooltip interaction.
-
-## Encapsulating Scripts with Web Components
-
-But what if a document wants to provide an interactive component that isn't natively supported by the reading system? For instance, I have recently been working with The Rust Programming Language, a textbook that explains the different features of Rust. It contains a lot of passages like this one:
-
-This program first binds x to a value of 5. Then it creates a new variable x by repeating let x =, taking the original value and adding 1 so the value of x is then 6. Then, within an inner scope created with the curly brackets, the third let statement also shadows x and creates a new variable, multiplying the previous value by 2 to give x a value of 12. When that scope is over, the inner shadowing ends and x returns to being 6. When we run this program, it will output the following:
-
-A challenge in reading this passage is finding the correspondences between the prose and the code. An interactive code reading component can help you track those correspondences, like this (try mousing-over or clicking-on each sentence):
-
-The interactive code description component is used as follows:
-
-Again, the document content contains no actual script. It contains a custom element `<code-description>`, and it contains a series of annotations as spans and anchors. The `<code-description>` element is implemented as a web component.
-
-Web components are a programming model for writing encapsulated interactive fragments of HTML, CSS, and Javascript. Web components are one of many ways to write componentized HTML, such as React, Solid, Svelte, and Angular. I see web components as the most suitable as a framework for portable EPUBs because:
-
-* Web components are a standardized technology. Its key features like custom elements (for specifying the behavior of novel elements) and shadow trees (for encapsulating a custom element from the rest of the document) are part of the official HTML and DOM specifications. This improves the likelihood that future browsers will maintain backwards compatibility with web components written today.
-* Web components are designed for tight encapusulation. The shadow tree mechanism ensures that styling applied within a custom component cannot accidentally affect other components on the page.
-* Web components have a decent ecosystem to leverage. As far as I can tell, web components are primarily used by Google, which has created notable frameworks like Lit.
-* Web components provide a clear fallback mechanism. If a renderer does not support Javascript, or if a renderer loses the ability to render web components, then an HTML renderer will simply ignore custom tags and render their contents.
-
-
-Thus, I propose one principle and one requirement:
+Referencing a definition</p>
+<p>The definition uses the <code>&lt;dfn&gt;</code> element wrapped in a custom <code>&lt;dfn-container&gt;</code> element to indicate the scope of the definition. The reference to the definition uses a standard anchor with an addition data-target attribute to emphasize that a definition is being linked. The document itself does not provide a script. The Bene reading system automatically detects these annotations and provides the tooltip interaction.</p>
+<h2>Encapsulating Scripts with Web Components</h2>
+<p>But what if a document wants to provide an interactive component that isn't natively supported by the reading system? For instance, I have recently been working with The Rust Programming Language, a textbook that explains the different features of Rust. It contains a lot of passages like this one:</p>
+<p>This program first binds x to a value of 5. Then it creates a new variable x by repeating let x =, taking the original value and adding 1 so the value of x is then 6. Then, within an inner scope created with the curly brackets, the third let statement also shadows x and creates a new variable, multiplying the previous value by 2 to give x a value of 12. When that scope is over, the inner shadowing ends and x returns to being 6. When we run this program, it will output the following:</p>
+<p>A challenge in reading this passage is finding the correspondences between the prose and the code. An interactive code reading component can help you track those correspondences, like this (try mousing-over or clicking-on each sentence):</p>
+<p>The interactive code description component is used as follows:</p>
+<p>Again, the document content contains no actual script. It contains a custom element <code>&lt;code-description&gt;</code>, and it contains a series of annotations as spans and anchors. The <code>&lt;code-description&gt;</code> element is implemented as a web component.</p>
+<p>Web components are a programming model for writing encapsulated interactive fragments of HTML, CSS, and Javascript. Web components are one of many ways to write componentized HTML, such as React, Solid, Svelte, and Angular. I see web components as the most suitable as a framework for portable EPUBs because:</p>
+<ul>
+<li>Web components are a standardized technology. Its key features like custom elements (for specifying the behavior of novel elements) and shadow trees (for encapsulating a custom element from the rest of the document) are part of the official HTML and DOM specifications. This improves the likelihood that future browsers will maintain backwards compatibility with web components written today.</li>
+<li>Web components are designed for tight encapusulation. The shadow tree mechanism ensures that styling applied within a custom component cannot accidentally affect other components on the page.</li>
+<li>Web components have a decent ecosystem to leverage. As far as I can tell, web components are primarily used by Google, which has created notable frameworks like Lit.</li>
+<li>Web components provide a clear fallback mechanism. If a renderer does not support Javascript, or if a renderer loses the ability to render web components, then an HTML renderer will simply ignore custom tags and render their contents.</li>
+</ul>
+<p>Thus, I propose one principle and one requirement:
 Encapsulated scripts principle: interactive components should be implemented as web components when possible, or otherwise be carefully designed to avoid conflicting with the base document or other components.
-Components fallback requirement: interactive components must provide a fallback mechanism for rendering a reasonable substitute if Javascript is disabled.
-
-## Where To Go From Here?
-
-Every time I have told someone "I want to replace PDF", the statement has been met with extreme skepticism. Hopefully this document has convinced you that HTML-via-EPUB could potentially be a viable and desirable document format for the future.
-
-My short-term goal is to implement a few more documents in the portable EPUB format, such as my PLDI paper. That will challenge both the file format and the reading system to be flexible enough to support each document type. In particular, each document should look good under a range of reading conditions (screen sizes, font sizes and faces, etc.).
-
-My long-term goal is to design a document language that makes it easy to generate portable EPUBs. Writing XHTML by hand is not reasonable. I designed Nota before I was thinking about EPUBs, so its next iteration will be targeted at this new format.
-
-If you have any thoughts about how to make this work or why I'm wrong, let me know by email or Twitter or Mastodon or wherever this gets posted. If you would like to help out, please reach out! This is just a passion project in my free time (for now...), so any programming or document authoring assistance could provide a lot of momentum to the project.
-
-## But What About...
-
-A brief postscript for a few things I haven't touched on.
-
-...security? You might dislike the idea that document authors can run arbitrary Javascript on your personal computer. But then again, you presumably use both a PDF reader and a web browser on the daily, and those both run Javascript. What I'm proposing is not really any less secure than our current state of affairs. If anything, I'd hope that browsers are more battle-hardened than PDF viewers regarding code execution. Certainly the designers of EPUB reading systems should be careful to not give documents any additional capabilities beyond those already provided by the browser.
-
-...aesthetics? People often intuit that LaTeX-generated PDFs look prettier than HTML documents, or even prettier than PDFs created by other software. This is because Donald Knuth took his job very seriously. In particular, the Knuth-Plass line-breaking algorithm tends to produce better-looking justified text than whatever algorithm is used by browsers.
-
-There's two ways to make progress here. One is for browsers to provide more typography tools. Allegedly, text-wrap: pretty is supposed to help, but in my brief testing it doesn't seem to improve line-break quality. The other way is to pre-calculate line breaks, which would only work for fixed-layout renditions.
-
-...page citations? I think we just have to give up on citing content by pages. Instead, we should mandate a consistent numbering scheme for block elements within a document, and have people cite using that scheme. For example, Bene will auto-number all blocks. If you're on a desktop, try hovering your mouse in the left column next to the top-right of any paragraph.
+Components fallback requirement: interactive components must provide a fallback mechanism for rendering a reasonable substitute if Javascript is disabled.</p>
+<h2>Where To Go From Here?</h2>
+<p>Every time I have told someone "I want to replace PDF", the statement has been met with extreme skepticism. Hopefully this document has convinced you that HTML-via-EPUB could potentially be a viable and desirable document format for the future.</p>
+<p>My short-term goal is to implement a few more documents in the portable EPUB format, such as my PLDI paper. That will challenge both the file format and the reading system to be flexible enough to support each document type. In particular, each document should look good under a range of reading conditions (screen sizes, font sizes and faces, etc.).</p>
+<p>My long-term goal is to design a document language that makes it easy to generate portable EPUBs. Writing XHTML by hand is not reasonable. I designed Nota before I was thinking about EPUBs, so its next iteration will be targeted at this new format.</p>
+<p>If you have any thoughts about how to make this work or why I'm wrong, let me know by email or Twitter or Mastodon or wherever this gets posted. If you would like to help out, please reach out! This is just a passion project in my free time (for now...), so any programming or document authoring assistance could provide a lot of momentum to the project.</p>
+<h2>But What About...</h2>
+<p>A brief postscript for a few things I haven't touched on.</p>
+<p>...security? You might dislike the idea that document authors can run arbitrary Javascript on your personal computer. But then again, you presumably use both a PDF reader and a web browser on the daily, and those both run Javascript. What I'm proposing is not really any less secure than our current state of affairs. If anything, I'd hope that browsers are more battle-hardened than PDF viewers regarding code execution. Certainly the designers of EPUB reading systems should be careful to not give documents any additional capabilities beyond those already provided by the browser.</p>
+<p>...aesthetics? People often intuit that LaTeX-generated PDFs look prettier than HTML documents, or even prettier than PDFs created by other software. This is because Donald Knuth took his job very seriously. In particular, the Knuth-Plass line-breaking algorithm tends to produce better-looking justified text than whatever algorithm is used by browsers.</p>
+<p>There's two ways to make progress here. One is for browsers to provide more typography tools. Allegedly, text-wrap: pretty is supposed to help, but in my brief testing it doesn't seem to improve line-break quality. The other way is to pre-calculate line breaks, which would only work for fixed-layout renditions.</p>
+<p>...page citations? I think we just have to give up on citing content by pages. Instead, we should mandate a consistent numbering scheme for block elements within a document, and have people cite using that scheme. For example, Bene will auto-number all blocks. If you're on a desktop, try hovering your mouse in the left column next to the top-right of any paragraph.</p>

requirements.txt

@@ -1,5 +1,6 @@
 Jinja2==3.0.1
 Markdown==3.3.4
 httpx==0.19.0
+lassie==0.11.11
 minicli==0.5.0
 readability-lxml==0.8.1

templates/cache_article.md

@@ -2,5 +2,7 @@ title: {{ title }}
 url: {{ url }}
 hash_url: {{ hash_url }}
 archive_date: {{ archive_date }}
+og_image: {{ og_image }}
+description: {{ description }}
 
 {{ content }}