Frontend | Вопросы собесов

🤔 Зачем нужны дженерики? Необходимы для создания повторно используемых компонентов, которые работают с различными типами данных, обеспечивая при этом строгую типизацию. Они позволяют писать код, который может работать с различными типами данных без необходимости указывать конкретные типы при каждом использовании. 🚩Почему нужны 🟠Повторное использование кода Дженерики позволяют создавать обобщенные функции, классы и интерфейсы, которые можно использовать с различными типами данных, уменьшая дублирование кода и увеличивая его повторное использование. 🟠Безопасность типов Использование дженериков позволяет избежать ошибок, связанных с типами, поскольку компилятор TypeScript может проверять типы на этапе компиляции. 🟠Гибкость и абстракция Дженерики предоставляют возможность создавать более гибкие и абстрактные компоненты, которые могут работать с любыми типами данных, обеспечивая при этом строгую типизацию. 🚩Функции Дженерики позволяют создавать функции, которые могут работать с различными типами данных. Например, функция, которая возвращает переданное ей значение:

function identity<T>(value: T): T {
  return value;
}

const numberIdentity = identity(42); // T is inferred as number
const stringIdentity = identity("Hello"); // T is inferred as string

🚩Классы Классы могут использовать дженерики для работы с различными типами данных:

class Box<T> {
  contents: T;
  
  constructor(value: T) {
    this.contents = value;
  }
  
  getContents(): T {
    return this.contents;
  }
}

const numberBox = new Box<number>(123);
console.log(numberBox.getContents()); // 123

const stringBox = new Box<string>("Hello");
console.log(stringBox.getContents()); // Hello

🚩Интерфейсы Интерфейсы могут использовать дженерики для описания структур данных, которые могут содержать различные типы:

interface Pair<T, U> {
  first: T;
  second: U;
}

const numberStringPair: Pair<number, string> = {
  first: 42,
  second: "Answer"
};

const booleanArrayPair: Pair<boolean, boolean[]> = {
  first: true,
  second: [true, false, true]
};

🚩Ограничения дженериков Иногда требуется ограничить типы, которые могут быть переданы дженерикам. Для этого используются ограничения (extends). В этом примере функция logLength принимает только те типы, у которых есть свойство length.

function logLength<T extends { length: number }>(value: T): void {
  console.log(value.length);
}

logLength("Hello"); // 5
logLength([1, 2, 3]); // 3
logLength({ length: 10, value: "example" }); // 10

Ставь 👍 и забирай 📚 Базу знаний

🤔 Методы массивов в JavaScript - push() добавляет элемент в конец массива. - pop() удаляет последний элемент из массива. - shift() удаляет первый элемент массива. - unshift() добавляет один или несколько элементов в начало массива. - map() создает новый массив с результатами вызова указанной функции для каждого элемента. - filter() создает новый массив со всеми элементами, прошедшими проверку, заданную в передаваемой функции. - reduce() применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем тип отличается от интерфейса? 🚩Типы (Type) Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.

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

Типы могут комбинировать другие типы с использованием объединений (|) и пересечений (&):

type ID = string | number;

type Employee = {
  id: ID;
  department: string;
};

type Manager = User & Employee & {
  employees: User[];
};

🚩Интерфейсы (Interface) Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.

interface User {
  name: string;
  age: number;
}

interface Employee extends User {
  department: string;
}

Интерфейсы могут расширять другие интерфейсы:

interface Manager extends Employee {
  employees: User[];
}

🚩Ключевые различия 🟠Расширение (extends) и пересечение (&) Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова extends. Типы могут использовать пересечения (&) для комбинирования других типов. 🟠Объединения (Union types) Типы могут определять объединения (например, string | number), что позволяет описывать переменные, которые могут быть одного из нескольких типов. Интерфейсы не поддерживают объединения. 🟠Декларативное объединение Интерфейсы могут быть объединены (merged) TypeScript'ом, если они объявлены несколько раз с одинаковым именем. Типы не поддерживают объединение, и объявление одного и того же типа несколько раз приведет к ошибке. 🟠Примитивы и другие типы Типы могут представлять примитивные типы (например, string, number), а также сложные типы и функции. Интерфейсы могут описывать только структуры объектов. 🚩Примеры Тип с объединением

