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

🔥 Курс «Фронтенд-разработчик» с нуля до трудоустройства за 10 месяцев: ru.hexlet.io/link/SaGJTs
🔥 Бесплатный курс «Основы JS»: ru.hexlet.io/link/Zt25R
🔥 Вакансии Яндекса: yandex.ru/jobs/vacancies/
✅ Полезные вебинары по программированию каждую неделю: ru.hexlet.io/link/IbSaZK
Публичное собеседование - формат учебного интервью, где джуниор-разработчик пытается пройти собеседование на позицию фронтенд-разработчика. Опытный разработчик задаёт вопросы, которые помогают кандидату продемонстрировать знание технологий и понимание подходов во фронтенде. В конце кандидат получит вердикт с резюме его слабых и сильных сторон.
- Собеседует Никита Дубко, руководитель службы разработки в HR Tech Яндекса, ведущий подкаста Веб-стандарты
- Собеседование проходит выпускник Хекслета Виталий Моржов (профиль ru.hexlet.io/link/8jvlz6, резюме cv.hexlet.io/resumes/973).
____
🔗 Полезные ссылки:
- Комьюнити Хекслета: t.me/hexletcommunity
- Ещё публичные собеседования: • Публичные собеседовани...
- Подкаст Веб-стандарты: web-standards.ru/podcast/
____
- 00:00:00 - интро
- 00:00:20 - из продажи нефтегазового оборудования во фронтенд
- 00:01:00 - как проходит собеседование для junior фронтенд-разработчика
- 00:02:20 - Yandex Interview: собеседование в Яндексе
- 00:02:45 - проект Хекслета: разработка чата ru.hexlet.io/link/acfz3z
- 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 #собеседование #хекслет

[@GMAIREPMaire]

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

[@kirillsundaen8810]

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

[@charliebrown5554]

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

[@Sigrun-er8jn]

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

[@radist126]

Афигенски интересно. Спасибо❤

[@daniyarzhanakhmetov7741]

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

[@user-ic4dl8lt4u]

Немного удивило, что никто не упомянул, что алгоритм решения задачи с 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('.')) } }

[@user-ic4dl8lt4u]

Не душнила, просто факт ) А так крутой формат, собеседующий - профессионал. Спокойно, чётко выполняет свою роль.

[@m-fusion]

Да ее можно еще проще решить, даже без рекурсии. На самом Хекслет же есть эта задачка.

[@user-vd2bi2gx5m]

Можно так решить const paths = path.split(“.”) return paths.reduce((acc,path)=> acc[path], obj)

[@antonmas3451]

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

[@user-hd7wd1ey4h]

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

[@ramblercriw7469]

хорошее интервью.

[@inqvisitor3722]

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

[@user-qe6ef5xb6g]

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; }

[@eugenemolotov1782]

Да, рабочее решение. Можно еще докрутить и будет: const get = (obj, path) => path.split('.').reduce((result, node) => result ? result[node] : undefined, obj)

[@evgenstepanov6319]

А в чем смысл присваивания объекта в current? Если вы хотели добиться копии, то это у вас не получилось

[@eugenemolotov1782]

@@evgenstepanov6319 Допустим есть исходный объект var obj = {a: {b: {c: true}}}. В цикле идет перебор ключей (например для пути 'a.b.c' будут последовательно перебирать a, b, c), и чтобы эти ключи обращались к нужным объектам и сделано присвоение current'у. Без присвоения, после первой итерации будет обращение current['b'], но при таком обращении вернется undefined, т.к. в исходном объекте (оbj), на который сейчас ссылается current нет ключа b. Здесь не нужна глубокая копия объекта, так что решение рабочие.

[@evgenstepanov6319]

@@eugenemolotov1782 да, увидел. Тригернулся на присваивание объекта. Невнимательность наше всё)

[@arslan5919]

​@@evgenstepanov6319 У вас тоже видимо кое что не получилось)

[@moonchild5769]

мое решение функции 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(".")); }

[@user-lk4mb3nw3d]

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

[@user-tv5er7og8s]

Функция, создающая случайный цвет в 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; }

[@user-tv5er7og8s]

Вот ещё есть такой вариант: const randomColor = () => { let hex = Math.floor(Math.random() * 16777216).toString(16); const len = 6 - hex.length; for (let i = 0; i < len; i++) { hex = 0 + hex; } hex = "#" + hex; return hex; }

[@chikenmacnugget]

@@user-tv5er7og8s чел, это все в строку можно написать чейнингом без странных, магических цифр

[@almaznurgali3281]

function getRandomColor() { const randomComponent = () => Math.floor(Math.random() * 256); const color = `rgb(${randomComponent()}, ${randomComponent()}, ${randomComponent()})`; return color; } ну и вызываешь @@user-tv5er7og8s

