Wie Sie einen modernen Webring bauen könnten

Ich bin sicher, verschiedene Leute stellen sich unterschiedliche Dinge vor, wenn sie an Webringe denken, also lassen Sie mich klären, was ich mir vorstelle. Ich sehe ein Element auf einer Website, das

1. Anzeigt, dass diese Seite Teil eines Webrings ist
2. Ermöglicht es Ihnen, zur nächsten oder vorherigen Seite des Webrings zu wechseln
3. Vielleicht gibt es weitere Funktionen wie das Navigieren zu einer „zufälligen“ Seite oder das Anzeigen der vollständigen Liste

Aber dann noch eine wichtige Sache

4. Website-Besitzer müssen nicht viel tun. Sie platzieren es einfach auf der Website, und eine funktionale Webring-Benutzeroberfläche ist vorhanden.

Also so

Wie hat es früher funktioniert? Wissen Sie was? Ich habe keine Ahnung. Ich vermute, es war eine alte <frameset><frame /></frameset>-Situation, aber das liegt ein wenig vor meiner Zeit. Wie könnten wir das heute machen?

Nun, wir könnten ein <iframe> verwenden, schätze ich. Das tun Seiten wie YouTube, wenn sie „Embed-Code“ als HTML-Snippet bereitstellen. Seiten wie Twitter und CodePen geben Ihnen ein <div> (oder ein beliebiges semantisches HTML) und ein <script>, damit es Fallback-Inhalte gibt und das Skript es zu einem <iframe> erweitert. Ein <iframe> mag in Ordnung sein, da er vom Website-Besitzer sehr wenig verlangt, aber er ist bekanntermaßen schlecht für die Leistung. Es ist schließlich ein ganzes Dokument in einem anderen Dokument. Außerdem bieten sie wenig Anpassungsmöglichkeiten. Man bekommt, was man bekommt.

Ein weiteres Problem mit einem iframe ist: Woher soll er wissen, auf welcher Seite er gerade eingebettet ist? Vielleicht ein URL-Parameter? Vielleicht ein postMessage von der übergeordneten Seite? Nicht gerade sauber, wenn Sie mich fragen.

Ich denke, eine Web Component könnte hier der richtige Weg sein, solange wir modern denken. Wir könnten ein benutzerdefiniertes Element wie <webring-*> erstellen. Machen wir das, und zwar speziell für CSS-Websites. Das gibt uns die Möglichkeit, die aktuelle Seite über ein Attribut zu übergeben, so:

<webring-css site="https://css-tricks.de">
  This is gonna boot itself up into webring in a minute.
</webring-css>

Das löst die Wahl der Technologie. Jetzt müssen wir herausfinden, wo wir die **Daten** global speichern können. Denn ein Webring muss **aktualisiert** werden können. Seiten müssen zum Webring hinzugefügt und entfernt werden können, ohne dass die anderen Seiten im Webring etwas tun müssen.

Für recht einfache Daten wie diese scheint eine JSON-Datei auf GitHub eine durchaus moderne Wahl zu sein. Machen wir das.

Jetzt kann jeder alle Seiten im Webring auf ziemlich lesbare Weise sehen. Außerdem könnten sie Pull Requests dagegen einreichen, um Seiten hinzuzufügen/zu entfernen (fühlen Sie sich frei).

Die Abfrage dieser Daten aus unserer Web Component ist nur einen Fetch entfernt.

fetch(`https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`)
  .then((response) => response.json())
  .then((sites) => {
     // Got the data.
  });

Das werden wir auslösen, wenn unsere Web Component eingebunden wird. Lasst uns das aufbauen…

const DATA_FOR_WEBRING = `https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`;

const template = document.createElement("template");
template.innerHTML = `
<style>
  /* styles */
</style>

<div class="webring">
  <!-- content -->
</div>`;

class WebRing extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    fetch(DATA_FOR_WEBRING)
      .then((response) => response.json())
      .then((sites) => {
        // update template with data
      });
  }
}

window.customElements.define("webring-css", WebRing);

Der Rest ist nicht so schrecklich interessant, dass ich das Gefühl habe, wir müssten es Schritt für Schritt durchgehen. Ich skizziere es einfach für Sie im Blog

1. Holen Sie sich das Attribut von der Web Component, damit wir sehen können, welche die aktuelle Seite ist
2. Gleichen Sie die aktuelle Seite in den Daten ab
3. Erstellen Sie die Links „Weiter“, „Zurück“ und „Zufällig“ aus den Daten in einer Vorlage
4. Aktualisieren Sie das HTML in der Vorlage

Und voilà!

Könnte man damit viel mehr machen, wie Fehlerbehandlung, besseres Design und alles besser?

Ja.