Для просмотра всех веток в репозитории используется команда git branch, которая выводит список локальных веток. Чтобы увидеть также удаленные ветки, нужно добавить флаг -a.

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

🔹Тег <nonoscript> используется для отображения контента, если JavaScript отключен в браузере. Он позволяет предоставить альтернативное содержимое или сообщение для пользователей, которые не могут или не хотят использовать JavaScript.

Пример:

<nonoscript>
  <p>Please enable JavaScript to use this website.</p>
</nonoscript>

- Контент внутри <nonoscript> отображается только при отключенном JavaScript.
- Часто используется для информирования пользователей или предоставления базовой функциональности без JavaScript.

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

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

✅React Profiler — инструмент для измерения производительности React-приложений. Он помогает находить узкие места в рендеринге компонентов.

Для использования нужно обернуть целевую часть приложения в компонент Profiler. Он принимает два пропа: id (идентификатор) и onRender (колбэк, срабатывающий после рендера).

<Profiler id="App" onRender={(id, phase, actualTime) => {
  console.log(`${id} took ${actualTime}ms to render`);
}}>
  <App />
</Profiler>

Колбэк onRender получает параметры: id, phase (mount/update), actualTime (время рендера), baseTime (время без мемоизации).

В DevTools React Profiler отображает flamegraph и ranked chart для анализа производительности. Инструмент полезен для оптимизации сложных компонентов.

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

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

Тег <code> используется для выделения фрагментов кода в HTML. Он отображает текст моноширинным шрифтом, сохраняя форматирование, но для многострочного кода лучше подходит <pre>.

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

✔️ Тип never в TypeScript обозначает значение, которое никогда не должно возникать. Он используется в ситуациях, когда функция не завершается нормально или когда переменная не может иметь значения.

Функция, которая всегда выбрасывает ошибку или содержит бесконечный цикл, возвращает never:

function throwError(message: string): never {
  throw new Error(message);
}

Также never полезен в exhaustive checks для обработки всех вариантов union-типа:

type Shape = 'circle' | 'square';
function handleShape(shape: Shape) {
  switch (shape) {
    case 'circle': return;
    case 'square': return;
    default: const _exhaustiveCheck: never = shape; // Ошибка, если Shape расширится
  }
}

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

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

▶️Параметры по умолчанию позволяют задавать начальные значения аргументов функции, если они не переданы или равны undefined.

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

Если вызвать greet() без аргументов, name примет значение 'Guest'. Параметры по умолчанию могут быть любыми выражениями, включая вызовы функций.

function createUser(name, id = generateId()) {
  return { name, id };
}

Значения по умолчанию вычисляются только в момент вызова функции, если соответствующий аргумент отсутствует.

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

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

v-model обеспечивает двустороннее связывание данных, синхронизируя значение поля формы с переменной в компоненте. При изменении поля формы переменная обновляется автоматически, и наоборот — изменение переменной отражается в поле.

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

🟡Свойство shape-outside определяет форму, вокруг которой будет обтекать текст или inline-элементы. Оно работает только с floated-элементами и позволяет создавать сложные текстовые обтекания.

.circle {
  float: left;
  shape-outside: circle(50%);
}

Доступные значения: circle(), ellipse(), polygon(), url() (для SVG), а также margin-box, border-box. Форма влияет только на обтекание, не изменяя сам элемент.

Для визуального соответствия формы элемента и shape-outside часто используют clip-path с тем же значением.

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

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

➡️ Чтобы откатиться на предыдущий коммит, используется команда git reset. В зависимости от нужного результата применяются разные флаги:

git reset --hard HEAD~1

Полностью удаляет все изменения после указанного коммита (HEAD~1 — предыдущий коммит).

git reset --soft HEAD~1

Откатывает историю, но сохраняет изменения в staged-состоянии.

Для временного переключения на коммит без изменения истории используется git checkout <hash>.

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

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

Состояние компонента обновляется через вызов setState в классовых компонентах или функции-сеттера из useState в функциональных. React затем перерисовывает компонент с новым состоянием, но сохраняет производительность за счет реконсиляции виртуального DOM.

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

🔶 Элемент <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 собеседования