К написанию статьи подтолкнул прекрасный с технической точки зрения пост про вопросы и ответы для собеседований на позицию frontend-разработчика. В дополнение к нему я предлагаю несколько иной подход к вопросу найма. Ведь мне всегда казалось, что на собеседовании надо пытаться понять всего две вещи: реальный опыт кандидата и соответствие этого опыта имеющимся в компании задачам. Но никак не то, способен ли человек тупо заучить эти прекрасные книги по JS [1, 2, 3]. Софт скилы мы на этот раз трогать не будем. Равно как и вопросы про фреймворки.
Ниже я приведу группы вопросов и дам пояснения по их смыслу и ожидаемым ответам. Любые комментарии и конструктивная критика приветствуется.
Общие вопросы
Назови несколько источников, откуда ты получаешь информацию про frontend?
Привет Веб-стандартам! Есть куча грамотных разрабов, которые по странным причинам остались в прошлом и совсем не хотят заниматься профессиональным саморазвитием. Могут ли они подойти вам и решать насущные задачи? Да. Вовлечены ли они в свою профессию? Нет. Не имея вовлеченности (внутренней мотивации) такой работник быстрее выгорит, будет менее заинтересован к решению нетиповых задач и больше ориентирован на деньги. Но если у тебя легаси код из 2010-х, то может большего и не надо?
Какие спецификации ты изучал в последние месяц-два?
Чем чаще разработчик обращается к первоисточникам, тем выше у него уровень. На уровне middle+ посты из рассылок про JS или со Smashing Magazine будут приносить куда меньше для понимания сути, чем детальное изучение спек. Есть исключения типа блога V8, но это именно исключение.
Какая часть frontend тебе наиболее интересна?
Согласитесь, что копаться в верстке, делая ее по всем канонам WCAG, HTML и CSS спецификаций, работать с WEBRTC, думать про предметную область и UX, заниматься дебагом и оптимизацией или делать анимации с Three.js - это не одно и тоже. Вполне возможно, что у вас просто иной набор задач, чем интересы у соискателя.
Браузер
Представь, что у тебя есть сайт, состоящий из html, css, js файлов и одной картинки. Когда пользователь ввел в браузере адрес сайта, что происходит в браузере по шагам?
Вопрос на миллион, и тут важно то, как рассуждает кандидат. Что он вообще понимает про OSI, DNS, TCP/IP, TLS, HTTP, critical rendering path, а также API, которыми можно измерить скорость работы этого процесса.
Какие метрики производительности сайта ты знаешь?
Насущный вопрос в мире побеждающего SSR (привет PHP). Нужна SEO оптимизация? Вот метрики Web Vitals. Гоните рекламу на сайт? Давайте посмотрим на ваш каскад. Появились фризы? Пойдем профилировать JS.
Какие способы оптимизации ты знаешь?
Огромная тема для обсуждения, которая не заканчивается на lazy loading, батчингом или созданием виртуальных списков. И пообщаться можно не только про client side. Вообще в ответе вашего API может возвращаться очень много лишней информации, а вместо heart beat на HTTP можно поднять Web Socket.
HTTP
Какими запросами ты пользовался и для чего они были нужны?
Базовый вопрос, который я предлагаю взамен так полюбившегося HR-ами стандарта: “Мне команда поручила спросить у вас, чем отличается GET от POST?”. Интересно, что в голове возникает у вашего собеседника при слове идемпотентность. Ответ на вопрос позволит понять, работал ли кандидат с авторизацией, куками, использовал ли URL API, с какими проблемами декодинга сталкивался. Не ровен час ваш кандидат и gRPC на клиенте юзал или про JSON-RPC слышал.
Какие есть статусы ответов и как ты их обрабатываешь?
Не только показывает понимание того, какие стандарты есть, но и то, как была организована работа с бэком в части API. Как отдавались кастомные ошибки 200 OK + { error: true }, были ли и где хранились ошибки для пользователя и так далее.
Как сделать онлайн обновление на странице по инициативе сервера?
Игра в пинг-понг - это основа веба, но есть еще и такие умные слова, как Long pooling, SSE, WS. Поймем, какой кругозор у кандидата и какие типы задач он решал.
HTML
Что такое и зачем нужна семантическая верстка?
SEO, скрин ридеры, лучшая читаемость кода, помощь браузеру, наконец. Не страдает ли кандидат диватозом, читал ли он стандарт HTML?
Как ты проверяешь, можно ли вложить тег в тег, например, <a> в <button>?
Чуть меньше опыта - только тут, больше опыта - HTML спека с контентной моделью и контекстом.
Какие type есть у <input>? Зачем нужен inputmode? В чем разница между type="button" and <button>?
В этой теме можно разгуляться и понять, какой именно сложности формочки реализовывал соискатель. Понимает ли он то, что многие вещи можно сделать на уровне нативной платформы, а не лепить очередные строки JS кода. И как правильно задать числовой формат ввода.
Для чего можно использовать тег <details>?
Все мы любим табы и аккордеоны. Применений у этого тега много, код понятный, поведение браузера предсказуемо. А еще в 2023 году завезли много интересного.
Как можно сделать модальное окно после 2023 года?
Еще один косвенный признак того, следит ли кандидат за развитием веб платформы. Сам пробовал <dialog>, поймал интересные нюансы.
CSS
Что такое специфичность и каскад?
Чем лучше соискатель понимает эти вещи, тем выше вероятность того, что в коде будет больше CSS и меньше JS. Ведь многие детали стилизации сегодня можно реализовать так, чтобы браузер тратил меньше ресурсов. А значит и сайт грузился быстрее.
Что такое CSS reset и CSS normalize?
Тут и понимание браузерных стилей, и способов борьбы с ними.
Как будет вести себя браузер, если в CSS файле есть @import
Вопрос на пониманием critical rendering path и того, что лучше не писать в коде. Не путать с import в Tailwind.
Какие новые спецификации были внедрены в 2023 или находятся на стадии внедрения в браузеры в 2024?
:has(), @scope, @layer, nesting и все остальное. Надо ли бежать применять? Нет. Стоит ли знать? Да. Согласитесь, что все можно сделать на flex, но использовать grid иногда в разы удобнее.
Примеры кода на JS
const x = type => {
if(type === null){
return undefined;
}
return type;
}Давайте попробуем повысить читаемость кода. Тут вам и понимание ветвлений, и личные привычки кандидата.
const ff = arr => {
arr.forEach(el => {
if(el === true) return 10;
else return 0;
})
}
console.log(ff([false, true, false]));Что вернет код? Довольно часто такой код встречается в жизни, тут есть встроенные методы массивов, ветвление и возврат значения из функции.
const y = name => {
if(name === 'a') return 'a' + 'a';
if(name === 'b') return 'bbb';
if(name === 'c') return 'c' + 'a' + 'b';
if(name === 'aa') return 'aa' + 'aa';
if(name === 'bb') return 'bbb';
if(name === 'cc') return 'ccc' + 'a' + 'b';
}Давайте попробуем повысить читаемость кода. Проверяем знание структур данных и внутреннюю педантичность соискателя.
const fa = () => 10;
const fb = 20;
const obj = {
one: fa,
two: fb
}
const ff = arg => obj[arg];
console.log(ff('one'));
console.log(ff('two'));Что вернет код? Очень частый паттерн. Покажет знание синтаксиса и работу с функциями.
const fff = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
if(res.code === 200) return res;
else return;
}
const fnfn = async () => {
const res = await fff();
console.log(res)
console.log(123)
}
fnfn();Что вернет код? Практическое понимание асинхронности и самый распространенный паттерн работы с ней.
Сколько разрабов, столько и мнений. Этот пост лишь отражает мое видение найма в сфере frontend-разработки. Подходят примеры для junior и middle уровня, но идея вполне распространяется и на более высокие грейды. Важно подчеркнуть, что для проведения такого собеседования со стороны работодателя должен быть опытный разраб с подобным мышлением. А иначе будут изощренные вопросы про редко используемые нюансы промисов или алгоритмические задачи, когда в компании даже на бэке ничего сложнее цикла в цикле не делали.
Комментарии (18)
TrueRomanus
04.01.2024 11:00+1Какая часть frontend тебе наиболее интересна?
Интересы соискателя не имеют смысла на собеседовании, потому что соискатель пришел к Вам не интересы искать а работу работать. Более того вряд ли для кандидата возможно даже по Вашему рассказу точно понять что и как Вы делаете и какие у Вас интересы. Я например при смене работы почти всегда искал компании именно для того чтобы освоить области/технологии с которыми я не работал до этого. Интересы людей могут поменяться в любой момент. Поэтому к сожалению данный критерий прям совсем мимо.
yudeek Автор
04.01.2024 11:00Расскажите, пожалуйста, как на рынке, где подавляющее большинство вакансий содержит требование "работа с React/Vue/Angular от 3х лет", вы получаете офер для работы с технологиями, с которыми у вас нет опыта работы.
TrueRomanus
04.01.2024 11:00+2В вакансиях не только фреймворки обычно и Вы же сами описали технологии с которыми вполне можно не работать (я например не касался работы с картами но это не помешало мне попасть в контору которая занимается только геоинформационными системами), но когда придете на новую работу то там они используются вот так это и работает.
yudeek Автор
04.01.2024 11:00+2Тогда не совсем понял, почему критерий не сходится. Ваш интерес - новые для себя технологии. Возможно, на собеседовании увидели ваш интерес. Компании вы подошли, но при этом необходимыми знаниями в части технологий не обладали (как я понял).
TrueRomanus
04.01.2024 11:00+1Ваш интерес - новые для себя технологии.
Такой интерес должен быть у любого программиста в профессии, иначе стоит задумать о ее смене. И по Вашему мнению мой интерес это интерес как таковой, довольно интересное утверждение:)
Давайте разверну более подробно мою мысль раз понимания нет.
Вы написали что важно смотреть на то чтобы у соискателя были такие интересы (чтобы это ни значило) которые находятся в Вашем подмножестве задач.
Мое утверждение в том что интересы/пул задач это хрупкая вещь которая в любой момент может измениться. Допустим Вы взяли сегодня кандидата на один пул задач, через пару месяцев начальство решило закрыть проект или переместить всех на другой проект в котором другой пул задач, что делать с набранными людьми с другими интересами и что они сами будут делать? Сегодня кандидату интересно одно и его допустим взяли на это, через два/три месяца ему надоело этим заниматься и у него сменились интересы что тогда будет?Более того Вы перечислили некоторые из "интересов" которыми может обладать соискатель:
копаться в верстке, делая ее по всем канонам WCAG, HTML и CSS спецификаций
Не представляю себе frontend разработчика который не копается в верстке.
работать с WEBRTC
сойдет за интерес
думать про предметную область и UX
т.е. интерес состоит только в том чтобы думать об этом? Мне казалось что предметной областью занимаются либо заказчики либо ПМы/Аналитики может иногда Тестировщики ну уж никак не разработчики. UX-ом тоже обычно занимаются либо дизайнеры/тестировщики либо "особо" опытные ПМы/Начальники повыше.
заниматься дебагом и оптимизацией
не представляю себе frontend разработчика который не занимается этим или у Вас есть разделение на людей кто пишет код и тех кто отлаживает его?
делать анимации с Three.js
сойдет за интерес
Итого у нас два интереса а все остальное либо что-то странное либо must have.
Но что если допустим у меня интерес WebRTC и я прихожу к Вам а у Вас WebRTC вообще не используется, получается что все сразу не прошел?
И в моем понимании словом "интерес" обычно обозначают некую область за которой ты следишь и частично что-то по ней делаешь но никак не означает что ты являешься экспертом в ней. Например у меня интерес WebGL, слежу за новостями и вяло копаю чужие исходники, пишу какие-то мелкие демо сцены. Значит ли это что я могу прийти на работу там где его на полную используют и сразу вкатиться в работу? Я так не думаю. Но например на собеседовании можно сказать что это область интересна и что готов быстро в нее вкатиться, что я и сделал на том собеседовании о котором была речь в прошлом сообщении.
LeetCode_Monkey
04.01.2024 11:00Интересы соискателя не имеют смысла на собеседовании, потому что соискатель пришел к Вам не интересы искать а работу работать.
Тут не всё так просто. Производительность и вовлечённость "заинтересованного" гораздо выше, чем от всего такого скиллового, но которому до фени ваш проект, делать он всё будет "на отъепись". Поэтому как раз наоборот лучше щупать интересно ли кандидату то чем вы занимаетесь, а пробелы в знаниях дело наживное. Другое дело, конечно, как это сделать в формате часового собеса.
TrueRomanus
04.01.2024 11:00Тут не всё так просто. Производительность и вовлечённость "заинтересованного" гораздо выше, чем от всего такого скиллового, но которому до фени ваш проект, делать он всё будет "на отъепись".
Я согласен что тут все очень непросто и "заинтересованность" кандидата и последующего работника может зависеть от бесконечного множества вещей из которых технологии к сожалению всего лишь часть и в большинстве своем не большая. Влияние на заинтересованность может сильнее затронуть например если человека пересадили ближе/дальше к "кондею" и сыграет большую роль чем выбор технологий на проекте. Человек может быть недоволен сменой руководства/проекта/технологии или тем что уволилили/лся его товарищ и т.д. и т.п.
Поэтому как раз наоборот лучше щупать интересно ли кандидату то чем вы занимаетесь, а пробелы в знаниях дело наживное. Другое дело, конечно, как это сделать в формате часового собеса.
А как объяснить то чем Вы (как работодатель) занимаетесь в формате часового собеса? Вот Вам история из моего прошлого: я перешел из одной фирмы в другую но обе делали похожие (по бизнесу а не по коду) проекты. Я работал два года и использовал - Vue2 TailWind Webpack. После перехода я оказался на проекте где использовался тоже Vue но уже третий но также использовались Vuex Pug Vuetify SSR Sass Vite. И для меня проект в который я перешел был целиком новым потому что опытом из прошлого проекта я едва мог воспользоваться. Мало того что в третьем Vue поменяли то как выглядит компонент дак еще Pug и Vuetify делали понимание того что там в шаблоне крайне сложным для чтения и понимания, но после месяца работы я уже уверенно чувствовал себя в проекте. Т.е. даже если интервьюер расскажет не только список технологий но и что-то о проекте вероятность что там все точно также как было на прошлом проекте кандидата конечно есть но очень низкая. Тоже самое релевантно и для кандидата, к тому же кандидат может просто прочитать список Ваших технологий в вакансии и перечислить его для интересов и как я уже писал в другом комментарии: иметь интерес != быть экспертом в объекте интереса.
iamawriter
04.01.2024 11:00deleted
yudeek Автор
04.01.2024 11:00Собственно, один из посылов статьи такой - бери себе человека в клманду с релевантным опытом. А не просто опытного или хорошего программиста. А правильное собеседование поможет понять, подходит ли вам опыт соискателя или нет.
iamawriter
04.01.2024 11:00+1Сори, когда я удалял свое предыдущее сообщение, вашего ответа на него я не видел, видимо, мы действовали одновременно. Мое предыдущее сообщение получилось немного резковатым и, наверное, несколько провокационным, поэтому я удалил его, не хотелось обострять.
pashigorev
04.01.2024 11:00+1Цикл в цикле -так себе пример сложности. Цикл в цикле это когда есть вопросы к структуре данных.
Но в целом интересно, спасибо.
soty
04.01.2024 11:00+1Имхо очень много субъективных вещей.
Как работает браузер скорее всего кандидату понадобится только на собесе. В реальной жизни это по большей части делает фреймворк или тим лид один раз за проект настраивает сборщик.
<details> <dialog> и все подобное слишком ненадежно. У нас же куча браузеров, если в каком-то не работает то придется все переделывать полностью. То же самое если надо что-то из ряда вон сделать. По преднему модалки, селекты и аккордионы надежней делать руками из всеми любимых дивов. Ключевое слово надежнее.
Касаемо новиночек 2023 года. Во первых всем новиночкам нужно настояться годика два хотябы прежде, чем их можно тащить в прод (тут мы вроде одного мнения). Во вторых были крайне спорные новиночки типа ксс нестинга, который работает черт пойми как и лучше вообще без него.
Про жс и читаемость кода. Тут прям вообще вкусовщина. Есть прям люто не читаемый код, а есть уже личные предпочтения разработчика. Первое еще как-то можно определить и поправить, а вот идеал у каждого разработчика плюс минус свой. Чтобы было плюс минус одинаково у всех пишут код стайл. Ну и линтеры с претирами в помощь.
В общем и целом статья годная, много вопросов достойных, позволяют понять интересно ли человеку перед тобой айтишка в целом. Другой момент, что помимо этих вопросов хорошо бы задать кучу вопросов конкретно по тем технологиям, что используются в команде. Пишете на реакте ? ну и спрашивайте про реакт.
Автор - молодец. Пиши еще.
Poundforpound
04.01.2024 11:00Отбор на джунов скоро будет как на космонавтов
yudeek Автор
04.01.2024 11:00С джунами проблема не в отборе, а в том, что мало какие компании готовы помогать джуну становиться мидлом.
LeetCode_Monkey
04.01.2024 11:00Отбор на джунов скоро будет как на космонавтов
А зачем брать не космонавтов, если на рынке есть космонавты? Современный джун (нанятый) делает то же самое что сеньйор, но, из-за малого опыта, делать это будет чуть дольше.
dopusteam
Вы намерено дали код, который ничего не делает?
AlexSteelax
Ну как ничего, он перебирает массив, делает проверку условия над элементами и уже после ничего не делает
yudeek Автор
Да, важна логика рассуждений.