Вопросы на собеседовании frontend разработчика: Вопросы для собеседования с front-end разработчиком

Вопросы для собеседования с front-end разработчиком

Рекрутинг технического специалиста — это всегда лотерея. Даже качественный прескрин и часовое CBI не гарантируют хороший результат для нанимающего менеджера. Ведь сложность состоит не только в оценке компетенций, но и в прогнозировании поведения кандидата в будущем. Чтобы в деталях разобраться с воронкой найма front-end-разработчиков, мы поговорили со специалистами HURMA.

Оглавление:

Воронка рекрутинга
Прескрин: вопросы по soft skills для frontend-разработчика
Как провести техническое интервью: вопросы для собеседования фронтенд-разработчика
CBI — интервью по компетенциям для технического специалиста
Комитет: комплексно рассматриваем front-end разработчика
Главная особенность рекрутинга фронтенд-разработчика

Воронка рекрутинга

Воронка рекрутинга для разработчика выглядит вполне стандартно: на первом этапе к поиску специалиста подключается сорсер, далее информация о кандидате попадает к техническому рекрутеру.

На этом этапе важно проанализировать резюме и не упустить ключевые моменты о технических скиллах, общем опыте работы с технологиями. Оценивайте любые спорные моменты, например, город/страну проживания, предыдущие места работы, количество работодателей. Когда кандидатов много, и они очень востребованы на рынке, всегда существует соблазн отправить специалиста дальше по воронке, проглядев резюме лишь поверхностно.

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

Прескрин: вопросы по soft skills для frontend-разработчика

Следующий важный этап работы рекрутера — прескрин с кандидатом, который подходит под заявленные требования. На звонке следует выяснить ключевые мотиваторы и проверить софт-скиллы frontend-разработчика.

«Человек должен сразу понимать, куда он идет. И я говорю не только о позиции или стеке. Фронтенд-разработчик должен выяснить для себя цели компании и приблизительно представлять процессы внутри.

Для меня замотивированный соискатель — специалист, желающий разобраться в продукте. Он смотрит презентации и видео, а после задает вопросы о том, что именно его интересует. Он горит желанием выяснить, как всё работает».

технический рекрутер в HURMA

На прескрине можно задать следующие вопросы кандидату:

• Какая технология, по твоему мнению, наиболее популярна сейчас и будет популярной в течение нескольких последующих лет?
• В каком направлении тебе хотелось бы развиваться и почему?
• Сталкивался ли ты когда-нибудь с членом команды, который постоянно критиковал твои идеи? 
• Как ты строишь отношения с коллегами, которые обладают значительной экспертизой в твоей области?
• Как ты анализируешь свой код и ищешь ошибки в нем?

На самом деле, вопросы на этом этапе могут быть абсолютно другими. Здесь все зависит от позиции, опыта самого кандидата, его поведения, актуальных фреймворков, технологий. Универсального шаблона не существует. Просто держите в голове, что для каждой технической позиции будет свой набор требований.

Главное на этапе прескрина выяснить цель кандидата. Возможно, он просто пришёл посмотреть зарплатные вилки и не проявляет особого интереса к реальной работе в компании. Технический рекрутер видит все мотиваторы уже на раннем этапе общения с соискателем и отсеивает тех людей, которые не подходят под общий запрос.

На следующем этапе (в случае с продуктовой компанией HURMA) технический рекрутер отправляет информацию о претенденте непосредственно Head of Engineering. Он получает скоркард с первыми оценками (4 или 5, если встреча прошла успешно).

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

Если с мотиваторами, софт-скиллами и общим опытом нет никаких проблем, кандидата двигают дальше по воронке на этап технического интервью.

Как провести техническое интервью: вопросы для собеседования фронтенд-разработчика

«Оптимально, чтобы техническое интервью проводил нанимающий менеджер. В случае, когда это невозможно, важно присутствовать, чтобы сложить свое мнение о кандидате. Если загрузка не позволяет нанимающему менеджеру присутствовать на каком-либо интервью, важно доверять интервьюерам, которых он просит оценить кандидата по хардам и софтам. Для нового интервьюера важна обратная связь от нанимающего менеджера после первых собеседований, она помогает прийти к общим ценностям».

Head of Engineering в HURMA

Базовые вопросы по HTML и CSS для фронтенд разработчика

• На что необходимо обратить внимание при разработке мультиязычных сайтов?
• Что такое прогрессивная отрисовка?
• Объясни разницу между <script>,<script async> и <script defer>
• Какие существуют принципы семантической вёрстки?
• Что такое #shadow-root в инспекторе HTML-страницы?
• Назови популярные CSS-методологии и их различия
• Как изменить цвет в svg-файле?

Базовые вопросы по JavaScript для фронтенд разработчика

• Что такое замыкание (closure) и какие существуют сценарии его использования?
• Что такое Event loop и как он работает? Можешь в подробностях рассказать про микро- и макрозадачи?
• С помощью чего в JS реализуются наследование?
• Как объекты преобразовываются в примитивы?
• Как работает «сборщик мусора» в JS?
• Объясни разницу между cookie, sessionStorage и localStorage.
• Что такое полифил?
• Что такое webpack?
• Что такое XSS (Cross-Site Scripting)?
• Приведи пример функции с мемоизацией. Когда необходимо использовать эту технику?

Базовые вопросы по React

• Как работает алгоритм Virtual DOM?
• Какие библиотеки менеджмента состояния React-приложения вы знаете? Зачем они нужны?
• Как бы ты построил хорошую архитектуру проекта на React?
• В чем разница между функциональными и классовыми компонентами?
• Расскажи про основные библиотеки React, которые ты знаешь. Какие у них плюсы и минусы?

Базовые вопросы по Vue

• Каковы преимущества Vue.js?
• Расскажи про хуки жизненного цикла компонента в Vue.js?
• Как подключить внешний css-файл в Vue?
• Как реализовать двустороннюю привязку?
• Что такое Vue Router?

