Blog

Optimistic UI i React: en grænseflade, der bevidst lyver

'Synes godt om'-knappen reagerer øjeblikkeligt, hjertet fyldes ud, tælleren stiger – før serveren overhovedet har svaret. Det er ikke den hastighedsillusion fra artiklen om mikrointeraktioner, det er noget mere vidtgående: grænsefladen viser en tilstand, der endnu ikke findes, og går ud fra, at den snart vil gøre det. Jeg undersøger, hvordan man bygger det sikkert – med en reel tilbagerulning, når antagelsen ikke holder – og hvorfor manuel setState plus catch er en dårligere version af det, useOptimistic giver.

CSS @layer: hvordan cascade layers afslutter krigen om specificitet

Hjælpeklassen .mt-4 taber til reglen .card .card__header .card__title, selvom den logisk burde vinde, fordi den blev tilføjet senere. Det er ikke tilfældigt – det er specificitet, der gør præcis det, den er designet til. @layer indfører en helt ny akse til at afgøre konflikter, som virker før specificiteten, ikke sammen med den – og har én faldgrube så kontraintuitiv, at selv en del af dokumentationen på nettet får den galt.

Server Actions i Next.js: en formular, der virker, før JavaScript er indlæst

'use server' ligner syntaktisk sukker på en fetch til en API-rute – og netop derfor behandler de fleste implementeringer det som et almindeligt funktionskald. Det er en fejl med konkrete konsekvenser: enhver funktion mærket 'use server' bliver et offentligt netværksendepunkt, og en formular bygget på den mekanisme virker, selv før JavaScript når at indlæses. Jeg undersøger, hvad der reelt sker under det direktiv, og hvor faldgruberne ligger, som ikke er indlysende ved første blik i dokumentationen.

CSS :has() — forælderen, der ved, hvad der sker indeni

Et formularfelt skal lyse rødt op, når inputtet indeni er ugyldigt. En enkel ting – bortset fra at CSS i 25 år ikke kunne spørge et element om, hvad der foregik i dets indre, kun det modsatte. Jeg undersøger, hvordan :has() vender den retning om, hvordan den adskiller sig fra almindelige kombinatorer, og hvor den nye kraft reelt koster ydelse.

Container Queries: en komponent, der kender sin container, ikke viewportet

Det samme produktkort ser fantastisk ud i et grid og går i stykker i en smal sidebar – på trods af omhyggeligt udvalgte media queries. Problemet ligger ikke i din kode, men i det spørgsmål, media queries stiller: om skærmens bredde, ikke om den plads, komponenten faktisk har fået. Jeg undersøger, hvordan container queries flytter det spørgsmål derhen, hvor det burde have været stillet fra begyndelsen, og hvad der reelt sker under motorhjelmen, når et element bliver en 'query-container'.

Oprettelse af tilgængelige komponenter til skærmlæsere

Korrekt HTML er kun begyndelsen. Se hvordan tilgængelighedstræet faktisk fungerer, hvorfor ARIA oftere gør skade end gavn end du tror, og byg en rigtig accordion, en live region og Next.js-fokushåndtering sammen med mig.