Scoped CSS rykker stadig nærmere: - Syns dette ser veldig lovende ut!

JavaScript og uforanderlige verdier, Scoped CSS, ny Chakra, React-oversetting og litt inspirasjon i ukas ForrigeUke.

Caroline Odden har sett nærmere på Scoped CSS. 📸: Bekk / Ole Petter Baugerød Stokke
Caroline Odden har sett nærmere på Scoped CSS. 📸: Bekk / Ole Petter Baugerød Stokke Vis mer

Dette var uken for en liten tidsreise 📺, hvor det var litt uenigheter på jobben 💼, og hvor bordet endelig snudde 🪑.

Og 237 ting skjedde i frontend-verdenen!

JavaScript og uforanderlige verdier

En av hovedelementene i React er at man ikke skal mutere objekter eller andre typer data, for man bør heller lage en kopi slik at React får med seg at noe er endret og oppdaterer komponentene riktig.

Uavhengig av React og kravet om uforanderlige verdier har Josh W. Comeau hatt fokus på hva som skjer når man prøver å mutere verdier opprettet i JavaScript med const:

Videre har han skrevet en fin artikkel som forklarer forskjellen mellom mutation og assigment, les mer om det her.

Scoped CSS

Keith J. Grant er en stor tilhenger av Scoped CSS, og det har han vært i flere år.

Scoped CSS lar deg begrense stilingen din innenfor en komponent i applikasjonen din uten å bekymre deg for navnekræsj eller at ting skal blø nedover til komponenter som ikke skal ha den stilinga.

W3C sin kravspesifikasjon av Scoped CSS er nå ganske stabil og Chrome har til og med en prototype på dette. Hvordan kommer dette til å se ut spør du? Se på eksempelet under:

@scope (.container) {
  :scope {
    color: hotpink;
  }
}

Jeg syns dette ser veldig lovende ut! Les mer om det her.

Ny Chakra versjon rundt hjørnet

Neste versjon av Chakra kommer med spesielt to fine ting!

Det ene er en flunkende ny Stepper komponent med et ganske brukbart API. Det andre er som kommer er støtte for nøstete semantiske tokens, som gjør at du kan slette mye unødvendig duplikat kode:

Oversette React docs

Visste du at det finnes en side med oversikt over hvilke språk som dokumentasjonen til React er oversatt til?

translations.react.dev ser du hvor mange prosent av react.dev som er oversatt til ulike språk, og dette er arbeid som er gjort at folk i React-samfunnet! Foreløpig er det påbegynt oversettelse til 27 forskjellige språk.

Er det kanskje du som har lyst til å oversette dokumentasjonen til norsk? 🤩

Litt inspirasjon til slutt

Helt til slutt legger jeg ved en lenke til en kodesnutt for en nettside med ganske kul animasjon! Ved å bruke komponenter fra lamina, har han implementert en ganske kul forvrengning på en enkel nettside. Nettsiden ser rett og slett levende ut!

Sjekk ut koden da vel, kanskje du kan bli inspirert til å lage noe annet kult basert på dette?

Det var alt for denne gang! 👩💻