Базовые вопросы по Angular

• Как подготовить сборник к деплою?
• Зачем нужна forRoot-функция модуля?
• Что такое NgRx? Когда стоит использовать?
• Как работает Dependency injection?
• Как протестировать API-сервис?

Помните, что хорошо подключать тимлидов на финальном этапе проверки кандидата. Крайне рекомендуется это делать в том случае, если они не проводили техническое интервью. Так мы снижаем риск получить «кота в мешке». Кроме того, кандидату приятно познакомиться с человеком, который будет его непосредственным руководителем, если соискатель в будущем получит оффер от компании.

«Хорошей практикой считается постоянная доработка всей воронки рекрутинга. Для этого на каждом этапе мы анализируем обратную связь от соискателя и прорабатываем неочевидные вопросы.

Между нанимающим менеджером, тимлидом, сорсером и техническим рекрутером сохраняется постоянная связь через HRM HURMA. Это дает возможность сократить срок найма конкурентного специалиста до 3-4 дней. Тесная работа в команде помогает быстро нанимать лучших frontend-разработчиков».

технический рекрутер в HURMA

CBI — интервью по компетенциям для технического специалиста

Если кандидат на техническом интервью показал себя хорошо, он попадает на CBI. На этом этапе его компетенции рассматриваются подробнее. Для этого используется стандартная техника STAR, помимо этого детальнее анализируется прошлый опыт и позиции. Команда выявляет риски для бренда работодателя и проверяет кандидата более глубоко, чем на прескрине.

Очень часто соискатель не проходит дальше по причине отсутствия необходимых софт-скиллов. Тимлид оценивает не только его способности, но и общий fit: подойдет ли новый член команде, хорошо ли он впишется в коллектив, насколько он конфликтен, амбициозен, эмпатичен.

Возьмем простой пример: кандидат хорошо показал себя на техническом интервью и соответствует позиции Middle+, но он тяжело вступает в коммуникацию, не показывает нужных разговорных навыков, остается закрытым и не идет на контакт. На CBI можно выяснить истинные причины такого поведения человека.

Команда определяет настоящие мотивы ухода кандидата с прошлой позиции, смотрит на его поведение в конфликтной ситуации, думает о проблемах, которые могут возникнуть конкретно с этим фронтенд-разработчиком через 6-8 месяцев. Достаточно ли в нем мотивации для самостоятельного обучения? Он ищет помощи со стороны или может справиться с трудностями самостоятельно?

«Частый запрос от кандидатов — это менторинг и обучение внутри компании. Соискатели хотят, чтобы их буквально тыкали носом в ошибки. Запрос у них направлен не на код ревью, а на получение более глубоких знаний. Даже на позиции Middle и Senior приходят кандидаты, для которых один из основных мотиваторов — это менторинг или обучение чему-то новому.

При этом они не всегда готовы делиться своими знаниями или они не делали этого раньше. Для нас отсутствие желания делиться опытом является признаком профессиональной незрелости».

Head of Engineering в HURMA

Front-end разработчику на CBI можно задать следующие вопросы:

• В каких компаниях тебе хотелось бы поработать и почему? Что привлекает в продукте и аутсорсе?
• Если в течение нескольких лет ты будешь занимать одну должность — это ок для тебя?
• Рассматриваешь ли ты для себя в обозримом будущем переход с одной технологии на другую?
• Опиши свою работу на прошлом проекте и расскажи, как сильно выросли твои компетенции за это время
• Назови свой основной скилл, который позволяет тебе эффективно развиваться

Отлично помогают раскрепостить человека открытые вопросы или общение на отвлеченные темы. Правильный small-talk о хобби способствует расслабленной беседе, впоследствии кандидат отвечает более открыто. Такие эмоциональные качели — один из способов получить нужную нам информацию.

Совершенно другой подход заключается в том, чтобы «раскачать» человека по триггерам, болевым точкам. Например, спросить его о том, почему он не хочет работать с определенной технологией или фреймворком.

После выяснения всех нюансов по кандидату на CBI легко «допродать» компанию. Соискателя можно заинтересовать регулярным пересмотром зарплаты, опытом роста коллег в команде, ИПР и прочими ценностными предложениями компании как работодателя.

Комитет: комплексно рассматриваем front-end разработчика

Финальный этап найма технического специалиста — ещё один коллегиальный скрин кандидата. На комитете оцениваются плюсы и минусы соискателя, а также проходят дебаты по спорным моментам.

На этом этапе обязательно подключается CEO и HRD, которые оценивают риски со своей стороны. Возможно, технические специалисты пропустили что-то важное и влияющее на бренд работодателя. Например, это может быть образование, пробелы в профессиональной деятельности, работа в силовых структурах и т.д. На комитете решается, нужно ли дополнительно запросить фидбек и рекомендации с предыдущих мест работы. 

Сопоставляются все факты и определяется финальный рейт в оффере. Также рассматривается вариант контроффера, если кандидат получил уже несколько предложений от других компаний, или предоффера, когда необходимо согласовать сумму.

Главная особенность рекрутинга фронтенд-разработчика

С наймом фронтенд-разработчиков всегда непросто: они понимают свою ценность на рынке, могут часто менять компании, остаются нелояльными к маленьким командам. Помните, что воронка должна охватывать максимальное число релевантных кандидатов, чтобы в ней оказался нужный вам соискатель. В среднем по индустрии, количество людей, которые дошли до этапа прескрина, составляет не больше 10%. А оффер получают не больше 1-2%.

Поэтому важно на следующих этапах воронки работать точечно и подходить индивидуально к каждому кандидату. Это касается составления вопросов для технического интервью и CBI, а также проверки софт-скиллов. 

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

Мануал для джуна. Что нужно знать новичку в frontend-разработке перед собеседованием на проект мечты: вопросы на интервью и примеры тестовых

