Dette var uken for tyske saksofontoner 🎷, reisetips ✈️ og evige løkker ➰. Og 992 ting skjedde i frontend-verdenen.
Hvordan minimere ubrukt JavaScript i koden din 🚮
Å redusere ubrukt JavaScript er viktig når man bygger moderne nettsider, og har betydning både for effektivitet og for at siden skal fungere godt. Store mengder ubrukt JavaScript fører til større og tregere applikasjoner, og hvem er vel interessert i det? ️🥴
Syket Bhattachergee har skrevet en artikkel med tips og triks for hvordan redusere såkalt død kode, både for å spare tid, men også for raskere nettsider der ting går smooth for seg 🥇.
- I en JavaScript-applikasjon er ubrukt kode all kode applikasjonen ikke bruker eller trenger for å fungere. Slik kode gjør at man får en større bundle enn egentlig nødvendig, og dette kan påvirke ytelsen negativt.
- I artikkelen trekkes det frem flere teknikker som kan være hjelpsomme for å mindre ubrukt kode.
- Eksempler er code splitting, som innebærer å splitte applikasjonen opp i flere mindre biter, slik at du ikke trenger å laste all JavaScript samtidig, og tree shaking, som handler om å bli kvitt ubrukt kode automatisk ved bruk av moderne bundlere.
- Du kan lese mer om alle de anbefalte teknikkene her.
Til slutt vil jeg også anbefale å sjekke ut Knip, et verktøy for å finne ubrukte filer, avhengigheter og exports i JavaScript- og TypeScript-prosjekter ✂️.
Moderne CSS er awesome 💄
Michelle Barker holdt nylig en talk om CSS layout på Pixel Pioneers konferansen i Bristol, om hvorfor moderne CSS er “awesome” og “The web´s most beatiful language”.
Det er selvsagt ikke alle som er enige i dette, men et interessant poeng som trekkes frem er at mange frontend-utviklere ikke får med seg nye og nyttige features i CSS. Man trenger naturligvis ikke å få med seg alt, men det kan allikevel være verdt å følge med på nyvinninger da de ofte er laget for å gjøre livene våre som utviklere enklere 👌.
Eksempler er min(), max() og clamp()-funksjonene, som gjør det enklere å lage responsive sider.
Dersom det kribler i CSS-fingrene dine finner du 103 slides med (forhåpentligvis litt) ny læring her 🤓.
Bruker bare én enhet i CSS: «Du trenger ikke andre!»
Bruk konsollen bedre 🎮
Er du en av de som alltid bruker console.log() under utvikling?
Alish Giri har skrevet en artikkel med tips og triks for å unngå denne kommandoen, og som kan gjøre utviklingen din mer produktiv og morsom.
For hierarkisk listing av arrayer og objekter kan man for eksempel bruke console.dir(), for å liste arrays som rader og kolonner kan console.table() være nyttig og for gruppering kan man bruke console.group():
console.dir(["apples", "oranges", "bananas"]);
console.table({"a": 1, "b": 2, "c": 3});
console.log('This is the top outer level');
console.group('Task 1');
console.log('Task activity 1');
console.log('Task activity 2');
console.groupEnd();
console.group('Task 2');
console.log('Task activity 3');
console.log('Task activity 4');
console.groupEnd();
console.log('Back to the top outer level');Man kan også bruke konsollen til å måle tidsforbruk, for eksempel hvor lang tid det tar å fullføre en asynkron oppgave. Jeg skal hvertfall prøve noen av disse fremover 🤓.
Når du er ferdig med å teste kan du tømme konsollen med console.clear():
try {
console.time("record-1");
await someAsyncTask();
} catch (error) {
// handle error
} finally {
console.timeEnd("record-1");
}Det var alt for denne gang 👋 snakkes neste uke!
