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

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

В начале февраля мне на глаза попалась неплохая статья от Darcy Clarke под названием Front-end Job Interview Questions. Она отлично перекликается с тематикой этого сайта, так что я решил ее перевести и выложить здесь. Статья будет полезна не только для составления вопросов к интервью, но и для проверки своего собственного уровня знаний. Увидев у себя пробел всегда можно его восполнить и оставаться на хорошем мировом уровне. Лично я обнаружил нехилый пробел в области JS :)

Некоторое время назад, группа продвинутых и очень опытных фронт-енд разработчиков собралась вместе и создала замечательный список вопросов для собеседования фронтендеров. Эта группа состояла из @bentruyman,@ajpiano, @paul_irish, @SlexAxton, @boazsender, @miketaylr, @iansym, @vladikoff и @gf3.

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

Если этот список кому-нибудь поможет в будущем, не забудьте отдать должное народу, представленному двумя абзацами выше.

Общие вопросы:

  • Есть ли у вас аккаунт в Twitter?
    • Если да, то за кем вы там следите?
  • Присутствуете ли вы на Github?
    • Если да, то за какими репозиториями вы следите?
  • За какими блогами вы следите?
  • Какую систему контроля версий вы используете?
  • В какой среде вы предпочитаете вести разработку? (OS, редактор, браузер, инструменты и т.п.)
  • Можете ли вы описать ваши действия при создании веб-страницы?
  • Можете ли вы сказать, чем отличается прогрессивное улучшение (progressive enhancement) и graceful degredation?
    • Бонусные баллы за ответ “никто не может”
    • Дополнительные баллы за описание способов определения фич
  • Объясните, что означает “Семантический HTML”.
  • Для чего нужны минификации?
  • Почему лучше размещать клиентские части сайта на нескольких доменах?
    • Сколько ресурсов браузер может использовать с одного домена одновременно?
  • Если у вас есть 8 разных таблиц стилей для дизайна страницы, каким образом вы интегрируете их в сайт?
    • Ожидается ответ — объединение файлов
    • Вычитаются баллы за @import, кроме тех случаев, когда этого требует фреймворк или ваша система.
  • Если вы попали в уже разрабатывающийся проект, где девелоперы используют табы для отступов, в то время как вы — пробелы, то каким образом вы поступите?
    • решение :retab!
  • Создайте простую страницу со слайдшоу
    • Бонусные баллы за отсутствие JS в решении
  • Какие инструменты вы используете для тестирования производительности вашего кода?
  • Если бы вы были мастером одной технологии этого года, что за технология это бы была?
  • Назовите 3 способа для понижения скорости загрузки страницы.
  • Объясните, почему важны стандарты.

Вопросы по HTML:

  • Для чего нужен doctype и какие типы доктайпа вы можете назвать?
  • В чем отличие между стандартным режимом и режимом совместимости (quirks mode)?
  • Какие существуют ограничения при размещении страниц XHTML?
    • Существуют ли какие-нибудь проблемы при использовании страниц как application/xhtml+xml?
  • Каким образом вы будете размещать страницы с контентом на различных языках?
  • Можно ли использовать синтаксис XHTML в HTML5? Как использовать XML в HTML5?
  • Для чего хороши аттрибуты data-?
  • Чем контентная модель в HTML4 отличается от такой же в HTML5?
  • Представим HTML5 как открытую веб-платформу. Что в ней будет использоваться в качестве строительных блоков?
  • В чем заключается разница между cookies, sessionStorage и localStorage?

