Slik kommer du i gang med CSS-variabler

Dette var uken for kreative brukervilkår ✅ , hvor jula snart har starta 🎅, og hvor man kan føle seg helt sjef med React hooks 🎣!

Og 18.268 skjedde i frontend-verdenen!

Next.js ⏩

I forrige uke kom versjon 10 av Next.js, og dette har de jobbet med over ett år!

De har gjort en del forbedringer.

• Blant annet ved å inline innhold fra <link rel='stylesheet' ... /> hvor det er fonter, gjør at browseren ikke trenger å ta en ny runde for å hente nødvendige tekststiler.
• I tillegg har de gjort en del endringer for Image-komponenten, blant annet at src attributtet bare tar relative stier for å ha høyere ytelse.
• De har også kommet med en ny komponent for lasting av scripts next/scripts for å laste inn tredjepartskode uten at det blir en flaskehals for lasting av sider. Kan være greit å sjekke ut <ScriptLoader /> for å få forbedret siden din!

De har rett og slett justert litt her og der, sjekk det ut da vel! 👇

Next.js konferanse

Apropos Next.js; en Next.js konferanse ble holdt forrige uke, og presenterte blant annet sine starter-kit for ehandel-nettsider (Next.js Commerce) og en annen pakke for å se på data om brukeropplevelsen til brukerene dine (Next.js Analytics).

Remix.run

Remix har vært i loopen lenge, men forrige uke skrev Nader Dabit en bloggpost Remix.run. Det er et React bibliotek som går for en “server-side-rendering” tilnærming.

Beta-versjonen av Remix ble utgitt 28. oktober, og det er verdt å ta en titt på hva det kan tilby!

Dessverre må man betale for dette, så hvis du er villig til å betale for det så kan du jo alltids sjekke ut nettsiden!

CSS-variabler 🎨

Har du brukt CSS-variabler før? Jeg hadde ikke brukt det før jeg kom på prosjektet der jeg er nå, og jeg må si at jeg digger det.

En kjent kar i frontend-verdenen, Kent C. Dodds, har kommet til unnsetning igjen med sine bloggposter! Trenger du en fin liten turtorial på hvordan komme i gang med CSS-variabler, er det bare å sjekke ut posten hans! ⏬

Han har også en post hvor man bør bruke CSS-variabler fremfor React Context, og du kan faktisk spare mye lastetid på å gjøre det!

Animasjoner i Framer Motion

Har du prøvd animasjonsrammeverket Framer Motion og lurt på hvordan de får til så smooth animasjon på bare 60 fps?

For det å animere layout er vanskelig, og er ofte dyrt med tanke på beregningskostnad og tiden det tar. Hakkete animasjon er også noe av det mer irriterende jeg ser.

Matt Perry (ikke Matthew Perry fra Friends fant jeg ut av…) har skrevet en post på hvordan de har prøvd å vise endring av layouter ved å bruke CSS sin transform for å få til utrolig kule animasjoner.

Om du ikke har vært bort i Framer Motion før kan jeg absolutt anbefale å sjekke det ut! 🙌

CSS for JS-utviklere

Trenger du CSS-superkrefter? Josh W. Comeau driver og lager et kurs som kan virke ganske bra!

For man kan gjøre ganske mye kult med CSS, uten å bli svett i panna når man ser detaljerte skisser fra designeren på teamet. Hva med å investere litt tid for å bli bedre på CSS? Det trur jeg kan være veldig lurt!

Nå er ikke kurset klart helt enda, men han sier det mest sannsynlig vil være klar tidlig i 2021!

Gatsby-nytt

Versjon 4.1.0 at gatsby-remark-embedder kom også!

Dette biblioteket er for å gjøre det enklere å legge til for eksempel Codepen, Codesandbox eller lignende sider inn på applikasjonen din.

Med sin minor oppgradering som kom her om dagen kan du nå også legge til testing-playground.com!

React Podcast 🔈

Helt til slutt legger jeg ved en liten podcast til deg om du vil kose deg med viktigheten av tilgjengelighet.

Her deler Marcy Sutton sine tips og triks for å få tilgjengelighet som en del av planleggingsfasen i stedet for at det blir prioritert bort! 👊

Dette var alt for denne gangen, vi snakkes! 🙋