Blogg

Optimistic UI i React: gränssnittet som medvetet ljuger

'Gilla'-knappen reagerar direkt, hjärtat fylls i, räknaren ökar – innan servern ens har svarat. Det är inte samma hastighetsillusion som i artikeln om mikrointeraktioner, det är något som går längre: gränssnittet visar ett tillstånd som ännu inte finns, och antar att det strax kommer att göra det. Jag går igenom hur man bygger det säkert – med en verklig reträtt från lögnen när antagandet visar sig fel, och varför manuell setState plus catch är en sämre version av det useOptimistic ger.

CSS @layer: hur cascade layers avslutar kriget om specificitet

Hjälpklassen .mt-4 förlorar mot regeln .card .card__header .card__title, trots att den logiskt sett borde vinna eftersom den lades till senare. Det är ingen slump – det är specificitet som gör exakt det den är designad för. @layer inför en helt ny axel för att avgöra konflikter, som verkar före specificiteten, inte tillsammans med den – och den har en fallgrop så okontraintuitiv att till och med en del dokumentation på nätet får den fel.

Server Actions i Next.js: formuläret som fungerar innan JavaScript har laddats

'use server' ser ut som syntaktiskt socker för ett fetch-anrop till en API-route – och just därför behandlar de flesta implementationer det som ett vanligt funktionsanrop. Det är ett misstag med konkreta konsekvenser: varje funktion märkt 'use server' blir en offentlig slutpunkt på nätet, och ett formulär byggt på den här mekanismen fungerar även innan JavaScript hunnit laddas. Jag går igenom vad som faktiskt händer bakom det direktivet, och var fallgroparna finns som inte syns i dokumentationen vid första anblicken.

CSS :has() — föräldern som vet vad som händer inuti

Ett formulärfält ska lysa rött när input:en inuti är ogiltig. En enkel sak – förutom att CSS i 25 år inte kunde fråga ett element om vad som händer i dess inre, bara tvärtom. Jag går igenom hur :has() vänder på den riktningen, hur den skiljer sig från vanliga kombinatorer, och var den här nya kraften faktiskt kostar prestanda.

Container Queries: komponenten som känner sin container, inte viewport

Samma produktkort ser perfekt ut i griden men går sönder i den smala sidopanelen – trots noggrant avvägda media queries. Problemet ligger inte i din kod, utan i frågan som media query faktiskt ställer: hur bred är fönstret, inte hur mycket plats komponenten faktiskt fick. Jag går igenom hur container queries flyttar frågan dit den borde ha ställts från början, och vad som egentligen händer under ytan när ett element blir en 'query container'.

Skapa tillgängliga komponenter för skärmläsare

Korrekt HTML är bara startpunkten. Se hur tillgänglighetsträdet faktiskt fungerar, varför ARIA oftare gör skada än nytta än du tror, och bygg en riktig accordion, en live region och fokushantering i Next.js tillsammans med mig.