Dette var uken for diverse fall ❄️ av ulikt slag 📉, men håpet lever ennå videre, eller? 🙏 Det var hvert fall 4109 ting som skjedde i frontend-verdenen!
ViteConf 2023 ⚡️
Evan You, mannen som også står bak rammeverket Vue.js presenterte forrige uke siste skrik fra Vite. Her ble det nevnt noen godsaker som eksempelvis migrering til Remix, og vi fikk se Vite i møte med React Native.
Likevel er nok den største snakkisen at gjengen bak Vite nå jobber med å forbedre hastigheten på produksjonsbygg ved å innføre en Rust-basert bundler Rolldown.
«Rolldown» skal gjøre Vite enda raskere
Varierende bygghastighet på utvikling og produksjon ble nevnt som et av de største smertepunktene for Vite i dag, og i den forbindelse har de startet arbeidet med å erstatte nåværende bundlers esbuild (som brukes i utvikling) og Rollup (som brukes i produksjon).
Det uttalte målet er å erstatte esbuild helt og holdent med en enkelt bundler som samtidig ivaretar Rollups fleksible API — med på laget har de også Lukas Taegart som vedlikeholder Rollup. Det blir gøy å se hva de får til! 🍿
The cat is out of the bag: we are working on Rolldown, a rust port of Rollup. 🦀
— Evan You (@youyuxi) October 5, 2023
- Focus: performance with best-effort compatibility with Rollup
- Goal: replace esbuild and Rollup in Vite with minimal impact on end users
Ta grønnere valg når du utvikler
Visste du at internett slipper ut 4% av alle CO2-utslipp i hele verden, og at det er like mye som hele flyindustrien? ✈️😮
Mdn Web Docs har tatt en nærmere titt på hva du som utvikler kan gjøre for å redusere utslippene til nettsiden din. Og det viser seg at nettsiden potensielt kan være ganske miljøvennlig fra før, ettersom at det er ganske stor overlapp mellom raske nettsider og miljøvennlige nettsider 🙌 I bunn og grunn handler det om å redusere innhold som lastes hos brukeren, slik at vi ikke belaster nettverket unødvendig 💚
Flere konkrete miljøtiltak nevnes i artikkelen. Her er noen kortfattede tips som kan hjelpe deg (og verden):
- Komprimere bilder: Bruker nettsiden din bilder i eksempelvis jpg- eller png-format? I så fall kan du vurdere å bruke html-attributter som «srcset» og html-elementet «picture» som lar deg laste inn spesifikke bilder avhengig av brukerens enhet, så slipper du å laste inn bilder med høy oppløsning på enheter som egentlig ikke trenger det. Du kan også bruke lazyloading i img-tagger på bilder som ikke trengs å lastes inn med en gang.
- Optimere fonts: Ved å bruke variable fonts slipper du å laste inn flere ulike typer av samme font, og kan istedenfor justere fonten langs dimensjoner som for eksempel tykkelse og bredde direkte i CSS-en 🔤Da slipper du å laste inn en ny fil for hver font som behøver fet eller kursiv stil.
- Import-on-interaction: Dette er et pattern som går ut på at man ikke trenger å laste inn ressurser før de faktisk trengs. Hvis nettsiden din eksempelvis har mulighet for videoavspilling så trenger du ikke å laste inn selve videoen før brukeren faktisk trykker på “avspill” ▶️📽️
- Reduser mengde JS: JavaScript krever typisk mer ressurser enn HTML og CSS. Vurder nøye om du virkelig trenger å bruke et eksternt bibliotek til det du lager. Med verktøy som Bundlephobia kan du evaluere potensielt kostbare avhengigheter. Og kanskje du heller kan bruke native API istedenfor? 👀
- Cache så mye du kan — “Det beste nettverkskallet er det som aldri finner sted”: For raske nettsider er det å unngå nettverket mye bedre enn å kalle nettverket i det hele tatt. Bruker du Cache-Control header i dine nettverkskall? 🌐
Mer om dette kan du lese her 🌍
rem vs. em vs. px? 🔍
Det er delte meninger om hvilke CSS-enheter som er riktig å bruke, og mye avhenger nok av hvilken setting det er snakk om. På teamet mitt var vi nylig innom den såkalte «battle of the units» da vi skulle bestemme fontstørrelse, nærmere sagt hvilken enhet vi ønsket å benytte.
Ifølge WCAG 2.2 om reskalering av tekststørrelse skal bruker kunne zoome inn 200% uten at det skaper problemer for tekstlig innhold. I tillegg står det at ansvaret ligger hos author (les: utvikler 👩💻) å sørge for at brukere som ikke nødvendigvis zoomer, men har økt fontstørrelse også må tilrettelegges for! Her må man passe på så man ikke går på en ordentlig UU-smell 😟
Hvis du ønsker å lære mer fikserte størrelser og deres relasjon til WCAG-krav har jeg funnet at denne artikkelen er god! 🚀 Og ønsker å du forstå mer om “the battle of the units” illustrerer denne artikkelen godt hva som er forskjellene.📈 Og sist, men ikke minst; ønsker du gjennomslag for hvorfor rem er best så anbefaler jeg denne artikkelen 😉
Det var alt for denne gang! Takk for at du leste 👋
