Dette var uka for å fikse prodfeil🔥, få hjelp av AI til koding🙏 — og 670 ting som skjedde i frontendverdenen!
LQIP med kun CSS 😶🌫️
LQIP — eller Low Quality Image Placeholder — er en kjent teknikk for å vise en uskarp forhåndsvisning av bildene dine mens de ekte bildene laster inn.
Du har sikkert sett det: en supertåkete versjon av bildet som gir brukeren en følelse av at noe er på vei, i stedet for en tom flate.
De fleste LQIP løsninger fungerer ved at du forhåndsgenererer en slags ekstremt komprimert versjon av bildet — tenk på det som en pikselert miniatyr som er så liten at du faktisk kan bake den rett inn i HTML-en. På den måten har du noe klart til visning med én gang, før det faktiske bildet lastes inn.
Mange slike løsninger — som f.eks. BlurHash — støtter seg ofte på JavaScript for å gjøre om denne LQIP-verdien til et bilde. Lean har derimot lagd en egen versjon som kun benytter seg av CSS! 🔥
Lean har skrevet en artikkel som viser hvordan de gjør dette — med gode illustrasjoner og en trinnvis forklaring på hvordan man går fra et 6-tegns tall til et faktisk bilde, helt uten JS. Helt klart verdt å lese litt om!
Utrolig, men sant: Vi sentrerte en div uten flex og grid!
Tilbake til interface igjen 🔄️
Hvis du noen gang har jobbet i en TypeScript-kodebase sammen med andre, har du nok opplevd diskusjonen:
Skal vi bruke type eller interface til å beskrive objekt-typer?
Mange sverger til type, siden det (stort sett) kan gjøre det samme som interface, og da er det jo ryddigere å bare bruke én måte å deklarere typer på. Andre foretrekker interface fordi det føles mer kjent for utviklere med bakgrunn i objektorientert programmering – det ligner på det vi kjenner fra språk som Java, både i form og funksjon.
Matt Pocock, et kjent navn i TypeScript-verden, har hatt en noe turbulent reise i denne debatten. Han har vært en tydelig forkjemper for type (før han skiftet mening og støttet interface, for så å vende tilbake til type igjen). Nå har han enda en gang snudd – og forklarer i en ny video hvorfor interface kanskje er det riktige valget for deg nå.
Videoen gir en god gjennomgang av noen rare — og overraskende — forskjeller mellom type og interface. Visste du for eksempel at type-intersections kan være skikkelig trege, og at Shopify klarte å halvere kompileringstiden sin bare ved å bytte til interface? 🤯
Selv har jeg alltid hatt en svakhet for interface, så nå har jeg i hvert fall litt ekstra krutt til neste krangel med teamet 😎
Etter 16 år støtter de endelig HTML5: «En av de beste på mange år»
Konsekvente h1-stiler blir ny standard 💻
Nettlesere kommer med en del standard stiler for elementer. Som alt annet på webben så er det sjeldent at standarder endrer seg, da det potensielt knekker en hel del nettsider uten særlig forvarsel.
Men nå skjer det faktisk en liten endring i hvordan <h1>-taggen ser ut!
I dag har <h1>-taggen litt forskjellig styling basert på om den ligger inni en seksjoneringstag (<section>, <article>, <aside> eller <nav>). Har du f.eks. en <h1> nøstet inni en <section>, så vil den ha lik størrelse som en <h1>-tag. Men, ikke nå lenger.
Nå rulles det ut endringer i nettlesere hvor disse stilene fjernes. Nå vil <h1> alltid se like stor ut, uansett hvor dypt den er nøstet i seksjoneringstagger.
Når treffer dette meg og hva må jeg gjøre? Det har heldigvis MDN skrevet litt om i bloggposten sin rundt endringen!