type ID = string | number;

const userId: ID = 123;
const userName: ID = "abc";

Объединение интерфейсов

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  name: "John",
  age: 30
};

Расширение интерфейсов

interface User {
  name: string;
  age: number;
}

interface Employee extends User {
  department: string;
}

const employee: Employee = {
  name: "Alice",
  age: 25,
  department: "HR"
};

Тип с пересечением

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

type Employee = User & {
  department: string;
};

const employee: Employee = {
  name: "Bob",
  age: 35,
  department: "IT"
};

Ставь 👍 и забирай 📚 Базу знаний

🤔 Различия между let и const - let позволяет переназначать значения переменных, в то время как const не позволяет это после инициализации. - Обе директивы предоставляют блочную область видимости. - let идеально подходит для использования в случаях, когда значение переменной может изменяться. - const используется для объявления переменных с неизменным значением. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Создавайте красоту с HUAWEI Пришло время творить! Загрузите свой рисунок, созданный на планшете HUAWEI. Станьте финалистом конкурса GoPaint и выиграйте главный приз - планшет HUAWEI MatePad Pro. Перейти на сайт #реклама consumer.huawei.com О рекламодателе

🤔 На что влияет доступность? В веб-разработке влияет на то, насколько удобно и возможно использовать веб-сайт или веб-приложение для всех пользователей, включая людей с ограниченными возможностями. Она охватывает широкий спектр практик и технологий, которые делают веб-контент более доступным и понятным для людей с различными физическими, сенсорными, когнитивными и технологическими ограничениями. 🚩Почему важна 🟠Инклюзивность Доступность позволяет людям с ограниченными возможностями использовать веб-сайты наравне с другими пользователями. Это включает людей с нарушениями зрения, слуха, двигательной активности и когнитивными проблемами. 🟠Юридические требования В некоторых странах и регионах существуют законы и нормативные акты, требующие обеспечения доступности веб-сайтов и приложений. Например, в США действует Закон о доступности (ADA), а в Европейском Союзе – Директива о доступности веб-сайтов и мобильных приложений. 🟠SEO и охват Доступные веб-сайты часто лучше индексируются поисковыми системами, поскольку многие практики доступности пересекаются с рекомендациями по SEO (поисковой оптимизации). Это помогает улучшить видимость сайта и его охват. 🟠Пользовательский опыт Доступные сайты обычно имеют более ясную и интуитивно понятную структуру, что улучшает общий пользовательский опыт для всех, включая людей без ограниченных возможностей. 🚩Основные аспекты 🟠Текстовые альтернативы Все визуальные элементы (например, изображения, иконки) должны иметь текстовые альтернативы (атрибуты alt), чтобы их можно было понять с помощью экранных читалок. 🟠Навигация с клавиатуры Весь функционал сайта должен быть доступен с клавиатуры. Это важно для людей, которые не могут использовать мышь. 🟠Контраст и читабельность Текст должен быть достаточно контрастным по отношению к фону, чтобы его было легко читать людям с нарушениями зрения. 🟠Использование семантических HTML-тегов Семантические теги (<header>, <nav>, <main>, <footer>, <article>, <section> и т.д.) помогают структурам страницы быть более понятными для вспомогательных технологий. 🟠Формы и элементы управления Формы должны быть четко обозначены с помощью меток (<label>) и иметь описания ошибок, чтобы пользователи могли легко взаимодействовать с ними. 🟠Видео и аудио Видео и аудио должны сопровождаться субтитрами и текстовыми транскрипциями, чтобы пользователи с нарушениями слуха могли понять содержание.

<img src="example.jpg" alt="Описание изображения">