Создавать IТ-продукты можно на разных уровнях и совершенствовать их как изнутри, (backend), так и снаружи (frontend). Возьмем, к примеру, сайт. Специалист может работать с задачами под капотом, а может развивать интерфейс сайта, приложения или специальное программное обеспечение для бизнеса, чтобы они были удобными, понятными и функциональными.

Последним как раз занимается frontend-инженер. Что еще нужно знать джунам о frontend-разработке, что не стоит делать перед собеседованием и на какие вопросы ответить, чтобы быть готовым на 100% — Frontend Engineer в Levi9 Алексей Горбунов разложил все по полочкам в этом материале.

Базовые знания

1. Сфера frontend-разработки достаточно велика. Специалист может выполнять рядовые задачи, как станки страницы, настраивать передачу информации с сервера на сайт и делать это в понятном пользовательском виде, так и разрабатывать программы для IOS/Android, интерфейсы для работы со статистическими данными, структурирование информации и файлов, интерактивные доски и инструменты производительности, как Trello, Jira, Notion.
2. Языки для работы: JavaScript, TypeScript
3. Фреймворки: общие — React, Angular, Vue; для мобильной разработки — React Native и Ionic; для десктоп-разработки — Electron
4. Английский: чтобы иметь возможность быстро расти и работать на международных рынках и с интересными проектами, нужно владеть английским языком — по крайней мере, уровень В2, чтобы комфортно общаться с командой и клиентом.
5. Frontend-разработчик может работать в любой сфере. Да, в e-commerce ты отвечаешь за взаимодействие клиентов с вашим сайтом и его наполнением, работаешь с браузером и его фичами. Если это мобильное приложение, то разработчик встречается с нативными модулями — настройка уведомлений, интеграция диплинков, элементы видео, как сканирование QR-кода или получение информации с камер. У каждой сферы есть свои нюансы и особенности, но это нормально — разработчик постоянно учится.

Опыт собеседований и их особенности

В общем собеседования можно разделить на два этапа: ознакомительное интервью с HR-ом о ваших пожеланиях, опыте и работе компании, а также общение с техническими специалистами с проверкой ваших навыков разработки. При этом техническое собеседование может занять несколько часов — у меня был и 3-часовой митинг.

Залог успешного интервью — это метч с первой встречи. Чтобы он состоялся, нужно уметь представить себя с хорошей стороны, но не пытаться казаться лучшим и более сильным разработчиком, чем вы сейчас.

Вопросы на интервью

Если soft-skills вопросы нацелены на то, чтобы раскрыть ваши личностные качества, то на техническом интервью внимание уделяется hard-навыкам.

Обычно много надо говорить о работе с «чистым» JavaScript, то есть без фреймворков и библиотек.
• Если речь идет о языке программирования, то классический JavaScript отличается от того, что применяют разработчики на реальных проектах. К примеру, способы работы с определенными типами данных берутся из библиотек как lodash, при всем этом те же классы изредка употребляются при построении интерфейсов на React, разница есть и в работе с объектами, массивами, примитивами, прототипами, классами и другими вещами «под капотом». Подход к решению задач также иной, но без понимания классического JavaScript вы не сможете взаимодействовать с более высоким уровнем абстракции на проекте.
• При работе на React, вероятно, вы не будете сталкиваться с прототипным подражанием. На собеседовании же о них могут спросить.
• Во время большинства интервью в блоке о JavaScript вас спросят типы данных в этом языке, что означает и как работает ключевое слово «this», дадут несколько заданий на синтаксис, прототипы, алгоритмы и различные структуры данных по типу стека или очереди.
  А по фреймворкам, например, React — как работать с перформансом, инструментами для этого, о рендеринге и хуках, а также взаимодействие с жизненным циклом компонента. При этом если при работе на React вы вряд ли будете сталкиваться с прототипным подражанием, то на собеседовании о них могут спросить.
• Во время разговора вас также могут попросить написать код — дать задание и спросить, как вы улучшите перформанс и какое решение требования заказчика можете предложить.
• Могут быть и странные вопросы. Например, у меня когда-то интересовались, что бы я сделал, если бы двое моих коллег подрались.

Интересные тестовые

Тестовые задания — хорошая возможность проверить свои знания и показать, что вы умеете. Однако его задача — это не создать софт для компании, а посмотреть, как разработчик мыслит и работает — например, как объявляет переменные, функции какой структуры проекта придерживается. Но работа над тестовым не должна превышать четырех часов.

• На некоторых технических собеседованиях находился блок live-coding. Выдали данные людей и попросили сверстать адаптивную страницу, используя эти карты. Или просили изобразить карты гостиниц и настроить фильтрацию поиска. Задачей такой задачи — увидеть, как разработчик мыслит, подходит к задаче или использует оптимальные решения при работе с кодом.
• Еще одной интересной задачей было реализовать бесконечный скролл страницы и решить проблему, возникающую из-за перегрузки системы элементами — сайт начинает зависать. Например, это возможно с помощью библиотек как React-virtualized, где элементы виртуализируются и меньше нагружают девайс пользователя.

Подготовка к интервью

Перед собеседованием не нужно пытаться изучить все наизусть — программирование слишком многообразно, чтобы знать все. Вместо этого надо понимать: если вы изучили синтаксис языка и понимаете, как фича работает, мозг начинает воспроизводить эти знания на практике.

А чтобы удостовериться в своих силах и освежить теорию, можно потренироваться на задачах на Leetcode, на Codewars, посмотреть репозитории с популярными вопросами на собеседованиях — там есть блоки по CSS, HTML, JavaScript. Можно также просмотреть похожие кейсы, фреймворки, особенности взаимодействия с ними и работы с перформансом.

Red flags

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

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

