I artiklen om mikrointeraktioner skrev jeg, at transform og opacity animeres på kompositørens tråd, så selv en tung side ikke burde få en knapanimation til at hakke. Det er stadig sandt – med ét forbehold, som den artikel ikke nævnte: hvis hovedtråden er blokeret af en lang JS-opgave, får animationen måske aldrig chancen for at starte, fordi selve klik-handleren venter i kø. INP er den metrik, der måler præcis dette hul – og scheduler.yield() er en af de få måder, man reelt kan lukke det på.
'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.
To webshops, samme produkt, samme svartid fra serveren – alligevel føles den ene hurtigere og mere troværdig. Forskellen ligger i mikrointeraktioner: nogle få hundrede millisekunders animation, der afgør, om brugeren stoler på det, der sker på skærmen. Jeg gennemgår dem fra bunden – trigger/feedback-modellen, hvad der reelt sker inde i browserens rendering engine, og prefers-reduced-motion.
CSS Houdini er ikke én teknologi, men en samling af specifikationer i meget forskellige modenhedsstadier. Find ud af, hvilken del der i dag er klar til produktion, hvordan @property og paint worklet egentlig fungerer, og hvorfor resten stadig er eksperimentel.
