🤔 Для чего нужны препроцессоры CSS?

Они расширяют стандартный CSS, добавляя возможности:
- Переменные — удобно менять цвета, размеры и пр.
- Вложенность селекторов — упрощает структуру.
- Миксины и функции — переиспользуемые блоки кода.
- Условия и циклы — логика в стилях.
- Импорты — модульная структура.
Всё это делает стили более читаемыми, гибкими и поддерживаемыми.

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

🤔 Когда используются теги 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>

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

🤔 С помощью чего собирать приложения?

- Webpack — сборка модулей, ассетов;
- Parcel, Vite, Rollup — лёгкие альтернативы;
- Grunt, Gulp — для автоматизации задач;
- Babel — транспиляция кода (ES6 → ES5);
- Docker — контейнеризация и сборка окружения.

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

🤔 Расскажи о действиях в 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 выполнен"

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

🤔 Как узнать, что iframe загрузился?

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

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

🤔 Что такое псевдоэлемент?

Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML.

🚩Синтаксис

Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after.

🟠Распространенные псевдоэлементы
::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.

    p::before {
    content: "«";
    color: blue;
  }
  
  p::after {
    content: "»";
    color: blue;
  }
  

::first-line: Применяет стили к первой строке текста в блочном элементе.

    p::first-line {
    font-weight: bold;
  }
  

::first-letter: Применяет стили к первой букве текста в блочном элементе.

    p::first-letter {
    font-size: 200%;
  }
  

::selection: Применяет стили к части текста, которую пользователь выделил.

    p::selection {
    background: yellow;
  }
  

🚩Особенности работы

Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";).
Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.

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

🤔 Какие модификаторы есть у v-model?

Для двусторонней привязки данных с помощью v-model есть модификаторы, позволяющие изменить стандартное поведение. Например, можно задать обновление значения только при завершении ввода, автоматически преобразовать значение в число или убрать пробелы с краёв строки. Это помогает упростить валидацию данных и уменьшить количество ошибок при вводе.

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

🤔 Почему повсеместно нужен 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, браузеры блокируют передачу банковских данных.

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

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

Плюсы:
- Централизованное хранилище данных.
- Прозрачная структура данных (весь state виден).
- Простота тестирования — вся логика сосредоточена в reducer’ах.
- Огромное сообщество, поддержка Redux Toolkit, DevTools.
Минусы:
- Много шаблонного кода (actions, reducers, types).
- Ощущается "тяжеловесным" в небольших проектах.
- Потенциальная избыточность для простых случаев.
- Работа с асинхронностью требует дополнительных библиотек (redux-thunk, redux-saga).

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

🤔 Почему у нас в 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;
}

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

🤔 Что такое шаблоны и строки?

- Шаблоны — это заготовки для HTML или текста с переменными.
- В JS часто реализуются как шаблонные строки: поддерживают интерполяцию через строка ${переменная}.

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

🤔 Как растянуть элемент на 100%?

Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.

🟠Растяжение элемента на 100% ширины (`width: 100%;`)
Элемент займет всю ширину своего родителя.

<div style="width: 300px; background: lightblue;">
  <div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>

🟠Растяжение элемента на 100% высоты (`height: 100%;`)
Элемент займет всю высоту родительского элемента.

<div style="height: 300px; background: lightblue;">
  <div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>

🟠Растяжение элемента на 100% ширины и высоты
Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

🟠Растяжение относительно окна браузера (`viewport`)
Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

Для исключения полосы прокрутки можно использовать

width: calc(100vw - 16px); /* Учитывается ширина скролла */

🟠Использование `position: absolute`
Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

🟠Растяжение внутри Flexbox-контейнера
Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

🟠Растяжение внутри Grid-контейнера
CSS Grid также позволяет растягивать элементы.

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

🟠Растяжение с учетом отступов
Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>

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

🤔 Что известно про вёрстку под разные размеры экранов?

- Используются медиа-запросы (@media).
- Применяется flexbox и grid для адаптивных макетов.
- Используются относительные единицы (%, vh, vw, em) вместо фиксированных.
- Можно применять mobile-first стратегию.

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

🤔 Что такое боксинг?

Это процесс упаковки примитивного типа данных в объект. Это делается, чтобы примитивные типы могли работать как объекты в тех ситуациях, где объекты необходимы, например, в коллекциях (таких как ArrayList или HashMap) или при вызове методов, ожидающих объект в качестве аргумента.

🚩Зачем нужен боксинг?

🟠Единый подход к данным
Примитивы сами по себе не являются объектами. Они имеют меньший размер и работают быстрее, но иногда нужно обернуть их в объект, чтобы пользоваться методами или хранить их в структурах данных, предназначенных для объектов.

