Dette var uken for sesongens første snøfall flere steder i Norge ❄️, et nytt stjernespekket album 🎶, en hellig high-five 🙏, og noen har brukt litt mer tid enn andre på å stille klokka 🕰.

Og inkludert et skikkelig lanseringsbonanza skjedde det mye gøy i frontend-verdenen!

React 17 🚀

For over to måneder siden publiserte React sin release candidate for den nye versjonen. Nå er den endelig ute, og denne versjonen har fått mye oppmerksomhet fordi den faktisk ikke inneholder en eneste ny feature 😱

Som Charlie Midtlyng skrev i uke 33 har de fokusert på forenkling av oppgradering av React i seg selv. Nå kan du velge å heller oppgradere appen din gradvis til nyere React-versjoner, slik at du i praksis kjører to versjoner av React samtidig. Da kan du ta i bruk noen nye fremtidige features, mens du samtidig slipper å brekke kode som avhenger av en gammel versjon. Det høres jo ikke så verst ut!

Ny Webpack, med breaking changes

tirsdag 13. oktober 2020

For å få til dette har de endret litt på hvor event handlers håndteres i DOMen. I stedet for å feste disse på document-nivå, gjøres det nå på rot-noden i React-appen din. Dette løser også et kjent problem som har oppstått når man prøver å bruke event handlers i annen kode kombinert med React-kode. Det blir med andre ord lettere å inkludere React i apper som også bruker annen teknologi.

I React 17 trenger du heller ikke importere React i toppen av filene dine 🎉 Vår kjære Kristofer Giltvedt Selbekk har skrevet en egen artikkel på dette som jeg anbefaler å lese om man vil lære mer om akkurat hvordan det fungerer.

Så, da var det bare å oppgadere React-versjon i appen din, vel? 😄🤭

“We expect that most apps can upgrade to React 17 without too much trouble”

Vil du sjekke ut alt som er nytt kan du lese mer i deres release notes.

Create React App 4 💥

Vår kjente og kjære Create React App kommer med ny og heftig major release. Denne har vi gleda oss til, og det ser svært lovende ut! 🙌

Den store snakkisen i denne releasen er støtten for Fast Refresh 🔁 Det har vært en eksperimentell feature i CRA siden tidlig i år, men nå er den her for fullt!

Dette kan best beskrives som den mer pålitelige storebroren til React Hot Loader, offisielt støttet av React. Gjennom pakken react-refresh lar CRA deg redigere React-komponenter i en kjørende app og fortsatt beholde komponentens tilstand. Jeg har ikke fått testet det selv enda, men det ryktes at Fast Refresh fungerer både smertefritt og lynraskt 🚀

Kanskje dette er noe for det neste hobbyprosjektet ditt? Denne releasen inkluderer blant annet også støtte for nye React 17, TypeScript 4 og ESLint 7. Hvis du allikevel kunne tenke deg å teste ut noe nytt, hvorfor ikke kjøre full, integrert pakke? 💪

Flere detaljer om andre forbedringer, features og breaking changes finner du her.

Node.js 15 💚

Når vi snakker om nye major releases — Node.js har også kommet med nytt krutt! Node.js 15 tar plassen til versjon 14 som nye current, mens sistnevnte går videre til long-term support.

I denne releasen er det flust av nye features, samt en breaking change som er verdt å snakke litt om.

Frem til denne releasen har unhandled rejections stort sett fått leve sitt eget liv – men det er det slutt på nå. I stedet for å vise en warning hvis et Promise ikke resolver, vil Node nå kaste en unhandled exception av typen UnhandledPromiseRejection som krasjer programmet ditt. Og det er jo egentlig akkurat det vi ønsker, for da har vi full kontroll på tilstanden i appen vår 👌

Dette skal norske utviklere lære seg i høst

fredag 2. oktober 2020

Som forventet kommer det også en ny major versjon av npm sammen med Node.js, nemlig npm 7. Svein Petter Gjøby skrev litt om dette forrige uke.

Det er verdt å merke seg at kun partalls-releases av Node.js får long-term support — noe som betyr at Node.js 15 ikke kommer seg til de vidstrakte LTS-sletter. Dette er med andre ord ikke versjonen å bruke ute i produksjon, da den kun vil oppdateres frem til 1.juni 2021. Den kan likevel være verdt å sjekke ut, siden Node.js 16 vil bygge videre på denne versjonen.

Flere detaljer om alle nye features og fixes finner du her.

Knapp, knappere, knappest 🔘

