Индивидуальный план развития: Frontend-разработчик

• Создаёт ветку, делает осмысленные коммиты и отправляет их в удалённый репозиторий
• Объясняет разницу между merge и rebase и не переписывает опубликованную историю
• Отменяет изменения через revert, reset и restore в подходящих ситуациях
• Разрешает конфликт слияния и проверяет результат тестами

Практика. Провести учебный проект через 10 веток с pull request, специально создать и разрешить 3 конфликта, откатить один неудачный коммит через revert.

• Оформляет небольшой pull request с описанием, что и как проверить
• Исправляет замечания ревью и поддерживает ветку в актуальном состоянии

Практика. Сделать 5 pull request в учебный или открытый проект с описанием и пройти ревью.

• Ревьюит чужой код по существу — ошибки, поддержка, безопасность — а не по вкусу
• Объясняет выбор между trunk-based и GitFlow для своей команды

Практика. Отревьюить 10 чужих pull request с письменными замечаниями и разобрать с автором самые спорные.

• Перемещается по файловой системе, создаёт, копирует и удаляет файлы без файлового менеджера
• Находит строку в сотне файлов через grep и считает совпадения пайпом
• Задаёт переменные окружения и объясняет, почему команда «не найдена» (PATH)
• Заходит на сервер по SSH-ключу и смотрит логи сервиса через tail -f

Практика. Неделю работать с проектом только из терминала — запуск, тесты, Git, поиск по коду, просмотр логов — и записать 20 команд, которые пригодились.

• Оценивает сложность своего кода в O-нотации, включая вложенные циклы и операции со словарём
• Объясняет, как работают быстрая сортировка и сортировка слиянием, и что такое устойчивость
• Пишет бинарный поиск без ошибок на границах
• Решает задачи на два указателя и скользящее окно уровня easy

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

• Решает задачи уровня medium на графы (BFS, DFS), рекурсию и динамическое программирование
• Проговаривает решение вслух, оценивает сложность и проверяет граничные случаи до запуска

Практика. Решить 40 задач уровня medium и пройти 2 пробные алгоритмические секции по 45 минут с решением вслух.

• Выбирает между списком, словарём и множеством по нужным операциям и их сложности
• Объясняет устройство хеш-таблицы — хеш, коллизии, расширение — и почему ключ неизменяемый
• Применяет стек и очередь в задачах (скобки, обход в ширину)

Практика. Реализовать с нуля хеш-таблицу с цепочками и расширением и сравнить скорость со встроенным словарём.

• Использует кучу для топ-K и приоритетных очередей
• Объясняет амортизированную сложность и устройство B-дерева в индексах баз данных

Практика. Решить задачу «топ-10 самых частых запросов из потока на миллион строк» с кучей, оценить память и время.

• Рассказывает путь запроса от ввода адреса до отрисовки страницы — DNS, TCP, TLS, HTTP, разбор и отрисовка
• Объясняет разницу между IP-адресом, доменом, URL и портом
• Объясняет, чем TCP отличается от UDP и где применяется каждый

Практика. Открыть сайт с вкладкой Network в DevTools и письменно разобрать по таймингам один запрос — DNS, соединение, TLS, ожидание, загрузка.

• Называет методы и коды ответа HTTP и выбирает подходящие для своего API
• Читает запрос и ответ в curl и DevTools — заголовки, тело, коды
• Объясняет разницу 401 и 403, 502 и 504

Практика. Описать API ассистента (5 эндпоинтов) с методами, кодами ошибок и примерами запросов в curl.

• Настраивает кэширование ответов заголовками Cache-Control и ETag
• Объясняет, что дают HTTP/2 и потоковая передача для ответов LLM

Практика. Включить потоковую выдачу ответа через SSE за nginx и проверить, что ответ не буферизуется.

• Объясняет, как браузер находит IP по домену и что такое TTL
• Проверяет записи домена через dig или nslookup

