🤔 Как работает import и export?

- export позволяет открыть переменные, функции, компоненты из модуля;
- import — подключает экспортируемое в другом файле; Работают как часть модульной системы ES6, обеспечивают разделение кода и повторное использование.

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

🤔 Как реализовать адаптивную верстку?

Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК).

🟠Гибкие сетки (Flexbox, Grid, `max-width`)
Использование max-width вместо width

.container {
  width: 100%; /* Контейнер занимает всю ширину */
  max-width: 1200px; /* Но не больше 1200px */
  margin: auto; /* Центрирование */
}

Использование Flexbox

.container {
  display: flex;
  flex-wrap: wrap; /* Перенос элементов, если не влезают */
  justify-content: space-between;
}

.item {
  width: 48%; /* Два элемента в ряд */
}

@media (max-width: 768px) {
  .item {
    width: 100%; /* Один элемент в ряд на маленьких экранах */
  }
}

Использование CSS Grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

🟠Медиа-запросы (`@media`)
Изменяют стили в зависимости от ширины экрана.

/* Десктоп (от 1024px) */
body {
  font-size: 18px;
}

/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
  body {
    font-size: 16px;
  }
}

/* Телефоны (до 767px) */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

🟠Адаптивные изображения (`srcset`, `sizes`)
Позволяет загружать разные изображения в зависимости от устройства.

<img 
  src="image-400.jpg" 
  srcset="image-800.jpg 800w, image-1200.jpg 1200w" 
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" 
  alt="Адаптивное изображение">

🟠Viewport (`meta viewport`)
Управляет масштабированием на мобильных устройствах.

<meta name="viewport" content="width=device-width, initial-scale=1">

🟠CSS-фреймворки (Bootstrap, Tailwind)
Фреймворки содержат готовые адаптивные классы.
Bootstrap (грид-система)

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">Контент</div>
    <div class="col-md-6 col-sm-12">Контент</div>
  </div>
</div>

Tailwind CSS

<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
  <div class="bg-blue-500">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
</div>

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

🤔 Кому видны данные, хранящиеся в localStorage, sessionStorage и cookies?

- localStorage и sessionStorage:
— доступны только в браузере, на текущем домене и не отправляются на сервер.
— localStorage сохраняется между сессиями, sessionStorage — только на время вкладки.
- cookies:
— могут быть доступны как JavaScript, так и отправляться на сервер при каждом запросе (если не указано HttpOnly).
— используются для авторизации, трекинга, хранения предпочтений.

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

🤔 Как работают плавающие элементы (floats)?

float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом).

Основные значения float

<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}

🟠Почему родитель "схлопывается" при `float`?
Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.

<div class="container">
  <img src="image.jpg" class="float-img">
  <p>Текст обтекает картинку.</p>
</div>

.container {
  background: lightgray;
}
.float-img {
  float: left;
}

Решение 1: overflow: hidden;

.container {
  overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}

Решение 2: clearfix (старый способ)

.container::after {
  content: "";
  display: block;
  clear: both;
}

🟠Как остановить обтекание (`clear`)?
Чтобы отменить обтекание, используется clear.

<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}
.clear {
  clear: both;
}

🚩Почему `float` устарел и что использовать вместо него?
Раньше float использовали для создания колонок и сеток, но сегодня его заменили:
Flexbox (display: flex;) – лучше для адаптивных макетов.
CSS Grid (display: grid;) – мощный инструмент для сложных сеток.

.container {
  display: flex;
  align-items: center;
}

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

🤔 Зачем нам разбивать приложение отдельно на backend и frontend?

Для масштабируемости, разделения ответственности, независимой разработки и деплоя. Это упрощает работу в команде и позволяет фронтенду использовать разные технологии (React, Vue), а бэкенду — работать через API.

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

🤔 Какие знаешь подходы по написанию css?

Существует несколько методологий и подходов к написанию CSS, которые помогают структурировать код, сделать его более читаемым, масштабируемым и поддерживаемым. Рассмотрим основные.