Вопросы по JS

  • Какие библиотеки JavaScript вы использовали?
  • Чем JavaScript отличается от Java?
  • Что из себя представляют переменные undefined и undeclared?
  • Что такое замыкание и как/почему его используют?
    • Какой у вас любимый шаблон для их создания?
  • В чем заключается типичный вариант использования анонимных функций (anonymous functions)?
  • Объясните, что такое модульные паттерны JavaScript и приведите пример их использования.
    • Бонусные баллы за упоминание пустого пространства имен (clean namespacing).
    • Что если модули не имеют пространства имен??
  • Каким образом вы организуете свой код? (модульные паттерны, классическое наследование?)
  • В чем разница между host objects и native objects?
  • Назвать разницу:
    function Person(){}
    var person = Person()
    var person = new Person()
    
  • Объяснить Function.prototype.bind?
  • Когда вы проводите оптимизацию вашего кода?
  • Можете ли вы объяснить, как работает наследование в JavaScript?
    • Бонусный балл за веселый ответ: “никто не может”.
    • Дополнительный бонусный балл за попытку объяснить.
  • Когда бы вы использовали document.write()?
    • Правильный ответ: в 1999-ом – время отсеять джуниоров
  • В чем разница между функцией определения (feature detection), функцией вывода (feature inference), и использованием UA string?
  • Расскажите максимально детально про AJAX
  • Объясните, как работает JSONP (и почему это на самом деле не AJAX)
  • Использовали ли вы когда-нибудь шаблоны (templating) в JavaScript, и если да, то как и где?
  • Объясните, что такое «подъем» (“hoisting”).
  • Что такое FOUC? Каким образом вы избегаете?
  • Опишите просачивание события (event bubbling).
  • В чем разница между атрибутом (attribute) и свойством (property)?
  • Почему extending built в объектах JavaScript — плохая идея?
  • Почему extending built — хорошая идея?
  • Назовите разницу между document load event и document ready event?
  • В чем разница между == и ===?
  • Объясните, как вы получаете параметр строки запроса из URL в окне браузера.
  • Объясните принцип same-origin policy в отношении JavaScript.
  • Объясните делегирование событий.
  • Опишите наследование шаблонов в JavaScript.
  • Сделайте так, чтобы это работало: 
    [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
    
  • Опишите стратегию для запоминания (memoization) в JavaScript.
  • Почему это называется тройным оператором (Ternary statement), о чем сигнализирует слово тройной (Ternary)?
  • Что такое арность функции (arity of a function)?

Примеры JS-кода:

~~3.14

Вопрос: Какое значение будет возвращено?
Ответ: 3

"i'm a lasagna hog".split("").reverse().join("");

Вопрос: Какое значение будет возвращено?
Ответ: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

Вопрос: What is the value of window.foo?
Answer: “bar”

var foo = "Hello";
(function() { 
  var bar = " World"; 
  alert(foo + bar); 
})(); 
alert(foo + bar);

Вопрос: Какой результат покажут два алерта выше?
Ответ: ”Hello World” & ReferenceError: bar is not defined

Вопросы по jQuery:

  • Объясните “chaining”.
  • Что делает код .end()?
  • Как и почему вы свяжете пространство имен с обработчиком события (event handler)?
  • Какой эффект (или fx) будет от очереди?
  • В чем разница между .get(), [], и .eq()?
  • В чем разница между .bind(), .live(), и.delegate()?
  • В чем разница между $ и$.fn? Или просто что такое $.fn.
  • Оптимизируйте этот селектор:
    $(".foo div#bar:eq(0)")

Вопросы по CSS:

  • Опишите, что делает файл “reset” и почему он полезен.
  • Опишите флоаты (Floats) и принцип их работы.
  • Расскажите о различных техниках очистки потока (clearing) и о том, в каких случаях они применяются.
  • Объясните, что такое CSS спрайты и как вы применяете их на странице или на сайте.
  • В чем разница между IE box model и W3C box model?
  • Назовите ваши любимые техники замены изображений и случаи их использования.
  • CSS-хаки обычно включаются в css файли, или.. где-нибудь еще?
  • В чем разница между способами визуального скрывания контента (и как сделать их доступными только для скринридеров (screenreaders))?
  • Использовали ли вы сетку (grid system), и если да, то какую вы предпочитаете?
  • Использовали ли вы медиа-запросы (media queries) или специфические макеты/CSS для мобильных устройств?
  • Знакомы ли вы с дизайном SVG?
  • Как вы оптимизируете ваши веб-страницы для печати?
  • Назовите основные ошибки при написании эффективного CSS?
  • Используете ли вы LESS?
  • Каким образом вы поступаете, когда видите в макете нестандартные шрифты? (избегайте упоминания webfonts чтобы кандидат сам о них догадался)
  • Объясните, каким образом браузер определяет, что элементы соответствуют CSS-селектору?

Опциональные веселые вопросы:

  • Назовите самую крутую штуку, которую вы когда-либо кодили, которой вы больше всего гордитесь.
  • Знаете ли вы HTML5-банду (HTML5 gang sign)?
  • Расскажите мне о ваших любимых частях в Firebug / Webkit Inspector.
  • Если ли у вас какие-нибудь собственные любимые проекты? Что это за проекты?
  • Объясните значение “cornify”.
  • На листе бумаги напишите вертикально буквы A B C D E. Теперь разместите их в обратном порядке без написания ни одной строчки кода.
    • Подождите и посмотрите, перевернет ли кандидат лист вверх ногами
    • Это должно улыбнуть и снять некоторое напряжение, накопившееся к концу интервью.
  • Pirate или Ninja?
  • Если бы не Веб-разработка, то чем бы вы занимались?
  • Какая для вас любимая фича в Internet Explorer?

PS: Если заметите какие-либо неточности — пишите сюда, буду исправлять. Некоторые термины оказались мне незнакомыми, а некоторые довольно сложно перевести на русский, если до этого использовал только англоязычное название

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

  1. А ответы где? Что за манера давать список вопросов и не давать к ним ответы… желательно изначально скрытые, так чтобы потом нажать и посмотреть.

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

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