De viktigste nyhetene i Webkit og Safari: - Jeg sier ja takk!
En siste titt på WWDC22, koding i nettleseren med StackBlitz og CSS-hjelp med AnimatiSS.
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.
#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.
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.
