Dette var uken for en konspirasjonsteori, en nytt familiemedlem og en enorm skuffelse. Og 3271 ting skjedde i frontend-verdenen!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.

React-biblioteker for 2023 🎆

Skal du opprette et nytt React prosjekt i år, og er usikker på hvor du starter? I forrige uke fikk vi en fin-fin guide fra Robin Wieruch med anbefalinger på hva du bør bruke av alt fra package managers til testrammeverk for et moderne Reactprosjekt. Utvikleren lagde en tilsvarende guide i 2020, og har oppdatert den for i år.

Han foreslår f.eks å bruke Vite for klientsideprosjekter, Next.js for server-side rendered prosjekter, og Astro for statisk genererte prosjekter. Det finnes selvsagt gode alternativer her også, men disse er absolutt bra anbefalinger!

React Libraries for 2025

Søppeltømming i JavaScript! ♻️

Hvor mye tenker du egentlig på garbage collection når du programmerer? Hvis du er som meg — ikke så veldig mye. Det fikser seg som oftest helt av seg selv. Samtidig, dersom man plutselig får en minnelekkasje og det blir et problem, så blir det et problem. Derfor kan det være en god idé å vite litt mer om hvilke objekter som blir fanget opp av garbage collection, og hvilke som ikke blir det.

I denne nydelige artikkelen fra forrige uke har forfatteren brukt klassen FinalizationRegistry for å eksperimentere med garbage collection, og går gjennom eksempel etter eksempel for å se hvordan JavaScript håndterer objektene. Eval, for eksempel, viser seg å være en dårlig idé å bruke dersom du vil unngå minnelekkasjer!

I tillegg til at det er interessant å se disse eksemplene, er det et skoleeksempel på hvordan du selv kan gå frem for å debugge minneproblematikk i dine applikasjoner. Så da er det bare å dra opp DevTools, folkens! La oss rydde opp i litt minneproblematikk!

Experiments with the JavaScript Garbage Collector

HTML for alle penga!

HTML ligger til grunn for alt vi gjør på webben, men det blir ofte oversett. Problemene med dårlig håndtverk på HTMLen blir likevel veldig fort synlig hvis man prøver ut skjermleser eller skal optimalisere for søkemotorer. Dersom vi spiller på lag med HTML blir dessuten utviklerjobben mye enklere!

Hvis du kjører en aldri så liten inspect på nettsidene dine, og innser at det er et lite inferno av nestede <div> der, så er dette nyheten for deg! web.dev har laget et fullstendig HTML-kurs, og i forrige uke ble de siste modulene publisert. Ta en titt davel!

All of Learn HTML! is available

Personvernkurs for utviklere

Men HTML-kurset var ikke det eneste kurset web.dev publiserte i forrige uke. De lanserte også et personvern- og sikkerhetskurs for frontendutviklere, og det er brennaktuelt 🔥 Her lærer vi kjempegode prinsipper om å ikke samle inn mer data enn vi trenger, hvordan man bør forholde seg til tredjeparter, kryptering etc.

Dette er konsepter som er viktige, men som vi stadig vekk ser blir brutt og ikke tenkt over i mange løsninger på nettet. Bli med og ta på deg personvernshatten du også, undertegnede skal iallfall følge med på denne kursmodulen! 👒

Introducing Learn Privacy

Det var alt vi hadde denne uken! Undertegnede tar seg en aldri så liten pause fra bloggosfæren for å være i mammaperm, men <ForrigeUke />-toget tusler likevel videre i neste uke 🚆 Vi sees! 👋

ForrigeUke (uke 8, 2023) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dette var uken da mulighetsvinduet til å oppleve IE ble enda smalere 🙅 Og 6543 ting andre ting skjedde i frontend-verdenen!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.

Endelig støtte for container queries i CSS! ⭐️

En utrolig etterlengtet feature er endelig støttet i alle store browsere — nemlig container queries. Dette vil gjøre jobben langt enklere når du skal lage responsivt design! Med container queries kan du basere deg på mengden tilgjengelig plass en container har, fremfor i dag hvor du må bruke media queries som baserer seg på størrelsen av nettleservinduet.

Slik fungerer det: Du definerer en containment context ved å sette container-type attributtet på en CSS-selector, og så kan du bruke @container lenger ned i “treet”. Da vil du få en komponent som forholder seg til størrelsen til containeren, i stedet for hele nettleservinduet!

.wrapper-rundt-innhold {
  container-type: inline-size;
}

@container (width > 700px) {
  .innhold {
    font-size: 2em;
  }
}

Container queries land in stable browsers

core-js står ved et vendepunkt

