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

Middleware i React Router ⛓️‍💥

Forrige uke lanserte teamet bak React Router og Remix at "middleware" er en stabil feature fra og med versjon 7.9.0. Tidligere har loaders for nøstede routes kjørt i parallell, og dette har blant annet medført at en barne-loader ikke kan aksessere dataen fra sin foreldre-loader. Man har også i mange tilfeller unødvendig måttet repetere logikk i loaders på tvers av routes.

Kort fortalt løses disse problemene ved at man nå kan dele data fra foreldre-routes til barne-routes gjennom middleware, som vist i eksempelet under.

// app/root.tsx
const context = createContext<User>();

const userMiddleware: Route.MiddlewareFunction = ({ context }) => {
  let user = await getUser(request);
  context.set(userContext, user); // 👈 Provide data here
};

export const middleware = [userMiddleware];

export async function loader({ context }) {
  return { user: context.get(userContext) }; // 👈 Access data here
}

// app/routes/_index.tsx
export async function loader({ request }) {
  let user = context.get(userContext); // 👈 Access data here
  // ...
}

Du kan lese mer om middleware her 👇.

remix.run

Middleware in React Router

Middleware is now stable in React Router!

Tips for kontroll over package.json 🎮

Tom MacWright skrev tidligere denne måneden en bloggpost om hvordan man bedre kan holde kontroll over sin package.json fil. React applikasjonen Val Town har en haug av avhengigheter, og en stor node_modules mappe, og basert på arbeidet med dette prosjektet presenterer han noen tips for å bedre holde kontroll over avhengigheter. Han mener blant annet at man bør lese kildekoden eller README-filen til (nesten alle) nye pakker man introduserer, og også bruke kommandoer som npm ls. Han trekker også frem verktøy som Renovate og Knip for å holde avhengigheter oppdaterte og fjerne ubrukte ting ✂️. Du kan lese hele artikkelen her 👇.

blog.val.town

How to keep package.json under control

Updates and articles from the Val Town team

Automatisk valg av modell i VS Code 🦾

For de av oss som bruker VS Code sin GitHub Copilot chat har det nå kommet en ny feature som automatisk velger AI-modell for deg. Frem til nå har man valgt modell manuelt, men det skal fremover være mulig å la dette skje automatisk, slik at den best mulige modellen blir valgt fra sesjon til sesjon. Du kan lese mer om dette her 👇.

code.visualstudio.com

Introducing auto model selection (preview)

Use auto model selection in VS Code to get faster responses, reduced rate limiting, and a 10% discount on premium requests for paid users.

Retningslinjer for web-grensesnitt 🧐

Vercel har også laget en liste over retningslinjer for hvordan lage gode web-grensesnitt. Dette innebærer retningslinjer for interaksjoner, animasjoner, layout, innhold, forms, ytelse og design. 🚀 Du kan lese hele listen her 👇.

vercel.com

Web Interface Guidelines

Guidelines for building great interfaces on the web. Covers interactions, animations, layout, content, forms, performance & design.

Det var alt for denne gang, ha en fin uke 👋