🔶 Элемент <output> отображает результат вычислений или пользовательского ввода непосредственно в форме. Связывается с элементами формы через атрибут for или form, реагируя на изменения.

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="10">
  <input type="number" id="b" name="b" value="20">
  <output name="result" for="a b">30</output>
</form>

Значение output динамически обновляется при изменении связанных полей. Может использоваться с JavaScript для сложных операций.

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

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

👉 В TypeScript unknown и any позволяют обходить проверку типов, но работают по-разному.

Тип any отключает проверку типов полностью. Переменная с типом any может быть присвоена куда угодно, и с ней можно выполнять любые операции без ошибок компиляции.

let value: any = "hello";
value = 42; // OK
value.foo(); // OK (но вызовет ошибку в runtime)

Тип unknown безопаснее. Переменная с типом unknown не может быть использована без явного приведения типа или проверки.

let value: unknown = "hello";
value = 42; // OK
value.foo(); // Ошибка компиляции
if (typeof value === "string") {
  console.log(value.toUpperCase()); // OK после проверки
}

Использование unknown требует дополнительных проверок, что делает код безопаснее. any следует избегать, так как он лишает TypeScript главного преимущества — статической типизации.

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

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

Строгое сравнение (===) в JavaScript проверяет равенство значений и типов операндов, не выполняя неявного преобразования. Оно возвращает true только если оба значения одинаковы и имеют один тип.

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

🟠Во Vue 2 фильтры — это функции для форматирования данных в шаблонах. Они применяются через символ | и могут быть использованы в mustache-синтаксисе или v-bind.

// Регистрация фильтра
Vue.filter('capitalize', function(value) {
  if (!value) return '';
  return value.toString().toUpperCase();
});

<!-- Использование в шаблоне -->
<p>{{ message | capitalize }}</p>

Фильтры можно объединять в цепочки ({{ text | filterA | filterB }}) и передавать аргументы ({{ date | format('YYYY-MM-DD') }}). Во Vue 3 фильтры удалены в пользу вызовов методов или вычисляемых свойств.

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

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

🔴Свойство box-sizing определяет, как рассчитываются ширина и высота элемента — включая или исключая padding и border.

Основные значения:
- content-box (по умолчанию) — width/height задают размер содержимого, padding и border добавляются к общим размерам.
- border-box — width/height включают padding и border, упрощая расчеты макета.

.box {
  box-sizing: border-box; /* padding и border входят в общую ширину */
}

Использование border-box делает верстку более предсказуемой, так как размеры элемента не меняются при добавлении отступов или рамок.

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

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

SVG-графику можно внедрять в HTML напрямую через тег <noscript> с описанием векторных элементов или подключать как внешний файл через <img>, <object> либо CSS-свойство background-image. Для интерактивности и стилизации предпочтительно прямое встраивание SVG-кода в разметку.

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

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