ytnozto

GregorWedlich

_gregor_paul_

hello@sil3ntrunning.net

## JS: Intersection Observer

Source Code: https://codesandbox.io/p/sandbox/3vcjlj

  
Die Intersection Observer API bietet eine moderne und performante Methode, asynchron zu beobachten, wann ein Ziel-Element mit einem anderen Element – oder dem Viewport – interagiert. Diese Interaktion, also die Überschneidung, wird als Intersection bezeichnet.

Konkret lässt sich damit feststellen, ob ein Element (wie eine Textbox, ein Bild usw.) in den sichtbaren Bereich des Browserfensters (Viewport) eintritt und/oder diesen wieder verlässt. Dieses "andere Element", auch Root-Element genannt, ist standardmäßig der Viewport, kann aber auch ein spezifisches anderes DOM-Element sein, innerhalb dessen die Sichtbarkeit des Zielelements beobachtet werden soll.

## Hauptvorteil: Perfomance

Der entscheidende Vorteil des Intersection Observers ist seine Performance, die sich aus mehreren Schlüsselaspekten ergibt:

- Asynchrone Ausführung: Beobachtungen und die Ausführung der zugehörigen Logik finden abseits des Hauptthreads des Browsers statt. Das bedeutet, dass Animationen und andere Interaktionen auf der Seite flüssig bleiben, da der Hauptthread nicht blockiert wird.
- Deklarativer Ansatz: Anstatt ständig manuell Berechnungen wie mit [getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) in Schleifen durchzuführen und Polling zu betreiben, teilen wir dem Browser deklarativ mit, welche Elemente wir beobachten möchten. Der Browser informiert uns dann ereignisgesteuert, wenn eine relevante Überschneidung stattfindet.
- Energieeffizienz: Durch die Vermeidung von rechenintensiven Dauerabfragen und die effiziente Nutzung von Browser-Interna wird der Energieverbrauch reduziert. Dies kommt insbesondere Mobilgeräten und deren Akkulaufzeit zugute.

Vor der Einführung des Intersection Observers waren Entwickler:innen oft auf Methoden wie getBoundingClientRect(), komplexe Schleifenkonstrukte und Event-Handler angewiesen, um die Sichtbarkeit von Elementen zu prüfen. Dieser Ansatz führte häufig zu spürbaren Performance-Problemen und einer ruckelnden Benutzererfahrung.

Der Intersection Observer ermöglicht es uns also, auf elegante Weise zu erfahren, wann Elemente sichtbar werden oder den sichtbaren Bereich wieder verlassen. Dies ist die Grundlage für viele moderne Web-Features. Typische Anwendungsfälle sind beispielsweise das verzögerte Laden von Bildern (Lazy Loading), das Auslösen von Animationen beim Erreichen des sichtbaren Bereichs oder das Implementieren von Infinite-Scrolling-Funktionalitäten. Wie wir solche Interaktionen mithilfe einer Callback-Funktion im Detail umsetzen, schauen wir uns im folgenden Beispiel genauer an.

## Beispiel Observer

Wir demonstrieren den Intersection Observer nun anhand einiger vertikal angeordneter Boxen, die erst beim Scrollen in den sichtbaren Bereich gelangen.

<iframe src="https://codesandbox.io/embed/3vcjlj?view=preview&module=%2Fsrc%2Findex.html"
     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
     title="intersection-observer-ex1"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

**Hier gehts zun source code:** https://codesandbox.io/p/sandbox/3vcjlj
  
##### Unsere Boxen:

```html
    <div id="app">
      <div class="wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>
```

