Из питониста во фронтендеры: собеседуем джуниора с бэкенд-опытом. Микротаски, промисы и лайвкодинг

🔥 Пройдите полную программу обучения по специальности «Фронтенд-разработчик» на Хекслете: clck.ru/sFAZe
Публичное собеседование - формат учебного интервью, где собеседующий задаёт вопросы, которые обычно задаёт разработчикам при найме в свою команду.
- Задаёт вопросы: Ирина Чигринова, 10 лет в разработке, прошла путь от поддержки IE8 до проектирования высоконагруженных сервисов, целый год проработала фулстеком на php (не понравилось), тимлид, техлид, выращиватель джунов
- Отвечает на вопросы: Дмитрий Дёмин, бэкенд-разработчик, учится на джуниор фронтендера
- 00:00 - интро
- 00:40 - Ира гребёт на галере, а Дима 4 года работает на питоне
- 03:04 - про мудаков из Роскомнадзора и как работается в госструктурах
- 09:13 - почему фронтенд, а не питон
- 12:06 - страшно ли переходить с большого опыта в джуновскую позицию
- 15:30 - вёрстка, бутстрап и отношение к дизайну
- 24:00 - как работает браузер
- 32:55 - перфоманс: метрики измерения скорости сайта
- 34:28 - как сделать, чтобы ничего не лагало, и микротаски
- 40:28 - как сделать JS многопоточным
- 42:14 - Reflow, Repaint
- 45:00 - хуки
- 49:38 - в чем разница между пропсами и стейтом
- 51:20 - ООП VS ФП
- 53:40 - почему мы не можем положить UseEffect в условное выражение
- 57:37 - правила поведения на лайвкодинге
- 58:34 - написать функцию, которая вырезает символ из строки после определённого количества повторов
- 01:16:18 - вызов функции
- 01:27:53 - треугольник Паскаля
- 01:52:38 - резюмируем
🔗 Полезные ссылки:
- Комьюнити Хекслета: slack-ru.hexlet.io/
- Ещё публичные собеседования Хекслета: • Публичные собеседовани...
Если видео было для вас полезным, ставьте лайк и поделитесь им с друзьями.
Подписывайтесь на наш telegram-канал: t.me/hexlet_ru
#frontend #хекслет #собеседование

[@user-sl2rh3wi3d]

Отличное собеседование, 2 часа на одном дыхании. Приятно смотреть на двух интересных и грамотно подкованных молодых ребят! Отдельный кайф - это голос Дмитрия! Чувствуется человек работал над голосом и подачей! Самоирония выше всех похвал, улыбка не исчезала все 2 часа. Очень понравились и теоретические вопросы и технические задания! Обязательно пересмотрю ещё, на многие вопросы сам не ответил, буду искать более детальные ответы. Прекрасная работа, так держать! Ире хочу пожелать, чтобы не останавливалась и продолжала снимать интересные собеседования! Дмитрию удачи в карьере, я уверен что этого парня мы ещё увидим на IT-олимпе!

[@SmotritelTube]

про useEffect интерсеный момент, он не тригерит перересовку, зависимости нужны только для того что бы когда перерисовка призошла(пришли новые пропсы, измненилось состояние) он сверил зависмости и если они не поменялись то ничего не делать, соответсенно когда пустой массив он отрабаывает только раз, так как там нечему меняться что логично, а рефы и тд там вообще не причем, ну если зависимотси не указывать он будет срабатывать при каждой перерисовки, тут нас ввели в заблуждение конечно, но это нормально :)

[@dimeliora]

С задачей про промисы промашечка - не сработает метод Promise.all. Он гарантирует, что дождется резолва всех переданных в него промисов (или первого же реджекта) и вернет массив зарезолвленных значений в том же порядке, в каком они были переданы. Но функции-то внутри конструкторов Promise вызовутся все разом, а значит и логи ввиду рандомного таймаута будут выводиться по-разному. Тут бы зарешал чейнинг через then, но и он не сработает, т.к. ни в одной из трех функций не вызывается функция resolve (возможно, просто опечатка в задаче).

[@daveyjonesx]

Чуть голову не сломал думая как это сделать, с учетом того что resolve там не вызывается)) Походу очепятка и тогда через then или более выразительно через await first(); await second(); await third();

[@epic_raccoon]

@@daveyjonesx При вызове setTimeout промисы сразу резолвятся независимо от задержки, переданной в setTimeout, так что в данной ситуации надо просто последовательно запускать first(); second(); third(). Другая ситуация будет в том случае, если resolve передавать в качестве коллбэка в setTimeout