🟠Классический (обычный) CSS
Стандартное написание CSS без структурных ограничений.

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

🟠BEM (Block Element Modifier)
BEM — один из самых популярных методологий. Он помогает избежать конфликтов классов и улучшает читаемость кода.
- Block (Блок) — независимый компонент (.button).
- Element (Элемент) — часть блока (.button__icon).
- Modifier (Модификатор) — изменение блока (.button--primary).

<button class="button button--primary">
  <span class="button__icon"></span> Нажми меня
</button>

.button {
  background-color: gray;
  color: white;
  padding: 10px;
}

.button--primary {
  background-color: blue;
}

.button__icon {
  margin-right: 5px;
}

🟠OOCSS (Object-Oriented CSS)
OOCSS (Объектно-ориентированный CSS) предлагает разбивать стили на структуру и внешний вид, чтобы повторно использовать код.

.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.card--dark {
  background-color: black;
  color: white;
}

🟠CSS-in-JS (Styled Components, Emotion)
Этот подход популярен в React и других фреймворках, где стили пишутся внутри JavaScript.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

export default function App() {
  return <Button>Нажми меня</Button>;
}

🟠Utility-First (Tailwind CSS)
В этом подходе используются готовые утилитарные классы для быстрого стилизации.

<button class="bg-blue-500 text-white p-2 rounded">Кнопка</button>

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

🤔 Что такое SPA?

SPA (Single Page Application) — это приложение, в котором вся логика и интерфейс загружаются на одной странице, а переходы и обновления происходят без перезагрузки. Данные подгружаются через API-запросы.

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

🤔 Что происходит в момент запроса в браузере?

Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий.

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

🟠DNS-разрешение
Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера.

🟠Установление TCP-соединения
После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие:
Браузер отправляет SYN-пакет серверу.
Сервер отвечает SYN-ACK пакетом.
Браузер отправляет ACK-пакет, подтверждая установление соединения.

🟠HTTPS и SSL/TLS
Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS:
Браузер и сервер обмениваются сертификатами и выполняют шифрование данных.

🟠Отправка HTTP-запроса
Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com

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

🟠Получение и обработка HTTP-ответа
Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>
     

🟠Парсинг и рендеринг страницы
Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы.
В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки.

🟠Выполнение JavaScript
После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы.
JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки.

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

🤔 Как оптимизировать рендер в компонентах?

Чтобы избежать лишнего рендера и повысить производительность:
- Использовать React.memo() — мемоизация компонента на основе пропсов.
- Применять useMemo() — мемоизация вычисляемых значений.
- Использовать useCallback() — мемоизация колбэков, чтобы не пересоздавать функции.
- Разбивать большие компоненты на мелкие.
- Следить за key в списках (в map), чтобы избежать полного пересоздания.
- Избегать анонимных функций в render, если они передаются в потомки.
- Использовать shouldComponentUpdate в классовых компонентах или React.PureComponent.

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

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

Чтобы удалить все элементы из массива в 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); // []

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

🤔 Какие числовые значения имеют true/false?

- true → 1
- false → 0
Это часто используется при приведении типов, в логике, арифметике или при передаче булевых значений в числовой контекст.

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

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

В Vue 2 и Vue 3 можно подключать миксины (mixins), которые добавляют в компонент дополнительные методы, данные и хуки жизненного цикла.

🚩Пример в Vue 2

Миксин (myMixin.js)

export default {
  created() {
    console.log("🌍 Миксин: created");
  }
};

Компонент (MyComponent.vue)

<script>
import myMixin from "./myMixin.js";

export default {
  mixins: [myMixin],
  created() {
    console.log("📦 Компонент: created");
  }
};
</script>

Вывод в консоль при создании компонента

Миксин: created
Компонент: created

Vue 3: хуки вызываются так же
Если использовать setup(), он выполнится после хуков миксина

import { onMounted } from "vue";
export default {
  mixins: [myMixin],
  setup() {
    console.log("🚀 setup()");
  },
  mounted() {
    console.log("📦 Компонент: mounted");
  }
};

Вывод в консоль

Миксин: mounted
setup()
Компонент: mounted

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

🤔 Что такое float?

float — CSS-свойство, которое позволяет обтекать элемент другими элементами (чаще всего — текстом). Использовался для верстки до появления flex и grid. Сейчас float чаще применяется для обтекания картинок.

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

🤔 Как считается вес селектора?

Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.

( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент )

Пример

/* Специфичность: (0, 1, 0, 0) */
#header { color: red; }

/* Специфичность: (0, 0, 1, 0) */
.header { color: blue; }

/* Специфичность: (0, 0, 0, 1) */
h1 { color: green; }

🟠Примеры сравнения специфичности
Пример 1

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */

Пример 2

h1 { color: red; } /* (0,0,0,1) */
#main { color: blue; } /* (0,1,0,0) */

Пример 3 (комбинированные селекторы)

h1.title { color: red; } /* (0,0,1,1) */
#main h1 { color: blue; } /* (0,1,0,1) */

Пример 4 (инлайн-стиль всегда сильнее)

<h1 style="color: green;">Заголовок</h1>

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
#main { color: purple; } /* (0,1,0,0) */

🟠Как повысить вес селектора?
Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!).

h1 { color: red !important; } /* Всегда будет красным */

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

🤔 Приведи пример микрозадач

Примеры микрозадач в JavaScript включают колбэки, связанные с Promise (методы .then(), .catch(), .finally()), а также MutationObserver. Эти задачи добавляются в очередь микрозадач и выполняются сразу после текущего стека вызовов, но до выполнения макрозадач, таких как таймеры или события из очереди событий.

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

🤔 Как css спрайты реализуются на странице или сайте?

CSS-спрайты – это метод объединения нескольких изображений в один файл для оптимизации загрузки и отображения на веб-странице.

🚩Зачем нужны спрайты?

Уменьшают количество HTTP-запросов → вместо 10 изображений браузер загружает 1 файл
Ускоряют загрузку сайта → меньше сетевой нагрузки
Кэшируются в браузере → реже загружаются заново

🟠Создание CSS-спрайта
Допустим, у нас есть 3 иконки:
icon-home.png
icon-user.png
icon-settings.png
Мы объединяем их в один файл (sprite.png):
![sprite]

🟠Использование спрайта с CSS
Теперь нам нужно показать нужную часть изображения с помощью background-position.

.sprite {
  background: url("sprite.png") no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Позиции каждой иконки */
.icon-home { background-position: 0 0; }  /* Первая иконка */
.icon-user { background-position: -32px 0; }  /* Вторая иконка */
.icon-settings { background-position: -64px 0; }  /* Третья иконка */

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

🤔 Какой статус кода будет у эндпоинта?

Статус кода зависит от результата обработки запроса. Если запрос успешен — это обычно код 200. Если создан новый ресурс — 201. При ошибках клиентской стороны — 4xx, а при сбоях на сервере — 5xx. Точный код подбирается в зависимости от логики работы API и ситуации.

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

🤔 Что такое миксины в препроцессорах?

Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку.

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

1⃣Определение миксина

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}   

2⃣Использование миксина

.box {
    @include border-radius(10px);
}

.button {
    @include border-radius(5px);
}   

🚩Пример на LESS

1⃣Определение миксина

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

2⃣Использование миксина

.box {
.border-radius(10px);
}

.button {
.border-radius(5px);
}

🚩Пример на Stylus

1⃣Определение миксина

border-radius(radius)
  -webkit-border-radius: radius
  -moz-border-radius: radius
 border-radius: radius   

2⃣Использование миксина

.box
border-radius(10px)

.button
border-radius(5px

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

🤔 Как работает наследование в JavaScript?

JavaScript использует прототипное наследование: объекты наследуют свойства и методы от других объектов через цепочку прототипов. Современный синтаксис class является синтаксическим сахаром над этой моделью.

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