One shared store across remotes
How a single Redux store survives the seam between federated micro-frontends, and what breaks when it does not.
Targetes
Una targeta agrupa una petita unitat de contingut darrere d'una vora fina i una ombra suau. El post del feed del blog és la targeta fent la seva feina més habitual.
Targeta base
Una superfície arrodonida de 12 píxels sobre el fons de la targeta, emmarcada per una línia fina i elevada per una ombra suau. En passar-hi el cursor, s'eleva una mica més. És l'estructura sobre la qual es construeix gairebé qualsevol altra targeta.
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 targeta del llistat del blog: el component FeedPostCard real, aquí amb un marcador de posició on va la imatge hero. A escriptori és una miniatura al costat d'un títol, una línia de metadades i un resum de dues línies; en mòbils es replega en una fila compacta. Sense art, un post del feed es marca data-no-thumb i passa a una columna, perquè el cos mai quedi al costat d'una pista d'imatge buida.
Tota la targeta és un únic enllaç, no pas un enllaç al títol amb un «llegeix-ne més» a part. En passar-hi el cursor, s'eleva la targeta i el títol es torna verd alhora.
Índex de publicacions
El germà dens del post del feed: una fila de línia fina per article (data en mono, títol, sèrie, temps de lectura), agrupades sota un marcador d'any en mono. Una targeta de feed ven un article; l'índex demostra una obra, així que l'art queda fora del flux. Amb punter en amples d'escriptori, passar per una fila fa aparèixer l'art del post com una petita previsualització girada; en tàctil o amb moviment reduït només hi ha les files. Una implementació, les classes roster; corre a la pàgina about i mai es pagina.
Targeta hero de sèrie
La targeta de la sèrie actual de la pàgina d'inici del blog, renderitzada en viu: l'art de l'hero al costat de la presentació de la sèrie, amb la barra de progrés de publicats sobre el total. En mòbils s'apila i guanya un botó sòlid de «Veure la sèrie».
19 parts · En curs · propera part: 17 d’ag.En curs
React Native Module Federation
Construeix una app React Native federada des de zero amb Module Federation i Re.Pack: remots en temps d'execució, el contracte de singleton compartit i un host shell que controla la navegació.
9 de 19 publicatsComença per la part 1Propera part · 17 d’ag.
Targeta de sèrie
La targeta de la prestatgeria «Més sèries» de la portada del blog: art sobre un comptador de parts, títol i una descripció de dues línies. El component real SeriesCard, aquí amb un marcador de posició a l'art.
Targeta d'autor
La targeta de biografia al final de cada article: avatar, nom, biografia i enllaç al perfil. El component real AuthorCard, renderitzat en viu.
Targeta de càrrec actual
La targeta de darrer càrrec de la portada: un disc amb el logo al costat de l’empresa i el càrrec, amb la descripció a sota. Renderitzada amb les classes reals i contingut de mostra.
Acme Studios
Responsable d'enginyeria
Mar 2016 - Actual
Un càrrec de mostra que ensenya l'anatomia de la targeta: un resum d'una línia que es talla al cap de poques paraules perquè la fila es pugui escanejar.
Veure tots els detallsTargeta d’enllaç amb icona
Una targeta base que és un únic enllaç: un glif Feather i un títol a la fila de capçalera, un resum a sota. Icona i títol es tornen verds junts en passar-hi per sobre. Va néixer com la targeta d’índex d’aquesta documentació i es va promocionar al web: les classes icon-card sobre card.
Banda CTA
La banda de tancament centrada: tintada, amb vora, cantonades de 16 píxels, un encapçalament curt i una o dues crides a l'acció, amb topall de 640 píxels. Tanca la pàgina del CV tota sola; la pàgina d'inici tanca amb dues en una graella cta-band-pair: apilades en pantalles petites, costat a costat des de 900 píxels, sense el topall d'amplada individual perquè el parell quedi equilibrat.
Banda CTA
Fitxes anterior / següent
Banda de xifres
Una línia mono de xifres comptades entre dues línies fines: articles, sèries, minuts de lectura. Xifres en verd, etiquetes apagades. Cada número es deriva del contingut en compilar, mai s'escriu a mà, així que la banda no pot desviar-se del que el lloc realment conté.
Fitxes anterior / següent
Dues fitxes tintades al peu d’una pàgina de detall: una etiqueta verda de direcció en majúscules i el títol de la destinació, amb la fitxa següent alineada a la dreta. Els articles i les pàgines d’empresa comparteixen les classes pn-nav; al mòbil les fitxes s’apilen.
La portada compon a més dues targetes a mida amb aquestes peces: una targeta de sèrie en curs amb la seva barra de progrés al costat de l’últim post. Al mòbil totes dues cedeixen el lloc a les files estàndard del feed.
El post destacat i els viewports
El post més nou rep un tractament destacat més gran, i tot el feed canvia de forma segons la banda: una gran targeta destacada sobre files compactes en un mòbil, una graella de dues columnes en una tauleta, files amb miniatura i una barra lateral a escriptori. Els marcs de sota són la pàgina real del blog a cada amplada.
Els marcs de sota són les pàgines reals renderitzades a amplades reals, sense scripts: per això sempre mostren el tema clar i no s'hi executa cap analítica.
Quan utilitzar-ho
Fes
No facis
One shared store across remotes
How a single Redux store survives the seam between federated micro-frontends, and what breaks when it does not.
Fes
No facis
Fes
Hover me
Border and lift move together.
No facis
No border
On a tinted band this edge disappears.
On es troba
Base: .card. Feed: .feed-post amb .feed-post-thumb, .feed-post-body, .feed-post-meta, .feed-post-title, .feed-post-desc.