Размытый график работы. Когда рабочие часы неопределенны, а рекрутеры уклоняются от прямого вопроса, это может указывать на частые овертаймы, что не очень хорошо для начинающего.

Junior-специалистам лучше больше времени уделять повышению квалификации и обучению. Тогда результат будет гораздо более ценным и для вас, и для компании.

Альтернативная польза собеседований

Когда специалист проходит собеседования, лучше понимает свою позицию на рынке — знаете ли актуальные технологии и потребности бизнеса и соответствуют ли ваши навыки и опыт.

IT-специалист должен постоянно повышать квалификацию, посещать курсы и создавать pet-проекты. И не стоит пытаться показаться более квалифицированным. Не знаете чего-то — не стесняйтесь сказать об этом, но попытайтесь логически понять, как это можно сделать.

Собеседование — это всегда новый опыт и универсальный шаблон, как его провести, нет. Вы столкнетесь с чем-то новыми даже на 40-м интервью и нервничать по этому поводу не стоит. Интервью можно рассматривать как возможность узнать что-то полезное для себя и пообщаться с профессионалами, которые могут чему научить, посоветовать или рассказать инсайдерские вещи о сфере.

Больше мануалов для начинающих здесь .

ВОПРОСЫ ДЕЙСТВИТЕЛЬНЫХ ДЕЙСТВИТЕЛЬНЫХ ДЕЙСТВИТЕЛЬНЫХ ДЕЙСТВИТЕЛЬНЫХ ДЕЙСТВИТЕЛЬНЫЙ ДЕЙСТВИТЕЛЬНЫЙ ДЕЙСТВИТЕЛЬНЫЙ СОДЕРЖАНИЕ



• Понимание интервью для разработчиков Front End
• Вопросы интервью JavaScript
• Вопросы CSS
• . Экосистемные вопросы
• Вопросы для интервью с серверной частью
• Вопросы безопасности
• Инструменты для интервью с клиентской частью
• Заключение
  

Понимание собеседования с разработчиком внешнего интерфейса



Процесс собеседования


Процесс собеседования с разработчиком внешнего интерфейса может сильно различаться в зависимости от компании. Но, как правило, они следуют одному из следующих двух потоков:


Интервью на вынос

1. Начальный телефонный экран с рекрутером или менеджером по найму.
2. Домашнее задание, которое вы выполняете в свободное время.
3. Выездное собеседование, состоящее из двух или трех личных бесед. Скорее всего, покрывает или расширяет ваш заработок.
   
Стандартное собеседование

1. Начальный телефонный экран с рекрутером или менеджером по найму.
2. Экран телефона с инженером в команде.
3. Выездное собеседование, состоящее из четырех или пяти личных бесед.
   

Домашние задачи могут варьироваться от создания полного клиентского приложения до задачи алгоритма в стиле HackerRank. Иногда взятие домой будет ограничено по времени до установленного периода времени. Одним из недостатков домашнего задания является дополнительное время. Кроме того, если это не ограничено по времени, вы, по сути, соревнуетесь за то, чтобы быть человеком, который тратит больше всего времени на совершенствование своего ответа. Положительным моментом является то, что большинство мест, которые проводят домашние интервью, строят свои последующие интервью на основе проекта, который вы уже завершили.


Это означает, что при подготовке к собеседованию с разработчиком внешнего интерфейса вы захотите попрактиковаться как в межличностных навыках, которые вам понадобятся, чтобы преуспеть на экране рекрутера или менеджера по найму, так и в навыках программирования, которые вам понадобятся для на дом и на месте.


Что ищет интервьюер


При подготовке к интервью важно поставить себя на место интервьюера! Если вы когда-либо были по другую сторону стола, используйте этот опыт. Они, вероятно, в середине рабочего дня с «Интервью» в своем календаре. Надеюсь, они просмотрели ваше резюме и получили инструкции от менеджера по найму.


Некоторые компании позволяют каждому интервьюеру спрашивать все, что он хочет. Другие ведут списки «приемлемых» или «запрещенных» вопросов. Некоторые даже структурируют весь процесс собеседования, назначая каждому человеку конкретную тему для обсуждения.


В любом случае у них есть 45 минут (обычно), чтобы встретиться с вами, представиться, познакомиться с вами и решить любые проблемы с кодированием, которые они могут принести. Хороший интервьюер вначале наметит процесс, но часто они разбиты следующим образом:


1. Интервьюер рассказывает о себе (2 минуты)
2. Во время интервью вас просят рассказать о вашей недавней работе (5 минут)
3. Технические вопросы высокого уровня (7 минут)
4. Кодирование (25 минут)
5. У интервьюируемого есть возможность задать вопросы (5 минут)
   

Имейте в виду, что некоторые компании поступают совсем иначе. Часто полезно попросить вашего рекрутера предоставить любую информацию, которую он может предоставить относительно процесса собеседования. Иногда они расскажут вам общую структуру, а иногда даже дадут вам список тем для изучения!


Как подойти к вопросам интервью с разработчиком интерфейса


Собеседования могут быть пугающими. Интервьюируемый получает случайный вопрос из воздуха, и вы должны приступить к его решению! Имейте в виду, что есть много вещей, которые вы можете сделать, чтобы улучшить свой опыт, независимо от заданного вопроса. Вот несколько советов, которые я всегда стараюсь помнить:


