Dette var uken for sterke syrer 🧪, fine steiner 🪨 og tørste maur 🐜 — og 1432 ting skjedde i frontend-verdenen.
«<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.»
Enklere CSS-layout med margin-trim 🏋️♀️
Hvis du skriver mye CSS har du sikkert vært borti situasjoner der du ikke er helt sikker på hvordan du skal løse utfordringen du står ovenfor. Ofte kan man finne gode løsninger ved hjelp av tutorials eller dokumentasjon på nettet, men noen ganger virker det ikke å finnes en "beste" måte å løse problemet på. I slike situasjoner kan man fort ende opp med løsninger som føles "hacky". CSS har gjort mye det siste tiåret for å fylle slike behov, og en av løsningene som potensielt kan forhindre disse "hacky" løsningene er margin-trim 🚀.
Det margin-trim hjelper til med ligger innbakt i navnet 🕵️♀️. Den trimmer rett og slett bort all margin som ligger "på utsiden" av en container, og dette gjelder også alle barne-elementer inni containeren. Personlig synes jeg dette virker veldig praktisk, så jeg skal i alle fall teste det ut fremover. Du kan lese mer om bruken av margin-trim, i tillegg til praktiske eksempler her.
En liten intro til Image Maps 🗺️
Har du noen gang laget en nettside for en Emmy-vinner? 🏆 Andy Clarke ble hyret inn av spillkomponisten Mike Worth for å lage en grafisk nettside som skulle fremheve arbeidet hans. Så hvordan lager man egentlig en nettside som kombinerer retro 90-tallsstil med moderne frontend-teknologi som møter krav til semantikk, universell utforming, ytelse og responsivitet? 🤔
Image Maps ble introdusert allerede i HTML 3.2, der man definerte klikkbare regioner over et bilde ved bruk av map og area elementer. Selve fremgangsmåten kan du lese mer om i artikkelen, og selvom det er en gammel metode har den mange fordeler. Den krever omtrent ingen JavaScript, og ved bruk av alt-attributt er elementene også semantiske.
Eksempelet viser hvordan kartet til Andy ble seende ut, og du kan lese mer detaljert om hvordan det er laget her 🤩.
this i JS 👆
Mat "Wilto" Marquis skrev forrige uke en artikkel om this i JavaScript, med mål om å forklare hva det er på en enklest mulig måte. Dette kan i seg selv være krevende da this ofte kan virke forvirrende 🤯. Noen hovedpunkter fra artikkelen er avhengigheten av kontekst, hvordan JavaScript eksekverer og hvordan this kan referere til ulike objekter. Så hvis dette er noe du vil lære mer om kan du lese hele artikkelen her 🤓.
Det var alt for denne gang, vi sees neste uke 👋
Del kunnskapen
Har du en kollega som også hadde dratt nytte av denne artikkelen?