Ваш первый сайт — Страница 3

Урок: сравнить disabled и readonly в FormData

Оба состояния могут мешать редактированию поля, но по-разному влияют на набор отправляемых значений. Урок показывает это различие на самостоятельной форме в памяти без сетевой отправки.

Урок: найти повторяющиеся id в документе

Повторяющийся id делает связи label, фрагментов URL и ARIA неоднозначными. В этом уроке вы соберёте простой диагностический список повторов на собственной странице до публикации.

Урок: измерить схлопывание соседних отступов

Расстояние между обычными блоками не всегда равно сумме их вертикальных margin. В этом уроке вы измерите положительные соседние отступы и сравните обычный поток с Grid.

Урок: найти автоматически добавленный tbody

Браузер не всегда строит DOM как буквальную копию записанных тегов. На примере таблицы вы увидите, почему селектор прямых строк может не совпадать с деревом после разбора HTML.

Урок: прочитать вычисленную CSS-переменную

CSS-переменная может приходить из родителя, другого правила или встроенного стиля. В этом уроке вы прочитаете значение через getComputedStyle и отделите его от одной конкретной записи в style.

Урок: проверить CSS-селектор через matches()

Element.matches позволяет проверить, соответствует ли конкретный элемент селектору. Это полезно при диагностике условий обработчика или правила оформления без перебора всех элементов документа.

Урок: проверить обработчик с once

Опция once автоматически снимает обработчик после первого вызова. Урок показывает разницу между повторным событием на том же элементе и повторной регистрацией нового обработчика.

Урок: журнал смены видимости вкладки

Небольшой журнал помогает проверить, какие события видимости действительно получает страница. В уроке записи хранятся только в памяти учебной вкладки и никуда не отправляются.

Урок: прочитать причину блокировки ресурса политикой CSP

Сообщение CSP в консоли означает, что браузер ограничил действие по политике документа. В этом уроке вы найдёте нарушенную директиву и источник политики, не отключая защиту целиком.

Урок: понять Age у кешированного ответа

Age помогает оценить возраст ответа, прошедшего через HTTP-кеш. В уроке вы сопоставите его с правилами свежести и не будете считать один заголовок исчерпывающей историей всех слоёв кеширования.

Урок: почему test() чередует true и false

Повторная проверка одной строки может дать разные результаты, если используется глобальное регулярное выражение. Причина часто находится в lastIndex, а не в изменении исходного текста.

Урок: проверить тип ответа до чтения JSON

Endpoint, от которого ожидается JSON, иногда возвращает HTML ошибки или страницу входа. Проверка статуса и объявленного медиатипа помогает объяснить проблему до попытки разобрать неожиданное тело.

Урок: проверить target и rel у ссылок страницы

Проверка внешнего поведения ссылок помогает заметить неожиданные новые вкладки и противоречивые атрибуты. В уроке вы соберёте диагностический список, не переходя по ссылкам автоматически.

Урок: сравнить настройки формы и выбранной кнопки

У формы могут быть общие action и method, а у кнопки — собственные переопределения. Урок помогает увидеть эти различия до отправки и затем подтвердить реальный запрос в Network.

Урок: отличить Invalid Date от допустимой метки ноль

Объект Date может существовать, но хранить недопустимое время. В этом уроке вы проверите состояние до форматирования и не перепутаете корректную начальную точку эпохи с ошибкой.

Урок: выбрать допуск для сравнения вычисленных значений

При работе с приближёнными числами часто нужен допуск, а не точное равенство. Урок показывает явную комбинацию абсолютной и относительной погрешности без обещания универсальной формулы для всех задач.

Урок: найти мягкий дефис в исходном тексте

Мягкий дефис может быть незаметен, пока браузер не выберет перенос в этом месте. В отличие от чисто автоматического переноса он является настоящим символом строки и требует внимания при копировании данных.

Урок: измерить размер JSON до отправки

Число символов в поле не равно размеру готового JSON-тела. В этом уроке вы измерите сериализованную строку в байтах UTF-8, включая имена ключей, кавычки и экранирование.

Урок: сравнить подпись option и значение select

Видимый текст варианта и передаваемое значение могут различаться. Урок помогает проверить, что логика приложения использует стабильный код, а не случайную пользовательскую подпись.

Урок: текущее и исходное значение textarea

Textarea хранит текущее значение отдельно от значения по умолчанию. Это различие проявляется при вводе, программном изменении и сбросе формы.

Урок: пропущенная позиция массива и undefined

Разреженный массив может иметь длину больше числа реально существующих индексных свойств. Пропуск позиции отличается от явно записанного undefined, хотя обычное чтение может выглядеть одинаково.

Урок: проверить, можно ли отменить событие

PreventDefault действует только на отменяемое событие и при подходящих условиях обработчика. Урок отделяет признак cancelable от факта defaultPrevented на безопасном синтетическом примере.

Урок: проверить поле без поддержки field-sizing

Современное CSS-улучшение должно оставлять поле пригодным для ввода в неподдерживающей среде. В уроке вы проверите запасное оформление отдельно от успешного срабатывания нового свойства.