🤔 Как методы будут у api?

В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными).

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

🟠`GET` – Получение данных
Запрашиваем список пользователей:

GET /users HTTP/1.1
Host: api.example.com

Ответ (JSON)

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

🟠`POST` – Создание нового ресурса
Отправляем данные нового пользователя:

POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Charlie",
  "email": "charlie@example.com"
}

Ответ (201 Created)

{
  "id": 3,
  "name": "Charlie",
  "email": "charlie@example.com"
}

🟠`PUT` – Полное обновление ресурса
Заменяем пользователя с ID 1:

PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Smith",
  "email": "alice.smith@example.com"
}

🟠`PATCH` – Частичное обновление ресурса
Меняем только имя пользователя 1, не трогая email:

PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Johnson"
}

🟠`DELETE` – Удаление ресурса
Удаляем пользователя с ID 2:

DELETE /users/2 HTTP/1.1
Host: api.example.com

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

🤔 Какие популярные форматы картинок используются в веб-верстке?

- JPEG — для фотографий;
- PNG — для изображений с прозрачностью;
- GIF — для простых анимаций;
- SVG — векторная графика, масштабируется без потери качества;
- WEBP — современный формат с хорошим сжатием и качеством.

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

🤔 Почему у нас в css нет селектора на родителе?

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

🚩Как работают селекторы в CSS?

Обычные селекторы идут от родителя к дочерним элементам.

.parent .child {
  color: red;
}

Что было бы с селектором родителя?

.child:has-parent(.parent) { 
  color: red;
}

🚩Использовать `:has()` (в современных браузерах)

В CSS4 появился :has(), который позволяет изменять родителя, если в нём есть определённый потомок.

.parent:has(.child) {
  border: 2px solid red;
}

🚩Использовать Flexbox/Grid вместо селектора родителя

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

.parent {
  display: flex;
  gap: 10px;
}

🚩Использовать JavaScript

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

document.querySelectorAll(".child").forEach(child => {
  child.parentElement.classList.add("has-child");
});

.has-child {
  border: 2px solid blue;
}

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

🤔 Какие бывают коды ответов с сервера?

- 1xx — информационные;
- 2xx — успешные (200, 201, 204);
- 3xx — перенаправления (301, 302);
- 4xx — ошибки клиента (400, 401, 403, 404);
- 5xx — ошибки сервера (500, 502, 503).

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

🤔 Какие есть значения у box-sizing?

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

🚩Возможные значения `box-sizing`

🟠`content-box`
Размеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: content-box;
   }

🟠`border-box`
width и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: border-box;
   }

🟠`inherit`
Наследует значение box-sizing от родительского элемента.

   .parent {
       box-sizing: border-box;
   }
   .child {
       box-sizing: inherit; /* Унаследует border-box */
   }

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

🤔 Что такое абсолютная ссылка?

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

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

🤔 Для чего нуден key при работе со списками?

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

🚩Почему `key` важен?

React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим.
Без key React не понимает, какие элементы изменились, удалились или добавились.
Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру.

🚩Как использовать `key` правильно?

const users = ["Alice", "Bob", "Charlie"];

function UserList() {
    return (
        <ul>
            {users.map((user, index) => (
                <li key={user}>{user}</li> // Хорошо, если `user` уникален
            ))}
        </ul>
    );
}

🚩Что будет без `key`?

Если не указать key, React выдаст предупреждение:

Warning: Each child in a list should have a unique "key" prop.

Кроме того, при изменении списка возможны проблемы с перерисовкой

{users.map((user, index) => (
    <input key={index} defaultValue={user} />
))}

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

🤔 Как организовать постраничную навигацию в Vue?

Обычно через Vue Router:
1. Создаются маршруты с компонентами.
2. Используется <router-link> для переходов.
3. Для постранички (pagination) можно:
- Передавать параметры (page, limit) через query или params.
- Следить за $route.query и загружать соответствующие данные.
- Обновлять URL при переключении страниц.
Можно использовать UI-библиотеки (например, Element UI, Vuetify) или свои компоненты.

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

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

Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают.

