Nye Astro 5.10: – Digg for hastighet!
Responsive bilder i Astro, rarireter med animert zoom i CSS og stalltips om Suspense og use-hooken, i ukas Forrige Uke!
Dette var uken for teamwork 👬, blomstrende blomster 🌻 og flytende glass 💧 — og 9 385 ting skjedde i frontend-verdenen.
Stalltips om Suspense og use-hooken 🏇
I React 19 har use-hooken gjort datahenting (eller andre promises) på klient-siden enda enklere, og det er også omsider klart hvordan dette skal spille på lag med Suspense-boundaries for å gjøre lastetilstander både enkelt og effektivt.
Spoiler: use-hooken kaster promises som ikke er resolved 💅.
Ringreven Kent C. Dodds har skrevet en kort og enkel artikkel som forklarer hvordan Suspense følger med på promises for å veksle mellom å vise fallback-innhold og annet innhold, og hvordan du kan begynne å ta i bruk det nye mønsteret på 1-2-3!
Du kan lese bloggposten 👉 her 👈
Ny versjon av Astro
Astro, frontend-rammeverket kjent for øy-arkitekturen sin er nå ute med en ny versjon (v5.10) med flere eksperimentelle nyheter.
Responsive bilder er nå på plass på ordentlig. Det betyr at Astro genererer nå automatisk srcset, sizes, og fetchPriority 🤖. Det kommer også med et knippe muligheter for å sette responsive stiler og croppe bilder. Digg for sidelastingshastigheter på alle typer devices!
Den største nyheten er nok de eksperimentelle Live collections. Astro har et konsept om Content Collections, som er strukturert innhold som kan lastes inn, for eksempel markdown til en blogg-post. Tidligere har disse blitt pakket inn ved byggtid. Nå er det kommet på plass eksperimentell støtte for å hente innholdet i en collection på request - litt som serverside rendering ✨.Dette betyr at for sider som er store og tar lang tid å bygge eller sider som har hyppige endringer, vil kunne dynamisk hente inn innhold fra for eksempel et CMS on the fly!
Det dukker også opp bedre støtte for CSP-headere for sider som rendrer on-demand. Så hakket sikrere blir det også! 🔒
Rariteter med animert zoom i CSS 🔎
Hvis du har prøvd å animere en zoom-animasjon og opplevd en litt merkelig swoop-effekt, har denne bloggposten av Jake Archibald funnet svaret på hvorfor det skjer 😵💫.
Det viser seg at animasjon av kombinasjonen av scale og translate blir tolket hver for seg, og at browseren forsterker translate med scale-funksjonen underveis i animasjonen.
Fiksen for dette vil være å multiplisere translate-verdiene med scale for å oppnå en perfekt glidene zoom ....eller så kan du også bare slenge hacken med rotate(0) i animasjonen 🙈. Hvorfor den merkelige hacken fungerer, finner du her 😺.
Minst en en av disse - i TypeScript
Jeg elsker elegante små utility-typer i TypeScript. Og forrige uke kom jeg over denne lekre saken på twitter. Denne typen påser at objektet ditt inneholder minst en av property. Perfekt for for eksempel filter-funksjonalitet.
// 🔎 Require at least one search filter to be applied
type RequireAtLeastOne<T> = {
[K in keyof T]: Required<Pick<T, K>> & Partial<Omit<T, K>>
}[keyof T];
// 📃 User must apply at least one filter
type ProductFilter = RequireAtLeastOne<{
category?: string;
priceRange?: [number, number];
rating?: number
}>;
// ✅ Valid: at least one filter is selected
const filter1: ProductFilter = {category: "Electronics"};
const filter2: ProductFilter = {rating: 4.5, priceRange: [100, 500]};
// ❌ Invalid: no filters selected
const filterInvalid: ProductFilter = {};Aaand that’s that! 👋 Vi sees neste uke!
