👨‍💻 Собеседование frontend junior разработчика 2024 (CSS, HTML, JS, React, Typescript, Graphql)

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

Это тренировочное собеседование Артёма на позицию junior frontend-разработчика: он рассказывает о почти двух годах опыта, переходе из аутсорса в продукт и интересе к backend-практикам. Основная часть построена как подробный техскрининг по веб-платформе, JavaScript, React, TypeScript и GraphQL с задачами на Event Loop, типизацию данных и code review. Интервьюер регулярно уточняет и исправляет ответы, а в конце даёт фидбек: по его мнению, Артёму стоит углубить React и TypeScript, при этом его backend-опыт и ответы на soft skills названы сильными сторонами.

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

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

• Повторить путь загрузки страницы: URL и HSTS, DNS-кеши и hosts, TCP/TLS, затем HTML, DOM, CSSOM, render tree, а также различия async и defer для скриптов.
• Не отождествлять HTTP с REST: знать REST-ограничения, состав HTTP-запроса, классы статус-кодов и понимать, что один только 500 или 200 не доказывает источник либо отсутствие ошибки.
• Для accessibility подготовить практические примеры: семантические button и списки, клавиатурная навигация и tabindex, screen reader, alt, label, title, контраст и режимы для слабовидящих.
• Закрепить JavaScript: == против ===, явные и неявные преобразования, truthy/falsy, области видимости var/let/const, ссылочные значения объектов и массивов, порядок microtask и task в Event Loop.
• По React стоит объяснять причины ререндера, batching обновлений state, различия useEffect и useLayoutEffect, зависимости и cleanup, назначение useMemo/useCallback и отличие useRef от state.
• По TypeScript важно уверенно различать compile-time типизацию и runtime-валидацию, применять union-типы, utility types, unknown, overload и generic с ограничением extends.
• Для GraphQL подготовить роль схемы как контракта, Query/Mutation/Subscription, выбор нужных полей, code generation и компромисс: гибкость для фронтенда требует более продуманной серверной архитектуры.
• В code review проверять не только стиль: типизацию, лишние state и effects, ключи списков, семантику, доступность изображений, обработку отсутствующих данных и поддерживаемость кода.