🟠Совместимость
Во многих случаях требуется, чтобы данные могли быть использованы в объектно-ориентированных конструкциях, где примитивы недоступны.

🟠Гибкость
Примитивы нельзя присвоить переменной типа Object, а после боксинга это становится возможным.

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

Примитивные типы, такие как int, double или boolean, автоматически упаковываются в их соответствующие классы-обертки, такие как Integer, Double и Boolean. Это действие называется автобоксингом.

// Боксинг вручную
int primitiveInt = 42;
Integer boxedInt = Integer.valueOf(primitiveInt); // Боксинг

// Автобоксинг
Integer autoBoxedInt = 42; // Примитив int автоматически упакован в Integer

// Распаковка (unboxing)
int unboxedInt = autoBoxedInt; // Integer автоматически преобразован обратно в int

Коллекции в Java (например, ArrayList) работают только с объектами. Поэтому, если вы хотите сохранить int в коллекции, он автоматически упаковывается в Integer.

import java.util.ArrayList;

public class Example {
    public static void main(String[] args) {
        ArrayList<Integer> numbers = new ArrayList<>();
        numbers.add(10); // Автобоксинг: int превращается в Integer
        numbers.add(20);
        
        int num = numbers.get(0); // Авто-распаковка: Integer превращается в int
        System.out.println(num); // 10
    }
}

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

🤔 Что такое псевдоклассы?

Псевдоклассы в CSS используются для определения специальных состояний элементов. Например, :hover применяется к элементам, когда пользователь наводит на них курсор, а :first-child выбирает первый дочерний элемент в своем контейнере.

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

🤔 Как защитить 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

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

🤔 Какую проблему решает Redux?

Redux решает проблему глобального управления состоянием в React-приложениях. Он помогает:
- Избежать "prop-drilling" — передачи данных через множество компонентов.
- Централизовать и предсказуемо управлять состоянием.
- Облегчить отладку, благодаря единообразному подходу к изменениям через actions и reducers.

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

🤔 Расскажи про операторы сравнения

Операторы сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах.

🚩Разница между `==` и `===`

🟠`==` (нестрогое сравнение)
При == JavaScript приводит типы перед сравнением.

console.log(5 == "5");  // true (строка "5" приводится к числу)
console.log(0 == false); // true (false → 0)
console.log(null == undefined); // true (особый случай)

🟠`===` (строгое сравнение)
При === сравниваются и значение, и тип.

console.log(5 === "5"); // false (разные типы)
console.log(0 === false); // false (число !== логический тип)
console.log(null === undefined); // false (разные типы)

🚩🔹 Логические значения в сравнении

JavaScript приводит значения к true или false

console.log(1 == true);  // true (1 → true)
console.log(0 == false); // true (0 → false)
console.log("" == false); // true ("" → false)
console.log([] == false); // true (пустой массив → false)
console.log(null == false); // false (null не приводится к false)

🚩Особые случаи

- null == undefined → true (они считаются "похожими").
- null === undefined → false (разные типы).
- null >= 0 → true (null превращается в 0).
- null > 0 → false (но null >= 0 – true, странно, да?).

console.log(null == undefined); // true
console.log(null >= 0); // true
console.log(null > 0);  // false (WTF?)

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

🤔 Как работают computed-свойства?

- При первом обращении вызывается функция — результат сохраняется.
- При изменении зависимостей — помечается как «грязное», и при следующем обращении — пересчитывается.
- Используется для оптимизации, чтобы не вызывать вычисления каждый раз, как у methods.
Важно: computed не вызывает сайд-эффекты, его задача — вычислять значения, а не "что-то делать".

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

🤔 Как браузер понимает что картинка является картинкой?

Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее.

🟠MIME-тип (Media Type)
MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например:
- image/png → PNG
- image/jpeg → JPEG
- image/svg+xml → SVG
- image/gif → GIF
- image/webp → WebP

Content-Type: image/png

🟠Расширение файла
Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (.jpg, .png, .gif).

<img src="picture.jpg" alt="Картинка">

🟠HTML-теги и атрибуты
Когда браузер встречает в коде такие теги, как <img>, <picture>, <canvas>, он ожидает, что внутри будет изображение.

<img src="image.png" alt="Пример картинки">

🟠Формат и сигнатура файла
Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например:
- PNG-файл всегда начинается с байтов 89 50 4E 47 (что означает "PNG" в ASCII).
- JPEG — FF D8 FF.
- GIF — 47 49 46 38 (GIF89a).

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