Интерфейсы и типы в TypeScript используются для описания структуры объектов, но интерфейсы поддерживают расширение через extends, а типы — через объединение (|) и пересечение (&). Интерфейсы чаще применяют для описания объектов, а типы — для более сложных конструкций, включая примитивы и объединения.

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

➡️ Слоты позволяют передавать контент в компонент, делая его более гибким и переиспользуемым. Они используются для вставки HTML или других компонентов в определенные места шаблона.

<!-- Компонент с слотом -->
<template>
  <div class="container">
    <slot></slot>
  </div>
</template>

<!-- Использование компонента -->
<MyComponent>
  <p>Этот контент попадет в слот</p>
</MyComponent>

Слоты могут быть именованными, что позволяет передавать контент в разные части компонента. По умолчанию используется основной слот (<slot>), который принимает весь переданный контент.

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

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

👉 Цикл for...of используется для итерации по элементам итерируемых объектов, таких как массивы, строки, Map, Set и другие. В отличие от for...in, который перебирает ключи, for...of работает непосредственно со значениями.

Синтаксис:

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item); // Выводит 1, 2, 3
}

Цикл for...of упрощает работу с коллекциями, исключая необходимость вручную управлять индексами. Он поддерживает break и continue для управления потоком выполнения. Подходит для работы с массивами и другими итерируемыми структурами, где важны значения элементов.

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

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

Элементы в CSS делятся на три основные категории по типу отображения: inline, block и inline-block.

1️⃣ Inline элементы (например, span, a) занимают только необходимое пространство, не создают разрывов строки до и после себя. Нельзя задавать ширину, высоту или вертикальные отступы.

2️⃣ Block элементы (например, div, p) занимают всю доступную ширину, начинаются с новой строки и поддерживают задание ширины, высоты, отступов.

3️⃣ Inline-block элементы сочетают свойства: занимают только необходимое пространство, как inline, но поддерживают задание ширины, высоты и отступов, как block.

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

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

Чтобы отменить изменения в файле, можно использовать команду git checkout -- <file>, которая вернет файл к состоянию последнего коммита. Для отмены изменений, уже добавленных в индекс, сначала выполните git reset HEAD <file>, а затем git checkout -- <file>.

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

✅ useRef и createRef — это хук и функция для создания рефов в React, но они используются в разных контекстах.

useRef — это хук, который возвращает мутируемый объект с свойством current. Этот объект сохраняет своё значение между рендерами и не вызывает повторный рендер при изменении. Используется в функциональных компонентах.

const inputRef = useRef(null);
// inputRef.current будет доступен после монтирования компонента  

createRef — это функция, которая создаёт новый реф при каждом рендере. Используется в классовых компонентах.

class MyComponent extends React.Component {
  inputRef = createRef();
  // inputRef.current будет пересоздаваться при каждом рендере
}  

Основное отличие: useRef сохраняет значение между рендерами, а createRef создаёт новый объект при каждом рендере.

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

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

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

let count: number = 5; // переменная count может быть только числом
function add(a: number, b: number): number {
  return a + b; // функция принимает два числа и возвращает число
}  

Аннотации типов также используются для объектов, массивов и пользовательских типов. Они делают код более предсказуемым и упрощают его поддержку.

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

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

В CSS initial устанавливает значение свойства в его начальное состояние, определенное спецификацией. inherit делает значение свойства таким же, как у родительского элемента, а unset сбрасывает свойство либо к inherit, если оно наследуемое, либо к initial, если нет.

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

➡️ Глубокое и поверхностное копирование — это два способа создания копий объектов.

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

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
shallowCopy.b.c = 3;
console.log(original.b.c); // 3  

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

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;
console.log(original.b.c); // 2  

Для глубокого копирования также можно использовать библиотеки, например, Lodash.

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

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

🟥 CDN (Content Delivery Network) помогает ускорить загрузку HTML-страниц за счет распределения статических ресурсов (CSS, JavaScript, изображения) по серверам, расположенным ближе к пользователю.

Для подключения CDN достаточно заменить локальные ссылки на файлы на URL-адреса, предоставляемые CDN. Например, для Bootstrap:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<noscript src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></noscript>

Использование CDN уменьшает нагрузку на сервер и ускоряет доставку контента, так как файлы кэшируются и загружаются с ближайшего сервера сети.

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

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

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

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

✅IndexedDB — это низкоуровневое API для хранения больших объемов структурированных данных прямо в браузере. В отличие от localStorage, IndexedDB поддерживает транзакции, индексы и позволяет хранить данные в виде объектов, что делает его подходящим для сложных приложений.

