Тёмный

СОБЕСЕДОВАНИЕ Middle Frontend разработчика С ИНТЕРЕСНЫМ ОТКРЫТИЕМ 

Ayub Begimkulov
Подписаться 11 тыс.
Просмотров 25 тыс.
50% 1

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

 

30 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 75   
@glebyakovlev7098
@glebyakovlev7098 Год назад
Отдельная благодарность за разбор анимации и особенность codesandbox. Такие вещи и делают контент действительно уникальным.
@ayub_begimkulov
@ayub_begimkulov Год назад
Рад, что понравилось!
@ayub_begimkulov
@ayub_begimkulov Год назад
Друзья, всем спасибо за просмотр! Во время пересмотра записи заметил, что звук у меня и Сергея был разной громкости и noise gate был настроен чуть агрессивно, из-за чего мою речь иногда вырезало. Постараюсь поправить все к следующему собесу. Также заметил, что я использую термин “контекст функции”, вместо “скоуп функции” (на 01:18:50, но вроде было еще пару моментов). Если еще что-то проглядел -- делитесь в комментариях.
@TheInsable
@TheInsable Год назад
Аюб и Сергей, спасибо за собеседование, было интересно послушать. Отдельная благодарность за ответ на каждую задачу и разбор ее на месте.
@ayub_begimkulov
@ayub_begimkulov Год назад
Рад, что понравилось!
@EvilYou
@EvilYou 2 месяца назад
31:38 Насколько я знаю, рендеринг происходит перед макрозадачей. Поэтому setTimeout всегда должен выполняться после изменения стилей. 35:16 Круто, не знал.
@wall-wrecker-my6ss
@wall-wrecker-my6ss 8 месяцев назад
Чо пацаны, постанова?
@v.demchenko
@v.demchenko Год назад
Круто, что разобрался в вопросе до конца👍 с codesandbox
@ayub_begimkulov
@ayub_begimkulov Год назад
Да самому этот момент покоя не давал) Спасибо за фидбэк!
@AntonDev
@AntonDev 6 месяцев назад
спасибо, ребят! Серёга, молодец, на запись сложно отвечать на рандомные вопросы)) все мы люди, у всех есть нервы!) Большой молодец! Аюб, респект за разбор raf, крутой фидбек оставил, очень по-доброму))) удачи вам обоим!)
@nafanya3733
@nafanya3733 4 месяца назад
спасибо)
@ДмитрийЛукьяненко-ь9ы
Хороший показательный собес, когда разрабы в принципе говорят об одном и том же , но не могут понять друг друга) к слову о том что отсобесить человека очень сложно
@Вадим-ь9т4ц
@Вадим-ь9т4ц Год назад
Отрезок видоса с теорией по анимации с помощью RAF и ошибкой codesandbox стоит вынести в отдельное/ые видео. (с 24.15)
@ayub_begimkulov
@ayub_begimkulov Год назад
Плейлист по анимациям уже давно в планах. Тут добавил, чтобы все кто собес посмотрели - тоже поняли, в чем беда.
@Владимир.П-е9о
@Владимир.П-е9о Год назад
Немного режет фраза "мейн тред", она в вебе неприменима, т.к. мы всегда в мейн трейде (не считая всякие тонкости работы со скроллом, с слоями, ну и с воркерами). Будто автор из Android разработки пришел в веб :) По теме вопросов, довольно пугает, что про event loop спрашивают на всех собесах, но почти всегда даже сеньеры грешат кучей рефлоу, перерасчетом стилей множества элементов вместо одного, непониманием композитных слоев и прочим. Та же самая тема с замыканием, спрашивают всех, а понимание внутренней работы хуков их реакта ни у кого нет (и природу проблем хуков при неправильной передаче в них зависимостей). Ощущение, что либо надо спрашивать что-то практичное, либо углубляться в вопросы, а не спрашивать то, что есть в методичках по собеседованию. Я бы лучше дал пример - исправь проблему тяжелой отрисовки или перерасчета стилей. Пусть хоть дома сидит над этим, загуглить все равно не сможет. Но если посмотреть в реале, то можно будет увидеть, как человек умеет пользоваться инстурментами девтулзов и как понимает работу отрисовки браузера. С другой стороны, если человек пишет в основном админки и всякий бэкофис, то эти знания ему абсолютно не нужны, и лучше спросить что-то предметное. А если он пишет большой продукт, который должен плавно работать на слабых мобильных устройствах, вот тогда нужно мучить его по теме отрисовки браузера (и никогда не найти специалиста :) ).
@demimurych1
@demimurych1 Год назад
Ваше замечание подобно - немного режет фраза "мы ходим пешком", так как мы всегда ходим пешком ( не считая всяких кто ездин на машине, метро и автобусе) В настоящий момент стандарт дефакто - это программирование с использованием минимум олного воркера - причем именно в нем и лежит основная логика работы веб приложения. Это сервайс воркер. А то что Вы ляпнули, характерно было для 2014 года, когда воркеры только появились на горизонте.
@Владимир.П-е9о
@Владимир.П-е9о Год назад
@@demimurych1 ну а вы придрались к самому незначительному абзацу в моем комментарии. Я просто в шутку хотел сказать, откуда пришел автор видео. Но если серьезно, то вы неправы: Во всяких нативных приложениях действительно, крайне часто всякую работу выносят в отдельный поток, чтобы не нагружать основной поток, который выполняет рендер. И даже в некоторых технологиях можно через Invoke из потоков менять интерфейс, предварительно залочив его объекты. По этой причине там нужно упоминать, в каком мы треде. Для веба нет стандарта дефакто по потокам. Вебовские воркеры не полноценные потоки, они не умеют в шаред мемори в основным потоком (не считая типизированных массивов), они не умеют в lock. По сути по своим возможностям они приближены к процессам а не потокам, т.к. внутри себя создают контекст (полноценный window объект), создают свой event loop даже со стадией рендера (см. OffscreenCanvas), они не умеют общаться друг с другом через прямое обращение к памяти. т.е. вебные воркеры это дорого - передача данных требует сериализации, создание потока требует создания контекста с кучей выделенной памяти. Часто в проекте с воркерами спрашиваю "вы же, ребят, больше ресурсов тратите на подготовку сообщений в воркер, чем на вычисления в нем. Зачем он вам?", а тебе в ответ "не знаю". В 99.9999% проектов в вебе не будет воркеров или они есть, но неэффективны, поэтому у нас не говорят "мэйн тред". > А то что Вы ляпнули, характерно было для 2014 года В 2014 году было больше воркеров чем сейчас, т.к. тогда люди по ошибке думали, что они эффективны. Сейчас же многие разобрались, и крайне редко тащат их в проект, только для тех задач, где нужно минимум общения с воркером и куча работы в нем. У нас куча асинхронщины, поэтому можно строить классный интерфейс без воркеров, а тяжести выносить на бэкенд.
@demimurych1
@demimurych1 Год назад
​@@Владимир.П-е9о Вы так тролите? Причем тут нативные приложения? при чем тут invoke? Для веба есть стандарт дефакто по тому как организовывать потоки для выполнения кода JS. Открывайте официальную спецификацию ECMA и читайте до просветления. С 2014 года существует все необходимое закрепленное официальной спецификацией для организации паралельного выполнения кода и доступа к разделяемой потоками/процессами памяти. В том числе и мьютексы/локи состояние гонки и прочие прелести паралельного выполнения кода. Нет не приближены к процессам. Спецификация позволяет делать то, что угодно runTime для решения задач паралельного выполнения кода. И совершенно все равно процессы там под капотом или потоки. Результат там один единсвенный. В V8 под капотом - thread-ы. > т.к. внутри себя создают контекст (полноценный window объект), Вы несете чушь. window обьект - это global object для стандарта HTML5. И он присуствует только там. И даже там, есть еще 11 разных типов глобальных обьектов - по колличеству типов worker-ов. Которые ничего общего с window не иемеют. Прекратите сорить терминами смысла которых Вы не понимаете. >т.е. вебные воркеры это дорого - передача данных требует сериализации, создание потока требует создания контекста Вы снова несете чушь. Открывайте спецификацию и читайте что такое Atomics операции. Вы несете чушь еще больше, когда упоминаете слово контекст, не понимая смысла этого слова в рамках спецификации языка JS. При этом Вы не ограничиваетесь и несете чушь даже в академическом смысле слова того чем являются потоки. Стратегия наговорить "умных" слов работает только тогда когда вы общаетесь с неучем подобно Вам. а не с человеком который в том числе писал спецификацию. >В 2014 году было больше воркеров чем сейчас, т.к. тогда люди по ошибке думали, что они эффективны. Вы несете глупости. Стыдитись. Воркеры не могут могут быть эффективны или не эффективны хотя бы потому, что есть вещи которые вы можете сделать ТОЛЬКО при помощи воркеров - например контроль за сетевым взаимодействием вашего приложения с вашим сервером. Или например использования всех возможностей предлагаемым HOST средой браузера для создания оффлайн приложений. Ничего подобного без воркеров Вы не создадите в принципе. Потому, что только в воркерах есть подобный функционал. И это не касаясь главного - воркеры позволяют Вам распаралеливать нагрузку на доступные вычислительные ресурсы архитектуры где выполняется Ваш код. Вы Неуч. И что хуже всего неуч воинствующий, который считает что заучив пару терминов спецификации, он будет ставить "на место" тех кто боится туда заглянуть. Прекратите позориться, и дайте себе труд хотя бы раз в жизни прочитать спецификацию.
@mew6085
@mew6085 Год назад
Я в а***. Отменный контент)
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@goshanmerzkiy9742
@goshanmerzkiy9742 6 месяцев назад
function sum(arg1) { if (!arg1) return 0; return function (arg2) { if (!arg2) return arg1; return sum(arg2 + arg1) } }
@ЕгорЛазука-й1э
@ЕгорЛазука-й1э Год назад
спасибо, интересное собеседование и детали про анимацию
@alexandroppolus
@alexandroppolus Год назад
В решении sum есть баг: const f1 = sum(1)(2); const f2 = f1(3); console.log(f1() + f2()); // напечатает 12 хотя должно быть 9 мой вариант const sum = (v) => v == null ? 0 : (v1) => v1 == null ? v : sum(v + v1);
@ИмяФамилия-э4ф7в
Ничего не понял, но очень интересно. Откуда 9 взялось? 6 же должно быть, нет?
@ayub_begimkulov
@ayub_begimkulov Год назад
Точно! Глаз-алмаз) Я почему-то кейс это пропустил. Постараюсь внимательнее быть.
@ayub_begimkulov
@ayub_begimkulov Год назад
Мы в решении только один раз замыкание создавали на result, а затем к нему уже суммировали все. То есть каждый последующий вызов добавлял в один и тот же result и возвращал одну и ту же функцию calculate.
@alexandroppolus
@alexandroppolus Год назад
@@ИмяФамилия-э4ф7в f1 = sum(1)(2); - вот здесь будет 3 f2 = f1(3); - а здесь 3 + 3 = 6, потому что стартуем от f1, т.е. это как sum(1)(2)(3) f1() + f2() = 3 + 6 = 9
@ИмяФамилия-э4ф7в
@@alexandroppolus понятно, спасибо
@semyon3100
@semyon3100 Год назад
Спасибо за видео. Инфа чисто для улучшения контента - есть небольшие проблемы со звуком, иногда очень сложно понять речь, + иногда треск есть
@ayub_begimkulov
@ayub_begimkulov Год назад
Да, был сильно настроен noise gate, в следующий раз постараюсь избежать этого.
@ОтабекБег
@ОтабекБег Год назад
😅
@tnsaturday
@tnsaturday Год назад
3 года опыта миддл+? Это очень сомнительно.
@astkh4381
@astkh4381 Год назад
Почему?
@EvilYou
@EvilYou 2 месяца назад
можно за 3 года и сеньором стать, это же фронтенд, а не СИ.
@tnsaturday
@tnsaturday 2 месяца назад
@@EvilYou ничто не может быть дальше от истины, чем это утверждение
@2difficult2do
@2difficult2do Год назад
Аюб, спасибо за интересный ролик. Разбор"особенностей" обработки кода в codesandbox 👍👍👍
@ayub_begimkulov
@ayub_begimkulov Год назад
Не за что!
@olegdunkan
@olegdunkan 10 месяцев назад
Самое красивое решение: function sum(prev) { return (x) => x ? sum(x + prev): prev; }
@АлександрФроленков-ш8л
Только проверки на sum() нет. В данном виде возвращает функцию при отсутствии аргументов. А так супер!
@HEX_CAT
@HEX_CAT Год назад
❤🎉
@kirills4631
@kirills4631 Год назад
Спасибо за твои видосы, после них реально начал больше понимать как работает реакт на практике и даже если не знаю ответы на вопросы в интервью, то зачастую получается до них дойти через рассуждения. Собес получился интересным и по фидбеку все четко!
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо за фидбэк! Рад, что смог помочь тебе)
@МарияЧерешня-у2й
🎉🎉🎉🎉🎉🎉
@МарияЧерешня-у2й
🎉
@anas4ik777
@anas4ik777 Год назад
комментарий в поддержку автора✊
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@SuperWhiteskull
@SuperWhiteskull Год назад
Очень полезно и интересно. Спасибо.
@ayub_begimkulov
@ayub_begimkulov Год назад
Рад, что понравилось!
@OGIDOG1
@OGIDOG1 Год назад
Спасибо за видео. Решение задачи function sum() { let v = 0; if (arguments.length === 0) { return 0; } else { v = arguments[0] } return function inner() { if (arguments.length === 0) { return v; } else { v = v + arguments[0]; return sum.call(null, v); } } }
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо за фидбэк!
@ИмяФамилия-э4ф7в
Что-то ты перемудрил. function sum(num) { let result = 0; function inner(nextNum) { if(!nextNum) return result; result += nextNum; return inner; } return inner(num); }
@slemchik03
@slemchik03 Год назад
​@@ИмяФамилия-э4ф7в + как вариант с помощью call. const sum = (n?: number) => { if (!n) return 0; return (nextN?: number) => { if (nextN) { return sum.call(this, nextN + n) } return n; } }
@gooseob
@gooseob Год назад
а у меня такое вот решение const sum = num1 => num1 === undefined ? 0 : num2 => num2 === undefined ? num1 : sum(num1 + num2);
@art7653
@art7653 Год назад
Круто👍
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@sergeykhairulin
@sergeykhairulin Год назад
в задаче на замыкание хорошо бы arguments.length проверять, а не undefined.
@ayub_begimkulov
@ayub_begimkulov Год назад
В идеале бы вообще на typeof arg === 'number'. Так как если там не число, то пользы от этого большой нету.
@ИмяФамилия-э4ф7в
@@ayub_begimkulov ага, а следом на NaN, пользователи, они такие 🤣
@Максим-д1у4щ
@Максим-д1у4щ Год назад
@@ИмяФамилия-э4ф7в Number.isFinite() тогда уже)
@mercury_2379
@mercury_2379 Год назад
комментарий в поддержку канала
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@deantek
@deantek Год назад
насчет мемоизации, на одном проекте на RN просто все в мемо оборачивали, ибо не было времени, дабы все отдельные компоненты проверять :D
@ayub_begimkulov
@ayub_begimkulov Год назад
Да, как раз про это и говорили. Иногда проще придерживаться одного стандарта. Во Vue кстати тоже все компоненты всегда "memo".
@TarasovFrontDev
@TarasovFrontDev Год назад
Ребят, не знаю реальный ли это собес и реальный ли собеседуемый, но я на самообучении за полгода все эти концепции изучил в разы лучше кандидата из видео + тонну дополнительной информации. Но, в любом случае, за видео спасибо! Повторять материал тоже надо. P.S. Кстати, из обсуждения renderQueue или CRP (кто как называет) вы нечетко проговорили этап style (recalculation), который вызывается между rAF и layout. А именно, в этот момент браузер стечит DOM и CSSOM, вычисляет активные @media, что в итоге формирует render tree. И уже за этапом style (recalculation) идет этап layout.
@nafanya3733
@nafanya3733 4 месяца назад
жаль, что через полгода ты сам забудешь эти знания без постоянного повторения =)
@TarasovFrontDev
@TarasovFrontDev 4 месяца назад
@@nafanya3733 Справедливо) Но ведь чел из видео готовился к собесу, а значит должен был повторить
@nafanya3733
@nafanya3733 Месяц назад
@@TarasovFrontDev привет! Во 1) это был я, а во 2) во фронте оч много вопросов, которыми можно задушнить. По теме обновления документа -- если ты не работаешь с анимашками/видео, то не будешь практиковать эти темы, а каждые несколько месяцев держать в уме бесполезные знания, которые можно погуглить/уточнить у коллег -- такое) Есть куча гораздо более важных тем, но в целом это одна из сотни важных тем)
Далее
Разбираемся в React JSX
13:49
Просмотров 8 тыс.