Элементы "inline" занимают только необходимое пространство и располагаются в одной строке с другими элементами, например, теги <span> и <a>. Элементы "block" занимают всю ширину родительского контейнера и начинаются с новой строки, как <div>, а "inline-block" элементы, такие как <button>, сочетают свойства обоих: они располагаются в одной строке, но могут иметь заданные ширину и высоту.

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

☝️ Экземпляр Vue — это основа любого приложения на Vue.js. Он управляет данными, рендерингом и реактивностью. Создание экземпляра Vue — первый шаг в разработке приложения.

🔴 Для создания экземпляра Vue используется конструктор Vue. В него передаются опции, такие как el, data, methods и computed.

new Vue({
  // Указывает элемент, к которому будет привязан экземпляр
  el: '#app',
  // Данные, которые будут реактивными
  data: {
    message: 'Hello, Vue!'
  },
  // Методы, которые можно вызывать из шаблона
  methods: {
    greet() {
      return `Message: ${this.message}`;
    }
  }
});

🔴 Экземпляр Vue связывается с DOM и управляет его обновлением.

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

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

🔘 В React передача данных от родительского компонента к дочернему осуществляется через props. Родительский компонент передает данные в виде атрибутов, которые затем доступны в дочернем компоненте через объект props.

// Родительский компонент
function ParentComponent() {
  const data = "Привет, мир!";
  return <ChildComponent message={data} />;
}

// Дочерний компонент
function ChildComponent(props) {
  // Доступ к переданным данным через props
  return <div>{props.message}</div>;
}

😊 В этом примере ParentComponent передает строку "Привет, мир!" в ChildComponent через prop message. Дочерний компонент получает доступ к этому значению через props.message и отображает его.

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

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

▶️ Для создания ссылки на другую страницу используется элемент <a>. Атрибут href указывает адрес страницы, на которую ведет ссылка.

<!-- Ссылка на внешнюю страницу -->
<a href="https://example.com">Перейти на Example</a>

<!-- Ссылка на внутреннюю страницу -->
<a href="/about.html">О нас</a>

▶️ В первом примере ссылка ведет на внешний сайт. Во втором примере ссылка указывает на внутреннюю страницу сайта. Текст между тегами <a> отображается как кликабельная ссылка.

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

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

🟢 В JavaScript длина массива определяется с помощью свойства length. Это свойство возвращает количество элементов в массиве.

// Создание массива
const fruits = ["apple", "banana", "cherry"];

// Получение длины массива
const length = fruits.length;

// Вывод длины массива
console.log(length); // 3

🟢 В этом примере массив fruits содержит три элемента. Свойство length возвращает значение 3, которое затем выводится в консоль.

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

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

➡️ Создание анимации с помощью CSS — это простой и эффективный способ добавить динамику на веб-страницу. Для этого используются ключевые кадры и свойство animation. Пример анимации, которая перемещает элемент слева направо:

/* Определение ключевых кадров для анимации */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

/* Применение анимации к элементу */
.element {
  animation: slide 2s infinite alternate;
}

В этом примере анимация slide длится 2 секунды и повторяется бесконечно, чередуя направление движения.

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

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

💡.git в репозитории содержит все необходимые метаданные для управления версиями проекта, включая историю коммитов, конфигурацию и ссылки на удаленные репозитории. Это скрытая папка, которая позволяет Git отслеживать изменения и управлять ветками, обеспечивая полное управление версионностью проекта.

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

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

interface User {
  name: string; // Имя пользователя
  age: number;  // Возраст пользователя
}

function greet(user: User) {
  console.log(`Hello, ${user.name}`);
}

✅ В этом примере интерфейс User гарантирует, что объект, передаваемый в функцию greet, будет иметь свойства name и age с соответствующими типами.

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

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

🌀 Порталы позволяют рендерить компоненты в DOM-узлы, находящиеся вне иерархии родительского компонента. Это полезно для создания модальных окон, всплывающих подсказок и других элементов, которые должны быть отделены от основной структуры DOM.

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

➡️ <!DOCTYPE> — это инструкция для браузера, которая указывает, какую версию HTML использовать при отображении страницы. Он всегда должен быть первой строкой в HTML-документе. Использование <!DOCTYPE> важно для обеспечения совместимости и правильного отображения страниц.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <noscript>Document</noscript>
</head>
<body>
    <!-- Содержимое страницы -->
</body>
</html>

➡️ Этот код указывает браузеру использовать стандартный режим отображения HTML5.

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

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

🔘 Свойство z-index определяет порядок наложения элементов на оси Z, то есть по глубине. Оно работает только для элементов с установленным свойством position отличным от static (например, relative, absolute, `fixed`).

