Основы веб-разработки
Доступность, скорость, HTTP, отладка и организация фронтенда: понятные инструкции, ограничения и контрольные списки для рабочего сайта.
Наследование CSS: что получает дочерний элемент
Наследование позволяет некоторым CSS-свойствам передавать вычисленное значение от родителя к потомкам.
Контекст наложения: почему большой z-index не помогает
Контекст наложения группирует элементы, которые располагаются по слоям относительно друг друга как самостоятельная часть внешнего порядка.
Содержащий блок: откуда считаются размеры и смещения
Содержащий блок задаёт систему отсчёта для определённых размеров, процентов и позиционирования элемента.
em и rem: относительные размеры без случайного умножения
Единицы em и rem выражают размер относительно шрифта, но используют разные точки отсчёта.
svh, lvh и dvh: высота с учётом интерфейса браузера
Разновидности единиц высоты viewport помогают учитывать появление и скрытие браузерных панелей на мобильных устройствах.
Проверка возможностей: @supports и CSS.supports
Проверка возможностей позволяет включать улучшение только тогда, когда среда распознаёт нужную возможность.
Source map: связь собранного кода с исходником
Карта исходников помогает инструментам разработчика связать преобразованный или сжатый код с исходными файлами.
Lock-файл: воспроизводимое дерево зависимостей
Lock-файл фиксирует разрешённое дерево зависимостей проекта, чтобы повторная установка меньше зависела от новых версий пакетов.
Сжатие HTTP: переданные байты и размер содержимого
Сжатие HTTP уменьшает объём передаваемого представления, особенно для текстовых HTML, CSS и JavaScript.
Видимый символ, кодовая точка и длина строки
Количество видимых знаков может отличаться от длины строки JavaScript и от количества кодовых точек Unicode.
Записи DNS: A, AAAA, CNAME и выбор нужного адреса
DNS связывает доменное имя с данными, необходимыми для доступа к сервису. Для сайта важно различать адресные записи, псевдонимы и делегирование зоны.
TLS-сертификат: имя сайта, цепочка доверия и продление
TLS-сертификат помогает браузеру удостовериться, что соединение установлено с заявленным именем сайта. Для рабочего HTTPS важны не только наличие файла сертификата, но и корректная настройка сервера.
Content-Security-Policy: разрешённые источники ресурсов
Content-Security-Policy ограничивает источники ресурсов и отдельные возможности документа. Политика может уменьшить последствия внедрения кода, но не заменяет безопасную обработку данных.
Статика и серверное приложение: какое окружение требуется сайту
Статический сайт отдаёт готовые файлы, а серверное приложение формирует ответы при обработке запросов. Это различие определяет требования к размещению точнее, чем внешний вид страницы.
Резервная копия сайта: состав, хранение и проверка восстановления
Резервная копия полезна только тогда, когда из неё можно восстановить нужное состояние сайта. Важны согласованный состав, доступность копии при аварии и понятная процедура возврата.
Robots.txt и noindex: обход и индексация решают разные задачи
Запрет обхода и запрет включения страницы в поисковую выдачу — разные указания. Их смешение может оставить известный поисковику адрес в индексе или помешать увидеть нужную директиву.
Метод HEAD: проверка заголовков без тела ответа
HEAD позволяет запросить метаданные представления, которое сервер обычно вернул бы на GET, без передачи самого тела ответа. Это удобно для первичной проверки файла или страницы.
Content-Disposition: просмотр файла или скачивание
Заголовок Content-Disposition сообщает браузеру предпочтительный способ обработки ответа. Его часто используют, чтобы выдавать документ как вложение с понятным именем файла.
Referrer-Policy: какие сведения об источнике уходят в запросе
Referrer-Policy управляет передачей адреса страницы-источника в заголовке Referer. Это помогает уменьшить раскрытие путей и параметров при переходах или загрузке внешних ресурсов.
Атрибуты cookie: Secure, HttpOnly, SameSite и область действия
Атрибуты cookie определяют, когда браузер отправляет значение серверу и доступно ли оно клиентскому JavaScript. Они дополняют защиту сессии, но не заменяют проверку прав на сервере.
X-Content-Type-Options: почему nosniff требует правильного MIME-типа
Заголовок X-Content-Type-Options со значением nosniff ограничивает угадывание типа содержимого браузером. Правильный Content-Type при этом остаётся обязанностью сервера.
Vary: разделение вариантов ответа в HTTP-кеше
Заголовок Vary сообщает кешу, какие поля запроса влияют на выбор представления. Один адрес может отдавать разные варианты, и повторно использовать их нужно с учётом этих различий.
Last-Modified: условная проверка сохранённого ресурса
Last-Modified передаёт серверное время последнего изменения представления. Клиент может использовать его в условном запросе, чтобы не загружать повторно неизменившееся тело.
Permissions-Policy: ограничение возможностей страницы и фреймов
Permissions-Policy позволяет серверу ограничивать использование отдельных возможностей браузера, например камеры или геолокации. Это дополнительное правило документа, а не способ автоматически получить разрешение пользователя.
SFTP: проверить сервер перед загрузкой файлов сайта
SFTP передаёт файлы через SSH и позволяет работать с удалённым каталогом сайта. До отправки файлов важно подтвердить сервер, учётную запись и путь назначения.
Subresource Integrity: проверка содержимого подключённого файла
SRI позволяет браузеру проверить, соответствует ли загруженный скрипт или файл стилей ожидаемому хешу. Это помогает заметить изменение ресурса относительно проверенной версии.
Immutable-ресурсы: долгий кеш с новым адресом при изменении
Статические файлы с версией в имени можно хранить в кеше долго, если по прежнему адресу больше не публикуется другое содержимое. Такая стратегия связывает обновление ресурса с изменением URL.
Range-запросы: получение части файла
Range позволяет запросить часть представления вместо полного тела. Это используется, например, при перемотке медиа и возобновлении загрузки, если сервер поддерживает подходящие диапазоны.
Заголовки запроса и ответа: кто отправил настройку
Похожие названия HTTP-заголовков могут относиться к разным направлениям обмена. При отладке важно сначала установить, что отправил клиент, а что сообщил сервер.
Журналы сервера: найти ошибку запроса без публикации секретов
Журнал доступа помогает сопоставить URL, время и статус запроса, а журнал ошибок — получить дополнительные сведения о сбое. Их назначение и фактический формат нужно различать.