I forrige uke kunne vi lese et interessant og ganske trist innlegg fra skaperen av core-js om hvordan det det er å jobbe med gratis open-source kode. Ifølge utvikleren har arbeidet med dette over 9 år vært en svært utakknemlig jobb. Forsøk på å få inn litt penger for å forvalte biblioteket slik at han har noe å leve av resulterer i lite avkastning, latterliggjøring og hets.

core-js er et bibliotek som de aller fleste som bruker JavaScript bruker. Noen direkte, men de aller fleste indirekte via f. eks babel. Det tilbyr polyfills slik at utviklere kan bruke ny JavaScript-kode uten å knekke eldre nettlesere. Med ca. 250 millioner nedlastninger fra npm hver måned er det ett av de mest brukte bibliotekene, og det hele blir forvaltet frivillig av én kar. Trikkefaktor, sa du?

Så, hvorfor er dette viktig? Veldig mange avhengigheter vi bruker er av denne typen — laget av noen som gjør dette på helt frivillig basis, og som får lite igjen for strevet. Hvordan skal vi som utviklersamfunn forholde oss til gratis open-source kode? Hvordan kan vi jobbe for å sikre at maintainere som denne, som virkelig brenner for dette, kan få nok igjen for det til å leve av?

core-js/2023-02-14-so-whats-next.md at master · zloirock/core-js

SEO — hva er lurt å huske på?

Har du noengang tenkt på hvordan du lander nettsiden din høyt blant søketreff i søkemotorene? En ting er jo at det er viktig å ha mange klikk, men det er også en rekke små og store ting du kan gjøre for å få folk til å velge ditt søketreff over andres, og få søkemotorene til å prioritere din nettside over andres.

I forrige uke kom vi over en kjempefin huskeliste på hva du bør tenke over. Alt fra å legge inn en god og klikkbar tittel og beskrivelse, til å sørge for små bundles og rask lastetid for å få søkemotorene til å prioritere nettopp din nettside!

Technical SEO Basics for React Developers

PWA til folket! ✊

Hvis du noen gang har forsøkt å lage en progressive web app som fungerer for både desktop, Android og iOS, så har du kanskje opplevd at det ikke har vært helt smertefritt! Her snakker jeg iallfall ut fra egen erfaring.

En progressive web app er, veldig forenklet, en måte å gjøre en nettside “installerbar” som en app på mobilen. Det vil si at du kan lage en vanlig web app, og samtidig la brukeren få opplevelsen av at de har en mobilapp fremfor en nettside, om det er ønskelig.

Dette høres veldig bra ut, og fungerer rimelig greit på Android-telefoner. Men når man så skal gjøre tilsvarende for iPhone og iPad har det ikke vært like enkelt, og da undertegnede testet ut dette for to år siden så det ikke ut til at det kom til å skje så mye på denne fronten.

Det var iallfall inntil releasen av iOS and iPadOS 16.4 beta 1 i forrige uke! Da tok Apple et stort steg i riktig retning for å gjøre dette til en langt mer hyggelig affære! Nå tillater de blant annet installasjonsfunksjonalitet (Add To Homescreen) fra flere nettlesere enn kun Safari og push-notifikasjoner på lik linje med andre apper. Så blir det spennende å se om dette fører til et rush med nye PWAer?

Web Push for Web Apps on iOS and iPadOS

Det var alt vi hadde for denne gang! Tusen takk for at du leste, også sees vi i neste uke! 👋

ForrigeUke (uke 7, 2023) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dette var uken vi gikk fra 2022 til 2023 med brask og bram! Og 31 1222 ting skjedde i frontend-verden!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.

JavaScript-rammeverk i 2023?

Siste uken i året er det på tide å reflektere litt over året som har vært, og se fremover på året som kommer. Hva skjer egentlig i frontend-økosystemet nå? Dette har Ryan Carniato grublet på, og resultatet er en interessant blogpost om de større linjene i frontend-verdenen.

En ting mange er enige med han i, deriblant vår egen Kristofer Selbekk, er at routing på klienten i form av Single Page Applications ikke lenger bør være go-to løsningen for nye nettsider. De brukes ofte til mye mer enn de effektivt kan levere, og gir oss enorme bundlestørrelser og treg innlasting. Vi begynner å se mer satsning på server routing, og eksempler på dette er rammeverk som Astro eller Server Components i Next.

I artikkelen blir det videre spådd mindre hydrering og mer server components og signals for nyåret. Typet JavaScript er kommet for å bli.

Han avslutter med å påpeke at kompleksiteten er større i mange av de nye teknologiene, og at vi frontendutviklere kommer til å få kjørt oss i året som kommer!

Developer experience expectations have never been so high while the demand on user experience isn’t lessening. So whether you are waiting for the next revolution or living at the bleeding edge, buckle up because you are in for a ride whether you signed up or not.

JavaScript Frameworks - Heading into 2023

Interessante prosjekter å følge i 2023

Og hvis du nå nettopp leste forrige avsnitt, og tenker “Oi! Her må jeg henge med på utviklinga!”, så har vi den perfekte oppfølgingsartikkelen for deg. Første dagen i det nye året kom det nemlig en artikkel om spennende prosjekter å sjekke ut — og (spoiler alert) førsteplassen går til en kandidat som ble namedroppet i forrige artikkel også, nemlig Astro!

Astro har en litt annerledes frontend-arkitektur som fokuserer på isolering av ulike elementer på nettsiden, med det de kaller Astro-islands. Fordelene skal være mindre javascript, kjøretid og bedre parallellisering. Det er også støtte for å bruke ditt favoritt-komponent-bibliotek (react, svelte, Vue) uavhengig!

- (ForrigeUke uke 32, 2022)

Andre prosjekter som blir nevnt er blant annet Remix, og av bundlere blir vi servert både Turbopack og Bun. Turborepo blir nevnt som et interessant byggesystem, og Tauri dras frem som et alternativ til Electron for desktopapplikasjoner.

The 6 JavaScript Projects to watch in 2023

Feilmeldingstips

I forrige uke kom vi over et lite tips som vi tenkte å dele villig videre! Dersom du ønsker å skrive gode feilmeldinger kan du inkludere originalfeilen med cause! Så enkelt, så greit 💃

Cory House on Twitter: "Problem: You want to re-throw a JavaScript error to provide a friendlier error. But, you want to keep the original error details too.Solution: Include the original error via `cause`.More: https://t.co/TyF4IyYxju#javascript pic.twitter.com/m1iv2DXhU2 / Twitter"

Problem: You want to re-throw a JavaScript error to provide a friendlier error. But, you want to keep the original error details too.Solution: Include the original error via `cause`.More: https://t.co/TyF4IyYxju#javascript pic.twitter.com/m1iv2DXhU2

Native datovelgere 🤦‍♀

Vi avslutter denne gangen med en liten rant om datovelgere. Datovelgere er noe herk. Man kan ofte ikke bruke den native datovelgeren, fordi den ikke er universelt utformet, men det er også utrolig vanskelig å lage en god datovelger selv. Og forresten skal vi helst ikke finne opp datovelgeren på nytt heller.

Denne stakkars redditbrukeren ble så frustrert over Safaris native datovelger at han endte opp med å omgå hele datovelger-problematikken fullstendig ved å bare lage alminnelige inputfelter for dato, måned og år. Kanskje ikke så dumt?

Det var alt vi hadde for 2022! Godt nyttår! 👋 🎆

ForrigeUke (uke 52, 2022) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dette var uken for maks innsats i stolleken 🎵, en nære-på opplevelse 🦈, og god, gammeldags prompehumor 💨. Og 442 022 skjedde i frontend-verdenen!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.

Remix + Shopify = ? 👩‍👩‍👧‍👦

Remix-teamet blir en del av Shopify! Det forteller både Remix og Shopify i hver sine bloggposter i forrige uke. Remix melder at Shopify skal gi dem både økonomisk og annen støtte på lengre sikt, samtidig som de kommer til å fortsette å jobbe open source slik som de har gjort tidligere.

Shopify er også fornøyde med samarbeidet, og peker på at med Remix i fundamentet kommer de til å få til mye mer med blant annet Hydrogen, som er deres React-baserte rammeverk for å bygge frontends til Shopify-applikasjoner, og oppgir dette som en av grunnene for anskaffelsen.

Så dersom noen har vært usikre på om de skulle satse på Remix i frykt for fremtiden, så innbiller undertegnede seg at det nå er på tide å senke skuldrene et par gode hakk, da de har fått en solid støttespiller i ryggen! Så får tiden vise hvordan dette samarbeidet blir.

Remixing Shopify

CSS Media Queries blir enklere 🎉

Av og til skal det ikke så mye til å gjøre meg glad, og i forrige uke kunne vi lese hos CSS-tricks noe jeg ikke ante at jeg trengte før jeg leste om det: fremover kan vi bruke operatorer for å spesifisere viewport i media queries!

Artikkelen forteller oss at i stedenfor @media (min-width: 600px) { ... } kan vi skrive @media (width >= 600px) { ... }

Personlig surrer jeg alltid med førstnevnte, men operatorer klarer jeg alltids å henge med på!

Og jo mer komplisert det blir, jo penere blir eksemplene. Trenger du @media (min-width: 400px) and (max-width: 1000px) { ... } kan du heller skrive @media (400px <= width <= 1000px) { ... } Vakkert, eller hva?

