СОБЕСЕДОВАНИЕ Middle FRONTEND разработчика | JavaScript REACT TYPESCRIPT
Вставка
- Опубліковано 4 сер 2024
- В данном видео мы с Муратом провели собеседование на frontend разработчика. Решил подойти к собеседованию немного не стандартно и подготовить вопросу чуть по интереснее, чем обычно спрашивают.
Были небольшие проблемы со звуком, записалось видео с микрофона ноутбука. Постараюсь в дальнейшем избегать таких проблем.
Мой канал в Telegram:
telegram.me/ayub_begimkulov_c...
Таймкоды:
00:00-02:20 - Интро
02:20-4:17 - Что такое ивент луп
04:17-07:32 - Micro и macro tasks
07:32-12:39 - Очереди micro и macro тасок
12:39-19:00 - requestAnimationFrame
19:00-24:38 - Что такое TypeScript и зачем он нужен
24:38-34:30 - Типизируем функцию map
34:30-38:36- Оптимизация web страниц
38:36-44:05 - Async/defer
44:05-49:58 - React hooks плюсы и минусы
49:58-54:50 - Как нужно обновлять стейт в react
54:50-56:04- Как понимают изменение состояния mobx/vue
56:04-1:01:16 - Плюсы и минусы подхода mobx и redux
1:01:16-1:03:00- Как оптимизировать rerender’в в компонентах
1:03:00-1:05:57- useLayoutEffect vs useEffect
1:05:57- 1:16:21 - forceUpdate в функциональных компонентах и использование ref для сохранения референса на функцию
1:16:21-1:16:56 - ErrorBoundary
1:16:56-1:27:12 - map и filter через reduce
1:27:12-1:51:20 - Пишем функцию curry
1:51:20-1:54:19 - Финальный фидбэк и заключение
Смотрел и проходил много интервью на мидла, отметил что собеседующие редко доносят информацию доступным языком, потому что сами не понимают, о чем спрашивают , тут же все как надо, чувствуется экспертиза автора, смог наконец то понять некоторые больные для себя темы, большое спасибо
Рад помочь!
Гость этого видео слишком долго говорит, тайпскрипт типизирован, что исключает многие ошибки. Более ООП там развито чем в js, все равно эти языки конечно не могут потянуть темы как у Swift или Java, C#.
очень нравится как полноценно и глубоко идет разбор важны моментов, но которые не обращают многие внимания
На одном дыхании посмотрел, и кучу полезных заметок сделал. Спасибо ❤
Рад помочь!
Мощный контент! Не останавливайся пожалуйста)
Спасибо!
Классный контент! Успехов в развитии канала!
Спасибо за фидбэк!
Молодцы ребята! Удачи вам!
Спасибо!
Огонь молодцы интересно и полезно
интересный разговор двух разработчиков)
Крутой Видос!
Спасибо за фидбэк!
спасибо, интересный собес)
Спасибо за фидбэк!
очень приятный голос и говор интервьюера, хотелось бы залетать на вью с такими же типами)
Первый раз слышу, о приятном голосе)
Но спасибо!
Жду новые видео собеседования , было интересно и позновательно.
Лично мне было бы интересно посмотреть и послушать собес на Джуна , но не самые заезженные вопросы
Постараюсь заснять что-нибудь.
мне кажется, это как раз вопросы для джуна)
@@psycho0sis почему не для стажера?
@@psycho0sis нет, мистер Абрамов
Автор крутой, понимание крутое
Лайк, подписка)
Добро пожаловать!
Спасибо! Подписался
Рад помочь!
Спасибо, за интервью. Изу работу, не могу пройти собес 😢 1 ошибка или оговорка и всё. Хотя у меня большой опыт в продакшене. А тут чел открыто говорит, что чего то не знает.
Можно ещё таких интервью плиз?) ❤
Есть в планах.
Друзья, наконец выделил время и разделил видео по таймкодам, не ожидал на самом деле такого количества просмотров и фидбэка.
Так же по вашему предложению создал канал в телеграмме (t.me/ayub_begimkulov_coding) - заходите, кому интересно.
00:00-02:20 - Интро
02:20-4:17 - Что такое ивент луп
04:17-07:32 - Micro и macro tasks
07:32-12:39 - Очереди micro и macro тасок
12:39-19:00 - requestAnimationFrame
19:00-24:38 - Что такое TypeScript и зачем он нужен
24:38-34:30 - Типизируем функцию map
34:30-38:36- Оптимизация web страниц
38:36-44:05 - Async/defer
44:05-49:58 - React hooks плюсы и минусы
49:58-54:50 - Как нужно обновлять стейт в react
54:50-56:04- Как понимают изменение состояния mobx/vue
56:04-1:01:16 - Плюсы и минусы подхода mobx и redux
1:01:16-1:03:00- Как оптимизировать rerender’в в компонентах
1:03:00-1:05:57- useLayoutEffect vs useEffect
1:05:57- 1:16:21 - forceUpdate в функциональных компонентах и использование ref для сохранения референса на функцию
1:16:21-1:16:56 - ErrorBoundary
1:16:56-1:27:12 - map и filter через reduce
1:27:12-1:51:20 - Пишем функцию curry
1:51:20-1:54:19 - Финальный фидбэк и заключение
Красава !
Спасибо!
Айюб, доброго дня!
Подскажи пожалуйста, на какой клавиатуре печатаешь, очень звук приятный?)
Заранее спасибо)
Привет. MacBook Air m1.
Очень тяжело проводить собеседования. Недавно было моё первое собеседование, со стороны работодателя. Я почувствовал, что нужен опыт. С моей стороны получилось очень сухо. Человек не прошёл собеседование (по своим скиллам), так и ещё точно получил удар по мотивации. У меня совсем не получилось сгладить ни одного угла.
Да, мне тоже раньше казалось, что с другой стороны все просто. Но когда начал проводить, то понял, что устаешь от всего этого не меньше, чем сам кандидат. Хотя со временем проще начинает становиться. Главное не бросать это дело. Спасибо, что поделился мыслями!
@@ayub_begimkulov нет ли у тебя видео с советами, как подготовиться к проведению собеседования, как проводить, на что обратить внимание, чтобы кандидату было комфортнее?
@@DubinArtur тоже побывал "по обе стороны баррикад", и прям однозначно больше понравилось быть собеседуемым, чем интервьювером.
Когда ты ведешь собес, у тебя дохрена ограничений. Не следует задавать слишком трудные вопросы, слишком специфичные, слишком креативные/творческие, слишком устаревшие, слишком банальные и простые, и ещё дохрена всего. Нежелательно душнить или спрашивать какие-то малоизвестные тонкости. Если кандидат тухлый и тупит, это совсем погибель, скука невероятная (кто там думает что на собесах можно поглумиться и задоминячить кандидата, подняв своё чсв - идите вы знаете куда?!), просто сидишь и думаешь, как бы попрощаться скорее.
Когда ты кандидат, все вышеперечисленное МОЖНО! Ты протагонист, "хороший парень", главный герой. Просто заходи, круши и разваливай!
@@alexandroppolus бедные несчастные интервьюеры...)
Функция на каррирование довольно сложная, чтоб самому догнать. Выучил алгоритм её решения на случай этого вопроса на собесе. )
Друзья, в данном видео, к сожалению, есть небольшие проблемы со звуком, видео записывалось с микрофона ноутбука.
Постараюсь в дальнейшем избегать таких проблем.
вроде всё чётко со звуком) Спасибо за видео!
RAF вообще не зависит от event loop`а, с макротасками и микротасками в начале путаница, возникают вопросы про грейд миддла
интересно
Спасибо за фидбэк!
Жду Новый Видос!!!!
Рад, что было интересно!
Привет, не совсем понял пример на 7 минуте с функциями run. Можешь, пожалуйста, объяснить подробнее почему так работает?)
Посмотри видео про очереди event loop, там объясняю все более подробно.
ua-cam.com/video/9VVGBuiMO7M/v-deo.html
Redko kogda ostavlay komentarii - no spasibi, otli4noe video na rysskom, gde hotya bi ni4ego ne rejit slyh!!! I primeri ne plohie. Voobs4e hotela bi prpoiti takoe intervu'e
Спасибо!
По поводу прохождения собеса - зайди в телеграм, там отпишу, когда буду проводить следующий собес.
Спасибо за крутой контент)
Подскажите пожалуйста, а как было правильно типизировать map показанный в видео ?
Таким образом:
function map T>(arr: T[], cb: F) {
return arr.reduce((acc, item, index, currentArr) => acc.concat(cb(item, index, currentArr)), [])
}
const squares = map(numbers, (n) => n * 2)
Я сперва думал, что необходимо ограничить тип T extends unknown[], но у меня не получалось получить значение value: typeof T[number] - не работало.
p.s acc.concat - не лучший способ использования в reduce)
В видео map реализовывался 2 раза, через reduce и просто функция-обертка, но в целом типизацируются они одинаково: tsplay.dev/WG5lVN.
Тут у тебя ошибка получилась в том, что используется дженерик `F` для функции, хотя 2-й дженерик нужен для нового типа элемента массива (результата вызова mapper'а). Понимание таких особенностей приходит с опытом, так что можно не волноваться)
Спасибо за просмотр!
@@ayub_begimkulov Спасибо, очень жду от вас уроков по TypeScript)
хз может так? function map (arr: T[], callback: (el:T, index?: number, context?: T[]) => P): P[] {
const newArr: P[] = [];
arr.forEach(el => {
newArr.push(callback(el))
});
return newArr;
}
Вот интересно. В продакшен коде как часто вы используете пример карирования?
смотря что писать, если много переиспользуемой логики, то пишут. Так же это дает понимание, как работают мидлвары в редакс или rxjs
нормально так демотивирует
6:00 - ошибся же, таймеры в макрозадачи попадают, а async/await в микрозадачи
Насколько я помню, Мурат сначала сказал наоборот, но по приоритетам он правильно ответил.
Возможно реально ошиблись. Главно понимать, как работают очереди каждого из типов тасок и что выполняется раньше другого.
Спасибо за фидбэк!
Вопросы были не банальные, интервьюер спрашивал глубже, чем показывают во многих роликах, за что благодарю. Задача на функцию по каррированию - топ, я таких не встречал.
Я реализовал её таким образом:
function curr(fn, needArgsCount = fn.length, saveArgs = []) {
return (...propArgs) => {
if (propArgs.length < needArgsCount) {
return curr(fn, needArgsCount - propArgs.length, [...saveArgs, ...propArgs]);
}
return fn(...saveArgs, ...propArgs);
}
}
Тобишь функцию всегда передавать изначальную, и наглядно передавать новые аргументы 3-м параметром. Мне так понятнее и нагляднее что ли... Но ничего не имею против решения из видео
Да, можно и так реализовать)
Спасибо за просмотр.
@@ayub_begimkulov
Пришел еще к одному решению этой задачи, на мой взгляд еще проще:
function withCurry(fn, prevArgs = []) {
return (...args) => {
if (args.length + prevArgs.length < fn.length) {
return withCurry(fn, [...args, ...prevArgs]);
}
const allArgs = [...args, ...prevArgs];
return fn(...allArgs);
}
}
По факту просто собираем все аргументы в массив и передаем дальше, а как только количество аргументов нас устраивает - сливаем этот весь массив аргументов в функцию. В предыдущих решениях меня смущала возвращаемая функция с частичным каррированием.
Если долго не возвращаться к задаче, то можно и напутать с этим. А этот подход в "лоб". Просто собираем все что получили и вливаем.
имхо)
@@victor-trumpel Можно и так, тут кому как больше нравиться)
22:15 вместо всего этого рассказа можно было сказать typescript это суперсет javascript разработанный Microsoftом для масштабных проектов, который привносит статическое типизирование и ООП. И так понятно что синтаксические ошибки будут показываться если есть статическая типизация
ООП typescript, как надстройка, не приносит. В JS эта парадигма уже имеется.
Классное собеседование, не хватает таймкодов только
Спасибо за фидбэк, таймкоды наконец добавил)
10:29 Мурад подумал что в эти функции run передаются милисекунды или я не так понял? Короче там никакое время не передается в аргументы функции run, number он просто для console.log
Так более нагляднее с каррированием
function curry(func) {
return function curried(...args) {
if (args.length >= func.length) {
return func(...args)
} else {
return function(...args2) {
return curried(...args, ...args2)
}
}
}
}
Тоже не плохой вариант.
Более прозрачный и наглядный вариант с правильным неймингом, и никакой передачи length параметром.
Кстати, автор ролика что-то хотел сказать про тонкость - почему нужна передача в явном виде, но не развил мысль.
const carry =
(func) =>
(...args) =>
args.length >= func.length
? func(...args)
: (...args2) => curried(...args, ...args2);
const add = (a, b, c) => a + b + c;
const curried = carry(add);
console.log(curried(1)(2)(3));
console.log(curried(1)(2, 3));
console.log(curried(1)(2)(3));
console.log(curried(1, 2)(3));
ваш ответ, но на стрелках
ps. это prettier форматнул) не стал с ним спорить)
Через два дня должен на реакт собеседование на миддла, волнуюсь не описать!
Удачи!
Спасибо!
@@DavitAve как ты там воин?
@@xleb__b взяли, через 3 месяца повысиди зарплату
все хорошо, но еще бы делать таймкоды
Хорошое предложение, надо будет добавить.
Спасибо за фидбэк!
Формат собеседование будет, хочу принять участие?
Подписывайся на телеграм, там буду объявлять.
Но если честно, обычно смотрю на опыт и на то, чем кандидат может быть интересен другим людям, поэтому не плохо было бы чуть рассказать о себе.
Фидбек слишком мягкий дал, застроив внимание лишь на "бежит делать, хотя изначально лучше бы псевдокодом / проговорил бы свое решение". Но справедливости ради фразы на уровне "это не продуктовая задача" и "ну я этого и не знал" очень странно звучит... С ним по сути проводят дружеский собес, где ему заранее говорят о подводных камнях и фишках, а он по итогу все равно защищается в такой форме, хз-хз, ты его не топил шоб он защищался. В любом случае норм
function carry(fn) {
return (...args) => {
if (args.length >= fn.length){
return fn.call(null,...args)
}
else
return carry.call(null, fn.bind(null,...args))
}
}
Ух ты, не знал, что bind сохраняет длину функции!
@@ayub_begimkulov мы биндим же аргументы, их количество уменьшается на число переданных аргументов в предыдущую функцию. пока не достигнет исходной.
решил проверить даже в код сендбоксе
function carry(fn) {
console.log('len Fn= '+fn.length)
return (...args) => {
if (args.length >= fn.length){
return fn.call(null,...args)
}
else
return carry.call(null, fn.bind(null,...args))
}
}
function add(a,b,c,d) { return a+b+c+d}
const fn = carry(add)
console.log(fn(1)(2)(3)(4))
В задачке про map я так понимаю автор хотел увидеть ответ
const map = (arr, cb) => {
return arr.reduce((acc, curr) => [...acc, cb(curr)], [])
}
По поводу Map можем и так делать, правильно?
function maps(arr:T[],callBack:(value:T, i: number)=>T):T[] {
return arr.map(callBack)
}
let typeMap = maps([1,2,3,4,5,6,7,8,9,10],(v) => v *2)
console.log(customMap)
Нет, это будет не совсем правильно, так как маппер может трансформировать тип item'ов массива.
Например
[1,2,3].map(item => item.toString());
Щас бы для реализации функции map использовать нативную функцию map...
поплыл на 1 вопросе про лупу. Я бы как как собеседующий сразу напрегся тк ну наверное, ну скорее всего. Ты либл знаешь как работает, синхрон и асинхрон либо не знаешь и пытаешься гадать. А это уже звоночки бро с первого вопросика😢
спасибо увидел что значит пытка
да даа дааа)
Так разве пример с setTimeout вначале не вызовет переполнение стека? Там же нет базового случая, поэтому таска не будет закончена никогда, при этом будет рекурсивно вызывать саму себя создавая новые контексты выполнения, пока не превысит лимит в 10 000 в стеке. Я не прав?
таймаут с промисами совсем простое задание. мне дали с 7 этапами и разными вложенностями одного в другое.
Если есть понимание, то в целом без разницы сколько этапов)
Я, если честно, не вижу смысла переусложнять задания, лучше по глубже спросить об устройстве event loop.
@@ayub_begimkulov так сложность и состояла во вложенности одних промисов в другие.
С самого начала лажа. setTimeout и браузерный API это макро, а промисы єто микро таски
А где в данном видео сказано, что это не так?
Если есть желание, создай в телеге группу, чтобы не потеряться после блокировки ютуба(мало ли)!
Хорошее предложение!
Создал канал - присоединяйся (t.me/ayub_begimkulov_coding).
@@ayub_begimkulov Не находит
Короткая ссылка может не работать, попробуй вот по этой зайти:
telegram.me/ayub_begimkulov_coding
const forceUpdate = useReducer(x => x + 1, 0)[1];
Так тоже можно)
функция каррирования неправильно написана не будет работать в этом случае, curry(1)(2)(3),
Правильно будет запоминать передаваемые аргументы создавая замыкания а на уравнении массивов возвращать вызов функции
Не совсем понимаю о чем идет речь, на данном кейсе функция будет работать правильно, мы даже в видео проверили)
Возможно у нас разное представление о том, как должно работать эта функция, но я даже на всякий случай прогнал тесты на нашу имплементацию и не вижу никаких ошибок.
Так что если есть какие-то примеры - буду рад услышать.
А пока, выглядит скорее как недопонимание с твоей стороны)
@@ayub_begimkulov сорри я не внимательно посмотрел работать будет. Мой вариант:
function curry(fn) {
const args = [];
return function step() {
args.push(...arguments);
if (fn.length > args.length) return step;
args.length = 0;
return fn(...args);
}
}
const curried = curry(function(a,b,c) {return a+b+c});
curried(1);
curried(2);
curried(3); // 6
Можно я тут оставлю тоже свой вариант реализации этой функции:
function curry(func) {
return (...params) => {
if (func.length === params.length) {
return func.apply(null, params);
} else {
return curry(func.bind(null, ...params));
}
};
}
на первом вопросе можно было вешать трубку
1:29:03 вся суть программирования )
ахаххаха
Какое-то странное решение задачи с каррированием функции, не лучше будет так написать:
function curry(fn) {
return function c() {
if (fn.length > arguments.length)
return c.bind(null, ...arguments);
return fn.apply(null, arguments)
}
}
function add(a, b, c) {
return a + b + c;
}
Да, так тоже можно. Выглядит по лучше)
Надо было еще сорт через редьюз написать.
Нормально не напишешь же)
@@ayub_begimkulov Сортировка выбором хорошо ляжет на редюз. Придется мутировать оригинальный массив, собсна как и нативный сорт делает.
// Моя реализация
const curry = (originalFunction) => {
if (!originalFunction || typeof originalFunction !== 'function')
throw new Error('originalFunction - не функция.');
return curriedFunction = (...args) => {
if (originalFunction.length === args.length)
return originalFunction(...args);
return (...nextArgs) => curriedFunction(...args, ...nextArgs);
};;
};
Во первый, у тебя curriedFunction станет глобальной переменной. Во вторых, в if'е должно быть не `===`, а `>=`, так как аргументов можно больше передать.
А в остальном тоже не плохой вариант.
программисты каррировали каррировали да невыкарирровали
На удивление с первого раза сказал)
Скажу честно, это вопросы далеко не для миддл разработчиков)
Зависит от того, с чем сравнивать) Многие собесы на сеньера, которые я проходил, были намного легче.
Но тут как раз таки мы, как было сказано в начале, провели "показательное" собеседование. Я подобрал список вопросов и тем, понимание которых в идеале хотелось бы видеть во фронтенд разработчике.
Для сеньера, помимо пониманий технологий и знания алгоритмов и тд., есть еще ряд навыков, которыми хорошо бы обладать (ИМХО). Постараюсь как-нибудь про это рассказать.
Но опять же, это не обязательно будет отражать ситуацию на рынке, так как есть разные компании с разными проектами, вилками и требованиями.
Во многих местах сейчас сеньер это тот, кто может любую большую задачу сам решить в нужные сроки и может еще разделить ее с кем-то и провести ревью.
@@ayub_begimkulovта норм, как раз для мидла самое оно. Вот у меня собес на мидла скоро...готовлюсь)
Сколько я собесов не смотрел, везде плюс минус одно и тоже, но и в то же время кардинально разное, каждый интервьюер делает упор на то, что для него приоритетнее. Этот собес показался скучным, кандидат порой просто льет воду, а с другой стороны выдуманные примеры, которые никогда не встретишь в реальных проектах, но другим способом опыт никак не проверишь, в этом суть современных собесов.
Как же больно по ушам эти звуки клавиатуры
В новых видео этого нету.
@@ayub_begimkulov понял спасибо
А мне нравится
В целом неплохо: материал, подача.
Не зашло два момента:
1. Звук не выровнен: звук Мурата тише, звук Ayub (не знаю как по русски правильно написать) сильно завышен. Частенько, при написании кода, когда очень громко бъют клавиши (в идеале звук кнопок вообще убрать) плюс громкое комментирование = звук на сколько "шкалит", что в наушниках слышу что-то вроде сторонних помех и шумов.
2. Понимаю, что со своими советами на чужом канале я не указ, но ИМХО Ayub нужно следить за чистотой русской речи - "короче", "вообще пофигу", "ну", "как бы", "чё" и т.п. Не очень приятно, когда автор ролика "скатывается" на подростковый уровень... Всё таки ролики снимаются для зрителя ;)
Комментарии все валидны, постораюсь поработать над этим.
В плане звука с того момента уже прибрел подставку и уже смог это улучшить.
В плане речи - 100% есть такая проблема, надо работать над этим. Но так же есть и факт того, что при интервью мне сложнее следить за подобными моментами,
В общем, есть над чем еще поработать - спасибо за фидбэк!
P.S. Имя кстати Айюб пишется на русском)
Не согласен со вторым пунктом, лично мне так информация гораздо понятнее
Самые дебильные интервью это лайвкодинг
Добро пожаловать в IT!
А ты с чем сравнил? либо будет лайфкодинг либо тестовое на дом, я лучше час потуплю на самом собесе, чем в черную дыру выкидывать 4-8 часа.
uzbekimisiz
?
ой, с типизацией мапа прямо плохо получилось)
тип точно не мидл....
А этот кандидат сейчас работает на позиции сеньора на 2-х работах)
Пиздец, чел сказал, что setTimeout микротаска а промисы - макро, что неправильно. А в задача сделал правильно, но не по той логике по которой думал. Как блять такие люди живут я не понимаю. Такое чувство что чел не доразобрался в теме, видел где-то что промисы быстрее срабатывают чем setTimeout и выдал это. И интервьюер тоже хорош, в таких моментах надо подмечать несоответствие в логике рассуждений и что на практике человек выдает
Может сделал правильно, а сказал не так потому, что перепутал слова? Или по твоей логике лексическое значение слов микрозадача и макрозадача позволяет сразу понять специфику работы event loop'a?) По поводу "что на практике человек выдает", ответ простой - выдает работающий продукт. Тем более когда несколько лет работаешь теория забывается, и уж тем более можно перепутать микро и макро) А собес - показательный, целью которого просвещение, и если я будучи неподготовленным мог какие-то вопросы запороть, то собеседующий, который эти вопросы составлял - объяснял для зрителей. Но я бы добавил еще одну цель - выявление токсичных балбесов среди аудитории)
"чел сказал, что setTimeout макротаска а промисы - микро, что неправильно" - мужик, камон, это как раз таки правильно.
Таймаут - macrotask, промис - microtask. Можешь даже в доке проверить)
Так что в следующий раз, прежде чем писать подобный комментарий, лучше сначала задуматься о том, не ошибся ли ты сам где-то.
А если есть желание научить нас уму разуму - дай знать, снимем с тобой собес, заодно и за вопросы мои можешь по придираться, ничего вырезать не буду, хоть лайвом проведем.
Хороших тебе выходных!
@@ayub_begimkulov бля дядь, хз как получилась эта описка ебнутая но имелось ввиду что он перепутал
"как бл@ть такие люди живут"
а ты как живёшь в одиночестве будучи такой душнилой агрессивной?
@@ayub_begimkulov5:26 тут он че сказал?)
Сказал что таймы - микро, async - макро
а это точно мидл?) на очень большое количество вопросов ответы не твердые и с большим сомнением
чёт в работе карирование функции мне не пригождалось. это задачка больше не проверку понимания работы замыкания и рекурсии
function curry(fn) {
function helper(...args) {
if (args.length >= fn.length) {
return fn.call(this, ...args);
}
if (fn.length !== args.length) {
return (...args2) => helper(...args, ...args2);
}
}
return helper;
}
зачем тут call?