[@Demon59901]

Вместо if можно дописать .padStart(2, 0)

[@alexmarch]

в целом не плохо

[@CamperFAQ]

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

[@daniyarzhanakhmetov7741]

Может быть легче, может быть сложнее.

[@user-pi9je9mm1o]

Вы шутите?

[@daniyarzhanakhmetov7741]

@@user-pi9je9mm1o нет

[@chikenmacnugget]

@@user-pi9je9mm1o задачи на видео абсолютно базовые, типовые и сверх простые...

[@user-yu6om7tn7e]

​@@chikenmacnuggetи как все задачи впринципе )

[@sex_machine999]

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

[@arthurm2423]

А что если Random от 0 до 16777215 как макс hex и приводить его к hex формату. Тогда random будет только один раз вызван

[@ArtyukhovBogdan]

Там буквы нужны

[@baileysli6235]

А как поучаствовать в таком?

[@HexletOrg]

Напишите нам на саппорт или в комьюнити в ТГ

[@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; }

[@artishoo]

Не считая нейминга - один кейс не обработал. Если длина пути будет больше чем количество вложенных объектов. В остальном хорошо.

[@TheLevius]

Никита крутой собеседующий. Дает классные советы (особенно хорош с оптимизацией рандомного цвета), правда в конце задушнил с lch и Ситником (это ж каттинг эдж). Вопросы не от балды из интернетов, а с концепцией, выявляют глубину познаний. А малютке не мешало бы поверстать побольше (кто придумал эту отмазку про гриды, мол они не подходят или редко нужны, когда весь веб дизайн и css-фреймворки реализуют 12-колочный грид). Хотя понимание сетки это на стыке дизайна и верстки, нельзя так пренебрегать гридами. Короче, хорошо получилось!

[@mmorpglasg]

Не совсем понял, какие UI-киты используют grid? В Bootstrap и MUI сетка использует flex.

[@TheLevius]

@@mmorpglasg они реализуют грид/сетку (как концепцию) с помощью flex. Получается своего рода костыль, хотя существует специальная одноименная технология для этого. Вероятно для большей обратной совместимости

[@antonnevskiy3027]

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

[@AlexiCult]

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

[@spllit9212]

принцип DRY изобрели в 1970 году люди до 1970:

[@AlexiCult]

@@spllit9212 а как в данном случае не повторяться? Заключить повторяющееся выражение в функцию где-то снаружи и вызывать её там где сейчас выражения? По-моему, это только создаст излишний код, который будет чуть сложнее прочитать. Да и вызывать также придётся три раза подряд одну и ту же функцию, тоже наверное DRY не будет соблюдаться. Как здесь переписать соблюдая DRY?

[@spllit9212]

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

[@AlexiCult]

@@spllit9212 так как надо данный код переписать то? Я пока не понял аргументов.

[@spllit9212]

@@AlexiCult например так: function randomColor() { const random = () => Math.floor(Math.random()*256) return `rgb(${random()}, ${random()}, ${random()})` }

[@fazliddinalimov6993]

function get(obj, path) { const paths = path.split('.') let ci = 0 let resValue = obj; while (ci < paths.length){ resValue = resValue?.[paths[ci]] ci++ } return resValue } Легко же ?!

[@wickedtorpedo75]

поднял самоуверенность, а считал что я даже на джуна не гожусь

[@B_G_V]

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

[@pkorneev5226]

про css модули оочень не согласен, css in js сильно сильнее имхо, но да ладно

[@savchenkoilliya9131]

Это уровень trainee, не джуна

[@user-tv5er7og8s]

const get = (obj, path) => { if (!obj || !path) { return obj; } const keys = path.split("."); for (const key of keys) { if (typeof obj[key] === "object" && key !== keys[keys.length - 1]) { obj = obj[key]; } else { return obj[key]; } } }

[@user-tv5er7og8s]

