Dette var uka for å reservere uuid’er 🤞og bli invitert inn i nye gruppechatter 🤫— og 1454 ting som skjedde i frontendverdenen!
Karuseller helt uten JavaScript
CSS Overflow 5 er godt i gang med å trille gjennom W3C sin standardiseringsprosess, og allerede 26. mars, med Chrome 135, fikk vi en første smakebit.
Hva betyr det for oss som bygger på weben? Jo, nå blir det mye enklere å lage scroll-navigasjon — altså visuelle markører for hvor brukeren er i en scrollbar komponent.
- Vi får nemlig tilgang til de splitter nye pseudo-elementene ::scroll-marker og ::scroll-marker-group. Med disse kan vi lage ting som interaktive innholdsfortegnelser, og vi kan til og med vise hvilken markør som er aktiv med pseudo-klassen :target-current. Ganske snasent!
- Vi får også ::scroll-button()-pseudo-elementet, som lar deg lage egne knapper for å hoppe til neste eller forrige punkt i en scroll-komponent. Hvis vi lager oss en karusell med .carousel-klassen – da kan du style .carousel::scroll-button(right) for å lage en “neste”-knapp. Alt med bare CSS!
Adam Argyle fra Google har allerede skrevet en artikkel på Chrome sin utviklerblogg hvor han viser hvordan du kan bygge en hel karusell — uten én eneste linje JavaScript. Alt med CSS! Anbefales å sjekke ut 💯
Det er mye kult i vente her altså! Jeg må innrømme at det føles litt magisk at knapper og markører bare dukker opp når du begynner å style disse nye pseudo-elementene. Men heldigvis nevner Adam at det også jobbes med en “bring your own elements”-tilnærming — så du i fremtiden kan bruke dine egne komponenter som scrollknapper og -markører. Det høres mer fleksibelt ut!
Etter 30 år blir endelig tid enklere i JavaScript
Valibot endelig stabilt
Valibot er et lite og lett bibliotek for skjema-validering, og det hele startet som en del av bacheloroppgaven til Fabian Hiller. Målet? Å kutte ned bundle size med over 90 % sammenlignet med tungvektere som Zod, ArkType og Typia.
- Dette gjorde han ved å bygge et API som består av små, uavhengige funksjoner — i stedet for store, altomfattende klasser.
- Kombinert med litt hjelp fra moderne bundlere og tree shaking, ender du faktisk opp med å typisk bare sende 1–2 kB til brukeren. Ganske imponerende!
Valibot har vært tilgjengelig en stund i eksperimentelle 0.x-versjoner, hvor API-et har kunne endre seg når som helst. Men denne uken tok Fabian steget og lanserte versjon 1.0 — og erklærte samtidig at API-designet nå er stabilt nok til å regnes som “ferdig”.
Det betyr kanskje at flere tør å ta sjansen på å bruke det i applikasjonene sine? Jeg vet i alle fall at jeg skal teste det ut i mine!
Fabian har også skrevet en artikkel hvor han forteller om hvordan Valibot ble til, hva som gjør det så lettvekt, og hva han ser for seg videre. Høres dette spennende ut? Da er det vel verdt å ta en kikk 👀
Databutton lager AI-utviklere, men vil ikke ta jobben din
View Transitions på 1–2–3
Jeg skal være ærlig — jeg har ikke helt satt meg inn i hvordan man kommer i gang med View Transitions APIet ennå. Men! Heldigvis snublet jeg over en kort og konsis artikkel fra Amit Merchant som viser akkurat hvor enkelt det faktisk er.
View Transitions APIet er et nettleser API som lar deg lage sømløse overganger mellom sider eller tilstander i en app — helt uten tunge animasjonsbiblioteker.
Perfekt hvis du vil ha litt smoothe overganger når brukeren klikker seg rundt i appen din!
Amit har laget en superrask guide som dekker det aller mest nødvendige for å komme i gang med View Transitions — og spoiler alert: det er mye enklere enn jeg trodde! Hvis du også har gått rundt og tenkt “jaja, jeg ser det snakkes om overalt, men hvor starter jeg egentlig?”, så anbefaler jeg å ta en titt på artikkelen til Amit Dette må jeg nok leke meg litt med!
