larlet-fr-david/david/2024/_sources/2024-02-19 - Injection.md

# Injection

> [en] It’s fun to think of ==other possible uses…== Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular `rel=stylesheet` link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for sure).
>
> <cite>*[HTML Includes That Work Today](https://www.filamentgroup.com/lab/html-includes/)*</cite>

J’ai cette page ouverte dans un onglet depuis littéralement des années. C’est [Alexis](https://blog.notmyidea.org/) qui me l’a rappelé en partageant [htmz](https://leanrada.com/htmz/) aujourd’hui qui va un tout petit peu plus loin.

Voilà le code en question :

```
<iframe 
  src="/static/david/2024/test-injection.html" 
  onload="
    this.before(
      (
        this.contentDocument.body||this.contentDocument
      ).children[0]
    );
    this.remove()
  " 
  hidden>
</iframe>
```

En résumé, on prend le code l’`iframe` et on l’injecte au chargement dans le document en cours. Voici un exemple (pas sûr que ça fonctionne depuis un agrégateur…) :

<iframe src="/static/david/2024/test-injection.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" hidden></iframe>

J’ai ajouté l’attribut `hidden` à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une `iframe` (sauf si vous avez une extension qui bloque les `iframe` bien sûr). Jusque là c’est [une forme d’inclusion](https://css-tricks.com/the-simplest-ways-to-handle-html-includes/) mais rien de bien utile.

Ce qui devient un peu plus fou serait de pouvoir injecter un *Web Component* de cette façon ! Le problème étant que le `this.remove()` est exécuté avant le chargement du script de l’`iframe`… et si on le retire on conserve cet élément `hidden` dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux fois.

<style>para-graph { background: paleturquoise; color: black; }</style>

<iframe src="/static/david/2024/test-injection-web-component.html" onload= "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.before(this.contentDocument.scripts[0])" hidden></iframe>

Il y a probablement des choses qui m’échappent mais il se fait tard.

*To be continued…*

---

Découvertes du jour : [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) et [globalThis](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis).

Aussi, il n’est [pas forcément indiqué](https://github.com/django/django/commit/b7f500396e05cd1f0bb8901fce16e2d8393d2779) de générer une `SECRET_KEY` avec Django, il vaut mieux le faire en Python directement :

```
[depuis un shell]

$ python3 -c 'import secrets; print(secrets.token_hex(100))'
```

---

> [en] So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because *ideas* matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, ==the more we need independent writing in order to think new thoughts in the future== — even if your words are getting dished up and plated by an algorithm.
> 
> <cite>*[What’s the fun in writing on the internet anymore?](https://jamesshelley.com/blog/writing-on-the-internet.html)*</cite>

Rester (et alimenter la machine) ou quitter (et laisser l’espace à la machine).

Je n’aime pas beaucoup la [métaphore de la forêt noire](https://maggieappleton.com/ai-dark-forest) ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore implique.

#apprentissage #laboratoire #web