Вернуться в видеотеку

Решаем чужой код на Codepen. Собеседование по фронтенду

Публичное фронтенд-собеседование со студентом Hexlet: теория браузера и HTTP, разбор чужого React-кода и практическая задача на сортировку таблицы в CodePen.

Источник: Hexlet

Открыть на YouTube

Таймлайн

Коротко о видео

Публичное собеседование для начинающего фронтенд-разработчика: студент Hexlet Сергей Корняков рассказывает о переходе из инженерной работы, учебных проектах и попытках попасть на стажировку. Александр Усков проверяет понимание работы браузера, HTTP, DOM, загрузки скриптов, форматов изображений и React. Затем они устно разбирают чужой React-код на CodePen и выполняют практическую задачу по переключению сортировки таблицы; в финале интервьюер даёт обратную связь о необходимости больше практиковаться в чтении и написании кода.

Затронутые темы

Что взять на заметку

  • Кандидат сообщил, что изучал JavaScript, React и Redux, выполнил несколько учебных проектов и подавался на стажировки в Яндекс, Авито и QIWI; опыта коммерческой работы на момент разговора у него не было.
  • Для подготовки разбираются цепочка URL → DNS → HTTP-запрос → HTML-документ → DOM/CSSOM, а также различие между загрузкой и исполнением JavaScript и моментом готовности DOM.
  • Обсуждаются практические критерии работы с изображениями: оптимизация PNG, выбор PNG при необходимости прозрачности, JPEG для многих фотографий и WebP как современный формат.
  • В части HTTP рассматриваются назначение GET и POST, ответы не только в HTML, но и в JSON, AJAX, идемпотентность GET и связанные с кэшированием риски; это объяснение интервьюера, а не итог универсального правила для любого сервера.
  • При разборе React-кода затрагиваются классовые компоненты, componentDidMount/componentDidUpdate, refs, ReactDOM.render, SVG и причины, по которым Hooks нельзя вызывать условно: их состояние сопоставляется с порядком вызовов.
  • В задаче с таблицей кандидат реализует переключение двух вариантов сортировки: по name и по quantity с дополнительной сортировкой равных значений по location. Интервьюер отдельно указывает на мутацию массива методом sort и советует вычислять отсортированное представление из исходных данных и выбранного режима, а не дублировать данные в state.
  • Итоговая оценка интервьюера: решение заработало, но кандидату полезно нарабатывать практику чтения чужого кода и уверенность в фундаментальных темах браузера и сетей.

Рекомендуем посмотреть

59 мин
FrontendJunior

Фронтенд собеседование 2025 | Junior Frontend | Реальные вопросы и задачи

Практическое собеседование Junior+ Frontend-разработчика с теорией HTML/CSS, JavaScript и React. Разбираются типичные задачи: центрирование блока, собственный map, палиндром и динамический список контактов.

1:12:43
FrontendMiddle

Мок-собеседование по frontend-разработке

Публичное мок-собеседование frontend-разработчика: кандидат обсуждает опыт, процессы команды, наставничество и взаимодействие с коллегами. Техническая часть охватывает HTML и семантику, CSS, CORS и хранение данных в браузере, JavaScript, TypeScript и React. В live coding кандидат решает задачу поиска пары чисел с заданной суммой, а в финале получает обратную связь по ответам и подготовке к этапам найма.

4 ч 5 мин
Frontend

16 лет и 4 года опыта в программировании?

Четырёхчасовое мок-собеседование с 16-летним frontend-разработчиком: теория, live coding и подробный разговор о коммерческом опыте, процессах и развитии. Название текущего работодателя кандидата не раскрывается.