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 собеседования

Для отображения установленной версии Git используется команда git --version в терминале. Результат показывает текущую версию в формате git version X.Y.Z.

git --version

Эта команда работает на всех операционных системах (Windows, macOS, Linux). Если Git не установлен, система выведет ошибку или предложит установить его.

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

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

XHTML — это строгая версия HTML, соответствующая правилам XML: требует закрытия всех тегов, корректной вложенности, чувствителен к регистру и атрибутам. HTML более гибкий, допускает пропуск некоторых закрывающих тегов и менее строг к синтаксису.

XHTML обрабатывается парсерами как XML, что обеспечивает лучшую согласованность, но требует точного синтаксиса, тогда как HTML более терпим к ошибкам разметки.

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

Error Boundaries — это компоненты, которые перехватывают JavaScript-ошибки в дочерних компонентах, логируют их и отображают резервный UI вместо «поломанного» дерева компонентов.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  
  componentDidCatch(error, info) {
    logErrorToService(error, info); // Логирование ошибки
  }
  
  render() {
    return this.state.hasError 
      ? <FallbackComponent /> 
      : this.props.children;
  }
}

Работают как try/catch, но только для компонентов. Не перехватывают ошибки в:
- Обработчиках событий
- Асинхронном коде (setTimeout, промисы)
- SSR
- Внутри самого Error Boundary

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

Промисы типизируются с помощью generic-параметра Promise<T>, где T — тип значения, с которым резолвится промис.

const fetchData: Promise<string> = new Promise((resolve) => {
  resolve("Success"); // Корректно: возвращает string
});

Для ошибок используется тип Promise<T | Error>, либо отдельная обработка в catch.

async function load(): Promise<Data> {
  const response = await fetch(url);
  return response.json(); // Автоматическая проверка типа
}

Указание типа гарантирует корректность данных при then() и await.

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

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

Строгий режим — это способ сделать код более безопасным, предотвращая использование устаревших или проблемных конструкций (например, необъявленных переменных). Он включается директивой 'use strict' и вызывает явные ошибки вместо молчаливого игнорирования потенциальных багов.

Этот режим также изменяет поведение некоторых операций (например, this в функциях) и запрещает синтаксис, который может мешать оптимизациям движка JS.

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

Правило @keyframes определяет последовательность стилей на разных этапах анимации. Имя анимации задаётся разработчиком, а ключевые кадры отмечаются процентами (0% — начало, 100% — конец).

@keyframes slide-in {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

Для применения анимации используется свойство animation с указанием имени, длительности и других параметров.

.element {
  animation: slide-in 1s ease-in-out;
}

Ключевые кадры поддерживают промежуточные точки (например, 50%). Анимация автоматически интерполирует значения между кадрами.

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

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

useReducer — альтернатива useState для управления сложным состоянием. Принимает редюсер-функцию (state, action) => newState и начальное состояние, возвращает текущее состояние и метод dispatch для генерации действий.

const [state, dispatch] = useReducer(reducer, initialState);

Редюсер обрабатывает действия (обычно объекты с `type`), обновляя состояние предсказуемо. Оптимален для связанных данных или когда следующее состояние зависит от предыдущего.

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    default: return state;
  }
}

Используется для сложной логики состояния, особенно в сочетании с контекстом.

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

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

Тег <link> устанавливает связь между текущим HTML-документом и внешними ресурсами, такими как CSS-файлы, иконки или шрифты. Он размещается в <head> и чаще всего используется для подключения стилей (rel="stylesheet") или favicon (rel="icon").

Также <link> может применяться для предзагрузки ресурсов (rel="preload"), указания альтернативных версий страницы или установки отношений между документами через атрибут rel.

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

Определяет, как элемент реагирует на события мыши/тача. Основные значения:
- auto (по умолчанию) — элемент обрабатывает события как обычно
- none — полностью игнорирует события (клики, ховеры)

.button { pointer-events: none; } /* Кнопка становится "некликабельной" */

Особенности:
- Не влияет на события клавиатуры (фокус остаётся доступным)
- Позволяет "прокликивать" сквозь элементы к нижним слоям
- Часто используется для временного отключения интерактивности

Работает для SVG и HTML-элементов. В сложных случаях комбинируется с visibility или opacity.

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

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

Коммит — это snapshot (снимок) состояния репозитория на определенный момент времени. Каждый коммит сохраняет изменения в файлах, а также содержит метаданные: автора, дату, сообщение и уникальный хеш (например, a1b2c3d).

Коммиты образуют историю проекта. Их можно просматривать, откатывать или объединять. Создается коммит командой:

git commit -m "Описание изменений"

Комментарий к коммиту должен быть четким и описывать суть изменений. Для просмотра истории коммитов используется git log.

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

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