Den eneste tornen i siden er at vi må vente på at Safari implementerer dette, som den eneste større nettleseren som mangler dette, men forhåpentligvis slipper vi å vente altfor lenge!

The New CSS Media Query Range Syntax | CSS-Tricks

Web Sockets, Web Workers eller Service Workers? 📚

Leser du denne overskriften og kjenner på en dårlig samvittighet for at dette er noe du burde visst mer om? Da har du kommet til rett sted, for i forrige uke fikk vi en nydelig oppklarende artikkel om nettopp dette!

Web Sockets

Web Sockets etablerer en åpen og persistent toveis kobling mellom nettleseren og serveren, slik at man kan sende og motta meldinger over samme kobling, basert på events. Dersom nettleseren benytter seg av push-notifikasjoner, bruker de sannsynligvis web sockets.

Web Workers

En Web Worker lar et skript kjøre på en separat tråd, slik at du kan kjøre tunge operasjoner, uten å blokkere main thread. På den måten kan man få kjørt en tung beregning, uten at grensesnittet henger seg!

Service Workers

Sist, men ikke minst — Service Workers. De er en type Web Workers som gjør at man kan la håndtere nettverkskall mellom nettleser og server. På den måten kan man blant annet få nettsiden sin til å fungere fint offline!

Enkelt og greit! Les hovedartikkelen under for utdypende informasjon.

The Difference Between Web Sockets, Web Workers, and Service Workers | CSS-Tricks

Det var alt vi hadde for denne gangen, takk for at du leste! 👋

ForrigeUke (uke 44, 2022) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dette var uken for en hellig ku 🐄, viktigheten av et designsystem 🖥, og politimenn som må snu i døra 👮 Og en googolplex ting skjedde i frontend-verdenen!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var

#id24

I forrige uke var det Inclusive Design 24! Det er en heldigital minikonferanse om tilgjengelighet og inkludering, som sender foredrag i 24 timer i strekk. Heldigvis for oss har de lagt ut alle foredragene gratis slik at vi fortsatt kan se dem, her kommer det tre kjappe anbefalinger!

Hvordan lage en støttende og trygg arbeidsplass?

Clare Sudbery holdt en skikkelig fin talk som i stor grad handler om hvorfor det er viktig og lønnsomt å jobbe for å minimere følelser av utilstrekkelighet i teamet, hvilke ting vi gjør underbevisst som vi bør unngå, og generelt hvordan vi kan oppføre oss for å få til god psykologisk trygghet på arbeidsplassen!

Tilgjengelighetssjekklister?

Marion Couesnon holdt et foredrag om sjekklister for tilgjengelighet. Hadde det ikke vært digg å ha en oversikt over hvilke ting du bør sjekke ut, som utvikler, som designer, etc. for å sikre at du dekker WCAG-kravene? Det syntes selskapet Marion jobber for også, og hun begynte dermed arbeidet med å utforme dette. I foredraget forklarer hun at det ikke er bare bare, og at det er ganske mange ting man må tenke på og ta hensyn til når man skal lage noe sånt. Samtidig løser det ikke alt, men det løser noe.

Tilgjengelighet for nevrodiverse

Rachel Morgan-Trimmer snakket om hvordan vi inkluderer nevrodiverse mennesker i arbeidet vårt. Hva er nevrodiversitet, spør du? I all hovedsak beskriver det ulikhet i kognisjonen, og det er en paraply for tilstander som påvirker kognisjonen som blant annet dysleksi, ADHD, autisme, dyskalkuli osv. Å lese denne teksten for eksempel, kan oppleves svært ulikt fra person til person, og det å tenke over hvordan vi lager nettsider for de nevrodiverse — er noe vi bør gjøre mer av.

Tunge beregninger og optimalisering

Hvis nettsiden din henger på gjentagende operasjoner, f. eks når brukeren skal skrive inn noe i et søkefelt, så er det flere måter å håndtere dette på. Hvis du bruker React 18, kan (og bør?) du sannsynligvis håndtere dette ved å bruke metoder for concurrent rendering, som for eksempel startTransition.

Alternativt kan du se på andre teknikker, som throttling og debouncing. Dette er teknikker som begrenser eksekveringsraten av tunge operasjoner, ved å f. eks utsette eksekvering til brukeren har sluttet å skrive. I forrige uke kom det en forklarende artikkel på hva det er og hvordan du implementerer throttling og debouncing i React, som det kan være greit å ta en titt på 🙇

Throttle and Debounce in Javascript and React

Lastetid til besvær

Har du tenkt noe på hvor lang tid nettsiden din bruker på å laste? Det er nok mange som glemmer det litt i utviklingens hete, og i forrige uke kom undertegnede over en artikkel som ser på hvor mye tid vi kaster bort på å vente på at nettsider skal laste. I artikkelen refereres det til en eldre artikkel som kan informere om at lastetiden til nettsider ikke har gått noe særlig ned de siste 10 årene! 😑

