⏩ Тег <main> в HTML5 используется для обозначения основного содержимого документа. Это содержание должно быть уникальным и напрямую связано с основной темой страницы.

➡ Тег <main> помогает улучшить доступность, так как позволяет вспомогательным технологиям, таким как скрин ридеры, быстро находить основное содержание страницы.

💡 Важно помнить, что <main> не должен содержать элементы, такие как навигация или футеры. Этот тег может использоваться только один раз на странице.

<main>
  <!-- Основное содержание страницы -->
  <h1>Заголовок страницы</h1>
  <p>Основной текст статьи или контента.</p>
</main>

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

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

Позиционирование в CSS управляет расположением элементов на веб-странице. Существует несколько видов позиционирования:

1️⃣ Static: Значение по умолчанию. Элементы располагаются в порядке их следования в коде.

2️⃣ Relative: Элемент позиционируется относительно своего обычного положения. Используются свойства top, right, bottom, left.

3️⃣ Absolute: Элемент позиционируется относительно ближайшего предка с position: relative, absolute или fixed.

4️⃣ Fixed: Элемент фиксируется относительно окна браузера и не перемещается при прокрутке.

5️⃣ Sticky: Комбинация relative и fixed. Элемент ведет себя как relative, пока не достигнет заданного порога, после чего становится fixed.

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

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

🔸 Строгое сравнение — это метод сравнения, который учитывает как значение, так и тип данных. Используется оператор ===. В отличие от нестрогого сравнения ==, строгое сравнение не выполняет приведение типов.

const a = 5;
const b = '5';

console.log(a === b); // false, так как типы данных разные
console.log(a == b);  // true, так как происходит приведение типов

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

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

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

Для создания коммита в Git необходимо сначала добавить изменения в индекс с помощью команды git add, а затем зафиксировать их с описанием, используя команду git commit -m "сообщение коммита". Это позволяет сохранить текущие изменения в истории проекта с пояснением, что именно было изменено.

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

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

😊 Для использования Lazy Loading применяется функция React.lazy(), которая принимает функцию, возвращающую промис с импортом компонента. Компонент Suspense используется для отображения запасного контента, пока загружается ленивый компонент.

import React, { Suspense } from 'react';