Практика. Посмотреть A, CNAME, MX и TXT записи трёх известных сайтов и объяснить, что означает каждая.

• Планирует смену DNS-записей с учётом TTL без простоя
• Использует dns-prefetch и preconnect для сторонних доменов

Практика. Описать план переезда сайта на новый сервер через смену DNS без простоя с учётом TTL.

• Выкладывает статический сайт на хостинг и подключает свой домен
• Объясняет, что делает CDN

Практика. Выложить учебный проект на GitHub Pages или Netlify со своим доменом и HTTPS.

• Выбирает вид хостинга под проект — статика, платформа, сервер — с обоснованием
• Настраивает HTTPS и кэширование на CDN

Практика. Перенести проект за CDN, настроить кэширование статики и сравнить время загрузки из разных регионов.

• Описывает конвейер отрисовки — DOM, CSSOM, layout, paint, composite
• Находит ошибку и медленный запрос с помощью Elements, Console и Network в DevTools

Практика. Найти через DevTools 3 проблемы на учебной странице — ошибку в консоли, неудачный запрос, неприменённый стиль — и исправить.

• Записывает и читает профиль во вкладке Performance, находит долгие задачи и лишние пересчёты раскладки
• Объясняет, почему синхронный скрипт блокирует разбор HTML

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

• Размечает страницу семантическими элементами — header, nav, main, article, section, footer
• Строит иерархию заголовков без пропусков и использует ссылку для перехода, кнопку для действия
• Пишет осмысленный alt для картинок и пустой для декоративных

Практика. Сверстать страницу статьи только семантическими тегами, проверить её валидатором W3C и скринридером.

• Делает форму с подписями, правильными типами полей, autocomplete и встроенной валидацией
• Обрабатывает отправку формы в JS через FormData и preventDefault

Практика. Сделать форму регистрации с 6 полями, встроенной валидацией и отправкой на тестовый API.

• Показывает ошибки доступно — связь с полем через aria-describedby, фокус на первом ошибочном поле
• Объясняет, почему проверки на клиенте не заменяют проверки на сервере

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

• Делает интерфейс доступным с клавиатуры — видимый фокус, логичный порядок, Escape закрывает окно
• Проверяет контраст и использует родные элементы вместо div с обработчиками

Практика. Пройти свой проект только с клавиатуры и исправить все места, где фокус теряется или не виден.

• Применяет ARIA для сложных виджетов (вкладки, combobox, модальные окна) по шаблонам WAI-ARIA
• Проверяет интерфейс скринридером и инструментами axe или Lighthouse

Практика. Довести сложный виджет (модальное окно или автодополнение) до соответствия шаблону WAI-ARIA и проверить в NVDA или VoiceOver.

• Встраивает проверки доступности в CI и дизайн-систему и обучает команду

Практика. Добавить автоматические проверки axe в CI и тесты компонентов, провести для команды разбор типичных ошибок доступности.

• Задаёт уникальные title и description, семантические заголовки и человекочитаемые адреса

Практика. Проверить свой сайт в Lighthouse по разделу SEO и исправить все замечания.

• Настраивает robots.txt, sitemap, канонические адреса и Open Graph
• Объясняет, почему контент только на клиенте хуже индексируется, и выбирает SSR или статическую генерацию для публичных страниц
• Добавляет структурированные данные schema.org

Практика. Настроить sitemap, канонические адреса, Open Graph и JSON-LD для каталога и проверить в инструментах поисковиков.

• Объясняет, почему применился конкретный стиль — специфичность, порядок, наследование
• Считает размер элемента в content-box и border-box
• Использует rem, переменные CSS и не прибегает к !important

Практика. Разобрать 10 задач на специфичность (какое правило победит и почему) и привести стили учебного проекта к box-sizing border-box без регрессий.

• Строит раскладки на Flexbox и Grid и выбирает подходящий инструмент
• Использует position relative, absolute, fixed и sticky по назначению

