🔘Git — распределённая система контроля версий, предназначенная для отслеживания изменений в исходном коде и совместной работы над проектами.

Основные функции:
- Фиксация изменений (коммиты) с возможностью отката
- Ветвление (branches) для параллельной разработки
- Слияние изменений (merge) из разных веток
- Удалённая работа через репозитории (push/pull)

git commit -m "Add new feature"

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

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

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

🟠В React контролируемые и неконтролируемые компоненты отличаются способом управления данными формы.

Контролируемые компоненты хранят состояние в React и обновляют его через setState. Значение элемента формы полностью контролируется React.

<input 
  type="text" 
  value={this.state.value} 
  onChange={(e) => this.setState({ value: e.target.value })}
/>

Неконтролируемые компоненты используют DOM для хранения данных. Значения получают через ref после отправки формы.

<input 
  type="text" 
  ref={(input) => this.input = input} 
/>

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

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

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

Union Types (A | B) позволяют указать, что значение может принадлежать к одному из нескольких типов. Intersection Types (A & B) объединяют свойства нескольких типов в один, требуя соответствия всем указанным типам одновременно.

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

В JavaScript есть несколько способов создать пустой объект:

Литеральная нотация – самый простой и читаемый вариант:

const obj = {};

Конструктор Object – менее предпочтителен, но также работает:

const obj = new Object();

Object.create(null) – создает объект без прототипа:

const obj = Object.create(null);

Все три способа создают пустые объекты, но отличаются в деталях наследования и производительности. Литеральная нотация рекомендуется для большинства случаев.

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

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

Относительные единицы зависят от контекста:
- em – относительно размера шрифта родителя
- rem – относительно размера шрифта корневого элемента
- % – относительно размера родительского элемента
- vw/vh – относительно ширины/высоты viewport

.container {
  font-size: 1.2rem; /* 1.2 × корневой размер шрифта */
  width: 80%; /* 80% от ширины родителя */
}

Абсолютные единицы фиксированы и не зависят от окружения:
- px – пиксели
- pt – пункты (1/72 дюйма)
- cm/mm/in – физические единицы

Относительные единицы обеспечивают адаптивность, абсолютные – точный контроль.

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

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

Для открытия ссылки в новой вкладке используется атрибут target="_blank" в теге <a>. Чтобы обеспечить безопасность, рекомендуется добавлять rel="noopener noreferrer", предотвращая потенциальные уязвимости через window.opener.

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

useContext — это хук для доступа к данным контекста без пропсдриллинга.

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

const MyContext = createContext(defaultValue);

Обертывание компонентов провайдером:

<MyContext.Provider value={someValue}>
  <ChildComponent />
</MyContext.Provider>

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

const value = useContext(MyContext);

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

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

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

Для вставки видео используется тег <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 собеседования