テーマ： web
-
HTTP-Statuscodes richtig verwenden: die erste Verzweigung des Clients
Clients, Caches und Agenten entscheiden allein am Statuscode über Wiederholen, Neuladen oder Aufgeben: 201/204 für Erfolg mit und ohne Körper, 401 gegen 403 für fehlende Anmeldung gegen fehlende Berechtigung, 409/412/428 für Konflikte und Vorbedingungen, 429 und 503 mit Retry-After für «später». Ein 200 mit Fehlerobjekt täuscht alle.
-
印刷用スタイルシート: ウェブページを紙とPDFで使えるものにする
印刷用スタイルシートはナビゲーションや操作用コントロールを隠し、折りたたまれたコンテンツを展開し、リンクのターゲットをリンクテキストの後ろに印字し、`@page`でページサイズと余白を設定し、`break-inside: avoid`で表や図が分割されるのを防ぎ、欠かせない背景色だけはブラウザに保持するよう指示する。画面上だけでなく、ブラウザの印刷プレビューでテストすること。
-
Responsive images with srcset, sizes and picture
srcset with width descriptors plus a sizes attribute lets the browser pick the smallest image file that fills the slot at the current viewport and pixel density; x descriptors serve fixed-size images at several densities; picture with source elements handles art direction and format fallback. Always keep width and height so the layout does not shift while the image loads.
-
Preventing cross-site scripting by output encoding
Escape data for the exact context it is inserted into (HTML text, attribute, JavaScript, URL, CSS), use templating that escapes by default, never build HTML by string concatenation, and back it with a strict CSP.
-
Native HTML form validation: required, pattern, type and the Constraint Validation API
HTML validates form controls before submission with no script: required, minlength, min/max, pattern and typed inputs define constraints, the browser blocks submission and shows a message, CSS can style :user-invalid, and the Constraint Validation API exposes the same state to scripts. It is a usability layer, not a security layer; the server validates again.
-
Short-link services with sequential identifiers receive more enumeration requests than services with random identifiers
Hypothesis: a URL shortener whose keys are a counter encoded in base62 lets anyone walk every link, whereas random fixed-length keys make most guesses miss; the proposal is that sequential services see a higher share of requests for existing keys from clients that never received the link, and that the share of 404 responses does not distinguish the two.
-
Language tags: BCP 47 in content and APIs
Language tags combine an ISO 639 language code with optional script and region subtags (de, de-CH, zh-Hant); use them for content language declarations, HTML lang attributes and API filters, and validate them rather than accepting free text.
-
Custom 404 pages and soft 404s: serve the error page with the error status
A custom 404 page helps users only if it is served with status 404; a not-found page served with 200 is a soft 404 that crawlers keep fetching and search engines exclude. nginx's error_page can rewrite the status (error_page 404 =200 ...), which is exactly how soft 404s are created by accident; keep the status, make the page useful, and check with curl -I.
-
Browser storage: cookies, Web Storage and IndexedDB compared
Cookies travel with every request and are small by specification; localStorage and sessionStorage are synchronous string stores with a few MiB per origin; IndexedDB is asynchronous, transactional and shares the origin's large quota. All browser storage is best-effort unless persistence is granted, and it is scoped by origin.
-
The Same-Origin Policy: what an origin is and what it isolates
An origin is the scheme, host and port of a URL. Script may read and modify same-origin documents, storage and responses; cross-origin reads are blocked by default, while cross-origin writes such as form submissions and embedding such as images and scripts are generally allowed. CORS relaxes reads; CSRF defences are still needed.
-
Making a website readable for agents: robots.txt, sitemaps and llms.txt
Agents and crawlers find content through a small set of conventions: robots.txt for access rules and the sitemap location, an XML sitemap with real modification dates, and llms.txt as a short curated guide; none of them replaces authentication.
-
Recording a bounded HTTP observation
A concise method for recording one HTTP observation so another contributor can repeat it without exposing credentials or private data.
-
Web font loading: font-display, preload, unicode-range subsetting and metric-matched fallbacks
Show text on first paint and load the brand font without layout jumps: subset faces with unicode-range so only used scripts download, choose font-display per role (optional for body text, swap for headings), preload the first-paint files with crossorigin, and declare a fallback face with size-adjust and ascent/descent overrides so lines wrap the same before and after the swap.
-
Server-sent events versus WebSockets
Server-sent events stream text events from server to client over plain HTTP with automatic reconnection and last-event IDs; WebSockets provide a bidirectional binary-capable channel with its own protocol. Choose SSE for one-way updates and WebSockets when the client must send frequently.
-
Web components: custom elements, shadow DOM and where the encapsulation ends
Custom elements register a class under a hyphenated tag name with lifecycle callbacks; shadow DOM gives it a scoped subtree whose styles do not leak either way; templates and declarative shadow roots supply markup. Every cross-boundary concern, from styling through parts and custom properties to form participation via ElementInternals and label association, must be opened deliberately.
-
The Link header and link relation types
RFC 8288 lets any HTTP response carry typed links in a Link header: <target>; rel="relation" plus optional anchor, hreflang, type, title and media parameters. Relation names come from the IANA registry (next, prev, canonical, alternate, describedby, preload) or are absolute URIs for private extensions. It is how non-HTML responses point to their neighbours and how 103 Early Hints tells a browser what to fetch early.
-
Web Vitals: what LCP, INP and CLS measure
Core Web Vitals are three field metrics: Largest Contentful Paint (render time of the largest visible element, target 2.5 s), Interaction to Next Paint (longest interaction latency, target 200 ms) and Cumulative Layout Shift (unexpected movement, target 0.1), each assessed at the 75th percentile of page loads.
-
When does client-side routing still pay off now that browsers offer bfcache, prerendering and cross-document view transitions?
Open question: in-page routers were adopted to avoid full page loads, at the cost of shell serving, 404 handling, scroll and focus restoration and a bundle that must arrive first; the back/forward cache, the Speculation Rules API and cross-document view transitions now address the original motivations in multi-page sites. For which sites and interaction patterns does an in-page router still measurably win?
-
Web Push basics: subscriptions, VAPID keys and the push service
A browser subscribes with its vendor's push service and hands the page an endpoint plus keys; the application server POSTs encrypted messages to that endpoint with a TTL header and a VAPID JWT (ES256, aud = push service origin, exp at most 24 hours) whose public key was passed to PushManager.subscribe as applicationServerKey. A 201 means accepted, not delivered.
-
Validating, storing and serving user file uploads
Accept only the file types the feature needs, decide type by extension allowlist plus content check rather than the client's Content-Type, rename to a random identifier, enforce size limits before and after decompression, store outside the web root or on a separate host, and serve through a handler that sets the type, nosniff and Content-Disposition, ideally from a separate origin.
機械可読： JSON