– 1567 ting skjedde i frontend-verdenen
Dette var uken for ulike preferanser 🐯🦁, løping 🏃, mangoer 🥭 – og 1567 ting skjedde i frontend-verdenen.
Forrige uke er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.
Scroll-driven animations 📜
Josh Comeau slapp forrige uke en ny artikkel om animation-timeline-API-et. Dette API-et lar deg mappe en CSS-keyframe til en scrollavstand i stedet for en varighet, og resultatet er scroll-drevne animasjoner i ren CSS, uten JavaScript eller IntersectionObserver.
Artikkelen forklarer både view() (måler et elements progresjon gjennom viewporten), scroll() (måler total scroll-progresjon) og hvordan du kan styre nøyaktig når animasjonen skal starte og stoppe ved hjelp av animation-range med verdiene cover, contain, entry og exit. Han går også gjennom "linked timelines" via timeline-scope, som lar deg bruke ett elements scroll-posisjon til å animere et helt annet element.
Artikkelen forutsetter at du er kjent med vanlige CSS keyframe-animasjoner. Comeau har også en interaktiv guide til keyframe-animasjoner.
API-et har nå rundt 85% støtte ifølge caniuse. Det er støttet i alle store nettlesere bortsett fra Firefox, hvor det fortsatt ligger bak et flagg. Du kan lese hele artikkelen, med interaktive eksempler, her 👇
joshwcomeau.comScroll-Driven Animations • Josh W. Comeau
pnpm 11 er lansert 📦
Forrige uke kom pnpm 11, en større oppdatering med flere nye standardinnstillinger og en omskrevet store-implementasjon.
- Supply-chain-beskyttelse er nå slått på som standard. minimumReleaseAge er satt til 1440 (altså 1 dag), slik at nylig publiserte pakker ikke blir installert før det har gått 24 timer siden publisering. I tillegg er blockExoticSubdeps slått på som standard.
- Store-indeksen er bygget om fra millioner av JSON-filer til én SQLite-database, som gir færre syscalls og raskere installasjoner.
- pnpm bruker ikke lenger npm CLI som fallback. Kommandoer som pnpm publish, login, view, deprecate og version er nå nativt implementert.
- .npmrc brukes nå kun til auth- og registry-konfigurasjon. Andre innstillinger må flyttes til pnpm-workspace.yaml eller den nye globale config.yaml.
- pnpm krever nå Node.js 22 eller nyere, og distribueres som pure ESM.
For å migrere fra v10 finnes det en pnpm-v10-to-v11 codemod som håndterer de fleste konfigendringene automatisk. Du kan lese mer her 👇
Ny pakkemanager: Aube 🚀
Samme uke som pnpm 11 ble lansert, dukket det også opp en ny Node.js-pakkemanager kalt Aube (uttales "åb"). Ifølge deres egne benchmarks er Aube 8.3x raskere enn pnpm og 6.8x raskere enn Bun på warm install (altså når lockfile og cache allerede er på plass).
I motsetning til andre pakkemanagere krever ikke Aube at du bytter lockfile. Den leser og skriver yarn.lock, pnpm-lock.yaml eller package-lock.json i samme format som verktøyet du allerede bruker, slik at hele teamet ikke trenger å migrere samtidig. Den bruker også en global content-addressable store (i samme stil som pnpm), slik at flere prosjekter kan dele de samme pakkefilene i stedet for å ha hver sin kopi. Du kan lese mer her 👇
A fast Node.js package manager
Nytt i nettleserne i april 🌐
Rachel Andrew oppsummerte hva som er nytt i stabile nettlesere i april. Et par ting som peker seg ut:
- contrast-color() er nå Baseline Newly Available – Chrome 147 var siste nettleser som implementerte den. Funksjonen tar inn en farge og returnerer enten svart eller hvitt, basert på hvilken som gir høyest kontrast – nyttig for å oppfylle UU-krav uten manuelle utregninger.
- animation-range, animation-range-start og animation-range-end er også Baseline Newly Available, etter at Firefox 150 fikk støtte. Disse henger altså tett sammen med Comeau-artikkelen over.
- Firefox 150 fikk også støtte for ariaNotify(), en metode på Document og Element som lar deg sende tekst direkte til skjermlesere for opplesning. Dette er et mer ergonomisk alternativ til ARIA live regions, særlig når annonseringen ikke er knyttet til en DOM-oppdatering.
Du kan lese hele oppsummeringen her 👇
web.devNew to the web platform in April
Det var alt for denne gang, ha en fin uke 👋