🤔 Что такое wrapper компонента?

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

🚩Задачи

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

🟠Добавление функциональности
Wrapper-компоненты могут добавлять новые функциональные возможности к обернутым компонентам.

🟠Стилизация
Обертка может использоваться для применения стилей к компонентам или для организации их в определенной структуре.

🟠Управление состоянием
Wrapper-компоненты могут управлять состоянием, которое затем передается обернутым компонентам через пропсы.

🚩Примеры использования

🟠Простая обертка для стилизации
Рассмотрим пример, где мы создаем обертку для применения стилей к любому компоненту.

import React from 'react';

// Wrapper-компонент для стилизации
const StyledWrapper = (props) => {
  const style = {
    border: '1px solid black',
    padding: '10px',
    margin: '10px'
  };

  return <div style={style}>{props.children}</div>;
};

// Компонент для обертки
const Content = () => {
  return <p>This is some content inside a styled wrapper.</p>;
};

// Использование Wrapper-компонента
const App = () => {
  return (
    <StyledWrapper>
      <Content />
    </StyledWrapper>
  );
};

export default App;

🟠Wrapper-компонент для управления состоянием
Рассмотрим пример, где обертка управляет состоянием и передает его обернутому компоненту через пропсы.

import React, { useState } from 'react';

// Wrapper-компонент для управления состоянием
const StateWrapper = (WrappedComponent) => {
  return (props) => {
    const [count, setCount] = useState(0);

    const increment = () => {
      setCount(count + 1);
    };

    return (
      <WrappedComponent count={count} increment={increment} {...props} />
    );
  };
};

