Dette var uken for et fantastisk sparkesykkeltriks 🚲, et fantastisk heltemot i møte med en sulten alligator 🐊, og en lek som går rett i baret 🐕. Og 33 761 ting skjedde i frontend-verdenen!
Native støtte for CSS-moduler i Edge og Chrome 📰
Nå kan du importere CSS-moduler på samme måte som du ville importert JavaScript-moduler!*
Tanken er at man kan gjøre dette i stedet for å bruke inline styling eller en eller annen CSS-loader som kommer med din prefererte JavaScript-bundler, for eksempel Webpack sin css-loader.
import styles from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [styles];Dette kan føre til bedre lastetider på nettsidene dine, og spesielt interessant blir det i bruk sammen med Web Components, da du også kan legge det rett på shadowRoot. Hvis du er nysgjerrig på Web Components anbefaler jeg å starte på MDN:
https://developer.mozilla.org/en-US/docs/Web/Web_Components
*Eller, du kan iallfall bruke dette dersom brukerne dine kun er på Edge eller Chrome, for dette er foreløpig ikke støttet i Firefox og Safari. Men det ligger på blokka! Den optimistiske utvikler vil si “yes, jeg gleder meg!”, og pessimisten kan si som denne redditøren:
Cool. Another feature I can’t use for at least 5 years. :(
https://web.dev/css-module-scripts/
Trenger du data til ditt nye prosjekt? 🔡
Undertegnede kom nylig over denne flotte oversikten over gratis API-er som dekker over utrolig mange emner. Trenger du data til din nye værapplikasjon eller bare vil hente ut neste sesong med animer? Look no further!
Morsomt nok har de også et eget API for å finne APIer! Der kan du blant annet benytte deg av endepunktet /random, hvis du sliter med å velge.
https://github.com/public-apis/public-apis
Focus folkens! 🔍
Jeg vet ikke med dere, men jeg er glad i tastaturet mitt og tab-er meg ofte rundt på nettsider. Da oppdager jeg fort hvilke sider som gjør det lett for meg å navigere, og hvilke sider som gjør det vanskelig for meg. Fokusmarkering er en viktig del av dette, og for mange er det helt essensielt for å kunne bruke en nettside.
Dersom du er usikker på dette med fokusmarkering og hvordan det bør gjøres, vil jeg anbefale å ta en titt på denne fine guiden.
https://www.sarasoueidan.com/blog/focus-indicators/
Ett hett tips undertegnede plukket med seg fra artikkelen var å bruke :focus-visible pseudoklassen for å kun vise markering ved tastaturbruk.
Gratis tilgjengelighets-konferanse! 💥
Og når vi først er innom tilgjengelighet:
Den 23. september er det Inclusive Design 24, som er et 24-timers gratis online event med tettpakket program. Alt livestreames via deres YouTube-kanal, og man trenger ikke å registrere seg.
https://inclusivedesign24.org/2021/
Det var alt vi hadde på lager denne uka! Tusen takk for at du leste gjennom, også sees vi i neste 👋