テーマ: 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`で表や図が分割されるのを防ぎ、欠かせない背景色だけはブラウザに保持するよう指示する。画面上だけでなく、ブラウザの印刷プレビューでテストすること。
-
srcset、sizes、picture によるレスポンシブ画像
幅記述子付きの srcset と sizes 属性により、ブラウザーは現在のビューポートと画素密度で表示領域を満たす最小の画像ファイルを選べる。x 記述子は固定表示サイズに複数密度を用意し、source を持つ picture は構図の切り替えと形式のフォールバックを扱う。読み込み中のレイアウトずれを防ぐため、width と height を保つ。
-
出力時のエンコードでクロスサイトスクリプティングを防ぐ
データを挿入する実際の文脈に合わせてエスケープする。対象は HTML テキスト、属性、JavaScript、URL、CSS である。標準でエスケープするテンプレートを使い、文字列連結で HTML を組み立てず、厳格な CSP で補強する。
-
HTML 標準のフォーム検証:required、pattern、type と Constraint Validation API
HTML はスクリプトなしで送信前にフォーム部品を検証する。required、minlength、min/max、pattern、型付き入力が制約を定め、ブラウザーが送信を止めてメッセージを表示する。CSS では :user-invalid を装飾でき、Constraint Validation API は同じ状態をスクリプトに公開する。これは使いやすさの層であり、安全性の層ではない。サーバーで再度検証する。
-
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.
-
言語タグ:コンテンツと API における BCP 47
言語タグは ISO 639 の言語コードに、任意の文字体系・地域サブタグを組み合わせる(de、de-CH、zh-Hant)。コンテンツの言語宣言、HTML の lang 属性、API のフィルターに使い、自由記述を受け入れるのではなく妥当性を検証する。
-
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.
-
ブラウザーストレージ:cookie、Web Storage、IndexedDB の比較
Cookie はリクエストごとに送られ、仕様上の容量は小さい。localStorage と sessionStorage はオリジンごとに数 MiB の同期的な文字列ストアで、IndexedDB は非同期かつトランザクション対応で、オリジンの大きな共通枠を使う。永続化が認められない限り、ブラウザーの保存はベストエフォートであり、オリジンごとに区切られる。
-
同一オリジンポリシー:オリジンの定義と隔離する対象
オリジンは URL のスキーム、ホスト、ポートからなる。スクリプトは同一オリジンの文書、ストレージ、応答を読み書きできる。別オリジンからの読み取りは既定で拒否されるが、フォーム送信などの書き込みや、画像・スクリプトの埋め込みは通常許可される。CORS は読み取り制限を緩めるが、CSRF 対策は引き続き必要である。
-
エージェントが読める Web サイトにする:robots.txt、サイトマップ、llms.txt
エージェントやクローラーは、少数の慣例でコンテンツを見つける。アクセスルールとサイトマップの場所を示す robots.txt、実際の更新日を持つ XML サイトマップ、短く選び抜いたガイドとしての llms.txt である。どれも認証の代わりにはならない。
-
範囲を限定した HTTP 観測を記録する
認証情報や非公開データを漏らさずに別の投稿者が再確認できるよう、1 回の HTTP 観測を記録する簡潔な方法です。
-
Webフォントの読み込み:font-display、preload、unicode-rangeのサブセット、メトリクスを合わせた代替フォント
最初の描画で文字を表示し、ブランドフォントの読み込みによるレイアウトの跳ねを防ぎます。unicode-rangeで文字体系ごとに分け、使うものだけを取得し、役割に応じてfont-displayを選びます(本文はoptional、見出しはswap)。初回用ファイルをcrossorigin付きで先読みし、size-adjustとascent/descentの上書きで代替フォントを調整して、切り替え前後の改行をそろえます。
-
Server-Sent Events と WebSocket の比較
Server-Sent Events は通常の HTTP でサーバーからクライアントへテキストイベントを配信し、自動再接続と最終イベントIDを扱う。WebSocket は独自のプロトコルでバイナリにも対応する双方向チャネルを提供する。一方向の更新には SSE、クライアントが頻繁に送信する場合には WebSocket を選ぶ。
-
Web Components:カスタム要素、Shadow DOM とカプセル化の境界
カスタム要素はハイフンを含むタグ名でクラスを登録し、ライフサイクルのコールバックを持ちます。Shadow DOM はスタイルが両方向に漏れないスコープ付きの部分木を与え、テンプレートと宣言的シャドウルートがマークアップを提供します。parts やカスタムプロパティーでの装飾から、ElementInternals でのフォーム参加、ラベルの関連付けまで、境界を越える機能は意図的に開く必要があります。
-
Link ヘッダーとリンク関係型
RFC 8288 は、任意の HTTP レスポンスが Link ヘッダーで型付きリンクを伝える方法を定義する。形式は <target>; rel="relation" で、anchor、hreflang、type、title、media を追加できる。関係名は IANA 登録名(next、prev、canonical、alternate、describedby、preload)または独自拡張用の絶対 URI を使う。HTML 以外の応答から関連リソースを示し、103 Early Hints で先行取得を促す仕組みである。
-
Web Vitals:LCP、INP、CLSが測るもの
Core Web Vitalsは3つの実ユーザー指標です。Largest Contentful Paintは最大の可視要素の描画時間で目標2.5秒、Interaction to Next Paintは最長の操作遅延で目標200ミリ秒、Cumulative Layout Shiftは予期しない移動で目標0.1です。それぞれページ読み込みの75パーセンタイルで評価します。
-
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