Årsaken sies det ikke så mye om, men vi kan vel spekulere i at det dreier seg om at størrelsen på filene nettleseren laster ned i snitt er betraktelig større? Uavhengig av årsak har du mye å tjene på å redusere lastetid, så da er det bare å begynne å kikke på dine Core Web Vitals!

The Need for Speed, 23 Years Later

TypeScript 4.9 Beta

I forrige uke kom TypeScript 4.9 Beta, som du kan prøve ut med en liten kommando: npm install -D typescript@beta

I denne nye utgivelsen får vi en ny operatortype som heter satisfies, som lar oss typematche på uttrykk, uten å endre typen på det resulterende uttrykket. De justerer også litt på bruken av in, og alt i alt fikser litt småtterier her og der.

Announcing TypeScript 4.9 Beta

Det var alt for denne gangen! Takk for at du leste, også sees vi neste uke 👋

ForrigeUke (uke 38, 2022) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dette var uken for en mais-elskende katt 😸, en skikkelig unnamanøver 🏃 og fantastisk nordlys i Alaska ☁️ Og en hel hop av ting skjedde i i frontend-verdenen!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var

React Router 6.4 🎉

React Router fortsetter å dytte å komme med nye og gode forbedringer, og denne gangen har de oppdatert med blant annet automatisk håndtering av lasting og oppdatering av data i komponenter, ganske så nice feilhåndtering og attpåtil litt magi for å håndtere formdata og rendering av nye komponenter basert på dataen.

Okay, det siste scenarioet der var vanskelig å forklare og sikkert enda vanskeligere å forstå. Men de viser og forklarer enkelt i release-posten deres under, så ta en titt! Jeg gleder meg til å teste ut dette 👑

React Router 6.4 Release

Minnelekkasje-leiting

Meta har open sourcet et testrammeverk som oppdager minnelekasjer for deg! I korte trekk lar det deg definere noen testscenarier, og så kjører den gjennom testene via en hodeløs nettleser og tar heap snapshots underveis. Så finner den mulige problemer og sammenstiller disse.

Undertegnede har ikke testet dette selv ennå, men det virker jo som en ganske god ting å dytte inn i en pipeline?

I artikkelen går de i detaljer om hvordan det fungerer og hvordan du kan ta det i bruk. Sjekk det ut!

MemLab: An open source framework for finding JavaScript memory leaks

npm-packages fra start til slutt

Er du på jakt etter en kjapp guide på hvordan du lager et ordentlig oppsett for effektiv og sikker publisering av pakkene dine til npm? I forrige uke publiserte Snyk en artikkel der de viser blant annet oppsett av package.json, hvordan du bygger slik at du støtter både commonjs og ecmascript modul-format, håndtering av TypeScript, setter opp tester og hvordan du setter opp en robust github actions pipeline for publisering til npm.

De nevner også selvsagt hvordan man legger inn Snyk i pipelinen sin, som er deres egne sikkerhetsprodukt, men om man ønsker å bruke det eller noe helt annet for å scanne pakkene sine, det velger du selvfølgelig helt selv!

Best practices for creating a modern npm package | Snyk

Tilgjengelig navngiving ⭐️

Når vi lager knapper og lenker på nettsidene våre, er ikke navngivingen av disse helt vilkårlig. For at assisterende teknologi som skjermlesere, pekerteknologi og taleassistenter skal fungere godt, må vi sørge for at alle knapper og lenker har et godt navn. Et eksempel på dette kan være at en “x” i hjørnet på en modal må ha tekst koblet til seg som sier “lukk” eller tilsvarende. Dette kan f. eks være en aria-label.

I forrige uke fant undertegnede en artikkel som handler om hvilke rettesnorer man bør følge når man navngir elementene sine. Tipsene er forholdsvis enkle, men viktige. Som at man bør strebe etter unike navn, og unngå lenke-/knappetekster av typen “les mer”. Ta en titt da vel!

Better accessible names

Det var alt vi hadde for denne uken, kom tilbake neste uke for flere saftige nyheter og tips! 👋

ForrigeUke (uke 37, 2022) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dette var uken for moderne nettsider 🕸, haisikkerhet 🦈, og et lite flexbox cheat-sheet. Og masse nytt skjedde i frontend-verdenen!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.

Optimalisering av nettsider — mål og fiks 💪

I forrige uke skrev utviklerne i gov.uk om hvordan fjerningen av jQuery har påvirket hastigheten på nettsidene sine. Dette er en slags del to av et tidligere blogginnlegg, som dreide seg om hvorfor og hvordan de valgte å fjerne jQuery fra sidene.

