🤔 Какие проблемы решает React?

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

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

🤔 Что если микрозадача создаст еще микрозадачу?

Когда микрозадача (microtask) создаёт другую микрозадачу, обе задачи будут выполнены в том же цикле событий (event loop), прежде чем будет обработано следующее макрозадача (macrotask).

🚩Как работает цикл событий

🟠Макрозадачи (macrotasks)
Например, обработчики событий, setTimeout, setInterval.
🟠Микрозадачи (microtasks)
Например, Promises, MutationObserver, process.nextTick (в Node.js).

🚩Последовательность выполнения

1⃣Выполняется макрозадача.
2⃣Обрабатываются все микрозадачи, пока очередь микрозадач не станет пустой.
3⃣Переход к следующей макрозадаче.

console.log('Start');

setTimeout(() => {
  console.log('Macrotask: setTimeout');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('Microtask 1');
    Promise.resolve().then(() => {
      console.log('Microtask 2');
    });
  })
  .then(() => {
    console.log('Microtask 3');
  });

console.log('End');

🚩Ожидаемый результат

console.log('Start')
Выполняется сразу.
console.log('End')
Выполняется сразу после первого console.log.
Очередь макрозадач ставит функцию из setTimeout.
Очередь микрозадач добавляет первую микрозадачу из Promise.resolve().then(...).

Вывод в консоли

Start
End
Microtask 1
Microtask 2
Microtask 3
Macrotask: setTimeout

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

🤔 Что такое адаптивная верстка?

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

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

🤔 Как обратиться к дом-дереву в реакте?

В React обращаться к DOM-дереву можно несколькими способами, в зависимости от задач. Основные подходы включают использование рефов (refs) и манипуляции с элементами через стандартные методы JavaScript.

🟠Использование рефов (Refs)
Рефы позволяют получить доступ к DOM-элементам напрямую. Это особенно полезно для управления фокусом, проигрывания медиа или интеграции с библиотеками сторонних разработчиков.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Получаем доступ к DOM-элементу через реф
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

export default MyComponent;

Пример с использованием функционального компонента и хуков

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const myRef = useRef(null);

  useEffect(() => {
    // Получаем доступ к DOM-элементу через реф
    myRef.current.focus();
  }, []);

  return <input type="text" ref={myRef} />;
};

export default MyComponent;

🟠Манипуляции через стандартные методы JavaScript
Иногда нужно обращаться к DOM-элементам, используя стандартные методы, такие как document.getElementById или document.querySelector. Это не рекомендуется, так как это противоречит философии React по работе с виртуальным DOM, но может быть полезно в некоторых случаях.

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const element = document.getElementById('my-element');
    element.style.color = 'red';
  }, []);

  return <div id="my-element">Hello, world!</div>;
};

export default MyComponent;

🟠Манипуляции через хуки
React предлагает несколько хуков, которые могут быть использованы для управления жизненным циклом компонентов и обращения к DOM-элементам.
useEffect: Хук для выполнения побочных эффектов.
useLayoutEffect: Похож на useEffect, но выполняется синхронно после всех изменений DOM.

import React, { useRef, useLayoutEffect } from 'react';

const MyComponent = () => {
  const myRef = useRef(null);

  useLayoutEffect(() => {
    // Получаем доступ к DOM-элементу через реф
    myRef.current.style.color = 'blue';
  }, []);

  return <div ref={myRef}>Hello, world!</div>;
};

export default MyComponent;

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

🤔 Для чего служат vh и vw при указании размеров?

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

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

🤔 Как пользовался линтер js?

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

🚩Установка ESLint

1⃣Установка Node.js и npm
Убедитесь, что у вас установлены Node.js и npm (Node Package Manager). Их можно скачать и установить с [официального сайта Node.js].

2⃣Инициализация проекта
Если у вас еще нет проекта, создайте новый с помощью команды:

npm init -y   

3⃣Установка ESLint
Установите ESLint как dev-зависимость

npm install eslint --save-dev   

🚩Настройка ESLint

🟠Инициализация конфигурации ESLint
Запустите команду для создания файла конфигурации .eslintrc:

npx eslint --init   

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

🟠Линтинг кода
Чтобы проверить ваш код с помощью ESLint, используйте команду

npx eslint имя_файла.js   

Например, если у вас есть файл app.js, выполните

npx eslint app.js   

🟠Автоматическое исправление ошибок
ESLint может автоматически исправлять некоторые типы ошибок. Используйте флаг --fix, чтобы исправить ошибки, которые можно исправить автоматически:

npx eslint имя_файла.js --fix   

🟠Линтинг всего проекта
Вы можете линтить все файлы в проекте, добавив скрипт в package.json. Откройте package.json и добавьте следующий скрипт в раздел "scripts":

"scripts": {
    "lint": "eslint ."
}  

Теперь вы можете запускать линтер для всего проекта с помощью команды

npm run lint

🚩Пример конфигурации .eslintrc.json

Приведем пример базовой конфигурации для проекта, не использующего фреймворки

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "single"],
        "semi": ["error", "always"]
    }
}

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

🤔 Из чего строится размер элемента?

Размер элемента состоит из содержимого, внутренних отступов (padding), границ (border) и внешних отступов (margin). Суммарный размер зависит от используемой модели box-sizing.

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

🤔 Почему селекторы перенаследуются?

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

🚩Пример и объяснение

<div class="parent">
    <p>Текст в параграфе.</p>
    <div class="child">
        <p>Другой текст в параграфе.</p>
    </div>
</div>

И CSS

.parent p {
    color: blue;
    font-size: 16px;
}
.child p {
    font-size: 14px;
}

🚩Почему это важно

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

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

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

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

🤔 За что отвечает z-index?

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

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

🤔 Какое событие сработает при потери фокуса элементом формы?

Событие, которое срабатывает при потере фокуса элементом формы, называется blur.

🚩Почему нужно событие `blur`?

Событие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.
Автоматическое сохранение введенных данных при переходе на другой элемент формы.
Скрытие вспомогательной информации (например, подсказок) при уходе с элемента.
blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.

🚩Как оно работает?

blur срабатывает, когда элемент теряет фокус, то есть пользователь:
Кликнул на другой элемент.
Нажал клавишу Tab, чтобы перейти на следующий элемент.
В отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом.

🚩Как использовать `blur`?

Событие можно обрабатывать с помощью:
1. HTML-атрибутов (например, onblur).
2. JavaScript через метод addEventListener.

Пример на практике

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример blur</title>
  <script>
    function validateInput(event) {
      const input = event.target;
      if (input.value.trim() === "") {
        alert("Поле не должно быть пустым!");
      }
    }

    document.addEventListener("DOMContentLoaded", () => {
      const inputElement = document.getElementById("name");
      inputElement.addEventListener("blur", validateInput);
    });
  </script>
</head>
<body>
  <form>
    <label for="name">Введите имя:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Отправить</button>
  </form>
</body>
</html>

🚩Особенности события `blur`

🟠Не всплывает
Событие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.

   // Работает только для конкретного элемента
   element.addEventListener("blur", handler);

   // Для делегирования используют focusout
   parentElement.addEventListener("focusout", handler);
   

🟠Отличие от `change`
Событие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.

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

🤔 Какое Flexbox свойство отвечает за перенос элементов на новую строку?

Свойство flex-wrap позволяет определять, могут ли элементы переноситься на новую строку, если они не помещаются в контейнере. Это свойство управляет тем, как элементы распределяются в ограниченном пространстве.

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

🤔 Какие модификаторы есть у событий?

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

🚩`stopPropagation`

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

<div id="parent" style="padding: 20px; background: lightblue;">
  Родительский элемент
  <button id="child">Дочерний элемент</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", () => {
    alert("Событие всплыло до родителя");
  });

  document.getElementById("child").addEventListener("click", (event) => {
    alert("Событие на кнопке");
    event.stopPropagation(); // Остановим всплытие
  });
</script>

🚩`stopImmediatePropagation`

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

<button id="myButton">Нажми меня</button>

<script>
  const button = document.getElementById("myButton");

  button.addEventListener("click", () => {
    alert("Обработчик 1");
  });

  button.addEventListener("click", (event) => {
    alert("Обработчик 2");
    event.stopImmediatePropagation(); // Остановим все остальные обработчики
  });

  button.addEventListener("click", () => {
    alert("Обработчик 3"); // Этот обработчик не выполнится
  });
</script>

🚩`preventDefault`

Этот метод отменяет поведение элемента по умолчанию.
Некоторые элементы (например, ссылки или формы) имеют стандартное поведение. Например:
- Клик по ссылке ведет на новый URL.
- Отправка формы перезагружает страницу.
С помощью preventDefault можно предотвратить это поведение.

<a href="https://example.com" id="link">Перейти на сайт</a>

<script>
  const link = document.getElementById("link");

  link.addEventListener("click", (event) => {
    event.preventDefault(); // Останавливаем переход по ссылке
    alert("Поведение ссылки отменено");
  });
