#7 Первое собеседование Junior Frontend разработчицы

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

В выпуске шоу «Отсобеседование» Ольга проходит учебное техническое интервью на позицию junior frontend-разработчика: рассказывает о переходе из графического дизайна, пет-проектах на React и самостоятельном обучении. Основная часть разбирает React-формы, HTML/CSS, Web API и JavaScript — от controlled inputs, пробелов и box-sizing до IntersectionObserver, всплытия событий, замыканий, Promise и event loop. В финале интервьюеры отмечают её подготовку и практический опыт, но советуют укрепить фундаментальные знания и точнее формулировать ответы; сама Ольга сообщает, что уже получила offer, без названия работодателя и подтверждения выхода на работу.

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

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

• Для React-форм стоит уметь объяснить controlled input: `value` берётся из state, изменения идут через `onChange`, а сброс требует обновить state, поэтому нативный reset сам по себе не очистит контролируемое поле.
• Пробелы между строчными `<img>` возникают из пробельных символов в HTML-разметке, а не из автоматически добавленных browser margin; для задачи обсуждают изменение разметки, Flexbox и приём с `font-size: 0` у контейнера с переопределением размера текста у потомков.
• Нужно различать поведение inline и block-элементов, помнить, что block-элемент по умолчанию занимает доступную ширину, а `width: 100%` вместе с padding и border при `content-box` может вызвать переполнение; типовое решение — `box-sizing: border-box`.
• `background` — shorthand, который сбрасывает набор свойств фона, включая изображение; если требуется изменить только цвет, безопаснее использовать `background-color`.
• Для скрытия элементов важно различать `display: none`, `visibility: hidden`, `opacity: 0`, `input[type="hidden"]` и паттерн visually hidden для содержимого, которое должно остаться доступным screen reader’ам.
• Проверку попадания элемента во viewport не стоит выполнять тяжёлыми вычислениями на каждом scroll: обсуждаются `getBoundingClientRect()`, debounce и throttle, а для появления элемента на экране — `IntersectionObserver`.
• Для click outside обработчик можно ставить на `document` или `window` и проверять, является ли `event.target` потомком dropdown через `contains`; злоупотребление `stopPropagation` способно сломать независимые компоненты. Базу JavaScript также стоит отработать на определениях замыкания, цепочек Promise и порядке microtask/macrotask в event loop.