🔘 Чем выше значение z-index, тем выше элемент будет располагаться над другими. Если значения одинаковы, порядок определяется исходя из порядка в HTML.

.box1 {
    position: absolute;
    z-index: 1; /* Этот элемент будет ниже */
}

.box2 {
    position: absolute;
    z-index: 2; /* Этот элемент будет выше */
}

✔️ В этом примере .box2 будет отображаться поверх .box1.

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

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

♾️ Infinity представляет собой положительную бесконечность и возникает при делении положительного числа на ноль или при превышении максимального числового значения. -Infinity обозначает отрицательную бесконечность и появляется при делении отрицательного числа на ноль или при вычислениях, выходящих за пределы минимального отрицательного значения.

👉 Тут еще больше JS

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

📝 Индексация, также известная как "staging" или "index", представляет собой промежуточную область, где изменения в файлах подготавливаются перед коммитом. Это позволяет контролировать, какие изменения войдут в следующий коммит.

✅ Когда файл изменяется, его нужно добавить в индекс с помощью команды git add. Это действие перемещает изменения из рабочей директории в индекс, но не фиксирует их в репозитории. После добавления всех необходимых изменений в индекс, их можно зафиксировать с помощью git commit.

# Добавление файла в индекс
git add filename

# Фиксация изменений из индекса
git commit -m "Сообщение коммита"

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

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

Директивы — это инструмент для манипуляции DOM. Они позволяют добавлять поведение к элементам, используя специальные атрибуты. Основные директивы включают v-if, v-for, v-bind и v-model.

👉 v-if управляет отображением элементов на основе условия. Например:

<div v-if="isVisible">Показать этот текст</div>

👉 v-for используется для итерации по массивам:

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

👉 v-bind связывает атрибуты с данными:

<img v-bind:src="imageSrc" alt="Image">

👉 v-model обеспечивает двустороннюю привязку данных:

<input v-model="userInput">

Директивы делают код более декларативным и управляемым.

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

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

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

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

👉 DOM (Document Object Model) — это программный интерфейс для страницы, который представляет структуру документа в виде дерева объектов. Каждый элемент HTML, атрибут и текст становятся узлами в этом дереве, что позволяет скриптам динамически изменять содержание, структуру и стиль страницы.

👉 DOM обеспечивает доступ к элементам и их свойствам с помощью JavaScript. Это позволяет создавать интерактивные и динамические интерфейсы.

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

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

💥 'use strict' — это директива, которая вводит строгий режим в JavaScript. Строгий режим изменяет семантику JavaScript, делая его более безопасным и предсказуемым.

1⃣ Во-первых, он предотвращает использование необъявленных переменных, что помогает избежать ошибок, связанных с опечатками в именах переменных.

'use strict';
x = 3.14; // Ошибка: x не объявлена

2⃣ Во-вторых, строгий режим запрещает дублирование параметров функции, что улучшает читаемость и поддержку кода.

'use strict';
function sum(a, a, c) { // Ошибка: дублирование параметров
  return a + a + c;
}

🔸 Также он запрещает использование некоторых устаревших и небезопасных функций, таких как with.

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

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

Псевдоклассы :hover и :active используются для изменения стиля элементов в зависимости от взаимодействия пользователя.

1⃣ :hover применяется, когда курсор мыши находится над элементом. Это позволяет, например, изменять цвет кнопки при наведении курсора.

button:hover {
  background-color: lightblue; /* Изменение фона кнопки при наведении */
}

2⃣ :active активируется в момент нажатия на элемент. Обычно используется для изменения стиля кнопки в момент клика.

button:active {
  background-color: darkblue; /* Изменение фона кнопки при нажатии */
}

📌 Таким образом, :hover реагирует на наведение, а :active — на нажатие.

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

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

📌 Для просмотра истории коммитов в Git используется команда git log. Она выводит список всех коммитов в текущей ветке с информацией о каждом из них, включая хеш, автора, дату и сообщение коммита.

git log

▶️ Для более краткого вывода можно использовать флаг --oneline, который отображает каждый коммит в одну строку.

git log --oneline

▶️ Если необходимо увидеть историю коммитов для конкретного файла, используется:

git log <filename>

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

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

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

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

🔳 Next.js — это фреймворк для React, который упрощает создание SSR приложений. Он предоставляет такие возможности, как автоматическая маршрутизация, оптимизация изображений и статических файлов, а также встроенные функции для работы с API.

🔲 Next.js позволяет сосредоточиться на создании компонентов и логики приложения, обеспечивая при этом высокую производительность и SEO-оптимизацию. Благодаря этому фреймворку можно легко создавать современные веб-приложения с минимальными усилиями по настройке инфраструктуры.

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

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