Dette var uken for søte kattunger🐱, overentusiastiske veddeløpsfanatikere🐎 og gode oppskrifter👩🏼🍳. Og 1 074 ting skjedde i frontend-verdenen!
Nyheter fra WWDC22
I forrige uke holdt Apple sin årlige konferanse, World Wide Developer Conference, på hovedkvarteret deres, Apple Park.
I tillegg til annonsering av iOS 16 og andre generasjon Apple chip M2 avslørte de også mange spennende features for Safari 16 og webkit.
I can’t say this strongly enough… If you make websites, you should watch this 35 minute video from #WWDC22. It’s a whirlwind tour of the major new web technology shipping in Safari 15.2–16.0. Learn a lot really fast.
— Jen Simmons (@jensimmons) June 10, 2022
(*oh and I helped make this video!)https://t.co/C4u6HEZ3t2
Apple forteller at de har tatt til seg feedback fra utviklere og introdusert features mange har savnet. La oss ta en titt på noen av punktene på listen.
Petter besøkte Apple Park: - De hadde mer energi enn en to-åring med fri tilgang på godteri, brus og kokain
#1: Støtte for web inspector extensions
I Safari 16 blir det støtte for web inspector extensions, som betyr at du snart kan installere utviklerverktøy på samme måte som det har vært mulig å gjøre i andre nettlesere. Det skal være enkelt å konvertere disse, som (forhåpentligvis) gjør at du kan bruke kjente og kjære verktøy, også i Safari. Men hvis det er noe du mangler, kan du også ta fatt på å lage din egen. 🔨
#2: Container queries
Å style komponenter basert på skjermstørrelse er et kjent konsept som ofte oppnås ved å bruke media queries. Nå har container queries kommet 🎉 I stedet for å basere stylingen på skjermstørrelse, baseres den på container størrelse. Gull verdt for gjenbrukbare komponenter i et designsystem!
«Jeg sier ja takk til alle hjelpemidler som viser meg effektene av CSS-koden.»
#3: CSS subgrids
Da CSS grids kom på banen for 5 år siden ble det enklere å strukturere elementer på en nettside. Nå blir denne funksjonaliteten utvidet med CSS subgrids, som i tillegg til å strukturere barnene til en container, også kan strukturere barnebarnene av en container. Hendig!
#4: Flexbox overlay
Safari introduserer også flexbox overlay, en ny feature i safari sin web inspector som gjør det lettere å visualisere flexbox containere og spacing mellom elementene. Jeg sier ja takk til alle hjelpemidler som viser meg effektene av CSS-koden og gjør det enkelt å justere stylingen direkte i nettleser.
WWDC 2022: Snart kan du sende push-varsler til Safari på iOS
Skrive kode rett i nettleseren?
Er det mulig å utvikle fullstendige web apper kun ved å bruke nettleseren? Kanskje et åpenbart svar siden jeg spør, men ja, det er det faktisk!
For et år siden ble StackBlitz introdusert, et web IDE som kjører node.js nativt i nettleseren din. Noen av fordelene med dette er at du slipper å sette opp et lokalt utviklermiljø når du starter et prosjekt, bygging og installering er raskere, og det er lav terskel for å raskt kunne prototype en kul ide, teste nye open-source biblioteker, eller starte ditt aller første prosjekt. Helt uten å måtte installere masse greier på maskinen din.
Til nå har StackBlitz kun vært tilgjengelig i chromium-baserte nettlesere, men nå kan dette også benyttes av firefox-entusiastene der ute. 🦊
Til slutt et lite tips…
Hvis dere er som meg og digger animasjoner, men må google i hytt og pine for å finne ut hvordan det gjøres med CSS, sjekk ut denne siden jeg fant forrige uke.
Her ligger det nemlig en samling av animasjonseksempler og tilhørende CSS-kode, som kommer til å gjøre livet litt enklere neste gang jeg vil gjøre nettsiden min litt mer spennende og livlig.
