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

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

Открыть в Telegram

📈 Аналитический обзор Telegram-канала Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 18 272 подписчиков, занимая 7 345 место в категории Технологии и приложения и 36 940 место в регионе Россия.

📊 Показатели аудитории и динамика

С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 18 272 подписчиков.

Согласно последним данным от 15 июня, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -134, а за последние 24 часа — -7, при этом общий охват остаётся высоким.

  • Статус верификации: Не верифицирован
  • Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 9.73%. В первые 24 часа после публикации контент обычно набирает 5.72% реакций от общего числа подписчиков.
  • Охват публикаций: В среднем каждый пост получает 1 778 просмотров. В течение первых суток публикация набирает 1 046 просмотров.
  • Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 9.
  • Тематические интересы: Контент сосредоточен на ключевых темах, таких как ставь, браузер, html, border, flex.

📝 Описание и контентная политика

Автор описывает ресурс как площадку для выражения субъективного мнения:
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky

Благодаря высокой частоте обновлений (последние данные получены 16 июня, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.

18 272
Подписчики
-724 часа
-407 дней
-13430 день
Архив постов
🤔 Для чего нужен 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 теперь в 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 ежедневно публикуют полезные обучающие мини-гайды в картинках, а также
+4
👨‍💻 Изучай фронтенд по мини-гайдам! Канал 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 О рекламодателе

🤔 Как изменить стили кнопок с атрибутом disabled? C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled. 🚩Пример использования 🟠Селектора [disabled] Этот селектор выбирает все элементы, у которых присутствует атрибут disabled.
button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
    opacity: 0.6; /* Уменьшает непрозрачность */
}
🟠Псевдокласса :disabled Этот селектор выбирает все элементы, которые находятся в состоянии disabled.
button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}
🚩Полные примеры С HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled Button Styling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button>Active Button</button>
    <button disabled>Disabled Button</button>
</body>
</html>
С CSS
/* Стили для активных кнопок */
button {
    background-color: blue;
    color: white;
    border: 1px solid #000;
    padding: 10px 20px;
    cursor: pointer;
}

/* Стили для кнопок с атрибутом disabled */
button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}
🟠Комбинированный подход Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
    background-color: darkgray;
    color: black;
    border: 1px dashed #999;
    cursor: not-allowed;
    opacity: 0.7;
}
Ставь 👍 и забирай 📚 Базу знаний

📺 Уникальная база записей IT собеседований 180+ записей реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. Записи собесов от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство! У тебя есть запись собеседования? Мы готовы ее купить и заплатим до 3000 руб. за каждую

🤔 В чём отличие хранения данных в local storage от куки? `localStorage` хранит данные на стороне клиента и позволяет сохранять информацию в виде ключ-значение без ограничения по времени, пока пользователь явно не удалит данные. Куки же могут передаваться на сервер при каждом запросе, имеют ограниченный объём (до 4KB) и срок действия. `localStorage` более удобен для долгосрочного хранения данных, которые не должны передаваться на сервер, тогда как куки полезны для передачи информации, такой как аутентификационные токены. `localStorage` работает только на клиентской стороне, куки же могут быть доступны и на стороне сервера. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое селектор атрибутов? Позволяют выбирать элементы HTML на основе наличия, значения или частичного соответствия атрибутов. Это мощный инструмент, который делает стилизацию элементов более гибкой и точной. 🚩Виды 🟠Селектор по наличию атрибута Выбирает элементы, которые содержат указанный атрибут, независимо от его значения.
/* Выбирает все элементы с атрибутом title */
[title] {
    color: blue;
}
🟠Селектор по точному значению атрибута Выбирает элементы, атрибут которых имеет точное указанное значение.
/* Выбирает все элементы с атрибутом type, равным "submit" */
input[type="submit"] {
    background-color: green;
}
🟠Селектор по наличию значения в списке значений атрибута Выбирает элементы, атрибут которых содержит указанное значение в списке, разделенном пробелами.
/* Выбирает все элементы с классом, включающим "btn" */
[class~="btn"] {
    font-weight: bold;
}
🟠Селектор по начальной части значения атрибута Выбирает элементы, атрибут которых начинается с указанного значения.
/* Выбирает все элементы, значение атрибута href которых начинается с "https" */
a[href^="https"] {
    color: red;
}
🟠Селектор по конечной части значения атрибута Выбирает элементы, атрибут которых заканчивается на указанное значение.
/* Выбирает все элементы, значение атрибута href которых заканчивается на ".pdf" */
a[href$=".pdf"] {
    text-decoration: underline;
}
🟠Селектор по вхождению значения в атрибут Выбирает элементы, атрибут которых содержит указанное значение в любом месте.
/* Выбирает все элементы, значение атрибута href которых содержит "example" */
a[href*="example"] {
    color: orange;
}
🚩Примеры использования селекторов атрибутов Стилизация всех изображений с атрибутом alt
img[alt] {
    border: 2px solid blue;
}
Стилизация ссылок, ведущих на внешние сайты
a[href^="http"] {
    color: red;
}
Стилизация полей ввода с определенным типом
input[type="text"] {
    border: 1px solid gray;
}
Стилизация элементов с определенным классом
[class~="button"] {
    padding: 10px;
    background-color: lightgray;
}
🚩Комбинированные селекторы Селекторы атрибутов можно комбинировать с другими типами селекторов для создания более специфичных правил.
/* Выбирает все кнопки с классом btn и типом submit */
button.btn[type="submit"] {
    background-color: green;
    color: white;
}
Ставь 👍 и забирай 📚 Базу знаний

