Публичное мок-собеседование с начинающим Frontend-разработчиком после обучения на Hexlet: кандидат рассказывает о переходе в разработку, учебных проектах на React и отсутствии коммерческого опыта. Интервьюер проверяет HTML, семантику и доступность, CSS, JavaScript, event loop, Promise, области видимости, сравнения и методы массивов. В финале интервьюер считает базу кандидата неплохой, но рекомендует углубить понимание event loop, выполнения JavaScript браузером, рендеринга и CSS-специфичности.
Подготовьте рассказ о проекте через конкретную проблему: в React-чате повторные подписки на WebSocket после ререндеров дублировали сообщения; кандидат исправил это, подняв подписку выше по дереву компонентов.
Нужно уметь объяснить, почему обычный script ставили в конце body: браузер парсит HTML сверху вниз, и DOM-элементы должны уже существовать для навешивания обработчиков; альтернативой служит DOMContentLoaded.
Для вёрстки важны семантические теги не только ради структуры кода, но и для доступности: screen reader и режим чтения браузера должны распознавать навигацию, заголовки, списки, кнопки и основной контент.
Повторите каскад CSS: при одинаковой специфичности выигрывает правило, расположенное ниже; селектор по id специфичнее класса. По умолчанию используется box-sizing: content-box, а border-box часто задают глобально ради предсказуемых размеров с padding.
Разберите event loop на примере нескольких setTimeout: браузерные API завершают операции, колбэки попадают в очередь, а JavaScript выполняет их после освобождения call stack; очередь работает по FIFO.
Повторите Promise и async/await: fetch возвращает Promise, его состояния — pending, fulfilled и rejected; async/await делает асинхронный код более последовательным для чтения, но не превращает операцию в синхронную.
Помните о мутации массивов: push, pop, splice, reverse и sort меняют исходный массив; перед такой операцией можно создать копию через slice, если исходные данные нужны неизменными.
Wialon
1 ч 59 мин
ХабрМок-собеседование
1 ч 39 мин
2 ч 6 мин