// Ленивый импорт компонента
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      {/* Suspense для отображения запасного контента */}
      <Suspense fallback={<div>Загрузка...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

😊 Этот подход особенно полезен для больших приложений с множеством маршрутов или страниц.

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

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

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

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

▶️ Чтобы сделать картинку ссылкой в HTML, необходимо обернуть тег <img> в тег <a>. Атрибут href тега <a> указывает URL, на который будет вести ссылка.

<!-- Тег <a> оборачивает тег <img>, делая картинку кликабельной -->
<a href="https://example.com">
  <img src="image.jpg" alt="Описание изображения" />
</a>

▶️ Этот подход позволяет пользователю кликать по изображению, чтобы перейти на указанный URL.

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

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

📝 Метод indexOf используется для поиска индекса первого вхождения указанного элемента в массиве или строке. Если элемент не найден, возвращает -1.

✅Пример использования с массивом:

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

// Ищем индекс элемента 'banana'
const index = fruits.indexOf('banana'); // Вернет 1

✅Пример использования со строкой:

// Создаем строку
const text = 'Hello, world!';

// Ищем индекс символа 'w'
const index = text.indexOf('w'); // Вернет 7

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

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

💾 Единицы измерения em и rem используются для задания относительных размеров, таких как шрифты и отступы.

em: Зависит от размера шрифта родительского элемента. Если размер шрифта родителя изменится, то и em изменится. Например, если родитель имеет font-size: 16px, то 2em будет равно 32px.

rem: Зависит от корневого элемента. Независимо от вложенности, rem всегда основывается на font-size корня. Если корень имеет font-size: 16px, то 2rem всегда будет 32px.

⚡️ Использование rem обеспечивает более предсказуемое масштабирование, так как оно не зависит от вложенности элементов.

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

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

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

1️⃣ Упрощение кода: Хуки позволяют использовать состояние и другие возможности React без написания классов. Это делает код более простым и легким для понимания.

2️⃣ Повторное использование логики состояния: С помощью хуков, таких как useState и useEffect, можно легко разделять и повторно использовать логику состояния между компонентами.

3️⃣ Улучшение читаемости и тестируемости: Функциональные компоненты с хуками обычно легче читать и тестировать, чем классовые компоненты с методами жизненного цикла.

4️⃣ Избежание проблем с this: В функциональных компонентах нет необходимости использовать this, что устраняет многие ошибки, связанные с контекстом вызова.

5️⃣ Управление побочными эффектами: Хук useEffect предоставляет удобный способ управлять побочными эффектами, такими как подписки или изменения DOM, в функциональных компонентах.

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

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

Директива v-if полностью удаляет или добавляет элемент в DOM в зависимости от условия, что может быть полезно для оптимизации производительности, когда элемент редко отображается. В отличие от нее, v-show управляет видимостью элемента через CSS-свойство display, что делает переключение быстрее, но элемент всегда остается в DOM.

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

🟠Для включения JavaScript файла в HTML-документ используется тег <noscript>. Он может быть размещен в <head> или перед закрывающим тегом </body>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <noscript>Document</noscript>
    <!-- Подключение внешнего JavaScript файла -->
    <noscript src="noscript.js"></noscript>
</head>
<body>
    <h1>Hello World</h1>
    <!-- Подключение JavaScript файла перед закрывающим тегом body -->
    <noscript src="another-noscript.js"></noscript>
</body>
</html>

🟠Атрибут src указывает путь к JavaScript файлу.

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

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

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

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

💥 События в React работают аналогично событиям в DOM, но с некоторыми отличиями. В React события именуются в стиле camelCase, например, onClick вместо onclick. Также в React передаются функции, а не строки, как обработчики событий.

Пример:

function handleClick() {
  console.log('Button clicked');
}

<button onClick={handleClick}>Click Me</button>

В этом примере handleClick вызывается при клике на кнопку.

🟥 React использует систему событий, которая называется SyntheticEvent. Это кроссбраузерная оболочка над нативными событиями браузера, обеспечивающая единое API для всех браузеров.

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

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

Для преобразования числа в строку в JavaScript можно использовать метод toString(), который вызывается на числовом значении. Также можно воспользоваться функцией String(), передав в неё число в качестве аргумента, что вернёт его строковое представление.

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

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

📝 CSS Grid — это система компоновки, которая позволяет создавать сложные макеты с помощью сетки. Она предоставляет возможность размещать элементы в двухмерной сетке, управляя как строками, так и столбцами.

Для использования Grid необходимо задать контейнеру свойство display: grid. Затем с помощью свойств, таких как grid-template-columns и grid-template-rows, можно определить структуру сетки.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Три равные колонки */
  grid-gap: 10px; /* Расстояние между элементами */
}

⚡️В этом примере создаётся сетка из трёх колонок с равной шириной и промежутком в 10 пикселей между элементами.

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

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

Теги <div> и <span> используются для группировки и стилизации элементов в HTML, но имеют разные цели и свойства.

1️⃣ <div> — блочный элемент. Он занимает всю ширину родительского контейнера и начинается с новой строки. Используется для создания крупных блоков контента, таких как секции или контейнеры.

2️⃣ <span> — строчный элемент. Он занимает только необходимую ширину и не нарушает поток текста. Применяется для стилизации отдельных частей текста или небольших элементов внутри блока.

<div> <!-- Блочный элемент -->
  <span>Текст</span> <!-- Строчный элемент -->
</div>

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

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

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

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

📝 var, let и const — это ключевые слова для объявления переменных в JavaScript, но они имеют различия в области видимости и изменяемости.

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

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

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

💡Box Model — это фундаментальная концепция CSS, описывающая, как элементы веб-страницы занимают пространство и взаимодействуют друг с другом. Каждый элемент представляется в виде прямоугольника, состоящего из четырех областей: содержимого (content), внутреннего отступа (padding), границы (border) и внешнего отступа (margin).

.element {
  width: 100px; /* Ширина содержимого */
  padding: 10px; /* Внутренний отступ */
  border: 5px solid black; /* Граница */
  margin: 20px; /* Внешний отступ */
}

⏩ Общая ширина элемента рассчитывается как сумма ширины содержимого, внутреннего отступа, границы и внешнего отступа. Box Model позволяет управлять расположением и размером элементов на странице.

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

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