#5 Мидл в 18 лет? Собеседование на Frontend Middle разработчика

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

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

  00:00:00 - 00:02:03

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

  00:01:01 - 00:03:04

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

  00:02:01 - 00:04:28

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

  00:03:16 - 00:05:10

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

  00:04:16 - 00:06:26

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

  00:05:20 - 00:07:18

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

  00:06:20 - 00:08:22

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

  00:07:21 - 00:09:23

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

  00:08:20 - 00:10:46

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

  00:09:42 - 00:12:41

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

  00:11:24 - 00:12:57

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

  00:12:14 - 00:15:04

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

  00:13:38 - 00:15:32

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

  00:14:40 - 00:16:45

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

  00:15:37 - 00:17:53

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

  00:17:19 - 00:18:37

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

  00:18:04 - 00:19:10

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

  00:18:38 - 00:19:56

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

  00:19:15 - 00:21:07

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

  00:20:14 - 00:21:21

• определить что вот здесь будет тем то объект и wish i gave all into a : один о том является и через из мы можем обратиться к нашей перемены а кто находится в объекте бар хорошо поехали демонстрацию фес рассмотрим это на примере вот пишу ты сказал примерно до хорошо делаем вот так то есть при вызове вот этой вот функции которые я сюда присвоил мы здесь что увидим кажется мы увидим здесь потому что у нас текст удался контекст передается more а когда ты будешь передается это как вообще работает что нам надо

  00:20:46 - 00:23:22

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

  00:22:22 - 00:24:22

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

  00:23:34 - 00:25:35

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

  00:24:37 - 00:27:14

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

  00:25:56 - 00:28:08

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

  00:27:16 - 00:28:43

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

  00:28:00 - 00:29:32

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

  00:28:47 - 00:30:37

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

  00:29:53 - 00:30:51

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

  00:30:26 - 00:32:57

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

  00:31:44 - 00:32:56

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

  00:32:25 - 00:33:54

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

  00:33:09 - 00:34:53

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

  00:34:01 - 00:35:58

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

  00:35:11 - 00:36:30

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

  00:35:50 - 00:37:22

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

  00:36:52 - 00:38:10

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

  00:37:32 - 00:39:06

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

  00:38:16 - 00:40:48

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

  00:39:44 - 00:41:31

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

  00:40:33 - 00:42:44

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

  00:41:52 - 00:43:09

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

  00:42:35 - 00:44:31

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

  00:43:55 - 00:45:28

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

  00:44:52 - 00:45:59

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

  00:45:24 - 00:47:50

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

  00:46:45 - 00:48:32

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

  00:47:46 - 00:49:48

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

  00:48:51 - 00:50:13

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

  00:49:37 - 00:50:58

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

  00:50:18 - 00:52:04

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

  00:51:10 - 00:52:58

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

  00:52:09 - 00:54:19

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

  00:53:14 - 00:55:14

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

  00:54:14 - 00:55:28

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

  00:54:59 - 00:56:21

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

  00:55:40 - 00:57:12

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

  00:56:26 - 00:57:39

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

  00:57:02 - 00:58:47

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

  00:57:55 - 00:59:44

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

  00:59:04 - 01:01:13

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

  01:00:10 - 01:01:58

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

  01:01:08 - 01:02:54

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

  01:02:02 - 01:03:36

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

  01:02:49 - 01:04:56

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

  01:04:34 - 01:05:53

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

  01:05:14 - 01:06:50

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

  01:06:00 - 01:07:26

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

  01:06:43 - 01:08:42

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

  01:07:49 - 01:09:17

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

  01:08:34 - 01:09:59

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

  01:09:17 - 01:11:25

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

  01:10:38 - 01:13:01

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

  01:11:56 - 01:13:03

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

  01:12:31 - 01:13:46

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

  01:13:08 - 01:14:46

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

  01:14:00 - 01:16:05

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

  01:15:08 - 01:17:11

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

  01:16:09 - 01:18:14

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

  01:17:39 - 01:19:09

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

  01:18:26 - 01:20:25

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

  01:19:25 - 01:21:23

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

  01:20:31 - 01:21:52

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

  01:21:15 - 01:23:19

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

  01:22:25 - 01:23:35

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

  01:23:02 - 01:24:19

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

  01:23:41 - 01:25:20

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

  01:24:38 - 01:26:36

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

  01:25:41 - 01:27:24

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

  01:26:42 - 01:28:14

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

  01:27:31 - 01:29:48

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

  01:28:36 - 01:30:24

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

  01:29:40 - 01:31:31

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

  01:30:44 - 01:32:59

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

  01:31:55 - 01:33:21

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

  01:32:43 - 01:34:51

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

  01:33:48 - 01:35:42

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

  01:34:59 - 01:36:17

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

  01:35:38 - 01:37:20

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

  01:36:40 - 01:38:36

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

  01:37:41 - 01:39:15

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

  01:38:39 - 01:40:32

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

  01:39:39 - 01:41:58

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

  01:40:59 - 01:42:06

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

  01:41:32 - 01:42:48

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

  01:42:10 - 01:43:19

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

  01:42:44 - 01:44:12

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

  01:43:51 - 01:45:34

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

  01:44:43 - 01:46:18

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

  01:45:30 - 01:47:45

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

  01:46:35 - 01:48:27

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

  01:47:44 - 01:49:39

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

  01:48:42 - 01:50:39

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

  01:49:41 - 01:51:38

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

  01:50:36 - 01:52:22

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

  01:51:33 - 01:53:13

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

  01:52:25 - 01:54:05

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

  01:53:15 - 01:55:15

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

  01:54:17 - 01:56:18

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

  01:55:23 - 01:57:06

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

  01:56:15 - 01:57:26

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

  01:56:50 - 01:58:26

• обеих осях вот ты назвал flex же стив и контент [музыка] будет да он по одной оси то есть либо по горизонтальным либо по вертикали зависимости от того куда тебя flex выстроен но его можно сделать и так же и по 2 se если мы сделаем малой найти до вопрос тогда про способы чисто горизонтального центрирование какие-то знаешь текст а не текст можно через текст оnline центрировать ну то есть если я напишу какой-нибудь дифф я сам детьми мы можем div и растянуть через не внутри него будет куда текст текст

  01:57:39 - 01:59:38

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

  01:58:39 - 02:00:01

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

  01:59:21 - 02:00:36

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

  02:00:01 - 02:01:13

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

  02:00:35 - 02:02:18

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

  02:01:28 - 02:02:46

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

  02:02:07 - 02:03:40

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

  02:02:53 - 02:04:34

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

  02:03:53 - 02:05:08

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

  02:04:30 - 02:05:42

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

  02:05:06 - 02:06:25

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

  02:05:45 - 02:08:19

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

  02:07:07 - 02:08:22

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

  02:07:46 - 02:08:49

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

  02:08:18 - 02:09:38

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

  02:08:57 - 02:09:48