В чём разница между макро и микро задачами ?
Спросят с вероятностью 10%

Существует понятие Event Loop (цикл событий), который отвечает за выполнение кода, сбор событий и обработку сообщений. В его контексте важную роль играют понятия макро- и микрозадач. Эти типы задач помогают понять, как обрабатываются асинхронные операции.

Макрозадачи (Macro-tasks):

Это задачи, которые управляются циклом событий и выполняются одна за другой. Каждая такая задача выполняется в отдельном цикле, после чего выполняются все доступные микрозадачи.

Примеры:
✅ setTimeout
✅ setInterval
✅ setImmediate (Node.js)
✅ Запросы к серверу через XMLHttpRequest или fetch (не сам запрос, а обработка результата)
✅ I/O операции (в Node.js)

Микрозадачи (Micro-tasks):

Также управляются циклом событий, но они имеют более высокий приоритет, чем макрозадачи. Они выполняются сразу после завершения текущей исполняемой задачи и перед тем, как Event Loop перейдет к следующей макрозадаче. Это означает, что все они в очереди будут выполнены до начала выполнения следующей макрозадачи.

Примеры:
✅ Promise.then/catch/finally
✅ queueMicrotask
✅ MutationObserver

Различия между макро и микрозадачами:

1️⃣ Приоритет: Микрозадачи имеют более высокий приоритет по сравнению с макрозадачами. Все микрозадачи в очереди будут выполнены до начала следующего цикла Event Loop и до того, как будет взята новая макрозадача.
2️⃣ Время выполнения: Микрозадачи выполняются непосредственно после текущей задачи и перед тем, как браузер получит возможность перерисовать страницу или обработать другие события, такие как ввод пользователя. Макрозадачи же разделяются циклами Event Loop.
3️⃣ Источники: Макро- и микрозадачи поступают из разных источников. Например, таймеры (setTimeout, setInterval) и I/O операции генерируют макрозадачи, в то время как обработчики промисов (then, catch, finally) создают микрозадачи.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие селекторы знаешь ?
Спросят с вероятностью 10%

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

Универсальный селектор

- — выбирает все элементы на странице.

Селекторы типов (тегов)

- tagName — выбирает все элементы данного типа (например, div, p).

Селекторы классов

- .className — выбирает все элементы с указанным классом.

Селекторы идентификаторов

- #idName — выбирает элемент с указанным идентификатором.

Селекторы атрибутов

- [attribute] — выбирает все элементы с указанным атрибутом.
- [attribute="value"] — выбирает все элементы с указанным атрибутом и значением.
- [attribute^="value"] — выбирает все элементы, значение атрибута которых начинается с указанной строки.
- [attribute$="value"] — выбирает все элементы, значение атрибута которых заканчивается указанной строкой.
- [attribute="value"] — выбирает все элементы, значение атрибута которых содержит указанную строку.

Селекторы потомков и дочерних элементов

- parent > child — выбирает все дочерние элементы child, непосредственно находящиеся внутри parent.
- ancestor descendant — выбирает все элементы descendant, находящиеся внутри ancestor (включая вложенные).

Селекторы соседей и братьев

- prev + next — выбирает элемент next, непосредственно следующий за prev.
- prev ~ siblings — выбирает всех соседей siblings, которые следуют за prev на том же уровне вложенности.

Псевдоклассы

- :hover — выбирает элемент при наведении курсора мыши.
- :focus — выбирает элемент, когда он находится в фокусе.
- :nth-child(n) — выбирает n-ый дочерний элемент.
- :first-child и :last-child — выбирают первый и последний дочерние элементы соответственно.
- :not(selector) — выбирает элементы, которые не соответствуют указанному селектору.

Псевдоэлементы

- ::before и ::after — позволяют вставлять содержимое до или после содержимого элемента.
- ::first-letter и ::first-line — выбирают первую букву или первую строку текста элемента.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое css ?
Спросят с вероятностью 10%

CSS (Cascading Style Sheets — каскадные таблицы стилей) — это язык, используемый для описания внешнего вида и форматирования документа, написанного на языке разметки (как правило, HTML или XML, включая такие разновидности, как SVG или XHTML). Он позволяет контролировать цвет, шрифт, расстояние между элементами, размер блоков, расположение элементов и многое другое для веб-страниц и приложений.

Основные принципы CSS:

1️⃣ Разделение содержания и оформления: Позволяет отделить структуру документа от его внешнего вида. Это означает, что можно изменить внешний вид веб-сайта, не затрагивая его содержимое.
2️⃣ Каскадность: Стили применяются в определённом порядке. Если одному и тому же элементу заданы стили через разные селекторы, браузер определяет приоритет правил согласно специфичности селекторов и порядку их определения.
3️⃣ Наследование: Некоторые стили, заданные для родительского элемента, наследуются дочерними элементами, если только для дочерних элементов не заданы собственные стили.