</script>

🚩`passive`

Это модификатор, который не является методом, а используется в настройках обработчика событий. Он указывает, что обработчик не вызывает preventDefault. Этот модификатор помогает оптимизировать обработку событий, таких как прокрутка (scroll), делая их более производительными. Некоторые браузеры при обработке событий (например, touchstart или wheel) предполагают, что вы можете использовать preventDefault. Это замедляет прокрутку, так как браузеру нужно ждать завершения вашего обработчика. Указав passive: true, вы говорите браузеру, что не собираетесь отменять поведение.

window.addEventListener("scroll", () => {
  console.log("Скролл работает");
}, { passive: true });

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

📊 Реклама в сети телеграм каналов easyoffer
✈️ Для заказа пишите @easyoffer_adv

easyoffer
Backend

Python | Вопросы
Python | Удалёнка
Python | LeetCode
Python | Тесты

Frontend | Вопросы
Frontend | Удалёнка
JavaScript | LeetCode
Frontend | Тесты

Java | Вопросы
Java | Удалёнка
Java | LeetCode
Java | Тесты

Тестировщик | Вопросы
Тестировщик | Удалёнка
Тестировщик | Тесты

Data Science | Вопросы
Data Science | Удалёнка
Data Science | Тесты

C# | Вопросы
C# | Удалёнка
C# | LeetCode
C# | Тесты

C/C++ | Вопросы
C/C++ | Удалёнка
C/C++ | LeetCode
C/C++ | Тесты

Golang | Вопросы
Golang | Удалёнка
Golang | LeetCode
Golang | Тесты

DevOps | Вопросы
DevOps | Удалёнка
DevOps | Тесты

PHP | Вопросы
PHP | Удалёнка
PHP | LeetCode
PHP | Тесты

Kotlin | Вопросы
Kotlin | Удалёнка
Kotlin | LeetCode
Kotlin | Тесты

Swift | Вопросы
Swift | Удалёнка
Swift | LeetCode
Swift | Тесты

📊 Реклама в сети телеграм каналов easyoffer
✈️ Для заказа пишите @easyoffer_adv

🤔 Как при наведении увеличить в размере элемент, не сдвигая соседние?

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

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

🤔 Как уничтожить объект web worker?

В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.

🚩Зачем уничтожать Web Worker?

Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.

🚩Как использовать `terminate()`?

Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

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

1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.
2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются.
3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker?

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

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

🤔 Как отрисовать компоненты на основе массива?

Используйте метод map, чтобы перебрать массив и для каждого элемента создать компонент. Например, в React: array.map(item => <Component key={item.id} data={item} />). Это позволяет динамически генерировать список компонентов на основе данных.

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

🤔 Чего стоит и не стоит избегать в оптимизации сайта?

🟠Оптимизация изображений
Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя.

🟠Минификация и объединение файлов
Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один.

🟠Использование CDN (Content Delivery Network)
Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов.

🟠Кэширование
На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx.

🟠Асинхронная загрузка и критический CSS
Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.

🟠Улучшение производительности сервера
Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов.

🟠Использование современных технологий
Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов.

🟠Мониторинг и анализ
Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic.

🚩Чего стоит избегать при оптимизации сайта

🟠Избегайте чрезмерной минимизации
Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку.

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

🟠Не загружайте все ресурсы сразу
Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки.

🟠Не пренебрегайте кэшированием
Отсутствие кэширования: Увеличивает время загрузки для повторных посещений.

🟠Избегайте блокирующих ресурсов
JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами.

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

🟠Избегайте чрезмерного использования плагинов
Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью.

🟠Не забывайте про оптимизацию для мобильных устройств
Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства.

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

🤔 Как добавить слушатель события?

Метод addEventListener добавляет обработчик к элементу. Укажите событие и функцию-обработчик: element.addEventListener('click', handler). Это полезно для выполнения действий при определённых событиях.

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

🤔 Чем var отличается от const ?

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

🚩Область видимости (Scope)

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

🟠Const
Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.

🚩Переназначение и изменение

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

🟠Const
Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.

🚩Поднятие (Hoisting)

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

🟠Const
Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона".

🚩Инициализация

🟠Var
Эти переменные можно объявить без инициализации, и их начальное значение будет undefined.

🟠Const
Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

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

🤔 Какие структуры данных есть в JavaScript?

Включают примитивы (string, number, boolean, null, undefined, symbol, bigint), сложные структуры (Set, Map, WeakSet, WeakMap), массивы и объекты. Они предоставляют гибкость для работы с данными.

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