Lab
Browser API-legeplads
Praktiske demoer af moderne webplatform-API'er: crypto, encoding, Intl, media queries, observers og mere, alt kører client-side.
Vælg en API-fane, kør demoen live, og se rigtigt browser-output. Hvert panel bruger native API'er uden backend.
SubtleCrypto digest
Hash tekst med Web Crypto API (SHA-256, SHA-384 eller SHA-512) og mål arbejdet med performance.now().
Client-side hashing understøtter integritetstjek, content addressing og sikre workflows uden at sende rå input til en server.
API-uddrag
const bytes = new TextEncoder().encode(text);
const digest = await crypto.subtle.digest('{algo}', bytes);
const hex = [...new Uint8Array(digest)]
.map((b) => b.toString(16).padStart(2, '0'))
.join('');Forløbet: n/a
TextEncoder / TextDecoder
Kod UTF-8 bytes og round-trip tilbage til en streng til payloads, crypto-input og binært sikkert tekst.
UTF-8 byte-visninger er broen mellem brugertekst og crypto-, netværks- og fil-API'er.
API-uddrag
const bytes = new TextEncoder().encode(text);
const roundTrip = new TextDecoder().decode(bytes);Bytelængde: 0
Intl-formater
Lokale datoer, tal, relativ tid og lister med et valgt locale.
Indbyggede Intl-formater giver i18n-kvalitet uden at sende et formateringsbibliotek med.
API-uddrag
const locale = 'da';
new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'medium' }).format(new Date());
new Intl.NumberFormat(locale).format(1234567.89);
new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(-3, 'day');Locale: n/a
- Dato & tid
- n/a
- Tal
- n/a
- Valuta
- n/a
- Relativ tid
- n/a
- Listeformat
- n/a
matchMedia & Navigator
Læs brugerpræferencer og enhedshints: farvetema, motion, pointertype, forbindelse og hardware.
Adaptiv UI bør respektere systempræferencer og enhedsevner i stedet for kun at gætte ud fra skærmbredde.
API-uddrag
const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conn = navigator.connection;
const language = navigator.language;Media queries
Navigator-øjebliksbillede
ResizeObserver & IntersectionObserver
Se elementstørrelse og synlighed i viewport opdatere live mens du scroller og ændrer størrelse.
Observers driver lazy loading, infinite scroll, sticky headers og responsive widgets uden layout-polling.
API-uddrag
const resizeObs = new ResizeObserver((entries) => {
const { width, height } = entries[0].contentRect;
});
resizeObs.observe(element);
const io = new IntersectionObserver((entries) => {
const ratio = entries[0].intersectionRatio;
}, { threshold: [0, 0.25, 0.5, 0.75, 1] });
io.observe(target);- Widget-størrelse
- n/a
- Target-synlighed
- n/a
- Intersection ratio
- n/a
Scroll target-boksen nedenfor ind og ud af view for at se intersection ratio ændre sig.
Del, tale, storage & clone
Valgfrie platform-API'er: del siden, læs tekst op, gem input og deep-klon struktureret data.
Disse API'er viser hvor langt du kan komme med native browserfeatures før native apps eller backend-storage.
API-uddrag
await navigator.share({ title: document.title, url: location.href });
const utterance = new SpeechSynthesisUtterance(text);
speechSynthesis.speak(utterance);
localStorage.setItem(key, JSON.stringify(value));
const copy = structuredClone(original);n/a
n/a