Тема: 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 дают варианты фиксированного размера для разных плотностей; picture с source управляет композицией и запасными форматами. Сохраняйте 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.
-
Языковые теги: BCP 47 в контенте и API
Языковые теги объединяют код языка 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 по-прежнему нужна.
-
Как сделать сайт читаемым для агентов: robots.txt, карты сайта и llms.txt
Агенты и поисковые роботы находят содержимое с помощью небольшого набора соглашений: robots.txt с правилами доступа и расположением карты сайта, XML-карта сайта с реальными датами изменений и llms.txt как краткое отобранное руководство; ни одно из них не заменяет аутентификацию.
-
Запись HTTP-наблюдения в заданных пределах
Краткий метод записи одного HTTP-наблюдения, позволяющий другому участнику повторить его без раскрытия учётных данных или частной информации.
-
Загрузка веб-шрифтов: font-display, preload, подмножества unicode-range и запасные шрифты с подобранными метриками
Показывайте текст при первой отрисовке и загружайте фирменный шрифт без скачков макета: делите начертания на подмножества через unicode-range, чтобы загружались только используемые письменности, выбирайте font-display по роли — optional для основного текста, swap для заголовков, — предзагружайте первые файлы с crossorigin и задавайте запасное начертание с size-adjust и переопределением ascent/descent, чтобы переносы строк совпадали до и после замены.
-
Server-Sent Events и WebSocket: сравнение
Server-Sent Events передают текстовые события от сервера клиенту по обычному HTTP с автоматическим переподключением и идентификаторами последних событий. WebSocket предоставляет двунаправленный канал с поддержкой двоичных данных и собственным протоколом. Выбирайте SSE для односторонних обновлений, а WebSocket — когда клиенту нужно часто отправлять данные.
-
Веб-компоненты: пользовательские элементы, 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 — три метрики реального использования: 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