Cómo se podría construir un tejido moderno

Estoy seguro de que diferentes personas imaginan cosas diferentes cuando piensan en webrings, así que déjenme aclarar lo que imagino. Veo un elemento en un sitio web que:

1. Significa que este sitio es parte de un webring
2. Le permite pasar al sitio anterior o siguiente del webring
3. Quizás tenga otras funciones como ir a un sitio “aleatorio” o ver la lista completa.

Pero luego otra cosa importante:

4. Los propietarios de sitios no tienen que hacer mucho. Simplemente se dejan caer (¿lo?) en el sitio y hay una interfaz de usuario webring funcional.

Entonces así:

¿Cómo solía funcionar? ¿Sabes que? No tengo ni idea. Supongo que era una framesetframe //framesetsituación antigua, pero esto es un poco anterior a mi tiempo. ¿Cómo podríamos hacer esto hoy?

iframeBueno, supongo que nos vendría bien un . Eso es lo que hacen sitios como YouTube cuando proporcionan “código de inserción” como un fragmento HTML. Sitios como Twitter y CodePen le brindan un div(o cualquier HTML semántico) y un script, de modo que pueda haber contenido alternativo y el script lo mejore hasta convertirlo en un iframe. Un iframepodría estar bien, ya que exige muy poco al propietario del sitio, pero se sabe que son bastante malos para el rendimiento. Después de todo, es un documento completo dentro de otro documento. Además, no ofrecen mucho en cuanto a personalización. Obtienes lo que obtienes.

Otro problema con un iframe es que… ¿cómo sabría en qué sitio está incrustado actualmente? ¿Quizás un parámetro de URL? ¿Quizás uno postMessagede la página principal? No muy limpio si me preguntas.

Creo que un componente web podría ser el camino a seguir aquí, siempre y cuando pensemos en algo moderno. Podríamos crear un elemento personalizado como webring-*. Hagámoslo y hagámoslo específicamente para sitios CSS. Eso nos dará la oportunidad de enviar el sitio actual con un atributo, como este:

webring-css site="http://css-tricks.com"  This is gonna boot itself up into webring in a minute./webring-css

Eso resuelve la elección de la tecnología. Ahora necesitamos determinar el lugar global para almacenar los datos . Porque, bueno, un webring necesita poder actualizarse . Los sitios deben poder agregarse y eliminarse del webring sin que los otros sitios del webring tengan que hacer nada.

Para datos bastante simples como este, un archivo JSON en GitHub parece ser una opción perfectamente moderna. Vamos a hacer eso.

Ahora todos pueden ver todos los sitios en webring de una manera bastante legible. Además, podrían enviar solicitudes de extracción para agregar o eliminar sitios (siéntase libre).

Obtener esos datos de nuestro componente web es muy sencillo:

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

Lo activaremos cuando nuestro componente web se monte. Analicemos eso…

const DATA_FOR_WEBRING = `https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`;const template = document.createElement("template");template.innerHTML = `style  /* styles *//stylediv  !-- 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);

The rest of this isn’t so terribly interesting that I feel like we need to go through it step by step. I’ll just blog-sketch it for you:

1. Pull the attribute off the web component so we can see what the current site is
2. Match the current site in the data
3. Build out Next, Previous, and Random links from the data in a template
4. Update the HTML in the template

And voilà!

Could you do a lot more with this, like error handling, better design, and better everything?

Yes.