I artikkelen om mikrointeraksjoner skrev jeg at transform og opacity animeres på kompositeringstråden, så selv en tung side ikke burde få knappeanimasjonen til å hakke. Det stemmer fortsatt – med ett forbehold den artikkelen ikke nevnte: hvis hovedtråden er blokkert av en lang JS-oppgave, får animasjonen kanskje aldri sjansen til å starte, fordi selve klikk-handleren står og venter i køen. INP er metrikken som måler nøyaktig dette gapet – og scheduler.yield() er en av de få måtene å faktisk lukke det på.
«Lik»-knappen reagerer umiddelbart, hjertet fyller seg, telleren øker – før serveren i det hele tatt har svart. Dette er ikke bare illusjonen om hastighet fra artikkelen om mikrointeraksjoner, det går lenger: grensesnittet viser en tilstand som ennå ikke eksisterer, og forutsetter at den snart vil gjøre det. Jeg går gjennom hvordan man bygger dette trygt – med reell tilbaketrekning fra løgnen når forutsetningen ikke holder – og hvorfor manuell setState pluss catch er en dårligere versjon av det useOptimistic gir.
To nettbutikker, samme produkt, samme responstid fra serveren – likevel føles den ene raskere og mer tillitvekkende. Forskjellen ligger i mikrointeraksjoner: noen hundre millisekunder med animasjon som avgjør om brukeren stoler på det som skjer på skjermen. Jeg går gjennom dem fra bunnen av – trigger/tilbakemelding-modellen, hva som faktisk skjer inne i nettleserens rendringsmotor, og prefers-reduced-motion.
CSS Houdini er ikke én teknologi, men en samling spesifikasjoner i svært ulik grad av modenhet. Finn ut hvilken del som er produksjonsklar i dag, hvordan @property og paint worklet egentlig fungerer, og hvorfor resten fortsatt er eksperimentell.
