<ForrigeUke uke=”18" år=”2024" />

Juni Leirvik Larsen
Bekk
Published in
3 min readMay 7, 2024

--

Dette var uken hvor våren for alvor meldte sin ankomst (allergi-sesongen like så) 🤧, hvor Oslos gater ble fylt med 73 000 forvirra atleter 🏃🏽‍♀️‍➡️, og hvor livets store spørsmål har holdt oss våkne på nettene 💤. Og 782 ting skjedde i frontend-verdenen.

<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.

Photo by Nick Night on Unsplash

🎨 Figma Material UI Sync

Har du noen gang tenkt på hvor greit det hadde vært om designere kunne generert produksjonsklar kode? 🤔 Da har jeg en god nyhet til deg. Nå har Figma og Material UI kommet med et nytt samarbeid og utviklet en Sync-plugin som gjør akkurat dette.

Ved å ta i bruk Figmas lokale variabler kan Material UI-komponentene tilpasses etter behov. Det er til og med mulig å forhåndsvise komponentene i StoryBook direkte i Figma. Dette gjør at man enkelt kan leke seg rundt med forskjellige states og props som er tilgjengelig. Når komponentene er ferdig designet er man kun et tastetrykk unna ferdiggenerert theme-kode som kan limes rett inn i prosjektet 🤯. Les mer om hvordan du kan ta i bruk Figma Material UI Sync plugin her.

🚫 Den perfekte nettsiden eksisterer ikke

Michelle Barker publiserte denne uka en bærekraftsfokusert artikkel i Branch hvor hun påstår at “Den perfekte nettsiden eksisterer ikke”. Hun nevner at ingen eksisterende nett- eller programvareprosjekt er helt frie for teknisk gjeld. Trangen for å utrydde gjelden helt kan være overveldende og føles meningsløs. Dette er grunnen til at mange av oss har forlatte sideprosjekter som ligger og støver i Github-repositorier og mapper fulle av halvferdige blogginnlegg 📚. Hun sier at i stedet for å forestille oss en perfekt slutt, som kanskje aldri vil komme, kan vi fokusere på små oppgaver som vi kan gjøre prosjektet litt og litt grønnere. Her er noen av de små tiltakene hun nevner:

  • 🖼 ️Redusere størrelsen på bilder
  • 🔗 Tilrettelegge for brukere av hjelpeteknologier
  • 📷 Laste inn bilder på siden etter behov
  • 👩🏽‍💻 Fjerne noe ubrukt CSS, unødvendige Javascript-avhengigheter eller annen kode

Michelle Barker påpeker også at det er viktig å erkjenne at vi alle har grenser for hva vi kan oppnå alene, men “A little bit better is still better”. Trykk deg inn her om du ønsker å lese mer om alle de interessante synspunktene Michelle Barker kommer med.

🩶 50 Shades of Gray?

CSS { In Real Life } publiserte denne uken et innlegg om grå-nyanser. For hvem trenger vel ikke mange nyanser av grå når en nettside skal lages? 🐘

CSS har ferdiggenerert en del gråtoner for oss allerede, men det er ofte det ikke strekker til. CSS { In Real Life } tipser derfor om color-mix(). color-mix() lar oss blande to farger ved å angi hvor stor prosentandel hver av fargene skal ha. På denne måten kan man enkelt blande forskjellige mengder sort og hvit for å lage ulike nyanser av grå. Innlegget nevner også at om du faktisk ønsker 50 Shades of Gray (👀) så er det fult mulig å slenge inn en calc() for å fin-beregne alle nyansene. Klikk deg inn her for eksempler på hvordan color-mix() kan brukes i designprosessen.

Innlegget legger også til at selvom man normalt tenker på grå som en blanding av sort og hvit, er det ingenting som hindrer deg i å ta i bruk andre farge-nyanser i gråtonene i designet ditt 🎨.

➕SaaS Stack for Remix

Remix SaaS ble introdusert for første gang forrige uke. Remix SaaS er et rammeverk som har som mål å hjelpe deg med å kickstarte ditt neste SaaS-prosjekt. Det er laget basert på Remix og Vite som bidrar til en solid grunnmur når en SaaS-applikasjon skal lages. Remix SaaS har mange kule funksjoner som du kan lese mer om her.

Det var alt for denne gang, vi sees neste uke! 👩🏽‍💻

--

--