🤔 Что такое CDN?

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

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

🤔 Как браузер понимает что ресурс нужно закешировать?

Браузер использует HTTP-заголовки и механизмы кэширования, чтобы решить, нужно ли сохранять ресурс (HTML, CSS, JS, изображения) и как долго его хранить.

🚩Как браузер решает, кешировать ресурс или нет?

Когда браузер загружает ресурс, сервер может сказать браузеру, как его кешировать, с помощью HTTP-заголовков.

HTTP/1.1 200 OK
Cache-Control: max-age=3600, public
ETag: "abc123"

🚩Как работают заголовки кэширования?

🟠`Cache-Control` – главный заголовок
Определяет, как долго ресурс должен храниться в кэше.

Cache-Control: max-age=86400, public

🟠`Expires` – устаревший, но ещё используется
Определяет конкретную дату, до которой браузер может использовать кэшированный ресурс.

Expires: Wed, 26 Feb 2025 12:00:00 GMT

🟠`ETag` – проверка обновлений ресурса
Позволяет браузеру узнать, изменился ли файл на сервере.

ETag: "abc123"

Если браузер снова запрашивает ресурс, он отправляет заголовок

If-None-Match: "abc123"

🟠`Last-Modified` – альтернатива `ETag`
Дата последнего изменения ресурса.

Last-Modified: Tue, 25 Feb 2025 15:30:00 GMT

Браузер может отправить запрос с

If-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMT

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

🤔 Какой метод запускает проигрывание аудио-файла?

Для воспроизведения используется метод play(), вызываемый на элементе <audio> или объекте, созданном через JavaScript.

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

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

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

🚩Используется ли это состояние в нескольких независимых компонентах?

Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux).

// Глобальное состояние (например, Context API)
const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });

  return (
    <UserContext.Provider value={user}>
      <Navbar />
      <Profile />
    </UserContext.Provider>
  );
}

function Navbar() {
  const user = useContext(UserContext);
  return <div>Привет, {user.name}!</div>;
}

function Profile() {
  const user = useContext(UserContext);
  return <div>Профиль пользователя: {user.name}</div>;
}

🚩Должно ли состояние сохраняться при переходе между страницами?

Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине
Авторизация пользователя
Темная/светлая тема приложения
Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище.

🚩Может ли состояние изменяться в одном месте, а использоваться в другом?

Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии.

const ChatContext = createContext();

function ChatProvider({ children }) {
  const [messages, setMessages] = useState([]);

  const sendMessage = (text) => {
    setMessages([...messages, { text, id: Date.now() }]);
  };

  return (
    <ChatContext.Provider value={{ messages, sendMessage }}>
      {children}
    </ChatContext.Provider>
  );
}

function ChatList() {
  const { messages } = useContext(ChatContext);
  return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}

function ChatInput() {
  const { sendMessage } = useContext(ChatContext);
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
      onKeyPress={(e) => {
        if (e.key === "Enter") {
          sendMessage(text);
          setText("");
        }
      }}
    />
  );
}

🚩Зависит ли состояние от URL (адресной строки)?

Иногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path).
ID открытого товара: /products/123
Фильтры товаров: /shop?category=shoes&sort=price
Страница чата с пользователем: /chat?user=ivan

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

🤔 Дай пояснение, для какой цели добавлены следующие элементы.

article, aside, audio, canvas, figcaption, figure, footer, header, hgroup, output, section, video
- article — самодостаточный, независимый фрагмент контента (пост, новость).
- aside — боковое или дополнительное содержимое (сайдбар, заметка).
- audio — встроенный аудиоплеер, проигрывает звук.
- canvas — холст для динамической графики, рисования.
- figcaption — подпись к изображению или другой визуализации в <figure>.
- figure — контейнер для самостоятельного медиаконтента с подписью (графики, схемы).
- footer — нижний блок страницы или раздела, часто содержит навигацию, контакты.
- header — верхний блок, заголовки, логотип, меню.
- hgroup — группировка заголовков (например, h1 и h2 вместе как один логический блок).
- output — отображение результата (например, вычислений в формах).
- section — логический блок документа (тема, раздел).
- video — встроенный видеоплеер, воспроизводит видео.

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

