Hopp til hovedinnhold

<ForrigeUke uke=”1” år=”2026”/>

Publisert:9. januar
Skrevet av:Jon Johansen

Dette var uken for gode spøker 🙃 og uforutsett hype 📺Og 655 ting skjedde i frontend-verdenen!

Bilde av Ralph Bolliger på Unsplash
Bilde av Ralph Bolliger på Unsplash

Heisann 2026! 🎆

Da har vi igjen vært gjennom perioden hvor NPM-nedlastningene stuper, vi har rukket å oppdatere copyrights i footere, og kommet oss gjennom den blåeste uka i året - Og vi er selvfølgelig her for å oppsummere hva som har beveget seg i nyttårsuka.

Hva skjer når du skriver inn en URL i nettleseren?

Det klassiske intervjuspørsmålet som lar intervjuobjektet fortelle om omtrent akkurat hvor dypt de ønsker om alt fra interupts i OSet til GPU-rendring. Det er rett og slett kollåpent. Dette repositoryet innholder en ganske dyptgående besvarelse på spørsmålet.

I uken som gikk skrev/shippa Dmytro Krasun en kjempefin interaktiv variant på hva som skjer i nettleseren når den prøver å løse en URL og tilslutt rendre elementer, med fokus på nettverk og DOM-parsing - et helt passe nivå for frontend-forståelse tenker jeg.

Absolutt verd en gjennomlesing hvis du har lyst å lære og se litt om hvordan det foregår!

howbrowserswork.com

How Browsers Work

A guide on how browsers work.

Scrolletilstand i CSS

Rett før jul skrev Una om den helt nye scrolled-state queryen som kommer i neste versjon av Chrome (144). Den nye CSS-queryen gir det muligheten til å stilsette ting basert på hvilken retning brukeren har scrollet i.
Det gir ikke noe revolusjonerende oppførsel, da vi typisk har sett headere eller andre elementer som har kollapset basert på scrolling. Det som er nytt er at det gjøres i ren CSS og ikke med JavaScript, og som Una trekker frem gjør det navbaren fungerer fint, også når JavaScripten ikke har lastet.

una.im

una.im | Directional CSS with scroll-state(scrolled)

Style based on scroll direction with this new scroll-state query feature.

Featuren er helt kliss ny, og for de aller fleste er ikke API-et tilgjengelig enda. I bloggposten gis det et finfint eksempel på hvordan man kan håndtere det på normalt vis for de som ikke er på neste versjon av Chrome enda.

Mer css! Masonry blir grid lanes 🧱

Det har tatt ganske mange år, og mye diskusjon på hvordan man skal introdusere masonry i CSS. Nå er det endelig landet, og svaret blir grid-lanes!

Hvis du ikke er kjent med Masonry-layout, er dette rett å slett lanes med ulik høyde på elementene, der det ikke er noen mellomrom mellom bunn og topp. Litt sånn som gamle murbygninger. Ganske enkelt, men også vanskelig å få bra til uten JavaScript.

webkit.org

Introducing CSS Grid Lanes

It’s here, the future of masonry layouts on the web!

Forslaget har landet på å bruke grid-lik syntaks, så man kan fortsatt justere bredden og antallet elementer, men det en egen `grid-lane`- display verdi, som gjør at innholdet automatisk stabler seg så tett på raden over som mulig.

Det er foreløpig ikke dekkende støtte i nettlesere enda, og er bare tilgjengelig i previewen av Safari, men testingen begynner nok i de andre netteleserene ganske straks.

Ralph-driven-development 🫣

Den siste uken har det tatt av på X/Twitter med referanser til Ralph - karakteren fra The Simpsons. Det stammer fra en ny utviklingsmetodikk der man setter i gang KI-agenter i en loop for å utvikle, mens man selv sover eller gjør andre ting.

«That's the beauty of Ralph - the technique is deterministically bad in an undeterministic world. »
Geoffrey Huntley
Faksimile fra x.com (https://x.com/forgebitz/status/2008161277537837303)

Helt på grensen til uforsvarlig tenker jeg, men det er uansett spennende å se hva som kommer ut på andre siden når man lar agenter holde på. Har du lyst å prøve selv gir denne blogposten en liten pekepinn på hvordan man setter det opp selv.

Aaand that’s that! 👋 Vi sees neste uke!

Skrevet av