🚀 Senior-разработчики делится секретами фронтенда в канале @frontendino Ежедневно разбираем сложные темы простым языком, пок
🚀 Senior-разработчики делится секретами фронтенда в канале @frontendino Ежедневно разбираем сложные темы простым языком, показываем примеры кода и решаем реальные задачи. 👉 Присоединяйтесь к сообществу профессионалов

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

🤔 Как стилизовать инпут для загрузки файлов? Элемент <input type="file"> может быть сложно из-за его специфичного и нестандартного поведения в разных браузерах. Однако, с помощью CSS и небольшого количества JavaScript, можно создать стилизованный компонент для загрузки файлов, который будет выглядеть и работать одинаково во всех браузерах. 🚩Для загрузки файлов HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom File Input</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="file-input">
        <input type="file" id="file" class="file-input__input">
        <label for="file" class="file-input__label">
            <span class="file-input__button">Choose a file</span>
            <span class="file-input__name">No file chosen</span>
        </label>
    </div>
    <script src="scripts.js"></script>
</body>
</html>
🚩Для загрузки файлов CSS
/* Стили для контейнера файла */
.file-input {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
    font-family: Arial, sans-serif;
}

/* Скрыть стандартный инпут для файла */
.file-input__input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Стили для кастомного лейбла */
.file-input__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;
    cursor: pointer;
}

/* Стили для кнопки выбора файла */
.file-input__button {
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
}

/* Стили для отображения имени файла */
.file-input__name {
    color: #999;
}
🚩Для загрузки файлов JavaScript
document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.querySelector('.file-input__input');
    const fileName = document.querySelector('.file-input__name');

    fileInput.addEventListener('change', function () {
        if (fileInput.files.length > 0) {
            fileName.textContent = fileInput.files[0].name;
        } else {
            fileName.textContent = 'No file chosen';
        }
    });
});
🟠HTML Создается структура с элементом <input type="file">, который скрыт с помощью CSS. <label> используется для создания пользовательского интерфейса. Лейбл связан с инпутом через атрибут for. 🟠CSS Скрывается стандартный элемент инпута для файла с помощью opacity: 0 и position: absolute. Стилизуются кастомные элементы лейбла, кнопки и отображения имени файла. 🟠JavaScript Слушает событие change на инпуте для файла. При выборе файла обновляет текст внутри элемента с классом .file-input__name на имя выбранного файла. Ставь 👍 и забирай 📚 Базу знаний

👀 Вы все еще не слышали про канал Путь в IT? Автор (Илья) на своем примере показывает, через что приходится проходить начина
👀 Вы все еще не слышали про канал Путь в IT? Автор (Илья) на своем примере показывает, через что приходится проходить начинающему специалисту. 😉 Почему такого контента вы еще не видели? Илья создает уникальные видео, совмещая тренировки, бытовые моменты и рабочий процесс. Сейчас начинающий специалист поступил в вуз и переехал в другой город, поэтому контент будет еще интересней. Если хочешь узнать админа лучше, зайди в закреп его канала. 👋 Подписывайся, данный канал будет разжигать в тебе огонь. Путь в IT

