Атрибуты — это дополнительные свойства HTML-элементов, которые задают их характеристики или поведение. Они указываются внутри открывающего тега в формате name="value".

Некоторые атрибуты универсальны, например class, id или style, другие — специфичны для определенных элементов (href для <a>, src для <img>).

<a href="https://example.com" target="_blank">Ссылка</a>

Атрибут href задает URL, а target="_blank" открывает ссылку в новой вкладке.

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

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

Оператор keyof принимает тип объекта и возвращает объединение строковых литералов его ключей. Это полезно для строгой типизации при работе со свойствами объекта.

type Person = { name: string; age: number };
type PersonKeys = keyof Person; // "name" | "age"

Используется в дженериках и утилитах типов для обеспечения типобезопасности. Например, keyof помогает ограничить параметры функции только допустимыми ключами объекта.

function getProperty<T>(obj: T, key: keyof T) {
  return obj[key];
}

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

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

Ассоциативный массив — это структура данных, где элементы хранятся в формате "ключ-значение", а доступ к ним осуществляется по уникальному ключу (обычно строковому). В JavaScript ассоциативные массивы реализуются через обычные объекты или коллекции Map.

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

Для выполнения HTTP-запросов обычно используют библиотеки axios или fetch. Асинхронные операции обрабатывают в методах компонента, часто с применением async/await для удобства.

data() {
  return { posts: [] };
},
async created() {
  try {
    const response = await axios.get('https://api.example.com/posts');
    this.posts = response.data;
  } catch (error) {
    console.error('Ошибка загрузки данных:', error);
  }
}

Для управления состоянием загрузки и ошибок добавляют соответствующие поля в data. В Vue 3 можно использовать Composition API с ref или reactive для аналогичной логики.

setup() {
  const posts = ref([]);
  const loadPosts = async () => {
    posts.value = await axios.get('https://api.example.com/posts');
  };
  return { posts, loadPosts };
}

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

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

Свойство user-select определяет, может ли пользователь выделять текст на странице. Для полного запрета выделения используется значение none.

.unselectable {
  user-select: none;
  -webkit-user-select: none; /* Для Safari */
  -moz-user-select: none; /* Для Firefox */
}

Это полезно для элементов интерфейса, где выделение текста не требуется (кнопки, иконки). Свойство не блокирует копирование через контекстное меню или DevTools.

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

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

Для клонирования репозитория используется команда git clone, за которой следует URL репозитория (HTTPS или SSH). Эта команда создает локальную копию со всей историей и ветками.

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

Подъем состояния — это перенос общего состояния из дочерних компонентов в их ближайшего общего родителя. Такой подход обеспечивает синхронизацию данных между компонентами.

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <ChildA value={value} onChange={setValue} />
      <ChildB value={value} />
    </>
  );
}

Родительский компонент управляет состоянием и передает его дочерним через props. Изменения состояния обрабатываются через колбэки.

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

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

Таблицы используются для структурированного отображения данных в строках и столбцах. Основные теги:

<table>
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>
  <tr>
    <td>Данные 1</td>
    <td>Данные 2</td>
  </tr>
</table>

- <table>: контейнер таблицы
- <tr>: строка таблицы
- <th>: ячейка заголовка (жирный текст)
- <td>: ячейка с данными

Для объединения ячеек используются атрибуты colspan и rowspan. Стилизация выполняется через CSS.

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

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

Транспиляция — это преобразование TypeScript-кода в чистый JavaScript через компилятор tsc. В процессе удаляются типы и аннотации, сохраняется логика кода, а также применяются настройки из tsconfig.json (версия JS, модули и другие опции).

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

Для работы с датами используется объект Date. Он позволяет создавать экземпляры дат, производить манипуляции и форматирование.

const now = new Date(); // Текущая дата и время
const specificDate = new Date(2024, 11, 31); // 31 декабря 2024

Основные методы:
- getFullYear(), getMonth(), getDate() — получение компонентов даты
- setHours(), setMinutes() — установка времени
- toLocaleDateString() — локализованное форматирование

Для сложных операций (интервалы, парсинг) удобно использовать библиотеки типа moment.js или date-fns.

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

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