**Den CSS-Code für das Styling der Boxen lassen wir hier aus. Das vollständige, lauffähige Beispiel inklusive CSS findest du unter diesem [Link](https://codesandbox.io/p/sandbox/3vcjlj).**

##### Wir holen uns alle Boxen und speichern diese in einer Variable namens boxes

```js
const boxes = document.querySelectorAll(".box");
```

##### Als nächstes erstellen wir den Observer mit unserer Callback Funktion

```js
const observer = new IntersectionObserver((entries) => {
  console.log(entries);
});
```

Die Funktion, die wir IntersectionObserver übergeben, ist unsere Callback-Funktion. Sie wird immer dann aufgerufen, wenn sich der Überschneidungsstatus eines oder mehrerer beobachteter Elemente ändert. Das Argument entries ist ein Array von IntersectionObserverEntry-Objekten, wobei jedes Objekt Informationen über die Überschneidung eines bestimmten Zielelements enthält.

#####  Dann rufen wir für jedes unserer Boxen den Observer mit observe() auf und können damit überwachen wann ein element im Viewport landet.

```js
for (const box of boxes) {
  observer.observe(box);
}
```

Unser console.log(entries) wird direkt nach dem Aufruf von observer.observe(box) für jede Box einmal ausgeführt. Der Observer meldet also initial den aktuellen Überschneidungsstatus aller beobachteten Elemente. Wenn unsere Boxen zu Beginn außerhalb des sichtbaren Bereichs sind, liefert dies für jede Box einen Eintrag.

![Intersection-Observer-Entries](/uploads/Screenshot_2025_05_26_at_12_52_34_559999351c.png)

Jedes IntersectionObserverEntry-Objekt in unserem entries-Array enthält nützliche Informationen. Die wichtigsten davon sind: 

- target: Das DOM-Element, dessen Überschneidung sich geändert hat.
- isIntersecting: Ein Boolean, der true ist, wenn das target-Element den Root (standardmäßig den Viewport) überschneidet, andernfalls false.
- intersectionRatio: Ein Wert zwischen 0.0 und 1.0, der angibt, welcher Anteil des target-Elements sichtbar ist.
- boundingClientRect: Gibt die Größe und Position des target-Elements relativ zum Viewport an.
- rootBounds: Gibt die Größe und Position des Root-Elements an.
- intersectionRect: Gibt die Größe und Position des sichtbaren Teils des target-Elements an.

![intersection-observer-entries-detail-false](/uploads/Screenshot_2025_05_26_at_12_53_54_a4f1594a49.png)

Für unser einfaches Beispiel konzentrieren wir uns zunächst auf den Key isIntersecting. Wenn unsere Boxen, wie im Beispiel angenommen, initial außerhalb des Viewports liegen, wird isIntersecting für jede Box false sein.

Sobald wir jetzt aber die erste Box in den sichtbaren Bereich scrollen, wird isIntersecting zu true.

![Intersection Observer isIntersecting true](/uploads/Screenshot_2025_05_26_at_12_56_45_974d4345f2.png)

Und das ist es auch schon, wir könnten jetzt Animation triggern oder andere events auf unserer Box ausführen. Ein kleines Beispiel wir hängen unseren boxen sobald diese im Viewport sind eine CSS-Klasse an und färben unsere Box grün solange diese im viewport ist.

```js
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("is-visible");
    } else {
      entry.target.classList.remove("is-visible");
    }
  });
});
```

#####  Optionen

Manchmal möchte mann aber vielleicht nicht den Viewport des Browsers als root element verwenden oder man möchte das eine Animation erst ausgelöst wird wenn ein Element 50% im sichbaren bereich ist. Das lässt sich erreichen in dem wir unserem Observer ein paar Optionen mitgeben.

```js
const options = {
  root: null, // Viewport als Referenz verwenden
  rootMargin: "0px", // Kein zusätzlicher Rand
  threshold: 0.5 // Auslösen, wenn 50% sichtbar
};
```

```js
const observer = new IntersectionObserver((entries) => {
  console.log(entries);
}, options); // Wir hängen unsere optionen an den Observer
```

Jetzt wird isIntersecting  erst zu true wenn unser Element zu 50% im Viewport liegt.

##### Fazit:

Ich hoffe, ich konnte in diesem Beitrag verdeutlichen, dass der Intersection Observer eine gute Weiterentwicklung für die Beobachtung der Sichtbarkeit von Elementen im Browser darstellt. Er bietet eine elegante und vor allem performante Lösung für Aufgaben, die zuvor oft mit komplexen und ressourcenintensiven Methoden bewältigt werden mussten.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example

Mit dem Intersection Observer kannst du Elemente im Blick behalten – schnell, effizient und ressourcenschonend.

intersection-observer-api

Elemente überwachen - ganz ohne Blockierung des Hauptthreads

Intersection Observer API

javascript

Erfahre, wie Next.js Server Actions und Tanstack Query deine Todo-App mit schnellem Datenmanagement und sicheren Mutationen!!

tanstack-query-server-actions-next.png

Das Dream-Team für dein Datenmanagement?

Next.js Server Actions & Tanstack Query

TanStackQuery

next.js

react

Ich bin aktuell ziemlich angetan von Deno und dessen Ökosystem. Seit Version 2 vor einigen Tagen erschienen ist, habe ich mich intensiver mit den verschiedenen Aspekten von Deno beschäftigt. Unter anderem habe ich den Package Manager JSR erkundet, der unabhängig arbeitet und nicht auf Deno selbst angewiesen ist, aber dennoch das gesamte Deno-Ökosystem ergänzt. In diesem kurzen Tutorial möchte ich dir einen Überblick geben, wie einfach es ist, eigene JSR-Pakete zu veröffentlichen.

## Projekt erstellen

Um zu starten, initialisiere dein Projekt mit folgendem Befehl:

```bash
deno init orakel-otter // Unser beispiel Projektname
```
## Projekt öffnen

Wechsel in das Projektverzeichnis:
```bash
cd orakel-otter
```

## Aufräumen

Für dieses Tutorial können wir die Datei main_test.ts löschen. Es ist jedoch auch in Ordnung, sie zu behalten. Öffne jetzt die `main.ts` und entferne den boilerplate Code.

## Unsere App erstellen

Ich habe hier ein einfaches Programm, das die aktuellen Bitcoin-Preise von einer API abruft. Mir ist nichts Besseres eingefallen, aber es dient dazu, zu veranschaulichen, wie das Veröffentlichen von JSR-Paketen mit Deno 2 funktioniert. Ich habe es 🦦 Orakel Otter 🔮 genannt, warum auch immer :-)