🤔 Какие бывают хуки? В React хуки — это специальные функции, которые позволяют "подключаться" к состоянию и жизненному циклу функциональных компонентов. Основные хуки включают `useState` для работы с состоянием, `useEffect` для выполнения побочных эффектов, и `useContext` для доступа к контексту. Также есть пользовательские хуки, которые можно создавать для повторного использования логики между компонентами. Хуки позволяют использовать функциональные компоненты так же эффективно, как и классовые. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего рекомендуется использовать атрибуты data? В HTML используются для хранения пользовательских данных в элементах страницы. Они предоставляют способ добавления информации к элементам HTML, не вмешиваясь в стандартные атрибуты и структуру HTML. Эти атрибуты позволяют разработчикам ассоциировать произвольные данные с элементами и использовать их в JavaScript для создания более динамичных и интерактивных веб-приложений. 🚩Атрибуты 🟠Хранение дополнительных данных Позволяют хранить пользовательские данные непосредственно в HTML-элементах. Это особенно полезно, когда необходимо передавать данные между HTML и JavaScript.
<div id="user" data-user-id="123" data-user-role="admin">...</div>   
🟠Создание более гибких и интерактивных приложений Можно легко передавать и использовать данные для динамического изменения содержимого страницы.
<button data-action="save" data-target="#form">Save</button>  
🟠Разделение данных и представления Помогают разделять данные и логику от представления, сохраняя HTML-код чистым и структурированным. 🟠Работа с JavaScript JavaScript может легко извлекать и использовать данные из атрибутов data-, что упрощает манипулирование элементами страницы.
const user = document.getElementById('user');
const userId = user.getAttribute('data-user-id');
const userRole = user.getAttribute('data-user-role');
console.log(`User ID: ${userId}, Role: ${userRole}`);  
🚩Примеры использования 🟠Хранение информации о продукте
<div class="product" data-product-id="101" data-product-price="29.99">
    <h2>Product Name</h2>
    <p>Product Description</p>
</div>
const product = document.querySelector('.product');
const productId = product.getAttribute('data-product-id');
const productPrice = product.getAttribute('data-product-price');
console.log(`Product ID: ${productId}, Price: ${productPrice}`);
🟠Управление действиями кнопки
<button data-action="submit" data-target="#form">Submit</button>
const button = document.querySelector('button');
button.addEventListener('click', function() {
    const action = this.getAttribute('data-action');
    const target = this.getAttribute('data-target');
    console.log(`Action: ${action}, Target: ${target}`);
});
🟠Хранение состояния элемента
<div id="toggle" data-state="collapsed">Click to Expand</div>
const toggle = document.getElementById('toggle');
toggle.addEventListener('click', function() {
    const state = this.getAttribute('data-state');
    if (state === 'collapsed') {
        this.setAttribute('data-state', 'expanded');
        this.textContent = 'Click to Collapse';
    } else {
        this.setAttribute('data-state', 'collapsed');
        this.textContent = 'Click to Expand';
    }
});
🚩ПлюсыПростота и гибкость Легко добавлять и изменять данные без изменения HTML-структуры. ➕Совместимость с существующими инструментами Атрибуты data- не влияют на стандартные функции браузеров и инструментов разработки. ➕Поддержка валидации HTML HTML5 атрибуты data- валидны и не нарушают спецификацию. Ставь 👍 и забирай 📚 Базу знаний

⚡️ Вся база знаний по IT в одном месте! 🧑‍💻 IT База — краткие разборы самого важного из мира IT. Сотни мастхев-ресурсов, каждый день новые материалы по работе и подготовке к собеседованиям. Подойдёт как новичкам, так и состоявшимся айтишникам; 🖥 Frontend База — всё для фронтенд разработчиков. Готовые решения для проектов, полезные курсы по JS/HTML/CSS, готовые роадмапы для комфортного освоения в профессии и дальнейшего развития; 👣 Backend База — самое важное для бэкендеров. Всё о работе с PHP, MySQL, MongoDB, Golang и Rust в одном месте, плюс полные курсы и лайфхаки для работы на каждый день; 🖥 База Знаний — склад полезных курсов и материалов, где легко найти что-то нужное по хэштегам. Если вам что-то интересно про IT, то оно уже лежит на Базе, проверяйте. Успей подписаться, чтобы не потерять!