Пример формы с доступными метками:

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Электронная почта:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Отправить</button>
</form>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое двустороннее связывание? Двустороннее связывание (two-way binding) — это процесс автоматической синхронизации данных между моделью и представлением. В контексте JavaScript и фреймворков, таких как Angular, это означает, что изменения в модели обновляют пользовательский интерфейс, и наоборот — изменения в интерфейсе изменяют данные в модели. Двустороннее связывание упрощает работу с формами и вводом данных, так как не требует явного написания кода для передачи данных в обе стороны. Это улучшает интерактивность и упрощает обработку данных. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Помощь в трудоустройстве в IT-сфере! По всей России объявили бесплатную программу на шестимесячное обучение по IT-cпециальностям. Запись на участие в программе продлится до конца июля, но чтобы туда попасть, нужно пройти специальный профтест. По результату тестирования сразу узнаете, какая профессия вам подойдет, и проходите ли вы на бесплатное обучение. Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 Чем html отличается от jsx? HTML и JSX имеют сходства и различия, которые важно понимать при разработке веб-приложений, особенно в контексте работы с библиотекой React. 🚩HTML Это стандартный язык разметки для создания веб-страниц. Он используется для определения структуры и содержания веб-страницы. HTML состоит из элементов, заключенных в теги, которые определяют различные части веб-страницы, такие как заголовки, абзацы, списки, ссылки, изображения и другие элементы.

<!DOCTYPE html>
<html>
<head>
  <title>Пример HTML</title>
</head>
<body>
  <h1>Заголовок</h1>
  <p>Это абзац.</p>
</body>
</html>

🚩JSX Это синтаксическое расширение для JavaScript, которое используется в React для описания того, как пользовательский интерфейс должен выглядеть. JSX позволяет писать HTML-подобный код внутри JavaScript, который затем транспилируется в вызовы JavaScript-функций. Этот код выглядит как HTML, но на самом деле он является JavaScript-кодом, который будет компилироваться в вызовы React.createElement.

const element = (
  <div>
    <h1>Заголовок</h1>
    <p>Это абзац.</p>
  </div>
);

🚩Ключевые отличия 🟠Синтаксис и семантика HTML использует стандартные HTML-теги и атрибуты. JSX использует JavaScript-выражения внутри фигурных скобок {}, и некоторые атрибуты имеют другие названия (например, className вместо class, htmlFor вместо for). 🟠Логика и данные В HTML нельзя напрямую писать JavaScript-код, можно лишь использовать его через теги <script>. В JSX можно использовать любые JavaScript-выражения, что позволяет динамически формировать разметку. 🟠Транспиляция HTML непосредственно интерпретируется браузером. JSX нужно транспилировать (с помощью Babel или другого транспилера) в обычный JavaScript, чтобы браузер мог его понять. 🟠Расширенные возможности HTML не поддерживает логику напрямую, все изменения в DOM происходят через JavaScript. JSX позволяет интегрировать логику непосредственно в разметку, что делает код более декларативным и удобным для работы в рамках React. Пример использования динамического контента

const name = "Мир";
const element = <h1>Привет, {name}!</h1>;

Этот JSX-код будет транспилирован

const element = React.createElement('h1', null, 'Привет, ', name, '!');

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие бывают значения у свойства position? Свойство `position` в CSS имеет следующие значения: `static` (по умолчанию, элемент расположен в нормальном потоке документа), `relative` (элемент перемещается относительно своего нормального положения), `absolute` (элемент позиционируется относительно ближайшего предка с позиционированием), `fixed` (элемент фиксируется относительно окна браузера) и `sticky` (элемент перемещается до определённой границы и остаётся закреплённым). Эти значения позволяют управлять расположением элементов на странице в зависимости от требований верстки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что возвращает map? Используется для создания нового массива, содержащего результаты вызова переданной функции для каждого элемента исходного массива. Этот метод не изменяет оригинальный массив, а возвращает новый. 🚩Почему это нужно? Метод map удобен для выполнения операции на каждом элементе массива без необходимости вручную перебирать массив с помощью цикла. Он обеспечивает более чистый и читаемый код. 🚩Как это используется? Метод map принимает одну функцию в качестве аргумента. Эта функция будет выполнена для каждого элемента массива, и результат выполнения этой функции будет добавлен в новый массив, который в итоге возвращается методом map. В этом примере каждый элемент массива numbers умножается на 2, и результат сохраняется в новом массиве doubled.

const numbers = [1, 2, 3, 4, 5];

// Используем метод map для умножения каждого элемента на 2
const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

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

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

🚩Дополнительные параметры Функция, переданная в map, может принимать до трех аргументов: 🟠Текущий элемент массива. 🟠Индекс текущего элемента. 🟠Сам исходный массив. Пример с использованием всех трех аргументов:

const numbers = [1, 2, 3, 4, 5];

const detailed = numbers.map((num, index, array) => {
  return `Элемент ${num} находится на индексе ${index} в массиве [${array}]`;
});

console.log(detailed);
/*
[
  'Элемент 1 находится на индексе 0 в массиве [1,2,3,4,5]',
  'Элемент 2 находится на индексе 1 в массиве [1,2,3,4,5]',
  'Элемент 3 находится на индексе 2 в массиве [1,2,3,4,5]',
  'Элемент 4 находится на индексе 3 в массиве [1,2,3,4,5]',
  'Элемент 5 находится на индексе 4 в массиве [1,2,3,4,5]'
]
*/

Ставь 👍 и забирай 📚 Базу знаний

🤔 Для чего нужен eventloop в js? Event Loop (цикл событий) в JavaScript управляет выполнением асинхронного кода, следя за очередями задач и выполняя их последовательно. Когда в основной поток попадает асинхронная задача, такая как таймер или сетевой запрос, она добавляется в очередь событий. После завершения текущего блока кода Event Loop проверяет, есть ли готовые задачи в очереди, и запускает их. Это позволяет JavaScript быть однопоточным языком с поддержкой асинхронных операций без блокировки основного потока. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что происходит при схлопывании границ? Это процесс в CSS, когда вертикальные внешние отступы (margins) двух или более блоков объединяются в один. Это поведение касается только вертикальных отступов (margin-top и margin-bottom) и не касается горизонтальных (margin-left и margin-right). 🚩Почему это нужно? Схлопывание границ помогает избежать ненужных больших отступов между элементами. Например, если у двух соседних элементов установлены верхний и нижний отступы, то без схлопывания они бы суммировались и создавали избыточное пространство между элементами. 🚩Как это работает? Если у одного блока снизу есть margin-bottom, а у другого блока сверху есть margin-top, то итоговый отступ между этими блоками будет равен большему из двух значений, а не их сумме. Если у элемента задан margin-top и он находится первым в контейнере, его верхний отступ может схлопнуться с верхним отступом контейнера. Если у элемента установлен margin-bottom и он является последним в контейнере, его нижний отступ может схлопнуться с нижним отступом контейнера. В этом примере между блоками будет отступ не 50px (20px + 30px), а 30px, потому что сработает схлопывание границ и возьмется большее значение.

<!DOCTYPE html>
<html>
<head>
    <style>
        .block1 {
            margin-bottom: 20px;
            background-color: lightblue;
        }
        .block2 {
            margin-top: 30px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="block1">Блок 1</div>
    <div class="block2">Блок 2</div>
</body>
</html>

🚩Когда схлопывание границ не происходит 🟠Если элементы имеют display:flex или display:grid. 🟠Если между элементами есть элемент с padding или border. 🟠Если у одного из элементов установлено свойство overflow со значением отличным от visible. 🟠Если один из элементов плавающий (float). Ставь 👍 и забирай 📚 Базу знаний

GitHub теперь в Telegram! Более 7000+ репозиториев с исходным кодом нейросетей, ботов, сайтов и других интересных проектов для разработчиков: Всё разбито по #хештегам. Подписывайтесь: @GitHub

🤔 Что такое дженерик? Дженерики (generics) в программировании позволяют создавать функции и классы с параметризованными типами, которые могут работать с любыми типами данных. В JavaScript, несмотря на отсутствие встроенной поддержки дженериков, концепция реализуется через использование универсальных функций, которые принимают аргументы любого типа. В TypeScript дженерики активно используются для обеспечения типобезопасности при работе с обобщёнными структурами данных. Дженерики делают код более гибким и многоразовым. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Яндекс Директ Только этой осенью Яндекс Директ добавит до 20 000 ₽ на рекламу для вашего бизнеса ⚡ Узнать больше #реклама yandex.ru О рекламодателе

🤔 Как изменить стили для элемента span? Для изменения стилей элемента <span> в CSS можно использовать селекторы классов, идентификаторов, селекторы по атрибутам или селекторы по типу элемента. 🚩Как стилизовать <span> элемент 🟠Селекторов классов Если элементу <span> присвоен класс, вы можете использовать класс-селектор для его стилизации. HTML

<span class="highlight">Этот текст будет выделен.</span>

CSS

.highlight {
    color: red;
    font-weight: bold;
    background-color: yellow;
}

🟠Селекторов идентификаторов Если элементу <span> присвоен идентификатор, вы можете использовать идентификатор-селектор для его стилизации. HTML

<span id="unique-span">Этот текст уникален.</span>

CSS

#unique-span {
    color: blue;
    font-style: italic;
    background-color: lightgray;
}

🟠Селекторов по атрибутам Вы можете использовать селекторы атрибутов для стилизации элементов <span>, основанных на наличии определенного атрибута или его значения. HTML

<span data-custom="example">Этот текст имеет пользовательский атрибут.</span>

CSS

span[data-custom="example"] {
    color: green;
    text-decoration: underline;
}

🟠Селекторов по типу элемента Вы можете использовать селектор по типу элемента для стилизации всех элементов <span> на странице. Однако будьте осторожны с этим подходом, так как он затронет все <span> элементы. HTML

<span>Этот текст будет стилизован.</span>
<span>И этот текст тоже.</span>

CSS

span {
    color: purple;
    font-size: 18px;
}

🟠Комбинированные селекторы Вы можете комбинировать различные типы селекторов для более точной стилизации. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Span Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <span class="highlight">Этот текст будет выделен.</span>
    <span id="unique-span">Этот текст уникален.</span>
    <span data-custom="example">Этот текст имеет пользовательский атрибут.</span>
    <p>Текст с <span class="highlight">выделением</span> внутри абзаца.</p>
    <p id="unique-paragraph">Абзац с <span class="highlight">выделением</span> и уникальным идентификатором.</p>
</body>
</html>

CSS

/* Стили для класса */
.highlight {
    color: red;
    font-weight: bold;
    background-color: yellow;
}

/* Стили для идентификатора */
#unique-span {
    color: blue;
    font-style: italic;
    background-color: lightgray;
}

/* Стили для пользовательского атрибута */
span[data-custom="example"] {
    color: green;
    text-decoration: underline;
}

/* Стили для всех span */
span {
    color: purple;
    font-size: 18px;
}

/* Комбинированные стили */
p span.highlight {
    color: red;
    font-weight: bold;
}

#unique-paragraph span.highlight {
    color: blue;
    background-color: yellow;
}

Ставь 👍 и забирай 📚 Базу знаний

👨‍💻 Изучай фронтенд по мини-гайдам! Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript ➡️ Подписывайся на WebTaverna 😮 А также не забудь заглянуть в jsProger, где ты найдешь обучающие мини-гайды чисто по JavaScript, без HTML и CSS ➡️ Перейти в канал jsProger 📱

🤔 В чём разница между foreach и map? `forEach` выполняет функцию для каждого элемента массива, не возвращая нового массива, тогда как `map` создает новый массив, заполняя его результатами выполнения функции для каждого элемента исходного массива. `forEach` обычно используется для выполнения побочных эффектов, таких как изменение существующих данных или вызов внешних функций. `map` удобен для преобразования массива в новый массив с изменёнными данными. Если требуется создать новый массив, предпочтительнее использовать `map`. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

" Frontend-разработчик". Курс с нуля до трудоустройства. Профессия Frontend-разработчик это: ✅ Быстрый старт в IT без технического образования ✅ Зарплата от 140 000 ₽ после обучения ✅ Возможность работать удаленно из любой точки мира ✅ Высокий спрос на рынке труда – 4000+ вакансий прямо сейчас Наш курс создан специально для новичков: - Обучение с нуля – никаких предварительных знаний не требуется - 9 месяцев пошагового обучения - Простой язык без сложных терминов - Персональный наставник, который поддержит на каждом этапе - 14 проектов для вашего будущего портфолио Гибкий график, дастанционное обучение. Практика с первых дней. Групповые проекты – почувствуйте атмосферу реальной команды разработчиков Помощь в составлении резюме и репетиция собеседований Гарантия трудоустройства или возврат денег! Узнать больше #реклама 16+ result.school О рекламодателе