Har du, som meg, knota med css i timesvis for å prøve å få ting til å se akkurat riktig ut? Nå kan du puste lettet ut, i alle fall når det kommer til knapper.

cssbuttons er en samling med ulike knapper i HTML og CSS, med både live demo og kode tilgjengelig. Her finner du alt fra rene, basic knapper til knapper med kule animasjoner. Kanskje kan disse pryde ditt neste prosjekt, eller gi litt inspirasjon? Ta en titt da vel! 🤩

Selve nettsiden over er bygget i React, og kildekoden finner du i GitHub-repoet.

Skal du velge Flexbox eller Grid?

tirsdag 15. september 2020

Type | Treat 🍬

Halloween nærmer seg med stormskritt, og i den anledning har TypeScript-teamet kommet med en skikkelig treat til oss 🎃 Gjennom “spooky” kodeutfordringer får vi lære enda mer om språket, uansett om du er nybegynner eller viderekommen.

Hver dag denne uka frem til Halloween legges det ut en ny utfordring du kan bryne deg på. Løsningsforslaget legges ut dagen etter. Formatet minner meg om kode-julekalenderne vi ofte ser i desember måned, og dette må jo kalles en skikkelig førjulsgave 🎁

Jeg vet hva jeg skal bryne meg på denne uka, i hvert fall! 🥳

Les om hvordan du deltar her.

Remix Run 🕺

Skaperne av React Router, Ryan Florence og Michael Jackson, har noe spennende på gang: et nytt React-rammeverk som kan minne om Next.js, bare bygget på React Router. De har lagt inn masse arbeid i det, og det har blitt tatt noen interessante designvalg på veien.

Det som er ekstra kult er at de i stor grad baserer seg på eksisterende API-er, både for fetching og caching av data. Med bare et par linjer kode fungerer dette som en drøm, og gjør applikasjonen din super-snappy. I tillegg loader de CSS på en ganske interessant måte, nemlig basert på hvilken route du er på.

Beta release av rammeverket skal være rett rundt hjørnet, og selv om den ikke er feature complete enda er det moro å få en liten smakebit på hvordan dette blir. Jeg anbefaler deg å sjekke ut den 20 minutter korte videoen under om du er nysgjerrig og vil høre mer! 🤓 Ryan livekoder og snakker om hva som er nytt og hvordan det fungerer:

Remix Run kommer til å være et betalt produkt, men det kan godt være verdt å betale noen kroner om det er riktig for ditt prosjekt. Hvis du foretrekker eksempler i tekst-form har de også lagt ut en liten preview-post.

Lekende lett RPG 🎮

Du har kanskje hørt om rammeverket react-three-fiber, men visste du at du kan bruke det sammen med React til å lage spill? 👾 Det har Felix Laukel gjort, og en gratis live demo ligger ute hvis du vil teste det selv. Fullversjonen av spillet, kalt Colmen’s Quest, koster litt penger (og ser skikkelig stilig ut), men da kan du jo like godt lage ditt eget?

Mira koder nettsidene til nettbrettet reMarkable

torsdag 16. juli 2020

I denne artikkelen får du en gjennomgang steg for steg som viser hvordan du kan få dette til selv 🤯 Eksempelet er open source hvis du vil leke deg videre med kildekoden og bruke den som basis i ditt eget spill 🎉

Jeg har lenge hatt lyst til å teste ut react-three-fiber, og dette er jo en perfekt anledning til å lage noe skikkelig kult og samtidig lære noe nytt! Man får ikke mer moro enn man lager selv, eller hva?

Ny bestevenn på 1, 2, 3 🐶

Er du sånn som meg, har du mest sannsynlig vært inne på tanken om å skaffe deg et kjæledyr mens du sitter alene på hjemmekontoret. Hadde vært litt koselig med en firbeint venn i fanget mens du koder i vei? Look no further! Her har du en twitter-bot som legger ut innlegg av hunder som trenger nye hjem, og det er noe av det søteste 😍

Kildekoden finner du på GitHub.

Og til slutt — hvis du ikke har fått nok av morsomme og søte dyr enda (eller trenger en liten latter) kan du sjekke ut finalistene til Comedy Wildlife Photography Awards 🐻 Konkurransen avgjøres i kveld kl 18:00 på instagram-kontoen deres. Her er min personlige favoritt:

Det var alt vi hadde for deg denne uken, takk for nå! 🤗

Vi leses neste uke 👋

10 viktige prinsipper for sikkerhets­design

Applikasjoner eller infrastruktur, i skyen eller kjelleren - Even Lysen i Visma gir deg de viktigste tipsene for sikker kode.

mandag 26. oktober 2020