One shared store across remotes
How a single Redux store survives the seam between federated micro-frontends, and what breaks when it does not.
Tarjetas
Una tarjeta agrupa una pequeña unidad de contenido tras un borde muy fino y una sombra suave. El post del feed del blog es la tarjeta haciendo su trabajo más habitual.
Tarjeta base
Una superficie redondeada de 12 píxeles sobre el fondo de la tarjeta, enmarcada por una línea muy fina y elevada por una sombra suave. Al hacer hover se eleva un poco más. Es el armazón sobre el que se construye casi cualquier otra tarjeta.
A base card
A rounded surface with a hairline border and a soft shadow. Hover it to see the lift.
<div class="card"> … </div>Post del feed
La tarjeta del listado del blog, el componente FeedPostCard real, aquí con un marcador de posición donde va la imagen hero. En escritorio es una miniatura junto a un título, una línea de metadatos y un resumen de dos líneas; en teléfonos se pliega a una fila compacta.
Toda la tarjeta es un único enlace, no un enlace en el título con un «leer más» aparte. El hover eleva la tarjeta y vuelve verde el título a la vez.
Tarjeta hero de serie
La tarjeta de la serie actual de la portada del blog, renderizada en vivo: el arte del hero junto a la presentación de la serie, con la barra de progreso de publicadas sobre el total. En teléfonos se apila y gana un botón sólido de Ver la serie.
23 partes · En curso — próxima parte: 20 julEn curso
React Native Module Federation
Construye una app React Native federada desde cero con Module Federation y Re.Pack: remotes en tiempo de ejecución, el contrato de singleton compartido y un host shell que controla la navegación.
5 de 23 publicadosEmpieza por la parte 1Próxima parte · 20 jul
Tarjeta de serie
La tarjeta de la estantería «Más series» de la portada del blog: arte sobre un contador de partes, título y una descripción de dos líneas. El componente real SeriesCard, aquí con un marcador de posición en el arte.
Tarjeta de autor
La tarjeta de biografía al final de cada artículo: avatar, nombre, biografía y enlace al perfil. El componente real AuthorCard, renderizado en vivo.
Tarjeta de puesto actual
La tarjeta de último puesto de la portada: un disco con el logo junto a la empresa y el cargo, con la descripción debajo. Renderizada con las clases reales y contenido de relleno.
Acme Studios
Responsable de ingeniería
Mar 2016 - Presente
Un puesto de relleno que muestra la anatomía de la tarjeta: un resumen de una línea que se corta a las pocas palabras para que la fila siga siendo legible.
Ver detalles completosTarjeta de enlace con icono
Una tarjeta base que es un único enlace: un glifo Feather y un título en la fila de cabecera, un resumen debajo. Icono y título se ponen verdes juntos al pasar el cursor. Nació como la tarjeta de índice de esta documentación y se promocionó al sitio: las clases icon-card sobre card.
Banda CTA
La banda de cierre centrada: tintada, con borde, esquinas de 16 píxeles, un encabezado corto y una o dos llamadas a la acción, con un tope de 640 píxeles. Cierra la portada y la página del CV: una sola implementación, las clases cta-band.
Banda CTA
Fichas anterior / siguiente
Fichas anterior / siguiente
Dos fichas tintadas al pie de una página de detalle: una etiqueta verde de dirección en mayúsculas y el título del destino, con la ficha siguiente alineada a la derecha. Los artículos y las páginas de empresa comparten las clases pn-nav; en el móvil las fichas se apilan.
La portada compone además dos tarjetas a medida con estas piezas: una tarjeta de serie en curso con su barra de progreso junto al último post. En el móvil ambas ceden el sitio a las filas estándar del feed.
El post destacado y los viewports
El post más reciente recibe un tratamiento destacado más grande, y el feed entero cambia de forma según la banda: una tarjeta destacada grande sobre filas compactas en un teléfono, una cuadrícula de dos columnas en una tableta, filas con miniatura y una barra lateral en escritorio. Los marcos de abajo son la página real del blog a cada ancho.
Los marcos de abajo son las páginas reales renderizadas a anchos reales y con los scripts desactivados, así que siempre muestran el tema claro y dentro de ellos no se ejecuta ninguna analítica.
Cuándo usarlo
Hazlo
No lo hagas
One shared store across remotes
How a single Redux store survives the seam between federated micro-frontends, and what breaks when it does not.
Hazlo
No lo hagas
Hazlo
Hover me
Border and lift move together.
No lo hagas
No border
On a tinted band this edge disappears.
Dónde vive
Base: .card. Feed: .feed-post con .feed-post-thumb, .feed-post-body, .feed-post-meta, .feed-post-title, .feed-post-desc.