Frontend Interview - собеседования по Javascript / Html / Css

Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

«Почему у нас такая дерьмовая кодовая база?» Как у нас проводят код-ревью: 👉 @frontendInterview

​sv, lv, dv Одной из распространённых проблем, с которой сталкиваются разработчики сегодня это изменение размера viewport на мобильных устройствах. Было бы логичным полагать, что 100vh или 100% высоты экрана означали высоту, равную высоте экрана устройства, но vh не учитывает адресную строку и навигационную панель браузера на мобильных устройствах. Поэтому иногда высота контента оказывается слишком большой и появляется лишний скролл. Это относительные единицы измерения, пришедшие на помощь знакомым vw, vh, vmin, vmax, с целью сделать процесс разработки более предсказуемым. svw и svh представляет собой наименьшую (smallest) ширину и высоту экрана с учётом элементов браузера, lvw и lvh — наибольшую (largest) ширину и высоту с учётом элементов браузера. dvw и dvh динамически (dynamic) высчитывает размер экрана при различных состояниях браузера, при открытой/закрытой адресной строке и навигационной панели браузера. Пример Ширина первого экрана будет равна 100% ширины вьюпорта, а высота — 100% высоты вьюпорта, причём размер будет динамически высчитываться при открытии/закрытии элементов браузера:

    
        .vh {
  min-height: 100vh;
}

.dvh {
  min-height: 100dvh;
}{}
    

Динамический вьюпорт dvw Размер указывается в процентах от ширины вьюпорта (viewport width). 100dvw соответствует полной ширине вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvw = 1% ширины вьюпорта. dvh Размер в процентах от высоты вьюпорта (viewport height). 100dvhсоответствует полной высоте вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvh = 1% высоты вьюпорта. dvmin Размер в процентах от меньшей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты. dvmax Размер в процентах от большей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты. 👉 @frontendInterview

Пять строк кода. В каждой кодовой базе есть ошибки и слабые места, которые нужно найти и исправить. Правильный рефакторинг сделает ваш код элегантным, удобным для чтения и простым в обслуживании. Познакомьтесь с уникальным подходом, позволяющим реализовать любой метод в пяти строках кода. И не забывайте про тайну, хорошо известную большинству senior-разработчиков: иногда проще ухудшить код и вернуться к его исправлению позже. 👉 @frontendInterview

Flatten and sort an array Задача: Задав двумерный массив целых чисел, верните отсортированную версию массива, в которой все целые числа расположены в порядке возрастания. Пример: Учитывая [[3, 2, 1], [4, 6, 5], [], [9, 7, 8]], ваша функция должна вернуть [1, 2, 3, 4, 5, 6, 7, 8, 9]. Дополнение: Пожалуйста, помните, что JavaScript по умолчанию сортирует объекты в алфавитном порядке 👉 @frontendInterview

Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ - Разбор ДЗ от наставника - Мощные кейсы в портфолио Зарегистрироваться #реклама 16+ yudaevschool24.online О рекламодателе

Замыкания в JavaScript Замыкание в JavaScript - это комбинация функции и лексического окружения, в котором она была определена. Это позволяет ей обращаться к переменным и функциям этого лексического окружения в дальнейшем. В следующем примере мы определяем функцию makeCounter(), которая фактически является фабричной функцией. При вызове она возвращает дочернюю функцию, которая имеет доступ к лексическому окружению внешней функции, то-есть функции makeCounter(). Таким образом, возвращаемая функция запоминает переменную counter и в последующем изменяет ее значение. function makeCounter(initial = 0) { let counter = initial; return function() { return counter += 1; } } const counterA = makeCounter(0); console.log(counterA()); // 1 console.log(counterA()); // 2 const counterB = makeCounter(100); console.log(counterB()); // 101 console.log(counterB()); // 102 👉 @frontendInterview

Как получить информацию о браузере пользователя? Свойство window.navigator возвращает объект описания приложения (user agent), которое выполняет скрипт. В подавляющем большинстве случаев это приложение — браузер. Объект содержит свойства, описывающие браузер, и методы для выполнения действий. Часто используемые свойства: - userAgent возвращает строку, которая содержит название браузера. navigator.userAgent // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:93.0) Gecko/20100101 Firefox/93.0" - language возвращает предпочитаемый язык интерфейса в виде языкового тега. - languages возвращает массив предпочитаемых языков в порядке предпочтительности. Первый в списке будет язык, который возвращает navigator.language. navigator.language // "ru" navigator.languages // ["ru", "en-US", "es-ES"] - cookieEnabled возвращает true, если браузер пользователя поддерживает куки и они включены, false в противном случае. 👉 @frontendInterview