⏩ Индексация (staging area) — промежуточная область между рабочим каталогом и репозиторием. Содержит изменения, которые будут включены в следующий коммит.

Добавление файлов в индекс:

git add file.txt

Просмотр состояния индекса:

git status

Индекс позволяет точно контролировать, какие изменения попадут в коммит, включая частичное добавление изменений в файлах.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

forwardRef позволяет передавать ref через компонент-обёртку к дочернему DOM-элементу или классовому компоненту. Используется когда нужно получить прямой доступ к DOM-ноде или экземпляру компонента, обёрнутого в HOC.

✈️ Frontend собеседования

🟣<iframe> — это inline-фрейм, позволяющий встраивать отдельный HTML-документ в текущую страницу. От обычных фреймов (устаревших <frame>) отличается тем, что может быть размещён внутри контента, а не только в frameset.

<iframe src="page.html" width="300" height="200"></iframe>

Основные отличия:
- iframe работает как встроенный элемент, а фреймы требовали специальной структуры <frameset>
- iframe поддерживает стилизацию через CSS
- iframe безопаснее и современнее устаревших фреймов

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

➡️ Record — это utility-тип для создания объектов с заданными типами ключей и значений. Синтаксис: Record<Keys, Type>, где Keys — тип ключа, Type — тип значения.

const users: Record<string, number> = {
  'id1': 25,
  'id2': 30
};

Используется для:
- Описания словарей с единым типом значений
- Создания map-подобных структур
- Гарантирует типобезопасность при динамических ключах

Альтернатива index signatures, но с более явным синтаксисом.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

✈️ Frontend собеседования

🔹Композиция — это подход к организации логики компонентов через Composition API. Вместо опций (data, methods) используется функция setup(), где логика группируется по функциональности, а не по типам.

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return { count, double, increment };
  }
}

Преимущества:
- Гибкая организация кода
- Повторное использование логики через composable-функции
- Лучшая типобезопасность с TypeScript

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

vw (viewport width) и vh (viewport height) — относительные единицы, привязанные к размерам окна браузера. 1vw = 1% ширины, 1vh = 1% высоты viewport.

.element {
  width: 50vw; /* 50% от ширины окна */
  height: 100vh; /* 100% от высоты окна */
}

Применяются для:
- Адаптивных интерфейсов, масштабируемых относительно окна
- Создания полноэкранных секций
- Резиновых элементов без привязки к родительским блокам

Не учитывают скролл-бар, в отличие от %.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

😎Для восстановления используйте git reflog для поиска последних действий и git checkout или git reset для возврата файлов.

git reflog  # Поиск последнего коммита перед удалением
git checkout HEAD@{n} -- path/to/file  # Восстановление файла из истории

Если файлы были проиндексированы, но не закоммичены:

git fsck --lost-found  # Поиск dangling-объектов

Для восстановления после git rm используйте git reset HEAD file перед git checkout -- file.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

▶️Lazy loading — это отложенная загрузка компонентов, которая происходит только при их фактическом использовании. Реализуется через React.lazy и Suspense.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

Основные особенности:
- Уменьшает начальный размер бандла
- Загружает компоненты динамически при необходимости
- Требует обертки в <Suspense> для отображения fallback-контента

Работает только с default-экспортами в компонентах.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Атрибут required указывает, что поле формы обязательно для заполнения перед отправкой. Применяется к элементам <input>, <select> и <textarea>. Если поле пустое, браузер блокирует отправку формы и выводит сообщение об ошибке.

<input type="text" name="username" required>

Работает только с формами (<form>). Поддерживается всеми современными браузерами, но для кастомизации сообщений требуется JavaScript.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Type Guards — это механизм TypeScript, позволяющий сужать тип переменной внутри блока кода на основе проверки. Они используются для безопасной работы с объединёнными типами, гарантируя корректность типов во время выполнения.

✈️ Frontend собеседования

Set – коллекция уникальных значений. Позволяет быстро проверять наличие элемента, добавлять и удалять значения.

const set = new Set([1, 2, 3]);
set.add(4); // Добавить значение
set.has(2); // true – проверка наличия
set.delete(1); // Удалить значение

Map – коллекция пар ключ-значение, где ключом может быть любой тип. Удобен для хранения данных с нестроковыми ключами.

const map = new Map();
map.set('name', 'Alice'); // Добавить запись
map.get('name'); // 'Alice' – получить значение
map.delete('name'); // Удалить запись

Обе структуры поддерживают итерацию и имеют методы size, clear().

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Реактивные свойства автоматически обновляют представление при изменении. Vue делает их реактивными через data() или ref() / reactive() (Composition API).

data() {
  return { count: 0 } // Реактивное свойство
}

Обычные свойства (например, объявленные в `created()`) не отслеживаются Vue. Их изменения не вызывают перерисовку.

created() {
  this.nonReactive = 42 // Не реактивное
}

Реактивность работает только на инициализации. Добавление свойств после создания (this.newProp = value) требует Vue.set() или reactive().

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Анимации в CSS создаются с помощью @keyframes, где описываются промежуточные состояния, и свойства animation, которое применяет эти ключевые кадры к элементу. Для плавных переходов между состояниями также можно использовать transition, указывая свойства, длительность и функцию скорости изменения.

✈️ Frontend собеседования

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

Удалённый репозиторий (GitHub, GitLab и др.) находится на сервере и служит для синхронизации кода между участниками команды. Команды git push и git pull используются для обмена изменениями.

git remote add origin <url> # Добавить удалённый репозиторий
git push -u origin main    # Отправить изменения

Локальный репозиторий можно изменять автономно, а удалённый обеспечивает collaboration и backup.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Reconciliation — это процесс сравнения предыдущего и нового Virtual DOM для определения минимального набора изменений перед обновлением реального DOM. React использует эвристический алгоритм (Diffing Algorithm), который сравнивает элементы по типу и ключу (key).

// При разных типах элементов React пересоздаёт дерево
<div> <Counter /> </div> → <span> <Counter /> </span> // Full rebuild

При одинаковых типах React обновляет только изменённые атрибуты и дочерние элементы. Ключи (key) помогают корректно идентифицировать элементы в списках.

<ul>
  <li key="a">First</li>  // Без key может быть неоптимальное обновление
</ul>

Процесс гарантирует производительность, минимизируя операции с реальным DOM.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Атрибут autofocus автоматически устанавливает фокус на HTML-элемент (например, <input> или <button>) при загрузке страницы. Его можно добавить только к одному элементу на странице, и он работает без JavaScript, но не рекомендуется использовать в формах с несколькими полями, чтобы не нарушать UX.

✈️ Frontend собеседования

Оператор ?. позволяет безопасно обращаться к свойствам вложенных объектов, возвращая undefined при обращении к несуществующему пути, вместо ошибки.

const userName = user?.profile?.name; // undefined, если user или profile отсутствуют

Оператор ! указывает компилятору, что значение точно не null/undefined, даже если тип допускает это. Используется осторожно, так как может вызвать ошибку времени выполнения.

const element = document.getElementById('root')!; // Гарантирует, что элемент существует

?. — для безопасного доступа, ! — для явного утверждения о наличии значения.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Для остановки интервала используется clearInterval(), куда передаётся ID, возвращаемый при создании таймера. Без очистки интервал продолжает работать, что может привести к утечкам памяти.

const timerId = setInterval(() => console.log('Tick'), 1000);
clearInterval(timerId); // Остановка интервала

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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Vuex предоставляет централизованное хранилище (store) для управления глобальным состоянием приложения, где данные изменяются через предсказуемые мутации (mutations), а асинхронные операции выполняются с помощью действий (actions). Компоненты получают доступ к состоянию через геттеры (getters) и реагируют на изменения автоматически благодаря интеграции с реактивной системой Vue.

Для использования Vuex необходимо создать хранилище с состояниями (state), мутациями (mutations), действиями (actions) и геттерами (getters), а затем подключить его к приложению через Vue.use(Vuex).

✈️ Frontend собеседования

Для адаптивных таблиц применяют:

1. Горизонтальный скролл при переполнении

.table-container { overflow-x: auto; }

2. Трансформацию в карточки на мобильных

@media (max-width: 600px) {
  td { display: block; }
}

3. Скрытие неважных колонок

@media (max-width: 768px) {
  .secondary-column { display: none; }
}

Дополнительно используют viewport-единицы (vw) для гибких размеров ячеек и CSS Grid для сложных раскладок.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования