Frontend-разработчик
110 задач, из них 11 на код с автопроверкой. Условие и варианты ответа открыты всем; проверка, подсказка и разбор — в клубе.
Массивы и коллекции
Строки
JavaScript и TypeScript
- Объект объявлен через const: какая строка приведёт к ошибке
- Обращение к свойству у значения типа unknown в strict-режиме
- Что окажется в переменной после перебора массива
- Проверка пустого поля количества отклоняет введённый ноль
- Цены в фильтре отсортировались в странном порядке
- Порядок вывода при смешивании таймера, промиса и синхронного кода
- Ошибка из асинхронной функции не попадает в try/catch
- Копирование состояния через spread и вложенный объект
- Кнопка «Очистить корзину» не очищает корзину и не выдаёт ошибок
- Сообщение «Все файлы загружены» появляется до окончания загрузки
- Сумма корзины в копейках без ошибок округления
- Подпись «1 товар, 3 товара, 11 товаров» для корзины
- Типизация ответа API через утверждение типа не спасла от падения в проде
- Значение по умолчанию перекрывает валидный ноль в параметрах реестра
- Клиенты из другого часового пояса видят дату доставки на день раньше
HTML, CSS и адаптивная вёрстка
- Итоговая ширина блока с внутренними отступами и рамкой
- Кнопку сверстали контейнером с обработчиком клика: что сломается
- Как расположатся элементы во флекс-контейнере с направлением в столбец
- Между двумя абзацами отступ 30 пикселей, хотя в сумме задано 50
- Что писать в alt у фото товара и у декоративной волны в фоне секции
- Правило ниже по файлу не побеждает: какой фон получит элемент
- Сколько колонок покажет сетка при двух перекрывающихся медиавыражениях
- Шапка таблицы не прилипает при прокрутке
- Кнопка «Оформить заказ» внизу экрана прячется под панель мобильного браузера
- Длинное название товара ломает строку, хотя у текста стоит многоточие
- Заголовок раздела нужен скринридеру, но не должен быть виден на экране
- Дизайнер попросил убрать рамку фокуса, и форму стало невозможно пройти с клавиатуры
- Модалка с огромным z-index оказалась под шапкой сайта
- После релиза вырос CLS: контент прыгает вниз через секунду
- Карточка товара ломается в узкой боковой колонке на широком экране
React и управление состоянием
- Индекс массива в качестве ключа списка и удаление строки
- После добавления элемента список на экране не меняется
- Хук состояния вызывается внутри условия
- В поле имени нельзя ничего напечатать
- Счётчик кликов в useRef растёт, а на экране всё время ноль
- Два вызова обновления счётчика подряд и вывод в консоль
- Эффект отправляет запрос бесконечно
- После успешного создания записи таблица не обновляется
- Выбрали другого клиента в списке, а форма редактирования показывает прежнего
- Таймер обратного отсчёта застыл после первой секунды
- После нескольких переходов между страницами обработчик прокрутки срабатывает десять раз
- Редьюсер корзины без мутаций состояния
- Строку таблицы обернули в мемоизацию, но рендеров не стало меньше
- После быстрого переключения фильтра в таблице оказываются данные прошлого запроса
- При каждом вводе в поиск перерисовываются все компоненты, читающие контекст пользователя
Сборка, производительность и тестирование
- Что даёт вынос страницы админки в отдельный чанк
- Какой тест переживёт рефакторинг компонента формы
- Ключ стороннего сервиса положили в переменные окружения фронтенда
- После деплоя у части пользователей старый интерфейс до очистки кэша
- Карточки в каталоге показывают фото размером 300 пикселей, а скачивают 4000
- Бандл вырос на 70 КБ после добавления одной функции
- Тесты зелёные локально, но периодически падают на CI
- После подключения аналитики отрисовка контента замедлилась в два с половиной раза
- На медленном интернете заголовки страницы три секунды невидимы
- Импорт прайс-листа на 30 МБ замораживает страницу на восемь секунд
- В проекте 400 снапшот-тестов, и при любом изменении их обновляют не глядя
- Отчёт об изменении размеров чанков для проверки в CI
- Реестр на 5000 строк тормозит даже после мемоизации и задержки ввода
- Покрытие 85%, а прод упал из-за смены типа поля в ответе API
- После релиза часть пользователей неделю видит старую версию и ловит ошибки загрузки чанков
TypeScript: дженерики и контракты с API
- Форматирование суммы, которая приходит строкой или числом, не компилируется
- Город из адреса пользователя подчёркнут ошибкой possibly undefined
- Какой тип описывает тело PATCH-запроса для изменения части полей профиля
- Отбор разрешённых полей формы перед отправкой на сервер
- Функция first с типом T вернула undefined, и компилятор этого не заметил
- Состояние загрузки описано тремя флагами, и в UI бывают невозможные сочетания
- Тип без пароля не помешал отправить пароль в аналитику
- Приведение ответа API к ожидаемому формату пользователя
- Какой тип вернёт универсальная функция чтения поля объекта
- Добавили статус заказа refunded, и бейдж молча показывает «Неизвестно»
- Опечатка в имени маршрута компилируется, хотя конфиг описан типом
- Тело PATCH-запроса только из изменённых полей формы
Данные и сеть: REST, TanStack Query, WebSocket
- Сервер ответил 500, а в таблице заказов вместо ошибки пустые строки
- Шапка и боковая панель одновременно запрашивают профиль через useQuery
- Растущая пауза перед повторным подключением
- Справочник городов перезапрашивается при каждом возвращении на вкладку
- Меняется фильтр по статусу, а список заказов остаётся прежним
- Лайк отобразился сразу, запрос упал, а счётчик так и остался увеличенным
- Поиск с подсказками отправляет запрос на каждую нажатую букву
- Авторизация на куках работает в Postman, а из фронтенда API отвечает 401
- Строка запроса из объекта фильтров каталога
- После сна ноутбука доска заказов перестала обновляться в реальном времени
- Пять запросов одновременно получили 401, и после обновления токена пользователя разлогинило
- Применение событий WebSocket к загруженному снимку без потерь и дублей
Архитектура фронтенда: FSD, дизайн-система, микрофронтенды
- В общий компонент аватара импортировали модель пользователя
- После переименования файла внутри фичи сломались импорты в шести страницах
- Смена фирменного цвета растянулась на неделю и 340 правок в стилях
- Поменяли отступ в кнопке дизайн-системы, и через неделю нашли 30 сломанных экранов
- У кнопки дизайн-системы 14 булевых пропсов, и никто не знает, что будет при isPrimary и isDanger
- После релиза микрофронтенда корзины поехали кнопки на странице каталога
- Правка иконки в общем пакете запускает сборку всех шести приложений на 40 минут
- Выпадающий список из дизайн-системы невозможно выбрать с клавиатуры
- Для каждого списка в Redux хранятся данные, флаги загрузки и время последнего запроса
- Фичи корзины и избранного импортируют друг друга
- Компонент из микрофронтенда падает с ошибкой Invalid hook call в хост-приложении
- Команда из четырёх человек хочет разбить админку на микрофронтенды
Next.js и рендеринг: SSR, SSG, гидратация
- Каталог на чистом клиентском рендеринге плохо индексируется и долго показывает первый контент
- Страница «Доставка и оплата» рендерится на сервере при каждом запросе
- Страница падает на сервере с ReferenceError: window is not defined
- Кнопка «В корзину» в серверном компоненте не компилируется
- В консоли ошибка гидратации из-за времени «обновлено в 14:02:31»
- Сайт переписали на Next.js, а в исходном HTML страницы товара всё ещё нет описания
- Статическая сборка 60 тысяч карточек товаров идёт два часа, а цены устаревают
- После добавления "use client" в корневой layout бандл вырос втрое
- После перевода всех изображений на ленивую загрузку главная стала медленнее
- Страница показывается за секунду, но кнопки не нажимаются ещё четыре
- Посетители увидели на главной имя и корзину другого пользователя
- Медленный блок рекомендаций задерживает показ всей страницы товара на три секунды