Практика. Сверстать по макету страницу каталога — шапка, сетка карточек на Grid, фильтры на Flexbox, липкая панель.

• Объясняет контекст наложения и решает проблемы z-index
• Решает проблему «элемент не сжимается» и переполнение во flex-контейнере

Практика. Разобрать и исправить 5 сломанных раскладок с проблемами z-index, переполнения и сжатия.

• Верстает mobile first с медиазапросами и гибкими сетками
• Делает адаптивные картинки через srcset и sizes

Практика. Сделать адаптивную версию страницы каталога для экранов 360, 768 и 1440 пикселей.

• Использует контейнерные запросы для переиспользуемых компонентов
• Учитывает сенсорный ввод, безопасные зоны и динамическую высоту окна на мобильных

Практика. Переделать карточку товара на контейнерные запросы так, чтобы она работала и в сетке, и в боковой панели.

• Применяет один подход к организации стилей последовательно — БЭМ, CSS Modules или Tailwind

Практика. Перевести стили учебного проекта на CSS Modules или Tailwind без глобальных конфликтов.

• Обосновывает выбор подхода к стилям для проекта с учётом SSR и команды
• Выносит токены дизайна в переменные и поддерживает темы

Практика. Добавить тёмную тему на токенах в CSS-переменных без изменения компонентов.

• Делает переходы и анимации на transition и keyframes

Практика. Сделать анимации появления модального окна и тоста без JavaScript.

• Анимирует только transform и opacity и проверяет плавность в профайлере
• Учитывает prefers-reduced-motion

Практика. Найти анимацию, вызывающую layout на каждом кадре, переписать её на transform и сравнить профили.

• Называет типы JavaScript и объясняет разницу примитивов и объектов
• Предсказывает результат сравнений и приведений типов и всегда использует ===
• Копирует объекты поверхностно и глубоко и знает, какие методы массивов меняют исходный массив

Практика. Решить 20 задач «что выведет код» на типы и приведения и реализовать глубокое копирование вручную.

• Объясняет разницу var, let и const и временную мёртвую зону
• Объясняет замыкание и пишет на нём счётчик, debounce и throttle

Практика. Реализовать debounce и throttle с тестами и объяснить задачу с setTimeout в цикле на var и let.

• Определяет this в разных способах вызова и чинит потерю контекста
• Пишет классы с наследованием и приватными полями

Практика. Решить 10 задач «чему равно this» и исправить потерю контекста в колбэках учебного кода.

• Объясняет цепочку прототипов и как class устроен поверх неё
• Реализует bind вручную

Практика. Реализовать bind, наследование без class через Object.create и объяснить разницу с классами.

• Объясняет event loop, микро- и макрозадачи и предсказывает порядок вывода
• Пишет асинхронный код на async/await с обработкой ошибок

Практика. Решить 15 задач на порядок вывода с промисами и таймерами и переписать код на колбэках на async/await.

• Выбирает между Promise.all, allSettled, race и any и запускает независимые запросы параллельно
• Отменяет запросы через AbortController и защищается от гонок ответов
• Реализует Promise.all вручную

Практика. Реализовать Promise.all и функцию запросов с ограничением параллельности и повторами.

• Находит и изменяет элементы DOM, вешает и снимает обработчики
• Применяет делегирование событий и объясняет всплытие и перехват
• Вставляет пользовательские данные через textContent, а не innerHTML

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

• Делает запросы через fetch, проверяет res.ok и показывает состояния загрузки и ошибки
• Объясняет CORS и почему ошибка CORS — настройка сервера

Практика. Сделать страницу, которая загружает данные из публичного API с состояниями загрузки, пустого результата и ошибки.

• Отменяет запросы при уходе со страницы и обрабатывает повторы и таймауты
• Работает с cookies на другом домене и понимает preflight

Практика. Написать обёртку над fetch с таймаутом, повтором, отменой и типизацией ответа.

