Мок-интервью для джуна-фронтендера: собеседование с лайвкодингом

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

– Собеседует Никита Дубко, руководитель службы разработки в HR Tech Яндекса, ведущий подкаста Веб-стандарты
____
🔗 Полезные ссылки:
____
– 00:00:00 - интро
– 00:00:20 - из продажи нефтегазового оборудования во фронтенд
– 00:01:00 - как проходит собеседование для junior фронтенд-разработчика
– 00:02:20 - Yandex Interview: собеседование в Яндексе
– 00:05:06 - как принять решение, когда нужно писать тесты
– 00:05:34 - тестовое задание для фронтендера: калькулятор и обратная польская запись
– 00:06:58 - нужно ли знать TypeScript
– 00:08:00 - React Hooks, state manager, стилизация компонентов
– 00:09:50 - лайвкодинг: генерация рандомного цвета
– 00:25:27 - можно ли сделать код проще
– 00:26:33 - как работает браузер
– 00:30:36 - как браузер обрабатывает ссылки, внешние видео и изображения (отрисовка страницы)
– 00:32:22 - лайвкодинг: написать функцию get
– 00:50:25 - доступность интерфейсов: accessibility
– 00:54:32 - лайвкодинг: вёрстка holy grail
– 01:10:40 - селекторы, псевдоклассы и псевдоэлементы
– 01:13:06 - оценка знаний и фидбек
– 01:20:14 - как фронтендеру найти первую работу
– 01:23:04 - как прокачаться в тестировании и почему важно спрашивать экспертов

#itсобеседование #frontend #собеседование #хекслет

[kirillsundaen]

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

[charliebrown]

Круто, спасибо Никите и Виталию за такую увлекательную вьюху! 😊 Кстати, Виталий не раз помогал мне в чате Хекслета, крутой парень, надеюсь он в ближайшее время сможет устроиться) Желаю успехов! 🎉

[GMAIREPMaire]

Супер! Спасибо за это мок-интервью! Очень ценно. Аплодисменты и интервьюируемому и интервьюеру! Удачи в поиске и получению работы мечты!

[Sigrun-erjn]

Спасибо за лайвкодинг, не часто такое видел в записанных интервью

[daniyarzhanakhmetov]

Виталий пройдет еще 10 таких собесов и на 11 будет топовое собеседование!

[owen-]

Немного удивило, что никто не упомянул, что алгоритм решения задачи с get НЕверен. Там не нужно делать перебор по ключам, так как алгоритм будет отдавать значения по несуществующим путям. Например:
get({ b: { b: 5 } }, 'a.b') вернёт 5
Решение: удалить цикл и взять token как первый элемент tokens
function get(obj, path) {
const tokens = path.split('.');
if (tokens.length === 1) {
return obj[path]
}
const token = tokens[0]
if(typeof obj[token] === 'object'){
return get(obj[token], tokens.slice(1).join('.'))
}
}

[pyxorel]

задача с get

const get = (obj, path) => {
var list = (function* gen() {
yield* path.split(".");
})();
const f = (obj) => {
for (var i of list) return obj[i] ? f(obj[i]) : undefined;
return obj;
};
return f(obj);
};

[inqvisitor]

гуглить - это конечно круто. Я бы время поиска бы учитывал. Бывает просто синтаксис подзабыл, а бывает что полностью не знаешь/не понимаешь. На собесе как-то задачку с расчетом фибаначи не решил. Ну забыл как решается, хотя помнил принцип самой последовательности. Зашквар? Терпеть не могу такие задачи на алгоритмы. При решении реальных задач ни разу не пригодились. Было бы классно, найти весь список таких задачек, чтобы сразу разобраться и запомнить, чтобы не позорится на собеседованиях

[dionusios]

25:27, А так можно написать?
function get(obj, path) {
const keys = path.split('.');
let current = obj;

for(let key of keys) {
if(!current[key]) {
return undefined;
}
current = current[key];
}

return current;
}

[АнтонПашев-ъы]

Небольшой совет погромче, а то плоховато слышно, а в целом круто!

[annieleonhart-fx]

очень классно что можно гуглить, я напрогал уже несколько сайтов, vue, js, ts, а лайвкодинг просто нулёвый, я просто гуглю каждый момент который только можно нагуглить и просто копирую код построчно -_-

[Sergo]

Функция, создающая случайный цвет в hex формате:
const randomColor = () => {
let resColor = "#";
for (let i = 0; i < 3; i++) {
const hex = Math.floor(Math.random() * 256).toString(16)
if (hex.length === 1) {
resColor += 0;
}
resColor += hex;
}
return resColor;
}

[topsy_kreds]

В современных реалиях это не джун, разве что стажер и то с вопросом...

[moonchild]

мое решение функции get
function get(obj, path) {
let arr = path.split(".");
if (obj === undefined) {
return undefined;
}
if (arr.length === 1) {
return obj[arr[0]];
}
obj = obj[arr[0]];
return get(obj, arr.splice(1).join("."));
}

[AlexiCult]

Не уверен что генерация цвета через HEX будет проще чем это:
function randomColor() {
return `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)},
}

[sEnigmus]

насколько плохо такое решение?
function get(obj, path){
if (path === '')
return obj;
const ar = path.split('.');
for(let i = 0; i < ar.length; i++){
obj = obj[ar[i]];
if(!obj) return obj;
}
return obj;
}

[CamperFAQ]

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

[Илья-жчо]

Функцую при проверке typeof вернёт function оба оговорились, думаю уровень программирования достаточный, надо вёрстку подучить получше, сверстать пару сайтиков, про тестирование курсы на юдеми, фронт тяжко тестить вообще, но чёт пишут )))

[antonnevskiy]

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

[B_G_V]

Изичный собес. Если бы все собесы были такие :)