will-change — это CSS-свойство, которое указывает браузеру, какие свойства элемента могут измениться в будущем, позволяя заранее оптимизировать рендеринг.

.element {
  will-change: transform, opacity;
}

Использовать его стоит только для элементов, анимация или изменение которых вызывает заметные лаги. Чрезмерное применение will-change увеличивает потребление памяти, поэтому его следует включать непосредственно перед анимацией и отключать после.

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

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

Server-Side Rendering (SSR) — это процесс рендеринга React-приложения на сервере с отправкой готового HTML клиенту. Основные преимущества: улучшенная SEO-индексация, быстрая первоначальная загрузка страницы и лучшая производительность на слабых устройствах.

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

В Git хэш (SHA-1, а теперь SHA-256) — это уникальный 40-символьный идентификатор, вычисляемый на основе содержимого коммита, дерева файлов или самого объекта.

git log --pretty=format:'%H' -n 1
# Выводит хэш последнего коммита

Хэш гарантирует целостность данных: любое изменение содержимого приводит к совершенно другому хэшу. Git использует эти хэши для ссылок между коммитами, создания веток и тегов.

Переход на SHA-256 улучшил криптостойкость, хотя SHA-1 всё ещё поддерживается для совместимости.

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

Начальное значение поля ввода задаётся с помощью атрибута value для <input> и <textarea>, либо размещением текста между тегами для <textarea>.

<input type="text" value="Значение по умолчанию">
<textarea>Текст по умолчанию</textarea>

Для <select> начальное значение определяется атрибутом selected у <option>.

<select>
  <option value="1">Первый</option>
  <option value="2" selected>Второй</option>
</select>

В React/Vue начальное значение обычно управляется через состояние компонента.

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

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

Числа с плавающей точкой (float/double) — это формат представления дробных чисел в IEEE 754, где число хранится в виде мантиссы и порядка. В JavaScript все числа — 64-битные float, что может приводить к неточностям в арифметике, поэтому для точных вычислений используют методы округления или целочисленные операции.

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

Глобальная регистрация делает компонент доступным во всём приложении через Vue.component().

Vue.component('MyComponent', { /* options */ });

Локальная регистрация ограничивает область видимости компонента текущим экземпляром Vue через свойство components.

new Vue({  
  components: {  
    MyComponent: { /* options */ }  
  }  
});

Глобальная регистрация увеличивает размер сборки, так как компонент включается даже если не используется. Локальная — предпочтительна для оптимизации.

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

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

Для изменения курсора при наведении используется CSS-свойство cursor с указанием типа курсора.

.element:hover {
  cursor: pointer; /* Рука с пальцем */
}

Доступны стандартные варианты: default, pointer, text, move, not-allowed. Для кастомных изображений используется синтаксис:

.custom-cursor {
  cursor: url('cursor.png'), auto; /* Своё изображение + fallback */
}

Размер кастомного курсора ограничен 128×128px в большинстве браузеров.

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

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

Для просмотра истории коммитов используется команда git log, которая отображает хронологию с хэшами, авторами и сообщениями. Дополнительные флаги типа --oneline, --graph или -p позволяют настроить формат вывода и детализацию.

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

JSX-трансформация — это процесс преобразования JSX-синтаксиса в вызовы React.createElement(). На этапе сборки Babel или другие транспиляторы конвертируют JSX в обычный JavaScript.

// До трансформации
const element = <div className="test">Hello</div>;

// После трансформации
const element = React.createElement('div', { className: 'test' }, 'Hello');

Трансформация позволяет писать декларативный HTML-подобный код, который затем превращается в оптимизированные вызовы React API. Современные сборщики автоматически обрабатывают JSX через плагины типа @babel/plugin-transform-react-jsx.

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

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

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

<input type="text" required>
<select required>
  <option value="">Выберите</option>
</select>
<textarea required></textarea>

Браузер автоматически проверяет заполнение таких полей при отправке формы. Для кастомной валидации можно использовать JavaScript и CSS-псевдоклассы типа :invalid. Невалидные поля с required блокируют отправку формы.

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

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

Mapped types — это шаблонные типы, которые трансформируют свойства существующего типа, создавая новую модифицированную версию. Они используются для массового изменения модификаторов (readonly, optional) или преобразования типов полей без дублирования кода.

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

Синтаксис async/await упрощает работу с промисами, делая асинхронный код похожим на синхронный.

async function fetchData() {
  const response = await fetch('url'); // Ожидание выполнения промиса
  const data = await response.json(); // Ожидание преобразования
  return data;
}

Функция с async всегда возвращает промис. await можно использовать только внутри async -функций и оно приостанавливает выполнение до разрешения промиса. Ошибки обрабатываются через try/catch.

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

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

Функция var() позволяет использовать CSS-переменные (кастомные свойства), объявленные через --prefix-name.

:root {
  --main-color: #3498db; /* Объявление переменной */
}

.element {
  color: var(--main-color); /* Использование переменной */
}

Если переменная не определена, можно указать fallback-значение вторым параметром:

.element {
  background: var(--unknown-color, #f1c40f); /* Используется #f1c40f, если переменной нет */
}

Переменные вычисляются во время выполнения и поддерживают каскадирование.

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

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

Для отмены локальных изменений в файлах используется git checkout -- <file>, а для сброса проиндексированных изменений — git reset HEAD <file>. Чтобы отменить последний коммит, применяется git reset --soft HEAD~1 с сохранением изменений или git reset --hard HEAD~1 для полного удаления.

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

Компонент высшего порядка (HOC) — это функция, которая принимает компонент и возвращает новый улучшенный компонент с дополнительной логикой.

function withLogging(WrappedComponent) {
  return function(props) {
    console.log('Rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

HOC используются для повторного использования логики (логирование, авторизация, подписки). Это альтернатива хукам, но с менее явным потоком данных.

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

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

ARIA-атрибуты (Accessible Rich Internet Applications) — это набор специальных атрибутов, которые делают веб-контент доступным для вспомогательных технологий, таких как скринридеры.

<button aria-label="Закрыть меню" aria-expanded="false">×</button>

Они описывают роли (role), состояния (aria-disabled, aria-checked) и свойства элементов (aria-labelledby), когда стандартного HTML недостаточно. Например, для кастомных виджетов или динамически изменяемого контента.

<div role="alert" aria-live="assertive">Ошибка загрузки</div>

Использование ARIA обязательно для соответствия стандартам доступности (WCAG).

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

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

Абстрактные классы — это классы, которые не могут быть инстанциированы напрямую и служат шаблоном для других классов, содержа абстрактные методы (без реализации). Абстрактные методы обязательны для переопределения в дочерних классах, что гарантирует соблюдение определённой структуры.

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

WeakMap и WeakSet — это коллекции, хранящие объекты как ключи (для WeakMap) или элементы (для WeakSet) без предотвращения их сборки мусора.

const weakMap = new WeakMap();
const obj = {};
weakMap.set(obj, 'data'); // Ключ — объект

Отличие от Map/Set:
- Не поддерживают перебор методовом forEach или size
- Ключи должны быть объектами
- Автоматически удаляют записи при удалении объекта-ключа

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

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

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

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

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

Атрибут srcset используется для указания нескольких версий изображения с разным разрешением, чтобы браузер мог выбрать наиболее подходящее в зависимости от размера экрана и плотности пикселей.

<img src="image-default.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Example image">

В этом примере srcset содержит три версии изображения с указанием их ширины в пикселях. Атрибут sizes определяет, какое изображение использовать в зависимости от ширины экрана. Это улучшает производительность и адаптивность веб-страниц.

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

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