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

MCP Apps 🤖

Forrige uke skjedde det noe spennende innenfor MCP-universet, det ble nemlig introdusert et forslag til en ny standard for interaktive brukergrensesnitt. Denne utvidelsen adresserer en av de mest etterspurte funksjonalitetene fra MCP-verdenen, nemlig å la MCP-servere levere interaktive brukergrensesnitt til klientapplikasjoner. I dag kan MCP servere og klienter kun utveksle tekst og strukturert data, men dette har vist seg å kunne bli problematisk når verktøy trenger å presentere visuell informasjon eller samle kompleks brukerinput.

Den foreslåtte løsningen for standardiserte UI-ressurser inneholder blant annet:

• Forhåndsdeklarerte ressurser med URI-skjemaet ui://
• Standard kommunikasjonskanal ved bruk av postMessage
• Støtte for HTML som rendres i iframes med bruk av sandbox, som gir bred nettleserstøtte, kjent sikkerhetsmodell mm.
• Full bakoverkompatibilitet

Hvis du syntes dette virket spennende, så kan du lese mer her 👇.

blog.modelcontextprotocol.io

MCP Apps: Extending servers with interactive user interfaces

Today we’re introducing the proposal for the MCP Apps Extension (SEP-1865) to standardize support for interactive user interfaces in the ...

Trenger vi :closed? 🤔

Sunkanmi Fafowora skrev forrige uke en artikkel som handler om pseudo-selektorer i CSS, og spesifikt om det er behov for en egen :closed-selektor. Vi har allerede tilgang på en :open-selektor, som kan defineres som:

The CSS :open pseudo-selector targets elements that support open and closed states — such as the <details> and <select> elements — and selects them in their open state.

Denne selektoren gjør altså at vi kan style elementer i deres åpne state. Men hva hvis vi ønsker å gi spesifikk styling til en lukket state? Har vi da behov for :closed, eller holder det å bruke :not(:open)? Argumenter for :closed inkluderer blant annet at det kan bli mer semantisk, enklere å lese og at man unngår casen der :not(open) alltid vil matche ting som aldri åpner eller lukker seg. Argumenter mot å innføre denne nye selektoren er at det kan introdusere høyere læringsterskel, og at man allerede har samme funksjonalitet tilgjengelig.

Foreløpig finnes det ikke noe :closed, men hvem vet, kanskje blir det en endring i fremtiden 🤷. Du kan lese hele artikkelen her 👇.

css-tricks.com

Should We Even Have :closed? | CSS-Tricks

Is there really a difference between using :not(:open) and :closed? As always, it depends. Sunkanmi Fafowora explains why :closed is currently ...

Responsiv spacing mellom bokstaver 👾

Tyler Sticka har skrevet en artikkel om letter-spacing, og om hvordan mellomrommet mellom bokstaver kan påvirke lesbarheten på digitale flater. Spesifikt trekker han frem et usecase der en kunde hadde opplevd problemer med at mindre mellomrom mellom bokstaver på små skjermer hadde gjort teksten vanskelig å lese. Erfaringen var at overskrifter fungerte bra, men på mindre tekst ble det veldig vanskelig å lese. Løsningen ble å bruke CSS til å styre at større font-size fører til mindre letter-spacing. Følgende kodesnutt viste seg å løse deres problem:

* {
  letter-spacing: clamp(
    -0.05em,
    calc((1em - 1rem) / -10),
    0em
  );
}

Måten dette fungerer på er å først bruke *-selektoren for ar regelen skal gjelde alle elementer, og slik blir verdien basert på hvert elements unike font-size. 1rem representerer font-size til rot-elementet, mens 1em representerer font-size på nåværende element. Ved å trekke rem fra em får vi dermed en representasjon av hvor mye større teksten har vokst i forhold til rot. Men siden ønsket her var å minske og ikke øke mellomrommet mellom bokstavene når skriftstørrelsen øker deler man på et negativt tall, og tar til slutt i brukk clamp-funksjonen for å sette en minimum og maksimum for hvilke verdier som kan brukes. Dette er kanskje ikke den vakreste koden du har sett, men det funker 🧙.

I fremtiden vil det heldigvis komme full støtte for CSS-funksjonen progress (som foreløpig bare er en eksperimentell feature), og dette vil fjerne behovet for bruk av kompleks matematikk og magiske numre i slike beregninger. Du kan lese hele artikkelen her 👇.

cloudfour.com

Responsive Letter Spacing

Minimizing the readability impact of a typographic brand requirement.

VS Code Private Marketplace 💹

Til slutt kunne VSCode forrige uke melde om at de nå har kommet med privat markedsplass for sine utvidelser som du kan lese mer om her 👇.

code.visualstudio.com

Introducing the Visual Studio Code Private Marketplace: Your Team's Secure, Curated Extension Hub 🎉

Private Marketplace for VS Code extensions now generally available.

Det var alt for denne gang, vi sees neste uke 👋