Dette var uken for norsk sommer og for å stikke hodet ut i varmen ☀️.
Og 1327 ting skjedde i frontend-verdenen!
Page Visibility API 📺
Har du lyst til å slutte å spille lyd når en bruker har minimert nettsiden din? Eller kanskje du ønsker å slutte å fetche ny data hvis en bruker bytter til en annen tab?
I så fall burde du sjekke ut Page Visibility API-et.
Når du bruker Page Visibility kan du enkelt sette opp listeners på måten under, og trigge handlinger basert på endringen visibility på document.
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// do something if the page visibility changes to hidden
} else {
// do something if the page visibility changes to visible
}
});Tidligere var API-et uavhengig, men nå er det integrert direkte i HTML. Sjekk ut hvordan du kan bruke det her.
Google 3D maps i JS 🌍
På Google I/O annonserte Google at de nå støtter bruk av JavaScript for 3D maps.
Dette kommer til å gjøre det mye enklere å lage interaktive 3D kart, og jeg tror ikke det finnes så mange grenser for hva folk kommer til å lage.
Forvent å se mange 3D maps på internett fremover!
CSS anchor positioning API 🎨
CSS anchor positioning API-et gjør det enkelt å posisjonere noe relativt til et annet element. Under er et eksempel av en knapp som er gjort om til et anker ( — anchor-el er navnet på ankeret):
.anchor-button {
anchor-name: --anchor-el;
}Når du har assignet et navn til ankeret, kan du begynne å plassere ting relativt til det. F.eks. ved å legge på en liten notis på toppen av ankeret. Merk her at at vi må fortelle hvilket anker vi ønsker å plassere relativt til.
.positioned-notice {
position-anchor: --anchor-el;
top: anchor(bottom);
}Ønsker du å lære mer om hvordan du kan bruke dette, sjekk ut blog-posten her.
React 19 upgrade guide ⬆️
React Conf var forrige uke, og det var nok ingen overraskelse at nye React 19 var i fokus. Men hvordan påvirker det deg som utvikler i React?
Isåfall anbefaler jeg å sjekke ut upgrade guiden. Det er ganske mange endringer, og det er sikkert lurt å sjekke ut guiden før du setter i gang.
Og som du sikkert har fått med deg, så trenger du ikke å bruke useMemo og useCallback lengre!
Dette var min siste ForrigeUke. Takk for at du har lest det jeg har skrevet siste 1.5 året 😊