Собеседование на Junior Frontend разработчика. Стажер фронтендер 19 лет из EPAM

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

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

  00:00:00 - 00:01:03

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

  00:00:32 - 00:02:07

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

  00:01:19 - 00:02:35

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

  00:01:57 - 00:03:33

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

  00:02:45 - 00:04:10

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

  00:03:28 - 00:04:53

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

  00:04:08 - 00:05:39

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

  00:04:55 - 00:06:19

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

  00:05:38 - 00:07:02

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

  00:06:20 - 00:07:43

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

  00:07:05 - 00:08:49

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

  00:08:07 - 00:10:27

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

  00:09:17 - 00:10:35

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

  00:09:57 - 00:11:19

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

  00:10:37 - 00:11:51

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

  00:11:14 - 00:12:38

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

  00:11:56 - 00:13:30

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

  00:13:00 - 00:14:09

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

  00:13:33 - 00:15:06

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

  00:14:20 - 00:15:51

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

  00:15:07 - 00:16:50

• сверху 20 слева 15 снизу 5 и справа будет 10 тут надо вспомнить что снизу получается это саре считать это сверху это откуда слева это снизу это справа на самом деле не совсем правильно это сверху это снизу это правильно от у кого-то это право а это лево у тебя по часовой стрелке указываются margin и padding кей borders окей хорошо давай дальше так ну у этого мы указали явно сверху справа и снизу и если не указали слева это значит будет такой же как справа по идее тут тут тут мы указали сверху и справа и значит

  00:16:08 - 00:17:59

• снизу будет такой же как сверху и слева будет такой же как справа хорошо а скажи мне сколько будет между этими блоками а вот вот здесь сколько будет а ты не видишь мою мышку сколько между первым и вторым и сколько между вторым и третьим между не будет по высоте марджан между первым и вторым у первого снизу можем до пикселей 2 сверху 20 значит придет 25 и между вторым и третьим гранью и дата и мяуу 2 получается снизу мартин 10 пикселей у 3 сверху 5 пикселей 15 ты правильно сказал где какой margin находится но к

  00:17:03 - 00:18:51

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

  00:17:57 - 00:19:03

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

  00:18:30 - 00:19:52

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

  00:19:10 - 00:21:18

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

  00:20:14 - 00:22:16

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

  00:21:22 - 00:23:52

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

  00:22:45 - 00:24:29

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

  00:23:47 - 00:25:37

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

  00:24:42 - 00:26:31

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

  00:25:54 - 00:27:17

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

  00:26:38 - 00:28:11

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

  00:27:25 - 00:28:55

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

  00:28:14 - 00:30:07

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

  00:29:16 - 00:30:59

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

  00:30:15 - 00:31:55

• ну точнее то что существует это была ошибка при проектировании языка вопрос был в чем различия гамме журнал indie fund инал инал означают отсутствие значения ой то есть in all and find и вроде если вызвать оператор типов у налы это будет объект ну в помпа молчание slim инициализируем функцию но не присваиваем ей ничего ой то есть переменную ничего не присваиваем то есть она будет он define а если например я создам какой-то объект то есть обычно у меня есть а равно 1 на я делаю консоль блогах смотри если я выведу обувь

  00:31:11 - 00:33:09

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

  00:32:16 - 00:35:01

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

  00:33:42 - 00:35:28

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

  00:34:58 - 00:36:31

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

  00:35:45 - 00:37:40

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

  00:36:53 - 00:38:48

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

  00:37:57 - 00:39:57

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

  00:39:03 - 00:40:44

• declaration это сработает правильно потому что вот это уже ссылается на эту функцию а если попытаемся вы завить вызвать фанк expression то так как это еще и лет произойдет репентеру хорошо окей а что такое имеет ли in work for expressing efi ну анонимно мне пример написать да можешь взять так услышь это как то так а зачем ты создал вот здесь вот и все и и тут и ее вызываешь да привет давай разбираться хорошо вот ты вызываешь функцию хорошо что у тебя будет храниться вот допустим что будет хранится внутри

  00:39:55 - 00:41:49