Как работает CSS:

✅ Селекторы: Использует селекторы для определения, к каким элементам HTML применять стили. Селектор может указывать на тег, класс, идентификатор или даже на комбинацию этих и других атрибутов.
✅ Декларации: После выбора селектора указываются декларации стилей, которые состоят из свойств и их значений. Эти декларации обычно заключаются в фигурные скобки.

Пример:

p {
  color: red;
  font-size: 16px;
}

В этом примере выбираются все параграфы (p), текст в которых будет окрашен в красный цвет (color: red;) и иметь размер шрифта 16 пикселей (font-size: 16px;).

Использование CSS:

Может быть подключен к HTML-документу тремя способами:

1️⃣ Внешний стилевой файл: Правила хранятся в отдельном файле, который подключается к HTML-документу с помощью тега <link>.
2️⃣ Внутренний стиль: Правила находятся непосредственно в HTML-документе внутри тега <style>.
3️⃣ Инлайновые стили: Стили применяются непосредственно к HTML-элементу через атрибут style.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

В чём отличие хранения данных в local storage от сессий ?
Спросят с вероятностью 10%

Хранение данных в localStorage и sessionStorage является частью Web Storage API, предоставляемого современными веб-браузерами для сохранения данных на стороне клиента. Хотя оба механизма предназначены для хранения информации в формате ключ-значение и имеют похожий API, между ними есть ключевые отличия в поведении и области применения.

localStorage

- Долгосрочное хранение: Данные, сохранённые в нем, остаются в браузере пользователя до тех пор, пока явно не будут удалены программно с помощью JavaScript или пользователем вручную. Это означает, что информация не исчезает после закрытия браузера или перезагрузки компьютера.
- Объём данных: В нем можно сохранять до 5-10 МБ данных (в зависимости от браузера), что делает его подходящим для хранения небольших объёмов информации.
- Ограничения: Данные доступны только в пределах того же домена, что предотвращает доступ к данным для других сайтов.

sessionStorage

- Сеансовое хранение: он сохраняет данные только в течение сессии страницы — данные исчезают после закрытия вкладки или окна браузера. Это делает sessionStorage идеальным для хранения данных, актуальных в рамках одной сессии работы с веб-приложением, например, информации о состоянии интерфейса или введённых пользователями данных форм.
- Объём данных: Как и localStorage, он обычно позволяет сохранять до 5-10 МБ данных.
- Ограничения: Данные в нем доступны только в рамках одной вкладки браузера, и другие вкладки с тем же сайтом не будут иметь к ним доступ.

Основное отличие между localStorage и sessionStorage заключается в продолжительности хранения данных и области их видимости. localStorage предназначен для долгосрочного хранения данных, доступных между сессиями браузера и вкладками, тогда как sessionStorage предоставляет механизм для хранения данных в течение одной сессии вкладки, что делает его более подходящим для временной информации, специфичной для конкретной сессии пользователя. Выбор между ними зависит от потребностей приложения в хранении данных на стороне клиента.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое деструктуризация ?
Спросят с вероятностью 10%

Деструктуризация — это выразительный и компактный синтаксис для извлечения значений из массивов или свойств из объектов в отдельные переменные. Этот синтаксис упрощает работу с данными, позволяя писать менее многословный и более читаемый код.

Деструктуризация объектов

Имена переменных соответствуют ключам свойств объекта. Если свойство с таким именем существует, его значение присваивается переменной.

const person = {
  name: 'Алексей',
  age: 30,
  job: 'Инженер'
};

// Деструктуризация объекта
const { name, age, job } = person;

console.log(name); // Алексей
console.log(age);  // 30
console.log(job);  // Инженер

Также можно задать переменным другие имена, отличные от ключей объекта:

const { name: personName, age: personAge } = person;

console.log(personName); // Алексей
console.log(personAge);  // 30

Деструктуризация массивов

Используется порядок элементов. Значения из массива присваиваются переменным в соответствии с их позицией.

const rgb = [255, 200, 0];

// Деструктуризация массива
const [red, green, blue] = rgb;

console.log(red);   // 255
console.log(green); // 200
console.log(blue);  // 0

Параметры функции

Деструктуризация также может использоваться в них для более удобной работы со свойствами передаваемых объектов или элементами массивов.

function introduce({ name, age }) {
  console.log(Меня зовут ${name}, мне ${age} лет.);
}

introduce(person); // Меня зовут Алексей, мне 30 лет.

Значения по умолчанию

