🤔 В чем философия Redux?

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

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

🤔 Когда используются теги div и span?

<div> и <span> — это самые универсальные HTML-теги, но у них разные роли:
<div> — блочный контейнер (для структуры).
<span> — строчный контейнер (для оформления текста).

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

Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`?

<span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку.

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

Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

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

Margin (внешний отступ) определяет пространство вокруг элемента, не влияя на его внутренний размер. Padding (внутренний отступ) увеличивает пространство внутри границ элемента, увеличивая его видимый размер.

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

🤔 Когда использовать uselayuouteffect, а когда useeffect?

Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются
useEffect выполняется после рендера и отрисовки в браузере.
useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере.

То есть useLayoutEffect блокирует рендер, а useEffect — нет.

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

useEffect выполняется асинхронно, после того как браузер отрисовал страницу.
Используется для:
- Запросов к API.
- Подключения WebSocket'ов или таймеров.
- Логирования данных.
- Изменения заголовка страницы (document.title).

import { useState, useEffect } from "react";

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

  useEffect(() => {
    document.title = `Вы кликнули ${count} раз`;
  }, [count]); // Запускается после рендера

  return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}

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

useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения.
Используется для
- Синхронных манипуляций с DOM.
- Измерения размеров элементов (getBoundingClientRect).
- Анимаций (например, при расчёте позиций).

import { useEffect, useLayoutEffect, useState } from "react";

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const box = document.getElementById("box");
    setWidth(box.offsetWidth);
  }, []);

  return (
    <div>
      <div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
      <p>Ширина: {width}px</p>
    </div>
  );
}

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

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

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

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

🤔 В чём разница между js и python?

JavaScript (JS) и Python — два популярных языка программирования, но они предназначены для разных задач и имеют разные принципы работы.

🚩Где используется?
JavaScript — в основном для веб-разработки (работает в браузере, создаёт динамичные сайты).
Python — универсальный язык, применяется в бэкенде, Data Science, автоматизации, искусственном интеллекте.

🚩Как исполняется код?

JS — интерпретируется браузером, выполняется в одном потоке (использует асинхронность).
Python — интерпретируемый язык, выполняется синхронно, но можно использовать многопоточное и асинхронное программирование.

JavaScript (динамическая веб-страница)

document.querySelector("button").addEventListener("click", () => {
  alert("Привет, мир!");
});

Python (консольная программа)

name = input("Введите ваше имя: ")
print(f"Привет, {name}!")

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

🤔 Какие методы HTTP-запросов есть?

1. GET: Получение данных с сервера.
2. POST: Отправка данных на сервер.
3. PUT: Полное обновление ресурса.
4. PATCH: Частичное обновление ресурса.
5. DELETE: Удаление ресурса.
6. HEAD: Получение заголовков ответа без тела.
7. OPTIONS: Получение информации о поддерживаемых методах.
8. CONNECT, TRACE: Используются реже для специальных задач.

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

🤔 Зачем создавались библиотеки react и другие?

Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки:

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

🟠Улучшение производительности
Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким.
React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились.

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

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

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

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

export default Counter;

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

🤔 Что такое frontend?

Это часть веб-приложения, видимая пользователю. Оно включает:
1. Разметку (HTML).
2. Стили (CSS).
3. Логику взаимодействия (JavaScript). Frontend отвечает за отображение информации и обработку пользовательских действий.

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

🤔 Почему повсеместно нужен https?

HTTPS (HyperText Transfer Protocol Secure) — это безопасная версия HTTP, которая шифрует данные между браузером и сервером. Он защищает пользователей и сайты от перехвата данных, атак и подделки информации.

🚩 Главные причины использовать HTTPS

🟠Шифрование данных (Защита от перехвата)
Без HTTPS злоумышленники могут перехватить* данные, например, пароли или банковские карты.
В HTTP данные передаются открытым текстом (их легко украсть в открытых Wi-Fi).
В HTTPS данные зашифрованы с помощью SSL/TLS, и даже если их перехватят, их невозможно прочитать.

🟠Защита от атак "Человек посередине" (MITM)
Без HTTPS злоумышленник может подменить содержимое сайта.
Опасные сценарии:
Хакер в Wi-Fi кафе встраивает вредоносный код в сайт.
Вредоносный провайдер заменяет рекламу или ворует куки.

🟠Google даёт больше доверия к HTTPS-сайтам
Google понижает в поиске сайты без HTTPS, а Chrome помечает их как "Небезопасные".

🟠Обязателен для онлайн-платежей и авторизации
Для ввода паролей, карт и личных данных HTTPS обязателен по закону (например, PCI DSS для платежей).
Если сайт работает без HTTPS, браузеры блокируют передачу банковских данных.

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

🤔 Сколько есть способов что-то сделать асинхронно?

В JS основные способы работы с асинхронностью:
1. Callbacks – передача функции в аргумент (старый подход).
2. Promises – .then() / .catch() для управления асинхронным кодом.
3. Async/Await – более удобный синтаксис для работы с промисами.
4. Event Loop + Web APIs – механизм обработки асинхронных операций.
5. Web Workers – выполнение кода в отдельных потоках.
6. setTimeout / setInterval – отложенный запуск кода.

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

🤔 Расскажи о действиях в vuex

В Vuex (хранилище данных в Vue 2 и 3) actions используются для выполнения асинхронных операций, прежде чем изменить состояние (state).

🚩 Как работают actions?

🟠Определение action в `actions`
В actions передаётся объект context, из которого можно вызвать commit() для изменения state.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit("increment"); // Вызываем мутацию через 1 сек
      }, 1000);
    }
  }
});

🟠Как вызвать action?
Actions вызываются через dispatch(), а не commit().

store.dispatch("asyncIncrement");

🟠Actions с параметрами
Можно передавать параметры в dispatch(), чтобы использовать их внутри action.

actions: {
  asyncIncrement(context, payload) {
    setTimeout(() => {
      context.commit("increment");
      console.log("Задержка:", payload.delay);
    }, payload.delay);
  }
}

store.dispatch("asyncIncrement", { delay: 2000 });

🟠Возвращение `Promise` в actions
Если action должен дождаться завершения, можно вернуть Promise.

actions: {
  fetchData(context) {
    return fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(data => {
        console.log("Данные получены:", data);
      });
  }
}

store.dispatch("fetchData").then(() => {
  console.log("Данные загружены!");
});

🟠Использование `async/await` в actions
Можно использовать async/await, чтобы код выглядел чище.

actions: {
  async fetchData(context) {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Данные:", data);
  }
}

await store.dispatch("fetchData");
console.log("Данные загружены!");

🟠Actions могут вызывать другие actions
Если нужно выполнить несколько actions последовательно, можно вызывать один action внутри другого.

actions: {
  async firstAction(context) {
    console.log("Первый action выполнен");
  },
  async secondAction(context) {
    await context.dispatch("firstAction");
    console.log("Второй action выполнен");
  }
}

store.dispatch("secondAction");
// Выведет: "Первый action выполнен"
// Затем: "Второй action выполнен"

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

🤔 Что такое слоты?

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

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

🤔 Что такое семантические коммиты?

Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа.

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

🚩Формат семантического коммита

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

Основной шаблон

<тип>(<область>): <краткое описание>

🚩Основные типы коммитов

🟠feat
добавление новой функциональности
🟠fix
исправление ошибки
🟠docs
изменение документации
🟠style
исправления, не влияющие на логику (например, форматирование)
🟠refactor
переработка кода без изменения функциональности
🟠test
добавление или обновление тестов
🟠chore
изменения, не влияющие на код (например, обновление зависимостей)

🚩Примеры

1⃣Добавление новой функции

feat(auth): добавлена аутентификация через Google

2⃣Исправление ошибки

fix(login): исправлен баг с неверным редиректом

3⃣Улучшение кода без изменения

refactor(api): оптимизирован алгоритм фильтрации данных

4⃣Обновление документации

docs(readme): добавлены инструкции по развертыванию

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

🤔 Какие особенности слежения за "глубокими" объектами?

Если объект вложенный или содержит массивы, Vue может не отследить изменения в глубине, особенно в Vue 2:
- В Vue 2:
Нужно использовать watch с deep: true, но он менее эффективен — будет срабатывать на любую вложенную мелочь.
- В Vue 3:
Реактивность стала глубже и умнее благодаря Proxy. Но всё равно deep: true может потребоваться, если следить за вложенными структурами.

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

🤔 С помощью чего можно рассчитать идентификатор в js?

В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований:

🟠 Генерация UUID
UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx.
Генерация с помощью crypto.randomUUID() (современный способ)

const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid

import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

🟠Хеш-функции (SHA, MD5)
Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции.
SHA-256 через crypto.subtle

async function generateHash(input) {
    const encoder = new TextEncoder();
    const data = encoder.encode(input);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

🟠Генерация случайного идентификатора
Если нужна просто случайная строка, можно использовать Math.random().
Базовая генерация ID

const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()

function generateRandomId(length = 16) {
    const array = new Uint8Array(length);
    crypto.getRandomValues(array);
    return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

🟠Инкрементальные ID
Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик

let counter = 0;
function generateIncrementalId() {
    return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

🟠Хеширование строки (например, объекта)
Можно создать ID, основываясь на JSON-объекте.

function hashObject(obj) {
    return JSON.stringify(obj)
        .split("")
        .reduce((hash, char) => {
            return ((hash << 5) - hash) + char.charCodeAt(0);
        }, 0)
        .toString(16);
}

console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"

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

🤔 Что такое модификатор?

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

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