🤔 Расскажи про области видимости

В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.

🚩Глобальная область видимости

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

var globalVar = 'Я глобальная переменная';

function testFunction() {
  console.log(globalVar); // Доступно
}

testFunction();
console.log(globalVar); // Доступно

🚩Функциональная область видимости

Переменные, объявленные с помощью var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.

function testFunction() {
  var functionVar = 'Я внутри функции';
  console.log(functionVar); // Доступно
}

testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна

🚩Блочная область видимости

Переменные, объявленные с помощью let и const, имеют область видимости, ограниченную ближайшим блоком {}.

if (true) {
  let blockVar = 'Я внутри блока';
  console.log(blockVar); // Доступно
}

console.log(blockVar); // Ошибка: переменная blockVar недоступна

🚩Область видимости модуля (Module Scope)

При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.

export const myVar = 'Я переменная из модуля';

import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"

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

🤔 В чём отличие синхронного кода от асинхронного?

Синхронный код выполняется пошагово. Асинхронный — может запускаться и завершаться позже, с использованием callback, promise или async/await.

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

🤔 Как понимают изменение состояния 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"

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

🤔 Если рассматривать HTML5 как открытую web-платформу, на чём она строится, из каких компонентов состоит?

HTML5 включает:
- Разметку и семантику (новые теги: article, nav, section);
- API (Canvas, Geolocation, Drag-and-Drop);
- Мультимедиа (<video>, <audio>);
- Storage (LocalStorage, SessionStorage, IndexedDB);
- Сетевые возможности (WebSocket, SSE, Fetch);
- Offline (Service Workers, Cache API);
- Формы и валидация (input types, pattern, required и т.д.).

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

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

Разделение на Frontend (клиент) и Backend (сервер) – это стандартный подход в современной веб-разработке. Это делает приложение гибче, масштабируемее и удобнее в разработке.

🚩Почему лучше разделять?

🟠Гибкость и масштабируемость
Можно менять Frontend и Backend независимо.
Можно использовать разные технологии (например, Vue.js + Django).
Можно легко разделить команды разработчиков.

🟠Повышенная безопасность
Frontend не имеет доступа к базе данных.
Все важные вычисления, авторизация, хранение данных происходят на сервере.
API можно защитить токенами (JWT, OAuth).

🟠Уменьшение нагрузки на клиент
Логика обработки данных выполняется на сервере.
Клиент получает уже готовые данные, а не загружает огромные файлы.

🟠Легче разрабатывать и тестировать
Можно разрабатывать Frontend и Backend независимо.
Можно подменять сервер на mock-данные во время разработки.

🚩Как они общаются? (REST API & GraphQL)
Разделённые приложения общаются через API:
REST API (GET, POST, PUT, DELETE)
GraphQL API (запросы только нужных данных)
WebSockets (реальное время, чаты, онлайн-игры)

GET https://api.example.com/users

Ответ от Backend

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

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

🤔 Если у нас есть CSS, зачем существуют теги strong, center, etc?

Некоторые теги (strong, em) имеют семантический смысл — важны для SEO и доступности. Например, strong указывает на важность, а не только жирный стиль.

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

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

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

🚩Абсолютные величины (например, px, pt, cm, in)

Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.

🚩Когда использовать

1⃣Пиксели (`px`)
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

🚩Относительные величины (например, %, em, rem, vw, vh)

Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.

🟠Проценты (`%`)
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

🟠Эм (`em`)
Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

🟠Рем (`rem`):
Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

🟠Вьюпорт (`vw`, `vh`):
Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

🚩Комбинированное использование

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

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

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

🤔 Что такое мутации (mutations) в Vuex?

Мутации — это единственный способ изменить данные в state. Они должны быть синхронными и простыми. Каждый раз, когда нужно поменять что-то в хранилище — например, добавить элемент в массив или изменить флаг — это делается через вызов мутации.

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

🤔 Что такое нечистая функция?

Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой.

🚩Признаки нечистой функции

Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)

🚩Примеры нечистых функций

Использует внешнюю переменную (зависит от внешнего состояния)

let count = 0;

function increment() {
    count += 1; 
    return count;
}

console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)

Модифицирует переданный аргумент

function addElement(arr, item) {
    arr.push(item); // изменяет оригинальный массив
    return arr;
}

let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)

Выполняет побочные эффекты (например, изменяет DOM)

function changeTitle(newTitle) {
    document.title = newTitle;
}

changeTitle("Новая страница");
console.log(document.title); // "Новая страница"

Генерирует случайное значение

function getRandomNumber() {
    return Math.random();
}

console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)

🚩Чем отличается от чистой функции?
Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния.

Чистый вариант функции addElement() (не меняет исходный массив)

function addElementPure(arr, item) {
    return [...arr, item]; // создаёт новый массив, не изменяя старый
}

let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)

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

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

Props — это механизм передачи данных между компонентами. Родитель передаёт данные дочернему компоненту через props.
Они позволяют:
- Делать компоненты гибкими и переиспользуемыми.
- Управлять поведением дочерних компонентов.
- Разделять логику отображения и данные.
Props неизменяемы — это защита от случайных изменений внутри компонентов.

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

🤔 Как бы повернул блок на 45 градусов?

Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.

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

.rotated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: rotate(45deg);
}

🚩Объяснение

Основной синтаксис
🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).

transform: rotate(угол);   

🟠Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotated-box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated-box"></div>
</body>
</html>

🚩Пояснение

🟠Свойство `transform`
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
🟠Функция rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.

🚩Использование в реальных проектах

🟠Вращение элементов
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
🟠Анимация
В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.

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

🤔 В чём заключаются недостатки SSR?

- Задержка при первом рендеринге;
- Нагрузка на сервер;
- Сложность интеграции с клиентским SPA-приложением;
- Повышенные требования к инфраструктуре.

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

🤔 Для чего нуден 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} />
))}

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

🤔 Что такое нечистая функция?

Нечистая функция — функция, которая:
- Имеет побочные эффекты (запросы, изменения внешнего состояния).
- Может возвращать разные результаты при одних и тех же входных данных.

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

🤔 Расскажи про отдельные домены для статики

Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей:
CSS, JavaScript
Изображения, видео
Шрифты, иконки

Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN.

🚩Зачем использовать отдельные домены для статики?

🟠Разгрузка основного сервера
Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее

🟠Ускорение загрузки сайта
Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно.

🟠Кэширование и CDN
Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру

🟠Уменьшение размера cookie
Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (static.example.com), это снижает трафик

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

🟠Создать поддомен для статики
Обычно статику размещают на поддомене:
static.example.com
cdn.example.com
assets.example.com

🟠Настроить веб-сервер или CDN
Если используем NGINX:

  server {
    server_name static.example.com;
    root /var/www/static;
  }

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

🤔 Является ли Service Workers частью спецификации HTML5?

Частично. Хотя они не напрямую входят в HTML5, Service Workers считаются частью современных web API, тесно связанных с HTML5 и прогрессивными веб-приложениями (PWA).

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

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation?

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

🚩Progressive Enhancement (Прогрессивное улучшение)

Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах.

🚩Graceful Degradation (Постепенное упрощение)

Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров.
Используем CSS Grid, но добавляем @supports для fallback'а на Flexbox
Приложение на React, но показываем простой HTML, если JavaScript отключён.

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

🤔 Чем отличается display: block от display: inline?

- block занимает всю ширину контейнера, начинается с новой строки;
- inline занимает только свою ширину, не разрывает поток, не принимает margin/padding по вертикали.

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

🤔 Что можешь рассказать об version?

version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API.
Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими.

🟠Семантическое версионирование (SemVer)
Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат

MAJOR.MINOR.PATCH

Пример в package.json (Node.js-проекты):

{
  "name": "my-app",
  "version": "1.2.3"
}

Команда для обновления версии в package.json

npm version major   # 2.0.0
npm version minor   # 1.3.0
npm version patch   # 1.2.4

🟠Версионирование API
При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты.

https://api.example.com/v1/users
https://api.example.com/v2/users

🟠Версионирование в Git
В Git версиями называют теги (tags), привязанные к коммитам.

git tag v1.0.0
git push origin v1.0.0

Чтобы посмотреть все версии

git tag

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

🤔 Какие есть способы автоматизации в React?

- Сборка через Create React App, Vite или Next.js.
- Тестирование через Jest, React Testing Library, Cypress.
- Линтинг и форматирование через ESLint, Prettier.
- Документирование через Storybook.
- CI/CD через GitHub Actions, GitLab CI и др.

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