Dette var uken for lite tilgjengelig tilgjengelihet 🔤, julen ble sunget inn 🎵, og en fantastisk transformasjon 🎅. Og 171 andre ting skjedde i frontend-verdenen!
Sånn gikk det da maskinlæring lagde det åttende slag julekake
På tide å migrere vekk fra Enzyme 🚨
Bruker du Enzyme på prosjektene dine? Da er det på tide å erstatte det med et annet testverktøy, skal vi tro skaperen av det uoffisielle adapteret @wojtekmaj/enzyme-adapter-react-17.
Han skriver i en fersk artikkel at Enzyme er dødt grunnet manglende vedlikehold og store endringer i React 18. Han anbefaler å ta i bruk React Testing Library som et godt alternativ.
Enzyme og React Testing Library er testverktøy for React som skal gjøre det enklere å teste output fra React-komponenter.
Ekspert: - Norge har stått i en ransomware-pandemi
Nettleserens renderingsyklus 📚
Hva er det egentlig som skjer når nettleseren skal gjøre en visuell endring?
I forrige uke dukket det opp en artikkel som beskriver hvordan man kan gjøre det enklere for nettleseren å prosessere og vise frem nettsider, ved å være litt bevisst på hvilke CSS-egenskaper man bruker.
Dette er første del i en kommende artikkelserie som tar for seg ulike aspekter av ytelse for frontend i nettleseren. Her kan vi lese hva som skjer idet noe sparker i gang en visuell endring, og alle stegene videre frem til det er klart på skjermen. I artikkelen lærer vi også noen triks i Chrome Devtools for å hjelpe oss med å undersøke om vi gjør noe unødvendig prosessering.
Smarthus vs. sånn drit man kjøper på Clas Ohlson
Throttling, debouncing og useDeferredValue 💭
Hvis du vil unngå laggete oppførsel når du gjør tyngre operasjoner i JavaScript i dag kan du bruke throttling eller debouncing. Dette er teknikker som på justerer hvor ofte kode eksekveres, sånn at det ikke skjer så ofte at det ødelegger brukeropplevelsen.
Debouncing er en teknikk som gjør at gjentatte kall mot en funksjon får den til å vente med å eksekvere til det har gått en gitt tid uten nye kall, mens throttling gjør at en funksjon blir kalt maks én gang per gitt tid. Forsøk på å kalle funksjonen i mellomtiden blir ignorert.
I React 18 sin pakke med concurrent mode-funksjoner kommer det en ny ganske så kul hook som heter useDeferredValue. Dette er en av flere “ut av boksen”-funksjoner i React 18 som også justerer kodeeksekvering. Mon tro om ikke disse funksjonene vil spare en god del kode for Reactutviklere der de tidligere har throttlet og debouncet?
I Bekks årlige julekalender fikk vi i forrige uke en forklaring med eksempel på hvordan useDeferredValue fungerer både i teori og i praksis. Ved å bruke en “deffered value” instruerer man React til å ta i bruk en gammel verdi, dersom rendering med den nye verdien tar litt tid. Dette er nyttig dersom det er større og tyngre operasjoner som skal gjøres.
Det var alt vi hadde for denne uken, tusen takk for at du leste gjennom! Gledelig jul, også sees vi på nyåret 👋