1. Не начинайте программировать слишком быстро! Пусть объяснят вопрос. Найдите минутку, чтобы убедиться, что вы действительно понимаете это. Задавайте уточняющие вопросы. Может быть, написать несколько «тестовых случаев», даже если это просто псевдокод. Например: «Итак, если бы я передал число 19837, он вернет 13789″?
2. Не бойтесь задавать вопросы. Могут быть некоторые вопросы, на которые интервьюер не ответит, но в большинстве случаев задавание вопросов сыграет вам на руку!
3. Разложите проблему по полочкам.
4. Используйте волшебные функции! Также довольно часто вы сталкиваетесь с отдельными частями, которых не знаете. как это решить при решении задачи кодирования. Возможно, вы пишете код для доступа к API и забыли синтаксис для `window.fetch`. Не беспокойтесь об этом слишком сильно! Создайте «волшебную» функцию, например `getDataFromAPI` и просто продолжайте двигаться вперед. Всегда лучше, чтобы что-то работало, чем вообще ничего. Волшебная функция с хорошим названием может помочь вам в этом. Такие вещи, как `turnStringIntoArray`, `iterateThroughObject` или `fetchChildDOMNode` вам вернуться к той части проблемы, которую вы понимаете танд.
   

Вопросы на собеседовании по JavaScript



Что такое ключевое слово this в JavaScript?


`this` немного сложно в JavaScript. Его значение определяется тем, как называется функция, внутри которой вы находитесь. В глобальном состоянии `this` устанавливается на объект окна. Значение this также зависит от того, находитесь ли вы в строгом режиме. Внутри функции верхнего уровня строгий режим this будет неопределенным, тогда как нестрогий режим this будет объектом окна. Также стоит знать, что значение `this` может быть перезаписано методом привязки.


В чем разница между let, const и var?


Первоначально var была единственной возможностью JavaScript для определения переменных. В ES6 мы получили const и let в качестве дополнительных опций. Важные выводы:


1. Переменные, определенные с помощью const, не могут быть переназначены.
2. Переменные const и let имеют блочную область видимости.
3. Переменные Var относятся к области действия функции.
4. Подняты переменные, определенные с помощью var.
   
В чем разница между == и ===?


Двойное равенство проверяет только значение. Перед проверкой он выполняет любое необходимое приведение типов. Например, строка «1» будет == целому числу 1, но не ===. Многие современные проекты предпочитают всегда использовать ===. Хотя некоторые люди выступают за написание кода, который хорошо работает с приведением типа ==.


Как получить доступ к элементам HTML с помощью JavaScript?


Ознакомьтесь с getElementById, querySelector и querySelectorAll.


Какие варианты у нас есть для хранения данных?


Вы можете хранить пользовательские данные в localStorage, cookies или sessionStorage.


Как вы можете перемещаться по DOM с помощью JavaScript?


Вы можете получить узел DOM с помощью `getElementById` или `querySelector`. Затем вы можете получить все его дочерние элементы, вызвав `.childNodes` (примечание: childNodes возвращает NodeList, а не массив). Затем вы можете перемещаться по DOM, перебирая дочерние узлы и вызывая `. childNodes` для каждого из них. Вы можете вернуться обратно, проверив `parentNode` любого узла.


Для получения дополнительной информации просмотрите все свойства, хранящиеся на узлах DOM.


Что такое функциональное программирование в JavaScript?


Функциональное программирование относится к использованию чистых функций. В контексте JavaScript это означает знакомство с картой, фильтрацией и сокращением. Также стоит понимать концепцию неизменности.


Вопросы для интервью по CSS



Что такое блочная модель?


Блочная модель CSS относится к тому, как CSS обрабатывает макет. Каждый элемент состоит из содержимого, отступов, границ и полей.


Знай свои селекторы CSS!


Многие вопросы на собеседовании потребуют от вас знания селекторов классов, таких как `.foo`, и селекторов идентификаторов, таких как `#bar`. Также полезно знать, что вы можете выбрать братьев и сестер `div + p`, потомков `div p` и детей `div > p`.


Специфика CSS


Если в вашем CSS два конфликтующих селектора, кто победит? Например, если вы напишете

, будет ли слово «привет» красным или синим? Чтобы решить эту проблему, в CSS есть порядок приоритета, определяющий, какие типы селекторов имеют преимущество над другими. Теги `!important` самые сильные, а универсальный селектор `*` самый слабый. Чтобы получить забавную иллюстрацию, которая поможет вам изучить специфику CSS, посетите сайт specifishity.com.


Что такое псевдоэлементы?


Псевдоэлементы — это ключевые слова, которые позволяют указать отдельные части элемента, а не все целиком. Например, вы можете выбрать `::first-line` элемента или выбрать `::before` элемента.


Что такое Flexbox?


Flexbox — это система компоновки, специфицированная W3 для CSS. Это позволяет легко размещать элементы внутри контейнера, даже если размер этого контейнера является динамическим. Вам следует ознакомиться с некоторыми основными макетами Flexbox. Вот некоторые бесплатные ресурсы:


• Полное руководство по Flexbox
• Flexbox Zombies
  
Что такое сетка CSS?


Grid — это система W3 для создания целых макетов страниц. CSS Grid отлично подходит для буквальных сеток и полных страниц, тогда как Flexbox отлично подходит для групп элементов на странице. Некоторые бесплатные ресурсы включают в себя:


• Полное руководство по Grid
• CSS Grid Garden
  

HTML Вопросы для интервью



Что означает семантический HTML?


Семантический HTML означает использование наиболее подходящего тега для текущей задачи. Это означает использование осмысленных элементов, таких как `

`, `

` и `` вместо использования только `

` и ``.


Что такое веб-доступность?


Веб-доступность означает обеспечение возможности использования Интернета людьми с различными ограниченными возможностями. Это включает в себя обеспечение того, чтобы пользователи, использующие только клавиатуру, могли перемещаться по вашему сайту, а также возможность использовать его для определенных людей, у которых есть проблемы со слухом или зрением.


В чем разница между тегом и атрибутом?


Теги HTML являются элементами. Вспомните ``, `` и `

`. Атрибуты HTML описывают характеристики элементов. Подумайте о `src`, `class` и `id`.


В чем разница между встроенными и блочными элементами?


Встроенные элементы не могут иметь высоту или ширину. Примеры встроенных элементов включают span, a и img. Блочные элементы получают свою собственную строку и занимают всю доступную ширину. Примерами блочных элементов являются div, p и h2.