const request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
    const db = event.target.result;
    const store = db.createObjectStore("books", { keyPath: "id" });
    store.createIndex("by_noscript", "noscript", { unique: false });
};

Данные в IndexedDB асинхронно записываются и читаются, что не блокирует основной поток выполнения. Это делает его мощным инструментом для оффлайн-приложений.

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

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

🔴Свойство scroll-behavior в CSS позволяет управлять поведением прокрутки на странице. При установке значения smooth прокрутка становится плавной, а не мгновенной. Это особенно полезно для навигации по странице с помощью якорей или JavaScript.

html {
  scroll-behavior: smooth;
}

При таком стиле переход по ссылке с якорем (например, <a href="#section">) будет происходить с плавной прокруткой до целевого элемента. Также это работает с методами JavaScript, такими как scrollTo или scrollIntoView.

document.getElementById('section').scrollIntoView({ behavior: 'smooth' });

Значение по умолчанию — auto, при котором прокрутка происходит мгновенно. Свойство поддерживается в современных браузерах, но для старых версий может потребоваться полифил.

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

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

✅ Инкремент ++ и декремент -- — это унарные операторы, которые увеличивают или уменьшают значение переменной на единицу. Инкремент добавляет 1, а декремент вычитает 1.

Операторы могут быть префиксными (ставятся перед переменной) или постфиксными (ставятся после переменной). Префиксная форма сначала изменяет значение, а затем возвращает его, а постфиксная — сначала возвращает текущее значение, а затем изменяет его.

let a = 5;
let b = a++; // b = 5, a = 6
let c = ++a; // c = 7, a = 7

В первом случае a++ возвращает исходное значение a, а затем увеличивает его. Во втором случае ++a сначала увеличивает значение, а затем возвращает его.

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

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

➡️ Атрибут srcset используется для указания нескольких версий изображения с разным разрешением, чтобы браузер мог выбрать наиболее подходящее в зависимости от размера экрана и плотности пикселей.

<img src="image-default.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Example image">

В этом примере srcset содержит три версии изображения с указанием их ширины в пикселях. Атрибут sizes определяет, какое изображение использовать в зависимости от ширины экрана. Это улучшает производительность и адаптивность веб-страниц.

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

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

Symbol — это примитивный тип данных в JavaScript, который используется для создания уникальных идентификаторов. Он часто применяется для создания скрытых или уникальных свойств объектов, чтобы избежать конфликтов имен.

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

➡️Кастомный хук — это функция, которая использует встроенные хуки (useState, useEffect и другие) для создания повторно используемой логики. Имя хука должно начинаться с use, чтобы React мог корректно отслеживать его вызовы.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

В этом примере хук useWindowWidth отслеживает ширину окна браузера и возвращает её значение. Кастомные хуки позволяют инкапсулировать логику, упрощая её повторное использование в разных компонентах.

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

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

🔵filter: drop-shadow() и box-shadow используются для создания теней, но работают по-разному.

box-shadow применяется к блочным элементам и создает тень вокруг их рамки. Тень может быть смещена, размыта и изменена по цвету.

.box {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

filter: drop-shadow() применяется к содержимому элемента, включая прозрачные области, такие как текст или изображения с альфа-каналом. Тень повторяет форму содержимого.

.element {
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

Основное отличие: box-shadow работает с рамкой элемента, а drop-shadow учитывает форму содержимого, включая прозрачные части.

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

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

Чтобы вернуть файл к состоянию последнего коммита, используется команда git checkout -- <file>. Это сбрасывает все изменения в файле, сделанные после последнего коммита, восстанавливая его содержимое.

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

✅ Язык документа в HTML задается с помощью атрибута lang в теге <html>. Этот атрибут помогает браузерам и поисковым системам определить язык содержимого страницы.

<html lang="ru">

В примере указан русский язык. Для других языков используются соответствующие коды, например en для английского или es для испанского. Это важно для accessibility и SEO.

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

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

🔴Чтобы предотвратить ненужные повторные рендеры компонента, можно использовать React.memo для функциональных компонентов или PureComponent для классовых. Эти инструменты позволяют избежать рендера, если пропсы и состояние не изменились.

const MyComponent = React.memo(({ prop1, prop2 }) => {
  return <div>{prop1} {prop2}</div>;
});

Для более сложных случаев можно использовать хук useMemo, чтобы мемоизировать вычисляемые значения, и useCallback, чтобы сохранить ссылки на функции между рендерами. Это уменьшает количество повторных вычислений и рендеров.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

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

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