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

Создание новой ветки в Git выполняется командой git branch имя_ветки, которая создает ветку, но не переключает на нее. Для создания и переключения одновременно используется команда git checkout -b имя_ветки.

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

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

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

В примере функция doSomething будет пересоздана только при изменении a или b. Если массив зависимостей пуст, функция создается один раз и не изменяется.

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

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

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

<html lang="ru">

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

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

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

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

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

➡️ Контекст this в JavaScript определяет, к какому объекту относится выполняемая функция. Значение this зависит от того, как функция вызывается: в методе объекта this ссылается на сам объект, в обычной функции — на глобальный объект (или undefined в строгом режиме).

const obj = {
  value: 42,
  method() {
    console.log(this.value); // this ссылается на obj
  }
};
obj.method();

При использовании стрелочных функций this берется из внешнего контекста, так как они не имеют собственного this.

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

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

🔥 Разница между visibility: hidden и display: none заключается в том, как они скрывают элементы на странице.

visibility: hidden делает элемент невидимым, но он продолжает занимать место в документе. Элемент остается частью потока, и его размеры влияют на расположение других элементов.

.element {
  visibility: hidden; /* Элемент невидим, но место остается */
}

display: none полностью удаляет элемент из потока документа. Элемент не отображается и не занимает место, как будто его нет в DOM.

.element {
  display: none; /* Элемент полностью удаляется из потока */
}

Выбор между ними зависит от задачи: если нужно скрыть элемент, но сохранить его место, используется visibility: hidden. Если элемент нужно полностью убрать из потока, применяется display: none.

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

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

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

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

✅Для проверки наличия свойства в объекте можно использовать метод hasOwnProperty или оператор in.

const obj = { key: 'value' };

// Проверка с помощью hasOwnProperty
if (obj.hasOwnProperty('key')) {
  console.log('Свойство существует');
}

// Проверка с помощью оператора in
if ('key' in obj) {
  console.log('Свойство существует');
}

Разница между ними в том, что hasOwnProperty проверяет только собственные свойства объекта, игнорируя унаследованные, а оператор in проверяет как собственные, так и унаследованные свойства. Выбор зависит от задачи.

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

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

Функция calc() позволяет выполнять математические вычисления прямо в CSS, используя значения с разными единицами измерения, например, проценты, пиксели или em. Она часто применяется для динамического расчета размеров, отступов или позиционирования элементов на странице.

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

➡️Чтобы переключиться на другую ветку, используется команда git checkout <branch-name>. Если ветка существует, она будет активирована, а рабочая директория обновится до состояния этой ветки.

git checkout feature-branch

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

git checkout -b new-feature-branch

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

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

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

const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

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

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

data-* атрибуты позволяют хранить пользовательские данные прямо в HTML-элементах. Они используются для передачи информации между разметкой и JavaScript, не влияя на отображение или поведение элемента.

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

🟡Декларационные файлы (.d.ts) используются для описания типов в TypeScript, когда исходный код написан на JavaScript или когда типы нужно описать отдельно. Они позволяют TypeScript понимать структуру и типы данных в сторонних библиотеках или модулях.

declare module 'some-library' {
  export function someFunction(): void;
}

Такие файлы необходимы при работе с библиотеками, которые не имеют встроенной поддержки TypeScript, или для расширения типов существующих модулей.

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

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

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

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