Показать ничего или видимость скрыта


И отображение ничего, и видимость скрыты скроют элемент со страницы. Разница в том, что если display none, для элемента не будет выделено место, тогда как при скрытой видимости на странице появится пустое место.


Вопросы по алгоритму




Интервью переднего плана обычно не так сильно затрагивают структуры данных и алгоритмы, как собеседования по общей разработке программного обеспечения. Тем не менее, важно знать, как выполнять несколько повседневных задач.


Массивы


Вы должны знать, как нажать, вытолкнуть, сдвинуть и отменить сдвиг. Вы также должны знать, как отображать, уменьшать и фильтровать.


Объекты


Вы должны знать, как перебирать ключи объекта. Чтобы получить дополнительные баллы, узнайте немного о наборах и картах и ​​о том, когда их использовать!


Менее используемые структуры данных


Иногда во время интервью всплывают другие структуры данных. Вы можете получить вопросы о связанных списках, стеках, очередях и деревьях. Чтобы получить краткое руководство по ним, ознакомьтесь с их крошечными структурами данных.


Сортировка


Самая важная вещь, которую нужно изучить, — это некоторые причудливые особенности метода сортировки в JavaScript. Убедитесь, что вы можете использовать его для точной сортировки массива целых чисел. Иногда на фронтенд-интервью также спрашивают о конкретных алгоритмах сортировки. Чтобы освежить их в памяти, ознакомьтесь с этой статьей на freeCodeCamp.


Обозначение Big-O


Сложность времени и пространства время от времени всплывает во время предварительных интервью. По крайней мере, хорошо понимать, что любой написанный вами алгоритм можно использовать на очень маленьком или очень большом наборе данных. Это означает, что такие вещи, как добавление вложенного цикла for, могут иметь серьезные последствия в масштабе. Если вы хотите углубиться, стоит прочитать о нотации Big-O и понять некоторые распространенные нотации, такие как постоянное время и логарифмическое время. Эта статья о Digital Ocean — отличное место для начала.


Вопросы по экосистеме




Какие существуют популярные интерфейсные фреймворки?


Вам определенно не нужно знать, как использовать несколько фреймворков, чтобы получить работу переднего плана. Но может быть полезно быть в курсе текущих тенденций. Взгляните на React, Vue, Angular и Svelte.


Какие есть альтернативы написанию чистого CSS?


Многие команды используют препроцессор CSS, например Less или SASS. Некоторые команды используют библиотеки css-in-js, такие как styled-components. Другие до сих пор используют служебные фреймворки, такие как Tailwind. Опять же, не нужно учиться пользоваться всем этим, но знать о них на высоком уровне приятно!


Какие существуют варианты тестирования кода JavaScript?


Среды модульного тестирования, такие как Jest, очень популярны. Команды также используют такие инструменты, как Selenium или Puppeteer, для тестирования всего веб-сайта.


В чем разница между модульными и сквозными тестами?


Существует множество совпадений, но на высоком уровне модульные тесты означают тестирование вашего фактического кода. Убедитесь, что функции возвращают ожидаемые результаты при задании определенных входных данных. Сквозные тесты предназначены для тестирования самого веб-сайта, а не кода. Они имитируют клики и прокрутки и следят за тем, чтобы сайт вел себя соответствующим образом.


Что такое TypeScript и Flow?


Это оба типа систем для JavaScript. Подобно SASS и LESS, упомянутым выше, они позволяют создавать JavaScript со статическими типами, а затем превращаются в чистый JS при развертывании. Они могут помочь вам отловить ошибки и лучше документировать ваш код.


Что такое упаковщик?


Нам нравится создавать код, разделяя компоненты на отдельные файлы. Это удобно для нас, как для разработчиков, но будет очень медленным, если вы попытаетесь заставить пользователя загрузить все 100+ файлов. Поэтому мы используем такой инструмент, как webpack, чтобы собрать все файлы и объединить их вместе. Таким образом, мы можем обслуживать 1 или 2 «пакета» кода вместо 100 отдельных файлов.


Что такое CDN?


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

Какие инструменты можно использовать для отладки веб-приложений?


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


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




Что такое API?


API означает интерфейс прикладного программирования. В разработке внешнего интерфейса мы часто используем API для обозначения службы REST, к которой мы можем получить доступ с помощью HTTP-запросов для получения данных. Например, api. github.com/user вернет информацию о текущем вошедшем в систему пользователе.


Как получить доступ к API с помощью JavaScript?


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


В чем разница между базами данных SQL и NoSQL?


Базы данных SQL (MySQL, PostgreSQL и т. д.) являются реляционными базами данных и поставляются со структурированным языком запросов. Базы данных NoSQL (MongoDB, DynamoDB) являются нереляционными и имеют динамические схемы.


Контрольные вопросы




Что такое HTTPS?


Безопасный протокол передачи гипертекста — это зашифрованная версия HTTP (протокола передачи гипертекста). Это означает, что конфиденциальные данные, такие как пароли, не могут быть прочитаны во время передачи. Любая конфиденциальная информация должна быть отправлена ​​через HTTPS. Такие компании, как Google, даже начинают настаивать на том, чтобы все веб-сайты обслуживались через HTTPS, поскольку он становится легкодоступным и быстрым.


Что такое XSS?


Атаки с использованием межсайтовых сценариев — это когда злоумышленник внедряет вредоносный код на веб-страницу, просматриваемую другими. Подумайте о социальной сети, такой как Facebook. Если вы загрузили изображение, похожее на ``, вы можете себе представить удивление других пользователей, когда они нажмут на ваше изображение и увидят окно браузера. тревога!


Что такое SQL-инъекция?


Другой тип атаки. Например, если у вас есть форма поиска, и когда пользователь вводит имя, например «Келли», вы берете эту строку и выполняете поиск SQL. Допустим, ваш SQL выглядит так:


`SELECT * FROM Users WHERE UserId = yourVariable`


Злоумышленник может поместить что-то вредоносное в строку поиска, например, `Kelly ИЛИ 1=1`, и теперь он вернет список всех пользователей, а не только запрошенного.


Инструменты для собеседования с разработчиком интерфейса




Существует тонны отличных ресурсов, которые помогут вам подготовиться к предварительному собеседованию. Все они охватывают одни и те же вещи, поэтому, если у вас есть тот, который вы предпочитаете, обязательно используйте его! При этом некоторые из моих любимых инструментов:


• Leetcode — фактический сайт подготовки к собеседованию с наибольшим количеством примеров вопросов.
• Cracking the Coding Interview — фактически книга для подготовки к собеседованию.
• HackerRank — конкурент Leetcode, а также сайт, который чаще всего используется для взятия на дом. Приятно получить некоторый практический опыт работы с их пользовательским интерфейсом, прежде чем начать.
• AlgoExpert — новый сайт с меньшим количеством типовых вопросов, чем у Leetcode, но с премиальными видео для каждого из них.
  

Заключение




Интервью перед началом может быть стрессовым! Есть бесконечное количество вещей, которым нужно учиться. Я всегда рекомендую людям учиться, но обязательно учитесь в здоровом темпе. Установите реалистичные цели и срок, когда вы начнете подавать заявки на работу.


Если возможно, всегда тренируйтесь с реальными инструментами, такими как доска или редактор hackerrank. Практикуйтесь не только в решении проблем, но и учитесь говорить во время написания кода. Помните, не торопитесь с кодированием! Задавайте вопросы, пока полностью не поймете проблему. Кроме того, имейте в виду, что вы можете не ответить на вопрос и все равно получить предложение! Просто делайте все возможное, сообщайте все, что можете, и оставайтесь открытыми для любых отзывов интервьюера. Удачи!


7 Интервью с разработчиком интерфейса Вопросы и ответы

Как разработчик интерфейса, вы играете важную роль в соединении визуального дизайна веб-сайта с функциональностью бэкенда. Вы тот человек, к которому обращаетесь, когда клиентам нужно создавать веб-сайты, удобные для пользователя, с простой навигацией и не повреждающие ваши глаза. Но для того, чтобы вас наняли, вам потребуется продемонстрировать свою компетентность, ответив на ряд вопросов на собеседовании с фронтенд-разработчиком.

Когда вы становитесь фронтенд-разработчиком, вы можете рассчитывать на гарантированную работу и хорошую оплату. Это связано с тем, что Бюро статистики труда прогнозирует увеличение числа новых рабочих мест веб-разработчиков на 23% в течение следующего десятилетия.

Хотите получить работу в этой развивающейся сфере? Узнайте, как произвести впечатление на менеджеров по найму, ответив на семь вопросов для интервью с фронтенд-разработчиком, изложенных ниже.

7 вопросов для интервью с лучшими разработчиками интерфейсов

1. Что вам нравится в работе разработчиками интерфейсов?
2. Какие навыки наиболее важны для веб-разработки переднего плана?
3. Как бы вы обеспечили удобство и простоту навигации по веб-сайту?
4. Какими языками программирования и интерфейсными инструментами веб-разработки вы владеете?
5. Как быть в курсе последних тенденций в разработке интерфейса?
6. Каковы наиболее важные внешние функции и особенности веб-сайта?
7. Расскажите, как бы вы использовали веб-службы REST для разработки интерфейса.

Вопрос № 1: Что вам нравится в работе разработчиком интерфейса?

Менеджеры по найму чаще нанимают кандидатов, которым нравится их работа и которые заинтересованы в росте в своей области. Вот почему вы столкнетесь с одним или несколькими вопросами интервью с фронтенд-разработчиком о вашей страсти к веб-разработке.

В своем ответе обязательно подумайте над следующим:

• Что привлекло вас в веб-разработке?
• Как вы считаете эту карьеру полезной?
• Каковы ваши цели как веб-разработчика интерфейса?

Как вы могли бы ответить

«Как веб-пользователь, нет ничего более разочаровывающего, чем попытка навигации по плохо спроектированному и прерывистому веб-сайту. Изначально это — и мое образование в области веб-разработки — привлекло меня в эту область. Как фронтенд-веб-разработчик, мне нравится творческий выход, который он предоставляет, и возможность применить свои навыки программирования на практике. Кроме того, я горжусь тем, что обеспечиваю пользователям легкую навигацию и взаимодействие с веб-сайтом. Для меня это все о создании отличного пользовательского опыта в осязаемом конечном результате, который я могу видеть и использовать».

«Я все еще чувствую, что есть больше возможностей для роста и изучения способов создания эффективных веб-сайтов. Я хотел бы узнать больше о процессах, связанных с бэкенд-разработкой, чтобы лучше понять, как это работает с интерфейсом».

Вопрос № 2: Какие навыки наиболее важны для веб-разработки переднего плана?

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

При создании ответа укажите следующие данные:

• Основные технические навыки, необходимые для работы.
• Мягкие навыки, относящиеся к веб-разработке.
• Качества, которые делают хорошего веб-разработчика.

Как вы могли бы ответить

«Основные технические навыки, необходимые разработчикам интерфейса, включают опыт работы с JAVA, CSS, JavaScript, JSON, React, HTML и MySQL. Кроме того, интерфейсные веб-разработчики должны хорошо видеть мелкие детали, уметь решать проблемы и обладать сильными аналитическими способностями. Это также помогает быть хорошо организованным, отличным командным игроком и хорошим коммуникатором».

Вопрос № 3: Как бы вы обеспечили удобство и простоту навигации по веб-сайту?

