#17 Full-stack разработчик на собеседовании Frontend Middle

Подготовка к собеседованию на Node.js Developer

Транскрипция видео:

  • всем привет на 17 выпуске от собеседованиям меня зовут владислав есть компании делим абель рядом со мной stars из компании хабр сегодня над сами силой у нас кирилл кирилл расскажи немножко о себе сколько утилита и откуда так нам пришел да привет собственно до меня зовут кирилл мне 25 лет живу я в городе донецк работаю в компании phoenix должность моя официально называется ведущий инженер-программист работаю там уже практически 5 лет собственно пришёл я туда на практику из университета и там так и остался вот занимаюсь и до кэндо

    00:00:04 - 00:01:43

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

    00:00:55 - 00:02:31

  • мир страшных непонятных названий и в общем я туда от нашей команды как первооткрыватель отправился нырнул с головой и вот до сих пор как-то не вылез там говорю так глубоко погрузиться frontend 3 год назад это что значит это как ну в том смысле что активно начал изучать то есть до этого это были просто какие-то обрывочные знания ничего конкретного три года назад начал работать и параллельно изучать view сборщики работы стоит скрипт и в общем всю современную инфраструктуру но ты говоришь пять лет работаешь в

    00:01:43 - 00:03:19

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

    00:02:32 - 00:04:16

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

    00:03:27 - 00:05:10

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

    00:04:19 - 00:05:58

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

    00:05:09 - 00:06:58

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

    00:06:07 - 00:07:50

  • планах там на ближайшие несколько лет ну ну пока что расти вверх не нравится концепция тише специалиста вот но я не уверен что я подхожу под нее потому что я собственно я говорил зла на seba kmt мы фронтэнда но скажем так у меня можно сказать 20 таких в одном суб один из бэг-энда растет другой из контента в общем надеюсь продолжать расти в обоих расти и развиваться ну то есть ты будешь стать типа что-то full stack разработчикам или все-таки больше не но я ехал я надеюсь что я им являюсь конкретно целиком уходить с

    00:07:01 - 00:09:08

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

    00:08:05 - 00:09:52

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

    00:08:59 - 00:10:50

  • секций которые мы заготовили вот и начнем мы с нашего любимого джесса вопросы как нам кажется не ешь сам не самый хардовый но как это обычно бывает мы надо ошибаемся вот первый вопрос к тебе про способ и объявления переменных какие ты знаешь и в чем разница вообще когда какое использовать ну есть способ объявления переменных var с помощью чего слово var это устаревший способ сейчас уже его использовать не рекомендуется из-за проблем которым приводит его использование проблема первое то что war перемены объявлены с помощью вары они

    00:09:55 - 00:11:45

  • имеют область видимости в пределах функции либо в пределах скрипта если они были объявлены вне функции вот таким образом они оказываются объявлены еще до того места где на самом деле им их объявили в коде это может приводить каким-то проблемам явным и так далее ну собственно на замену war пришли операторы лет и const которые лет соответственно заряд объявить переменную в которой впоследствии можно изменить значение const объявляет переменную которая не переменная константа какие вот проблемы есть как раз у того что war

    00:10:49 - 00:12:25

  • объявляет переменную внутри функции почему это плохо к чему это может привести ну например war объявленный к примеру в теле блока div или for неважно становится виден из за его пределами и таким образом можно получить нежелаемые какие-то эффекты если в другом блоки попытаться объявить опять таки с помощью war переменную с таким же именем на самом деле это будет перри присвоение предыдущий переменной окей тут реально да ну может быть еще уточнить что такое там орал dead zone то есть чем в чем отличие в плане вот всплытия ну давай

    00:11:38 - 00:13:50

  • назвать хостинга все-таки у вара его лет и const чем она заключается и как это может не знаю выстрелить тебе в ногу ну собственно товар всплывает до начала объявления функции и виден на всем ее протяжении лет и const они видны только в пределах блока в котором они объявлен чему это может чему может привести использование во рву я собственно уже рассказал но это все-таки не про давай так вот у нас с тобой есть какая-то функция который мы достаем из замыкания переменную вот какая здесь будет разница

    00:12:43 - 00:14:25

  • если мы используем бар по сравнению с тем же летом допустим что может быть ей не так что может сломаться вот когда мы используем лет пили или war вы подумать могу предположить что эта переменная будет жариться между разными замыканиями созданными одной и той же функции то есть ну там проще все на самом деле там там ни за что ширится у тебя код может упасть если ты обращаешься к переменной который еще не было инициализирована случае с этом если ты попытаешься к ней обратиться у тебя будет ошибка что

    00:13:36 - 00:15:09

  • перемен инициализирован ну ну давай да конечно в случае вара в ней будет на самом деле несет просто отдыхает да да ну да окей хорошо давай тогда про типа данных поговорим я там нет смысла спрашивать какие есть типа данных и ты это чисто на заучивание давай тогда про разницу ну лан define вот когда ты используешь у себя null когда использую шин define и в том числе давай поговорим про трофей фолз и в льюс какие бывают нал используется в случае я бы сказал пустого значения для кого-то для каких-то переменах

    00:14:33 - 00:16:05

  • undefined это не инициализированная переменная теоретически это можно благодаря такой разность семантики можно определять можно в объектах различать к примеру в фильтрах что мы хотим поэтому фалер полю не фильтровать вообще либо хотим фильтровать и чтобы значение было пустое например это это достижимо благодаря потому что в java скрипте в отличие от других языков есть две разные пустые переменные пустые литералы вот я забыл если честно вторую часть вопроса но у нас с тобой есть трофей фол севилью

    00:15:23 - 00:17:12

  • что это вообще такое и для чего это нужно труси и фоллз и вылез это две категории значений которые различаются потому к какому булевому значению они приводятся к фолз и приводится на лан define id0 пустая строка ну собственно фолз вроде как ничего не забыл к утру приводится все остальные ok хорошо я бы снова на гонку ещё докинул вопрос какие особенности у view с этими привидениями по моему если что что там отличается от вот этого набора по моему в если использовать вы if the там пустая строка не считается фолз и в значения по

    00:16:17 - 00:18:25

  • моему а строка с текстом fools никогда бы не подумал такое проверить но вряд ли вряд ли скорее всего тоже true руки ладно ну это такое это знание принципе для витрине актуальна на самом деле даже все все-таки cforce приводится но это сопли это больше про наследование атрибутов там очень за модуля на логика и не дай бог и тона и сдайся я хотел у тебя уточнить вот труси фал сивас ты говоришь там что они приводятся каком-то более назначению а в каких случаях тебе вот вот этот механизм вообще нужен каких

    00:17:23 - 00:18:44

  • случаях ты его используешь ну это происходит либо если я явно привожу что-то более она с помощью конструктора бульона либо стоит man to have a wild и так далее если проверить существование объекта например просто чтобы они не нужно было явно сравнивать его знал и ленты файлов можно просто сделать их общих маккейна про сравнение сейчас мы еще поговорим я хотел у тебя спросить это такое немножко вопрос насколько ты погружался оптимизации для v8 но вот у тебя допустим есть объект в котором ключ может быть ничьим то есть пустым либо

    00:18:12 - 00:19:55

  • там какая-то строка вот как бы ты его объявлял ты бы туда что писал какое значение в случае если там ничего нет но зависит от ситуации честно говоря даже я особо вопрос я ему да но тебе нужно передать этот объект какую-то функцию и он собственно будет читать вот это значение но там его нету то есть там будет банально проверка iv там что то какое значение и что то делать вот случае если в этом значение может быть строка чтобы ты положил в качестве пустого значения туда я бы вероятно положил туда mode я обычно побольше

    00:19:06 - 00:20:37

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

    00:19:52 - 00:21:12

  • работать вот потому что когда у тебя будет постоянно меняться строка она остро канал он будет сбрасывать у тебя оптимизации потому что у тебя поменялся тип данных вот они тут надо еще заодно уточнить [ __ ] это какой тип данных благодаря чудесному багу это тип данных объектов и в контексте оператора type of теоретически знал это отдельный тип ты хорошо давай тогда поговорим с тобой про сравнение ты уже эту тем ножка затронул там когда про булевые значения рассказывал собственно почему у нас в живо скрипте два вида

    00:20:31 - 00:21:55

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

    00:21:14 - 00:23:00

  • чуть точнее сравнить значение там по моему есть нюансы минус 0 и плюс 0 которые блин я я забыл тут либо тройной равно их считать разными значениями объекты с одинаковым либо наоборот вот и снам тройное равно скажет что нам не равно нам объекты скажут что это одно и то же значок мне нравится объяснение влад какие-то может быть новый мне тоже кажется хорошее объяснение но например чему же равен нам по спецификации он не равен они чему даже самому себе по ее какому-то там окей как проверить что у нас нам намбер изнанки я думаю все мы

    00:22:08 - 00:24:21

  • просим закончили давай следующий расскажи про контекст функции что из себя он представляет контекст это собственно грубо говоря объект для которого вызывается функция можно так сказать доступ к контексту изнутри функции происходит по ключевому слову зы случае если функция является методом объекта с то этот контекст но его и эта функция вызывается напрямую на этом объекте тазис объявлен сразу определен сразу а если функция объявлена отдельно либо на вы вызывается отдельно от объекта то можно использовать боинг холод лай

    00:23:17 - 00:25:03

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

    00:24:10 - 00:25:54

  • явно не та самая магия когда у нас шаблону примешивается на shopkins и перевод он там банде но и вставили в целом во всех во всех методах в его компьютер функциях так далее везде дозы становится доступен магически хотя вроде как его там не должны быть окей ну про контекст функции то все понятно давай тогда про замыкание что такое замыкание замыкание я бы объяснил как механизм когда внутренняя функция получает доступ к переменным которые в ее текущей области видимости находятся не только внутри этой функции

    00:25:02 - 00:26:50

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

    00:25:56 - 00:27:45

  • вы хорошо может быть пример как как бы ты создавал замыкание как бы ты замкнул какую-то переменную тут бы х конечно хорошо было бы код пописать ну ладно буду рассказывать так ну к примеру мы можем классический пример мы можем создать функцию юз каунтер внутри которой объявить переменную b ли она будет по умолчанию 0 далее мы внутри создадим ещё две функции инкремент декремент и вернем их из функций каутер вот эти инкременты коммент соответственно будут рисовать или минусовать значения в или вот в

    00:26:50 - 00:28:25

  • дальнейшем мы можем используя вызывая функцию sounder получить набор других функций которые будут оперировать спрятанным от постороннего глаза значением вот это можно использовать для некой эмуляции популяции сопи ну вот мы поняли как увеличивать уменьшать честного как его получить а ну собственно допустим еще 3 функции в твой или окей хорошо глаз какие-то вопрос может нет про замыкание даже вопросов нет никаких магии поговорим про пользы что такое promise promise это механизм который данном высшими силами чтобы избавиться

    00:27:39 - 00:29:30

  • от call back hello но если точнее то это способ работы с а синхронными вызовами который позволяет нам создать некую абстракцию над возвращаем им знать ну над возвращаемым некой неким процессом результатом либо ошибкой так хорошо и как это нам позволяет избавиться от клубы кхл а ну к примеру если у вас какая-то интересная бизнес-логика что мы должны выполнить запрос а по его результатам выполнить запрос б по результатам по и выполнить запрос c то без использованы promise of a используя старые какие-то api

    00:28:36 - 00:30:27

  • виде call back off мы делаем запрос а внутри в его там параметрах объявляем call back который выполняется при получении результата внутреннего вызываем в общем получается у нас такая интересная лесенка из кубиков кроме сыном позволяют благодаря благодаря их api через зин-зин зин-зин сделать такую цепочку вызовов которая практически линейная хорошо что если набор каких-то запросов и нам надо сразу все подождать но можно если у нас если у нас их набор этих promise of динамические то можно использовать

    00:29:32 - 00:31:19

  • promise i'll метод если не динамически то можно просто при использовании осинка weight можно сделать avoid на первом кроме сюда во втором если у нас фиксирован а в чем разница будет но что ты используешь promise он что losing a white и вот там требует теоретические при использовании при использовании пароме спал если в каком-то из них произойдет ошибка остальные загрузятся то мы в общем как только в одном из них происходит ошибка то мы получаем ошибку и в результирующем прописи при при использовании

    00:30:25 - 00:32:03

  • при использовании avoid на отдельных промахах у нас произойдет ошибка на мы понимаем скажем такая ошибку на первом про месси ошиб теоретически возможные ошибки на последующих про местах будут проигнорированы и сформулируем мне кажется надо назвать и помочь немножко давай под сначала поймем вообще что такое промеж гол за что эта штука делает она создает про мест который разрешается когда разрешаются приводятся все про места перед менее либо же реджи птицы когда rejected хотя бы один из них какие-то из наших кроме promise

    00:31:21 - 00:33:09

  • есть еще про миссы рейс promise советует какие то такие вещи но мисс кэнди возможно не помню не приходилось обычно обычно на эту историю это еще даже не стоит обычно все-таки приходится по бизнес-логики дожидаться всех результатов а не устраивать какое-то соревнование моим макей но давайте разберем основную фишку все-таки промыслов вот мы с тобой ждем все promise а в какой момент вот эти форме которые внутри запускаются запускаются сами promise i tell a promise она создается вот эти promise и которые мы ждем

    00:32:14 - 00:33:47

  • да не запускаются моментально как только мы их объявляем операции которые должны выполняться после их рисового которые находятся в зен они запускаются в следующий микро тоски ok но а как это работает с осинка в этом если мы пишем 3 а вы это подряд когда будут созданы вот эти 3 pro места для каждого заветов сначала будет создан promise 1 дальше так как росинка ведь это просто сахар над zen всем таким то произойдет ожидании дальше когда первый promise разрешится мы перейдем дело дойдет до следующей

    00:33:03 - 00:34:58

  • микро тоски пусть только после этого будет создан 2 promise вот смотри ты все очень правильно сейчас рассказал давай еще раз спрошу тебя это вопрос в чем все таки будет разница когда мы используем promise пол и осинка вид вот который подряд для выполнения кода какая будет здесь разница ну да я просто немного у себя в голове другую картину представил если речь идет о том чтобы мы делаем во втором случае a weight и только в этот момент определяем запрос допустим которые выполнять и так далее да конечно

    00:34:01 - 00:35:25

  • произойди ошибка в первом запросе второй запрос просто не отправили не успеет отправиться я просто почему запутался потому что я представил себе в голове следующую схему когда мы создаем 3 promise а изначально а потом дожидаемся их уже после отдельно но все так но в кроме swale как бы по-другому и не сделаешь то есть тебе нужно сначала создать promise а потом отложить прорисовал подругу в это не сработает вот хочет хочется понять все-таки в плане выполнения кода в чем здесь будет разница вот прям

    00:34:42 - 00:35:57

  • принципиальная почему мы с тобой можем в том же осинка выйти написать тоже кроме скол когда нам осинка выйти реально нужно использовать произвол вместо 3-х месяцев подряд когда нам нужно одновременно отправить все запросы а из осинка в этом где вот требует подряд как это быть работать если делать именно например a weight аксиос getaway такси msgid и так далее то сначала мы дожидаемся результатов первого запроса только после этого отправляем 2 050 тебе услышать ключевые слова что в одном случае параллельно идут запросы в другом

    00:35:20 - 00:36:45

  • последовательно проник просто еще раз говорю я представил себе картину когда мы сначала создаем 3 запросы а получаем 3 pro места и потом уже делаем awake promise 12 байт быстрее такая картина ожидать результаты последовательно до результаты мы будем ждать последовательно но отправка вопрос произойдет полиция а про между ул разрешаться только когда придут ответы по всем запросам и нас не всегда интересуют одновременно что-то отправляйте бы скорее всего на каком-то этапе просто хотим работать со всеми

    00:36:03 - 00:37:22

  • данными в этом нам нужен promise i'll то есть мы неважно в каком даже надо порядке мы получаем данные мы хотим чтобы они все были они так что вот подряд там один лишним второй трети только потому что делаем но я его точно все таки сосёнка в этом вот ты говоришь там сразу создать создадутся запросы но там нет там как раз таки с рынка в этом ты пишешь все в синхронном стиле и она отрабатывает как будто бы ты написал синхронном стиле то есть начало выполните первый запрос если он выполнится потом создается

    00:36:42 - 00:37:48

  • второй запрос моего ждем если он выполнял остается 3 ну вот так да и я еще раз повторю и я в своем первом рассуждении милый вариант когда мы к примеру делаем const promise 1 равно аксиос get бежевый to construct 2 равно аксиос get без его это и только потом уже делаем a white + 1 на weight promise 2 поэтому я запутался до покинул же с секции наверно у нас все я думаю давай переходить немножечко в папе но раз уж мы с тобой говорим про синхронность давай уж тогда развернем про и фанклуб что такое event лу

    00:37:15 - 00:38:48

  • как это связано с а синхронностью ну в общем браузерный скрипит движок работает по с событийные модели то есть приходит некоторые сообщения события которые обрабатываются в цикле условно говоря можно это представить как некий глобальный цикл while he's a new roman de ce message в общем такие сообщения могут приходить при загрузке скрипта при выполнении пользователем каких-то действий допустим мышкой пошевелить и так далее при выполнении при выполнении функций тела функции вида set time out с это интервал так далее в

    00:38:00 - 00:40:04

  • общем что происходит при выполнении такого при выполнение такой задачи у нас выполняется весь синхронный код после чего запускается все микро тоски и микро тоски это микро тоски создаются в основном из из promise of в смысле результатов promise of то есть то что происходит в замке панели вопросов вот таким образом разрешаю выполняется все микро тоски и микро тоски из promise of после чего дело переходит к следующей макро тоски ну конечно немножко немножко сумбурно мне кажется получилось давай потому что

    00:39:03 - 00:40:53

  • заберемся в этой разнице обычных то сакке микро to suck чем она заключается ну собственно макро тоски генерируются тремя может быть больше основные способы это непосредственно загрузка скрипта реакция на некая пользовательская действие взаимодействия со страницей например и и калмыки от set time out сет интервал то происходит какая очередность событий выполнять берется 1 микро таская макро тоска из очереди она выполняется целиком затем выполняются все доступные в очереди микро тоски после чего мы ожидаем

    00:40:01 - 00:41:53

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

    00:40:57 - 00:42:15

  • мне бы даже ты сказал что сначала выполняется макро тоска после этого выполняем все микро тоски ну и изначально в самом начале жизни скрипта микро тоски ниоткуда не откуда взяться новый поэтому концерт 1 макро . но у нас марина с тобой создаем сначала promise потом создаем сайт тайм-аут а само создание promise а само создание про мясо происходит в 1 макро тоски размер само создание его не выполнение его его side effects мысли то что происходит за я думаю на саммит виду то что после прохода получаем java-script вначале

    00:41:37 - 00:43:10

  • берем и все обычные вызовы пихаем наши стека вызовов но ты назвал декаде самую-самую первую точнее до за просто стек в макро the sky но я не уверен что так можно конечно говорить это же вопрос спецификациям конечно но мне почему то казалось что загрузка и выполнения скрипта это является может быть я ошибаюсь да ну это такой наш не принципиальный вопрос главное здесь понимать что все-таки когда у тебя стек почистился сначала идут микро тоски и уже только потом макро тоски в ok но хорошо значит мы просто немножко

    00:42:23 - 00:43:51

  • дружу не поняли ладно ну да это даже разберем чтобы кисть почему все-таки promise и могут запретить ей если у нас там будет какая-нибудь функция который вызывает сама себя а вот с макро тоска мы так нельзя сделать да собственно все просто потому что ей изменение в ивой происходит между выполнения мимо крота suck естественно только у нас закончилась одна макро тоска начались какие-то микро тоски в этот промежуток еще ей не обновляется ничего не происходит и дальше если эти микро тоски входят какой-то вечный цикл то

    00:43:06 - 00:44:38

  • надо мнение ей мы не доберёмся ночи разберемся ну до тех пор пока не закончится все микро тоски ну да да все так то есть у нас если микро тоска создана внутри микро тоски который сейчас выполняется на стекле только если конечно же мы сначала пойдем микро тоску но здесь важно понимать что что мы не дойдем до иван глупо то есть иван клуб не будет проворачиваться пока не завязывается все твои микро тоски которые уже стоят в очереди поэтому even клуб не будет проворачиваться аренды у нас лежит в event лупи enter тоски они тоже в

    00:43:52 - 00:45:06

  • воркшопе лежат поэтому соответственно связав резца ok другими словами чтобы просто забьем вот этими красками просто все будет не разрешаем огромная очередь нувоки можем наклеить вопрос приходить хорошо что такое дом зачем он нужен что он себе представляет что-то ним знаешь удобно дом это проводится как документов джек модов это собственно объектное представление структуры документа того hdmi или которой мы верстаем мы получаем благодаря дом мы можем получить доступ к элементам в виде обычных объектов то образом а с ними оперировать

    00:44:31 - 00:46:08

  • методами менять свойства ведь тогда какой же уточняющий вопрос еще чтобы я развернулся уточняющий я думаю лучше спасибо только у виртуальный дом чем отличается от обычного до виртуальный дом это некоторая абстракция которую придумывают авторы ренборг of вроде объем необходимо она для чего virtual дом по сути по сути представляет собой то же самое что и дом некотором уровне абстракции то есть некоторую структуру элементов но разница вот в чем когда мы хотим во вью допустим изменить через боев или меняется содержимое

    00:45:20 - 00:47:19

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

    00:46:25 - 00:48:03

  • но вот у нас допустим с тобой нет виртуального дома у нас то вы просто дом вот вспомним angular же с там нет виртуального дома там просто обычный дом всем хранится почему все-таки придумали virtual дом чтобы решить какую проблему честно говоря сангу learjet сработал давно это была неправда вот ну мне кажется основная проблема это оптимизация но мы можем также с тобой сделать все за те же самые сравнения также посчитать что обновить и точечно обновить почему же мы не используем для этого обычный дом

    00:47:14 - 00:48:36

  • ну возможно благодаря virtual домом и например можем еще эти изменения накапливать скажем так и выполнять перерисовку не сразу во вью это происходит благодаря механизмам тиков то есть изменение фиксируется 1 в 1 тик и только тоже не туда вообще не игра ну ладно значит я просто смирился существовали когда-нибудь думал пытался просто в обычном доме создать не знают 10000 элементов и в джесси создать 10 тысяч объектов как думаешь будет ли какая-то разница что ты создашь тысяч элементов и 10 тысяч объектов но наверняка 10000

    00:47:56 - 00:49:39

  • элементов рендерить займет какое то время но даже не просто равен 3 просто сдать то есть мы даже не касаемся еще тоже рендера вообще даже близко не подобрались но не уверен что я понимаю к чему ты клонишь на самом деле 100 спутника тому что рано или поздно тебе пришлось бы изобрести свою версию view потому что она так же создавать эти элементы так же как-то аккумулировать изменение также потом проводить сравнение и точечных менять все равно тут же механизм должен быть тебя но я клоню немножко к другому я

    00:48:49 - 00:50:03

  • клоню к тому что это просто тупо дорого ответ очень простой у тебя создание элемента займет но не знаю допустим давай абстрактно 10 миллисекунд очень абстрактно говорю о создании объекта займет одну сотую миллисекунда как бы здесь скорость будет отличаться на порядке поэтому мы все что можем мы выносим все-таки vds чтобы дом оказаться как можно меньше вот попробуй вот на том же не знаю навью на реакции зайти и отрендерится реально очень много каких то элементов тебя все будет тормозить потому что view все равно

    00:49:26 - 00:50:37

  • придется создавать эти элементы но когда тебе нужно будет их обновить если у тебя локальное состоянии это будет быстро потому что работа с честными объектами происходит очень быстро и виртуальный дом это такой супер упрощенный вариант дома там вообще выпили на все что только можно выпилить простые джон спирт объекты которые работают супер быстро и java script движки их очень хорошо оптимизирует в доме же так нельзя сделать в доме у тебя каждый запрос к дому это очень дорого и потому что браузеру нужно пересчитать

    00:50:02 - 00:51:05

  • сверх огромное количество свойств и как это все взаимосвязано с другом поэтому придумать такие абстракции то есть все таки все свелось по этого кубка оптимизации но оптимизации просто разный бывает то есть можно оптимизировать сколько раз обращаться к дому а можно оптимизировать так что к дому вообще не обращаться некоторых случаях как с виртуальным дома например ну я бы сказал и что не менее основной идее зачем он нам нужен стандартизация вот общение между домом и к если мы говорим о а там ручном комната способы обновления бы все

    00:50:32 - 00:51:49

  • равно придумаем какие-то абстракции которые будут оптимизировать наше обращение то есть мы же не будем руками все это делать скорее всего тоже что то напишем так вот view призвана решить эту проблему и дать общий механизм для всех то есть у нас из проектов проект будет один тот же механизм работает с домом наверное все да у меня по дому вопросов больше нет давай поговорим с тобой про state который у нас есть браузера мы можем с тобой данный к охране браузеры можем использовать cookies можем использовать local storage station

    00:51:11 - 00:52:32

  • сторож давай сначала просто обзор на вообще про разницу между этими механизмами как устроена cookies как устроила курс тоже 6 6 cookies это некие значения которые пересылаются между между сервером и клиентом используются они например для хранения токена доступа происходит это автоматически в случае сохранения cookies в браузере таким образом эти cookies автоматически отправляются на сервер сервер может в свою очередь в ответ на запрос установил задать с помощью заголовка куку которой он хочет установить на

    00:51:55 - 00:53:35

  • клиенте чем это максимально абстрагировано и вот непосредственно фронтенда вещь теоретические да можно управлять кукане непосредственно из java скрипта но это какие-то дополнительные вещи которые не безопасны и поскольку скольку могут быть различного рода уязвимости при доступе кукол из из скрипта авторизационные cookies ходят с флагом на степи он ли который запрещает доступ и скрипта local storage это хранилище в браузере привязанная собственно дар cookies сами по себе тоже привязаны к конкретному да не ну то есть

    00:52:44 - 00:54:29

  • не шарится между различными сайтами вот local storage также это хранилище привязаны к конкретному адресу она хранится только браузере оно не отправляется никогда на сервер позволяет хранить данные в виде я а вот хранятся эти данные бесконечно пока их не почистить вручную station сторож механизм похожий на local storage но но данные автоматически очищаются при завершении сессии то бишь при закрытии браузера муки но и только поправлю в одном моменте что в густую сетку раз строки мы не можем объект положить local

    00:53:36 - 00:55:12

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

    00:54:26 - 00:56:13

  • никак не можем управлять но я сделаю небольшую подсказку все-таки можем у нас есть атрибут кросс ориджен для html а у нас фича есть что-то похожее вы кричали то же самое там есть риск radio shows то есть это как раз та штука которая говорит что я хочу вот допустим этот запрос сделать без кук и в чем фишка это штука те позволяет обойти курс некоторых случаях то есть когда ты хочешь делать запрос на другой домен ты можешь указать искр один шанс фолз он сделать запрос без скуки у тебя запрос не свалиться с

    00:55:21 - 00:56:35

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

    00:55:58 - 00:57:50

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

    00:56:54 - 00:58:20

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

    00:57:37 - 00:59:16

  • стучаться на какую-то и описку и для этой пешки нужны cookies вот есть это это за 3 будет не просто вижу тебя кишка сломается скорее всего вот поэтому конечно же это стоит изучить вот окей давай перейдем к секции по html и тут у нас будет не так уж много вопросов но они microsd такие интересные давай поговорим с тобой про интерактивные элементы ну мы сузим список до трех видов элементов это ссылки кнопки и лэйблы вот когда нужно что использовать когда ссылку когда кнопку когда лейбл в каких случаях

    00:58:25 - 00:59:58

  • ну я бы сказал ссылку нам нужно использовать всегда когда мы переходим на другую страницу и ни в каком ином случае 0 и либо же если мы переходим на какой-то на какой-то подраздел текущей ну в общем да я когда вот других случаях когда нам нужно выполнить какое-то действие это должна быть кнопка и был это вообще просто элемент который призвана содержать некоторое пояснение к импорту его название и так далее и теоретически можно конечно обрабатывать нажатии на ссылку и делать какие-то выполнять какую-то кастомную логику можно по

    00:59:12 - 01:01:01

  • нажатию на кнопку выполнять переход но это семантически неверно и это не очень хорошо для accessibility вот это вот те окей давай так сейчас пока опустим лейблы поговорим просто про ссылки кнопки вот ты говоришь переход на другую страницу а представь что у нас с тобой & спа мы нажимаем с тобой на какой-то элемент интерактивной но у нас страница с тобой не меняется у нас меняется url у нас меняется контент в таком случае что использовать стоит в таком случае та же ссылка но да это как бы технически это

    01:00:06 - 01:01:33

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

    01:00:56 - 01:02:32

  • в конце концов нажать на нее колесиком мыши чтобы открыть ссылку в новом окне в общем все эти механизмы окия если у нас ситуации наоборот у нас с тобой кнопка которая с виду как бы ссылка да я понимаю что с точки зрения user experience a конечно есть некоторые вопросы к такому подходу но все же допустим у нас какой-то пограничники из нам действительно стоит так сделать то как бы ты это делал но эта кнопка не эта кнопка не вызывает переход вот его что хочу уточнить она не вызывать переход на другую страницу я не

    01:01:44 - 01:03:00

  • настолько силён в css и чтобы сказать можно ли так приставь я тебе точно здесь не поможет ахаз пытается подвести к вопросу когда нам действительно важно чтобы это было кнопкой это ссылкой почему так важно то что в этом соответствует каким-то правилам это для нас не аргумент или так принято то есть какая нам разница чему это важно туда порассуждать ну давай может быть посмотрим на эти точки зрения пользователя то есть и как для него будет отличаться поведения касательно ссылки касательно кнопки мы

    01:02:27 - 01:03:50

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

    01:03:16 - 01:04:39

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

    01:03:57 - 01:05:33

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

    01:04:45 - 01:06:16

  • так я думаю что лонгрид про доступность это что-то типа тут есть я его ей accessibility слова говорил да но смотри хорошо кнопка более доступно чем div когда нам нужно разительно кнопка давай с тобой подумаем а когда все таки нам нужно сделать так что вместо кнопки элемента батон использовать div с обработчиком кликом каких случаях тибет стал применять например если мне не нужно чтобы кнопка фокусировалась есть не происходили такие действия кичу это вот как раз вопрос немножко про вложенность какая есть особенностью

    01:05:32 - 01:07:00

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

    01:06:18 - 01:08:02

  • одно конечно реальность немножко другое то есть мы представим ситуацию это я уже рассказываю когда применять div с кликом вот у тебя список карточек какой-нибудь из да и у карточке есть abs оголовок картинка и кнопочка купить и тебе нужно сделать так чтобы при клике на карточку ты переходил в карточку какую-то отдельную страницу где там дополнительно информация о прикли при клике на кнопку купить ты в ее добавлю в корзину без переходов надо безумно но есть разный способ это решить я не гожусь что там обязательно решать землю

    01:07:09 - 01:08:28

  • с кликом это как вы из вариантов можно абсолютно спозиционировать ссылку и то есть один такой вариант вот есть вариант с делом с кликом но такие ситуации бывают когда нужно вложить 2 интерактивных элементов друга и что-то сделать с этим таком случае в других вариантов как на примерке это хаки нету то есть вложить плата за батон не получится окей влад каким-то еще вопросы по интерактивно элементом нет вы на интерактивном может быть все разобрали теперь я предлагаю поговорить про встроенную контент начнем с изображений

    01:07:49 - 01:09:06

  • хотя бы рассказать кинувшись форматы как браузеру ноет размер картинки откуда наберет ну и так далее что ты знаешь и картинка так но базовый самый тех который используется для брожения изображений это m&g вот него мы в нем мы с помощью атрибутов сердце устанавливаем либо ссылку на на изображении либо допустим мы можем ее передавать в качестве дата урик почти 4 формате например если нам не нужно загладить вот изображение размера изображения могут устанавливаться как с помощью атрибутов на том же теги так и через стиле на нем

    01:08:27 - 01:10:30

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

    01:09:28 - 01:11:36

  • одну из них может можно передать несколько разных ссылок на изображении различного размера и в зависимости от ситуации того где мы смотрим какое разрешение экрана подгрузить разные изображения не надо ты всё правильно говоришь я именно про размер это можно указать высоту и ширину я даже уточнил бы может быть а что будет если мы не укажем ширину и высоту картинки как она будет загружаться для пользователя но она если честно не по вопросу ну представьте зашел на сайт там вставлена картинка там сверху текст снизу текст ты стоял

    01:10:35 - 01:12:11

  • эту картинку по центру не задал у неё не ширину и высоту как для пользователя будет выглядеть загрузка такой страницы а ну контент будет скакать потому что изначально когда пока изображение не загружен и мы не знаем его размеры а не знаем как дальше блоки должны где расположен естественно произведет перри рендеринга дальше блоков и так далее это называется особенным словом скажи нам его слушайте слова конечно мы любим особенные слова ну не знаешь это называется layout shift до знал слышал такое слово знал да а где

    01:11:24 - 01:13:01

  • посмотреть может клиент shift в devtools можно performance вкладке наверняка это наблюдать где-нибудь уроки хорошо ты начал говорить про разные форматы изображений как можно указать эти разных формат я точно не помню как называются эти теги но есть к моему современная скажем так версия тега и матче внутри которого под тегами определяются разные источники изображений разных форматов среди которых браузер выберет 1 который он знает что браузеры какие-то старые могут не умеете в современные какие-то форматы но это не то что в

    01:12:13 - 01:14:15

  • paypal back ok вопрос именно в том что ты название не скажешь ни не помню но это неважно как бы я хотела спросить используешь летучими у семёна проектах и или ты с картинками и паришься у меня ноги мы занимаемся по большей части сервисами у нас из изображений есть разве что логотип таким хорошо давайте поговорим про следующий нюанс можно вставить изображение через там так им и меньше ли им g а можно как бы граммам какого-нибудь блока в чем разница таких подходов и какой из них лучше или хуже и вот чтобы

    01:13:18 - 01:14:56

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

    01:14:12 - 01:16:14

  • проблемы в том чтобы вписать изображение в определённый размер или наоборот и в аду возникает вопрос а правильно ли они делают что берут и делают а mdif background-image дальше это накидывают степи кто я такой чтобы их судить веб-разработчик которые наверняка знакомства спецификации ну на этот вопрос я не могу но для юзер в чем эта разница допустим то есть весь работника которая если им очереди в grange до до меня дошло для пользователя это конечно разница будет потому что например если эта картинка которая через

    01:15:14 - 01:16:40

  • стек подключено то ее можно открыть в новой вкладке ее можно сходу скачать через контекстное меню а если это бэкграунд так ней уже не так просто доступиться нужно идти в devtools выдирать это изображение из стилей либо из вот атрибута чтобы скачать да я тоже пытался скачать изображение инстаграма и так еще картинки на background-image они не кэшируются это верно и поэтому да никуда нам не деться от g&g у нас маст хэв еще например бэкграунда не сказал он там есть проблемы например как сохранить соотношение сторон люди

    01:15:58 - 01:17:33

  • применяют хаки там размер изображения не значит ничего она встает по другим параметрам я если можно все же быть все таки уточнив программ ты матч но не кэшируются именно картинки которые оставлены как дата горел как бы еще четыре закодировано картинки то есть если там просто верил и конечно там должен быть кэш ну насколько я помню то есть десять лет запрос да да если ты прям картинку и onliner прямо в грунт и мыши конечно конечно не будет это же назовись css кашира ну такая картинка не заказ и руется по идее за

    01:16:48 - 01:18:17

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

    01:17:32 - 01:19:11

  • специфицирует какие теги для чего используется и благодаря этой спецификацией спецификации исключается какой-то конфликт стилей вот талия есть вариант например как-то реализованного view с помощью скоб от стилей работает это каким образом при при создании компонента автоматически при его рендеринге ему назначается какой-то на его элемент назначается дата атрибут уникальный и все стили в этом компоненте модифицируется в сисе все селекторы модифицируются чтобы включать этот дата атрибут таким образом даже если мы

    01:18:25 - 01:20:19

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

    01:19:21 - 01:21:08

  • есть я знаю слово css модули но я с ними не работал поэтому подробнее не расскажу а можешь уточнить щетки чем теперь снг с так не нравится ну кроме того что мы пишемся sngl но это первое второе ну сколько я знаю насколько я читал это все-таки бьет по performance у это большинстве он по моему по моему есть какие-то уже решения которые позволяют кэшировать такие стили чтобы они собирались в отдельные в отдельные какие-то бамбл в отдельный файл бандах но по моему это везде так работает то есть это еще и на

    01:20:14 - 01:21:49

  • трафик бьет ну то есть если убрать отсюда то что перформанс какой то есть хит представим что и допустим его нету вышли решения которые по скорости сравнимо с нативным css а вот тогда бы ты стал использовать все смотрят получается но не берем неизвестности джесс до ссс просто не берем в расчет то что там нужно писать с ргс файлах ну допустим мы это как-то решили мы будем писать все css из волокна просто young людей там шут с ними делать с целым те подход окей просто performance не устраивает но мне в целом подход не

    01:21:02 - 01:22:23

  • хоккей не люблю смешение смешение разных частей компоненты вот собственно это одна из причин почему я пишу на view мне нравится четкое разделение шаблона скрипта стилей не нравится это смешивать окей акте не знаю но может быть еще можешь найти в этого минусы в сравнения допустим с тем же б.м. мне кажется с css ндс не очень удобно не очень удобно делать какие-то глобальные стиле которые будут будут доступны во всем приложение вот это позволяет сын css нгс позволяет создавать какие-то маленькие стилизованные

    01:21:41 - 01:23:33

  • стилизованные компоненты но по тому по тем примером что я наблюдал они очень масштабируйте но у меня у меня с ними с этим подходом нет опыта я просто просто смотрел на него где-то статьях на гитхабе руками окей ну вот какой для тебя сейчас предпочтительный способ изолировать стиле допустим для нового проекта ну допустим у меня есть такая возможность выбрать скол под стилей во вью потому что это самый простой способ тут не нужно никакое соглашение можно линкором обязать любом случае делать стиле в компоненте scoop.it чтобы

    01:22:47 - 01:24:16

  • случайно ничего не протекло это спасает но какие есть недостатки лоскутке допустим ну в текущей реализации не уверен может быть в третьем и это поправили но во втором view была такая странность узко подстилей что дата атрибут дата атрибут компонента поставлялся почему-то на все теги в этом элементе в этом на все таки элементов в этом компоненте а не только на корневой могу предположить что это немного усложняет процесс применения стилей в плане прохода показ колдун может быть есть какие-то нюансы еще есть момент тем что

    01:23:33 - 01:25:31

  • иногда все-таки нужно повлиять стилями на на дочерний компонент вот но для этого есть механизм глубинного селектора который позволяет это обойти а в планету ленка как тебе кажется заслуживает ли изоляция стилей вот такой тяжелой обвязки видео как минимум view то есть на другом from work it это не используешь плюс еще компилятор без свою компилятор это не сработает и лет за считаю что принципе это мне но не такой минус уж ну мне кажется без развесить этого туринга сейчас больших проектах практически никуда так что это не такой

    01:24:32 - 01:26:16

  • не такой минус работает и не трогай хороша не приходилось тебе ссср работать искателями нет ну да сейчас мазать доминируешь несовместимостью деревьев на сервере в браузере ну да проблема-то ско постели как раз таки в том что он работает на уровне твой разметки и он ее не явно модифицируют не она модифицирует у и стиля но и представь что у тебя по какой-то причине не известный есть два билда один сср build другой клиентский build a в чем особенность у нас скоб и стилей они вот этот идентификатор который

    01:25:23 - 01:26:58

  • ставится на дату атрибут он появляется время компиляции соответственно если ты вот эти две сборки не пеленку ешь у тебя будут разные уникальные техники для клиента и для сервера соответственно когда приду стиле сервера у тебя они не применятся точнее когда придет разметка сера не применится на клиенте потому что будут другие техники и все у тебя всё сломалось вот и это нужно решает специальное место сарт плагинами для view которые ну конечно же есть но об этом надо помнить плюс у тебя может быть не 2 сборки а3

    01:26:12 - 01:27:14

  • сборки по определенным там причинам вот и это нужно будет поддерживать консистентной вот то есть проблемы как раз такие скобы стиле в том что это runtime стиля все-таки есть верха то есть это не бесплатная штука они дольше работы чем обычный секс с это точно и такой вот усложненный touring который требует определенных махинаций чтобы это все работало но это вот в копилку минусов скупать стилей окей ну а почему не знаю почему ты не предпочтешь тоже самый б.м. который вроде как тоже ничего б м требует большой дисциплины

    01:26:44 - 01:28:24

  • за за любым и соглашениями нужно следить желательно автоматически вот я не уверен если какой-то соответствующий touring чтобы следить за правило неисполнения бэм а вот но букей может быть это даже хорошо , что б мы есть такие ограничения все-таки он как раз заставляет тебя думать в парадигме блоков ведь эта вот эту парадигму можно совместить с компонентами view и вроде бы все хорошо то есть как бы это можно автоматизировать что чтобы он проверял что у тебя по б мы все сделаем это можно сделать но не просто

    01:27:31 - 01:29:00

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

    01:28:16 - 01:29:44

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

    01:29:03 - 01:30:53

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

    01:29:57 - 01:31:42

  • собственно после окончания выполнения восходит поэтапный рендеринг странице ровно в том порядке как объявлена разметки затем выполнить загрузка и выполнение текст этих скриптов которые расположены в низу страницы ну конечно можно скрипты располагать где-то промежуточном месте разметки но не уверен зачем так нужно делать может быть конечно есть ситуация вот если если скрипт какой-то является обязательным к выполнению прямо сразу а это в большинстве своем так то его стоит очевидно располагать в внизу страницы

    01:30:50 - 01:32:31

  • вот вверху можно оставить например скрипты отложены я точно не уверен на счет именно этих атрибутов в этом есть по моему а sing десерт в общем что-то из этой области наименование которое где перри prefetch при в общем при при уже я лишь к фибре что-то в общем да представляем начнем с самого начала когда страница начнет рисоваться вообще хоть что-то начнет рисоваться когда загрузились и выполнились вещи перед которые расположены были перед разметкой перед разметкой которая то есть все что вы обязательно должно

    01:31:39 - 01:33:38

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

    01:32:40 - 01:34:17

  • когда начинает рисоваться страница и универсальный правильный ответ на этот вопрос когда решит браузер вот он захотел отрисовать сейчас вон от рисовал не захотел не от рисовал и ничего с этим не сделаешь вот как бы ты ни бился на это универсальный ответ потому что в каждом браузере это может работ по своему ты написала там где-то какой-то кусочек кода сегодня он у тебя блокировал завтра не блокирует ну так на то сейчас все браузеры как бы вы их нет жесткого стандарта как должно работать есть рекомендации но каждый браузер

    01:33:33 - 01:34:57

  • может по-своему интерпретировать их и решать что там грузим сейчас а что-то потому что там и не груди вообще что там свой механизм ну строго говоря конечно есть стандартам вот в игре в этой c это это все ну да конечно статус по моему мне поможете но все там даже не рекомендация то есть стандартный есть как бы то есть для осуществления обратной совместимости мы должны допустим какие-то ресурсы обязательно ждать прежде чем рисовать какие-то ресурсы обязательно ждать прежде чем парсить вот это все есть вот может быть

    01:34:16 - 01:35:36

  • как раз сможешь уточнить что на почти на странице у тебя может заблокировать парсинг странице то есть когда у тебя приходят и что имел прям по бантиком и then- парсер нужно остановить перестать парсить html и что заблокирует тебя рендер когда ты уже раз парсел часть html ты уже готов ее адресовать но какой-то ресурс у тебя блокирует рендеринг ну мне кажется что промежуточное выполнение скрипта но все-таки блокирует дальнейшей парсинг потому что что выполнение этого скрипта может повлиять на содержимое

    01:34:55 - 01:36:23

  • после него и соответственно нельзя парсить то что еще может быть модифицирована окей да ну по парсинг это в принципе все кроме скрипта я честно говоря не знаю что может еще раз над парсер а вот про рендер интересно понять что у нас может стаба рендер заблокировать не уверен возможна загрузка собственно загрузка какого-то медиаресурсов возможно но вот ты начал со скриптов скрипты могут заблокировать render загрузка или выполнение выполнение скрипта ну выполнение скрипта блокирует парсинг соответственно если она блокирует

    01:35:39 - 01:37:13

  • парсинг рендеринга динамика ходит окей хорошо кроме скриптов вообще что у нас еще есть у нас есть тело стиле но вот со стилями как части ли если честно не уверена асинхронной ли они грузятся а как это будет работать если стиле груз асинхронно вот представь у нас 3 ст 3 линк реал style sheet а то есть 3 ст 3 файла стилей мы их раз parcel и начали где-то фоне грузить я нес груз асинхронно вот по этой схеме как для постелей получается это будет выглядеть ну допустим сначала пришел третий файл стилей мне кажется выполнен он пришел

    01:36:40 - 01:38:18

  • второй файл стилей мне кажется на выполнение в любом случае происходит последовательно так как они объявлены применение вот но такое постепенно и постепенно и применение будет ли пользователи выглядеть как условно говоря моргание странице то есть до элементы уже адресованные будут менять свое отображение со шрифтами вот это популярная проблема мост поэтому браузер такие делают ждет загрузки всех стилей только на вам рисуют применяет вот кстати в каких случаях у нас появляется этом органе но то есть это

    01:37:30 - 01:38:49

  • явно не поведение встроенный в браузер но все равно мы с этим сталкиваемся что мы заходим на какую страничку и стиле моргают с чем это связанно это могут быть возможно какие-то применяющиеся runtime стиле то есть которые попадают в разметку парсится и применяются уже после того как все тренды рылась окей а как с этим можно бороться допустим можно с помощью различных механизмов выносить эти стили так чтобы они применялись не в runtime подключались подключались статические сверху страницах иди тогда таким образом

    01:38:11 - 01:39:58

  • применение стилей произойдет во время но допустим нет такой возможности на вот их строить разметку все равно нужных как-то потом подгружать уже в рандоме как с этим жить чтобы ничего не прыгала возможно использовать какие-то грамотные калмыки фуфел бекки чтобы не настолько сильно бросалось глаза ну вот как может выглядеть грамотный fall back не уверен но простой вариант если мы просто не будем рисовать пока не загрузится стиле это грамотный фл-п колледжа равно пользователю скорее всего не очень

    01:39:04 - 01:40:26

  • приятно будет смотреть на белый экран мы возможно в таких случаях стоит рисовать какие-то называется скилле тонны примеры на диске или да да да то есть чтобы пользователь видел что-то что-то более красивое чем белый экран пока ждёт окей ну разобрали мы с тобой про интернет страницы целом влад каким почему что вопросы по этой теме да нет вроде очень подробно разобрали можно переходить в день итогов что надо начинать да ты начнешь итогов ok ну что я могу сказать в общем и целом мы рассмотрели много разных тем видно что

    01:39:54 - 01:41:40

  • опыт и понимание того что что ты знаешь fontaine дам тебя есть то есть есть кита тему которая дотрагивались не слышал не знаешь но это нормально учитываешь ты претендуешь на full stack что касается позиции мигал frontend я могу сказать что ты проходишь и и то есть любая компания думаю тебе были бы очень рады но а так я думаю ты так понимаешь что ты сам не знаешь то есть прошли да да то есть эти вещи подтягивать это пожалуйста в общем целом низко что мне понравилось то есть на вопросы отвечал уверенно

    01:40:46 - 01:42:18

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

    01:41:31 - 01:43:01

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

    01:42:18 - 01:43:40

  • надо дальше расти прокачиваться мне на самом деле интересно узнать что там побег от части потому что по фронту сейчас все очень хорошо и если ходить к ним на собеседование бы киндера до на самом деле приходи на собеседника бы киндером тоже пусть тебя по спрашивают по изучают мне кажется если по backend также хорошо как по фронту то вот перед нами действительно настоящий full stack mezule разработчик который мне кажется редкость на сегодняшний день надо от этого прийти вот знается в общем мне все понравилось было очень

    01:42:59 - 01:44:12

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

    01:43:35 - 01:45:10

  • вопросов касательно непосредственно фреймворков бью моем случае возможно кого-то туринга плане сборки ну мне кажется это было бы интересно послушать людям но так те вопросы что были не не были интересными но на всякий случай может быть это мы зрители еще не все видели там последнем выпуске но по-моему в позапрошлом выпуске про frontend на как раз поговорили про the link так что если кто-то допустим хочет посмотреть про the link советую посмотреть предыдущие выпуски мы в принципе тоже обсуждали ну

    01:44:22 - 01:45:44

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

    01:45:03 - 01:46:26