Adjø Create react app 👋

Da var deg også på tide å si adjø til en gammel venn! Create react app, som kom som et friskt pust inn i React-verdenen med sin null-config-setup av React-apper var lenge en go-to for både små og store prosjekter.
Etter å ha kranglet med Webpack-config og alskens herk i det som kunne føles ut som en evighet for å spinne opp en enkel app, var det en glede å kjøre en enkel kommando og få ut et helt klart prosjekt i andre enden.

react.dev

Sunsetting Create React App – React

The library for web and native user interfaces

Nyheten kom ikke helt uforventet, da det i flere år har vært anbefalt å ta i bruk rammeverk når man skal starte nye React-apper. Det er likevel ikke helt ukontroversielt, og det er delte meninger om serverside og rammeverk skal være standarden. Det tok heller ikke lange tiden før en drop-in replacement for å lage SPA-apper med TanStack Router var på plass! 🧩
Det presiseres også i blogposten at serverside-rendering er valgfritt, også med de fleste rammeverkene man kan ta i bruk 👌

Snacks fra Astro 🍬

Astro, rammeverket som har drevet med øyarkitektur🏝 ️en stund nå, har forrige uke sluppet ny minorversjon. Denne oppdateringen skal spare deg både tid og hodebry med kjappere sider, mindre config og enda bedre utvikleropplevelse.

astro.build

Astro 5.3 | Astro

Astro 5.3 is here with faster page rendering, easier setup for experimental sessions, and more!

Den største nyheten er at komponenter rendres asynkront kun når det er nødvendig, noe som kan gjøre SSR-responstidene opptil dobbelt så raske hvis vi skal tro metrikkene.
Noen andre bonuser i denne oppdateringen er en polering av sesjonslagring på serveren, konfigurasjonsmuligheter for pakkingen av appen, og automatiske HEAD-endepunkter ✨.

ESLint tar et steg for å bli språk-agnostisk 🎨

Verktøyet Eslint, som hjelper deg med regler for hvordan du skal skrive koden din, har nå kommet med støtte for å både skrive og sjekke etter regler i CSS. Fra før av er det nesten umulig å starte et prosjekt uten at det følger med noen best-practices i form av en eslint-config 🤓.

eslint.org

ESLint now officially supports linting of CSS - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

Det betyr i praksis at ESLint nærmer seg å bli en one-stop-shop for å overholde god (og konsistent) kode-praksis i web-verdenen. Nå er det bare å spe på med regler som også dekker stilfilene, som i undetegnedes prosjekter til tider har vært mer eller mindre kaotiske 😵‍💫.
Det er muligheter for å legge til egne regler, og syntakser (som tailwind 👀) som gjør det veldig anvendelig 👌.

Apropos CSS! 🤓

Når vi først er inne på temaet så kom jeg over to blog-poster om CSS som var spennende for meg!

Transform er additiv ➕

Ukes som var ble det også skrevet en fin liten blogpost om hvordan Transform skiller seg ut fra en del andre CSS-properties. Verdiene som settes med transform overskriver nemlig ikke hverandre, men legges sammen før det tegnes ut. Du kan lese om det her👇

polypane.app

The CSS Transform property and individual transforms are additive | Polypane

Here's something you might not know: the CSS transform and individual transform properties ( translate , rotate and scale ) are additive. ...

Snart kommer inline-if funksjonalitet!

Ikke helt klart enda, men i den seneste release-kandidaten til Chrome er det lage til støtte for if() inline i properties. Selv om det ikke byr på helt revolusjonerende muligheter, er det en hel del enklere å skrive vekslende verdier.

Et godt eksempel kan du finne i blogposten under som skriver om veksling mellom light- og darktheme med den nye syntaksen 👇

bram.us

CSS @function + CSS if() = 🤯

Support for Nested Container Queries and the CSS if() function inside CSS Custom Functions make @function very powerful.

Vi får bare glede oss til det blir bred støtte 😸

Aaand that’s that! 👋 Vi sees neste uke!