• Использует import и export, именованные и по умолчанию

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

• Объясняет tree shaking и пишет модули без побочных эффектов при импорте
• Разделяет код через динамический import

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

• Устанавливает зависимости, различает dependencies и devDependencies и коммитит lock-файл
• Объясняет семантические версии и разницу ^ и ~

Практика. Разобрать package.json и lock-файл своего проекта и объяснить, откуда взялась каждая прямая зависимость.

• Использует npm ci в CI, обновляет зависимости осознанно и проверяет уязвимости
• Работает с workspaces pnpm

Практика. Обновить зависимости проекта до актуальных мажорных версий с проверкой ломающих изменений и аудитом уязвимостей.

• Типизирует функции, объекты и пропсы, использует объединения и сужение типов
• Использует unknown вместо any и включает strict

Практика. Перевести учебный JS-проект на TypeScript в режиме strict без any.

• Пишет дженерики и использует утилитарные типы
• Описывает дискриминированные объединения для состояний (загрузка, успех, ошибка)
• Валидирует данные с сервера схемой (Zod) и выводит из неё типы

Практика. Типизировать слой API — дженерик-клиент, схемы Zod для ответов, дискриминированные объединения для состояний запросов.

• Пишет однофайловые компоненты на Composition API с ref, computed и директивами
• Передаёт данные через props и события, использует v-model

Практика. Сделать на Vue список задач с фильтрами, формой и сохранением.

• Управляет состоянием через Pinia и маршрутизацией через Vue Router
• Объясняет устройство реактивности на прокси и её ограничения

Практика. Сделать на Vue и Nuxt каталог с серверным рендерингом, Pinia и маршрутами.

• Создаёт компоненты, сервисы и маршруты через Angular CLI
• Использует внедрение зависимостей и HttpClient

Практика. Сделать на Angular список задач с сервисом данных и маршрутами.

• Работает с сигналами и RxJS (switchMap, debounceTime) для данных и событий
• Делает реактивные формы с валидацией

Практика. Сделать на Angular поиск с автодополнением на RxJS и форму с реактивной валидацией.

• Пишет компоненты на Svelte 5 с рунами $state, $derived и $effect
• Объясняет, чем подход компилятора отличается от виртуального DOM

Практика. Сделать на SvelteKit небольшой блог с маршрутами и загрузкой данных.

• Создаёт React-проект на Vite с TypeScript и запускает его
• Объясняет, почему React перерисовывает интерфейс при изменении состояния

Практика. Создать проект на Vite, сделать в нём счётчик и список с добавлением элементов.

• Пишет JSX с выражениями, условным рендерингом и фрагментами
• Знает ловушку && с нулём и экранирование вставленных строк

Практика. Сверстать карточку заказа в JSX со всеми состояниями — оплачен, не оплачен, с комментарием и без.

• Обрабатывает события и передаёт колбэки от родителя к дочерним компонентам
• Объясняет, почему обработчик видит состояние на момент рендера

Практика. Сделать компонент поиска, который сообщает родителю запрос по отправке формы.

• Разделяет props и state, поднимает общее состояние в ближайшего родителя
• Обновляет состояние неизменяемо и через функцию, если оно зависит от предыдущего
• Использует стабильные ключи в списках

Практика. Сделать список покупок с добавлением, удалением, отметкой и фильтром, разбитый на 4 компонента.

• Вычисляет производные значения при рендере вместо дублирующего состояния
• Объясняет согласование (reconciliation) и роль ключей

Практика. Найти в существующем коде дублирующее и производное состояние и упростить компоненты.

• Использует children и слоты для обёрток — модальные окна, карточки, раскладки

Практика. Сделать компонент Card со слотами для заголовка, действий и содержимого.

• Строит составные компоненты с общим контекстом
• Заменяет render props и HOC пользовательскими хуками

Практика. Сделать составной компонент Tabs (Tabs.List, Tabs.Tab, Tabs.Panel) с доступностью.

• Использует useState и useEffect с правильным массивом зависимостей и очисткой
• Соблюдает правила хуков и объясняет, почему их нельзя вызывать в условиях

Практика. Сделать компонент с таймером и подпиской на размер окна с корректной очисткой.

• Отличает задачи для эффекта от вычислений при рендере и убирает лишние эффекты
• Использует useReducer для сложного состояния

Практика. Переписать компонент с пятью useEffect, убрав эффекты, которые на самом деле вычисления или обработчики событий.

• Использует useRef для доступа к DOM и фокуса

Практика. Сделать поле, которое получает фокус при открытии модального окна.

• Передаёт ref в дочерние компоненты и открывает методы через useImperativeHandle
• Интегрирует сторонние библиотеки (карты, графики) через ref и эффекты

Практика. Обернуть стороннюю библиотеку графиков в React-компонент с корректным созданием и уничтожением.

• Выносит повторяющуюся логику в пользовательские хуки со стабильным возвращаемым значением
• Тестирует хуки через renderHook

Практика. Написать хуки useDebounce, useMediaQuery и useLocalStorage с тестами.

• Объясняет, когда компонент перерисовывается, и находит лишние рендеры в Profiler
• Применяет memo, useMemo и useCallback там, где это измеримо помогает
• Использует useTransition и виртуализацию для тяжёлых списков

Практика. Ускорить список на 5000 элементов с фильтром, измерив время рендера до и после.

• Объясняет архитектуру Fiber и конкурентный рендеринг на уровне идей

Практика. Подготовить для команды разбор, как работает React Compiler и какая ручная мемоизация становится не нужна.

• Разделяет код по маршрутам через lazy и Suspense
• Строит постепенное появление страницы вложенными границами Suspense

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

• Ставит границы ошибок на уровне страниц и виджетов с запасным интерфейсом и отправкой в мониторинг
• Объясняет, какие ошибки границы не ловят

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

• Рендерит модальные окна и подсказки через порталы с управлением фокусом
• Объясняет всплытие событий из портала по дереву React

Практика. Сделать доступное модальное окно на портале с ловушкой фокуса и закрытием по Escape.

• Разделяет состояние на локальное, глобальное, серверное, в URL и в формах и выбирает инструмент для каждого

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

• Обосновывает подход к состоянию для большого приложения и правила для команды

Практика. Описать правила работы с состоянием для команды с примерами и антипримерами.

• Передаёт тему или пользователя через Context

Практика. Сделать переключатель темы на Context.

• Избегает лишних перерисовок — мемоизация значения, разделение контекстов
• Объясняет, почему Context — не менеджер состояния

Практика. Найти и устранить лишние перерисовки из-за контекста с помощью React DevTools Profiler.

• Загружает и изменяет данные через useQuery и useMutation с инвалидацией
• Делает оптимистичные обновления с откатом при ошибке

Практика. Перевести список заказов на TanStack Query с пагинацией, отменой заказа и оптимистичным обновлением.

• Описывает состояние слайсами, читает его селекторами и отлаживает в Redux DevTools
• Объясняет action, reducer, middleware и почему редьюсер должен быть чистым

Практика. Перенести корзину приложения на Redux Toolkit с селекторами и тестами редьюсеров.

• Создаёт хранилище Zustand и подписывается на его часть селектором

Практика. Сделать корзину на Zustand с сохранением в localStorage.

• Делает контролируемые и неконтролируемые формы и объясняет разницу

Практика. Сделать форму обратной связи с валидацией на контролируемых полях.

• Строит формы на React Hook Form со схемой Zod и доступными ошибками

Практика. Сделать форму оформления заказа на React Hook Form и Zod с зависимыми полями.

• Настраивает маршруты, параметры и вложенные раскладки в React Router

