Опыт, не память04.01.2024 13:15

К написанию статьи подтолкнул прекрасный с технической точки зрения пост про вопросы и ответы для собеседований на позицию 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?  

Как ты проверяешь, можно ли вложить тег в тег, например, в ?  

Чуть меньше опыта — только тут, больше опыта — HTML спека с контентной моделью и контекстом.

Какие type есть у ? Зачем нужен inputmode? В чем разница между type=«button» and

?  

В этой теме можно разгуляться и понять, какой именно сложности формочки реализовывал соискатель. Понимает ли он то, что многие вещи можно сделать на уровне нативной платформы, а не лепить очередные строки JS кода. И как правильно задать числовой формат ввода. 

Для чего можно использовать тег

?  

Все мы любим табы и аккордеоны. Применений у этого тега много, код понятный, поведение браузера предсказуемо. А еще в 2023 году завезли много интересного.

Как можно сделать модальное окно после 2023 года?

Еще один косвенный признак того, следит ли кандидат за развитием веб платформы. Сам пробовал

, поймал интересные нюансы. 

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 () => {
    console.log(123)
	const res = await fff();
	console.log(res)
}

fnfn();

Что вернет код? Практическое понимание асинхронности и самый распространенный паттерн работы с ней.

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

© Habrahabr.ru