Ожидайте, что на собеседовании вам будут задавать конкретные вопросы о вашем рабочем процессе. Чтобы отреагировать на гипотетический сценарий вашей работы, приведите примеры из вашего опыта работы с предыдущим работодателем или самостоятельного создания веб-сайта.

Вот несколько моментов, которые следует включить в свой ответ:

• Как должен выглядеть удобный веб-сайт.
• Шаги, необходимые для создания удобного веб-сайта.
• Пример веб-сайта, который вы ранее создали.

Как вы могли бы ответить

«Надежная структура CSS является ключом к тому, чтобы общий внешний вид веб-сайта был привлекательным для пользователей. Информация на веб-сайте должна быть легко доступна, а функции веб-сайта должны быть удобными для навигации. Кроме того, все изображения и графика должны быть сжаты, оптимизированы и использованы только по мере необходимости».

«На моей последней работе в фирме, занимающейся веб-разработкой, я полностью перестроил веб-сайт клиента, который работал медленно, имел высокий показатель отказов и плохо ранжировался в поисковой выдаче. После перестройки сайта показатель отказов стал значительно ниже, сайт занял более высокое место в поисковой выдаче, а у клиента увеличилось количество новых посещений и конверсий».

Вопрос № 4. Какими языками программирования и интерфейсными инструментами веб-разработки вы владеете?

Языки программирования являются неотъемлемой частью клиентской веб-разработки. Вам нужно будет показать менеджерам по найму, что вы знаете разницу между Java и JavaScript, чтобы продвигаться вперед в процессе найма.

При обсуждении языков программирования и инструментов веб-разработки подумайте над следующим:

• Языки программирования, которым вы обучались или с которыми работали.
• Инструменты, с которыми вы сейчас работаете.
• Как лучше использовать оба.

Как вы могли бы ответить

«Языки внешнего интерфейса, в которых я больше всего разбираюсь, включают CSS, HTML, JavaScript, jQuery, React и Angular. Некоторые инструменты, которые я прошел обучение и с которыми работал, включают Bootstrap, HTML Boilerplate, Google Fonts и WordPress. Эти языки программирования и инструменты веб-разработки лучше всего использовать для создания эффективного и приятного пользовательского опыта во всех веб-браузерах. Это включает в себя цвета, шрифты, макет, размещение графики и общую навигацию по сайту».

Вопрос № 5: Как вы следите за последними тенденциями разработки интерфейса?

Интерфейсная веб-разработка постоянно развивается. Быть в курсе новых тенденций, инструментов и технологий — ключ к долгой и успешной карьере.

Вот несколько моментов, которые следует обсудить в своем ответе:

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

Как вы могли бы ответить

«Я всегда слежу за новыми технологиями веб-разработки, передовым опытом и тенденциями. Некоторые ресурсы, которые я использую, включают публикации технических новостей и форумы, такие как TechCrunch, CNet, Techist и Mashable. Я также слежу за компаниями, которые производят интерфейсные инструменты веб-разработки, такие как Bootstrap и GitHub. На моей последней работе я мог давать рекомендации высшему руководству о новых инструментах, которые можно использовать для улучшения функциональности и максимальной эффективности».

Вопрос № 6: Каковы наиболее важные внешние функции и особенности веб-сайта?

Создание любого веб-сайта сопряжено с определенными трудностями — это итеративный процесс, ограниченный бюджетом, временем, ошибками и ресурсами, и он никогда не завершается по-настоящему. Вот почему менеджеры по найму будут задавать любому потенциальному разработчику интерфейса вопросы на собеседовании, чтобы узнать их мнение о приоритетах при создании интерфейса.

При создании ответа помните следующее:

• Опыт пользователя.
• Производительность сайта и SEO.

Как вы могли бы ответить

«Функции и возможности внешнего интерфейса веб-сайта должны быть сосредоточены на пользовательском опыте. Одной из наиболее важных функций веб-сайта является то, как представлен контент. Контент должен быть легко читаемым, соответствовать рекомендациям по доступности и обеспечивать удобство для всех пользователей. Веб-сайт также должен иметь четкую навигацию, чтобы пользователи могли легко получить доступ ко всей важной информации. Наконец, каждый веб-сайт должен быть оптимизирован для мобильных устройств, тем более что сейчас большинство пользователей заходят на веб-сайты со своих мобильных телефонов».

Вопрос № 7. Расскажите, как бы вы использовали веб-службы REST для разработки интерфейса.

REST — один из наиболее широко используемых интерфейсов прикладного программирования, используемых для веб-разработки. Работодатели хотят видеть, что вы полностью понимаете, как работает REST и его роль в веб-разработке.

Вот несколько способов, которыми вы можете дать ответ на вопросы интервью с разработчиком внешнего интерфейса, касающиеся REST:

• Объясните, почему веб-службы REST следует использовать для веб-разработки внешнего интерфейса.
• Обсудите, что делают веб-службы REST.
• Опишите свой опыт использования веб-служб REST.

Как вы могли бы ответить

«REST важен для реализации веб-служб, основанных на API, которые позволяют программному обеспечению и приложениям взаимодействовать с веб-сайтами. Его архитектура позволяет внешним веб-разработчикам разрабатывать веб-службы на основе ресурсов, которые можно передавать по HTTP. Например, я бы использовал веб-службы REST для включения сторонних приложений, таких как корзина покупок или интерфейс социальных сетей».

Присоединяйтесь к Monster Today, чтобы развивать свою карьеру

Теперь, когда вы попрактиковались в ответах на эти вопросы для собеседования с фронтенд-разработчиком, вам просто необходимо пройти собеседование. Начните поиск вакансий разработчика интерфейса, загрузив свое резюме на Monster. Мы свяжем ваше резюме с рекрутерами, которые заинтересованы в проведении собеседований с такими кандидатами, как вы. Кроме того, статьи с советами по карьере от наших экспертов могут предоставить дополнительные советы о том, как пройти собеседование при приеме на работу.

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт