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

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

👉 Хук useMemo используется для оптимизации производительности, позволяя кэшировать результаты вычислений и избегать повторных вычислений при каждом рендере.

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

Первый аргумент — функция, возвращающая вычисляемое значение. Второй аргумент — массив зависимостей. Хук пересчитает значение только при изменении зависимостей.

const Component = ({ items }) => {
  const sortedItems = useMemo(() => items.sort(), [items]);
  return <List items={sortedItems} />;
};

Использование useMemo актуально для тяжелых вычислений или оптимизации рендеров.

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

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

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

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

➡️ Атрибут 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 собеседования

⏩ Свойство align-items управляет выравниванием элементов внутри контейнера по поперечной оси (cross axis) для каждой строки или строки флекс-контейнера. Оно применяется к отдельным элементам. Например, align-items: center выравнивает элементы по центру контейнера.

Свойство align-content работает только в многострочных флекс-контейнерах и управляет выравниванием строк по поперечной оси. Оно распределяет свободное пространство между строками. Например, align-content: space-between равномерно распределяет строки с отступами между ними.

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* Выравнивание элементов внутри строк */
  align-content: space-between; /* Распределение строк */
}

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

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

✅ Процесс "reconciliation" — это механизм, который позволяет библиотеке эффективно обновлять DOM при изменении состояния компонентов. React создает виртуальное дерево DOM (Virtual DOM), сравнивает его с предыдущим состоянием и определяет минимальный набор изменений для применения к реальному DOM.

При изменении состояния React создает новое виртуальное дерево и сравнивает его с предыдущим. Этот процесс называется "diffing". React использует эвристический алгоритм, который предполагает, что элементы одного типа на одном уровне дерева остаются стабильными. Если тип элемента изменяется, React уничтожает старое дерево и создает новое.

Пример:

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <span>{count}</span>
    </div>
  );
}

При нажатии на кнопку React обновляет только текст внутри <span>, не пересоздавая весь <div>. Это делает процесс обновления быстрым и эффективным.

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

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

🟠Атрибут value в теге <input> задает начальное значение элемента формы. Это значение отображается в поле ввода и может быть изменено пользователем. Атрибут используется для предзаполнения данных, которые могут быть отправлены на сервер.

<input type="text" value="Введите текст">

В данном примере поле ввода будет содержать текст "Введите текст" по умолчанию. Если тип input — checkbox или radio, атрибут value определяет данные, которые будут отправлены на сервер при выборе элемента.

<input type="radio" name="gender" value="male"> Мужской
<input type="radio" name="gender" value="female"> Женский

Здесь при выборе одной из опций на сервер отправится значение male или female.

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

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

Тип Record в TypeScript используется для создания объекта с ключами одного типа и значениями другого типа. Он часто применяется для описания словарей или структур, где ключи и значения имеют строгую типизацию, например, Record<string, number> создает объект с ключами-строками и числовыми значениями.

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

➡️Доступ к элементу массива по индексу осуществляется с помощью квадратных скобок. Индексация начинается с 0, то есть первый элемент массива имеет индекс 0.

const array = [10, 20, 30];
const firstElement = array[0]; // Получение первого элемента (10)
const secondElement = array[1]; // Получение второго элемента (20)

Если индекс выходит за пределы массива, возвращается undefined.

const element = array[5]; // undefined, так как элемента с индексом 5 нет

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

✈️ 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 restore --staged <file>. Это убирает файл из индекса, но не изменяет его состояние в рабочей директории.

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

✅Flux — это архитектурный подход для управления состоянием в приложениях. Он основан на однонаправленном потоке данных, который включает четыре основных компонента: Actions, Dispatcher, Stores и Views. Actions инициируют изменения, Dispatcher управляет потоком данных, Stores хранят состояние, а Views отображают данные.

✅Redux — это упрощённая и более строгая реализация идей Flux. В Redux есть одно централизованное хранилище (Store), а состояние изменяется через чистые функции-редьюсеры. В отличие от Flux, где может быть несколько Stores и Dispatcher, Redux использует один Store и не требует отдельного Dispatcher. Это делает Redux более предсказуемым и удобным для отладки.

// Flux
Dispatcher.register((action) => {
  switch (action.type) {
    case 'UPDATE_DATA':
      Store.updateData(action.payload);
      break;
  }
});

// Redux
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

Flux подходит для более сложных сценариев с множеством Stores, а Redux — для приложений с централизованным управлением состоянием.

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

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

Семантические теги в HTML5 используются для придания смысловой структуры веб-странице, что улучшает читаемость кода для разработчиков и помогает поисковым системам и screen reader'ам лучше понимать содержание страницы. Они делают HTML-документ более логичным и организованным, выделяя ключевые элементы, такие как заголовки, статьи, разделы и подвалы.

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

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

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

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

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

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

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

🔸 Переменные в CSS, также известные как кастомные свойства, позволяют хранить и повторно использовать значения, такие как цвета, размеры или другие стили. Они объявляются в селекторе :root для глобального доступа или внутри других селекторов для локального использования.

:root {
  --main-color: #3498db; /* Объявление переменной */
}

.element {
  background-color: var(--main-color); /* Использование переменной */
}

Переменные можно переопределять внутри других селекторов, что делает их гибкими для адаптации стилей под разные элементы. Для доступа к значению переменной используется функция var().

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

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