🤔 Что такое Git-flow?

Git-flow — это модель ветвления в Git для управления разработкой, предложенная Винсентом Дриссеном. Она включает основные ветки (main, develop) и временные ветки (feature, release, hotfix) для разработки, тестирования и исправления ошибок. Git-flow делает процесс разработки структурированным, но может быть избыточным для небольших или быстрых проектов.

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

🤔 Зачем создавались библиотеки 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;

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

🤔 Что такое делегирование?

Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков.

🚩Как работает делегирование?

Обычный способ (без делегирования)
Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую

document.querySelectorAll("button").forEach((btn) => {
  btn.addEventListener("click", () => {
    console.log("Кнопка нажата");
  });
});

Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно.
Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает.

🟠Делегирование событий (оптимальный способ)
Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {
    console.log("Кнопка нажата:", event.target.textContent);
  }
});

🟠Пример с динамическими элементами
Если мы добавляем кнопки динамически, обработчик все равно будет работать

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.classList.contains("btn")) {
    console.log("Нажата кнопка:", event.target.textContent);
  }
});

// Добавляем новую кнопку динамически
setTimeout(() => {
  const newButton = document.createElement("button");
  newButton.classList.add("btn");
  newButton.textContent = "Новая кнопка";
  document.getElementById("container").appendChild(newButton);
}, 2000);

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

🤔 Можно ли добавлять несколько заголовков h1?

Можно, но только по смыслу:
- В HTML5 допустимо несколько h1 — по одному на секцию или article.
- Главное — сохранять логичную иерархию.

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

🤔 Как защитить Cookie от JavaScript?

Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting).

🟠Используем флаг `HttpOnly` (основная защита)
HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠Используем `Secure`, чтобы cookie передавались только по HTTPS
Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠Используем `SameSite`, чтобы защититься от CSRF-атак
SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠Не храним токены в cookie (если можно)
Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

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

🤔 Как бы спроектировал приложение для автомобильного паркинга на Vue.js?

- Компоненты: ParkingLot, ParkingSpot, VehicleInfo, AdminPanel;
- Состояние: Vuex или Pinia для хранения статуса мест;
- Реальное время: WebSocket или поллинг;
- Маршруты: Vue Router;
- UI: таблица с парковочными местами и кнопки действий.

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

🤔 Как с помощью js можно передвигать вперед/назад по истории браузера?

В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history.

🟠Использование `history.back()` и `history.forward()`
Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.

history.back();    // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед

Пример кнопок "Назад" и "Вперед"

<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>

🟠Использование `history.go(n)`
Этот метод позволяет перемещаться на определенное количество шагов:
history.go(-1) – назад на 1 страницу
history.go(1) – вперед на 1 страницу
history.go(-2) – назад на 2 страницы

history.go(-2); // Перейти на две страницы назад
history.go(3);  // Перейти на три страницы вперед

🟠Получение длины истории `history.length`
Если нужно узнать, сколько страниц в истории текущей сессии:

console.log(history.length); // Количество записей в истории

🟠Манипуляции с историей: `pushState()` и `replaceState()`
Если нужно изменить URL без перезагрузки страницы, можно использовать:
history.pushState(state, title, url)
Добавляет новый URL в историю (как будто пользователь перешел по ссылке).

history.pushState({ page: 1 }, "Title 1", "/page1");

history.replaceState(state, title, url)
Заменяет текущий URL (не добавляет новую запись в историю).

history.replaceState({ page: 2 }, "Title 2", "/page2");

Пример динамического изменения истории:

document.querySelector("button").addEventListener("click", () => {
  history.pushState({ page: "about" }, "About Page", "/about");
});

🟠Отслеживание изменений истории `popstate`
Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события popstate

window.addEventListener("popstate", (event) => {
  console.log("Текущий state:", event.state);
});

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

🤔 В чём отличие между мутациями и действиями?

Мутации — это про изменение данных. Они простые и выполняются сразу. А действия — это про бизнес-логику и асинхронные операции. Действие вызывает мутацию, но само напрямую данные не меняет.

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

🤔 Из каких секций состоит компонент Vue?

- <template> — разметка;
- <script> — логика компонента;
- <style> — стили, можно использовать scoped для изоляции; Дополнительно — setup, lang, scoped, module и др.

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

🤔 Когда брать абсолютные величины а когда относительные?

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

🚩Абсолютные величины (например, px, pt, cm, in)

Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.

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

1⃣Пиксели (`px`)
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

🚩Относительные величины (например, %, em, rem, vw, vh)

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

🟠Проценты (`%`)
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

🟠Эм (`em`)
Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

🟠Рем (`rem`):
Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

🟠Вьюпорт (`vw`, `vh`):
Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

🚩Комбинированное использование

Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

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

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

- div — это блочный элемент, используется для структурирования больших участков контента;
- span — строчный элемент, применяется для выделения текста внутри других блоков без создания новой строки.

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