Практика. Сделать приложение из 4 страниц с вложенной раскладкой и страницей 404.

• Загружает данные до показа страницы, защищает маршруты и хранит фильтры в URL

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

• Стилизует компоненты CSS Modules или Tailwind и использует clsx для условных классов

Практика. Перевести стили React-проекта на CSS Modules или Tailwind.

• Тестирует компоненты через Testing Library и user-event

Практика. Покрыть тестами 3 компонента приложения.

• Тестирует компоненты с провайдерами и сетью через MSW, хуки — через renderHook

Практика. Сделать общую функцию renderWithProviders и покрыть тестами страницу с загрузкой данных.

• Типизирует props, состояние и события в React-компонентах

Практика. Перевести React-проект на TypeScript в режиме strict.

• Пишет дженерик-компоненты и типизирует контекст с проверкой провайдера

Практика. Сделать типизированный дженерик-компонент таблицы с колонками и сортировкой.

• Строит приложение на App Router — маршруты по файлам, раскладки, загрузка данных на сервере
• Использует Server Actions для форм

Практика. Сделать на Next.js блог или каталог с серверными компонентами, формой на Server Actions и метаданными для SEO.

• Проектирует кэширование и стратегии рендеринга страниц Next.js

Практика. Разобрать и описать поведение кэша Next.js в своём приложении и настроить инвалидацию по событию.

• Разделяет серверные и клиентские компоненты и ставит границу "use client" осознанно
• Объясняет отличие серверных компонентов от SSR

Практика. Перевести страницу с загрузкой данных в useEffect на серверный компонент и сравнить объём JS на клиенте.

• Создаёт мобильное приложение на Expo с навигацией и нативными компонентами
• Объясняет отличия от веба — стили, раскладка, жизненный цикл

Практика. Сделать на Expo мобильный клиент своего веб-приложения из трёх экранов.

• Создаёт проект на Vite, запускает dev-сервер и собирает продакшен-версию

Практика. Создать проект на Vite с TypeScript и React и настроить переменные окружения.

• Анализирует состав бандла и уменьшает его разделением кода и заменой тяжёлых библиотек
• Объясняет tree shaking, хеши в именах файлов и source maps

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

• Настраивает ESLint и Prettier так, чтобы они не конфликтовали, и исправляет замечания

Практика. Настроить ESLint и Prettier в учебном проекте и исправить все замечания.

• Подключает проверку перед коммитом и в CI, включая отдельную проверку типов
• Подбирает правила для React, доступности и TypeScript

Практика. Добавить lint-staged, проверку типов в CI и плагины react-hooks и jsx-a11y, исправить найденное.

• Пишет юнит-тесты на Vitest для чистых функций
• Пишет тест компонента через Testing Library, находя элементы по роли и подписи

Практика. Покрыть тестами утилиты и 3 компонента учебного проекта.

• Подменяет сеть через MSW и тестирует асинхронное поведение
• Покрывает тестами ключевые сценарии компонентов, а не детали реализации

Практика. Написать тесты формы оформления заказа с подменой API через MSW — успех, ошибка сервера, валидация.

• Пишет сквозные тесты ключевых сценариев на Playwright без фиксированных задержек
• Запускает их в CI с трассировкой упавших тестов

Практика. Покрыть Playwright 3 ключевых сценария (вход, поиск, оформление заказа) и запустить в CI в двух браузерах.

• Определяет, какие сценарии покрывать сквозными тестами, и борется с нестабильными тестами

Практика. Провести аудит набора e2e-тестов — убрать дублирующие, починить нестабильные, сократить время прогона.

• Объясняет XSS и CSRF и не вставляет пользовательские данные через innerHTML
• Не хранит секреты в коде фронтенда

Практика. Найти и исправить XSS в учебном приложении с выводом комментариев.

• Выбирает хранение токенов — HttpOnly-cookie с SameSite против localStorage — с обоснованием
• Настраивает Content Security Policy и санитизирует HTML при необходимости
• Объясняет CORS и preflight

Практика. Настроить CSP для своего приложения без unsafe-inline и перенести токен из localStorage в HttpOnly-cookie.

• Проводит ревью безопасности фронтенда и зависимостей и вводит правила для команды

Практика. Провести аудит безопасности фронтенда (XSS, CSP, токены, зависимости) и оформить план исправлений.

• Улучшает LCP — приоритет главной картинки, современные форматы, меньше блокирующих ресурсов
• Убирает сдвиги вёрстки (CLS) размерами картинок и резервированием места
• Разделяет код по маршрутам и загружает тяжёлое лениво

Практика. Улучшить LCP и CLS страницы до «хороших» значений по Lighthouse на мобильном профиле и описать каждое изменение.

• Вводит бюджеты производительности с проверкой в CI

Практика. Внедрить size-limit и Lighthouse CI с бюджетами для ключевых страниц.

• Находит долгие задачи и лишние пересчёты раскладки в профайлере и устраняет их
• Улучшает INP — дробление работы, Web Worker, виртуализация списков

Практика. Ускорить взаимодействие с таблицей на 10 тысяч строк до INP ниже 200 мс и показать профили до и после.

• Выстраивает мониторинг производительности реальных пользователей и разбор регрессий

Практика. Настроить сбор INP реальных пользователей по страницам и разобрать топ-3 регрессии.

• Объясняет CSR, SSR, SSG, ISR и гидратацию и выбирает стратегию для страницы
• Исправляет ошибки гидратации

Практика. Сделать на Next.js сайт, где лендинг статический, каталог пересобирается по времени, а личный кабинет рендерится на клиенте.

• Проектирует рендеринг продукта — какие страницы как рендерятся, кэширование и нагрузка на сервер

Практика. Описать стратегию рендеринга и кэширования для интернет-магазина с оценкой нагрузки на сервер.

• Ведёт серверное состояние через TanStack Query с инвалидацией и оптимистичными обновлениями
• Выбирает между опросом, SSE и WebSocket для обновлений в реальном времени

Практика. Перевести загрузку данных проекта с useEffect на TanStack Query с кэшем, повторами и оптимистичным обновлением.

• Организует контракт с бэкендом — генерация типов из OpenAPI или схемы GraphQL

Практика. Настроить генерацию клиента и типов из OpenAPI в CI так, чтобы изменения API ломали сборку фронтенда.

• Использует localStorage и sessionStorage и понимает их ограничения

Практика. Сохранять черновик формы в localStorage с обработкой ошибок доступа.

• Использует Intersection Observer для ленивой загрузки и бесконечной ленты
• Выносит тяжёлые вычисления в Web Worker
• Объясняет Service Worker и делает простое офлайн-кэширование

Практика. Сделать бесконечную ленту на Intersection Observer и офлайн-режим страницы на Service Worker.

• Настраивает CI с линтером, типами, тестами и сборкой для своего проекта
• Выкладывает статический фронтенд на хостинг или CDN

Практика. Настроить GitHub Actions или GitLab CI для своего проекта с проверками и автоматической выкаткой на хостинг.

• Настраивает кэширование статики с хешами и короткий кэш index.html
• Делает preview-окружение на каждый PR и откат на предыдущую сборку
• Обрабатывает ошибку загрузки чанка после выкатки

Практика. Добавить preview на каждый PR, правильные заголовки кэширования и сценарий отката, проверить поведение открытой вкладки после новой выкатки.

• Подключает сбор ошибок с source maps, контекстом и привязкой к релизу
• Собирает Core Web Vitals реальных пользователей по страницам
• Настраивает алерт на рост ошибок после выкатки

Практика. Подключить Sentry и web-vitals к проекту, найти и исправить 3 реальные ошибки из собранных отчётов.

• Выстраивает процесс разбора ошибок и регрессий производительности с владельцами

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

