Для вставки видео используется тег <video> с атрибутом controls, чтобы отображать элементы управления.

<video width="640" height="360" controls>  
  <source src="video.mp4" type="video/mp4">  
  Ваш браузер не поддерживает видео.  
</video>

Атрибуты width и height задают размеры плеера. Тег <source> указывает путь к видео и его формат. Альтернативный текст показывается, если видео не загружается.

Для встраивания YouTube-видео используется <iframe>:

<iframe src="https://www.youtube.com/embed/ID_ВИДЕО" allowfullscreen></iframe>

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

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

В TypeScript тип переменной указывается через двоеточие после имени, например, let age: number = 25. Доступны базовые типы: string, number, boolean, а также сложные типы, такие как массивы (number[]) и пользовательские интерфейсы.

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

Метод slice()
Возвращает часть строки между указанными индексами. Отрицательные значения отсчитываются с конца строки.

const str = 'Hello, world!';  
const subStr = str.slice(0, 5); // 'Hello'

Метод substring()
Аналогичен slice(), но не поддерживает отрицательные индексы.

const subStr = str.substring(7, 12); // 'world'

Метод substr() (устаревший)
Принимает начальный индекс и длину подстроки.

const subStr = str.substr(7, 5); // 'world'

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

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

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

➡️Vue CLI — инструмент для быстрой настройки проектов на Vue. Он предоставляет готовую конфигурацию сборки (Webpack, Babel, ESLint) через шаблоны, избавляя от ручной настройки.

Основные возможности:
- Генерация проекта с предустановленными зависимостями (vue create).
- Плагины для добавления Vuex, Router, PWA и других технологий.
- Режим разработки с горячей перезагрузкой (vue serve).
- Оптимизированная сборка для продакшена (vue build).

Преимущества:
- Стандартизированная структура проекта.
- Гибкость через настройку vue.config.js.
- Интеграция с современным фронтенд-стеком (TypeScript, SCSS, Jest).

// vue.config.js  
module.exports = {  
  devServer: { port: 8080 }  
};

Упрощает разработку, обеспечивая лучшие практики из коробки.

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

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

Порядок отображения слоев управляется свойством z-index в сочетании с позиционированием (position: relative, absolute, fixed или sticky). Чем выше значение z-index, тем ближе элемент к пользователю, перекрывая другие слои.

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

1️⃣ Union Types позволяют объединять несколько типов, предоставляя возможность переменной принимать значения любого из указанных типов. Это полезно, когда значение может быть разного типа.

const value: string | number;
// Переменная value может быть строкой или числом

2️⃣ Intersection Types объединяют несколько типов в один, требуя, чтобы переменная соответствовала всем указанным типам. Это полезно для создания сложных типов.

type A = { a: string };
type B = { b: number };
type C = A & B;
// Тип C должен содержать свойства a и b

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

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

👉 HEAD в Git — указатель на текущий коммит или ветку. Он всегда показывает, где находится рабочая область (последний загруженный коммит). Если HEAD указывает на ветку, он перемещается при новых коммитах. В оторванном состоянии (detached HEAD) ссылается напрямую на коммит.

git show HEAD  # Просмотр текущего коммита

HEAD хранится в .git/HEAD и может ссылаться на другой указатель (например, ref: refs/heads/main) или хэш коммита.

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

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

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

Создание контекста:

const StateContext = React.createContext();

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

function StateProvider({ children }) {  
  const [state, setState] = useState(initialState);  
  return (  
    <StateContext.Provider value={{ state, setState }}>  
      {children}  
    </StateContext.Provider>  
  );  
}

Использование в компоненте:

const { state, setState } = useContext(StateContext);

Для сложного состояния можно использовать useReducer вместо useState. Такой подход заменяет Redux в небольших приложениях.

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

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

Внешние стили подключаются в HTML-документе с помощью тега <link> внутри раздела <head>. Указание атрибутов rel="stylesheet" и href="путь_к_файлу.css" обязательно для корректной загрузки стилей.

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

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

Простейший пример — проверка через typeof:

function printId(id: number | string) {  
  if (typeof id === 'string') {  
    console.log(id.toUpperCase());  
  } else {  
    console.log(id.toFixed(2));  
  }  
}

Пользовательские Type Guards используют предикат типа (is):

function isString(value: unknown): value is string {  
  return typeof value === 'string';  
}

Также работают с instanceof и проверкой свойств объекта. Type Guards улучшают безопасность типов и помогают избежать ошибок.

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

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

⏩Спред-оператор (...) позволяет разложить элементы массива или свойства объекта в отдельные значения. Применяется для копирования, объединения или передачи элементов в функции.

Копирование и объединение массивов:

const arr1 = [1, 2, 3];  
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

Клонирование и модификация объектов:

const obj1 = { a: 1, b: 2 };  
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

Передача элементов массива как аргументов функции:

const nums = [1, 2, 3];  
Math.max(...nums); // 3

Работает в любом итерируемом контексте, включая строки и коллекции.

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

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

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

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

▶️Для визуального скрытия элемента, оставляя его в DOM, используется свойство visibility.

.hidden-element {  
  visibility: hidden;  
}

Элемент остается на странице, занимает место, но становится невидимым. В отличие от display: none, не удаляется из потока документа.

Альтернативный вариант — прозрачность:

.transparent-element {  
  opacity: 0;  
}

Сохраняет кликабельность и взаимодействие, если не отключено pointer-events.

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

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

⏩ Индексация (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 собеседования