Можно задать его для переменных, на случай, если такого свойства нет в объекте или элемента нет в массиве.

const { name, hobby = 'Чтение' } = person;
console.log(hobby); // Чтение

Деструктуризация предоставляет удобный способ доступа к элементам массивов и свойствам объектов, позволяя писать более чистый и понятный код. Это особенно полезно при работе с функциями, которые принимают объекты с множеством параметров или при необходимости извлечения нескольких значений из массивов и объектов.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Для чего нужны E.Preventdefault() и e.Stopprepagination() ?
Спросят с вероятностью 10%

e.preventDefault() и e.stopPropagation() — это методы объекта события (Event), используемые для управления поведением событий в веб-приложениях. Они позволяют контролировать стандартное поведение браузера и распространение событий в DOM-дереве.

e.preventDefault()

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

Пример:

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // Предотвращает отправку формы
  // Здесь может быть код для обработки данных формы
});

e.stopPropagation()

Останавливает дальнейшее распространение события по DOM-дереву. В DOM события распространяются тремя фазами: захват (capturing), достижение целевого элемента (target), и всплытие (bubbling). e.stopPropagation() предотвращает переход события к следующим обработчикам на текущей фазе и на других фазах.

Пример:

document.querySelector('#child').addEventListener('click', function(e) {
  e.stopPropagation(); // Останавливает распространение события клика дальше по DOM-дереву
  console.log('Клик по дочернему элементу');
});

document.querySelector('#parent').addEventListener('click', function() {
  console.log('Клик по родительскому элементу');
});

В этом примере, несмотря на то что клик происходит и на дочернем, и на родительском элементе, благодаря e.stopPropagation() в консоль будет выведено только сообщение от дочернего элемента.

Зачем они нужны

-e.preventDefault() используется для контроля над поведением браузера, чтобы предотвратить выполнение действий по умолчанию, что позволяет разработчикам реализовывать собственную логику обработки событий.
-e.stopPropagation() позволяет избежать нежелательного взаимодействия с другими обработчиками событий, расположенными выше или ниже по DOM-дереву, предотвращая таким образом возможные побочные эффекты от всплытия или захвата событий.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Ребят, напоминаю, что у нашего канала есть сайт, на котором все вопросы с собесов представлены списком, вместе с видео-ответами ➡️ easyoffer.ru

Что такое прототипное наследование ?
Спросят с вероятностью 10%

Прототипное наследование — это механизм, с помощью которого объекты могут наследовать свойства и методы от других объектов. Это одна из основных особенностей языка JavaScript, отличающая его от классических моделей наследования, используемых во многих других языках программирования.

Как это работает

Каждый объект имеет специальное скрытое свойство [[Prototype]] (как правило, доступное как proto или через Object.getPrototypeOf()), которое ссылается на другой объект — его прототип. Когда вы пытаетесь получить доступ к свойству или методу объекта, и это свойство/метод не найдено в самом объекте, поиск продолжается по цепочке прототипов, пока свойство/метод не будет найден или не будет достигнут конец цепочки прототипов (прототип null).

Пример:

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  proto: animal
};

rabbit.walk(); // Animal walk
console.log(rabbit.eats); // true

В этом примере объект rabbit наследует свойство eats и метод walk от объекта animal через прототипную цепочку.

Основные принципы

1️⃣ Прототипная цепочка: Когда вы обращаетесь к свойству объекта, автоматически ищет это свойство в объекте, а затем — в его прототипах, пока не достигнет конца цепочки прототипов.
2️⃣ Object.prototype: В вершине прототипной цепочки находится Object.prototype. Он не имеет прототипа и содержит методы, доступные всем объектам, такие как toString(), hasOwnProperty() и другие.
3️⃣ Создание объектов с определённым прототипом: Для создания объектов с указанием прототипа можно использовать Object.create(proto), где proto — объект, который должен стать прототипом для нового объекта.

Отличия от классического наследования

В отличие от него, прототипное наследование не использует классы как таковые (до введения class в ES6, которые являются "синтаксическим сахаром" над прототипным наследованием). Вместо этого объекты напрямую наследуют свойства и методы от других объектов.

Прототипное наследование является мощной особенностью, позволяющей объектам наследовать поведение от других объектов. Это обеспечивает гибкость и возможности для повторного использования кода без строгой иерархии классов, характерной для классических моделей наследования.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое JSX ?
Спросят с вероятностью 10%

JSX (JavaScript XML) — это расширение синтаксиса. Оно позволяет писать структуру компонентов React с использованием синтаксиса, похожего на HTML, непосредственно файлах. Этот синтаксический сахар делает код более читабельным и удобным для разработки пользовательских интерфейсов.

Основные особенности JSX:

- Сочетание HTML и JavaScript: Позволяет использовать HTML-теги и компоненты React внутри JavaScript-кода.
- Выражения JavaScript: Можно вставлять JavaScript-выражения в фигурные скобки {}. Это позволяет динамически управлять содержимым компонентов.
- Компонентный подход: Легко создавать и использовать повторно компоненты UI, что упрощает разработку сложных пользовательских интерфейсов.
- Преобразование: Не может быть выполнен напрямую браузерами и требует преобразования в обычный JavaScript. Это обычно делается с помощью транспиляторов, таких как Babel.

Пример:

const element = <h1>Привет, мир!</h1>;

Этот пример демонстрирует JSX-элемент, который представляет собой заголовок первого уровня с текстом "Привет, мир!". В реальном JavaScript этот код будет преобразован в вызов React.createElement(), который создаёт React-элемент.

Вставка выражений:

Вы можете вставлять любые допустимые JavaScript-выражения в него, обернув их в фигурные скобки. Например:

const name = 'Иван Иванов';
const element = <h1>Привет, {name}</h1>;

Преимущества использования JSX:

✅ Наглядность: Код с ним легче читать и писать, поскольку он напоминает HTML.
✅ Мощность: Сочетает в себе преимущества JavaScript, позволяя использовать всю его выразительную мощь при описании UI.
✅ Интеграция: Плотно интегрирован с React, облегчая создание интерактивных компонентов.

JSX — это расширение синтаксиса, которое делает разработку интерфейсов на React более интуитивной и выразительной за счёт смешивания HTML-подобного кода с JavaScript. Хотя использование JSX необязательно для работы с React, оно значительно упрощает процесс разработки и повышает читабельность кода.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Как работает new ?
Спросят с вероятностью 7%

new используется для создания экземпляра объекта на основе функции-конструктора или класса. Процесс его работы можно разделить на несколько шагов:

1️⃣ Создание нового объекта: Когда вы используете его, JavaScript создаёт новый пустой объект.

2️⃣ Присвоение прототипа: Прототип созданного объекта устанавливается в значение свойства prototype функции-конструктора. Это означает, что новый объект наследует свойства и методы, определённые в прототипе конструктора.

3️⃣ Вызов функции-конструктора: Функция-конструктор вызывается с аргументами, переданными в неи, и контекстом this, установленным в только что созданный объект. Это позволяет добавлять свойства и методы непосредственно к экземпляру.

4️⃣ Возврат значения: Если функция-конструктор возвращает объект, то этот объект возвращается вместо только что созданного. Если возвращается не объект (например, примитивное значение) или функция-конструктор вообще ничего не возвращает, то возвращается созданный на шаге 1 объект.

Пример:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(Привет, меня зовут ${this.name}!);
};

// Создаём новый объект с помощью new
const person1 = new Person('Алексей', 30);

person1.greet(); // Выводит: "Привет, меня зовут Алексей!"

В этом примере new Person('Алексей', 30) создаёт новый объект, прототипом которого является Person.prototype, и вызывает функцию Person с this, указывающим на новый объект, что позволяет добавить свойства name и age к этому объекту. После этого, с новым объектом можно взаимодействовать, как с экземпляром Person, включая вызов методов, определённых в Person.prototype.

new позволяет создавать новые объекты на основе функций-конструкторов или классов, автоматически устанавливая связь между созданным объектом и прототипом конструктора, что обеспечивает наследование свойств и методов.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Как можно ускорить загрузку сайта ?
Спросят с вероятностью 7%

Ускорение загрузки сайта — крайне важный аспект веб-разработки, поскольку это напрямую влияет на пользовательский опыт и SEO. Есть множество способов оптимизации, которые могут помочь в этом:

1️⃣ Минимизация и объединение файлов: Сокращение количества файлов, которые нужно загрузить браузеру, может значительно ускорить загрузку сайта. Использование инструментов для минимизации (сжатия) этих файлов уменьшает их размер.

2️⃣ Асинхронная загрузка скриптов: Скрипты, загружаемые асинхронно, не блокируют отображение страницы. Это позволяет браузеру продолжать загрузку других элементов страницы, пока скрипт ещё загружается.

3️⃣ Использование кэширования браузера: Настройка сервера так, чтобы он указывал браузерам, как долго хранить файлы в кэше, может значительно ускорить повторные посещения сайта.

4️⃣ Оптимизация изображений: Изображения часто занимают большую часть размера страницы. Использование форматов, таких как WebP, которые обеспечивают меньший размер файла при сохранении качества, а также сжатие и масштабирование изображений под нужные размеры, могут значительно сократить время загрузки.

