Ошибки ИИ во фронтенде и чек-лист

проверка глазами — тоже проверка

Что это

Завершение главы. Фронтенд отличается от всего предыдущего в книге одним: здесь результат проверяется глазами. Код запустился, ошибок нет, а кнопка не нажимается или текст налез на картинку — и узнать об этом можно, только посмотрев.

Ошибки ИИ во фронтенде

1. div вместо семантики

<div class="btn"> с обработчиком нажатия. Не работает с клавиатуры, невидима для программ чтения с экрана (статья 8.2).

2. Устаревшая раскладка

float, position: absolute и таблицы для расстановки блоков. Код для той эпохи, которой в обучающих данных больше (статья 3.1, причина 3). Сегодня это flex и grid.

3. !important вместо разбора

Перебивает конфликт силой, не решая его (статья 8.3).

4. Магические числа

margin-top: 37px, width: 433px — подогнано под один экран.

5. Нет адаптива

Страница выглядит хорошо ровно на той ширине, на которой её сочинили. На телефоне — горизонтальная прокрутка.

6. Стили прямо в разметке

style="..." в каждом элементе: перебивает внешние правила и не переиспользуется.

7. Доступность забыта

Нет alt, нет label, контраст текста ниже нормы, фокус не виден. ИИ добавляет это, только если попросить прямо.

8. Скрипт выполняется раньше разметки

<script> в <head> без defer — querySelector возвращает null, потому что элемента ещё нет (статья 8.4).

Чек-лист фронтенда

К общему чек-листу приёмки (статья 4.7) добавляются шесть шагов. Первые три — глазами, вторые три — в инструментах разработчика.

1. Посмотреть

Открыть и посмотреть. Банально, но это и есть главная проверка главы: ни тесты, ни типы не скажут, что текст налез на кнопку.

2. Узкий экран

Сузить окно до ширины телефона. Появилась горизонтальная прокрутка — адаптива нет.

3. Длинный текст

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

4. Консоль

F12, вкладка «Консоль». Красного быть не должно.

5. Сеть

Все ли файлы загрузились. 404 на стилях или скрипте объясняет большинство странностей.

6. Клавиатура

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

Как сказать ИИ

Проверь эту вёрстку по списку:
- есть ли div с обработчиками вместо button и a
- используется ли float или position: absolute для раскладки
- есть ли !important и магические числа в пикселях
- что будет на экране шириной 360 пикселей
- есть ли alt у картинок и label у полей

Что из этого проблема? Если ничего — так и скажи.

Сделай этот блок адаптивным: на широком экране три колонки,
на узком одна. Через grid, без медиазапросов на каждую ширину —
используй auto-fit и minmax.

Проверь доступность: порядок заголовков, alt, label, контраст,
видимость фокуса. Список проблем с указанием строк.

Шпаргалка