Мок-интервью для джуна-фронтендера: собеседование с лайвкодингом

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

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

  00:00:00 - 00:01:37

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

  00:00:56 - 00:02:01

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

  00:01:28 - 00:02:47

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

  00:02:06 - 00:03:18

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

  00:02:43 - 00:04:28

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

  00:03:44 - 00:05:24

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

  00:04:35 - 00:06:27

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

  00:05:38 - 00:07:03

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

  00:06:31 - 00:07:35

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

  00:07:03 - 00:08:21

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

  00:07:42 - 00:09:05

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

  00:08:23 - 00:09:26

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

  00:08:55 - 00:10:19

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

  00:09:41 - 00:11:05

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

  00:10:24 - 00:11:53

• этими строками работать то есть допустим она должна отвечать что-то вроде того да цвет который умеет парсить CSS то есть валидность по идее Какие ты знаешь форматы цветов Ну есть RGB есть хекс И еще какой-то есть еще один не помню как называется так Как нам это можно сделать эта функция принимает какие-то аргументы нет это просто функция Рандом Color которая сразу выдает тебе рандомную строчку но с валидным цветом Давай размышлять У тебя есть цвет Выбери формат для начала какого формата ты хочешь цвет вообще тексты назвал Ты

  00:11:52 - 00:13:29

• назвал можем взять один из них в целом это аналоги друг друга просто разные надо Ну допустим скажем RGB Что в себя включает запись RGB значение от 0 до 255 Если не ошибаюсь [музыка] и Блу как он записывается скажем как-нибудь Вот так допустим вот скажи CSS Такой цвет он сможет его понять или ему все-таки надо писать [музыка] так он принимает Давай я тебя немножко дополню сейчас если смотреть самые современные спецификации CSS то запятые писать не надо но в целом запятые будут работать есть как бы современная спецификация

  00:12:57 - 00:14:45

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

  00:14:02 - 00:15:47

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

  00:16:04 - 00:17:45

• [музыка] Ну давай давай рисовать я все-таки добью чтобы тебя есть границы от 0 до единицы Так давай как-нибудь просто комментом напишут тебе нужно по сути как если ты число масс Рандом добавляешь 100 то у тебя получается скольки до скольки нет Если ты добавляешь столько результатам Ну от 0 до 1 [музыка] если мы умножаем на 2 сколько получится диапазон если просто умножаем на 2 да Если результат mostronton ты умножишь на 2 сколько получится от 0 до 2 Окей теперь Используйте знания то есть либо 0 либо 255

  00:17:20 - 00:19:04

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

  00:18:32 - 00:20:07

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

  00:20:09 - 00:21:35

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

  00:20:57 - 00:22:23

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

  00:21:58 - 00:23:37

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

  00:23:43 - 00:25:06

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

  00:24:37 - 00:25:47

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

  00:25:13 - 00:26:40

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

  00:26:02 - 00:27:20

• позволяет понять уровень разработчика ты открываешь браузер У тебя есть строка ввода адреса вводишь в этот адрес Ну допустим вот интервью Яндекс team.ru нажимаешь Enter что происходит Расскажи как максимально подробно что ты хочешь рассказать для начала необходимо понять На какой адрес ему делать для этого он полезет ассоциативная запись если в кэше его нету то тогда будет сделан запрос на ближайший DNS сервер обычно тогда на сервер нашего локального провайдера и тогда уже даны сервера вернет вот эта запись

  00:26:41 - 00:28:13

• ассоциативно скажем так Но если там нету то дальше пойдет уже на следующий DNS сервер и так далее пока не дойдет до рода вот А после того когда браузер получит IP адрес он делает http запрос методом Get на получение [музыка] данных скажем так для отрисовки страницы Почему запрос или имеется Почему не https Ну какие бывают какие-то это в принципе вообще протокола запрос это бывает разные там методом смысле если про это речь там гет пост патч пуд Delete и на самом деле про то что иногда бывает FTP FTP http бывают разные там

  00:27:40 - 00:29:17

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

  00:28:29 - 00:30:12

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

  00:29:44 - 00:31:04

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

  00:30:27 - 00:31:55

• тебя есть layout это браузеру нужно понимать где Чего разместить У тебя есть ссылка на какую-то картинку как Браузер поймет что картинка какого-то правильного размера он нарисует один один на 100 пикселей ну во-первых если мы допустим это позиция как бы своем первоначальном размере [музыка] но размер этот откуда берет Ну и свойств картинки там где-то данные или как там хорошо принципе с видео приблизительно та же история происходит Давай в принципе про критический путь все Давай снова попишем код Задачка

  00:31:21 - 00:32:47

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

  00:32:23 - 00:33:51

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

  00:33:10 - 00:34:48

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

  00:34:30 - 00:36:37

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

  00:38:28 - 00:40:00

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

  00:40:38 - 00:42:36

• возвращаем D Если е возвращаем F а если у нас сюда попадет и должен должен вернуться Так я вот не помню если мы обратимся допустим какому-то свойству объекта у которого не будет данного ключа вернется или отдыхает или нужно вручную возвращать Вот это сейчас я не помню Ну если ты обращаешься К какому-то объекту которого нет какого-то ключом вот если ты его отдыха или Ну попытаешься получить то тогда он улыбнется но мне кажется должно отработать Давай начнем с того что вот прям сразу посмотрим вход я могу тебе сказать у

  00:42:36 - 00:44:23

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

  00:43:34 - 00:45:23

• Тогда тогда нет работает [музыка] тогда если что-то в любой момент Можно сказать я не знаю как решить Давай тогда еще 10 минут потратим тогда если допустим у нас здесь то массив токенов будет я не помню Сплит В итоге вернет массив из одного значения или нет можешь попробовать консоли да маленький лайфхак в консоли консоль писать вообще не обязательно [музыка] работать Давай посмотрим на 14 строчку Да ну тогда нет работы по-другому а ну да работает теперь на 14 до [музыка] чуть-чуть чего-то не хватает

  00:45:00 - 00:46:29

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

  00:47:13 - 00:48:42

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

  00:48:32 - 00:50:03

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

  00:49:21 - 00:50:51

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

  00:50:11 - 00:51:41

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

  00:51:02 - 00:52:08

• вот как бы ты если бы допустим что сейчас ты знаешь такая доступность как бы ты продумывал как нужно сделать попап чтобы с клавиатурой было пользоваться удобно появлялся на какую-то кнопку события которая срабатывает именно по клику В смысле не поклякова по какой-то нажатию кнопки на клавиатуре вот Я просто об этом читал сам как бы не делал Окей допустим я пришел на какую-то кнопку нажал на ней Пробел или Интер у меня открылся папа как должен попасть дальше себя вести но в моем случае он просто через одну

  00:51:35 - 00:52:56

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

  00:52:29 - 00:53:50

• кеябки до Escape А ну да логично да Ну да да конечно лучше согласен Окей Ладно не буду тебя мучить с доступность такая сложная тема но задумайся следующий раз когда будешь вырастать Почитай про это потому что на самом деле доступны Папа это сложно Хотя современная верстка позволяет делать сильно проще есть прям встроенная папы в стандарте HTML и при помощи атрибутов можно достигать того что тебя писать не надо он тебе сразу делает из коробки доступно короче Первое правило доступности стараться Просто

  00:53:18 - 00:54:34

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

  00:53:57 - 00:55:20

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

  00:54:38 - 00:56:06

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

  00:55:25 - 00:56:38

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

  00:56:37 - 00:58:48

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

  00:59:00 - 01:00:29

• Посмотрим это в браузере [музыка] ой Федор нам нужно навсегда [музыка] может быть на всю ширину Давай сначала обсудим как ты будешь отверстать используя какую раскладку есть разные способы так но [музыка] допустим для навигации и мы я думаю можно обернуть во что-то в какой-то родительский допустим блок а потом отображение как Флекс скажем [музыка] Ну еще способ навигации дать какой-то определенную ширину Main maina или 8 секций скажем тоже какая-то будет определенная ширина В итоге они все оба будут а заниматься

  01:00:02 - 01:01:45

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

  01:01:45 - 01:03:52

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

  01:04:59 - 01:06:27

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

  01:07:06 - 01:08:45

• [музыка] как будто работает но я немножко дополню просто ну ты этим не пользовался за одно научимся проценты в Grid Team Light calls редко используется обычно используются [музыка] То есть ты пишешь один а вот между ними он ставит еще гэп есть такое свойство которое те самые 20 пикселей которые я хотел сделать Да можно так Ну вот он тебе видишь как раз этот гэп он нарисую когда ты наводишь на элемент в тулзах он тебе специальная сеточка показывает Окей более-менее сделали давай уже для экономии времени не будем заниматься

  01:09:17 - 01:10:40

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

  01:10:17 - 01:11:43

• Ну собственно У нас есть как бы селектор допустим по классам есть селекторы по какому-то элементу мы можем указать положим моим таким образом вот есть селекторы по по идее как я уже стал по классам по псевдо-класса или псевдоэлемента по дата каким-то атрибутам всегда классы Какие ты знаешь так harver Active disable checked фокус а псевдоэлементы автор before firstlatter Знаешь ли ты про такие современные псевдо-классы Как из нот has V нет кстати хорошо Но тогда опять же еще одна домашнее задание почитать про них

  01:11:12 - 01:13:00

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

  01:12:17 - 01:13:21

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

  01:12:50 - 01:14:12

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

  01:13:57 - 01:15:01

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

  01:14:29 - 01:15:35

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

  01:15:02 - 01:16:07

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

  01:15:35 - 01:16:36

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

  01:16:05 - 01:17:09

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

  01:16:37 - 01:17:42

• постоянно и классно знать разные форматы эти советы про цвета почитать тоже это форматов гораздо больше чем ты назвал есть RGB hex это по факту один и тот же цвет просто разные формы записи есть hsl это способ задать Хью Сатурн lightness то есть по-другому задается не через красный синий и зеленый Есть очень современные цвета Окей LS не знаю может подписаться на Андрей Ситников просто в Твиттере он постоянно про этот кейсы просто это команда которая популяризует этот цвет не цвет это формат цвета то

  01:17:09 - 01:18:25

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

  01:17:48 - 01:18:47

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

  01:18:17 - 01:19:10

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

  01:18:44 - 01:19:54

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

  01:19:18 - 01:20:31

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

  01:19:55 - 01:21:11

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

  01:20:42 - 01:21:46

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

  01:21:14 - 01:22:10

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

  01:21:42 - 01:22:42

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

  01:22:12 - 01:23:13

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

  01:22:43 - 01:24:06

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

  01:23:30 - 01:24:37

• разобраться в тестировании Найди крутого тестировщика И попроси померить иногда можно денежку заплатить тогда будет больше мотивации ментора те моменты А есть специализированные сервисы про менторство Да и можно найти прям людей которые тебе нужны [музыка] Ну что предлагаю тогда завершать попробовали ты получил какой-то опыт Вот и надеюсь тебя дальше все будет получаться еще лучше Удачи тебе дальше с поиском компании которые будут сердечко Спасибо [музыка]

  01:24:04 - 01:25:19