5️⃣ Использование сети доставки контента (CDN): CDN позволяет хранить копии вашего сайта на множестве серверов по всему миру, так что пользователи загружают контент с ближайшего к ним сервера.

6️⃣ Lazy loading (ленивая загрузка): Техника, при которой контент (особенно изображения и видео) на странице загружается только тогда, когда он попадает в область видимости пользователя. Это снижает начальную нагрузку на страницу.

7️⃣ Ускорение серверного ответа: Время ответа сервера может быть уменьшено за счет оптимизации сервера, использования более быстрого хостинга или оптимизации базы данных.

8️⃣ Использование HTTP/2: Протокол HTTP/2 позволяет более эффективно загружать ресурсы, благодаря мультиплексированию, сжатию заголовков и приоритизации запросов.

9️⃣ Удаление ненужных плагинов и скриптов: Ненужные плагины и скрипты могут замедлять ваш сайт, поэтому стоит регулярно пересматривать их и удалять неиспользуемые.

🔟 Использование AMP (Accelerated Mobile Pages): Если большая часть вашей аудитории использует мобильные устройства, использование AMP может ускорить загрузку страниц на этих устройствах.

Оптимизация загрузки сайта — это процесс, который требует внимания к деталям и постоянного тестирования. Использование инструментов анализа производительности, таких как Google PageSpeed Insights, помогает выявлять проблемы и предлагает конкретные рекомендации по их решению.

Для ускорения загрузки сайта нужно оптимизировать ресурсы, использовать кэширование и CDN, применять асинхронную загрузку скриптов и ленивую загрузку контента, а также рассмотреть возможность использования более быстрых технологий и протоколов. Это улучшит пользовательский опыт и повысит эффективность сайта.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое props ?
Спросят с вероятностью 10%

props — это сокращение от "properties" (свойства). Это концепция, используемая для передачи данных от родительского компонента к дочернему компоненту. Они являются неизменяемыми, что означает, что дочерний компонент не может напрямую изменять полученные его; вместо этого, любые изменения в данных должны происходить на уровне родительского компонента, который затем повторно передает его дочерним компонентам.

Как они работают

Когда вы создаете компонент, вы можете передать ему props следующим образом:

const ParentComponent = () => {
  return <ChildComponent name="Иван" age={30} />;
};

В этом примере, ChildComponent получает два props: name и age. Доступ к этим props внутри ChildComponent происходит так:

const ChildComponent = (props) => {
  return <h1>Привет, мое имя {props.name}, мне {props.age} лет.</h1>;
};

Особенности props

✅ Неизменяемость: Предназначены только для чтения. Это означает, что компонент не может изменить свои props, но может либо использовать их "как есть", либо использовать их для вычисления новых значений внутри компонента.
✅ Передача данных: Позволяют компонентам получать данные от родителя, что делает компоненты более гибкими и повторно используемыми.
✅ Передача функций: Через него можно передавать не только данные, но и функции, что позволяет родительскому компоненту предоставлять обработчики событий дочерним компонентам.

Пример передачи функции

const ParentComponent = () => {
  const showAlert = () => {
    alert("Приветствие от родителя!");
  };

  return <ChildComponent showAlert={showAlert} />;
};

const ChildComponent = (props) => {
  return <button onClick={props.showAlert}>Показать приветствие</button>;
};

В этом примере, функция showAlert определена в ParentComponent и передается как props в ChildComponent, который затем использует ее как обработчик события клика для кнопки.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое react ?
Спросят с вероятностью 10%

React — это декларативная, эффективная и гибкая библиотека для создания пользовательских интерфейсов. Она позволяет строить сложные интерактивные UI из небольших и изолированных частей кода, называемых "компонентами". Он был создан инженерами Facebook и впервые представлен в 2013 году.

Основные особенности React:

1️⃣ Компонентный подход: Приложения строятся из компонентов, которые содержат свой собственный стейт (состояние) и логику отображения. Компоненты могут быть повторно использованы в разных частях приложения, что повышает удобство поддержки и разработки кода.
2️⃣ Декларативность: Позволяет описывать, как компоненты интерфейса выглядят в разных состояниях, автоматически обновляя их при изменении данных. Это делает код более читаемым и упрощает процесс разработки.
3️⃣ Виртуальный DOM (VDOM): Использует концепцию виртуального DOM для повышения производительности приложения. Виртуальный DOM — это легковесная копия реального DOM-дерева в памяти, позволяющая оптимизировать обновления интерфейса за счет минимизации взаимодействия с реальным DOM.
4️⃣ Однонаправленный поток данных: В нем данные передаются от родительских компонентов к дочерним через свойства (props), что обеспечивает предсказуемость и упрощает отладку приложений.

Использование React