jQuery-scriptet på 32 kb var ikke så stort i seg selv, men det ble lastet inn på hver eneste side, og blokkerer rendering av siden. Ved å plukke vekk jQuery kunne de redusere tiden det tok før første render — kanskje spesielt for brukere med dårlig internett-tilkobling eller trege enheter.

Den kanskje aller mest interessante take-awayen fra artikkelen, er at de kjører automatiske tester for å sjekke web vitals hver dag på nettsidene, med simulerte enheter og ulike tilkoblingshastigheter. Fordi de gjør dette hver dag, kan de monitorere hvordan endringer som skjer på nettsidene påvirker hastigheten for brukerne sine! Det er musikk i mine ører 👂 🎵

The impact of removing jQuery on our web performance

Nydelige bildekollasjer med CSS? 😍

Det er sjeldent jeg leser en artikkel med CSS tips og blir skikkelig inspirert, men det ble jeg i forrige uke! CSS-tricks disket opp med en ny artikkel om hvordan man kan lage en slags kollasje av bilder med custom former, og mange eksempler på dette. Det er så pent!

Trikset (hehe) er bare litt god bruk av CSS grids, transform/translate og clip-paths, og voila! Ta en titt da vel! (P.S. I skrivende stund har del to også blitt lagt ut.)

CSS Grid and Custom Shapes, Part 1 | CSS-Tricks

Hvordan fungerer egentlig re-renders i React?

I React oppdaterer ikke vi DOMen direkte, men vi beskriver hvordan vi ønsker at DOMen skal se ut, også håndterer React oppdateringen for oss. Dette er jo en massiv forenkling, men det fører også til mye forvirring rundt hvordan re-renders egentlig fungerer i React.

Hvis dette er noe du kjenner du ikke er helt stødig på, eller kanskje du bare klør deg i hodet over hvorfor komponenten din rendres på nytt (eller ikke), så vil jeg anbefale å ta en titt på Josh Comeaus nye blogginnlegg. Der tar han for seg vanlige feilslutninger, og går gjennom hvordan dette egentlig henger sammen på en fin og pedagogisk måte.

Why React Re-Renders

JavaScript-motoren i et lite scroll-eventyr 🖱

I forrige uke kom undertegnede over et lite hobbyprosjekt, som forklarer hvordan JavaScript-motoren fungerer, ved at du scroller deg gjennom og får forklaringer og illustrasjoner. Det var jo både pedagogisk og pent, og på desktop får du fire scenarioer å velge blant! Herlig skaperglede! ⭐️

JavaScript: V8 Engine

Og med det var denne ukens <ForrigeUke /> over, takk for meg, også sees vi neste uke! 👋

ForrigeUke (uke 33, 2022) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dette var uken for en state-of-the-art nettsideopplevelse 🎨, vi må bli flinkere til å stå opp mot “the cookiemonster” 🍪, og ….irish? 🍹 Og 701 ting skjedde i frontend-verdenen!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verdenen i uken som var.

Vite.js 3.0 er ute 📰

Tidligere i år skrev vi om byggeverktøyet Vite, og hvordan du kunne migrere fra Webpack til Vite. Rykter i kontorlandskapet vil ha det til at det blir et mye mindre skeleton, og betraktelig raskere byggetider med Vite.js enn tilsvarende for Create React App! Nå er Vite.js 3.0 ute, og de sier at de kommer til å lansere en ny major versjon hvert år, for å holde tritt med Node.js sin release schedule.

Med releasen følger ny dokumentasjon, nye start templates i det JavaScript rammeverket du skulle ønske, og diverse utvikler- og byggeforbedringer. Ta en kikk på annonseringsposten da vel!

Announcing Vite 3

CSS-tips 🔥

Har du noen gang irritert deg over at innhold spretter mens du leser eller prøver å klikke på noe? Ofte er det bare fordi et bilde endelig ble ferdig med å laste — og det er faktisk helt unødvendig at det spretter! Ved å bruke aspect-ratio i kombinasjon med bredde eller høyde på bildet, så blir riktig størrelse satt av, og vi slipper irriterende spretting.

