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

​Что такое webpack? Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html». Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт. Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов. Сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров. 👉 @frontendInterview

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

👉 @frontendInterview

Персональная рассылка IT-вакансий под твою ЗП и график. Подписывайся! @masterhubot

Зачем нужны регулярные выражения? 1. Сравнение с шаблоном: Регулярные выражения отлично помогают определять, соответствует ли строка тому или иному формату – например, телефонному номеру, адресу электронной почты или номеру кредитной карты. 2. Замена: При помощи регулярных выражений легко находить и заменять шаблоны в строке. Так, выражение text.replace(/s+/g, " ") заменяет все пробелы в text, например, " nt ", одним пробелом. 3. Извлечение: При помощи регулярных выражений легко извлекать из шаблона фрагменты информации. Например, name.matches(/^(Mr|Ms|Mrs|Dr)\.?s/i)[1] извлекает из строки обращение к человеку, например, "Mr" из "Mr. Schropp". 4. Портируемость: Почти в любом распространенном языке программирования есть своя библиотека регулярных выражений. Синтаксис в основном стандартизирован, поэтому вам не придется переучиваться регулярным выражениям при переходе на новый язык. 👉 @frontendInterview

👉 @frontendInterview

В чём различие свойств innerHTML и outerHTML? Свойство innerHTML содержит HTML код, который находится внутри этого элемента. При установке нового значения этого свойства, внутренний HTML код рендерится браузером заново. outerHTML почти аналогичен innerHTML, разница в том, что он возвращает полный HTML элемента. Для кода:

 <div class='outer'> 
     <p class='inner'></p> 
 </div> 

innerHTML возвратит:

 <p class='inner'></p>

outerHTML возвратит: <div class='outer'><p class='inner'></p></div> 👉 @frontendInterview

👉 @frontendInterview

Sort and Star Вам дан массив строк. Отсортируйте их в алфавитном порядке и верните первую строку. Между каждой буквой в возвращенной строке должны быть "***" Пример: twoSort(["bitcoin", "take", "over", "the", "world", "maybe", "who", "knows", "perhaps"]) результат 'b***i***t***c***o***i***n' 👉 @frontendInterview

Когда при проверке несуществующего поля в каком-либо объекте на null будет выдано сообщение true? Результатом будет

 false
 true
 true
 true

Так как поле wiper не объявлено в объекте window. А оператор === проверяет более строго, учитывая тип переменной, который в данном случае undefined. 👉 @frontendInterview

👉 @frontendInterview

Сколько элементов будет в объектах elems1 и elems2 в результате выполнения этого кода и почему? elems1.length == 3; elems2.length == 2; По сути оба метода представляют собой поиск элементов в документе. В данном случае ссылок. Однако метод getElementsByTagName() возвращает так называемую "живую коллекцию" элементов, т.е. при каждом вызове он снова выполняет поиск и в коллекцию добавляются элементы, которые появились в документе уже после присвоения. Метод querySelectorAll() выполняет поиск единожды и, на момент присвоения, находит только два элемента "а". Если же выполнить поиск этим методом после создания нового элемента, querySelectorAll() вернет соответствующую истине коллекцию с тремя элементами. 👉 @frontendInterview

❓Для чего фронтенд-разработчику React-hooks? Приглашаем вас 6 и 7 сентября разобраться в этом вопросе на открытом интенсиве OTUS. За два дня вы поймете, как работать с React-hooks, создадите компонент с использованием hooks, а также научитесь делать кастомные hooks и поработаете с react-testing-library. 👉 Интенсив рассчитан на действующих JS-разработчиков. Для регистрации пройдите небольшой тест https://otus.pw/4Hbl/

Node.js Design Patterns (2020) Книга знакомит с передовыми практиками и шаблонами, которые помогут вам с легкостью создавать эффективные и надежные приложения с Node.js. Она предназначена для разработчиков программного обеспечения, которые имеют некоторые предварительные базовые знания о JavaScript и Node.js и теперь хотят получить максимальную отдачу от этих технологий с точки зрения производительности, качества дизайна и масштабируемости. 👉 @frontendInterview

Получить название планеты по ID Вам дана функция, которая работает некорректно. Найдите ошибку и исправьте её. Примеры: getPlanetName(2) => 'Venus' getPlanetName(3) => 'Earth' 👉 @frontendInterview