Широко используется для разработки как небольших, так и крупных веб-приложений, предоставляя разработчикам мощные инструменты для создания интерактивных пользовательских интерфейсов. Он может быть использован как в одностраничных приложениях (SPA), так и в многостраничных сайтах.

Также лежит в основе таких проектов, как Gatsby (статический сайт-генератор) и Next.js (фреймворк для серверного и статического рендеринга), расширяя его возможности для разработки веб-приложений.

Экосистема

Включает в себя не только саму библиотеку, но и множество связанных инструментов и библиотек, таких как:

✅ Redux/React Context для управления глобальным состоянием приложения.
✅ React Router для навигации между страницами без перезагрузки.
✅ React Native для разработки кросс-платформенных мобильных приложений с использованием JavaScript и React.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое хук ?
Спросят с вероятностью 10%

Хуки — это функции, которые позволяют "подключаться" к состоянию и жизненному циклу компонентов React из функциональных компонентов. Введение их предоставило мощный инструментарий для работы со состоянием, эффектами и другими возможностями React без необходимости преобразования функциональных компонентов в классы.

- useState: Позволяет функциональным компонентам иметь состояние.

    const [count, setCount] = useState(0);
  

- useEffect: Позволяет выполнять побочные эффекты в компоненте, такие как обращения к API, подписки и т.д. Это аналог методов жизненного цикла componentDidMount, componentDidUpdate, и componentWillUnmount в классовых компонентах.

    useEffect(() => {
    document.title = Вы нажали ${count} раз;
  }, [count]); // Эффект использует переменную состояния count
  

- useContext: Позволяет получить доступ к данным из контекста. Это упрощает передачу данных через дерево компонентов без необходимости передавать props на каждом уровне.

    const value = useContext(MyContext);
  

- useReducer: Предоставляет альтернативный способ управления состоянием, основанный на паттерне редьюсер. Это особенно полезно для управления сложным состоянием.

    const [state, dispatch] = useReducer(reducer, initialState);
  

- useCallback: Возвращает мемоизированный колбэк, который изменяется только если изменяются зависимости. Это помогает предотвратить ненужные ререндеры.

    const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);
  

- useMemo: Мемоизирует вычисляемое значение. Это помогает избежать ненужных вычислений при каждом рендере.

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  

- useRef: Возвращает изменяемый ref объект, который может быть использован для хранения значения на протяжении всего жизненного цикла компонента.

    const myRef = useRef(initialValue);
  

Хуки были введены для решения нескольких проблем:
✅ Упрощение переиспользования логики состояния между компонентами без необходимости создавать высшие порядковые компоненты или рендер-пропсы.
✅ Использование состояния и других возможностей React без написания классов.
✅ Организация логики внутри компонента по принципу использования, а не жизненного цикла.

Хуки предлагают более простой и мощный способ создания компонентов, делая код более читабельным и легко поддерживаемым.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

👾 Ребят, напоминаю, у нас есть приватные группы где мы делимся реальными собеседованиями и тестовыми заданиями. Чтобы попасть в эти в группы воспользуйтесь ботами:
🤖 Доступ к базе собесов
🤖 Доступ к базе тестовых заданий

Зачем в web-pack чанки ?
Спросят с вероятностью 3%

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

1️⃣ Ленивая загрузка (Lazy Loading)

Позволяют реализовать ленивую загрузку компонентов или модулей, то есть код загружается только тогда, когда он действительно нужен. Например, компоненты страниц, которые пользователь еще не посетил, могут быть загружены только при их первом запросе. Это снижает объем данных, необходимых для начальной загрузки приложения, и ускоряет его старт.

2️⃣ Разделение кода (Code Splitting)

Позволяет разделять код приложения на чанки с помощью разделения кода. Это может быть автоматическое разделение, основанное на анализе графа зависимостей, или явное, когда разработчик указывает, какие модули или библиотеки следует загружать отдельно. Разделение кода помогает уменьшить размер каждого чанка, что положительно сказывается на времени загрузки.

3️⃣ Кэширование

При правильной настройке чанки могут быть эффективно закэшированы браузером пользователя. Если часть кода приложения меняется редко (например, сторонние библиотеки), её можно выделить в отдельный чанк, который будет загружен один раз и сохранён в кэше браузера на долгое время. Это уменьшает объем данных, которые необходимо загружать при повторных посещениях.

4️⃣ Параллельная загрузка

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

Пример:

В конфигурации Webpack можно настроить разделение кода с помощью optimization.splitChunks, что позволяет автоматически определять и выделять общие модули в отдельные чанки.

Использование чанков значительно улучшает производительность веб-приложений за счёт оптимизации загрузки и кэширования кода. Это делает приложения быстрее и отзывчивее для конечного пользователя, обеспечивая лучший пользовательский опыт.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Зачем нужны сокеты ?
Спросят с вероятностью 3%

Сокеты — это программные интерфейсы (API), позволяющие обеспечивать взаимодействие между приложениями по сети. Они используются для создания сетевых соединений для обмена данными между клиентом и сервером или между узлами в сети. Вот основные причины, по которым сокеты являются важным инструментом в разработке сетевых приложений:

1️⃣ Обеспечение двусторонней коммуникации

Позволяют реализовать двустороннюю, непрерывную коммуникацию между клиентом и сервером. Это означает, что данные могут передаваться в обоих направлениях как постоянный поток, что идеально подходит для реалтаймовых приложений, таких как чаты, игры и системы мониторинга в реальном времени.

2️⃣ Работа в реальном времени

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

3️⃣ Поддержка множества клиентов

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

4️⃣ Гибкость и контроль

Предоставляют разработчикам большую гибкость и контроль над тем, как устанавливаются и управляются сетевые соединения. Разработчики могут определять, какие протоколы использовать (TCP, UDP и др.), как обрабатывать ошибки и потерю пакетов, а также как оптимизировать производительность для конкретных требований приложения.

5️⃣ Передача различных типов данных

С их помощью можно передавать практически любые типы данных — от простого текста до сложных двоичных форматов, таких как видео, аудио и структурированные данные. Это делает сокеты универсальным инструментом для разработки сетевых приложений.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие протоколы взаимодействия существуют ?
Спросят с вероятностью 3%

В сфере веб-разработки и сетевых технологий существует множество протоколов взаимодействия, каждый из которых предназначен для решения определённых задач. Вот некоторые из наиболее распространённых и важных протоколов:

1️⃣ HTTP (HyperText Transfer Protocol)

Это основной протокол для передачи данных в интернете, используемый для загрузки веб-страниц (HTML, CSS, JavaScript и изображений) от сервера к клиенту, обычно веб-браузеру. HTTP определяет методы (например, GET и POST), которые клиенты могут использовать для выполнения запросов к серверам.

2️⃣ HTTPS (HTTP Secure)

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

3️⃣ WebSocket

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

4️⃣ FTP (File Transfer Protocol)

Это стандартный протокол передачи файлов между компьютерами по сети. Он используется для загрузки и скачивания файлов с сервера, администрирования сайтов и управления содержимым сервера.

5️⃣ SMTP (Simple Mail Transfer Protocol)

Это протокол для отправки электронных писем. Он используется почтовыми серверами для доставки отправленных писем в почтовые ящики получателей.

6️⃣ IMAP (Internet Message Access Protocol) и POP3 (Post Office Protocol version 3)

Это протоколы, используемые для извлечения электронной почты из почтового сервера. IMAP предлагает более сложные функции по сравнению с POP3, включая возможность работы с электронной почтой непосредственно на сервере, что позволяет пользователям доступ к почте с разных устройств.

7️⃣ TCP/IP (Transmission Control Protocol/Internet Protocol)

Это основные протоколы, лежащие в основе интернета, обеспечивающие передачу данных между различными устройствами в сети. Он отвечает за установление соединения и гарантию доставки данных, в то время как IP обеспечивает адресацию и маршрутизацию пакетов данных.

8️⃣ DNS (Domain Name System)

Это система, которая переводит доменные имена в IP-адреса, позволяя пользователям легко находить веб-сайты в интернете без необходимости запоминать числовые IP-адреса.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие критерии оценки кода есть ?
Спросят с вероятностью 3%

Оценка качества кода — это важный процесс, который помогает обеспечить надёжность, читаемость и поддерживаемость программного обеспечения. Есть несколько ключевых критериев, по которым обычно оценивают качество кода:

1️⃣ Читаемость

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

2️⃣ Производительность

- Оптимизация: Код должен быть написан таким образом, чтобы максимально эффективно использовать ресурсы, минимизируя время выполнения и потребление памяти.
- Минимизация зависимостей: Избыточное использование библиотек и фреймворков может увеличить время загрузки и ухудшить производительность.

3️⃣ Поддерживаемость

- Модульность и повторное использование: Код должен быть организован так, чтобы его было легко модифицировать, расширять и повторно использовать. Использование функций, классов и модулей способствует этому.
- Тестирование: Наличие тестов (юнит-тесты, интеграционные тесты) упрощает обнаружение и исправление ошибок, а также помогает обеспечить стабильность приложения при внесении изменений.

4️⃣Безопасность

- Предотвращение уязвимостей: Код должен быть защищён от распространённых уязвимостей, таких как XSS (межсайтовый скриптинг), CSRF (межсайтовая подделка запроса) и SQL-инъекции, в случае работы с базами данных.

5️⃣ Совместимость

- Кроссбраузерность: Веб-приложения должны корректно работать в различных браузерах и на различных устройствах.
- Стандарты и спецификации: Следование стандартам веб-разработки, таким как спецификации ECMAScript, помогает обеспечить совместимость и корректное функционирование кода.

6️⃣ Эффективность разработки

- Инструменты и практики: Использование современных инструментов разработки, систем контроля версий и методологий разработки, таких как Agile или Scrum, может улучшить эффективность и качество кода.

Качество кода напрямую влияет на успех проекта, его долгосрочную поддерживаемость и удовлетворённость команды разработки. Понимание и применение этих критериев оценки помогает разработчикам писать более качественный, надёжный и безопасный код.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие популярные подходы изобрели для redux ?
Спросят с вероятностью 3%

Для упрощения работы с Redux и повышения эффективности разработки вокруг него возникло несколько популярных подходов и инструментов. Эти подходы помогают решать типичные проблемы, связанные с бойлерплейтом, управлением асинхронными операциями и повторным использованием логики. Рассмотрим некоторые из них:

1️⃣ Redux Toolkit (RTK)

Это официальный инструмент, предназначенный для упрощения работы с Redux. Он предоставляет набор утилит, которые помогают сократить количество бойлерплейта при инициализации хранилища, создании редюсеров и действий. Он включает в себя такие функции, как configureStore, createReducer, createAction, и createSlice, которые значительно упрощают процесс работы с состоянием.

2️⃣ Redux Saga

Это библиотека, предназначенная для управления асинхронными операциями (например, доступом к данным, чистыми функциями для побочных эффектов) в приложениях React с использованием Redux. Саги написаны с использованием генераторов, что облегчает управление сложными потоками асинхронных действий.

3️⃣ Redux Thunk

Это промежуточное программное обеспечение (middleware) для Redux, позволяющее диспетчеризации функций вместо действий. Это позволяет откладывать выполнение действия или диспетчеризировать только при выполнении определённых условий. Thunk часто используется для работы с асинхронными запросами.

4️⃣ Reselect

Это библиотека для создания "мемоизированных" селекторов. Селекторы позволяют вычислять производные данные, основываясь на состоянии Redux, и эффективно пересчитывать результаты только при изменении соответствующих частей состояния. Это улучшает производительность, особенно в сложных приложениях.

5️⃣ Normalizr

Это библиотека для нормализации вложенных JSON структур. В контексте Redux она помогает преобразовать вложенные данные в плоскую структуру, что упрощает хранение и манипуляцию данными в хранилище.

6️⃣ Immutable.js

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое z-index ?
Спросят с вероятностью 3%

z-index — это свойство, которое определяет порядок наложения элементов на веб-странице по оси Z (перпендикулярно экрану пользователя). Элементы с таким более высоким значением будут располагаться поверх элементов с более низким значением этого свойства, что позволяет управлять тем, как элементы перекрывают друг друга на странице.

Ключевые аспекты:

1️⃣ Только для позиционированных элементов: Работает только для элементов, у которых свойство position установлено как relative, absolute, fixed, или sticky. Для элементов с position: static (значение по умолчанию) z-index не применяется.

2️⃣ Целочисленные значения: z-index может принимать целые числа (включая отрицательные), где элементы с более высоким значением будут находиться выше элементов с более низким значением.

3️⃣ Создание контекста наложения: Каждый элемент с установленным z-index создаёт новый контекст наложения для своих дочерних элементов. Это означает, что индекс дочерних элементов будет работать относительно их ближайшего родителя с позиционированием, а не всей страницы в целом.

4️⃣ Авто: Значение по умолчанию для него — auto. Это означает, что элемент наследует порядок наложения своего родителя и не создаёт новый контекст наложения.

.background {
  position: absolute;
  z-index: 1; /* Задний фон /
}

.foreground {
  position: absolute;
  z-index: 2; / Передний план */
}

В этом примере элемент с классом .foreground будет отображаться поверх элемента с классом .background из-за более высокого значения z-index.

Важно помнить:

✅ Элементы с более высоким z-index иногда могут блокировать доступ к элементам с более низким z-index, например, при попытке взаимодействия с формой или кнопками.
✅ Безумное использование высоких значений z-index (например, z-index: 99999) может привести к сложностям с поддержкой и отладкой кода. Лучше использовать умеренные значения и хорошо продуманную структуру наложения.
✅ Порядок элементов в HTML также влияет на их наложение. По умолчанию, элементы, которые идут позже в коде, будут располагаться поверх элементов, расположенных ранее, если их z-index не изменён.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых