Next 10.1: - Stapp­full av forbed­ringer!

ForrigeUke: Nye React Labs, neste Next, fantastisk 3D-knapp, mindre Firebase-SDK og fancy CSS-generatorer.

Next 10.1 er stappfull av forbedringer.
Next 10.1 er stappfull av forbedringer. Vis mer

Dette var uken der alle bedrev lurendreieri 🚗, noen hadde en snedig rebrandingidé ⛴ og Norge endelig fikk sine fem minutter i rampelyset!

Og 1 450 ting skjedde i frontend-verdenen!

React Labs ️⚛️

React har blitt et stabilt verktøy for veldig mange frontend-utviklere i løpet av de siste årene. Det kommer da noen nyheter her og der, men i all hovedsak så er de store endringene både sjeldne og få.

Det betyr ikke at gjengen som jobber med å videreutvikle React hviler på laurbærene sine — de jobber nemlig non stop med å lage nye snedige features som gjør brukeropplevelsen bedre for sluttbrukerne. Det er bare synd vi ikke har sett noe særlig til alt det arbeidet enda!

React Labs er et initiativ fra React-gjengen der man gjennomfører videosamtaler rundt ting de jobber med. Første kapittel ut handler om den forskningen som pågår rundt såkalte Server Components, og er en times lang Q&A-sesjon der flere React Core-teammedlemmer og andre store community-profiler dukker opp.

Jeg gleder meg til å fortsette å følge denne serien fremover!

Lag en helt fantastisk fin 3D-knapp! 🤗

Okei, så dette faller nok inn i kategorien “triks du ikke kommer til å bruke på jobben med det første” — men det betyr jo ikke at man ikke kan ha det litt gøy mens man lærer allikevel!

Josh Comeau — karen som nylig slapp et veldig veldig bra kurs i CSS for JavaScript-utviklere — har også en veldig fjong liten blogg der han deler en og annen godbit helt gratis. Og dette er definitivt en av dem.

I denne artikkelen lærer Josh oss å lage en avansert, men sjarmerende 3d-knapp, som er bygget opp av tre separate lag og massevis av fjonge animasjoner. Det er definitivt verdt tiden din!

Next 10.1 med masse goodies 🍭

Next er et av de beste rammeverkene for å lage React-baserte websider for tiden. Det er i alle fall min favoritt. Nå har det kommet en helt ny minor-versjon, og den er stappfull av forbedringer!

  • Mye raskere installasjon (det er jo fint for CI-pipelinen din i alle fall)
  • Ingen warnings om deprecations når man installerer lenger
  • 200 ms kortere tid fra man endrer noe i koden til man ser det på skjermen

I tillegg så kan du nå lage din egen 500 error-side! Det visste jeg ærlig talt ikke at man ikke kunne gjøre enda — men dette er jo en fin påminnelse om at det er på tide å gå igjennom diverse hobbyprosjekter og slenge inn en pages/500.tsx — bare for å være sikker.

Ref denne raskere tiden fra man endrer kode til man ser endringen i nettleseren lokalt — her gjøres det visst enda mer arbeid. Her er det med andre ord bare å glede seg til en så-godt-som-øyenblikkelig endring:

Firebase sin JS SDK blir mye mindre 🤩

Jeg elsker Firebase. Det er utrolig enkelt å komme i gang, det er godt dokumentert og det er mye kraftigere enn man skulle tro ved første øyekast.

Ulempen er at det å bruke firebase er dyrt. Ikke så mye for de som skal betale regningen som de som skal laste ned koden vår. Firebase sin JavaScript SDK er på ca 145 kb (det er mer enn React!), og det er fint lite som kan skje i appen din før den er lastet ned.

Heldigvis er det noen ildsjelder hos Google sitt Firebase-team som har satt i gang en heftig omskriving av kodebasen, og som gjør SDK-en — tro det eller ei — 80 % mindre!

Den nye SDK-en er på rett under 40 kb, og oppnår mye via tree-shaking og et par større breaking changes.

SDK-en er i en såkalt “early release program” (les: alpha), så det er ikke helt klart for produksjonsbruk enda — men det er utrolig flott at det skjer ting i dette spacet også!

Fancy CSS generatorer 💅

Selv om mye CSS kan skrives for hånd, er det også en god del som er skikkelig klønete. Det er ikke nødvendigvis på grunn av dårlig design fra gjengen som laget CSS — men det er visse features som ikke er spesielt godt egnet for å utforme for hånd.

Eksempler her er mer avanserte border-radiuses, box shadows og gradients.

Heldigvis så er det noen som har forbarmet seg over oss for å finne noen av de beste kodegeneratorene på internett, der du kan lage effekten din i et grafisk brukergrensesnitt, og copy-paste inn resultatet. Her anbefales det å ta en titt — om ikke for annet enn å bli inspirert av hva som går an å få til i CSS!

Og det var det for denne påskeuka! Ikke en dårlig uke på noen måte, egentlig! Tusen takk for at du leste nettopp dette innlegget — og husk å sjekk tilbake neste tirsdag for mer av det samme 🙌