// Обычный компонент
const Counter = ({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

// Использование Wrapper-компонента
const EnhancedCounter = StateWrapper(Counter);

const App = () => {
  return <EnhancedCounter />;
};

export default App;

🟠Wrapper-компонент для авторизации
Рассмотрим пример, где обертка проверяет, авторизован ли пользователь, и отображает либо обернутый компонент, либо сообщение о необходимости авторизации.

import React from 'react';

// Wrapper-компонент для проверки авторизации
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = /* логика проверки авторизации */ true;

    if (!isAuthenticated) {
      return <p>Please log in to view this content.</p>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Обычный компонент
const Dashboard = () => {
  return <h1>Welcome to the Dashboard</h1>;
};

// Использование Wrapper-компонента
const ProtectedDashboard = withAuth(Dashboard);

const App = () => {
  return <ProtectedDashboard />;
};

export default App;

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как делается http запрос?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 В чём разница в работе eventloop на сервере и в браузере?

Это механизм, используемый для обработки и выполнения асинхронных операций. Он позволяет JavaScript выполнять неблокирующие операции, несмотря на то, что JavaScript является однопоточным. Хотя принципы работы Event Loop в браузере и на сервере (например, в Node.js) схожи, есть некоторые важные различия в их реализации и окружении.

🚩Event Loop в браузере

В браузере Event Loop отвечает за обработку событий, выполнение асинхронного кода и обновление пользовательского интерфейса.

🟠DOM и рендеринг
Браузер должен обновлять и перерисовывать пользовательский интерфейс. Это включает в себя обработку изменений в DOM и применение стилей. Рендеринг обычно происходит между итерациями Event Loop.

🟠Очередь макрозадач
Включает такие задачи, как обработка пользовательских событий (нажатие кнопок, ввод текста), setTimeout, setInterval, сетевые запросы (XHR, fetch) и другие. Эти задачи обрабатываются в порядке их поступления.

🟠Очередь микрозадач
Включает такие задачи, как промисы (Promise), MutationObserver. Микрозадачи выполняются перед макрозадачами в рамках одной итерации Event Loop.

🟠UI события
Браузер должен обрабатывать события, связанные с пользовательским интерфейсом, такие как рендеринг и взаимодействие с пользователем.

🚩Event Loop в Node.js

Node.js, как серверная платформа, использует Event Loop для обработки асинхронных операций, таких как I/O, таймеры и сетевые запросы.

🟠Фазы Event Loop
Node.js Event Loop состоит из нескольких фаз, каждая из которых обрабатывает определённые типы задач: timers, I/O callbacks, idle, poll, check, и close callbacks.
🟠Timers
Эта фаза обрабатывает колбэки от setTimeout и setInterval.
🟠I/O callbacks
Обрабатывает почти все колбэки от асинхронных операций ввода-вывода, за исключением close callbacks, таймеров и setImmediate.
🟠Poll
Извлекает новые I/O события; выполняет I/O-колбэки (почти все, за исключением тех, которые закроют сервер); и если ничего не происходит, ждет в этой фазе.
🟠Check
Обрабатывает колбэки от setImmediate.
🟠Close callbacks
Обрабатывает колбэки от закрытия всех I/O операций.
🟠Microtasks (process.nextTick и Promises)
Выполняются после каждой фазы Event Loop, перед переходом к следующей фазе

🚩Различия

🟠Окружение
В браузере Event Loop управляет как асинхронными задачами, так и обновлением пользовательского интерфейса. В Node.js Event Loop больше ориентирован на обработку I/O операций и серверных задач.

🟠Фазы Event Loop
В браузере Event Loop менее детализирован по фазам по сравнению с Node.js. В Node.js Event Loop разделён на более детализированные фазы для обработки различных типов асинхронных задач.

🟠Микрозадачи
И в браузере, и в Node.js микрозадачи выполняются перед макрозадачами, но реализация и использование могут слегка отличаться.

🟠Рендеринг
В браузере Event Loop включает в себя шаги, связанные с рендерингом и обновлением DOM. В Node.js этого аспекта нет, так как он работает на сервере и не имеет дела с рендерингом пользовательского интерфейса.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое методология bem?

BEM (Block, Element, Modifier) — это методология для написания читаемого и структурированного CSS-кода. Блоки представляют независимые компоненты, элементы — их части, а модификаторы — изменения состояния или внешнего вида. BEM помогает упорядочить стили и улучшить масштабируемость кода.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое гибридные приложения?

Это приложения, которые сочетают в себе элементы как веб-приложений, так и нативных мобильных приложений. Они разрабатываются с использованием веб-технологий (HTML, CSS, JavaScript) и затем оборачиваются в нативные контейнеры, что позволяет запускать их на различных мобильных платформах (iOS, Android и др.).

🚩Основные характеристики

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

🟠Использование веб-технологий
Гибридные приложения разрабатываются с использованием стандартных веб-технологий (HTML, CSS, JavaScript), что упрощает процесс разработки для веб-разработчиков.

🟠Нативные контейнеры
Эти приложения оборачиваются в нативные контейнеры (например, с помощью Apache Cordova или Capacitor), что позволяет им использовать функции и API нативных платформ.

🚩Примеры технологий и фреймворков

🟠Apache Cordova (ранее PhoneGap)
Фреймворк для создания мобильных приложений с использованием веб-технологий. Позволяет оборачивать веб-приложения в нативные контейнеры.
🟠Ionic
Популярный фреймворк для разработки гибридных мобильных приложений. Основан на Angular и Cordova, но также поддерживает другие фреймворки, такие как React и Vue.
🟠Capacitor
Современная альтернатива Cordova, разработанная командой Ionic. Предоставляет более мощные и гибкие возможности для интеграции с нативными функциями.
🟠React Native
Хотя React Native обычно рассматривается как фреймворк для кроссплатформенной разработки нативных приложений, его можно использовать для создания гибридных приложений, интегрируя веб-контент.

🚩Пример создания

1⃣Установка Ionic CLI

npm install -g @ionic/cli   

2⃣Создание нового проекта

ionic start myApp tabs --type=angular   

3⃣Запуск приложения в браузере

cd myApp
ionic serve   

4⃣Сборка и запуск на мобильном устройстве

ionic capacitor add android
ionic capacitor run android   

🚩Плюсы

➕Снижение затрат на разработку
Разработка и поддержка единой кодовой базы для нескольких платформ позволяет сократить затраты на разработку и время выхода на рынок.
➕Кроссплатформенность
Возможность запуска на различных платформах без необходимости переписывать код для каждой платформы.
➕Использование существующих навыков
Веб-разработчики могут использовать свои знания HTML, CSS и JavaScript для создания мобильных приложений.

🚩Минусы

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

Ставь 👍 и забирай 📚 Базу знаний

🤔 Расскажи про области видимости?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое function expression?

Это способ определения функции в JavaScript, при котором функция создается как часть выражения и может быть присвоена переменной, объекту или передана в качестве аргумента другой функции. В отличие от Function Declaration (функционального объявления), функциональные выражения не подлежат "поднятию" (hoisting), что означает, что их можно использовать только после их определения.

🚩Примеры использования

Присваивание функции переменной

const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // 5

Анонимные функции

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Alice')); // Hello, Alice!

Именованные функции

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};

console.log(factorial(5)); // 120

Использование функции в качестве аргумента другой функции

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

IIFE (Immediately Invoked Function Expression)

(function() {
  const message = 'Hello, World!';
  console.log(message);
})();
// Hello, World!

Использование стрелочных функций

const multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 6

🚩Основные отличия

🟠Поднятие (Hoisting)
Функции, определенные с помощью функционального объявления, поднимаются, то есть могут быть вызваны до их определения в коде.

console.log(add(2, 3)); // 5

function add(a, b) {
  return a + b;
}     

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

console.log(add(2, 3)); // Ошибка: add is not defined

const add = function(a, b) {
  return a + b;
};     

🟠Именование
Обязательно имеют имя.

function subtract(a, b) {
  return a - b;
}
     

Могут быть анонимными или именованными.

const divide = function(a, b) {
  return a / b;
};     

🟠Использование в коде
Подходит для определения основных функций на верхнем уровне программы. Более гибкий способ определения функций, особенно полезен для создания замыканий, обработки событий и использования в функциональных конструкциях.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что ты знаешь про специфичность селекторов?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое function decloration?

Это способ определения функции в JavaScript, при котором функция объявляется явно с помощью ключевого слова function, за которым следует имя функции. Функции, определенные таким образом, подлежат "поднятию" (hoisting), что означает, что их можно использовать до их фактического объявления в коде.

🚩Синтаксис Function Declaration

function имяФункции(параметр1, параметр2, ...) {
  // Тело функции
  // Инструкции
}

🚩Примеры использования Function Declaration

Основное объявление функции

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Hello, Alice!

🟠Поднятие (Hoisting)
Функции, объявленные с помощью Function Declaration, поднимаются, что позволяет вызывать их до объявления в коде.

console.log(sum(2, 3)); // 5

function sum(a, b) {
  return a + b;
}

🚩Отличия между Function Declaration и Function Expression

🟠Поднятие (Hoisting)
Function Declaration: Функции поднимаются и могут быть вызваны до их объявления.

console.log(multiply(2, 3)); // 6

function multiply(a, b) {
  return a * b;
}
     

Function Expression: Функциональные выражения не поднимаются, поэтому их можно использовать только после их определения.

console.log(divide(6, 3)); // Ошибка: divide is not defined

const divide = function(a, b) {
return a / b;
};

🟠Именование
Function Declaration: Обязательно имеют имя.

function subtract(a, b) {
return a - b;
}

Function Expression: Могут быть анонимными или именованными.

const modulo = function(a, b) {
return a % b;
};

🟠Использование в коде
Function Declaration: Часто используются для определения основных функций, которые нужны на протяжении всего кода. Они удобны для структурирования кода и обеспечения доступности функций в любом месте программы.
Function Expression: Более гибкий способ определения функций, который часто используется для создания замыканий, обработки событий и в функциональных конструкциях, таких как методы массивов (map, filter и т.д.).


Function Declaration

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Hello, Alice!

Function Expression

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Alice')); // Hello, Alice!

🚩Когда использовать

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

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как отцентровать блок по горизонтали и по вертикали?

Блок можно отцентрировать с помощью flexbox (свойства justify-content: center и align-items: center) или grid. Также используются свойства position: absolute с вычислением смещения или transform: translate. Выбор метода зависит от контекста верстки.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое хостинг js?

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

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

console.log(a); // undefined
var a = 10;
console.log(a); // 10

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10

🟠Хостинг с использованием let и const
Переменные, объявленные с помощью let и const, также поднимаются, но они не инициализируются. Попытка доступа к ним до объявления приведет к ошибке ReferenceError из-за временной мертвой зоны (Temporal Dead Zone, TDZ).

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

🟠Хостинг функций
Функции, объявленные с помощью Function Declaration, поднимаются полностью, включая тело функции. Это позволяет вызывать функции до их фактического объявления в коде.

console.log(sum(2, 3)); // 5

function sum(a, b) {
  return a + b;
}

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

function sum(a, b) {
  return a + b;
}

console.log(sum(2, 3)); // 5

🟠Хостинг функциональных выражений
Функции, объявленные с помощью Function Expression, поднимаются как обычные переменные. То есть их объявления поднимаются, но сами функции остаются неинициализированными до выполнения строки, где они определены.

console.log(subtract); // undefined
console.log(subtract(5, 3)); // TypeError: subtract is not a function

var subtract = function(a, b) {
  return a - b;
};

console.log(subtract(5, 3)); // 2

🚩Важные аспекты хостинга

🟠Понимание и использование хостинга
Хостинг позволяет писать код, который может использовать функции и переменные до их фактического объявления, что может быть полезно в некоторых случаях. Однако злоупотребление этим механизмом может привести к путанице и трудноуловимым ошибкам.
🟠Лучшие практики
Рекомендуется объявлять все переменные и функции в начале их соответствующей области видимости. Это улучшает читаемость и поддержку кода. Используйте let и const вместо var, чтобы избежать проблем с хостингом и повысить безопасность и предсказуемость кода.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое inline стили, и какой они имеют приоритет?

Инлайн-стили — это CSS-правила, прописанные непосредственно в HTML-элементе через атрибут style. Они имеют более высокий приоритет, чем стили из таблиц стилей или встроенные теги <style>, но уступают !important. Использование инлайн-стилей снижает переиспользуемость и усложняет поддержку.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие отличия между новым и старым js?

JavaScript, как язык программирования, претерпел значительные изменения с момента своего создания. Основные изменения и улучшения в языке были введены с обновлениями спецификации ECMAScript (ES). Давайте рассмотрим ключевые отличия между "старым" JavaScript (ES5) и "новым" JavaScript (ES6 и более поздние версии):

🚩Основные отличия между ES5 и ES6+ (ES2015+)

🟠Объявление переменных: `var` vs `let` и `const`
ES5: Объявление переменных с помощью var. Переменные, объявленные с var, имеют функциональную область видимости (function scope) и подлежат хостингу.

var x = 10;
if (true) {
 var x = 20;
 console.log(x); // 20
}
console.log(x); // 20   

ES6+: Объявление переменных с помощью let и const. Переменные, объявленные с let и const, имеют блочную область видимости (block scope) и не подлежат хостингу в том виде, как var.

let y = 10;
if (true) {
let y = 20;
console.log(y); // 20
}
console.log(y); // 10

const z = 30;
// z = 40; // Ошибка: Assignment to constant variable.

🟠Стрелочные функции
ES5: Определение функций с использованием ключевого слова function.

var add = function(a, b) {
  return a + b;
};   

ES6+: Стрелочные функции, которые предоставляют более краткий синтаксис и не имеют собственного значения this.

const add = (a, b) => a + b;   

🟠Шаблонные строки
ES5: Конкатенация строк с использованием оператора +.

var name = 'Alice';
var greeting = 'Hello, ' + name + '!';   

ES6+: Использование шаблонных строк с обратными кавычками (`` ` ``) и интерполяцией.

const name = 'Alice';
const greeting = `Hello, ${name}!`;   

🟠Деструктуризация
ES5: Извлечение значений из массивов и объектов с использованием точечной нотации.

var arr = [1, 2, 3];
var first = arr[0];
var second = arr[1];

var obj = {a: 1, b: 2};
var a = obj.a;
var b = obj.b;   

ES6+: Деструктуризация массивов и объектов.

const [first, second] = [1, 2, 3];
const {a, b} = {a: 1, b: 2};   

🟠Промисы
ES5: Обработка асинхронных операций с использованием колбэков.

function fetchData(callback) {
setTimeout(function() {
callback('data');
}, 1000);
}

fetchData(function(data) {
console.log(data); // 'data'
});

ES6+: Введение промисов для более удобной работы с асинхронными операциями.

const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
};

fetchData().then(data => {
console.log(data); // 'data'
});

Ставь 👍 и забирай 📚 Базу знаний

🤔 Разница между margin и padding?

Margin — это внешнее пространство между элементом и его соседями, а padding — внутреннее пространство между содержимым элемента и его границей. Margin влияет на положение элемента, а padding на размер его внутренней области. Оба свойства помогают управлять расстояниями в дизайне.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 С каким селектором можно добавлять стили на каждый элемент страницы?

Чтобы добавить стили на каждый элемент страницы, можно использовать универсальный селектор *. Этот селектор выбирает все элементы в документе.

🚩Пример использования

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

🚩Объяснение

🟠Выбор всех элементов
Универсальный селектор * выбирает все элементы в DOM (Document Object Model) структуре. Это включает в себя все теги HTML, такие как <div>, <p>, <span>, <a>, и так далее.

🟠Сброс стилей
Пример кода выше сбрасывает отступы (margin) и внутренние отступы (padding) всех элементов на странице до нуля. Это часто делается для того, чтобы избежать неожиданных отступов, которые могут быть заданы по умолчанию браузером. Также устанавливается box-sizing: border-box, что изменяет модель коробки элемента, позволяя лучше контролировать размеры элементов при добавлении отступов и границ.

🟠Глобальное применение
Использование универсального селектора полезно, когда нужно задать базовые стили для всего документа. Например, это может быть полезно в начале проекта для создания единообразного внешнего вида всех элементов.

🚩Минус

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

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое псевдоклассы?

Псевдоклассы — это специальные ключевые слова в CSS, которые позволяют применять стили к элементам в определённых состояниях или на основе их позиции в документе. Например, `:hover` применяется к элементу, когда на него наведен курсор, а `:nth-child()` используется для стилизации конкретных элементов в последовательности. Они расширяют возможности CSS, добавляя динамическую стилизацию без использования JavaScript.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какое свойство позволяет вам спрятать элемент, но сохранить занимаемое им пространство на странице?

Это свойство называется visibility. Это свойство может принимать несколько значений, но основными для скрытия элемента являются visible и hidden.

.hidden-element {
    visibility: hidden;
}

🟠visible
По умолчанию, элементы имеют значение visibility: visible;, что означает, что они видимы на странице.
🟠hidden
Когда элементу назначается значение visibility: hidden;, он становится невидимым, но продолжает занимать то же пространство в макете страницы, что и когда он был видимым.

В этом примере, второй <div> с классом hidden-element скрыт, но продолжает занимать место на странице. Третий <div> расположен после него, как если бы скрытый элемент был видимым.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden-element {
            visibility: hidden;
        }
        .visible-element {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="visible-element">Этот элемент видим.</div>
    <div class="hidden-element">Этот элемент скрыт, но сохраняет место.</div>
    <div class="visible-element">Этот элемент тоже видим и расположен после скрытого элемента.</div>
</body>
</html>

🚩Зачем это нужно?

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

🚩Альтернативы

🟠display: none;
Это свойство полностью удаляет элемент из документа, как если бы его не было, освобождая занимаемое им место.
🟠opacity: 0;
Это свойство делает элемент полностью прозрачным, но элемент остается интерактивным и занимает место.

Ставь 👍 и забирай 📚 Базу знаний

🤔 E.preventDefault() и E.stopPropagation(), для чего нужны?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как сделать тень падающую от блока?

Используется свойство CSS box-shadow. Это свойство позволяет добавлять тени к элементам, создавая эффект объема и глубины.

.shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

🚩Объяснение

Основной синтаксис

box-shadow: [смещение по горизонтали] [смещение по вертикали] [радиус размытия] [радиус растяжения] [цвет];   

🟠Параметры
Смещение по горизонтали (x-offset): Определяет смещение тени по горизонтали. Положительное значение сдвигает тень вправо, отрицательное — влево.
Смещение по вертикали (y-offset): Определяет смещение тени по вертикали. Положительное значение сдвигает тень вниз, отрицательное — вверх.
Радиус размытия (blur-radius): Определяет, насколько размытой будет тень. Большее значение создаст более размытые края.
Радиус растяжения (spread-radius): Определяет, насколько тень будет увеличена или уменьшена. Положительное значение увеличивает размер тени, отрицательное — уменьшает.
Цвет (color): Определяет цвет тени. Обычно используется полупрозрачный цвет, чтобы тень выглядела естественно.

🚩Пример с разными параметрами

.shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    /* Пример тени с разными параметрами */
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
}

🚩С множественными тенями

Свойство box-shadow также поддерживает добавление нескольких теней к одному элементу. Тени разделяются запятыми.

.multi-shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
                -5px -5px 10px rgba(0, 0, 0, 0.2);
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое JSX?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний