👩‍💻 Объясни назначение ключевого слова abstract?

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

Пример абстрактного класса:

abstract class Animal {
  abstract makeSound(): void; // Абстрактный метод без реализации

  move(): void {
    console.log("Moving...");
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log("Bark");
  }
}

const dog = new Dog();
dog.makeSound(); // Выводит "Bark"
dog.move(); // Выводит "Moving..."

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Каково назначение элемента <nav>?

Элемент <nav> в HTML используется для определения навигационных ссылок на веб-странице. Он служит контейнером для основных навигационных блоков, таких как меню, списки ссылок и другие элементы, которые помогают пользователям перемещаться по сайту.

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

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Элемент <nav> улучшает семантику HTML-документа, делая его более понятным для поисковых систем и вспомогательных технологий. Он не должен использоваться для всех ссылок на странице, а только для тех, которые составляют основную навигацию. Это помогает улучшить доступность и SEO, подчеркивая важные навигационные области.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое CSS-переменные и как их использовать?

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

Определение CSS-переменной:

:root {
  --main-color: #3498db; // Определение переменной
  --padding: 10px;
}

Использование CSS-переменной:

.button {
  background-color: var(--main-color); // Применение переменной
  padding: var(--padding);
}

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как работать с типами, определенными в сторонних библиотеках?

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

1. Установка типов: многие популярные библиотеки имеют отдельные пакеты с типами, которые можно установить через npm. Например, для библиотеки lodash:

npm install @types/lodash

2. Импорт типов: после установки типов можно использовать их в коде, импортируя необходимые функции или классы:

import _ from 'lodash';

const result: number = _.add(5, 10);

3. Проверка типов: TypeScript автоматически использует файлы деклараций для проверки типов и автодополнения в редакторах, что упрощает разработку и снижает вероятность ошибок.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как работает метод forEach?

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

Синтаксис:

array.forEach(function(element, index, array) {
  // Действия с элементом
});

Первый параметр — это текущий элемент массива, второй — индекс элемента, третий — сам массив. Индекс и массив являются необязательными параметрами.

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

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number * 2); // Умножает каждый элемент на 2 и выводит результат
});

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как использовать keyframes для создания анимаций?

@keyframes в CSS используется для создания анимаций, задавая последовательность стилей для анимируемого элемента. Анимация определяется с помощью ключевых кадров, которые описывают, как элемент должен изменяться в течение времени.

Синтаксис:

@keyframes animationName {
  from {
    /* Начальное состояние */
  }
  to {
    /* Конечное состояние */
  }
}

Или с использованием процентов:

@keyframes animationName {
  0% {
    /* Начальное состояние */
  }
  50% {
    /* Промежуточное состояние */
  }
  100% {
    /* Конечное состояние */
  }
}

Для применения анимации к элементу используются свойства animation-name, animation-duration и другие.

Пример:

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation-name: slideIn; // Название анимации
  animation-duration: 2s; // Длительность анимации
  animation-timing-function: ease-in-out; // Функция времени
}

Этот пример создает анимацию, которая перемещает элемент снаружи экрана внутрь за 2 секунды.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как встроить видео в HTML?

Для встраивания видео в HTML используется элемент <video>. Он позволяет воспроизводить видеофайлы непосредственно на веб-странице. Элемент <video> поддерживает различные атрибуты, такие как controls, autoplay, loop и muted.

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

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Атрибут controls добавляет элементы управления воспроизведением, такие как кнопки паузы и перемотки. Атрибуты width и height задают размеры видео. Внутри элемента <video> можно указать несколько источников <source> для обеспечения поддержки разных форматов видеофайлов. Текст внутри тега <video> отображается, если браузер не поддерживает видео.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое useEffect?

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

Синтаксис:

useEffect(() => {
  // Код эффекта
  return () => {
    // Очистка эффекта (опционально)
  };
}, [dependencies]);

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

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

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.noscript = `Count: ${count}`; // Обновляет заголовок документа
  }, [count]); // Эффект выполняется при изменении count

  return (
    <button onClick={() => setCount(count + 1)}>
      Increment
    </button>
  );
}

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как сделать полупрозрачный фон у элемента?

Для создания полупрозрачного фона у элемента в CSS можно использовать свойство background-color с функцией rgba(), которая позволяет задать цвет в формате RGB с дополнительным параметром прозрачности (альфа-канал).

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

.element {
  background-color: rgba(0, 0, 0, 0.5);
}

В этом примере rgba(0, 0, 0, 0.5) задает черный цвет с 50% прозрачностью. Значение альфа-канала варьируется от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

Альтернативный способ — использование свойства opacity, но оно влияет на прозрачность всего содержимого элемента, включая текст и другие вложенные элементы:

.element {
  opacity: 0.5;
}

Использование rgba() предпочтительнее, если требуется изменить только фон, сохраняя непрозрачность содержимого.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как работает метод массива reduce?

Метод массива reduce используется для последовательной обработки каждого элемента массива с целью вычисления единого значения. Он принимает два аргумента: функцию-аккумулятор и начальное значение аккумулятора.

Функция-аккумулятор принимает четыре параметра: аккумулятор, текущий элемент, индекс текущего элемента и сам массив. На каждой итерации функция-аккумулятор обновляет значение аккумулятора, которое затем передается на следующую итерацию. В конце выполнения reduce возвращает итоговое значение аккумулятора.

Пример использования reduce для суммирования элементов массива:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Вывод: 10

В этом примере начальное значение аккумулятора равно 0. На каждой итерации текущий элемент добавляется к аккумулятору, в результате чего получается сумма всех элементов массива.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое пересечения типов и как они используются?

Пересечения типов (intersection types) в TypeScript позволяют комбинировать несколько типов в один. Это полезно, когда требуется объект, который должен удовлетворять нескольким типам одновременно. Пересечения типов создаются с помощью оператора &.

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

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

type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: number;
};

type EmployeePerson = Person & Employee;

const employee: EmployeePerson = {
  name: "John",
  age: 30,
  employeeId: 1234
};

В этом примере EmployeePerson объединяет свойства Person и Employee, и объект employee должен содержать все эти свойства. Пересечения типов позволяют создавать более гибкие структуры данных.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как использовать атрибут hidden в HTML?

Атрибут hidden в HTML используется для скрытия элементов на веб-странице. Когда элемент имеет этот атрибут, он не отображается пользователю и не занимает места в документе. Это полезно для временного скрытия контента, который может быть показан позже с помощью JavaScript.

Пример использования атрибута hidden:

<div hidden>
  Этот текст скрыт и не будет виден на странице.
</div>

Чтобы показать скрытый элемент, можно удалить атрибут hidden с помощью JavaScript:

const element = document.querySelector('div');
element.hidden = false; // Показывает элемент

Атрибут hidden отличается от CSS-свойства display: none; тем, что он является семантическим и может быть использован для указания на то, что элемент временно скрыт.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое градиенты в CSS и как их использовать?

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

Линейный градиент создается с помощью функции linear-gradient(). Можно задать направление и указать цвета:

background: linear-gradient(to right, red, blue);

В этом примере градиент переходит от красного к синему слева направо.

Радиальный градиент создается с помощью функции radial-gradient(), где цвета расходятся от центра:

background: radial-gradient(circle, yellow, green);

Здесь градиент начинается с желтого в центре и переходит в зеленый.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое порталы в React?

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

Для создания портала используется метод ReactDOM.createPortal(), который принимает два аргумента: элемент React и целевой DOM-узел.

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

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

Здесь Modal рендерит свои дочерние элементы в элемент с ID modal-root, который находится вне основного контейнера приложения. Порталы позволяют управлять элементами, сохраняя их стили и поведение в контексте React.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

Для встраивания аудио на HTML-страницу используется тег <audio>. Этот тег позволяет воспроизводить аудиофайлы непосредственно в браузере.

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

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает элемент <code>audio</code>.
</audio>

Атрибут controls добавляет элементы управления воспроизведением, такие как кнопки воспроизведения и паузы. Внутри тега <audio> можно использовать несколько <source> для указания разных форматов аудио, обеспечивая кроссбраузерную совместимость.

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

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

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

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

.element {
  width: calc(100% - 50px);
}

В этом примере ширина элемента вычисляется как 100% от родительского элемента минус 50 пикселей. calc() поддерживает операции сложения +, вычитания -, умножения * и деления /. Между операторами и операндами обязательно должны быть пробелы.

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

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

ℹ️Подписывайся на наши новые каналы!

🖥 JS собеседования
🖥 Backend собеседования

Методы map и forEach используются для работы с массивами.

1⃣ map создает новый массив, применяя функцию к каждому элементу исходного массива. Он возвращает новый массив с результатами вызова функции для каждого элемента. Пример:

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

2⃣ forEach выполняет функцию для каждого элемента массива, но не возвращает новый массив. Он используется для выполнения операций, которые не требуют возврата значений. Пример:

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num)); // Выводит 1, 2, 3

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

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

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

Синтаксис:

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

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

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

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

🔥 Создание таблицы в HTML осуществляется с помощью тега <table>, который содержит строки <tr>, ячейки заголовков <th> и ячейки данных <td>.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Здесь <thead> используется для заголовка таблицы, а <tbody> для основного содержимого.

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

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

Типы void и never в TypeScript имеют принципиальные различия.

1⃣ void используется для функций, которые не возвращают значение. При этом функция с типом void может вернуть undefined или выполнить какое-то действие без возврата значения.

2⃣ never представляет значения, которые никогда не могут произойти. Функция с типом never никогда не завершит свое выполнение нормально - она либо выбросит ошибку, либо будет выполняться бесконечно.

Пример void:

function logMessage(): void {
  console.log("Hello");
}

Пример never:

function throwError(): never {
  throw new Error("Something went wrong");
}

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

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