• твоего ефим вот здесь если я сейчас выведу просто конце локи fi по идее функцию функцию который ты возвращаешь внутри окей вот эта часть она обязательна для и fe-1 вот если будет вот так и например или тора один это efi но это само вызывающая функция выражения но в таком случае efi будет равно и мы не и мы не можем вызвать как потому что модель будет то есть потому что это и ну да в принципе вот это и есть и все это immediately инвок fangs он expressing да то есть у тебя есть функция и это sangsin express in который ты сразу же

  00:40:59 - 00:42:44

• вызываешь все и тебе не надо потому что она скобку да хорошо а вот скажи мне пожалуйста я щас тебе скопируем строчку скажи мне пожалуйста а вот это является efi это function decoration атташе я здесь написал еще одни скобочки это как-то повлияет но это это она как бы должна вызываться это упоением севера и the function declaration of an unseen declaration б ну не знаю как считаешь оон выкуси ц'ада то есть как function declaration у тебя получится function declaration и просто скобочки яфета не станет

  00:42:02 - 00:43:57

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

  00:43:18 - 00:44:49

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

  00:44:05 - 00:46:17

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

  00:45:38 - 00:47:34

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

  00:46:35 - 00:47:48

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

  00:47:10 - 00:48:46

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

  00:48:00 - 00:49:31

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

  00:48:45 - 00:50:16

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

  00:49:30 - 00:50:54

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

  00:50:15 - 00:51:39

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

  00:50:58 - 00:52:17

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

  00:51:37 - 00:53:37

• на 2 он должен быть не не равен нулю то есть это будут элементы у которых остаток от деления на 2 ей значили нечетные значит что будет результате массив из нечетных элементов хорошо что будет выведена в консоль прекрасный инкремент тут получается и он нам сразу вернет x + 1 то есть это будет 8 если будет x плюс плюс то есть эти плюсы будут тут повернет 7 но если после этого вы видим x вот на этой строчкой же пыталась хорошо продолжаем наш blitz что вернет данный код так 0 1 + 0 2 мне кажется с этими

  00:52:49 - 00:55:00

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

  00:54:01 - 00:56:03

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

  00:55:05 - 00:56:48

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

  00:55:56 - 00:58:11

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

  00:57:18 - 00:58:44

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

  00:58:02 - 00:59:57

• cookies at local старриджа adsense тораджи ну local storage из вершин старый похоже я они хранятся только на клиенте куб но окучивать лечить них могут передаваться на сервер и какими имеют меньший объем памяти то есть их их размер меньше и там и там еще разница между совершенства чулок of local storage solutions to reach автоматически удаляются когда сессии завершены то есть мы закрыли вход a local storage да даже если мой браузер цик и закрываем все равно мы потом открываем и у нас остается все что было

  00:59:16 - 01:00:44

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

  01:00:00 - 01:01:20

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

  01:00:52 - 01:02:14

• принципе верные верный момент что для передачи этих данных но имеется ввиду что ты используешь эти данные у себя на клиенте хотя как бы сами настройки тебе могут прийти из сервера ты про них изначально не знаешь о local store chateau то что у тебя хранится именно в твоем браузере ты заменяешь на озеру тебя уже нет local storage to a cookie тебе может прислать сервер к примеру то есть там есть раз перешли момент хорошо в принципе по техническим вопросам я все и последнее буквально два вопроса хотел

  01:01:33 - 01:02:41

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

  01:02:11 - 01:04:01

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

  01:03:05 - 01:04:15

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

  01:03:41 - 01:05:17

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

  01:04:29 - 01:05:50

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

  01:05:10 - 01:06:37

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

  01:05:53 - 01:07:23

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

  01:06:39 - 01:08:01

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

  01:07:19 - 01:08:51

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

  01:08:04 - 01:09:11

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

  01:08:38 - 01:10:05

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

  01:09:28 - 01:10:44

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

  01:10:05 - 01:11:14

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

  01:10:40 - 01:12:24

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

  01:11:32 - 01:12:52

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

  01:12:11 - 01:13:32

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

  01:12:52 - 01:14:00

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

  01:13:27 - 01:14:52

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

  01:14:10 - 01:15:40

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

  01:14:54 - 01:16:05

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

  01:15:30 - 01:16:40

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

  01:16:05 - 01:17:03