Журнал «Доктайп» — фронтенд, айти, обучение

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

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

MCP — протокол контекста модели: через подключённый сервер клиент агента получает инструменты работы с браузером. Playwright MCP даёт агенту возможность открывать страницу, читать её структуру и выполнять действия. Решение о приёмке всё равно опирается на заранее заданные условия и наблюдаемые результаты.

Нужны Node.js 24 или новее, основы HTML и JavaScript, а также клиент агента с уже подключённым Playwright MCP. Подключайте сервер по настройкам своего клиента; здесь используем готовое соединение. Отдельный материал о подключении MCP к локальному серверу поможет подготовить этот этап.

Vite собрал приложение, хотя TypeScript подчёркивает ошибку в редакторе. Такое возможно: преобразовать файл в JavaScript и проверить типы — отдельные операции. Соберём небольшой заказ и добавим команду, которая остановит сборку на заведомо неверном типе.

import.meta.env.VITE_DELIVERY_LABEL возвращает undefined, хотя строка есть в .env. Проверим всю цепочку на карточке доставки: где лежит файл, какое имя читает браузер, какой режим запущен и когда Vite подхватывает изменения.

Форма выглядит исправной, пока сервер не возвращает ошибку. Проверим в настоящем браузере путь от ввода адреса до ответа API, затем повторим отправку после управляемого сбоя. Все файлы и сервер будут локальными.

Понадобятся основы HTML и JavaScript, терминал и Node.js 24 или новее. Пример использует Playwright Test — средство запуска браузерных тестов. React не требуется: проверять будем законченную страницу подписки с собственным HTTP-сервером.

Кнопка формы нажимается, но неверный адрес всё равно уходит в API. Напишем тест, который воспроизведёт сбой, затем добавим проверку поля и убедимся, что повторная отправка после ошибки сохраняет введённые данные.

Объект проверки — форма подписки на подборку статей. Vitest запустит тесты, Testing Library найдёт элементы по доступным именам, а user-event выполнит ввод и нажатия. Тесты работают в jsdom — среде с DOM внутри Node.js. Настоящий браузер здесь не запускается.

Нужны основы React, промисы JavaScript и Node.js 24 или новее. React Hook Form для упражнения не требуется: поведение проверяемой формы важно само по себе, независимо от способа управления полем.

Форма проходит проверку в браузере, сервер отклоняет заявку, а введённые данные исчезают. Соберём форму записи на консультацию: React Hook Form сохранит значения и состояние отправки, Zod проверит поля, сервер вернёт управляемую ошибку для повторной попытки.

Понадобятся основы React, асинхронные функции JavaScript и Node.js 24 или новее. У примера два процесса: Vite показывает интерфейс, локальный сервер принимает JSON. Регистрироваться во внешнем сервисе не потребуется. Данные существуют только в памяти запроса.

Исправление доставки уже закоммичено в ветке новой функции, но нужно и в релизной ветке. Перенесём выбранный коммит через git cherry-pick, проверим новый результат и отдельно воспроизведём конфликт, чтобы отработать продолжение и отмену операции.

После git stash pop появились конфликтные маркеры, а изменения вернулись лишь частично. Сначала сохраним исходную запись и выясним, какие правки уже попали в рабочую папку. Затем разберём конфликт в отдельном учебном репозитории.

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

Вы выбрали тему каталога, обновили страницу — фильтр исчез. Исправим это: сохраним применённые условия в URL, восстановим форму при открытии ссылки и научим выдачу следовать кнопкам «Назад» и «Вперёд».

Сохранённые статьи уже пришли, а рекомендации завершились ошибкой. Страница может показать полезную часть сразу и предложить повторить только сбойный запрос. Соберём такой экран и проверим, какую работу здесь выполняет Promise.allSettled.

Файл .ts можно выполнить в Node.js без предварительной сборки, если выбранная версия поддерживает удаление типов. Проверки TypeScript при этом не будет. Запустим расчёт доставки, отдельно найдём ошибку типов и проверим границы этого способа.

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

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

Рабочий пример — запись на консультацию: два поля, имя и почта, и один путь исправления для клиентских и серверных ошибок. Нужны основы HTML и JavaScript, Node.js 24 или новее. Для страницы и сервера хватит встроенных возможностей платформы: отдельные библиотеки устанавливать не потребуется. В конце вы сможете отправить пустую форму, перейти из сводки к ошибочному полю, исправить его и повторить отправку без мыши.

Карточке товара нужны название и цена, а описание и фотография иногда отсутствуют. Опишите данные через пропсы, задайте поведение для пропусков и передайте действие «Добавить в корзину» родителю. TypeScript проверит вызовы компонента. Ещё до запуска страницы.

Пропсы (props) — параметры, которые родитель передаёт компоненту. Наш ProductCard покажет вымышленную кружку за 1299 ₽ и сообщит родителю её строковый идентификатор. Настоящую корзину здесь не собираем: под карточкой появится результат нажатия. Так видно, правильно ли работает её контракт.

Пример рассчитан на существующий клиентский проект с React, TypeScript, обработкой JSX и пакетами типов @types/react и @types/react-dom. Подойдёт шаблон React + TypeScript в Vite. Файлы с JSX сохраняйте с расширением .tsx, а в настройках TypeScript включите strict. Основы языка есть в нашей статье о TypeScript.

Подключите к Claude Code собственный MCP-сервер с одной функцией: получить вымышленный товар по идентификатору. Проверим результат, отсутствие товара и недоступность записи. Так будет видно, что агент действительно вызвал программу и какие действия она ему предлагает.

На 9 октября в обзоре есть новые возможности для изображений, списков и текста. Все они пока поддерживаются частью браузеров. Самый полезный старт — добавить JPEG XL с запасной фотографией в привычном формате.

Это промежуточный выпуск за 1–9 октября 2026 года. Месяц ещё продолжается. Сверяемся с октябрьской страницей Web Features Explorer и выбираем изменения для вёрстки и фронтенда.

Хронологию взяли из Explorer и дополнили релизом Edge 155 от 8 октября: в его примечаниях подтверждены все четыре возможности выпуска. Chrome 155 вышел шестого октября. Возможности остаются ограниченно доступными из-за отсутствия поддержки в Firefox или Safari.

Кнопка добавила товар, список корзины обновился, а счётчик остался прежним? Храните корзину в общем родительском компоненте. Карточкам передавайте количество и обработчики; счётчик и сумму вычисляйте из того же массива при рендере.

Соберём учебный магазин с блокнотом и карандашом. Два клика по блокноту дадут одну строку корзины с количеством два; счётчик покажет две единицы. Сумма — 700 ₽. После удаления блокнота карточка снова покажет ноль.

Нужен проект React, в котором уже работают JSX и основной компонент App. Замените его App.jsx и добавьте рядом cart-model.mjs. Понадобятся основы компонентов и useState; если пока разбираетесь с JSX, начните с введения в React.

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

Настройте Claude Code на трёх учебных файлах: один можно менять сразу, второй — после подтверждения, третий — запрещено. Проверим реальные вызовы инструментов и содержимое файлов. Это поможет понять разрешения до работы с важным проектом.