Нестандартные шрифты подключаются через правило @font-face, которое указывает путь к файлу шрифта и его свойства.

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/custom-font.woff2') format('woff2'),
       url('fonts/custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

После объявления шрифт применяется через свойство font-family. Современные форматы (WOFF2) обеспечивают лучшее сжатие. Важно указывать fallback-шрифты на случай проблем с загрузкой.

body {
  font-family: 'CustomFont', Arial, sans-serif;
}

Для оптимальной производительности рекомендуются подмножества шрифтов и предзагрузка через <link rel="preload">.

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

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

Для добавления файлов используется команда git add, которая помечает изменения для последующего коммита. Можно добавить конкретные файлы (git add имя_файла) или все изменения (git add .).

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

React использует виртуальный DOM для эффективного обновления интерфейса, минимизируя прямые операции с реальным DOM. Компонентный подход позволяет создавать переиспользуемые UI-элементы с изолированной логикой.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Односторонний поток данных упрощает отладку, а богатая экосистема (React Router, Redux) расширяет возможности. Поддержка SSR (Next.js) улучшает SEO и производительность.

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

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

Для добавления аудио используется тег <audio> с атрибутом src или вложенными тегами <source> для поддержки разных форматов.

<audio controls>
  <source src="track.mp3" type="audio/mpeg">
  <source src="track.ogg" type="audio/ogg">
  Ваш браузер не поддерживает аудио.
</audio>

- controls добавляет стандартный интерфейс управления
- autoplay включает автоматическое воспроизведение (ограничено в браузерах)
- loop зацикливает воспроизведение

Для кастомного плеера используется JavaScript API (play(), pause()).

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

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

Модификатор public позволяет обращаться к свойствам и методам из любого места, private ограничивает доступ только текущим классом, а protected разрешает доступ самому классу и его подклассам. Эти модификаторы помогают контролировать инкапсуляцию и предотвращают случайное изменение внутреннего состояния.

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

Прототипное наследование — это механизм, при котором объекты могут наследовать свойства и методы друг от друга через ссылку __proto__. Каждый объект имеет скрытую ссылку на свой прототип (другой объект), что позволяет делегировать доступ к отсутствующим свойствам.

const animal = { eats: true };
const rabbit = { jumps: true };
rabbit.__proto__ = animal; // Наследование

console.log(rabbit.eats); // true (свойство взято из прототипа)

Функции-конструкторы используют prototype для задания прототипа создаваемым объектам. Современный синтаксис заменяет __proto__ на Object.create() и class.

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

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

Псевдокласс :nth-child() позволяет выбирать элементы на основе их позиции среди соседних элементов внутри родительского контейнера. Принимает аргументы:

li:nth-child(2n) { /* Четные элементы */ }
li:nth-child(odd) { /* Нечетные элементы */ }
li:nth-child(3) { /* Третий элемент */ }

- Ключевые слова: odd (нечетные), even (четные)
- Формулы вида An+B (например, 3n+1 выбирает каждый 3-й, начиная с 1-го)
- Нумерация начинается с 1

Работает только с элементами того же уровня в DOM. Для фильтрации по типу элемента используйте :nth-of-type().

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

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

Тег <i> визуально выделяет текст курсивом без семантического акцента, тогда как <em> указывает на смысловое выделение (важность, ударение), что влияет на восприятие контента скринридерами и поисковыми системами. Оба тега отображаются курсивом по умолчанию, но <em> имеет логическую нагрузку.

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

Для предотвращения действий браузера по умолчанию (например, отправки формы или перехода по ссылке) используется метод preventDefault() объекта события. В React события передаются как синтетические обертки над нативными.

function handleSubmit(e) {
  e.preventDefault();
  // Логика обработки
}

Метод вызывается внутри обработчика события. Для остановки всплытия события вверх по DOM-дереву дополнительно применяется stopPropagation().

function handleClick(e) {
  e.stopPropagation();
  // Действие
}

Эти методы работают со всеми синтетическими событиями React (onClick, onSubmit и др.).

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

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

Альтернативный текст (атрибут alt) описывает содержание изображения для случаев, когда оно не загрузилось или недоступно. Также он используется скринридерами для озвучивания содержимого, что важно для доступности.

<img src="logo.png" alt="Логотип компании">

Если изображение декоративное, атрибут alt можно оставить пустым, чтобы скринридеры его игнорировали.

<img src="divider.png" alt="">

Корректный alt улучшает SEO, так как поисковые системы учитывают его при анализе контента.

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

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

Приведение типов — это преобразование значения одного типа в другой, явное или неявное. В TypeScript оно часто выполняется с помощью синтаксиса as или угловых скобок для совместимости типов.

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