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

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

📺 Уникальная база IT собеседований

456+ реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы.

Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д.

🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

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

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

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