какой бы у тебя вопрос Ты же проходил собеседование Ты становишься таким минимальным человеком оркестром подключили Как вы используете Ваши проблемы разработчики над браузерами работают разные основные методы перебора массивов и объектов всегда нужно понять что вы хотите сделать минус о минус веб-кит основной же код у нас идёт в стоке Для чего нужен Set Timeout записываем сначала все вендерные префиксы и потом наши конечные свойства кирпичик из которого нужно соорудить вам вашу стенку когда отвечаете на такие вопросы важно
00:00:00 - 00:01:02
вспоминать о ивент-лупах наверное самый интересный инструмент Ну это же не так по факту изначально она так и было фактически Привет это натив сегодня вечером поговорим обойти не только ребят мы продолжаем нашу рубрику это разбор вопросов собеседования с момента выхода первого ролика мы четко понимали что точно будет продолжение и Да сегодня мы будем говорить про фронтен обещаю что сегодняшний ролик который мы снимем не будет скупиться на вопросы и на хорошие ответы Во всем мне поможет разобраться
00:00:30 - 00:01:30
мой гость это наш наставник по курсу фронтента и фронта девелопер из компании киберджайзер Стас евстафеев Я буду очень рад вашей поддержке поэтому лайки комментарии подписка обязательно приветствуются погнали [музыка] Здравствуйте Привет Да мы с тобой давно не виделись так получилось что мы с тобой давно знакомы поэтому это все равно сдам такой первый вопрос расскажу немножко про себя Сколько лет Откуда ты родом где-то учился учился ты со мной маленький спорт и Собственно как ты стала идти специалистом тент разработчикам
00:01:02 - 00:02:23
инженером инженер это звучит гордо на самом деле марка качество сразу родом Ну скажем так если брать общее все-таки родители были военными и помотала в свое время по миру тоже нормально родился в России прожил чуть в Грузии прожил не помню но знаю что прожил так можно себе маркер поставишь тогда еще был били себе зайтишников все дела Да вот и потом все сознательное уже все сознательно действовал в полоске прожил потом Юность в Борисове но я уже поступив там где мы с тобой вместе И проучились [музыка]
00:01:44 - 00:03:19
здесь уже так и остался к тому чтобы стать инженером довольно долго Шел я один из тех кто называется свитчеры сменил свой вид деятельности был дипломат стал айтишник Ну специалист по международным отношениям специалисты международным отношениям военной сфере отслужил если суммарными цифрами брать 10 лет в армии как бы это ни странно не звучало Я благодарен потому что немало опыта в какой-то момент решил что это у неё и решил перестроиться тем более к тому что быть инженером я стремился не то чтобы стремился но и в детстве с
00:02:38 - 00:04:07
компьютерами любил поковыряться еще и паскали быть и дец помню мы пока учились в универе ты прогой увлекался не особо нет наоборот там не было с учетом особенностей обучения и времени-то не было чем-то другим отвлекаться и потом решил переключиться соответственно суммарно наверное на то что перейти нормально с учетом того что я переключаюсь желанием сохранить а не убавить на старте заняло где-то года два полтора-два года Прежде чем я нашел нормально рабочее место и уже собственно говоря и стал фонтенд разработчиками
00:03:23 - 00:04:48
заканчивал курсы заканчивал еще обучение разные в основном дотягивает самообразование молчатубу у меня будет такой вопрос У тебя немножко нестандартный путь развития карьеры ты не пошел в крупной корпорации работать ты как бы себе сказал что ты будешь развиваться своим путем по сути я тебя где-то могу назвать фрилансером Но это будет Неправильно ты не фрилансер ты аутстафер давай это так да скорее когда поэтому мне будет интересно тебя конкретно узнать вообще насколько реально молодым специалистам
00:04:07 - 00:05:13
Давай понятно что Сейчас самое благоприятное состояние рынка и так далее но все же попасть на аутстафф со старта Какие есть в этом плюсы и если это возможно немножко за сервис Расскажи на который ты долго пояснить Что такое аутсорс чем они отличаются в основном это когда приходит в компанию говорят нам нужно сделать продукт от всех до сих делайте силами компании Этот проект выполняется задача закрывается и потом этот проект отдается и бывают случаи когда компания держит свой it-персонал своими усилиями справляться получается
00:04:41 - 00:05:58
но иногда случаются моменты что нужно расшириться какие-то дополнительные продукты выпустить какие-то свои вопросы позакрывать и в целом там налоговая оптимизация своих стран когда выгоднее держать специалистов из-за рубежа То есть фактически отличается тем что ты приходишь не выполнить конкретную задачу А тебя нанимают с целью работать на позиции инженеров фактически становится частью компании то есть единственными нюансами что ты все равно представитель другой компании который текущий момент занят занимает должность
00:05:20 - 00:06:31
с точки зрения молодых специалистов куда идти там больше в крупные либо мелкие компании Наверное все-таки я посоветовал стараться попасть изначально Junior специалистам наверное все таки лучше попадать крупные компании там получить знания достаточно менторов у компании достаточно ресурсов на то чтобы потратить именно на обучение Молотова специалиста где-то посередине скорее всего лучше попереключаться и в том числе поработать маленьких компаний все-таки Это Две разных вещи и два разных опыта если
00:05:56 - 00:07:01
большой компании это будет все размеренно неторопливое со своими обязанностями где ты даже будешь сидеть чтоб мне делать Я все сделал и тебе говорят ничего не делаю раз задачи и в маленьких компаниях своя скажем так ламповая Атмосфера здесь меньше этого бюрократия и соответственно там где меньше бюрократии меньшее количество людей ты выполняешь большее количество обязанностей и почему скорее начинающему там будет проблематичнее без самодисциплины какой-то хвататься нужно будет за все в том числе
00:06:29 - 00:07:40
не связано не только напрямую связанное с твоими должностными обязанностями скажем так то есть ты становишься таким минимальным человеком оркестром в зависимости от размеров компании и менеджмента это приобретает смертельные формы либо не смертельный но желая вырасти как специалист скорее то в такой обстановке следует побывать чтобы уметь распределять свои ресурсы свои возможности и в том числе расширить свой Кругозор за счет других сфер не только конкретно своего отдельного направления такое быть тебе вопрос проходил
00:07:04 - 00:08:09
собеседование было сложно где-то Да где-то нет собеседование собеседование рознь собеседование проваливается не всегда по причине того что где-то там не дотянул где-то ответил неправильно зачастую просто не находишь контакты с человеком либо ты видишь что компания тебе точно не подойдет и наоборот как бы вроде как и все ОК но не совсем но не совсем Ну давай тогда так мы сегодня поговорим про то что действительно важно Это прохождение собеседования особенно войти компании если мы говорим прохождение
00:07:37 - 00:08:53
собеседования у нас не с тобой направление фронтенд мы будем закрывать вопросы Скорее всего по большинству своем будет Junior Sky но тем не менее не важно Особенно для тех кто будет смотреть этот ролик это будет такая хорошая вспомогательная шпаргалка поэтому от меня максимально короткий Ясный вопрос от тебя развернуто доступный ответ длинный непонятный ты готов начать В чем разница в использовании cookies и Local storage для начала для чего вообще cookies Local Stories нужны давай данные между сессиями клиента Мы заходим
00:08:15 - 00:09:30
на страницу что-то поделали Обновили страницу закрыли браузер по ошибке нажали ход reload не хотелось бы Начинать все делать заново либо какие-то настройки хотелось бы один раз настроил и забыл и не всегда для этих вещей нужен сервер где эти настройки сохраняет Соответственно что Local Stories что куки что section storage и куча других нюансов в современном мире уже выскакивает возможности хранения данных на клиенте и те служат для хранения какой-либо информации и сразу говорить для нечувствительной информации Если вы
00:08:54 - 00:09:59
решите сохранить туда логин и пароль это будет очень плохой день зашифрованном виде доступной для всех особо даже технически не одаренных злоумышленников а разница между происходит cookies одна из самых первых возможностей храните какую-то либо информацию на клиенте соответственно одна из самых старейших возможностей размеры хранения 4 килобайта Если не ошибаюсь для куки и около 10 Мб для Local Store нормально разница существенная нужно понимать механику Почему 4 килобайта ограничения на кухне даны не просто так
00:09:26 - 00:10:46
зависимости от того с какой целью вы хотите информацию и Если желание эту информацию разделить между доменами разными допустим под доменами одного сайта то в этом случае вам кроме куки на помощь ничего не придет Local Stories работает в рамках вашего сайта и все под домены отдельное хранилище под домены под доменов соответственно еще одна отдельная хранилище скуки есть возможность сделать их кросс доменами и эта информация будет доступна на главном домене его поддомены в случае если вам это необходимо сделать у вас собственно
00:10:08 - 00:11:26
говоря и выбора немного второй момент куки всегда прикрепляются к запросу и куки ими может управлять сервер он может выставить Путина клиента может прочитать кубки с клиента Local storage Это чисто Вотчина JavaScript следующий момент работы скуками то же самое проистекается что не прикрепляется к запросу могут управляться сервером в них можно выставить специальный флаг и из доступны данные не будут но на любой запрос пользователя не прикрепляться будут Если вкратце то есть можно еще и дальше разбираться Не ну вообще вот это вот
00:10:47 - 00:12:03
этих пунктов по ответу обычно достаточно то есть достаточно ключевой момент что если вам необходимо чтобы эта информация в том числе мог управлять и сервер этой информации прикреплялась запросом и у вас Выбора нет кроме как cooki второй момент разница основная в объемах хранимых данных то есть понятно что локал сторож в тысячу раз больше чем хранит информацию и третий момент доступность между доменами у меня будет второй вопрос как решить проблему несовместимости некоторых CSS свойств в браузере и как
00:11:25 - 00:12:28
вообще в принципе можно сделать верстку кросс-браузер для начала откуда вообще несовместимость свойств произрастает произрастает вообще в чем смысл всей груз браузерский есть в 30 консорбциям которые разрабатывает различные документации стандарты которые касаются как HTML CSS всего мира разработки эти рекомендации они не зря называются рекомендациями поступают разработчикам браузером различные рекомендации носит живой характер постоянно обновляются как чем-то дополняются разработчики над браузерами
00:11:57 - 00:13:09
работают разные кто-то идет быстрее кому-то эти функции важны прямо здесь сейчас релизе кому-то они будут важны позже а кто-то чуть-чуть по-своему переосмыслил спецификацию сюда происходит зоопарк свойств и одно и то же свойство может чуть-чуть по-разному себя вести в разных браузерах где-то она может вообще не поддерживаться где-то на поддерживается частично и так далее соответственно Вы же со своей стороны делаете сайт и не знаете когда и На каком устройстве на каком В каком браузере ваш конечный клиент его откроет
00:12:33 - 00:13:39
и возникает естественное желание сделать ваш сайт максимально доступным для всех здесь на помощь приходит несколько техник в первую очередь есть специальный сайт который поможет вам разобраться как эти свойства вообще работают и насколько хорошо поддерживаются различными браузерамиском куда вы хотели посмотрели вели нужное вам свойства и всю информацию о поддержке вывели удобно основываясь на этой информации вы решаете Нужно ли использовать конкретно можно ли можно ли на вашем сайте использовать это конкретное свойство и
00:13:05 - 00:14:12
если можно И вам достаточно допустим что она будет поддерживаться последних версиях Хрома то Хрома Firefox и Сафари оно везде поддерживается одинаково то у вас и головной боли не возникает право первому не говорим первому ничего не говорит Хорошо что ты слышу Кстати что они вроде тоже собираются этот интегрировать или что-то такое не собирается интегрировать Может я ошибаюсь куда больше посмотрел посмотрел чуть попользовался но технология интересная но мы сейчас в сторону возникает зашли на ту же самый ресурс
00:13:38 - 00:14:46
посмотрели оказывается что наши свойства реализовано в Хроме как есть а вот в сафари либо в Firefox этого свойства такого нет но есть свое со своим префиксом здесь нужно рассказать так называемых вендерных префиксах то есть само свойство может быть реализовано браузером так как свойства из будущих модификаций спецификации которые разработал консольством На текущий момент Они там еще не стабилизированы конкретные решения не приняты но разработчики браузеров пошли вперед и для того чтобы в будущем не было конфликтов когда
00:14:23 - 00:15:32
стандарт будет готов для всех рекомендация для всех будет готова но уже в текущий момент можно было пользоваться конкретно в их браузере добавляется так называемые гендерный префикс если обязательно увидите странные свойства минус Мосс минус о минус веб-кит эти вендерные префиксы добавляются к свойству и ваши свойства начинает поддерживаться в разных браузерах то есть посмотрели в этом браузере можно без префикса в этом браузере только с префиксом в этом браузере is префиксом и без префикс А вот как
00:14:57 - 00:16:05
поступать ситуации когда она идет из префиксом без префикса здесь стандартная используется подход в том числе он используется в другом подходе в том числе Помним каскадности и наследования стилей то что определили позже то перезаписывается соответственно записываем сначала все вендерные префиксы и потом наши конечные свойства Таким образом мы себя страхуем на будущее что когда этот браузер начнет поддерживать спецификацию у нас будет использована правильно корректные свойства не то что было до этого не
00:15:31 - 00:16:33
поддерживается мне уже интересно следующий момент есть свойства градиенты допустим постепенно деградация так называемый сначала верстаете сайт оптимально со всеми самыми современными свойствами и в самые современные браузеры открывают ваш сайт на ура со всеми анимациями градиентами интересными закругленными всем чем угодно но не все браузеры чисто технически могут поддерживать те же самые допустим градиенты если мы берем верстку воду три назад это было в целом Боль то же самое идем по принципу наследования каскадных
00:16:01 - 00:17:09
стилей описываем наши свойства основное которое мы хотим использовать последний перед ним мы описываем фулбэки пусть не поддерживает Градиент background background Градиент такой он используется У нас все хорошо браузер его поддерживает если браузер его не поддерживает мы до этого то же самое свойство background но объявляем уже формате в хексформате неважно каким цветом и уже вместо нашего красивого градиента У нас будет какой-то какая-то однотонная заливка Но это все-таки лучше чем белое пятно на
00:16:36 - 00:17:49
само собой и в принципе наверное это основные такие моменты для того чтобы это все не прописывать руками есть сас лес при процессоры которые работают и в них сразу специальные плагинчики которые в том числе минифицируют ваш код и одна из их задач в том числе подставить вендерные префиксы для нужных свойств для браузеров которые не поддерживают значение по спецификации то есть в своем пишете просто одно свойство пропускаете ему через процедуру сборки и в результирующемся с асфале у вас получается
00:17:11 - 00:18:20
Каскад таких значений последний вопрос по боку верстки теги div И span в чем особенность Для чего используется откуда html5 стандартно живой появился новый блоки и спен фактически это семантически нейтральные блоки отсюда произрастает болезни многих разработчиков стать неделевых испытанных дефиспен хороший блоки используются тогда когда для этого нет подходящего семантического элемента в самом html5 версии либо вам конкретный контекст не важно просто так везде его впихивает тоже так себе они абсолютно
00:17:46 - 00:19:00
семантические нейтральны блочный элемент нашей отсюда и контекст их использования вам нужно сделать блог который не является ни хедером ни навигацией ни секций вашего сайта То есть просто какой-то кирпичик из которого нужно соорудить вам вашу стенку Используя это блочный элемент Используйте div вам нужно в строке пометить какие-то элементы которые не несут семантического тела оттенка выделить текст жирным потому что он стилистически должен быть жирным а не потому что это какая-то важная часть вашего предложения в этом случае
00:18:23 - 00:19:34
смотрите есть теги строчные которые вроде как производят тот же самый визуальный эффект это ем стронг и тому подобное строчные типы они визуально вроде как браузерах отображаются либо жирным либо курсивом но опять же это поведение не гарантируется оно общепринято но не гарантируется не удивляйтесь если в будущем браузер изменило полагались что текст обернут вас будет жирным а потом вдруг резко перестал семантические теги которые несут акцент на том что это важное содержимое вашего приложения в зависимости от того
00:19:00 - 00:20:09
скринридер будет его читать он сделает на этом либо паузу либо усилит интонацию увеличивает громкость приостановится все что угодно это сделано именно для семантической разметки если вам стилистически необходимо разбить строку на выделили где-то жирным красненьким подкрасить цветом вот оборачиваете в texpen его используете GS это готов различие между конст ЛЭТ Вар и почему варди прикрепит но так сказать чтобы совсем не приклеить это будет не совсем правильно скорее он такой грубо Да это будет грубо Var
00:19:35 - 00:20:42
нет смысла его использовать он поддерживается движками но его использование несет за собой ряд не совсем очевидных решений и ограничений которые проистекают в первую очередь это развлечение различия по области Вы если начнете отвечать на этот вопрос для начала определитесь что какие области видимости у нас существуют глобальная Блочная и функционально и соответственно первое Главное отличие между этими вариантами объявления переменных это их области видимость если у Вар у нас функциональная глобальная
00:20:08 - 00:21:19
область видимости то const LED это Блочная область видимости соответственно это делает намного проще написание кодов тех же самых циклах не стоит останавливаться легко погуглить те же самые примеры со счетчиком цикл счетчика и консоль Лог который выводит вам значение счетчика Просто если вы счётчик объявили через ворон вам выведет последнее значение если вы объявили его через LED через LED соответственно в рамках блока будет выводить нужное значение в нужное время это такой самый базовый пример который прямо
00:20:44 - 00:22:01
на первый жестоко запроса поиска в Google вы его и найдете второй момент это поведение всплытия Если вы объявляете Var поведение и где-то объявляете его в конце вашего файла и в самом начале вашего файла Обращайтесь к этой переменной Никакой ошибки не произойдет вас просто переменная выльется как ND она уже будет определена ее определение всплывает на самый верхний уровень значение уже присваивается конкретно там где вы и написали поведение иное у них и объявления сама переменные инициализация переменной и
00:21:22 - 00:22:42
присваивание первоначального значения происходит моменте объявления Никакого вспыльтия не будет соответственно вы намного раньше найдете свою ошибку выскакивает плюс бар позволяет вам скажем так изначально джаз был Для чего сделан для того чтобы как можно было проще написать всем страничку чтобы кто угодно владелец кофейни мог сесть написать самый простенький скрипт для себя это же не так по факту изначально она так и было практически оно и сейчас так есть зависит не сложно написать самый простенький скрипт сложно
00:22:03 - 00:23:14
потом его поддерживать Вот и когда из маленького скрипта растет большое приложение тогда становится важным проблема архитектуры и всех тонкости нюансов знания углублений если вам нужно написать самый простенький скептик на ваш сайт поверьте вы справитесь и без помощи профессионального программиста достаточно посидеть почитать Было бы желание время конечно он все так же остается крайне низкий порог входа вырос порог входа на корпоративные решения на какие-то глобальные платформы там да там объем знаний теперь намного намного выше
00:22:39 - 00:23:41
чем то же самое было 10 лет назад Вот и соответственно браузер Всеми силами пытается вас спасти от ошибки То есть даже если вы что-то написали неправильно браузер пытается это интерпретировать Так что все хорошо отсюда и поведение варварской выскакивает Если вы написали даже несколько раз одну переменную с одним и тем же названием через War он вам никаких ошибок не выведет Ваш скрипт продолжит работать до конца упорно и только вот не очевидное поведение вашего скрипта будет говорить о том что пошло
00:23:11 - 00:24:15
не так он соответственно не позволит вам переназначить заново объявить константу либо переменную с тем самым а кроме того War также помимо если 2 объявлены глобальной области видимости создает на глобальном объекте соответствующее свойство Если вы напишете Windows и название вашей переменной вы ее увидите если это переменная была объявлена через Varta cons опять же такого не происходит и второй момент чем удобнее исходя был один способ объявления переменной и все неважно что это Константа либо переменная которую вы дальше по коду
00:23:42 - 00:24:55
меняется она является всегда через оттуда ушли на всякие впечатление в виде того что константы всегда в аппер кейсе именуем переменные всегда лазер кейсе и тому подобное в зависимости от того как мы написали мы могли ожидать что это будет константы либо переменные которые дальше поменяется ну и соответственно не все следовали стандартами иногда носила интересные сюрпризы позволяет вам объявили назначили значение все дальше Во время исполнения программы это ничего не изменено быть не может LED соответственно позволяет
00:24:20 - 00:25:25
вам указать что это переменная возможно где-то дальше по коду что-то повлияет на ее значение будет изменено и отсюда уже строить понимание работы вашего кода соответственно и Когда Вы начинаете писать Вашу программу Старайтесь максимально использовать константы и минимально переменные то есть Объявлять переменные с помощью LED только тогда когда вы действительно вам необходимо будет изменить ее значение они просто потому что вы знаете что есть для чего нужен сет тайм-аут тайм-аут нужен для того чтобы код какой-то участок нашего
00:24:51 - 00:25:52
кода исполнился приблизительно через то количество миллисекунд которое мы напишем важный момент приблизительно приблизительно именно приблизительно это не значит что если вы написали тысячу миллисекунд и через одну секунду что у вас происходит срабатывает ваш код как есть все останавливается срабатывает нет такого не будет это значит что где-то в диапазоне через тысячу миллисекунд браузер будет искать окно чтобы ваш код вставить когда отвечаете на такие вопросы важно вспоминать о ивент-лупах как что у нас же с это язык однопоточный
00:25:23 - 00:26:42
несколькими процессами выполняется один поток существует соответственно мы устанавливаем это значение у нас уходят в браузерные API желание что мы исполним его там через тока количество времени когда мы сделали браузер отсчитывает этот промежуток времени помещает нашу функцию в блок макротасок готова к исполнению основной же код у нас идет в стоке как только стек очищается браузер начинает движок начинает заглядывать в микро tasky пусто макро-тасках готов наш тайм-аут будем его исполнять соответственно отсюда и проистекает
00:26:01 - 00:27:25
почему я говорю приблизительно если у нас в это время в стоке находится задача которая исполняется Ну представим что он исполняется 10 секунд и в рамках ее исполнения мы выставляли тайм-аут который полностью через три секунды в самом начале но так как все 10 секунд наш стек будет забит наша макро таска принадлежит лупе ровненько до того момента пока не исполнится основной поток он у нас исполнился и только после этого Несмотря на то что говорили через три секунды фактически у нас получится через 10 Стас частный
00:26:48 - 00:27:50
случай с этой аут с нулем в основном это Костыль с этой в основном это Костыль Если вы видите такой код то с большей долей вероятности Не всегда конечно костылей К сожалению подпирают много программного обеспечения иногда проще использовать костыли чем выстраивать правильную архитектуру всего вашего предложения но в большинстве случаев вы сможете перечислять по-другому не используется Зачем с этой Маусом у нас используется происходящее того самого вам нужно чтобы ваш код исполнился не сразу по достижению строчки сначала
00:27:19 - 00:28:42
пропустил весь код до конца нашего потока и только потом исполнился Когда это можно может быть нужно допустим у вас есть синхронный код кнопка вы нажимаете на кнопку и начинает исполняться вот такой банальный пример костыли встретиться собственно говоря вы нажимаете на кнопку меняется текст на кнопки в скрипте меняете текст на кнопки loading и запускаете ваш тяжелый синхронный скрипт который там длится 3 секунды и после этого меняется текст кнопки назад соответственно если написали лоб что у вас получится
00:28:01 - 00:29:01
поток ставит в очередь изменить текст кнопки на loading начинает исполнять 10-секундные скрипт тяжелый соответственно свободного окна нет для того чтобы обновить содержимое кнопки после этого он заканчивает исполнение и выставляет значение кнопки надо и своего лоудинка так и не увидели Где же он оказался соответственно здесь в этот момент свою задачу Вы можете отложить выставление кнопки текста изменения отложить все тайм-аутом 0 То есть он проскочит попадет исполнит изменит Наш текст выполнит нашу
00:28:31 - 00:29:53
пропустит основной поток с этой мало 0 комплитет вы потом выставляете и изменит на комплект в этом случае Вы видите мигнувшую кнопку основные методы перебора массивов и объектов Ох Чем сильнее развивается язык тем больше методов этого перебора становится если самый банальный самый простой часто встречаемый способ перебор с помощью цикла мы заводим счетчик заводим указываем что это счетчик изменяется до значения не превышающим для нашего массива и соответственно через индекс Обращаемся к определенным элементам массива и
00:29:12 - 00:30:23
спокойно получаем его значение если мы уже возьмем наш es5 и 6 и далее У нас появляется интересные инструменты в том числе встроенные сам язык сам браузер не надо никакие дополнительные использовать инструменты получить метод массива Forge если вам не нужно получать В итоге перебор какой-то новый массив либо трансформировать его в какой-то старый то один из способов пройтись по всем элементам следующий момент использования специального цикла фуров он чуть проще в описании чем счетчик for const элемент Off ваш массив И
00:29:50 - 00:31:08
соответственно внутри этого цикла Вы имеете доступ каждому элементу вашего массива Может через него перебраться а здесь уже на слух будет сложно рассказать о нюансах это лучше делать на примерах кода разбираться то есть основные методы перебора с помощью цикла с помощью стройных методов сам массив один из них foratch и с помощью циклофоров и дальше уже зависимости от того что перебор массива с целью С какой целью вы его делаете если делаете целью отфильтровать получить другой массив То есть Вам не нужны ни цикла ни врач уже
00:30:29 - 00:31:34
есть встроенный метод фильтр который отфильтрует только те элементы которые вам нужны сдавать вам нужно преобразовать его в объект либо в строку Не суть важно в любые другие варианты Используйте специальный метод редис который доступен наш массив нужно получить из этого массива массив такой же длины но провести какие-то операции с каждым элементом допустим массив в котором будут квадратных чисел которые есть в вашем исходном У вас есть метод Ну и со всеми этими методами их постоянно и наизусть получить сложно Да
00:31:02 - 00:32:15
в принципе не нужен в любом случае на спецификацию обращайте внимание есть одна из самых неплохих документаций которые я с ним Ден открываете массив и смотрите какие методы у него присутствуют в первую очередь Вам всегда нужно выяснять вашу задачу с какой целью вы это делаете как только вы понимаете что вы хотите сделать Вам довольно просто загуглить ответ на ваше решение когда вы не понимаете что вы хотите сделать вам ничего и вы не понимаете никак не Что вы хотите сделать Задача в квадрате согласен Google вам будет бросать все
00:31:38 - 00:32:41
любые ссылки кроме как нужный поэтому вы сформулируете вопрос так давай нам тоже важный вопрос Что такое Запоминание или минимализация это одна из техник которая позволяет нам уменьшить нагрузку вычислительную нагрузку на браузер допустим у нас есть функция которая выполняет очень сложные вычисления очень долгие вычисления но при этом довольно часто называется одними теми же аргументами один и тот же нам не нужно проводить последовательности действий мы так знаем до этого исполняли Итак знаем какой
00:32:09 - 00:33:19
результат при этих аргументов у нас получится так вот одна из техник Чтобы избежать когда мы исходя из наших параметров входных сравниваем параметр и Если результат выполнения этой функции может это сохраняли вместо того чтобы вычислять значение заново Мы берем данные из нашего каша а так как у нас Джесси все объект довольно просто эту реализацию на самой функции и написать то есть сравниваем входные аргументы на само же на самом же объект функции наименование функции подвешиваем кэш результаты
00:32:47 - 00:33:59
вычисления Обращаемся если были такие вычисления возвращаем методом retur те значения которые были нету все дальше идем по ходу выполняем вычисление и после того как мы эти вычисления выполнили не забываем записать их в кэш чтобы на следующий вызов сэкономить нам и время и ресурсы Какая Ключевая особенность реакторендере такой интересный вопрос собственно говоря сам рендер есть Ключевая особенность и последовательность рендера Когда происходит рендер компоненты компонентов и тому подобное важно вспомнить как у
00:33:23 - 00:34:30
нас разворачивается наш Эндер У нас есть родительский дочерние компоненты разметка внутри разметки реально на основе методы рендер грубо говоря это вызов то же самое функции под капотом нашего рендера лежат все те же самые методы Create Element Set атрибут и тому подобные вещи только за счет своей магии виртуального дома внутри реакции проводят оптимизацию избавляет нас от головной боли создание элементов вручную через браузера позволяет нам пользоваться такой разметкой как GSX соответственно на основе вызова функции у нас параметры
00:33:57 - 00:35:07
бывают разные внутреннее состояние элементов У нас есть какие-то свойства которые могут пробрасываться в наши компонент Извне в зависимости от того меняются эти свойства не меняются реакции решает нужно перерисовать компонент или не нужно Если нужно вызывая метод render он вызвался выполняя построение нашего виртуального дерева сравниваем с текущим состоянием и разницу забиваем дом в дом деле если ничего не изменилось дом дерево не трогаем все хорошо рендер проходит Как как считает ряд Когда у нас у него состояние
00:34:32 - 00:35:42
состояние либо свойства изменились обычная поверхность сравнения если в случае примите его примите его сравниваться по значению ссылочные типы данных у нас сравниваются по ссылке соответственно Если вы объявили объект прямо свойства на каждый рендер у вас будет создаваться новая ссылка на объект несмотря на что и там и там визуально кажется пустым у вас будет происходить все равно потому что два пустых объекта не равны друг другу заново созданы они ссылаются на разную область продолжаем Для чего в реакции
00:35:07 - 00:36:06
используется реакция роутер дом для чего нужен ролтинг и что такое опциональный ролтинг отличная тема для лекции вообще клиентским роутингом то есть сам по себе библиотека никаких инструментов для того как маршрутизировать как у нас там меняется URL он из-под капота не дает вы вольны в своем выборе выбрать все что вам нравится нравится реакция роутер он то есть реактор роутер Это одна из библиотек которая позволяет вам организовать клиентскую маршрутизацию Что значит клиентская маршрутизация изначально как все наши
00:35:36 - 00:36:48
странички строились отправляются запрос на сервер сервер строит HTML файл CSS и отправляет нам готовую страницу на браузер отрисовались посмотрели пользователи называют какую-то кнопку ссылку опять уходит запрос на сервер мы переходим на эту страничку грубо говоря опять строится вся страничка загружается все данные и даже если у нас в результате нажатия там изменялось только одно поле запросом нам приходилось перерисовывать перезапрашивать всю страницу целиком отсюда и произошла концепция Single page
00:36:19 - 00:37:27
Application фактически Мы всегда переходим по одному и тому же урону получаем один и тот же индекс HTML файл и отрисовываем наше приложение так вот так как мы всегда получаем один и тот же html-файл и перерисовываем только его части за счет запроса к серверу получения ответа от сервера технология получили данные у нас изменилась имя пользователя мы Обновили наше имя и теперь наше имя которое отображается в шапке сайта должно тоже измениться вместо того чтобы перерисовывать всю страничку Мы точно обновляем именно этот
00:36:52 - 00:38:03
бокс именно с этим именем только это свойство И как же браузер в этом случае с индексом HTML нашим понять нашему времени браузеру нашему приложению Как нам понять какую компонент какой элемент И вообще что за страницу нам отрисовывать какую совокупность элементов мы хотим видеть на этой странице в зависимости в этом случае к нам приходят на помощь решения для клиентского роутинга Что значит клиентский роутинг изменения ссылки в угле браузера поисковой строке адресная строка браузера изменение этого орла не
00:37:28 - 00:38:40
приводят к новому запросу на сервер а обрабатывается нашим скриптом так вот реактор дома как раз реактор роутер и реактор роутер дом это его реализация для браузеров сам реактор может использоваться не только в браузерах но и в мобильных приложениях реакции у нас теперь уже везде кросс кроссплатформенный и реактор роутер дом это конкретная реализация клиентского роутера для браузера и теперь эту библиотека смотрит какой у нас URL находится в адресной строке за счет конфигурации которая мы описали через
00:38:04 - 00:39:21
специальные элементы раунд и роутер он смотрит что по этому роуту мы отрисовываем такой-то такой-то экран с таким-то набором компонентов соответственно часто видели браузерах строки вида наш домен слэш юзер слэш айди какие какой-то там набор цифр который генерирует Вам страничку того пользователя которого вы хотели посмотреть естественно если мы руками начнем забивать все айтишники нам никакого пространства не хватит и предсказать айтишники мы не можем Здесь нам подходят реактор дома предоставляет в помощь
00:38:44 - 00:39:57
переменные в роуте если мы объявляем наш Rose не статическим текстом А одну из его частей Мы объявляем как переменную и в нее будет записано то значение в руле которое приходит с помощью этого значения соответственно мы делаем правильный запрос на сервер за правильным пользователями и рисуем человеку конечному нашему потребителю правильно экранчик это переменный и там если опциональный опциональный опциональные параметры нас может быть страничка юзер слэш ID и users/h и просто users если мы пользователь не вел
00:39:20 - 00:40:42
айтишник пользователя у нас отрисовывается просто страничка которая рисует поиск по пользователям топ-10 пользователей нашего сайта Не суть важно а если он вводит айтишник то рисуется конкретная информация об этом пользователе страничка соответственно у нас в Орле может присутствовать а может не присутствовать наш айдишник и чтобы нашу URL правильный рот отрисовывал правильные элементы у нас там общая шапка присутствует ее и там отрисовывать надо чтобы этот элемент отрисовывался и по Орлу где ID присутствует и по урлу
00:40:01 - 00:41:13
где не присутствует нам приходят на помощь так вопросик если то есть обозначили что этот элемент может присутствовать А может и нет но этот элемент страничку отрисовываю в любом случае не суть ты упоминал Что такое SPA если более чуть-чуть повторюсь ударяюсь в историю запрос на сервер отрисовка страница целиком нужно ввели форму Обновили данные опять запрос на сервер опять отрисовка страницы целиком даже если в результате исполнения той или иной формы воздействия У нас меняется только информация пользователе где-то в шапке
00:40:37 - 00:41:57
сайта вся остальная часть остается неизменной либо у нас табличка посередине и фильтруется теми записями параметрами которые мы ввели Для всего этого приходилось ходить на сервер перерисовывать заново на страничку это неэффективно соответственно есть такая технология как Аякс и синглпейдж Application как раз таки ее и реализует что такое Аякс динамические обновление наших страниц асинхронно с помощью запроса на сервер с помощью уже встроенных инструментов если брать под ремни квест обертки над ним делали либо
00:41:21 - 00:42:24
с более современный вариант фич говорить о том что одно лучше другого опять же здесь останусь просто могут на этом доковырять максимально 4 квестов вещь Если есть что может там и не нужен уже 4 класс нет задач для простеньких запросов на сервер естественно не нужно родителей объектом можно использовать и в большин большинстве случаев вам его выше крыши соответственно xml 4 квест позволяет отслеживать статус нашего запроса Какие статус он проходит вариант Если вам нужно отобразить динамическую загрузку
00:41:52 - 00:43:03
динамическую загрузку на сервер с сервиса Какие состояния происходят реагировать на это причем здесь уже не поможет придется лезть в дебри и рисовать его заново и то же самое идет как следствие вопрос есть еще же библиотека аксиос которая собственно говоря если я не ошибаюсь и воодушевило разработчиков браузеров и спецификации создать собственно фич запрос так если теперь есть фею встроен везде и поддерживается хорошо Так может и аксиус нам не нужен возможно Вам он действительно и не нужен То есть не нужно лепить потому что
00:42:27 - 00:43:44
Ну так делают все и везде не зависит от задач если вас там идут дополнительные задачи по парсингу ответа по встроенные инструменты обработки статусов ошибок выбрасывания исключений с тем же самым фичем вам все равно придется докручивать свои обработки часть из этого будет вообще все сделано если вам сделать простенький запросик и простенький распарсить ради этого тянуть библиотеку там военное количество килобайт Ну зачем смысла нет опять же определяемся задачей что хотим сделать и потом уже выбираем
00:43:06 - 00:44:04
под нее инструмент Это я буду часто говорить на любых вопросах в первую очередь Вам всегда нужно понять что вы хотите сделать Не в терминологии года а в терминологии той задачи последовательности шагов которые вы хотите выполнить и какой результат вы хотите получить и только после этого стараться перекладывать этот алгоритм вход Если вы их объединили два этих подхода нас будут проблемы мы уже начали говорить про реакт собственно Что такое react и сингл-то еще прикрепишь то есть реакция библиотека удобный инструмент который
00:43:35 - 00:44:43
позволяет нам реализовать компонентные подходы и очень удобно организовать наш код по частям по логическим блокам на нашей страничке рисовать работать с ним удобно прячет от нас всю механику обновления дом дерева реализует сложный алгоритмы чтобы это было чуть более эффективно чем если мы сами написали реализуют проблемы обновления дома в любой точке он помогает нам с этим бороться и использовать наиболее эффективные вещи и в то же время они накладывает на нас никаких ограничений потому как мы должны
00:44:08 - 00:45:17
это делать то есть это одновременно и плюс и минус реакта если мы будем сравнивать реакцию регуляра стингляр у нас будет выступать в роли фреймворк вот там из коробки все решения для роутинга для запросов на сервер и различных сторонних сервисов они большинство из них уже есть прямо из коробки но при этом Вы должны четко следовать той структуре кода которую вам декларирует регулятор также вам декорировать ничего подключили Как вы используете Ваши проблемы нужен роутинг подключили роутинг не нужен роутинг не подключается
00:44:43 - 00:45:41
не нравится тот который есть выбираете тот который Вам нравится ни один из существующих не нравится пишите собственно если любите велосипеды и очень удобная вещь разметкой которую нам реакт вот здесь я боюсь ошибиться действительно реакт был ее родоначальником с разметкой вы увидите это html-код HTML подобный код в вашем JS и он под собой скрывает все эти страшные докинуть Create Elements это атрибут тому подобные вещи за счет специального транспайлера он потом превращается в тот же самый код который Вы бы там писали
00:45:12 - 00:46:16
тонами у вас превращается в один маленький интересный элементик Вот react это клиентская библиотека которая позволяет вам работать над созданием интерфейсов не задумываясь над тем как это под капотом это все реализовать переложить физическое оснащение и очень удобно позволяет это разбивать на структурные блоки и работать изолированы хотите сделать элемент кнопку У нас есть компонент кнопки вылазить по этой кнопке знаете что в этом элементе вы что-то поменяли поменяли только эту кнопку и там где она используется она тоже
00:45:48 - 00:46:48
изменится но при этом не сломается ничего другого что такое крут Какие виды запросов отвечают за каждый параметр Круто Вот и здесь даже в твоем вопросе есть такой маленький нюанс крут Кейт апдейт это операции которые мы можем выполнять нашими сущностями И вопрос в том что замачивать их один на один с типами запросов один к одному не стоит если мы по типами запросов определяем как http глаголы понятия то есть пост ГЭТ патч пут делиться просто это не значит что каждый из этих типов http запросов соответствует своей букве в терминологии
00:46:19 - 00:47:37
крут Create Мы хотим создать новую сущность которая не существовала до этого с точки зрения запросов Мы это можем реализовать с помощью запроса пост и В некоторых случаях пут здесь уже разбираемся в семантике возможно Кстати я не знаю прикреплять ссылки там есть неплохие статьи многих людей которые можно Ты мне просто Можешь потом прислать Я в описании к ролику надо посмотреть насколько есть такие которые разбирают именно семантическое значение каждого запроса и путь это запрос на обновление каких-либо
00:46:58 - 00:48:10
данных либо создание новых но при этом есть важные семантическая особенность в том что данные туда отправляются целиком и полностью То есть если у нас объекте стоит из трех полей мы отправим запрос с помощью метода Put то у нас Мы должны отправить все три поля то Поля которые мы не отправили будет перезаписано в null соответственно если мы отправляем путь сущность который не существовала она будет создана пост запрос существует уже тоже для того чтобы создать наши данные соответственно вот вам буковка си и два метода которые
00:47:33 - 00:48:41
вы можете для этого использовать пост и запрос Рит Рид само по себе просто прочитать один на один mapping срабатывает гет запрос Get запроса никакого влияния на сервере не оказывают на сущность не производит никаких изменений не в базе Ни в чем мы получаем данные просто серверы по этому типу запросу вот наш ритмед запрос апдейт соответственно апдейт отвечает за то что у нас сущность на сервере уже существует мы хотим изменить какие-то детали изменить имя пользователя пароля пользователя поменять какое-то описание
00:48:08 - 00:49:19
себе биография все что угодно пользователь может создали у нас работает вот мы хотим изменить данные его профиль здесь мы это есть метод мы используем апдейт в этом случае опять же у нас mapping исходя из того что я рассказывал про то же самое creat идет из двух запросов это может быть и пуд в этом случае мы будем отправлять полностью всю сущность для того чтобы обновить данные даже одного поля изменяем одно поле полностью с этим есть специальные метод патч исходя даже из самого названия патч многие Геймеры должны быть знакомы это
00:48:44 - 00:49:53
исправление чего-то можем отправить мы можем отправить части нашего объекта и будут изменять только те части которые мы отправили то что мы не отправили останется как есть ну и соответственно метод Delete в идеале ему соответствует соответствующий запрос теперь там присутствует Теперь весь этот зверинец это все хорошо все эти методы но опять же сильно зависит от реализации вашего бэка А если мы возьмем граффик вверх сервер крут операции это круто операции работает через пост Все операции которые
00:49:18 - 00:50:21
есть вы будете отправлять на сервер и в том числе ошибки получать со статус годами одинаковыми и использовать для этого метод пост но при этом под капотом можно смотреть монология и мутации и типы этих мутаций они уже зависят уже будет рассматриваться не на теперь запросы А на тот API который предоставляет графики и опять же есть ленивые разработчики или не ленивые не всегда есть необходимость следовать догме и вот у нас есть типы htp-запросов и все они должны быть реализованы только так и не начали работать не надо у вас
00:49:55 - 00:51:03
не сложное приложение и он будет дольше бороться с настройкой правильных методов Возможно либо вам нужно это быстренько выкатить а потом сделать нормально Вот то два метода используют гетый пост в зависимости от того какие параметры внутри отправили эти операции используют Главное чтобы единственная при реализации где-то технически не может быть сделан Так что мутировал данные совсем уже нужно возвращаться Какие типы данных поддерживаются в тайп скептим давайте начнем с того что будем считать что знают что такое вообще Для
00:50:29 - 00:51:33
чего нужен типы данных как минимум поддерживать те же самые типы которые есть Джесси это примитивные типы данных строка число Ну тип Ну типа defind символ тип символ возможно еще каких-то там неспримитивных задач на ходу перечислить То есть все типы которые поддерживают жизнь поддерживает и тайпскрипт и Ключевая особенность Он предлагает ряд своих типов для простоты упрощения написания кода верификации его исполнения статического анализа для того чтобы избежать ошибок и для того чтобы облегчить вообще работу с приложением
00:51:02 - 00:52:24
прочитать наш код для разработчиков самое глобальное вообще все типы реакции являются типом потомками название самой себя происходит Эни Это все что угодно здесь строка и объекты массив все что захотите все остальные являются его потомками расширением так вот примитивные которые дополняет есть такой используется функции функции когда мы хотим пометить что эта функция результат из этой функции мы не хотим ничего возвращать если сам у нас возвращает оттуда значение undefine Даже если мы явное не прописали ретон с помощью тайпскрипта мы
00:51:43 - 00:52:55
можем пометить что воет говорит о том что несмотря на что туда undefinet вернулся это не значит что это то что мы хотели воет значит это просто какая-то процедура мы выполнили последовательность операции там отправили нужные запросы либо сделали нужные апдейты и все результатами этой функции пользоваться не стоит и они никакой нагрузки смысловой Они несут есть интересный тип Невер тип никогда используется тип значение Никогда это для того чтобы посечь ветки кода которые никогда не будут исполнены то есть
00:52:18 - 00:53:28
текущая комбинация невозможна тип не может быть одновременно и числом и объектом допустим числом и строкой Вот в этих случаях результирующий тип для своего внутреннего анализа в том числе говорит что такого случая не может быть Never соответственно если вас выскочила такая ошибка Ищите где у вас конфликты типов идут иногда явно Невер указывается для того чтобы сделать сложный Юнион типа то есть в одном объекте у вас присутствует три свойства и в другом три свойства и вы хотите сделать комбинированный Тип
00:52:53 - 00:54:06
который в одном случае это будет строка А втором никогда в жизни этой строки не должно быть название этого свойства с этим ключом вот ваш номер приходит вам на помощь написали что когда вы начнете описывать этот объект использовать в коде пытаетесь задать значение в объекте с ключом которому вы представляете вас начнет ругаться такого ключа просто в объекте быть не должно не должно и не может что у нас есть еще из интересных типов которые нам предоставляет typescript Ну отдыхают это все у нас идет из разряда
00:53:31 - 00:54:41
Джесса свои специфические и не воет Невер Ну и дальше уже идут комбинированные типы и дженерики которые дженерики на самые интересные инструменты скрипта рассказывай в этом был мой вопрос Отлично дженерик Это самый интересный вариант работы одновременно очень сложен почему-то для начинающих понять все эти конструкции Хотя фактически Что такое это статический анализатор кода он тоже выполняет ряд действий для того чтобы сказать Какой тип переменной получается в том или ином случае Иногда у нас возникает функции допустим
00:54:05 - 00:55:22
функция фильтрация по объекту значение отфильтровать из массива все отдыхают все ну значение либо все которые не подходят при этом нам Не суть важно Какие типы других переменных там присутствует Что может быть либо строки и получился и соответственно функция которая фильтрует данные говорит оставить только строки а второй массив у нас идет числа и тоже записался туда можно записаться вторая функция которая фильтруют массив с числами и исключает из него и в случае скриптом если мы практипизировали явно используя что
00:54:44 - 00:56:04
входной параметр у нас массив строк либо массив состоящий из строк либо типа у составных элементов может быть а на выходе получается массив строк логика внутренняя реализация функции у нас и там и там одна и та же что у нас массив набор либо у нас массив строк find мы отфильтровываем там отдыхаем в случае если мы написали тип явно для функции для того чтобы фильтровать массив строк массив чисел эту функцию переиспользоваться мы уже не можем на нас typescript начнет ругаться я жду массив со строками даешь числами
00:55:24 - 00:56:38
отдыхает Несмотря на то что поведение повторюсь одинаково здесь на помощь нам подойдет дженерик дженерик мы можем рассматривать как своего рода функцию которая на вход принимает какой-то аргумент и потом его подставляет эти части которые мы в типе соответственно в данном случае у нас качестве дженерика будет выступать в качестве типа будет выступать либо там массив строк и underfight либо массив там переданных чисел можем усложнить наш тип он будет наследоваться от того Типа того аргумента который передает и вот здесь
00:56:01 - 00:57:09
придет на помощь такая запись с знаками меньше больше и посередине там объявления этой переменной собственно и аргументы этой функции которые вы будете использовать ее использовать И вам помогает переиспользовать эту функцию на вас будет В зависимости от того передали вы массив строк либо undefinet вас на выход получится массив строк передали туда массив чистил либо скрипт применит ваш дженерик посчитает и результирующий будет массив чисел То есть Вам сократит написание кода и упрощение кода и сама типизация станет более гибкой и
00:56:35 - 00:57:40
динамичной с руками вам ничего не нужно будет приводить кастовать типы сложные если возьмете код в самом начале есть такое понятие кастинг У вас есть тип который в одном случае получается функция возвращает какой-то результат в другом случае функции такой это возвращает результат Если вы напишите простыми то передаете массив туда опять же строк возвращает массив строк передается массив чисел возвращает массив чисел функции соответственно Если вы написали описываете этот тип используя просто Union типы на вход вам
00:57:08 - 00:58:23
или массив строк или массив чисел а на выход вам функцию отдает или массив строк или массив чисел соответственно применяя эту функцию typescript Когда вы примените вашу функцию он не будет читать ваш код Он не понимает что ему нужно взять тот тип который вы передаете функцию что возвращаемый тип от него как-то зависит Ему сказали что приняли массив либо и функция возвращает массив либо о том что эти два значения как-то пересекаются как-то соединены вы ничего не указали соответственно применяете вашу функцию
00:57:45 - 00:58:48
передаете массив строк применили функцию и на выходе получается проблемы у вас Теперь ваша переменная которую вы после применения нашей функции она теперь либо массив чисел либо массив строк Хотя по коду явно видно что здесь все протезировано все отлично мы передали туда массив чисел и вот здесь опять же на помощь вам приходит дженерик джиналика писали переменный аргументы чтобы массив там Т - это экстенс string или numberry аргумент который передается массив T и соответственно такого же типа массив у
00:58:17 - 00:59:28
вас возвращает из функций тоже там Используйте место уже записи жесткой string Ray либо наборе использовать этот аргумент который вы продекларировали дженнике переменную грубо говоря очень часто пример когда выступает заглавная буква Т И вот здесь вы уже указали явную связь что массив входной параметр вашей функции от входного параметров вашей функции напрямую зависит результат возвращаем И когда вы применяете вашу функцию входа передали массив строк получили на выходе массив строку передали массив чисел typescript знает
00:58:53 - 01:00:00
что на выходе будет массив чисел а не массив строк значительно упрощает вам жизнь Спасибо большое Ну что друзья Я надеюсь сегодняшнем ролике те кто пойдут скоро на собеседование точно получит хорошую поддержку и опору в информационном поле те кто только готовятся Пожалуйста смотрите этот ролик и предыдущий ролик вообще Подписывайтесь на наш канал
какой бы у тебя вопрос Ты же проходил собеседование Ты становишься таким минимальным человеком оркестром подключили Как вы используете Ваши проблемы разработчики над браузерами работают разные основные методы перебора массивов и объектов всегда нужно понять что вы хотите сделать минус о минус веб-кит основной же код у нас идёт в стоке Для чего нужен Set Timeout записываем сначала все вендерные префиксы и потом наши конечные свойства кирпичик из которого нужно соорудить вам вашу стенку когда отвечаете на такие вопросы важно
00:00:00 - 00:01:02
вспоминать о ивент-лупах наверное самый интересный инструмент Ну это же не так по факту изначально она так и было фактически Привет это натив сегодня вечером поговорим обойти не только ребят мы продолжаем нашу рубрику это разбор вопросов собеседования с момента выхода первого ролика мы четко понимали что точно будет продолжение и Да сегодня мы будем говорить про фронтен обещаю что сегодняшний ролик который мы снимем не будет скупиться на вопросы и на хорошие ответы Во всем мне поможет разобраться
00:00:30 - 00:01:30
мой гость это наш наставник по курсу фронтента и фронта девелопер из компании киберджайзер Стас евстафеев Я буду очень рад вашей поддержке поэтому лайки комментарии подписка обязательно приветствуются погнали [музыка] Здравствуйте Привет Да мы с тобой давно не виделись так получилось что мы с тобой давно знакомы поэтому это все равно сдам такой первый вопрос расскажу немножко про себя Сколько лет Откуда ты родом где-то учился учился ты со мной маленький спорт и Собственно как ты стала идти специалистом тент разработчикам
00:01:02 - 00:02:23
инженером инженер это звучит гордо на самом деле марка качество сразу родом Ну скажем так если брать общее все-таки родители были военными и помотала в свое время по миру тоже нормально родился в России прожил чуть в Грузии прожил не помню но знаю что прожил так можно себе маркер поставишь тогда еще был били себе зайтишников все дела Да вот и потом все сознательное уже все сознательно действовал в полоске прожил потом Юность в Борисове но я уже поступив там где мы с тобой вместе И проучились [музыка]
00:01:44 - 00:03:19
здесь уже так и остался к тому чтобы стать инженером довольно долго Шел я один из тех кто называется свитчеры сменил свой вид деятельности был дипломат стал айтишник Ну специалист по международным отношениям специалисты международным отношениям военной сфере отслужил если суммарными цифрами брать 10 лет в армии как бы это ни странно не звучало Я благодарен потому что немало опыта в какой-то момент решил что это у неё и решил перестроиться тем более к тому что быть инженером я стремился не то чтобы стремился но и в детстве с
00:02:38 - 00:04:07
компьютерами любил поковыряться еще и паскали быть и дец помню мы пока учились в универе ты прогой увлекался не особо нет наоборот там не было с учетом особенностей обучения и времени-то не было чем-то другим отвлекаться и потом решил переключиться соответственно суммарно наверное на то что перейти нормально с учетом того что я переключаюсь желанием сохранить а не убавить на старте заняло где-то года два полтора-два года Прежде чем я нашел нормально рабочее место и уже собственно говоря и стал фонтенд разработчиками
00:03:23 - 00:04:48
заканчивал курсы заканчивал еще обучение разные в основном дотягивает самообразование молчатубу у меня будет такой вопрос У тебя немножко нестандартный путь развития карьеры ты не пошел в крупной корпорации работать ты как бы себе сказал что ты будешь развиваться своим путем по сути я тебя где-то могу назвать фрилансером Но это будет Неправильно ты не фрилансер ты аутстафер давай это так да скорее когда поэтому мне будет интересно тебя конкретно узнать вообще насколько реально молодым специалистам
00:04:07 - 00:05:13
Давай понятно что Сейчас самое благоприятное состояние рынка и так далее но все же попасть на аутстафф со старта Какие есть в этом плюсы и если это возможно немножко за сервис Расскажи на который ты долго пояснить Что такое аутсорс чем они отличаются в основном это когда приходит в компанию говорят нам нужно сделать продукт от всех до сих делайте силами компании Этот проект выполняется задача закрывается и потом этот проект отдается и бывают случаи когда компания держит свой it-персонал своими усилиями справляться получается
00:04:41 - 00:05:58
но иногда случаются моменты что нужно расшириться какие-то дополнительные продукты выпустить какие-то свои вопросы позакрывать и в целом там налоговая оптимизация своих стран когда выгоднее держать специалистов из-за рубежа То есть фактически отличается тем что ты приходишь не выполнить конкретную задачу А тебя нанимают с целью работать на позиции инженеров фактически становится частью компании то есть единственными нюансами что ты все равно представитель другой компании который текущий момент занят занимает должность
00:05:20 - 00:06:31
с точки зрения молодых специалистов куда идти там больше в крупные либо мелкие компании Наверное все-таки я посоветовал стараться попасть изначально Junior специалистам наверное все таки лучше попадать крупные компании там получить знания достаточно менторов у компании достаточно ресурсов на то чтобы потратить именно на обучение Молотова специалиста где-то посередине скорее всего лучше попереключаться и в том числе поработать маленьких компаний все-таки Это Две разных вещи и два разных опыта если
00:05:56 - 00:07:01
большой компании это будет все размеренно неторопливое со своими обязанностями где ты даже будешь сидеть чтоб мне делать Я все сделал и тебе говорят ничего не делаю раз задачи и в маленьких компаниях своя скажем так ламповая Атмосфера здесь меньше этого бюрократия и соответственно там где меньше бюрократии меньшее количество людей ты выполняешь большее количество обязанностей и почему скорее начинающему там будет проблематичнее без самодисциплины какой-то хвататься нужно будет за все в том числе
00:06:29 - 00:07:40
не связано не только напрямую связанное с твоими должностными обязанностями скажем так то есть ты становишься таким минимальным человеком оркестром в зависимости от размеров компании и менеджмента это приобретает смертельные формы либо не смертельный но желая вырасти как специалист скорее то в такой обстановке следует побывать чтобы уметь распределять свои ресурсы свои возможности и в том числе расширить свой Кругозор за счет других сфер не только конкретно своего отдельного направления такое быть тебе вопрос проходил
00:07:04 - 00:08:09
собеседование было сложно где-то Да где-то нет собеседование собеседование рознь собеседование проваливается не всегда по причине того что где-то там не дотянул где-то ответил неправильно зачастую просто не находишь контакты с человеком либо ты видишь что компания тебе точно не подойдет и наоборот как бы вроде как и все ОК но не совсем но не совсем Ну давай тогда так мы сегодня поговорим про то что действительно важно Это прохождение собеседования особенно войти компании если мы говорим прохождение
00:07:37 - 00:08:53
собеседования у нас не с тобой направление фронтенд мы будем закрывать вопросы Скорее всего по большинству своем будет Junior Sky но тем не менее не важно Особенно для тех кто будет смотреть этот ролик это будет такая хорошая вспомогательная шпаргалка поэтому от меня максимально короткий Ясный вопрос от тебя развернуто доступный ответ длинный непонятный ты готов начать В чем разница в использовании cookies и Local storage для начала для чего вообще cookies Local Stories нужны давай данные между сессиями клиента Мы заходим
00:08:15 - 00:09:30
на страницу что-то поделали Обновили страницу закрыли браузер по ошибке нажали ход reload не хотелось бы Начинать все делать заново либо какие-то настройки хотелось бы один раз настроил и забыл и не всегда для этих вещей нужен сервер где эти настройки сохраняет Соответственно что Local Stories что куки что section storage и куча других нюансов в современном мире уже выскакивает возможности хранения данных на клиенте и те служат для хранения какой-либо информации и сразу говорить для нечувствительной информации Если вы
00:08:54 - 00:09:59
решите сохранить туда логин и пароль это будет очень плохой день зашифрованном виде доступной для всех особо даже технически не одаренных злоумышленников а разница между происходит cookies одна из самых первых возможностей храните какую-то либо информацию на клиенте соответственно одна из самых старейших возможностей размеры хранения 4 килобайта Если не ошибаюсь для куки и около 10 Мб для Local Store нормально разница существенная нужно понимать механику Почему 4 килобайта ограничения на кухне даны не просто так
00:09:26 - 00:10:46
зависимости от того с какой целью вы хотите информацию и Если желание эту информацию разделить между доменами разными допустим под доменами одного сайта то в этом случае вам кроме куки на помощь ничего не придет Local Stories работает в рамках вашего сайта и все под домены отдельное хранилище под домены под доменов соответственно еще одна отдельная хранилище скуки есть возможность сделать их кросс доменами и эта информация будет доступна на главном домене его поддомены в случае если вам это необходимо сделать у вас собственно
00:10:08 - 00:11:26
говоря и выбора немного второй момент куки всегда прикрепляются к запросу и куки ими может управлять сервер он может выставить Путина клиента может прочитать кубки с клиента Local storage Это чисто Вотчина JavaScript следующий момент работы скуками то же самое проистекается что не прикрепляется к запросу могут управляться сервером в них можно выставить специальный флаг и из доступны данные не будут но на любой запрос пользователя не прикрепляться будут Если вкратце то есть можно еще и дальше разбираться Не ну вообще вот это вот
00:10:47 - 00:12:03
этих пунктов по ответу обычно достаточно то есть достаточно ключевой момент что если вам необходимо чтобы эта информация в том числе мог управлять и сервер этой информации прикреплялась запросом и у вас Выбора нет кроме как cooki второй момент разница основная в объемах хранимых данных то есть понятно что локал сторож в тысячу раз больше чем хранит информацию и третий момент доступность между доменами у меня будет второй вопрос как решить проблему несовместимости некоторых CSS свойств в браузере и как
00:11:25 - 00:12:28
вообще в принципе можно сделать верстку кросс-браузер для начала откуда вообще несовместимость свойств произрастает произрастает вообще в чем смысл всей груз браузерский есть в 30 консорбциям которые разрабатывает различные документации стандарты которые касаются как HTML CSS всего мира разработки эти рекомендации они не зря называются рекомендациями поступают разработчикам браузером различные рекомендации носит живой характер постоянно обновляются как чем-то дополняются разработчики над браузерами
00:11:57 - 00:13:09
работают разные кто-то идет быстрее кому-то эти функции важны прямо здесь сейчас релизе кому-то они будут важны позже а кто-то чуть-чуть по-своему переосмыслил спецификацию сюда происходит зоопарк свойств и одно и то же свойство может чуть-чуть по-разному себя вести в разных браузерах где-то она может вообще не поддерживаться где-то на поддерживается частично и так далее соответственно Вы же со своей стороны делаете сайт и не знаете когда и На каком устройстве на каком В каком браузере ваш конечный клиент его откроет
00:12:33 - 00:13:39
и возникает естественное желание сделать ваш сайт максимально доступным для всех здесь на помощь приходит несколько техник в первую очередь есть специальный сайт который поможет вам разобраться как эти свойства вообще работают и насколько хорошо поддерживаются различными браузерамиском куда вы хотели посмотрели вели нужное вам свойства и всю информацию о поддержке вывели удобно основываясь на этой информации вы решаете Нужно ли использовать конкретно можно ли можно ли на вашем сайте использовать это конкретное свойство и
00:13:05 - 00:14:12
если можно И вам достаточно допустим что она будет поддерживаться последних версиях Хрома то Хрома Firefox и Сафари оно везде поддерживается одинаково то у вас и головной боли не возникает право первому не говорим первому ничего не говорит Хорошо что ты слышу Кстати что они вроде тоже собираются этот интегрировать или что-то такое не собирается интегрировать Может я ошибаюсь куда больше посмотрел посмотрел чуть попользовался но технология интересная но мы сейчас в сторону возникает зашли на ту же самый ресурс
00:13:38 - 00:14:46
посмотрели оказывается что наши свойства реализовано в Хроме как есть а вот в сафари либо в Firefox этого свойства такого нет но есть свое со своим префиксом здесь нужно рассказать так называемых вендерных префиксах то есть само свойство может быть реализовано браузером так как свойства из будущих модификаций спецификации которые разработал консольством На текущий момент Они там еще не стабилизированы конкретные решения не приняты но разработчики браузеров пошли вперед и для того чтобы в будущем не было конфликтов когда
00:14:23 - 00:15:32
стандарт будет готов для всех рекомендация для всех будет готова но уже в текущий момент можно было пользоваться конкретно в их браузере добавляется так называемые гендерный префикс если обязательно увидите странные свойства минус Мосс минус о минус веб-кит эти вендерные префиксы добавляются к свойству и ваши свойства начинает поддерживаться в разных браузерах то есть посмотрели в этом браузере можно без префикса в этом браузере только с префиксом в этом браузере is префиксом и без префикс А вот как
00:14:57 - 00:16:05
поступать ситуации когда она идет из префиксом без префикса здесь стандартная используется подход в том числе он используется в другом подходе в том числе Помним каскадности и наследования стилей то что определили позже то перезаписывается соответственно записываем сначала все вендерные префиксы и потом наши конечные свойства Таким образом мы себя страхуем на будущее что когда этот браузер начнет поддерживать спецификацию у нас будет использована правильно корректные свойства не то что было до этого не
00:15:31 - 00:16:33
поддерживается мне уже интересно следующий момент есть свойства градиенты допустим постепенно деградация так называемый сначала верстаете сайт оптимально со всеми самыми современными свойствами и в самые современные браузеры открывают ваш сайт на ура со всеми анимациями градиентами интересными закругленными всем чем угодно но не все браузеры чисто технически могут поддерживать те же самые допустим градиенты если мы берем верстку воду три назад это было в целом Боль то же самое идем по принципу наследования каскадных
00:16:01 - 00:17:09
стилей описываем наши свойства основное которое мы хотим использовать последний перед ним мы описываем фулбэки пусть не поддерживает Градиент background background Градиент такой он используется У нас все хорошо браузер его поддерживает если браузер его не поддерживает мы до этого то же самое свойство background но объявляем уже формате в хексформате неважно каким цветом и уже вместо нашего красивого градиента У нас будет какой-то какая-то однотонная заливка Но это все-таки лучше чем белое пятно на
00:16:36 - 00:17:49
само собой и в принципе наверное это основные такие моменты для того чтобы это все не прописывать руками есть сас лес при процессоры которые работают и в них сразу специальные плагинчики которые в том числе минифицируют ваш код и одна из их задач в том числе подставить вендерные префиксы для нужных свойств для браузеров которые не поддерживают значение по спецификации то есть в своем пишете просто одно свойство пропускаете ему через процедуру сборки и в результирующемся с асфале у вас получается
00:17:11 - 00:18:20
Каскад таких значений последний вопрос по боку верстки теги div И span в чем особенность Для чего используется откуда html5 стандартно живой появился новый блоки и спен фактически это семантически нейтральные блоки отсюда произрастает болезни многих разработчиков стать неделевых испытанных дефиспен хороший блоки используются тогда когда для этого нет подходящего семантического элемента в самом html5 версии либо вам конкретный контекст не важно просто так везде его впихивает тоже так себе они абсолютно
00:17:46 - 00:19:00
семантические нейтральны блочный элемент нашей отсюда и контекст их использования вам нужно сделать блог который не является ни хедером ни навигацией ни секций вашего сайта То есть просто какой-то кирпичик из которого нужно соорудить вам вашу стенку Используя это блочный элемент Используйте div вам нужно в строке пометить какие-то элементы которые не несут семантического тела оттенка выделить текст жирным потому что он стилистически должен быть жирным а не потому что это какая-то важная часть вашего предложения в этом случае
00:18:23 - 00:19:34
смотрите есть теги строчные которые вроде как производят тот же самый визуальный эффект это ем стронг и тому подобное строчные типы они визуально вроде как браузерах отображаются либо жирным либо курсивом но опять же это поведение не гарантируется оно общепринято но не гарантируется не удивляйтесь если в будущем браузер изменило полагались что текст обернут вас будет жирным а потом вдруг резко перестал семантические теги которые несут акцент на том что это важное содержимое вашего приложения в зависимости от того
00:19:00 - 00:20:09
скринридер будет его читать он сделает на этом либо паузу либо усилит интонацию увеличивает громкость приостановится все что угодно это сделано именно для семантической разметки если вам стилистически необходимо разбить строку на выделили где-то жирным красненьким подкрасить цветом вот оборачиваете в texpen его используете GS это готов различие между конст ЛЭТ Вар и почему варди прикрепит но так сказать чтобы совсем не приклеить это будет не совсем правильно скорее он такой грубо Да это будет грубо Var
00:19:35 - 00:20:42
нет смысла его использовать он поддерживается движками но его использование несет за собой ряд не совсем очевидных решений и ограничений которые проистекают в первую очередь это развлечение различия по области Вы если начнете отвечать на этот вопрос для начала определитесь что какие области видимости у нас существуют глобальная Блочная и функционально и соответственно первое Главное отличие между этими вариантами объявления переменных это их области видимость если у Вар у нас функциональная глобальная
00:20:08 - 00:21:19
область видимости то const LED это Блочная область видимости соответственно это делает намного проще написание кодов тех же самых циклах не стоит останавливаться легко погуглить те же самые примеры со счетчиком цикл счетчика и консоль Лог который выводит вам значение счетчика Просто если вы счётчик объявили через ворон вам выведет последнее значение если вы объявили его через LED через LED соответственно в рамках блока будет выводить нужное значение в нужное время это такой самый базовый пример который прямо
00:20:44 - 00:22:01
на первый жестоко запроса поиска в Google вы его и найдете второй момент это поведение всплытия Если вы объявляете Var поведение и где-то объявляете его в конце вашего файла и в самом начале вашего файла Обращайтесь к этой переменной Никакой ошибки не произойдет вас просто переменная выльется как ND она уже будет определена ее определение всплывает на самый верхний уровень значение уже присваивается конкретно там где вы и написали поведение иное у них и объявления сама переменные инициализация переменной и
00:21:22 - 00:22:42
присваивание первоначального значения происходит моменте объявления Никакого вспыльтия не будет соответственно вы намного раньше найдете свою ошибку выскакивает плюс бар позволяет вам скажем так изначально джаз был Для чего сделан для того чтобы как можно было проще написать всем страничку чтобы кто угодно владелец кофейни мог сесть написать самый простенький скрипт для себя это же не так по факту изначально она так и было практически оно и сейчас так есть зависит не сложно написать самый простенький скрипт сложно
00:22:03 - 00:23:14
потом его поддерживать Вот и когда из маленького скрипта растет большое приложение тогда становится важным проблема архитектуры и всех тонкости нюансов знания углублений если вам нужно написать самый простенький скептик на ваш сайт поверьте вы справитесь и без помощи профессионального программиста достаточно посидеть почитать Было бы желание время конечно он все так же остается крайне низкий порог входа вырос порог входа на корпоративные решения на какие-то глобальные платформы там да там объем знаний теперь намного намного выше
00:22:39 - 00:23:41
чем то же самое было 10 лет назад Вот и соответственно браузер Всеми силами пытается вас спасти от ошибки То есть даже если вы что-то написали неправильно браузер пытается это интерпретировать Так что все хорошо отсюда и поведение варварской выскакивает Если вы написали даже несколько раз одну переменную с одним и тем же названием через War он вам никаких ошибок не выведет Ваш скрипт продолжит работать до конца упорно и только вот не очевидное поведение вашего скрипта будет говорить о том что пошло
00:23:11 - 00:24:15
не так он соответственно не позволит вам переназначить заново объявить константу либо переменную с тем самым а кроме того War также помимо если 2 объявлены глобальной области видимости создает на глобальном объекте соответствующее свойство Если вы напишете Windows и название вашей переменной вы ее увидите если это переменная была объявлена через Varta cons опять же такого не происходит и второй момент чем удобнее исходя был один способ объявления переменной и все неважно что это Константа либо переменная которую вы дальше по коду
00:23:42 - 00:24:55
меняется она является всегда через оттуда ушли на всякие впечатление в виде того что константы всегда в аппер кейсе именуем переменные всегда лазер кейсе и тому подобное в зависимости от того как мы написали мы могли ожидать что это будет константы либо переменные которые дальше поменяется ну и соответственно не все следовали стандартами иногда носила интересные сюрпризы позволяет вам объявили назначили значение все дальше Во время исполнения программы это ничего не изменено быть не может LED соответственно позволяет
00:24:20 - 00:25:25
вам указать что это переменная возможно где-то дальше по коду что-то повлияет на ее значение будет изменено и отсюда уже строить понимание работы вашего кода соответственно и Когда Вы начинаете писать Вашу программу Старайтесь максимально использовать константы и минимально переменные то есть Объявлять переменные с помощью LED только тогда когда вы действительно вам необходимо будет изменить ее значение они просто потому что вы знаете что есть для чего нужен сет тайм-аут тайм-аут нужен для того чтобы код какой-то участок нашего
00:24:51 - 00:25:52
кода исполнился приблизительно через то количество миллисекунд которое мы напишем важный момент приблизительно приблизительно именно приблизительно это не значит что если вы написали тысячу миллисекунд и через одну секунду что у вас происходит срабатывает ваш код как есть все останавливается срабатывает нет такого не будет это значит что где-то в диапазоне через тысячу миллисекунд браузер будет искать окно чтобы ваш код вставить когда отвечаете на такие вопросы важно вспоминать о ивент-лупах как что у нас же с это язык однопоточный
00:25:23 - 00:26:42
несколькими процессами выполняется один поток существует соответственно мы устанавливаем это значение у нас уходят в браузерные API желание что мы исполним его там через тока количество времени когда мы сделали браузер отсчитывает этот промежуток времени помещает нашу функцию в блок макротасок готова к исполнению основной же код у нас идет в стоке как только стек очищается браузер начинает движок начинает заглядывать в микро tasky пусто макро-тасках готов наш тайм-аут будем его исполнять соответственно отсюда и проистекает
00:26:01 - 00:27:25
почему я говорю приблизительно если у нас в это время в стоке находится задача которая исполняется Ну представим что он исполняется 10 секунд и в рамках ее исполнения мы выставляли тайм-аут который полностью через три секунды в самом начале но так как все 10 секунд наш стек будет забит наша макро таска принадлежит лупе ровненько до того момента пока не исполнится основной поток он у нас исполнился и только после этого Несмотря на то что говорили через три секунды фактически у нас получится через 10 Стас частный
00:26:48 - 00:27:50
случай с этой аут с нулем в основном это Костыль с этой в основном это Костыль Если вы видите такой код то с большей долей вероятности Не всегда конечно костылей К сожалению подпирают много программного обеспечения иногда проще использовать костыли чем выстраивать правильную архитектуру всего вашего предложения но в большинстве случаев вы сможете перечислять по-другому не используется Зачем с этой Маусом у нас используется происходящее того самого вам нужно чтобы ваш код исполнился не сразу по достижению строчки сначала
00:27:19 - 00:28:42
пропустил весь код до конца нашего потока и только потом исполнился Когда это можно может быть нужно допустим у вас есть синхронный код кнопка вы нажимаете на кнопку и начинает исполняться вот такой банальный пример костыли встретиться собственно говоря вы нажимаете на кнопку меняется текст на кнопки в скрипте меняете текст на кнопки loading и запускаете ваш тяжелый синхронный скрипт который там длится 3 секунды и после этого меняется текст кнопки назад соответственно если написали лоб что у вас получится
00:28:01 - 00:29:01
поток ставит в очередь изменить текст кнопки на loading начинает исполнять 10-секундные скрипт тяжелый соответственно свободного окна нет для того чтобы обновить содержимое кнопки после этого он заканчивает исполнение и выставляет значение кнопки надо и своего лоудинка так и не увидели Где же он оказался соответственно здесь в этот момент свою задачу Вы можете отложить выставление кнопки текста изменения отложить все тайм-аутом 0 То есть он проскочит попадет исполнит изменит Наш текст выполнит нашу
00:28:31 - 00:29:53
пропустит основной поток с этой мало 0 комплитет вы потом выставляете и изменит на комплект в этом случае Вы видите мигнувшую кнопку основные методы перебора массивов и объектов Ох Чем сильнее развивается язык тем больше методов этого перебора становится если самый банальный самый простой часто встречаемый способ перебор с помощью цикла мы заводим счетчик заводим указываем что это счетчик изменяется до значения не превышающим для нашего массива и соответственно через индекс Обращаемся к определенным элементам массива и
00:29:12 - 00:30:23
спокойно получаем его значение если мы уже возьмем наш es5 и 6 и далее У нас появляется интересные инструменты в том числе встроенные сам язык сам браузер не надо никакие дополнительные использовать инструменты получить метод массива Forge если вам не нужно получать В итоге перебор какой-то новый массив либо трансформировать его в какой-то старый то один из способов пройтись по всем элементам следующий момент использования специального цикла фуров он чуть проще в описании чем счетчик for const элемент Off ваш массив И
00:29:50 - 00:31:08
соответственно внутри этого цикла Вы имеете доступ каждому элементу вашего массива Может через него перебраться а здесь уже на слух будет сложно рассказать о нюансах это лучше делать на примерах кода разбираться то есть основные методы перебора с помощью цикла с помощью стройных методов сам массив один из них foratch и с помощью циклофоров и дальше уже зависимости от того что перебор массива с целью С какой целью вы его делаете если делаете целью отфильтровать получить другой массив То есть Вам не нужны ни цикла ни врач уже
00:30:29 - 00:31:34
есть встроенный метод фильтр который отфильтрует только те элементы которые вам нужны сдавать вам нужно преобразовать его в объект либо в строку Не суть важно в любые другие варианты Используйте специальный метод редис который доступен наш массив нужно получить из этого массива массив такой же длины но провести какие-то операции с каждым элементом допустим массив в котором будут квадратных чисел которые есть в вашем исходном У вас есть метод Ну и со всеми этими методами их постоянно и наизусть получить сложно Да
00:31:02 - 00:32:15
в принципе не нужен в любом случае на спецификацию обращайте внимание есть одна из самых неплохих документаций которые я с ним Ден открываете массив и смотрите какие методы у него присутствуют в первую очередь Вам всегда нужно выяснять вашу задачу с какой целью вы это делаете как только вы понимаете что вы хотите сделать Вам довольно просто загуглить ответ на ваше решение когда вы не понимаете что вы хотите сделать вам ничего и вы не понимаете никак не Что вы хотите сделать Задача в квадрате согласен Google вам будет бросать все
00:31:38 - 00:32:41
любые ссылки кроме как нужный поэтому вы сформулируете вопрос так давай нам тоже важный вопрос Что такое Запоминание или минимализация это одна из техник которая позволяет нам уменьшить нагрузку вычислительную нагрузку на браузер допустим у нас есть функция которая выполняет очень сложные вычисления очень долгие вычисления но при этом довольно часто называется одними теми же аргументами один и тот же нам не нужно проводить последовательности действий мы так знаем до этого исполняли Итак знаем какой
00:32:09 - 00:33:19
результат при этих аргументов у нас получится так вот одна из техник Чтобы избежать когда мы исходя из наших параметров входных сравниваем параметр и Если результат выполнения этой функции может это сохраняли вместо того чтобы вычислять значение заново Мы берем данные из нашего каша а так как у нас Джесси все объект довольно просто эту реализацию на самой функции и написать то есть сравниваем входные аргументы на само же на самом же объект функции наименование функции подвешиваем кэш результаты
00:32:47 - 00:33:59
вычисления Обращаемся если были такие вычисления возвращаем методом retur те значения которые были нету все дальше идем по ходу выполняем вычисление и после того как мы эти вычисления выполнили не забываем записать их в кэш чтобы на следующий вызов сэкономить нам и время и ресурсы Какая Ключевая особенность реакторендере такой интересный вопрос собственно говоря сам рендер есть Ключевая особенность и последовательность рендера Когда происходит рендер компоненты компонентов и тому подобное важно вспомнить как у
00:33:23 - 00:34:30
нас разворачивается наш Эндер У нас есть родительский дочерние компоненты разметка внутри разметки реально на основе методы рендер грубо говоря это вызов то же самое функции под капотом нашего рендера лежат все те же самые методы Create Element Set атрибут и тому подобные вещи только за счет своей магии виртуального дома внутри реакции проводят оптимизацию избавляет нас от головной боли создание элементов вручную через браузера позволяет нам пользоваться такой разметкой как GSX соответственно на основе вызова функции у нас параметры
00:33:57 - 00:35:07
бывают разные внутреннее состояние элементов У нас есть какие-то свойства которые могут пробрасываться в наши компонент Извне в зависимости от того меняются эти свойства не меняются реакции решает нужно перерисовать компонент или не нужно Если нужно вызывая метод render он вызвался выполняя построение нашего виртуального дерева сравниваем с текущим состоянием и разницу забиваем дом в дом деле если ничего не изменилось дом дерево не трогаем все хорошо рендер проходит Как как считает ряд Когда у нас у него состояние
00:34:32 - 00:35:42
состояние либо свойства изменились обычная поверхность сравнения если в случае примите его примите его сравниваться по значению ссылочные типы данных у нас сравниваются по ссылке соответственно Если вы объявили объект прямо свойства на каждый рендер у вас будет создаваться новая ссылка на объект несмотря на что и там и там визуально кажется пустым у вас будет происходить все равно потому что два пустых объекта не равны друг другу заново созданы они ссылаются на разную область продолжаем Для чего в реакции
00:35:07 - 00:36:06
используется реакция роутер дом для чего нужен ролтинг и что такое опциональный ролтинг отличная тема для лекции вообще клиентским роутингом то есть сам по себе библиотека никаких инструментов для того как маршрутизировать как у нас там меняется URL он из-под капота не дает вы вольны в своем выборе выбрать все что вам нравится нравится реакция роутер он то есть реактор роутер Это одна из библиотек которая позволяет вам организовать клиентскую маршрутизацию Что значит клиентская маршрутизация изначально как все наши
00:35:36 - 00:36:48
странички строились отправляются запрос на сервер сервер строит HTML файл CSS и отправляет нам готовую страницу на браузер отрисовались посмотрели пользователи называют какую-то кнопку ссылку опять уходит запрос на сервер мы переходим на эту страничку грубо говоря опять строится вся страничка загружается все данные и даже если у нас в результате нажатия там изменялось только одно поле запросом нам приходилось перерисовывать перезапрашивать всю страницу целиком отсюда и произошла концепция Single page
00:36:19 - 00:37:27
Application фактически Мы всегда переходим по одному и тому же урону получаем один и тот же индекс HTML файл и отрисовываем наше приложение так вот так как мы всегда получаем один и тот же html-файл и перерисовываем только его части за счет запроса к серверу получения ответа от сервера технология получили данные у нас изменилась имя пользователя мы Обновили наше имя и теперь наше имя которое отображается в шапке сайта должно тоже измениться вместо того чтобы перерисовывать всю страничку Мы точно обновляем именно этот
00:36:52 - 00:38:03
бокс именно с этим именем только это свойство И как же браузер в этом случае с индексом HTML нашим понять нашему времени браузеру нашему приложению Как нам понять какую компонент какой элемент И вообще что за страницу нам отрисовывать какую совокупность элементов мы хотим видеть на этой странице в зависимости в этом случае к нам приходят на помощь решения для клиентского роутинга Что значит клиентский роутинг изменения ссылки в угле браузера поисковой строке адресная строка браузера изменение этого орла не
00:37:28 - 00:38:40
приводят к новому запросу на сервер а обрабатывается нашим скриптом так вот реактор дома как раз реактор роутер и реактор роутер дом это его реализация для браузеров сам реактор может использоваться не только в браузерах но и в мобильных приложениях реакции у нас теперь уже везде кросс кроссплатформенный и реактор роутер дом это конкретная реализация клиентского роутера для браузера и теперь эту библиотека смотрит какой у нас URL находится в адресной строке за счет конфигурации которая мы описали через
00:38:04 - 00:39:21
специальные элементы раунд и роутер он смотрит что по этому роуту мы отрисовываем такой-то такой-то экран с таким-то набором компонентов соответственно часто видели браузерах строки вида наш домен слэш юзер слэш айди какие какой-то там набор цифр который генерирует Вам страничку того пользователя которого вы хотели посмотреть естественно если мы руками начнем забивать все айтишники нам никакого пространства не хватит и предсказать айтишники мы не можем Здесь нам подходят реактор дома предоставляет в помощь
00:38:44 - 00:39:57
переменные в роуте если мы объявляем наш Rose не статическим текстом А одну из его частей Мы объявляем как переменную и в нее будет записано то значение в руле которое приходит с помощью этого значения соответственно мы делаем правильный запрос на сервер за правильным пользователями и рисуем человеку конечному нашему потребителю правильно экранчик это переменный и там если опциональный опциональный опциональные параметры нас может быть страничка юзер слэш ID и users/h и просто users если мы пользователь не вел
00:39:20 - 00:40:42
айтишник пользователя у нас отрисовывается просто страничка которая рисует поиск по пользователям топ-10 пользователей нашего сайта Не суть важно а если он вводит айтишник то рисуется конкретная информация об этом пользователе страничка соответственно у нас в Орле может присутствовать а может не присутствовать наш айдишник и чтобы нашу URL правильный рот отрисовывал правильные элементы у нас там общая шапка присутствует ее и там отрисовывать надо чтобы этот элемент отрисовывался и по Орлу где ID присутствует и по урлу
00:40:01 - 00:41:13
где не присутствует нам приходят на помощь так вопросик если то есть обозначили что этот элемент может присутствовать А может и нет но этот элемент страничку отрисовываю в любом случае не суть ты упоминал Что такое SPA если более чуть-чуть повторюсь ударяюсь в историю запрос на сервер отрисовка страница целиком нужно ввели форму Обновили данные опять запрос на сервер опять отрисовка страницы целиком даже если в результате исполнения той или иной формы воздействия У нас меняется только информация пользователе где-то в шапке
00:40:37 - 00:41:57
сайта вся остальная часть остается неизменной либо у нас табличка посередине и фильтруется теми записями параметрами которые мы ввели Для всего этого приходилось ходить на сервер перерисовывать заново на страничку это неэффективно соответственно есть такая технология как Аякс и синглпейдж Application как раз таки ее и реализует что такое Аякс динамические обновление наших страниц асинхронно с помощью запроса на сервер с помощью уже встроенных инструментов если брать под ремни квест обертки над ним делали либо
00:41:21 - 00:42:24
с более современный вариант фич говорить о том что одно лучше другого опять же здесь останусь просто могут на этом доковырять максимально 4 квестов вещь Если есть что может там и не нужен уже 4 класс нет задач для простеньких запросов на сервер естественно не нужно родителей объектом можно использовать и в большин большинстве случаев вам его выше крыши соответственно xml 4 квест позволяет отслеживать статус нашего запроса Какие статус он проходит вариант Если вам нужно отобразить динамическую загрузку
00:41:52 - 00:43:03
динамическую загрузку на сервер с сервиса Какие состояния происходят реагировать на это причем здесь уже не поможет придется лезть в дебри и рисовать его заново и то же самое идет как следствие вопрос есть еще же библиотека аксиос которая собственно говоря если я не ошибаюсь и воодушевило разработчиков браузеров и спецификации создать собственно фич запрос так если теперь есть фею встроен везде и поддерживается хорошо Так может и аксиус нам не нужен возможно Вам он действительно и не нужен То есть не нужно лепить потому что
00:42:27 - 00:43:44
Ну так делают все и везде не зависит от задач если вас там идут дополнительные задачи по парсингу ответа по встроенные инструменты обработки статусов ошибок выбрасывания исключений с тем же самым фичем вам все равно придется докручивать свои обработки часть из этого будет вообще все сделано если вам сделать простенький запросик и простенький распарсить ради этого тянуть библиотеку там военное количество килобайт Ну зачем смысла нет опять же определяемся задачей что хотим сделать и потом уже выбираем
00:43:06 - 00:44:04
под нее инструмент Это я буду часто говорить на любых вопросах в первую очередь Вам всегда нужно понять что вы хотите сделать Не в терминологии года а в терминологии той задачи последовательности шагов которые вы хотите выполнить и какой результат вы хотите получить и только после этого стараться перекладывать этот алгоритм вход Если вы их объединили два этих подхода нас будут проблемы мы уже начали говорить про реакт собственно Что такое react и сингл-то еще прикрепишь то есть реакция библиотека удобный инструмент который
00:43:35 - 00:44:43
позволяет нам реализовать компонентные подходы и очень удобно организовать наш код по частям по логическим блокам на нашей страничке рисовать работать с ним удобно прячет от нас всю механику обновления дом дерева реализует сложный алгоритмы чтобы это было чуть более эффективно чем если мы сами написали реализуют проблемы обновления дома в любой точке он помогает нам с этим бороться и использовать наиболее эффективные вещи и в то же время они накладывает на нас никаких ограничений потому как мы должны
00:44:08 - 00:45:17
это делать то есть это одновременно и плюс и минус реакта если мы будем сравнивать реакцию регуляра стингляр у нас будет выступать в роли фреймворк вот там из коробки все решения для роутинга для запросов на сервер и различных сторонних сервисов они большинство из них уже есть прямо из коробки но при этом Вы должны четко следовать той структуре кода которую вам декларирует регулятор также вам декорировать ничего подключили Как вы используете Ваши проблемы нужен роутинг подключили роутинг не нужен роутинг не подключается
00:44:43 - 00:45:41
не нравится тот который есть выбираете тот который Вам нравится ни один из существующих не нравится пишите собственно если любите велосипеды и очень удобная вещь разметкой которую нам реакт вот здесь я боюсь ошибиться действительно реакт был ее родоначальником с разметкой вы увидите это html-код HTML подобный код в вашем JS и он под собой скрывает все эти страшные докинуть Create Elements это атрибут тому подобные вещи за счет специального транспайлера он потом превращается в тот же самый код который Вы бы там писали
00:45:12 - 00:46:16
тонами у вас превращается в один маленький интересный элементик Вот react это клиентская библиотека которая позволяет вам работать над созданием интерфейсов не задумываясь над тем как это под капотом это все реализовать переложить физическое оснащение и очень удобно позволяет это разбивать на структурные блоки и работать изолированы хотите сделать элемент кнопку У нас есть компонент кнопки вылазить по этой кнопке знаете что в этом элементе вы что-то поменяли поменяли только эту кнопку и там где она используется она тоже
00:45:48 - 00:46:48
изменится но при этом не сломается ничего другого что такое крут Какие виды запросов отвечают за каждый параметр Круто Вот и здесь даже в твоем вопросе есть такой маленький нюанс крут Кейт апдейт это операции которые мы можем выполнять нашими сущностями И вопрос в том что замачивать их один на один с типами запросов один к одному не стоит если мы по типами запросов определяем как http глаголы понятия то есть пост ГЭТ патч пут делиться просто это не значит что каждый из этих типов http запросов соответствует своей букве в терминологии
00:46:19 - 00:47:37
крут Create Мы хотим создать новую сущность которая не существовала до этого с точки зрения запросов Мы это можем реализовать с помощью запроса пост и В некоторых случаях пут здесь уже разбираемся в семантике возможно Кстати я не знаю прикреплять ссылки там есть неплохие статьи многих людей которые можно Ты мне просто Можешь потом прислать Я в описании к ролику надо посмотреть насколько есть такие которые разбирают именно семантическое значение каждого запроса и путь это запрос на обновление каких-либо
00:46:58 - 00:48:10
данных либо создание новых но при этом есть важные семантическая особенность в том что данные туда отправляются целиком и полностью То есть если у нас объекте стоит из трех полей мы отправим запрос с помощью метода Put то у нас Мы должны отправить все три поля то Поля которые мы не отправили будет перезаписано в null соответственно если мы отправляем путь сущность который не существовала она будет создана пост запрос существует уже тоже для того чтобы создать наши данные соответственно вот вам буковка си и два метода которые
00:47:33 - 00:48:41
вы можете для этого использовать пост и запрос Рит Рид само по себе просто прочитать один на один mapping срабатывает гет запрос Get запроса никакого влияния на сервере не оказывают на сущность не производит никаких изменений не в базе Ни в чем мы получаем данные просто серверы по этому типу запросу вот наш ритмед запрос апдейт соответственно апдейт отвечает за то что у нас сущность на сервере уже существует мы хотим изменить какие-то детали изменить имя пользователя пароля пользователя поменять какое-то описание
00:48:08 - 00:49:19
себе биография все что угодно пользователь может создали у нас работает вот мы хотим изменить данные его профиль здесь мы это есть метод мы используем апдейт в этом случае опять же у нас mapping исходя из того что я рассказывал про то же самое creat идет из двух запросов это может быть и пуд в этом случае мы будем отправлять полностью всю сущность для того чтобы обновить данные даже одного поля изменяем одно поле полностью с этим есть специальные метод патч исходя даже из самого названия патч многие Геймеры должны быть знакомы это
00:48:44 - 00:49:53
исправление чего-то можем отправить мы можем отправить части нашего объекта и будут изменять только те части которые мы отправили то что мы не отправили останется как есть ну и соответственно метод Delete в идеале ему соответствует соответствующий запрос теперь там присутствует Теперь весь этот зверинец это все хорошо все эти методы но опять же сильно зависит от реализации вашего бэка А если мы возьмем граффик вверх сервер крут операции это круто операции работает через пост Все операции которые
00:49:18 - 00:50:21
есть вы будете отправлять на сервер и в том числе ошибки получать со статус годами одинаковыми и использовать для этого метод пост но при этом под капотом можно смотреть монология и мутации и типы этих мутаций они уже зависят уже будет рассматриваться не на теперь запросы А на тот API который предоставляет графики и опять же есть ленивые разработчики или не ленивые не всегда есть необходимость следовать догме и вот у нас есть типы htp-запросов и все они должны быть реализованы только так и не начали работать не надо у вас
00:49:55 - 00:51:03
не сложное приложение и он будет дольше бороться с настройкой правильных методов Возможно либо вам нужно это быстренько выкатить а потом сделать нормально Вот то два метода используют гетый пост в зависимости от того какие параметры внутри отправили эти операции используют Главное чтобы единственная при реализации где-то технически не может быть сделан Так что мутировал данные совсем уже нужно возвращаться Какие типы данных поддерживаются в тайп скептим давайте начнем с того что будем считать что знают что такое вообще Для
00:50:29 - 00:51:33
чего нужен типы данных как минимум поддерживать те же самые типы которые есть Джесси это примитивные типы данных строка число Ну тип Ну типа defind символ тип символ возможно еще каких-то там неспримитивных задач на ходу перечислить То есть все типы которые поддерживают жизнь поддерживает и тайпскрипт и Ключевая особенность Он предлагает ряд своих типов для простоты упрощения написания кода верификации его исполнения статического анализа для того чтобы избежать ошибок и для того чтобы облегчить вообще работу с приложением
00:51:02 - 00:52:24
прочитать наш код для разработчиков самое глобальное вообще все типы реакции являются типом потомками название самой себя происходит Эни Это все что угодно здесь строка и объекты массив все что захотите все остальные являются его потомками расширением так вот примитивные которые дополняет есть такой используется функции функции когда мы хотим пометить что эта функция результат из этой функции мы не хотим ничего возвращать если сам у нас возвращает оттуда значение undefine Даже если мы явное не прописали ретон с помощью тайпскрипта мы
00:51:43 - 00:52:55
можем пометить что воет говорит о том что несмотря на что туда undefinet вернулся это не значит что это то что мы хотели воет значит это просто какая-то процедура мы выполнили последовательность операции там отправили нужные запросы либо сделали нужные апдейты и все результатами этой функции пользоваться не стоит и они никакой нагрузки смысловой Они несут есть интересный тип Невер тип никогда используется тип значение Никогда это для того чтобы посечь ветки кода которые никогда не будут исполнены то есть
00:52:18 - 00:53:28
текущая комбинация невозможна тип не может быть одновременно и числом и объектом допустим числом и строкой Вот в этих случаях результирующий тип для своего внутреннего анализа в том числе говорит что такого случая не может быть Never соответственно если вас выскочила такая ошибка Ищите где у вас конфликты типов идут иногда явно Невер указывается для того чтобы сделать сложный Юнион типа то есть в одном объекте у вас присутствует три свойства и в другом три свойства и вы хотите сделать комбинированный Тип
00:52:53 - 00:54:06
который в одном случае это будет строка А втором никогда в жизни этой строки не должно быть название этого свойства с этим ключом вот ваш номер приходит вам на помощь написали что когда вы начнете описывать этот объект использовать в коде пытаетесь задать значение в объекте с ключом которому вы представляете вас начнет ругаться такого ключа просто в объекте быть не должно не должно и не может что у нас есть еще из интересных типов которые нам предоставляет typescript Ну отдыхают это все у нас идет из разряда
00:53:31 - 00:54:41
Джесса свои специфические и не воет Невер Ну и дальше уже идут комбинированные типы и дженерики которые дженерики на самые интересные инструменты скрипта рассказывай в этом был мой вопрос Отлично дженерик Это самый интересный вариант работы одновременно очень сложен почему-то для начинающих понять все эти конструкции Хотя фактически Что такое это статический анализатор кода он тоже выполняет ряд действий для того чтобы сказать Какой тип переменной получается в том или ином случае Иногда у нас возникает функции допустим
00:54:05 - 00:55:22
функция фильтрация по объекту значение отфильтровать из массива все отдыхают все ну значение либо все которые не подходят при этом нам Не суть важно Какие типы других переменных там присутствует Что может быть либо строки и получился и соответственно функция которая фильтрует данные говорит оставить только строки а второй массив у нас идет числа и тоже записался туда можно записаться вторая функция которая фильтруют массив с числами и исключает из него и в случае скриптом если мы практипизировали явно используя что
00:54:44 - 00:56:04
входной параметр у нас массив строк либо массив состоящий из строк либо типа у составных элементов может быть а на выходе получается массив строк логика внутренняя реализация функции у нас и там и там одна и та же что у нас массив набор либо у нас массив строк find мы отфильтровываем там отдыхаем в случае если мы написали тип явно для функции для того чтобы фильтровать массив строк массив чисел эту функцию переиспользоваться мы уже не можем на нас typescript начнет ругаться я жду массив со строками даешь числами
00:55:24 - 00:56:38
отдыхает Несмотря на то что поведение повторюсь одинаково здесь на помощь нам подойдет дженерик дженерик мы можем рассматривать как своего рода функцию которая на вход принимает какой-то аргумент и потом его подставляет эти части которые мы в типе соответственно в данном случае у нас качестве дженерика будет выступать в качестве типа будет выступать либо там массив строк и underfight либо массив там переданных чисел можем усложнить наш тип он будет наследоваться от того Типа того аргумента который передает и вот здесь
00:56:01 - 00:57:09
придет на помощь такая запись с знаками меньше больше и посередине там объявления этой переменной собственно и аргументы этой функции которые вы будете использовать ее использовать И вам помогает переиспользовать эту функцию на вас будет В зависимости от того передали вы массив строк либо undefinet вас на выход получится массив строк передали туда массив чистил либо скрипт применит ваш дженерик посчитает и результирующий будет массив чисел То есть Вам сократит написание кода и упрощение кода и сама типизация станет более гибкой и
00:56:35 - 00:57:40
динамичной с руками вам ничего не нужно будет приводить кастовать типы сложные если возьмете код в самом начале есть такое понятие кастинг У вас есть тип который в одном случае получается функция возвращает какой-то результат в другом случае функции такой это возвращает результат Если вы напишите простыми то передаете массив туда опять же строк возвращает массив строк передается массив чисел возвращает массив чисел функции соответственно Если вы написали описываете этот тип используя просто Union типы на вход вам
00:57:08 - 00:58:23
или массив строк или массив чисел а на выход вам функцию отдает или массив строк или массив чисел соответственно применяя эту функцию typescript Когда вы примените вашу функцию он не будет читать ваш код Он не понимает что ему нужно взять тот тип который вы передаете функцию что возвращаемый тип от него как-то зависит Ему сказали что приняли массив либо и функция возвращает массив либо о том что эти два значения как-то пересекаются как-то соединены вы ничего не указали соответственно применяете вашу функцию
00:57:45 - 00:58:48
передаете массив строк применили функцию и на выходе получается проблемы у вас Теперь ваша переменная которую вы после применения нашей функции она теперь либо массив чисел либо массив строк Хотя по коду явно видно что здесь все протезировано все отлично мы передали туда массив чисел и вот здесь опять же на помощь вам приходит дженерик джиналика писали переменный аргументы чтобы массив там Т - это экстенс string или numberry аргумент который передается массив T и соответственно такого же типа массив у
00:58:17 - 00:59:28
вас возвращает из функций тоже там Используйте место уже записи жесткой string Ray либо наборе использовать этот аргумент который вы продекларировали дженнике переменную грубо говоря очень часто пример когда выступает заглавная буква Т И вот здесь вы уже указали явную связь что массив входной параметр вашей функции от входного параметров вашей функции напрямую зависит результат возвращаем И когда вы применяете вашу функцию входа передали массив строк получили на выходе массив строку передали массив чисел typescript знает
00:58:53 - 01:00:00
что на выходе будет массив чисел а не массив строк значительно упрощает вам жизнь Спасибо большое Ну что друзья Я надеюсь сегодняшнем ролике те кто пойдут скоро на собеседование точно получит хорошую поддержку и опору в информационном поле те кто только готовятся Пожалуйста смотрите этот ролик и предыдущий ролик вообще Подписывайтесь на наш канал
00:59:26 - 01:00:14