🤔 Что такое элемент datalist в html 5?

<datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для <input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от <select>, список остаётся необязательным — пользователь может ввести своё значение.

🚩Как работает `<datalist>`?

Пример: автодополнение города

<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">

<datalist id="cities">
  <option value="Москва">
  <option value="Санкт-Петербург">
  <option value="Казань">
  <option value="Новосибирск">
</datalist>

🚩Можно ли использовать с `type="number"`?

Нет, <datalist> не работает с type="number".
Но с type="text" и type="email" — работает отлично.

<input type="number" list="numbers">
<datalist id="numbers">
  <option value="10">
  <option value="20">
</datalist>

Рабочий вариант

<input type="text" list="numbers">

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

🤔 Примеры того, что можно использовать в useEffect помимо запросов на сервер:

- Слежение за размерами окна (event listener);
- Установка таймера или интервала;
- Работа с локальным хранилищем (localStorage);
- Изменение мета-тегов или заголовков документа;
- Анимации, интеграции с библиотеками (например, chart.js).

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

🤔 Является ли, drag and drop частью спецификации?

Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.

🚩Как работает Drag and Drop API?

В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие.

<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>

<script>
  const dragItem = document.getElementById("drag-item");
  const dropZone = document.getElementById("drop-zone");

  dragItem.addEventListener("dragstart", (event) => {
    event.dataTransfer.setData("text/plain", "Данные элемента");
  });

  dropZone.addEventListener("dragover", (event) => {
    event.preventDefault(); // Нужно, чтобы разрешить сброс
  });

  dropZone.addEventListener("drop", (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
    alert("Элемент сброшен: " + data);
  });
</script>

🚩Какие события есть в Drag and Drop?

Основные события:
dragstart — когда начали тянуть элемент.
drag — когда элемент двигается (срабатывает много раз).
dragenter — когда курсор заходит в зону сброса.
dragover — когда элемент находится над зоной (нужно preventDefault()).
dragleave — когда курсор покидает зону сброса.
drop — когда элемент отпущен в зоне сброса.
dragend — когда перетаскивание завершено (даже если не сбросили).

🚩Где используется Drag and Drop?

- Перетаскивание файлов в <input type="file"> (например, загрузка изображений).
- Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.

🚩Можно ли сделать Drag and Drop без HTML5 API?

Да, можно использовать другие методы:
Через события мыши (mousedown, mousemove, mouseup).
Через CSS position: absolute и transform.
Через JS-библиотеки (Sortable.js, React DnD, Draggable.js).
Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.

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

🤔 Что мы можем делать с помощью DevTools браузера?

- Инспектировать и изменять DOM/CSS;
- Смотреть сетевые запросы (Network);
- Отлаживать JS-код (Sources, breakpoints);
- Анализировать производительность;
- Проверять доступность и рендеринг;
- Смотреть localStorage, cookies и др.

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

🤔 Как понимают изменение состояния mobxvue?

MobX в Vue работает с реактивностью (как и Vue), но использует свою систему отслеживания изменений. Он понимает, что состояние изменилось, с помощью прокс (Proxy) и геттеров/сеттеров (get/set).

🚩Как MobX делает состояние реактивным?

В MobX основная функция для создания реактивного состояния — observable(). Она превращает объект в реактивный Proxy, который отслеживает чтение (get) и изменение (set) свойств.

import { observable } from "mobx";

const store = observable({
  count: 0,
  increment() {
    this.count++;
  },
});

console.log(store.count); // MobX "запоминает", что это свойство использовалось
store.increment(); // MobX "замечает", что свойство изменилось

🚩Как MobX понимает, что нужно обновить компонент Vue?

Vue-компоненты подписываются на реактивные свойства, когда они рендерятся внутри observer().

import { defineComponent } from "vue";
import { observer } from "mobx-vue-lite";

export default observer(defineComponent({
  setup() {
    return {
      store,
    };
  },
  template: `<div>{{ store.count }}</div>`,
}));

🚩Как MobX понимает зависимости? (Track & Re-run)

MobX автоматически отслеживает зависимости во время рендера.
Когда компонент использует store.count, MobX **"запоминает", что он зависит от count.
Когда count изменяется, MobX перерисовывает только этот компонент.

import { computed } from "mobx";

const store = observable({
  count: 1,
  get doubleCount() {
    return this.count * 2;
  },
});

console.log(store.doubleCount); // 2
store.count = 2;
console.log(store.doubleCount); // 4 (MobX понимает, что зависимость изменилась)

🚩Как MobX оптимизирует обновления? (Reactions)

MobX не просто перерисовывает всё — он оптимизирует рендеринг.
🟠autorun
запускается сразу и при изменении любого используемого свойства.
🟠reaction
запускается только когда меняется конкретное наблюдаемое свойство.
🟠when
выполняется один раз, когда условие становится true.

import { autorun } from "mobx";

const store = observable({ count: 0 });

autorun(() => {
  console.log("Count изменился:", store.count);
});

store.count = 1; // "Count изменился: 1"
store.count = 2; // "Count изменился: 2"

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

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

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

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

🤔 Какие значения будут являться falsy значениями?

В JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются "falsy" значениями. Существует всего семь таких значений:

🟠`false`
Логическое значение false.

console.log(Boolean(false)); // false    

🟠`0`
Число ноль.

console.log(Boolean(0)); // false    

🟠`-0`
Отрицательное число ноль (хотя это редко встречается на практике).

console.log(Boolean(-0)); // false    

🟠`0n`
Число BigInt с значением ноль.

console.log(Boolean(0n)); // false    

🟠`""` (пустая строка)
Строка без символов.

console.log(Boolean("")); // false    

🟠`null`
Специальное значение, обозначающее отсутствие какого-либо значения.

console.log(Boolean(null)); // false    

🟠`undefined`
Специальное значение, обозначающее необъявленное или неприсвоенное значение.

console.log(Boolean(undefined)); // false    

🟠`NaN`
Специальное значение, обозначающее не число (Not-a-Number).

console.log(Boolean(NaN)); // false    

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

🟠Проверка значений на falsy
В условиях (if statements) все falsy значения интерпретируются как false.

const values = [false, 0, -0, 0n, "", null, undefined, NaN];

values.forEach(value => {
    if (!value) {
        console.log(`${value} is falsy`);
    }
});

Примеры в условиях

if (!false) {
    console.log('false is falsy'); // выводится
}

if (!0) {
    console.log('0 is falsy'); // выводится
}

if (!"") {
    console.log('"" is falsy'); // выводится
}

if (!null) {
    console.log('null is falsy'); // выводится
}

if (!undefined) {
    console.log('undefined is falsy'); // выводится
}

if (!NaN) {
    console.log('NaN is falsy'); // выводится
}

🟠Использование в логических операторах
Falsy значения также учитываются в логических операциях.

const value = null;

const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy

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

🤔 Как удалить все элементы с массива?

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

🟠Установка длины массива в 0
JavaScript позволяет вручную изменять длину массива. Если установить длину массива равной 0, все его элементы будут удалены.

let arr = [1, 2, 3, 4, 5];
arr.length = 0;

console.log(arr); // []

🟠Присвоение пустого массива
Можно просто присвоить переменной новый пустой массив.

let arr = [1, 2, 3, 4, 5];
arr = [];

console.log(arr); // []

Пример

let arr = [1, 2, 3, 4, 5];
let reference = arr;

arr = [];
console.log(arr);       // []
console.log(reference); // [1, 2, 3, 4, 5]

🟠Использование метода `splice`
Метод splice позволяет удалять элементы из массива. Если указать удаление всех элементов, массив станет пустым.

let arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);

console.log(arr); // []

🟠Использование цикла (редко применяется)
Хотя это не самый эффективный способ, можно очистить массив с помощью цикла.

let arr = [1, 2, 3, 4, 5];
while (arr.length > 0) {
  arr.pop(); // Удаляем последний элемент
}

console.log(arr); // []

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

🤔 Как изменить направление оси flexbox контейнера?

Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов.

🚩Возможных значения flex-direction

🟠row:
Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.
🟠row-reverse:
Основная ось — горизонтальная, элементы располагаются справа налево.
🟠column:
Основная ось — вертикальная, элементы располагаются сверху вниз.
🟠column-reverse:
Основная ось — вертикальная, элементы располагаются снизу вверх.

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

