<ForrigeUke uke=”5” år=”2026” />
Dette var uken for nok en CVE i React ⚛️, logiske flagg 🇳🇴 og agent-koding 🎰 — Og 9 016 ting skjedde i frontend-verdenen!
Radio-buttons gjort komplisert 📻
ForrigeUke snakket Marcus om shadcn og valget av underliggende komponentbibliotek, og det er noe veldig deilig med å ta i bruk komponent/design/byggeblokk-system. Det er noe veldig forlokkende med kompleksiteten og problemet det løser - rett ut av boksen. Men noen gang skinner det litt gjennom
I denne posten har Paul Herbert en liten crash out om hvordan shadcn, gjennom Radix implementerer en radio-button ved å bruke button-elementet med en kombinasjon av stiler og aria-roller og en svg.
The Incredible Overcomplexity of the Shadcn Radio Button
Radio buttons are built into web browsers. Why are we using a UI library that wraps another UI library that rebuilds radio buttons from ...
Posten får fram et poeng med hvilken kompleksitet som er skjult når man tar i bruk verktøy som designsystem, og et aldri så lite hjertesukk om at det finnes ganske gode alternativer bygget inn i browseren.
For ordens skyld bruker base-ui (det andre alternativet for shadcn) et vanlig input-element.
Var det bare favicon.ico eller?
Det er ikke så alt for ofte nok, men i ny og ne så får man gleden av å dytte ut en ny app på det store internettet. Og som alle apper siden forrige årtusen, så har det vært praksis å pynte litt ekstra med å legge til et helt eget fane eller bokmerkebilde.
Over årene, så har (heldigvis) internettet kommet lengre, og ikonene er ikke lengre bittesmå 16x16 piksler i fanen i nettleseren, men brukes nå på flere flater. Da kan man stille seg spørsmålene; hvilke størrelser og filformater trenger jeg? Og hvordan setter jeg det opp?
How to Favicon in 2026: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog
Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes ...
Denne blogposten, som originalt er fra 2021 har nettopp fått årets overhaling. Der finner du svaret på hvilke formater som gjelder, og hvorfor, og en del nyttige tips om hvordan du går frem for å lage gode SVG-er, PNG-er og ico-filer, og legger til støtte for dark og light-theme 🌚.
I korte trekk er det du trenger:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- 180×180 -->men jeg anbefaler å lese gjennom posten for å lære hvorfor! 🤓
Focus trapping og modaler 🪤
Det er et WCAG-krav (og god UX) at fokus skal være låst i aktive modaler. Altså sørge for at brukeren ikke kan tabbe seg ut av dialogen mens den er åpen. Det har dukket opp mange spenstige løsninger og triksing og miksing med keyboard-events for å løse dette 🫨.
Da dialog-elementet gikk fra å være en kuriositet til å få bredere browserstøtte i 2022, ble det vesentlig enklere å bygge modaler, fordi det blant annet setter fokus inne i dialogen ved åpning og at det forhindrer interaksjon med bakgrunnsinnholdet.
Det har likevel vært mulig å bruke andre snarveier for å for eksempel hoppe til URL-baren i browseren, altså har ikke fokus vært helt låst.
I denne posten fra forrige uke oppsummeres diskusjonene rundt WCAG-kravene om å implementere ytteligere focus-trapping eller ikke, og gladnyheten for de som har gjort det før; det trenger man altså ikke.
Agent skills for Next.js og react
For de av oss som er helt fremst i tøflene i clanker-verdenen 🤖, har ikke agent skills vært til å unngå de siste ukene. Nå har Vercel kommet med en ferdig full pakke med de ferdighetene agenten trenger for å være en ekspert i alle quirksene med rammeverket Next.js.
Det finnes også noen litt mer generelle skillsets for react og web-utvikling, for de som ikke er på Next-bølgen.
GitHub - vercel-labs/next-skills
Contribute to vercel-labs/next-skills development by creating an account on GitHub.
Men funker det egentlig?
Nesten samtidig skrev de denne ganske interessante og litt nedslående evalueringen av hvor godt konseptet skills fungerer opp mot den også brukte AGENTS.md filen. Overraskende nok fungerer AGENTS.md-konseptet vesentlig bedre.
«Don't wait for skills to improve. The gap may close as models get better at tool use, but results matter now.»
De viser også fram en helt annen løsning hvor man laster ned og peker til dokumentasjonen istedenfor, som viser veldig lovende resultater. Det blir spennende å se hvordan utviklingen av verktøyene blir her, og som de sier selv: Don't wait for skills to improve. The gap may close as models get better at tool use, but results matter now.
AGENTS.md outperforms skills in our agent evals - Vercel
A compressed 8KB docs index in AGENTS.md achieved 100% on Next.js 16 API evals. Skills maxed at 79%. Here's what we learned and how to set ...
Stilsatt highlighting 🔦
Tidligere i januar kom Chrome med støtte for pseudo-selektoren ::search-text. Dette er altså teksten som blir uthevet når man bruker CTRL/CMD+F i nettleseren.
Målet med selectoren er at man kan tilpasse hvordan dette skal vises, og at det skal kunne ha passe god kontrast til bakgrunn (må innrømme at det er en stund siden jeg har sett en gusjegul bakgrunn på en nettside).
Likevel er det ganske nifty, og sammen med et par andre selectorer som for eksempel ::target-text er det det ✨️ lille ekstra ✨️ man kan tilføye nettsiden sin.
I denne posten får man oversikt over de ulike selectorer som brukes til utheving (som stave- og gramatikk-kontroll), og et ganske kult triks på hvordan man kan enkelt kan påse at det alltid står i kontrast til bakgrunnen av elementet det er i. Kult!
