Bedre bildebruk på web: – Kjempefine forklaringer!

Optimalisering av bilder, forslag om Signals, VS Code-nytt og guide til render-optimalisering i React Query i ukens ForrigeUke.

Jon Johansen er utvikler i Bekk, og likte godt Sentrys guide til hvordan du kan forbedre bildebruken på web. 📸: Sentry (skjermbilde) / Bekk
Jon Johansen er utvikler i Bekk, og likte godt Sentrys guide til hvordan du kan forbedre bildebruken på web. 📸: Sentry (skjermbilde) / Bekk Vis mer

Dette var uken for å runde et kvartal av året 📊 og debugging-hjelp fra Copilot 🤖 — Og 479 ting skjedde i frontend-verdenen!

Forslag om signaler til JavaScript 🚦

I uken som gikk har det dukket opp et offisielt forslag fra TC39-gjengen for Signals i JavaScript, med innspill fra maintainere fra omtrent alle frontend-bibliotekene. ✨

Signaler er en måte å jobbe reaktivt i JavaScript, og har tidligere vært tilgjengelig i litt forskjellige varianter fra ulike biblioteker. Nå er målet altså å standardisere dette.

I dette eksempelet med en enkel teller kan man se hvordan man tradisjonelt har gått frem for å oppdaterere grensenitt med JavaScript (Det er omtrent sånn det skjer i kjernen av en del av frontend-bibliotekene man bruker idag), og hvordan man løser det ganske mye enklere og penere med Signals 💅.

Nyheter fra VsCode 🆕

Den månedlige oppdatering av VsCode (Mars-releasen) kom forrige uke. Med i den nye versjonen er det ganske mye snacks.

Favoritten så langt er muligheten til å gi egne navn til tabber, som har vært etterlengtet når du jobber med flere filer med samme navn (Next.js App-router 👀) . Men også muligheten for å restarte extensions, låse scrolling mellom to tabber og muligheten for å legge til “headere” i kommentarer som dukker opp i minimappet på siden 🗺 !

Og på tampen, et lite bonus-tips fra VSCode 🔥

Tips for bedre bildebruk 🖼

Sentry kom med en artikkel for å forbedre bildebruken på Web, med kjempefine forklaringer på hvordan de forskjellige grepene man kan ta påvirker. Kortversjonen er:

  • Bruk riktig bildeformat (AVIF og WebP)
  • Ha riktig størrelse på bildene man bruker ( — taggen med srcset)
  • Lazy loading av bilder (bruk av loading-attributtet)

Les mer om det her

Guide til render-optimalisering i React Query

For de som bruker useQuery i frontenden sin, har det denne uken dukket opp en bloggpost som forteller litt om hvordan man kan optimalisere rendering. Her med objekt-referanser, å følge med på spesifikke properties og memoisering.

For tipsene i detalj, kan du sjekke ut posten her.

Aaand that’s that! 👋 Vi sees neste uke!