👩‍💻 Что такое свойство overflow и какие значения оно принимает?

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

Основные значения свойства overflow:

- visible: содержимое не обрезается и может выходить за границы элемента. Это значение по умолчанию.

- hidden: содержимое обрезается, и невидимая часть не отображается.

- scroll: содержимое обрезается, но появляется полоса прокрутки для просмотра скрытой части.

- auto: добавляет полосы прокрутки только при необходимости, если содержимое превышает размеры контейнера.

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

.container {
  width: 200px;
  height: 100px;
  overflow: auto;
}

Свойство overflow помогает контролировать внешний вид и поведение элементов, особенно в адаптивных интерфейсах.

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

👩‍💻 Объясни использование атрибута placeholder в полях ввода

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

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

<input type="text" placeholder="Введите ваше имя">

В этом примере текст "Введите ваше имя" будет отображаться в поле ввода до тех пор, пока пользователь не начнет вводить текст.

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

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

👩‍💻 Что такое хуки в React? Перечисли основные

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

Основные хуки:

- useState: позволяет добавлять состояние в функциональные компоненты. Возвращает текущее значение состояния и функцию для его обновления.

const [count, setCount] = React.useState(0);

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

React.useEffect(() => {
  // эффект
}, []);

- useContext: позволяет использовать контекст в функциональных компонентах, упрощая доступ к глобальным данным.

const value = React.useContext(MyContext);

- useMemo: мемоизирует вычисленные значения, чтобы избежать ненужных повторных вычислений при рендере.

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

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

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

- useRef: создает изменяемый объект, который сохраняется между рендерами. Часто используется для доступа к DOM-элементам или хранения любых изменяемых значений.

const inputRef = React.useRef(null);

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

👩‍💻 Что такое функция обратного вызова (callback)?

Функция обратного вызова (callback) в JavaScript — это функция, переданная в другую функцию в качестве аргумента и вызываемая после завершения операции.

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

function fetchData(url, callback) {
  fetch(url)
    .then(response => response.json())
    .then(data => callback(data))
    .catch(error => console.error('Error:', error));
}

function handleData(data) {
  console.log('Received data:', data);
}

fetchData('https://api.example.com/data', handleData);

В этом примере fetchData принимает URL и функцию handleData в качестве callback. После получения данных handleData вызывается для обработки результата.

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

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

Ambient Declarations в TypeScript используются для описания типов, которые существуют в других файлах или библиотеках, но не определены в текущем коде. Они позволяют TypeScript понимать типы, предоставляемые внешними JavaScript библиотеками, без необходимости переписывать их.

Ambient Declarations создаются с помощью ключевого слова declare. Например, для использования глобальной переменной, определенной вне TypeScript:

declare const API_URL: string;

Для описания интерфейса библиотеки можно использовать declare module:

declare module 'my-library' {
  export function myFunction(): void;
}

Ambient Declarations часто находятся в файлах с расширением .d.ts, которые содержат только объявления типов. Эти файлы помогают интегрировать TypeScript с существующими JavaScript проектами и библиотеками, обеспечивая статическую проверку типов и автодополнение в редакторах.

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

👩‍💻 Зачем были введены хуки?

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

Основные причины введения хуков:

- Упрощение кода: хуки позволяют использовать состояние и другие возможности React в функциональных компонентах, делая код более простым и понятным.

- Повторное использование логики: хуки упрощают повторное использование логики состояния между компонентами без необходимости использовать HOC или render props.

- Управление побочными эффектами: useEffect заменяет методы жизненного цикла, упрощая управление побочными эффектами и улучшая читаемость кода.

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

Введение хуков значительно улучшило разработку на React, сделав её более гибкой и эффективной.

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

👩‍💻 Как подключить CSS в HTML-документ?

Подключение CSS к HTML-документу — важный шаг для стилизации веб-страницы. Существует несколько способов сделать это:

1. Внешний файл CSS: наиболее распространенный метод, который позволяет хранить стили отдельно от HTML. Используется тег <link> в разделе <head>:

<link rel="stylesheet" href="styles.css">

2. Встроенные стили: стили добавляются непосредственно в HTML-документ внутри тега <style> в разделе <head>:

<style>
  body {
    background-color: #f0f0f0;
  }
</style>

3. Inline-стили: стили применяются непосредственно к элементам через атрибут style. Этот метод менее предпочтителен из-за плохой читаемости и поддержки:

<div style="color: red;">Hello World</div>

Использование внешнего файла CSS рекомендуется для лучшей организации и повторного использования стилей.

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

👩‍💻 Что такое прототипное наследование?

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

Когда обращение к свойству объекта происходит, JavaScript сначала ищет это свойство в самом объекте. Если оно не найдено, поиск продолжается в прототипе объекта, и так далее, по цепочке прототипов.

Пример создания объекта с прототипным наследованием:

const animal = {
  eat() {
    console.log('Eating');
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log('Barking');
};

dog.eat(); // 'Eating'
dog.bark(); // 'Barking'

В этом примере объект dog наследует метод eat от объекта animal через прототип. Прототипное наследование позволяет создавать иерархии объектов, обеспечивая гибкость и повторное использование кода.

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

👩‍💻 Для чего используется тег <link>?

Тег <link> в HTML используется для установления связей между текущим документом и внешними ресурсами. Он обычно располагается в разделе <head> и не отображается на странице. Основные применения тега <link> включают:

- Подключение CSS: наиболее распространенное использование — подключение внешних таблиц стилей для стилизации веб-страницы.

<link rel="stylesheet" href="styles.css">

- Фавикон: указание иконки сайта, отображаемой на вкладке браузера.

<link rel="icon" href="favicon.ico" type="image/x-icon">

- Шрифты и другие ресурсы: подключение шрифтов или других ресурсов, таких как RSS-ленты.

<link rel="alternate" type="application/rss+xml" href="feed.xml">

Тег <link> играет важную роль в управлении внешними ресурсами, обеспечивая гибкость и модульность веб-страниц.

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

👩‍💻 Что такое «use strict» и для чего он используется?

"use strict" — это директива в JavaScript, которая активирует строгий режим. Строгий режим изменяет семантику JavaScript, делая его более безопасным и оптимизированным. Он помогает выявлять потенциальные ошибки и улучшает производительность кода.

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

"use strict";

function example() {
  x = 10; // Ошибка: x не определена
}

example();

В строгом режиме запрещено использование необъявленных переменных, что помогает избежать ошибок. Также он предотвращает дублирование имен параметров в функциях и запрещает использование некоторых зарезервированных слов для будущих версий JavaScript.

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

👩‍💻 Объясни назначение ключевого слова 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 должен содержать все эти свойства. Пересечения типов позволяют создавать более гибкие структуры данных.

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