[@daveyjonesx]

@@epic_raccoon ого, а что за прикол такой неочевидный, что промисы резолвиться должны без вызова resolve()?

[@dimeliora]

@@daveyjonesx а никакого прикола тут нет, потому что это не так. Промис - конечный автомат, изначально находящийся в состоянии pending. И перейти в иное (fullfilled или rejected) может только через вызов колбеков resolve и reject (или если внутри случится исключение, это тоже reject). Впрочем, ничто же не мешает набрать код с экрана и убедиться в этом.

[@daveyjonesx]

​@@dimeliora ну так если перейти в фулфиллед может только через вызов resolve, то как код-то работает?) в примере же resolve не вызывается)

[@ababush]

Клава Кока свичнулась в фронтендеры. Показалось.

[@doomymax577]

У чувака хорошо потсавленный голос, я думаю он когда-то этим занимался

[@heaven7pro]

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

[@user-lj9oq8rb8d]

1:26:40 да, при Promise.all() вернутся значения в том порядке в котором они в массиве, но console.log() который внутри промисов вызывается будет выводиться в случайном порядке, зависящем от таймера. Т.е. это решение сработает при такой постановке: Promise.all([ new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1 new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2 new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3 ]).then(alert); // когда все промисы выполнятся, результат будет 1,2,3 каждый промис даёт элемент массива

[@xedo-aa]

Написал примерно такую же предъяву, а потом ваш коммент увидел.

[@masaladosa6]

Шикарно!

[@DomiNoR777]

На каждой задачке ставил на паузу и сам делал(только на java) Последнюю задачу с Паскалем сделал через рекурсию, но абсолютно упустил момент что треугольник то реально зеркальный. Я бы и на собесе про это не заикнулся. На сколько важно было бы это на собесе?

[@geri_freki]