Вот решение после рекомендаций рекрутёра: const get = (obj, path) => { if (!obj || !path) { return obj; } const keys = path.split("."); for (const key of keys) { if (obj[key] !== undefined) { //тут ещё можно вот такое извращение написать if (!!obj[key]) { или if (obj[key]||false) { obj = obj[key]; } else{ return undefined; } } return obj; } Если будет массив, и если ключ будет в виде числа то выведется элемент массива под индексом, равным этому числу.

[@DH-yv8um]

Микрофон кушать не надо

[@kaifaty]

как раз с Math.floor мы сделаем вероятность более НЕправильной, потому что будем получать 254 на всем промежутке от 254 < 255.

[@user-hl1nf3ot7q]

Можно просто написать 256

[@kaifaty]

@@user-hl1nf3ot7q в этом случае вероятность при floor 255 будет чаще

[@CoppaChoppa]

неужели я такой же позорник...

[@ooblako212]

а почему не назвать это : имитация собеседования для младшего разработчика с программированием в живую... или как то по другому, но понятно?

[@seosspro9686]

написано ведь - мок-интервью...

[@daniyarzhanakhmetov7741]

а зачем так заморачиваться?)

[@DK-creator97]

согласен. интерн-джун попросту не знает что такое мок и не найдёт это видео.

[@true227]

@@DK-creator97 интерн джун сейчас должен знать на уровне мидла, по крайней мере так заявляют в вакансиях, так что найти видео труда не составит:)

[@levcoder]

function get(obj, path) { path.split('.').forEach(pathItem=>{ obj = obj?.[pathItem]; if (obj === undefined) { return obj; } }); return obj; }

[@the_inalienable_dreamless]

"аксесебилити" "это что-то из ооп?" я ненавижу это интервью

[@topsy_kreds]

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

[@user-uniq-id]

Для чего джуну знать как работает браузер?

[@artishoo]

Он пишет программы для браузера

[@user-uniq-id]

@@artishoo нет. Джуну это не нужно. Ты никуда не воткнешь эти знания о браузере.

[@artishoo]

@@user-uniq-id ясно, опять полодим кодеров, которые как макаки клепают код со стековерфлоу, без малейшего понимая контекста исполнения их кода. Сам то давно перестал быть джуном, с таким то отношением?

[@user-uniq-id]

@@artishoo скажи, как я могу использовать информацию о том, как работает браузер?

[@artishoo]

@@user-uniq-id какую? Как работает отправка запроса? Или как работает рендер? Если ты н когда не сталкивался с проблемами оптимизации чего-то, зависимого от платформы, то это твой промах, а не человека, который повышает экспертизу в своем деле.

[@xotamxudoyberganov5847]

//get([{a:{b:2}}], '$0.a.b') function get(obj, path) { if (!obj || !path) { return obj; } const fields = path.split('.'); const tok = fields.shift(); let tmp; if (tok.startsWith('$') && Array.isArray(obj)) { const index = tok.slice(1); tmp = obj[index]; } else { tmp = obj[tok]; } for (const field of fields) { if (tmp == undefined) { return tmp; } if (field.startsWith('$') && Array.isArray(tmp)) { const index = field.slice(1); tmp = tmp[index]; } else { tmp = tmp[field]; } } return tmp; }

[@zerodoubler]

Похоже тут do { } while () цикл зайдет чтобы не копипастить блок if (tok.startsWith('$') ... два раза

[@xotamxudoyberganov5847]

@@zerodoubler тут пример кода его надо оптимизировать

[@yjs_frontend]

Нах такое решение ?

[@xotamxudoyberganov5847]

@@yjs_frontend подумай

[@yjs_frontend]

@@xotamxudoyberganov5847 оно ужасное

[@Oleg-qy7ob]

Вы что с ума сошли? Элементарно верстать не умеет. Такое задание начинающий верстальщик делает за 1 минуту в детском саде.

[@flavkaa2017]

Разработчик не верстальщик, вы сами ответили на вопрос в своем комментарии

[@Oleg-qy7ob]

@@flavkaa2017 вы я вижу вообще с головой не дружите? Покажите хоть одного разработчика который не знает вёрстку? Вёрстку проходит каждый разработчик на уровне детского сада, а если он не знает, то ему точно рано ещё на собеседования, разве что грузчиком на заводе может попробовать для начала пособеседоваться там вёрстку проверять точно не будут....

[@flavkaa2017]

@@Oleg-qy7ob Лично я умею верстать на препроцессорах, множестве фреймворках и на нативном CSS, но даже так я не пишу в резюме это как навык, ибо если я ищу работу разработчика, то я не хочу заниматься вёрсткой. Смысла в знаниях тогда нет. Проще выучить HTML+CSS и идти верстать за 30к в месяц, но это не путь разработчика

[@Oleg-qy7ob]

@@flavkaa2017 согласен, но и говорить что разработчик не должен знать как делается верстка это не правильно.

[@luckytima2315]

Чего вы хотели от студента такой помойки как Хекслет )

[@chikenmacnugget]

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

[@flowder73]

Смысле как заученный синтаксис?

[@user-iq9ll8lz9m]

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

[@chikenmacnugget]

@@user-iq9ll8lz9m плохому танцору и пол мешает. Если ты думаешь, что за тебя подумают и в рот тебе разжеванное положат, то увы и ах.

[@user-iq9ll8lz9m]

@@chikenmacnugget а когда о структурах данных тебе дают лишь то что есть массив и есть обьект, разница между ними в названии (условно), а ты потом сиди и сам бери инфу из разных источников, но не из учебного заведения. Ты умничаешь, но не понимаешь, что универы у всех разные и большинство годовых курсов будут полезнее чем нынешнее профильное IT образование, но главное про ебучее прожовывание сказать и поговорку про яйца

[@chikenmacnugget]

@@user-iq9ll8lz9m ну что и требовалось доказать. Самому почитать - трагедия. После прочтения подойти и спросить у препода уточнения и т.д. - неаозможно. Рот ведь нитками зашит. Должны дать все и сразу и желательно разжевать. Ничего удивительного в том что у людей плохое образование и не понимании сути происходящего, когда они как чайки сидят «дай дай дай дай должен должен должен дай дай дай». Я тебе секрет наверное открою, но такая модель образования практически везде, особенно в западных странах она очень развита. Если ты сам не интересуешься и к преподавателю не подходишь с вопросами и т.д., то и ждать от других нечего. Никто бегать за вами и в попку целовать не обязан. А вот вы проявить интерес к своей профессии и собственному развитию, если не обязаны, то хотя бы от вас это ожидается в ВУЗах. ВУЗ в первую очередь это доступ к возможности взаимодействия с человеком квалификация которого больше твоей. А когда ты этого не делаешь, потом прибегаешь в комментарии с пеной у рта доказывать: «все говно, все пропало». Если ты для себя и вокруг себя мир построить не можешь, то почему кто-то должен его строить за тебя и для тебя. Поговорка есть такая: «под лежачий камень вода не течет». Вот помозгуй её и вывод сделай.

[@Oleg-qy7ob]

Какой это Джун? Не на один вопрос не ответил сразу, не одной задачи сам не решил, все только вода и слова что мне кажется должно работать, в жопу такого Джуна....

[@yjs_frontend]

Слышь ты уебан, чел нормально отвечал. Забегай ко мне

[@luckytima2315]

А чего ты хотел от студентов такой помойки как хекслет :P

[@user-bu8lf7ic3c]

Вы чего такой агрессивный? Как будто вас обманул кто-то

[@Oleg-qy7ob]

@@user-bu8lf7ic3c нет, просто все думают что и гавно может быть разработчиком, учиться надо было...

[@flowder73]

Смысле вроде сам писал. Что за бред

[@xotamxudoyberganov5847]

function randomRgba(alpha = 1.0) { if (alpha < 0.1 || alpha > 1.0) { alpha = 1.0; } const rndRgb = Array(3) .fill(0) .map(() => Math.round(Math.random() * 255)); return `rgba(${rndRgb.join(',')},${alpha})`; }

[@zerodoubler]

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

[@xotamxudoyberganov5847]

@@zerodoubler это был сарказм?🤔

[@zerodoubler]

​@@xotamxudoyberganov5847 это от команды зависит на самом деле. Если там все молодые и шутливые, включая тимлида, и хотят показать удаль молодецкую, то не сарказм. А если мемберы уже столько кода отсмотрели, что их не прет от разбора этих конструкций то думаю им лучше зайдет что то типа как написал чел в видео return 'rgb('+randColor()+','+randColor()+','+randColor()+')';

[@xotamxudoyberganov5847]

@@zerodoubler Ну такое решение зачем это надо когда можно попроще это сделать?

[@Ramosok]

const get = (obj: any, key: string): string => { const keyList = key.split('.'); if (!keyList.length) { return ''; } return keyList.reduce((acc, cur) => { if (obj[cur]) { return obj[cur]; } return acc[cur]; }, ''); };

[@SP-hb6dd]

return '#' + Math.floor(0x1000000*Math.random()).toString(16).padStart(6, 0)

[@Demon59901]

0x1000000 - это FFFFFF? Прикольно

[@SP-hb6dd]

@@Demon59901 на единицу больше, чем FFFFFF, но мы умножаем на случайное число от 0 до 1, которое всегда меньше чем 1

[@sergeykhairulin]

const get = (o, p) => p.split('.').reduce((a,e)=>a?a[e]:a,o)

[@evgenykoval3056]

Классно и читаемо, в лучших традициях ниндзя-кода😅

[@user-ex9et8nz1d]

если в o не будет части из p, то будет ошибка, а должен быть undefined

[@user-ex9et8nz1d]

const getValue = (obj, path) => path.split('.') .reduce((acc, i) => acc && Object.keys(acc).includes(i) ? acc[i] : undefined , obj)

[@sergeykhairulin]

@@user-ex9et8nz1d почему будет ошибка? Если обратится хотя бы раз по несуществующему пути, то все время будет возвращать undefined

[@sergeykhairulin]

@@user-ex9et8nz1d если у acc нет i, то acc[i] и так вернёт undefined