• Организует код по функциональности, а не по типу файлов, с публичным API модулей
• Не допускает циклических зависимостей между модулями

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

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

Практика. Описать архитектуру фронтенда продукта (слои, границы, состояние, правила зависимостей) в design doc и включить проверку границ в CI.

• Пишет переиспользуемые компоненты без бизнес-логики с понятным API и историями в Storybook
• Использует токены дизайна через CSS-переменные для тем

Практика. Сделать 5 компонентов (кнопка, поле, модальное окно, выпадающий список, тост) с доступностью, темами на токенах и историями в Storybook.

• Проектирует библиотеку компонентов для нескольких продуктов с версиями и changelog
• Организует процесс владения и принятия изменений в дизайн-системе

Практика. Вынести UI-кит в отдельный пакет с semver, автоматической публикацией, скриншотными тестами и описанием процесса изменений.

• Проводит секцию frontend system design — требования, компоненты, модель данных, API, производительность, доступность
• Обсуждает компромиссы (рендеринг, кэш, реальное время) с оценкой последствий
• Планирует постепенную миграцию legacy-фронтенда на новый стек

Практика. Разобрать письменно 3 задачи frontend system design (автодополнение, лента с бесконечной прокруткой, совместный редактор) по единой структуре и пройти пробное собеседование.

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

Практика. Собрать монорепозиторий из двух приложений и общего UI-пакета на pnpm workspaces и Turborepo, сравнить время CI с кэшем и без.

• Предлагает минимум два варианта решения задачи с плюсами и минусами
• Проверяет спорное решение прототипом или замером, а не мнением

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

• Пишет design doc для крупной задачи и проводит его обсуждение с командой
• Фиксирует архитектурные решения (ADR) с причинами и условиями пересмотра
• Различает обратимые и необратимые решения и тратит время пропорционально

Практика. Написать design doc для крупной задачи (контекст, варианты, расчёты, риски, план), провести ревью с командой и зафиксировать итог в ADR.

• Разбивает задачу на части по 1–3 дня и даёт оценку диапазоном с допущениями
• Сообщает об отставании сразу, с причиной и вариантами

Практика. Для задачи на 2–3 недели составить декомпозицию, оценку диапазоном и список рисков, по завершении сравнить план и факт.

• Ведёт проект из нескольких задач и людей до выкатки и измерения эффекта
• Снимает главные риски в начале проекта и выпускает результат частями
• Сам доводит неясную задачу до понятной постановки вместе с заказчиком

Практика. Провести проект на 1–2 месяца с 2–3 участниками — план с контрольными точками, еженедельный статус заказчику, выкатка по частям, разбор итогов.

• Вводит в работу нового сотрудника и объясняет на ревью не только что, но и почему
• Поддерживает документацию по своей части системы в актуальном виде

Практика. Провести онбординг нового сотрудника или стажёра и обновить по его вопросам документацию для новичков.

• Ведёт подопечного по плану развития с измеримым результатом
• Распространяет знания на команду — внутренние доклады, разборы, гайды
• Снижает зависимость команды от себя как единственного эксперта

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

• Объясняет техническую проблему и её последствия неспециалисту без жаргона
• Решает рабочие разногласия обсуждением фактов, а не позиций

Практика. Подготовить для продакта одностраничное описание технического долга в своей области — что это стоит бизнесу и что предлагаете.

• Влияет на решения продукта аргументами о стоимости, рисках и пользе
• Выполняет принятое решение, с которым не согласен, зафиксировав риски
• Представляет результат работы руководству в цифрах эффекта

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

• Проводит техническое собеседование по заранее заданным критериям и задаче
• Пишет отзыв по критериям с примерами из ответов кандидата
• Участвует в калибровке оценок с другими интервьюерами

Практика. Провести 5 собеседований в паре с опытным интервьюером, затем 5 самостоятельно, сравнить свои оценки с итоговыми решениями.