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

Подписаться 107 тыс.

Просмотров 31 тыс.

50% 1

🔥 Курс «Фронтенд-разработчик» с нуля до трудоустройства за 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 #собеседование #хекслет

Опубликовано:

11 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 129

@kirillsundaen8810 Год назад

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

@charliebrown5554 Год назад

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

@GMAIREPMaire Год назад

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

@radist126 8 месяцев назад

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

@Sigrun-er8jn 5 месяцев назад

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

@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 10 месяцев назад

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

@antonmas3451 8 месяцев назад

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

@user-hd7wd1ey4h Год назад

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

@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(".")); }

@ramblercriw7469 10 месяцев назад

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

@user-lk4mb3nw3d Год назад

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

@Sergo4672 Год назад

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

@Sergo4672 Год назад

Вот ещё есть такой вариант: 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 Год назад

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

@almaznurgali3281 5 месяцев назад

@Demon59901 3 месяца назад

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

@CamperFAQ Год назад

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

@daniyarzhanakhmetov7741 Год назад

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

@user-pi9je9mm1o Год назад

Вы шутите?

@daniyarzhanakhmetov7741 Год назад

@@user-pi9je9mm1o нет

@chikenmacnugget Год назад

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

@user-yu6om7tn7e 10 месяцев назад

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

@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 Год назад

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

@alexmarch Год назад

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

@arthurm2423 11 месяцев назад

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

@ArtyukhovBogdan 9 месяцев назад

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

@sex_machine999 7 месяцев назад

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

@wickedtorpedo75 4 месяца назад

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

@baileysli6235 Год назад

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

@HexletOrg Год назад

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

@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 } Легко же ?!

@antonnevskiy3027 Год назад

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

@B_G_V Год назад

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

@pkorneev5226 9 месяцев назад

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

@TheLevius Год назад

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

@mmorpglasg Год назад

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

@TheLevius Год назад

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

@Sergo4672 Год назад

@Sergo4672 Год назад

Вот решение после рекомендаций рекрутёра: 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; } Если будет массив, и если ключ будет в виде числа то выведется элемент массива под индексом, равным этому числу.

@savchenkoilliya9131 9 месяцев назад

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

@kaifaty Год назад

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

@user-hl1nf3ot7q Год назад

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

@kaifaty Год назад

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

@DH-yv8um Год назад

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

@CoppaChoppa 5 месяцев назад

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

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

@topsy_kreds 9 месяцев назад

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

@the_inalienable_dreamless 8 месяцев назад

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

@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 Год назад

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

@Oleg-qy7ob Год назад

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

@yjs_frontend Год назад

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

@luckytima2315 Год назад

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

@user-bu8lf7ic3c 10 месяцев назад

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

@Oleg-qy7ob 10 месяцев назад

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

@flowder73 8 месяцев назад

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

@chikenmacnugget Год назад

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

@flowder73 8 месяцев назад

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

@user-iq9ll8lz9m 8 месяцев назад

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

@chikenmacnugget 8 месяцев назад

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

@user-iq9ll8lz9m 8 месяцев назад

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

@chikenmacnugget 8 месяцев назад

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

@xotamxudoyberganov5847 Год назад

@zerodoubler Год назад

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

@xotamxudoyberganov5847 Год назад

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

@zerodoubler Год назад

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

@xotamxudoyberganov5847 Год назад

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