img {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Dersom du allerede har satt høyde og bredde på selve bildet, kan du nøye deg med height: auto for samme effekt! Så med det har vi fiksa “bildelastingsspretten” 🎉

Avoiding layout shifts: aspect-ratio vs width & height attributes

Bedre Core Web Vitals = mer salg? 💰

Jeg har en juvel av en artikkel å dele med dere fra forrige uke! En e-handelsbutikk har delt i detalj om hvordan de dannet et tverrfaglig team som fokuserte på ekte brukersentriske metrikker som web vitals, og korrelerte dette med faktiske salg og andre forretningsmetrikker. Resultatene viser at bedre core vitals ga mer salg! 💸

Her blir vi fortalt om reisen mot det målet de satte seg om å få til en større kulturell endring, der de klarte å bryte ned siloer i organisasjonen og kommunisere viktigheten av tekniske målinger ved å bruke forretningsorientert språk. Så hvis du også synes at det er vanskelig å kommunisere verdien av å måle LCP, kanskje ta en ekstra titt på denne?

Luxury Retailer Farfetch Sees Higher Conversion Rates For Better Core Web Vitals

React-biblioteker i 2022 📚

Er du usikker på om riggen din er up-to-date i 2022? Eller kanskje du lurer på hva det beste biblioteket for data fetching i React er nå om dagen? Ta en titt på denne akkumulerte lista over gode biblioteker! Her er det oversikt over det aller meste av avhengigheter du kan komme til å trenge i prosjekthverdagen — om det er autentiseringsbiblioteker, CSS rammeverk eller formatteringsverktøy. Den går rett inn i bokmerker hos undertegnede iallfall!

Det var alt for denne uken, tusen takk for at du leste, også sees vi i neste <ForrigeUke />! 👋

ForrigeUke (uke 28, 2022) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dette var uken for eksotiske dyr 🐫, utrolig dårlig humor 🤡, og knuste drømmer 🐶 Og 808 ting skjedde i frontend-verdenen!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.

Fokuser på fundamentet 🏗

Vi liker ofte å fortelle om ukens nyheter i et frontendrammeverk her i redaksjonen, men denne uken kan vi heve blikket og tenke litt over hva som egentlig er viktig, uansett hva slags frontendkode vi shipper av gårde. I forrige uke snublet nemlig undertegnede over en reddit-post som påpeker at uansett hvilket frontendparadigme du lener mot, så er det noen fundamentale ting du bør tenke på!

Trådstarter nevner blant annet ytelse og metrikker. Mål hvor lang tid det tar før man kan interagere med siden og hvor lang tid det tar før man får interessant/viktig innhold. Dette er viktig uavhengig av hva slags rammerverk du bruker.

De argumenterer også for å lære seg om ulike teknikker for å vise innhold: Lær om server side rendering, statisk sidegenerering, rehydrering osv. slik at man kan bruke det for å avgjøre hva som er best for ditt case.

Så kanskje, fremfor å fokusere på det neste store rammeverket, vi skal fokusere litt mer på de grunnleggende teknikkene?

Web Vitals | Articles | web.dev

Unngå å blokkere main thread 🛑

Vi fikk også neste del av serien Frontend Web Performance: The Essentials. Denne delen gir oss en god innføring i flere teknikker for å holde main thread kjørende så raskt som mulig for å ha en velfungerende og brukervennlig frontend.

Vi lærer blant annet om Web Workers, som kan være supernyttig hvis du skal prosessere store mengder data, gjøre veldig mange requests, eller ha langtidskjørende, blokkerende algoritmer. De er likevel ikke superenkle å bruke. Det aller enkleste tipset, som kommer helt i slutten av artikkelen, er å flytte de tyngste jobbene til serveren 🤓

Frontend Web Performance: The Essentials [1]

Tabs eller spaces har fått en fasit! ⌨️

I forrige uke ble vi gjort oppmerksomme på at Prettier vurderer å sette useTabs={true} som default i Prettier 3.0. Dette er i utgangspunktet ikke sånn superspennende nyheter, men argumentet for hvorfor var det!

I issuet på GitHub får vi nemlig vite at dette er et tilgjengelighetsspørsmål. Blant annet lærer vi at for brukere av leselist er det mye bedre å bruke tabs fordi man slipper å kaste bort plass til spaces, i tillegg til at på prosjekter som bruker tabs kan utviklere sette tab-bredden til å være så stor eller liten som de trenger, helt uten å lage problemer for de andre utviklerne.

Rich Harris on Twitter: "TIL Prettier is considering making tabs the default in 3.0. This is huge - it would make an entire set of programming languages more accessible (if you're somehow still pro-spaces, read this comment to instantly convert), and, more importantly, vindicate my personal preferences https://t.co/qZvGbQCklb pic.twitter.com/MYxY5wYLI3 / Twitter"

TIL Prettier is considering making tabs the default in 3.0. This is huge - it would make an entire set of programming languages more accessible (if you're somehow still pro-spaces, read this comment to instantly convert), and, more importantly, vindicate my personal preferences https://t.co/qZvGbQCklb pic.twitter.com/MYxY5wYLI3

Nettlesere i juni ⏭

Vi har fått hovednyhetene på hva som skjedde på web plattformen i juni!

Blant annet har streams blitt tilgjengelig i alle de store nettleserene, som betyr at vi kan få programmatisk tilgang til strømmer av data motatt over nettverket og prosessere det med JavaScript. Det betyr at du f. eks kan legge på effekter på videoer i real time, eller på en elegant måte kan polyfille nye bildeformater.

New to the web platform in June

Det var alt for denne gang, tusen takk for at du leste! 👋

ForrigeUke (uke 26, 2022) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.

Gratulerer med dagen kjære leser! 🇳🇴 Innimellom 17. mai-frokost og barnetog kan vi fortelle at forrige uke var uken for sure biler 🚗, utrolige redninger 🐶 og sultne hakkespetter 🐦. Og 1032 ting skjedde i frontend-verdenen!

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.

Google I/O

I forrige uke var det Google I/O, en årlig konferanse som i år ble strømmet gratis på nett, og som tar for seg smått og stort av det de foretar seg på Google. Side om side med nyheter om nye klokker, mobiler og operativsystemer for mobil, fikk vi også masse stoff om mobil- og nettsideutvikling!

Vi tar en liten titt på et utvalg saftige nyheter derfra!

Nydelige nettsidetransisjoner 🔥

En av foredragene handlet om hvordan man fremover kan få til fine sidetransisjoner på nettsidene sine uten at de må være Single Page Applications. Google utvikler nemlig nye APIer for dette i nettleserne sine, og ved å bruke disse kan man også style transisjonene sine helt slik man vil med CSS.

Foreløpig er dette sidetransisjons-APIet kun tilgjengelig i Google Canary, så ivrige lesere kan teste det ut der, mens vi andre får smøre oss med litt god gammeldags tålmodighet enn så lenge.

CSS til folket

Under årets konferanse var det også et foredrag om CSS i 2022, og planene videre for CSS i browserne fremover, og her er det mye spennende altså!

Et av de nye featurene er cascade layers, som betyr at man definere et @layer i CSS, som så sier noe om rekkefølgen CSSen skal appliseres på. Resultatet er forhåpentligvis mye mindre !important i kodebasen, fordi overskriving av CSS ikke lenger blir noe særlig problem. Dette har faktisk allerede ganske bred støtte hos nettleserene!

Container queries er også en spennende feature som forhåpentligvis vil gjøre ting litt enklere når man skal lage responsivt design. Per i dag må man ofte bruke media queries, som baserer seg på størrelsen av nettleservinduet, for å lage responsive objekter. Med container queries kan du istedet basere deg på mengden tilgjengelig plass en container har. Dette er foreløpig under utprøving.

Farger, farger og mer farger! Dersom du synes at RGB er begrensende, så kan vi informere om at det fremover kommer ti nye “color spaces” til nettleseren, deriblant LCH, HWB og HSL, med påfølgende støttefunksjoner som gir kontraster, gradienter og blending av farger. I tillegg kan vi allerede nå begynne å bruke accent-color for enkel customization av farger i skjemaelementer.

Mer om CSS i foredraget, eller artikkelen under 👇

State of CSS 2022

Metrikker for optimalisering

Hvor gode er vi egentlig på å optimalisere nettleserne våre for brukerne, og hvilke metrikker bør man egentlig se på? Google er opptatt av det de kaller Core Web Vitals, der de måler tre hovedmetrikker:

• Largest Contentful Paint (LCP), som måler lastetid
• First Input Delay (FID), som måler tid fra brukerinteraksjon til respons
• Cumulative Layout Shift (CLS), som måler visuell stabilitet på siden

Under årets konferanse tok de en nærmere titt på hvordan verden egentlig ligger an på disse målene, og et par caser der selskaper har jobbet med å forbedre sine web vitals. Veldig inspirerende!

Jest til OpenJS

Jest er et godt testrammeverk som undertegnede selv bruker hyppig, og nå flyttes rett og slett eierskapet fra Meta til OpenJS.

OpenJS er organisasjonen som blant annet eier webpack, node.js, jQuery og electron. Det bedyres at ingenting skal endres rent praktisk med tanke på testing og deploy, og det er samme folk i teamet som skal føre Jest videre, så dette høres fornuftig ut!

Meta Open Source is transferring Jest to the OpenJS Foundation

useEvent i React

For oss som følger React-økosystemet litt ekstra nøye, ble det i starten av måneden publisert en ny RFC for en hook som kalles useEvent. Idéen er å få en event handler som har en stabil funksjonsidentitet.

For oss som ikke umiddelbart plukker opp hva som er flott med det, dukket det opp en mediumartikkel i forrige uke som forklarer dette!

React may be getting a new hook — useEvent

Det var alt vi hadde for denne gang! Tusen takk for at du leser, også sees vi neste uke 👋

ForrigeUke(uke 19, 2022) was originally published in Bekk on Medium, where people are continuing the conversation by highlighting and responding to this story.