Dette var uken for spontane mekanikere ⚙️, vågale manøvere ⛴️ og nye React rammeverk 🧑💻 — og 864 ting skjedde i frontend-verdenen!

Remix blir enda raskere

Remix er et JavaScript-rammeverk elsket av utviklere for lynraske overganger mellom sider. Rammeverket er også i vinden, ettersom det har gjennomgått mange endringer den siste tiden, og forrige uke var intet unntak. Teamet bak Remix bestemte seg nemlig for å introdusere det nyeste våpenet i arsenalet: Fog of War.

Remix-applikasjoner er avhengige av å laste inn et manifest over hvilke sider som eksisterer innad i applikasjonen, noe som gjøres ved første besøk på siden. For store applikasjoner med mange sider kan denne filen fort bli veldig stor og påvirke ytelsen på første render.

Fog of War forhindrer at disse applikasjonene blir straffet for å ha mange sider. I stedet for å laste inn hele manifestet med alle routes, slik som på bildet under,

vil vi med Fog of War kun laste inn et manifest med et fåtall nødvendige routes først. Deretter vil Remix gradvis utvide manifestet når rammeverket oppdager linker til nye sider i applikasjonen, slik som visualisert under:

Resultatene snakker for seg selv. Fog of War reduserte størrelsen på manifestet til https://remix.run fra ~20Kb til ~4Kb, og på https://shopify.com ble størrelsen redusert fra 10MB til kun 1.9Kb 🤯

Anbefaler denne artikkelen for en svært god (og visuell) forklaring fra Remix’s egne Matt Brophy.

Begynner CSS å bli et programmeringsspråk?

CSS er et språk mange har et hat-elsk forhold til. Noen ganger er det enkelt og produserer fantastiske resultat, mens andre ganger skjønner du ikke hvorfor en div ikke vil sentrere seg på siden.

Har du derimot noensinne funnet deg i en situasjon hvor du har ønsket å style en knapp basert på logikk, men i mangel på alternativer måttet ty til JavaScript, eller Gud forby, jQuery? Frykt ikke! En ny løsning er på vei. CSS Working Group (CSSWG) har nemlig akseptert et forslag om å diskutere if() som funksjon i språket!

Dette vil resultere i at vi får en if-else ternary i CSS, noe som gir oss kontrollflyt. Det kan nesten se ut til at CSS begynner å bli et programmeringsspråk? 🤯

Foreslått syntaks er som følger:

.button {
  background-color:
    /* Avhengig av hva style() evaluerer til, */
    if(style(--variant: success),
      var(--color-green-50), /* hvis `true`, returner denne */
      var(--color-blue-50);  /* hvis `false`, returner denne */
    );
}

For et dypere dykk i saken, besøk

• "If" CSS Gets Inline Conditionals | CSS-Tricks

Diagrammer i shadcn/ui

Biblioteket shadcn/ui er for mange utviklere blitt en go-to løsning når det kommer til design og utforming av webapplikasjoner. Det består av minimalt stylede komponenter som følger prinsippene om universell utforming, og som fungerer både i klient- og serverkomponenter.

Nylig slapp shadcn en etterlengtet utvidelse, nemlig Charts. Charts er en samling diagram-komponenter bygget på Recharts, et fleksibelt og svært godt testet bibliotek for visualisering av grafer og diagrammer. Utvidelsen inneholder alt fra linje- og søyle-, til kake- og radardiagram og er designet i den gjenkjennelige shadcn stilen.

Du finner den fullstendige oversikten over de nye komponentene her.

Det var det jeg hadde for denne gang — håper dere får en fantastisk uke!

Chrome gir deg AI rett fra JavaScript: «Veldig kult!»

tirsdag 2. juli 2024