Dette var uken for innspillingen av den polske versjonen av Historien om Pi 🐯, antibacfulle trøndere 🥴 og lanseringen av minst syv nye JavaScript-biblioteker👨💻. Og 71 andre ting skjedde i frontend-verden!
CSS Overview i Chrome
Google Chrome har fått en ny eksperimentell feature med navn CSS Overview, som gir deg et overblikk over CSS-en brukt på en gitt side. Verktøyet gir deg en oversikt over hvilke farger og fonter som er brukt (og hvor de er brukt!), media queries og annen info som er kjekk å ha når det kommer til CSS. Siden featuren foreløpig er eksperimentell må du inn i settings for å skru den på, men alt dette er dekket i denne korte artikkelen.
Slik jobber norske utviklere med CSS
Hvordan re-renderes egentlig komponentene i React?
Hvis du er som oss, har du sikkert klødd deg på hodet i flere timer over hvorfor noen av komponentene absolutt ikke vil re-rendre eller endt opp med denne feilmeldingen litt for mange ganger: "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop".
I denne artikkelen er React-rendering-oppførsel vist med gode og enkle illustrasjoner. Det er til og med interaktiv visualisering hvor du enkelt kan se hva som trigger re-renders! Anbefales til alle React-utviklere, spesielt om du har ambisjoner om å bli en React-guru.
JS Generator
Uansett hvor mye man sitter i et programmeringspråk er det alltid kult å oppdage litt skjulte features, eller bare features man enda ikke har kommet over 🤷. For oss faller JavaScript Generators i denne kategorien. Man kan se på en Generator som en iteratorfunksjon som gjør et sett med operasjoner til den gir fra seg kontrollen, og når funksjonen blir kalt neste gang vil den fortsette der den slapp.
Dykan Kerner har skrevet et kort innlegg som går gjennom generators og noen eksempler på når de kan være nyttige.
7 ting du burde vite om JavaScript i 2020
Debounce
Om du noensinne har implementert et søkefelt som er responsivt når teksten endres, har du muligens vært borti at input-feltet kan føles lite responsivt. Dette skyldes da som regel at man bruker en liten onChange som fyrer av en filtreringsfunksjon hver gang en tast trykkes.
Denne artikkelen forklarer hvordan man kan sette opp en såkalt Debounce-funksjon, som utsetter funksjonskallet til etter en gitt tid har gått. Dette gjøres ved smart bruk av JS-skopet og delay-funksjonen.
Kule React Hooks
Det er ingen tvil om at React Hooks har gjort mye kode mer oversiktlig enn diverse tidligere implementasjoner har tillat. Ikke bare finnes det innebygde hooks som erstatter eldre react-implementasjoner som componentDidMount og this.setState({..}) (det var tider!), men nå finnes det også flere pakker som kommer med noen kule og praktiske hooks.
Denne lille artikkelen gir en oversikt over noen hooks som kan være morsomme å vite om, og kanskje til og med nyttige! Noen eksempler er useFetch for API-kall, useFiler for et virtuelt filsystem i browseren og noen enklere som useDarkmode og useHover.
Det var de kuleste nyhetene vi fant denne uken! Vi skal i hvert fall kose oss videre med en splitter ny Debounce-funksjon i prosjektet vårt — Vi preikes neste uke 👋
