En esta entrada, profundizaremos en cómo utilizar el poder de los Servicios de Entrega en Edge y la Autoría de Documentos para construir una lista dinámica de elementos a partir de una hoja de cálculo ubicada en DA.

Hay una gran diferencia entre poner una lista de enlaces en una página y crear algo realmente utilizable. Este proyecto empezó como "solo necesitamos una lista de URLs y descripciones", pero rápidamente se convirtió en resolver un puñado de problemas reales: mantener el contenido mantenible, evitar el sobrevolumen del DOM y hacer que el filtrado se sienta rápido sin sobreingenierlo.

El resultado es el bloque de Lista de Referencias ; una cuadrícula de tarjetas filtrable y basada en datos para Adobe Edge Delivery Services (EDS) que extrae contenido de un feed JSON respaldado por hojas de cálculo, soporta filtrado por categorías y etiquetas, y carga progresivamente los resultados con animaciones pulidas. La hicimos específicamente para impulsar esta página de referencia de Edge Delivery Services, ¡que todos vosotros ya deberíais tener guardada en favoritos!

Dejar que la hoja de cálculo controle todo

El bloque está completamente impulsado por datos. Obtiene un archivo JSON generado por una hoja EDS en /en/reference-links.json. Decidimos usar un formato de varias hojas; una hoja para los elementos de referencia, otra para categorías:

{
  "data": {
    "data": [
      {
        "url": "https://developer.adobe.com/",
        "image-url": "https://example.com/thumb.png",
        "title": "Adobe Developer Documentation",
        "description": "Official docs for building on Adobe platforms.",
        "tag": "Documentation|Official",
        "category": "Development"
      }
    ]
  },
  "categories": {
    "data": [{ "Category": "Development", "Description": "Dev tools and references" }]
  }
}

Las etiquetas utilizan tuberías dentro de la celda (Tag1 | Tag2), que mantiene la creación simple y predecible.

Cuando crees este bloque, sin duda querrás hacer algunas pruebas antes de lanzarlo. Si solo tienes la lista poblada dentro de DA, probablemente tendrás problemas de intercambio de recursos (CORS) entre orígenes al probar localmente. Para solucionarlo, simplemente crea tu propio archivo JSON con algunas entradas de prueba que cumplan los mismos requisitos que la hoja DA y habilita el uso local de JSON.

const USE_LOCAL_JSON = false;
const LOCAL_JSON_PATH = '/tools/json/reference-list.json';
const LIVE_JSON_URL = '/en/reference-links.json';

Crear cartas que no se rompen

Cada elemento de referencia se convierte en una carta con esta estructura DOM:

.reference-card
  └── a.reference-link
        ├── div.reference-image-wrapper   (optional)
        │     └── img.reference-image
        └── div.reference-content
              ├── h3.reference-title
              ├── p.reference-description  (optional)
              └── div.reference-tags
                    └── span.reference-tag (one per tag)

Al construir un bloque, una de las cosas más importantes a considerar es lo fácil que puede usarlo un autor. Para ello, teníamos que asegurarnos de que la lista pudiera manejar diferentes cantidades de información y seguir funcionando igual. Algunos tienen descripciones, etiquetas o ninguno de los dos. La regla era renderizar solo lo que existe, pero no dejar que la disposición dependiera de que haya una sola pieza presente. Algunas decisiones concretas:

• Image es opcional , el campo image-url (con un recurso de respaldo a image) solo se renderiza si no está vacío

• Las imágenes usan loading="lazy" para que las miniaturas fuera de pantalla no bloqueen el renderizado inicial

• Todos los enlaces usan rel="noopener noreferrer" para evitar la siesta de pestañas en URLs externas

  • Esto suele hacerse automáticamente en los navegadores modernos, ¡pero más vale prevenir que curar!

Filtrar la lista sin reconstruir el mundo

Al pensar en cómo filtrar, a veces las cosas pueden volverse desordenadas, especialmente al volver a renderizar en cada interacción. Para evitar esto, nos aseguramos de configurar los atributos de cada carta desde el principio, así se convierte más en un interruptor de visibilidad.

card.setAttribute('data-category', ref.category);
card.setAttribute('data-tags', JSON.stringify(cardTags));

También añadimos una función, updateReferenceDisplay, para reevaluar la visibilidad de cada interacción:

const categoryMatch = selectedCategory === 'all' || cardCategory === selectedCategory;
const tagMatch = cardTags.length === 0 || cardTags.some((tag) => activeTags.has(tag));

La coincidencia de etiquetas usa lógica OR, cualquier etiqueta seleccionada califica una carta. Las etiquetas activas están en un Set, así que las comprobaciones de añadir/eliminar y de membresía son todas O(1). Un caso sutil: objetos sin etiquetar. Dejarlos pasar siempre el filtro de etiquetas significaba que nunca desaparecieran inesperadamente.

CSS haciendo más de lo esperado

Aunque este no es necesariamente un blog sobre estilismo, sería un error no mencionar algunas de las decisiones que tomamos en ese aspecto. Especialmente en lo que respecta al efecto de "foco" cuando una carta está flotando.

.reference-grid:has(.reference-card:hover) .reference-card:not(:hover) {
  transform: scale(0.9);
  opacity: 0.6;
}

La animación de fundido sigue el mismo enfoque, así que no hay coordinación entre JS y estilos:

.reference-card { opacity: 0; }

.reference-card.fade-in {
  opacity: 1;
  animation: fade-in-up 0.5s ease-out forwards;
}

@keyframes fade-in-up {
  from { transform: translateY(20px); }
  to   { transform: translateY(0); }
}

Reflexiones finales

Este proyecto es un claro ejemplo de cómo una arquitectura reflexiva convierte un patrón común en algo realmente escalable. Al trasladar la responsabilidad a los datos estructurados y mantener el frontend centrado en un renderizado eficiente y la gestión del estado, el bloque de Lista de Referencias evita los típicos errores de los DOMs sobrecargados y los costosos rerenderizados.

El verdadero valor no está solo en el filtrado o la presentación, sino en el propio sistema. Los autores obtienen una forma predecible y de baja fricción para gestionar el contenido, mientras que la implementación sigue siendo eficiente y fácil de ampliar. Es un patrón que se mantiene a medida que crece el contenido, no uno que necesite ser revisado cada vez que lo hace.

¡Mira la página de referencia en acción!

Sobre el autor

¿Te ha gustado lo que has oído? ¿Tienes preguntas sobre lo que es lo mejor para ti? ¡Nos encantaría hablar! Contáctanos

Más artículos que quizá te interesen