1:30:54 да, есть формула для биномиальных коэффициентов: from math import factorial as f pascal = lambda n: [[f(x) // (f(y) * f(x - y)) for y in range(x+1)] for x in range(n)]

[@axel-11]

Еще не начал смотреть, но это именно тот комментарий, который я ожидал увидеть под видосом про собес на джуна, спасибо

[@dimeliora]

1:16:15 не доглядели, в массив пушатся значения объекта (счетчики), а надо было сам char)

[@UC1C0GDMTjasAdhELHZ6lZNg]

1:16:12 надо было пушить в массив не количество повторений элемента, а сам элемент исходной строки.

[@crossfirecrossfire341]

Согласен бро 😎

[@jacksonrr3_84]

Ага, я тоже заметил!

[@kitN]

Говорит что работает на цензуру, но мы то знаем.. Большой брат следит за тобой.

[@user-tv5er7og8s]

Вот решение для пирамиды Паскаля: function pascal(n) { const res = [[1]]; for (let i = 1; i < n; i++) { res[i] = new Array(); for (let j = 0; j

[@alexKaprushaDev]

Все равно не понял, зачем менять backend на frontend. Ну может когда то пойму

[@vatakiller]

Не осилил

[@denispepper2830]

У Ивана Акулова есть пост в телеге, где он сообщает о том, что воркеры могут ухудшить перформанс

[@user-lk8db4ui4r]

высший пилотаж как виджеи

[@YuriyIovkov]

Сеньор говорит что он очень плохо шарит в регулярках?!!! Простите а что тогда за грейд который должен шарить?

[@PonomareVlad]

Principal RegEx Developer 🥲

[@user-tv5er7og8s]

Решение для первой задачи: const cleanString = (str, repeats) => { let res = ""; const obj = {}; for (const char of str) { !obj[char] ? obj[char] = 1 : obj[char] += 1; /* if (obj[char]

[@myroadtodream]

💥

[@AA-rc6ob]

Последняя задача. Первый элемент почему то пустой const pascal = (n) => { const layouts = [] for (let i = 0; i < n; i++) { let e = [] for(let q = 0; q < i; q++) { let prevLayout = layouts[i - 1] if (prevLayout.length === 0 || !prevLayout[q - 1] || !prevLayout[q]) { e.push(1) } else { e.push(prevLayout[q - 1] + prevLayout[q]) } } layouts.push(e) } return layouts } console.log(pascal(5)) // [ [], [ 1 ], [ 1, 1 ], [ 1, 2, 1 ], [ 1, 3, 3, 1 ] ]

[@deantek]

layouts.shift() до return )))))))

[@Larriva666]

Стоит учиться в хекслет?

[@HexletOrg]

Если с нуля и полная программа на 10 месяцев, то информация указана в каждой программе ru.hexlet.io/programs Если интересует помесячное индивидуальное обучение с наставником, то premium.hexlet.io/ Если же самостоятельное обучение в формате подписки с доступом ко всем курсам, то help.hexlet.io/ru/articles/111535-podpiska

[@xxxxPomaHxxxx]

kzbin.info/www/bejne/i2SQhYaiaciFpJI неверно ответил, не сервис воркеры, а веб воркеры, а сервис это частный случай веб воркера для пва с промисами без резолва там кринжатура от обоих сторон, но вообще даже в таком варианте можно решить через подмену консольлога.

[@D-gw4vj]

Хотелось бы больше практических вопросов и решения задач.

[@xxxxPomaHxxxx]

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

[@alexperemey6046]

Я извиняюсь, а где молодой питонер видел более удобный механизм построения морд чем веб-интерфейс?? Я как раз в вебе это больше всего ценю. У нас препод по с++ предлагал лайф для быстрого создания юзер интерфейса - берём компонент веб-браузер, и генерим HTML... это в десктоп приложениях! :))

[@heaven7pro]

Ну не знаю, может Flutter какой-нибудь. У меня есть ощущение, что HTML и CSS для интерфейсов - это какое-то дремучее легаси из 90-х, которое пора заменить на что-то более современное и на людей ориентированное

[@MrLaSerj]

@@heaven7pro можно и другое, тогда прийдется в каждом браузере менять эту концпецию

[@heaven7pro]

Спустя 10 месяцев с уверенностью сообщаю, что этот более удобный механизм точно существует - это Flutter. Не везде он, конечно, может заменить веб-технологии (да и не везде должен), но дать замечательные инструменты (как я писал «более современные и на людей ориентированные») может уже сейчас

[@Probkin]

Что за микрофон у мужика? Отличный звук

[@walburehe]

Rode NT usb. Но не микрофоном единым - голос тоже хорошо поставлен)

[@heaven7pro]

Подтверждаю, это действительно Rode NT USB

[@Probkin]

@@heaven7pro спасибо, мужик 😁 Голос тоже хорош, мое почтение

[@catsapp]

Кто возьмет меня на работу отдам ползарплаты начальнику

[@xxxxPomaHxxxx]

Зачем начальнику делать всю твою работу за пол твоей зарплаты?

[@catsapp]

@@xxxxPomaHxxxx Прибавка к зарплате.

[@akir4388]

Css это как word в котором все съезжало

[@GraphiqueA]

Посмотрел в том числе ради кота на ваших коленях ))

[@alexperemey6046]

Треугольник Паскаля - больно смотреть. Ни он, ни она в упор не видят, что кроме первого элемента НИЧЕГО больше хардкодить не нужно... Все остальное - один простенький алгоритм

[@PanicWassano]

первый элемент тоже не надо хардкодить, можно просто бином ньютона использовать в каждой строке)

[@jurissiberian7568]

What an ugly language! Дима, не изменяй Питону.

[@Indy_660]

Извините, а это точно джуниор?)

[@alexperemey6046]

Питонист с опытом бекенд разработки, но с точки зрения фронтенда - джуниор.

[@Indy_660]

@@alexperemey6046 по теоретическим знаниям по мне так крепкий мидл

[@sevensoulsmovies]

Кто-нибудь расскажите девушке про чистку звука

[@TrueNeutralEvGenius]

"В разработке я уже очень давно" - забавно такое слышать, когда уж точно даже не 30 лет, может даже не 20.

[@tanyatanya3810]

Любая работа на гос компанию - это вклад в развитие режима. Инструменты, обучение сотрудников, повышение эффективности - это в масштабе отрасли и есть помощь режиму продолжать репрессии. Таким образом вы сами разрушаете мир в котором живете и живут ваши близкие. Ваш опыт и усилия нужны в проектах против режима.

[@alexperemey6046]

Наоборот, таким образом люди защищают тот мир, в котором живут они, и их близкие. А тем, кому этот мир не нравится, лучше было бы уехать туда, где мир другой и режим другой. А не устраивать госперевороты, которые, независимо от декларируемых "благих целей" попросту ломают жизнь всем, в самом худшем случае заканчиваясь гражданской войной с участием иностранных государств.

[@tanyatanya3810]

@@alexperemey6046 в вашем тезисе несколько ошибок. 1) Ошибка защищать мир, который тебя убивает. Есть иллюзия безопасности, которая очень дорого обойдется каждому. Вот вы видите человека, который идет под поезд и говорите ему - то что он делает, это правильно, он ведь пока еще жив. Но когда поезд его переедет, будет уже поздно. 2) помимо госпереворотов есть еще варианты. Не говоря уже, что текущая власть ломает жизни куда больше. 100 000 убитых российских солдат, тысячи людей в нищете и безысходности

[@alexperemey6046]

@@tanyatanya3810 У тебя проблемы с элементарным логическим мышлением. 1) Во-первых "мир который тебя убивает" - это объективно вранье. Ты в этом мире выросла, да еще и такая разумная, значит этот мир тебя питал и растил, а не убил. То, что тебе много чего в этом мире не нравится, это вопрос другой, и может ты во многом тут права, но выбирай точные выражения. Иначе твой спич - это гонимый эмоциональный бред, не имеющий ничего общего с действительностью. 2) Во-вторых, ты говорила конкретно о мире, в котором живешь СЕЙЧАС ты и твои близкие. Сейчас ты живешь в мире, характер которого определяет режим, тем более диктатура этот мир определять должна еще больше. То, что ты считаешь этот мир плохим - это твоя позиция и твое дело, тут у нас спора нет, на вкус на цвет. Но ты говоришь чушь, когда говоришь, что этот мир (пусть очень плохой, по твоему мнению), можно спасти, работая против режима. Нет, родная, этот мир так можно только поломать, если ты будешь против него работать. Ты можешь сказать, что взамен ты построишь какой-то другой, лучше, но это будет ДРУГОЙ мир. А не тот, в котором ты живешь сейчас. Поэтому я тебе и сказал элементарную вещь: если ты хочешь сохранить мир, в котором живешь ты и твои близкие, то тебе нужно режиму помогать. Если ты не хочешь сохранять это говно, тогда да. Естественно если мы говорим о том, что ты в этом мире живешь. Если ты живешь в другой стране и оттуда мечтаешь развалить чужой мир, ради себя и своих близких, тогда другое дело. И другой разговор. 3) Помимо госпереворота есть много вариантов, но когда ты призываешь просто быть против государственной системы как таковой, то ты выбираешь именно этот вариант. И никакой другой. При любом другом варианте ты должна помогать режиму с целью его улучшить, помочь ему исправить его ошибки. Это называется "конструктивная оппозиция" и она подразумевает активное участие в деятельности режима с целями помощи, посильного вклада и т.п. 4) Сказки о 100 000 солдат говорят о твоем неумении в элементарную математику. Ничего больше.

[@tanyatanya3810]

@@alexperemey6046 1) мир меня убивает и подавляющее большинство россиян могли бы жить дольше, если бы не коррупция. Смотри статистику продолжительности жизни.

[@tanyatanya3810]

@@alexperemey6046 2) То что диктатура - это зло не я считаю, к этому пришли все ученые, посмотрев к чему приводят диктатуры - к нищете, нарушению прав человека и остановки научного и технического прогресса. Смотри ВВП развитых стран и диктатур. Уровень жизни и т.д.

[@the_inalienable_dreamless]

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

[@the_inalienable_dreamless]

первые две задачи сделаны неправильно

[@the_inalienable_dreamless]

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

[@johndoe4016qweasd]

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

[@TrueNeutralEvGenius]

Дак такие же люди, хоть и со своей спецификой. 10% уехали где-то из полторы миллионы IT-шников, но долбоебов везде большинство в любом случае, так что о чем ты говоришь, зря фрустрируешь. Долбоебы везде и всюду.

[@alexperemey6046]

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

[@johndoe4016qweasd]

@@alexperemey6046 очевидная вещь - рассея напала на Украину и пытается отнять территории, убивая украинских граждан, а в вашем оркостане шайка гопников в костюмах пытается заблочить любые источники информации, кроме тех, которые поддерживают линию партии. Я делаю выводы на основании разных источников информации, ты повторяешь то, что тебе в головешку влили твои госпОды, и радуешься, что не надо самому думать головой. Давай, расскажи мне про очевидные вещи. Клоун))))))

[@GraphiqueA]

В комментариях выполняются исправно заказы кураторов, как ни печально.