Sliter du med å skrive readme-filer? Ikke med denne malen!

Awesome Readme Template, Webpack til Vite-bytting, :has i CSS og sentreringstips.

Awesome Readme Template.
Awesome Readme Template. Vis mer

Dette var uken for senior løver 😸, backend design av frontend 🌳 og sentrering ✨.

Og 8848 skjedde i frontend-verdenen!

Fra Webpack til Vite 🏃 💨

Har du en React app satt opp med Webpack, og har lyst til å bytte over til å bruke Vite? Da kan denne guiden komme til nytte! 😃

Vite — for de som ikke er kjent med verktøyet er det et frontend byggeverktøy, og selve ordet betyr “rask” på fransk. Noe verktøyet lover å bedre utvikleropplevelsen signifikant ved å tilby rask dev server, Hot Module Reload, enkel konfigurering, optimalisert produksjonsbygg og mer.

Men siden dokumentasjonen ikke beskriver hvordan du kan migrere til eksisterende Webpack app, har Wojciech Maj har tatt på seg jobben, og skrevet en guide på hvordan man kan gjøre akkurat dette! ✨

Need me a Readme? 📚

Skulle du ha behov for en kjapp readme til prosjektet ditt, så har Louis-Kaan Ay har vært så hyggelig å dele sin — enten du vil bruke den direkte, fjerne noen seksjoner før bruk eller som inspo! ✨

CSS :has støtte (ish) 👪

:has() er en CSS level 4 selektor som hjelper deg med å selektere elementer som inneholder elementer som matcher selektoren du sender inn i funksjonen — kort forklart en “parent selector”!

I eksempelet under selekteres alle knapper som inneholder svg-er, og gir deg muligheten til å endre på foreldreelementet:

button:has(svg) { … }

Til nå, har man ikke kunne selektere foreldre elementer på denne direkte og lesbare måten med gode grunner, og Matthias Ott beskriver hvordan :has åpner for mange flere muligheter i innlegget lenket til under som for eksempel å justere på et Grid

For nå, er det kun Safari (v. 15.4) den eneste som har støtte for :has , og det vil nok ta litt tid før majoriteten av nettleserne støtter denne også. Men har du lyst til å bruke :has , så kan du alltids sjekke om nettleseren støtter den med @supports featuren som beskrevet i innlegget.

:has er en kul CSS selektor, og hvis du skulle være nysgjerring kan du lese mer i innlegget til Matthias Ott under! ☺️

Hvordan går det med sentreringen, da?

Som en liten bonus snacks hvis det fremdeles skulle være noen tvil om hvordan man sentrerer et element i CSS, så har dere en kort video komplett med memes og CodePen eksempler (noen kodesnutter kortere enn andre) i beskrivelsen! 😎✨

Centering an element with CSS using the wrong approaches or hacky methods can be painful. Here are 5 easy ways to center an element in it's parent container. Each method has just 2 or 3 lines of code on average! Codepen examples: Center using Flexbox - https://codepen.io/Ranjithkumar10/pen/rNpJjQx Center using Grid and margin auto - https://codep... Vis mer

Det var alt vi hadde for denne gangen! God påske og sees neste uke! 👋 🐣