Dette var uken for passiv-agressive kommentarer fra Github 🤖, Spotify gir deg den harde sannheten om hva du egentlig hører på 🎵, og hadde utviklere styrt verden hadde alt vært automatisert .

Og 1 470 juleting skjedde i frontend-verdenen! 🎅

Animasjon og React Router 5

Animerte transisjoner i React Router er ikke noe som kommer rett ut av boksen, dette er fordi de mener at hver applikasjon har sitt eget behov og at dette er vanskelig å få allsidig.

De har derfor laget et kurs for å vise hvordan man kan få til animerte transisjoner når du navigerer ved å bruke animasjonsbiblioteket react-transition-group.

Dette rammeverket lar deg putte det du vil animere inne i en <TransitionGroup />-komponent, så du kan faktisk bruke denne til å wrappe router-logikken din. I tillegg har du også <CSSTransition /> (og Transition, men nå skulle vi snakke om animasjoner 🚀) som tilføyer riktig animasjon på innholdet ditt ettersom det skal bli rendret (eller unmountet).

Sjekk ut artikkelen for mer info, veldig interessant lesing! Jeg er i hvert fall veldig gira på teste dette ut! 🎉

Slik bruker du React Hooks

mandag 5. november 2018

useEffect vs useLayoutEffect

Disse hooks’ene er veldig like, men som du sikkert skjønner så er det jo en forskjell på disse to.

Jeg hadde ikke hørt useLayoutEffect før jeg kom over artikkelen til selveste Kent C. Dodds!

UseEffect er nok den du også har brukt mest, men det som er greia her er at den blir kjørt etter React-komponentene dine har blitt rendret.

Så hvis du i koden din vil endre på DOM’en bør du bruke useLayoutEffect for å unngå flimring. Da vil effekten sin skje før nettleseren har lasta siden din og endringene i DOM’en vil skje før React renderer.

React render

Apropos render! Hvis du er nysgjerrig på hvordan React sin render oppfører seg, kan jeg anbefale denne artikkelen.

Giovanni Benussi beskriver og illustrerer så fint hvordan React fungerer med render av de ulike komponentene dine, og i tillegg viser hvordan useEffect sin oppførsel med cleanup-funksjoner blir oppi det hele.

Jeg trur React og render-logikk vil være noe jeg alltid må lese mer om! 😄

Slik kommer du i gang med CSS-variabler

tirsdag 3. november 2020

Masonry layout 🧱

Har du noen gang laget et bildegalleri, hvor hvert bilde har ulik høyde og du vil at de ulike bildene bare skal legge seg pent under hverandre nedover siden din?

Ja? Problemet ditt vil bli løst. Nei? Trur ikke på deg!

Tidligere i år kom Masonry Layout for CSS grid til nivå 3 i W3C sin Editor Draft, og jeg må si det ser veldig kult ut!

Jeg trur ikke jeg er den eneste som venter på at dette skal komme til oss! 🙌

Det var alt for denne gangen! Har dere lyst på litt mer frontend-ting (shameless promotion incoming 🤫) kan dere alltids sjekke ut bekk.christmas 🎅 Vi sees senere! 👋

Se traileren til Tailwind CSS 2.0

tirsdag 24. november 2020