Hier ist unser Programm, das die aktuellen Bitcoin-Preise von einer API abruft:
```typescript
type Response = [string, number][];

async function orakelOtter(currency: string = "ALL"): Promise<Response> {
  try {
    const response = await fetch("https://mempool.space/api/v1/prices/");
    const pricesObj = await response.json();
    const prices = Object.entries(pricesObj);

    if (currency === "ALL") {
      return prices as Response;
    }

    const filteredPrice = prices.filter(
      (price) => price[0] === currency?.toUpperCase()
    );

    if (filteredPrice.length > 0) {
      return [...prices[0], filteredPrice[0]] as Response;
    } else {
      throw new Error(`Currency ${currency} not found.`);
    }
  } catch (error) {
    console.error(error);
    return [];
  }
}

const getPrice = await orakelOtter();
console.log(getPrice);
```

**Führe folgenden Befehl aus, um das Programm zu testen:**

```bash
deno task dev
```
Das Terminal wird um Erlaubnis bitten, auf das Netzwerk zuzugreifen. Bestätige dies mit y:
```bash
Watcher File change detected! Restarting!
┏ ⚠️  Deno requests net access to "mempool.space:443".
┠─ Requested by `fetch()` API.
┠─ Learn more at: https://docs.deno.com/go/--allow-net
┠─ Run again with --allow-net to bypass this prompt.
┗ Allow? [y/n/A] (y = yes, allow; n = no, deny; A = allow all net permissions) > y
```
Sobald der Zugriff gewährt ist, solltest du eine Ausgabe wie diese sehen:
```bash
✅ Granted net access to "mempool.space:443".
[
  [ "time", 1728830104 ],
  [ "USD", 62513 ],
  [ "EUR", 57121 ],
  [ "GBP", 47771 ],
  [ "CAD", 86060 ],
  [ "CHF", 53563 ],
  [ "AUD", 92464 ],
  [ "JPY", 9344100 ]
]
```
## Projekt zur Veröffentlichung auf JSR.IO vorbereiten

Um das Paket auf JSR.IO zu veröffentlichen, benötigst du ein Konto. Nach dem Einloggen gehst du auf dein Profilbild, wählst „+ Ein Paket veröffentlichen“ und erstellst einen Scope. Zum Beispiel kannst du deine Initialen als Scope verwenden. Danach benennst du dein Paket "orakel-otter" (oder wie auch immer du dein Projekt genannt hast) und klickst auf „Create“.

## Codeanpassungen

Vor der Veröffentlichung müssen wir uns noch die main.ts anpassen und eine Dokumentation hinzufügen.

In der main.ts nehmen wir folgende Änderungen vor:

1.	Entferne die console.log()-Zeile und die Instanzierung.
```typescript
const getPrice = await orakelOtter();
console.log(getPrice);
```
2.	Füge export zur orakelOtter-Funktion hinzu, damit sie als Modul zugänglich ist.
3.	Füge eine Dokumentation zur Funktion hinzu, was optional ist, aber für einen besseren JSR-Score empfohlen wird.
```typescript
/**
 * Fetches the current prices for various currencies from the Mempool.space API.
 *
 * @param currency - The currency (USD, EUR, GBP, CAD, CHF, AUD, JPY) to filter the prices for. If not provided, returns all available prices.
 * @returns An array of tuples, where the first element is the currency code and the second element is the current price.
 * @throws {Error} If the specified currency is not found in the API response.
 */
export async function orakelOtter(currency: string = "ALL"): Promise<Response> {
  // Funktion bleibt unverändert
}
```
4.	Aktualisiere die deno.json-Datei mit den erforderlichen Feldern: name, version und exports. Inklusive Lizenz (optional):
```bash
{
  "name": "@gw/orakel-otter",
  "version": "0.0.1",
  "license": "MIT",
  "exports": "./main.ts"
}
```
Der Name muss den Scope und den Paketname beinhalten **(@gw/orakel-otter)**, die Version muss dem SemVer-Format folgen.

## Paket veröffentlichen

Die Veröffentlichung kann über die CLI oder GitHub Actions erfolgen. Für dieses Tutorial verwenden wir die CLI.

Führe einen Testlauf durch, um sicherzustellen, dass alles korrekt eingerichtet ist:
```bash
deno publish --dry-run
```
Wenn der Testlauf erfolgreich ist, veröffentliche nun dein Paket in dem du den Befehl ohne `--dry-run` ausführst:

```bash
deno publish
```
Nun wirst du Automatisch zu deinem Default Browser weitergeleitet um dich zu authentifizieren, hier jetzt die bestätigen das alles ok ist und dein Paket wird veröffentlicht! Und das wars auch schon, dein erstes JSR Package wurde veröffentlicht :-)

## Fazit

Dieses Tutorial deckt nicht alle Details ab, geht aber auf die wichtigsten Punkte ein, um ein Paket auf JSR.io zu veröffentlichen. Beachte, dass JSR Pakete basierend auf verschiedenen Kriterien bewertet, die zum „JSR-Score“ beitragen. Ziel ist es, eine gute Dokumentation und Best Practices einzuhalten, um eine hohe Punktzahl zu erreichen. Ein gut dokumentiertes Paket kann dir wie in meinem Beispiel eine Bewertung von 94 Punkten einbringen!

**Weitere Details findest du in den folgenden Dokumentationen**

[JSR Documentation](https://jsr.io/docs/publishing-packages)

[Deno Documentation](https://docs.deno.com/runtime/reference/cli/publish/)

**Ryan Dahl der gründer von Nodejs und Deno über die neue Version Deno 2:**
[Rayen Dahl about Deno 2](https://www.youtube.com/watch?v=d35SlRgVxT8)

**Nützliche Links:**

[Project on GitHub](https://github.com/GregorWedlich/orakel-otter)

[Project on jsr.io](https://jsr.io/@gw/orakel-otter)



Wir lernen, wie man mit Deno 2 ein Paket auf JSR.io veröffentlicht.

jsr-deno-2.png

mit Deno 2

 Wie du ein Paket auf JSR.io veröffentlichts

deno

metropolis.png

Prinz_Monty_Coding_Future_Hacking_Binary_Website_Header_fe5f75f_1f86cac2-9fc0-4294-bcaf-dfe0dd968a98.png

SSH-Keys-Config-ed25519.png

Invalid-Regular-Expression-Image.png

oh-my-zsh-mid.png

Ice cream gingerbread danish muffin cheesecake icing tiramisu.

Biscuit dessert sweet roll cupcake sweet. Halvah jelly apple pie oat cake gummi bears marshmallow. Powder jujubes pudding gummies donut chocolate bar candy canes. Biscuit danish icing jujubes gummi bears dragée. 

CODING LIFE AND EVERYTHING & MEISTENS AUF DEUTSCH

Hallo Hello היי Hola Привіт Salut أهلاً 你好 Ciao

Intersection Observer API

Elemente überwachen - ganz ohne Blockierung des Hauptthreads

26.05.2025

Next.js Server Actions & Tanstack Query

Das Dream-Team für dein Datenmanagement?

06.04.2025

Wie du ein Paket auf JSR.io veröffentlichts

mit Deno 2

13.10.2024