Горизонтальное направление (слева направо):

.container {
    display: flex;
    flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}

Горизонтальное направление (справа налево):

.container {
    display: flex;
    flex-direction: row-reverse;
}

Вертикальное направление (сверху вниз):

.container {
    display: flex;
    flex-direction: column;
}

Вертикальное направление (снизу вверх):

.container {
    display: flex;
    flex-direction: column-reverse;
}

Пример HTML и CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Direction</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
            border: 1px solid #000;
            height: 200px;
        }
        .item {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

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

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

Потому что CSS работает по потоку сверху вниз (parent → child).
Добавление селектора на родителя вызвало бы рекурсивные циклы, так как:
- ребёнок должен знать родителя;
- родитель зависит от стилей ребёнка;
- это нарушает производительность и модель каскада.

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

🤔 С какими нововведениями es6 знаком?

ECMAScript 6 (или ES6), также известный как ECMAScript 2015, представил множество новых возможностей для JavaScript, которые сделали язык более удобным, мощным и современным. Я знаком с большинством нововведений, и ниже я подробно расскажу о самых популярных из них.

🟠`let` и `const`
До ES6 переменные создавались с помощью var. Однако у него были проблемы, такие как отсутствие блочной области видимости и возможность повторного объявления. С введением let и const эти проблемы решены.
let — для переменных, которые могут изменяться.
const — для переменных, которые нельзя переназначить (но можно изменять содержимое, если это объект или массив).

let a = 10;
a = 20; // Работает

const b = 30;
// b = 40; // Ошибка: Нельзя переназначить

🟠Стрелочные функции (Arrow Functions)
Стрелочные функции дают более лаконичный синтаксис для объявления функций. Они также не создают собственный this, а используют this из окружающего контекста.

// Обычная функция
function add(a, b) {
  return a + b;
}

// Стрелочная функция
const add = (a, b) => a + b;

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

🟠Шаблонные строки (Template Literals)
Раньше строки приходилось склеивать с помощью конкатенации (+). Шаблонные строки (обозначаются обратными кавычками ``) позволяют вставлять переменные и выражения прямо в текст.

const name = "Alice";
const message = `Привет, ${name}! Добро пожаловать.`;
console.log(message); // Привет, Alice! Добро пожаловать.

🟠Деструктуризация (Destructuring)
Деструктуризация позволяет извлекать значения из массивов или объектов и присваивать их переменным.

// Деструктуризация массива
const arr = [1, 2, 3];
const [first, second] = arr;
console.log(first, second); // 1, 2

// Деструктуризация объекта
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25

🟠Модули (Modules)
ES6 добавил встроенную поддержку модулей через import и export. Теперь код можно организовывать и повторно использовать более эффективно.

// В модуле user.js
export const greet = (name) => `Привет, ${name}`;

// В другом файле
import { greet } from './user.js';
console.log(greet("Alice")); // Привет, Alice

🟠Операторы "..." (Spread и Rest)
Оператор ... используется для работы с массивами, объектами и функциями.
Spread — для разворачивания массивов и объектов.
Rest — для сбора оставшихся элементов в массив или объект.

// Spread
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

// Rest
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]

🟠Классы (Classes)
Классы добавляют объектно-ориентированный стиль программирования. Это синтаксический сахар над прототипами.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} говорит.`);
  }
}

const dog = new Animal("Собака");
dog.speak(); // Собака говорит.

🟠Обещания (Promises)
Обещания (Promises) упрощают работу с асинхронным кодом, заменяя вложенные колбэки (callback hell).

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Данные получены"), 1000);
  });
};

fetchData().then((data) => console.log(data)); // Данные получены

🟠Итераторы и генераторы
Итераторы дают возможность обходить коллекции (например, массивы) шаг за шагом.
Генераторы — функции, которые можно приостанавливать и возобновлять.

function* numbers() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numbers();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

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

🤔 Что такое debug?

Debug (отладка) — это процесс поиска и устранения ошибок в коде. В ходе отладки разработчик пошагово проверяет выполнение программы, отслеживает значения переменных и логику исполнения.

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