🚩Микро-задачи (Microtasks)

Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу.
then, catch, finally
queueMicrotask()

🚩Макро-задачи (Macrotasks)

Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче.
setTimeout
setInterval
setImmediate (Node.js)
I/O операции
Интерактивные действия, такие как клики мыши и нажатия клавиш

🚩Различия и порядок выполнения

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

setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));

setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));

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

🤔 Чем SPA отличается от классического сайта?

SPA (Single Page Application) не перезагружает страницу при переходах, а подгружает данные динамически через JS. Классический сайт перезагружает всю страницу при переходе по ссылке. SPA быстрее работает и даёт ощущение приложения.

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

🤔 Что такое flexbox?

Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки.

Главные особенности
🟠Гибкое выравнивание
элементов в строку или колонку
🟠Равномерное распределение
пространства между элементами
🟠Упрощает адаптивную верстку
без float и position
🟠Легкое центрирование
элементов

🚩Основные термины Flexbox

Когда включается display: flex;, элементы внутри него становятся флекс-элементами.

Flex-контейнер → родительский элемент (display: flex;)
Flex-элементы → дочерние элементы контейнера
Главная ось (main axis) → ось, вдоль которой расположены элементы
Поперечная ось (cross axis) → перпендикулярная ось

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

🚩Основные свойства Flexbox

🟠`display: flex;`
Включает Flexbox для контейнера.

.container {
  display: flex;
}

🟠`flex-direction` – направление оси
Определяет, как располагаются элементы (по горизонтали или вертикали).

.container {
  flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
  flex-direction: column; /* В столбик */
  flex-direction: row-reverse; /* Справа налево */
  flex-direction: column-reverse; /* Вниз-вверх */
}

🟠`justify-content` – выравнивание по главной оси

.container {
  justify-content: flex-start; /* По умолчанию, слева направо */
  justify-content: center; /* Центр */
  justify-content: flex-end; /* Справа налево */
  justify-content: space-between; /* Равномерное распределение */
  justify-content: space-around; /* С отступами */
  justify-content: space-evenly; /* Равномерные промежутки */
}

🟠`align-items` – выравнивание по поперечной оси

.container {
  align-items: stretch; /* По умолчанию (растягивает) */
  align-items: center; /* Центр по вертикали */
  align-items: flex-start; /* Вверх */
  align-items: flex-end; /* Вниз */
  align-items: baseline; /* По базовой линии текста */
}

🟠`flex-wrap` – перенос элементов на новую строку

.container {
  flex-wrap: nowrap; /* По умолчанию – все в одной строке */
  flex-wrap: wrap; /* Элементы переносятся */
  flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}

🟠`align-content` – выравнивание строк (если `flex-wrap: wrap;`)
Работает, когда элементы занимают несколько строк.

.container {
  align-content: flex-start; /* Вверх */
  align-content: flex-end; /* Вниз */
  align-content: center; /* По центру */
  align-content: space-between; /* Равномерное распределение */
  align-content: space-around; /* С отступами */
  align-content: stretch; /* Растянуть (по умолчанию) */
}

🚩Управление отдельными элементами (`flex`-элементы)

flex-grow – рост элемента

.item {
  flex-grow: 1; /* Растянется, если есть место */
}

flex-shrink – сжатие элемента

.item {
  flex-shrink: 0; /* Не уменьшаться */
}

flex-basis – начальный размер элемента

.item {
  flex-basis: 200px; /* Фиксированный размер */
}

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

🤔 Для чего нужен CDN?

CDN улучшает:
- скорость загрузки сайта за счёт геораспределения;
- устойчивость к нагрузке;
- снижение нагрузки на основной сервер;
- защиту от DDoS-атак и кэширование контента.

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