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

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

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

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

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

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

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

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

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