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

Open in Telegram

Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky

Network:easyoffer Russia36 940 Technologies & Applications7 345...

📈 Analytical overview of Telegram channel Frontend | Вопросы собесов

Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 18 272 subscribers, ranking 7 345 in the Technologies & Applications category and 36 940 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 18 272 subscribers.

According to the latest data from 15 June, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -134 over the last 30 days and by -7 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 9.73%. Within the first 24 hours after publication, content typically collects 5.72% reactions from the total number of subscribers.
Post reach: On average, each post receives 1 778 views. Within the first day, a publication typically gains 1 046 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 9.
Thematic interests: Content is focused on key topics such as ставь, браузер, html, border, flex.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky”

Thanks to the high frequency of updates (latest data received on 16 June, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.

18 272

Subscribers

-724 hours

-407 days

-13430 days

1 778

Post views

~ 1 04624 hours

~ 1 21848 hours

9.73%

Engagement rate

~ 1

Posts per day

Ads index

beta

Posts Archive

18 272

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

18 272

🤔 Что происходит при схлопывании границ? Это процесс в 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). Ставь 👍 и забирай 📚 Базу знаний

18 272

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

18 272

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

18 272

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

18 272

🤔 Как изменить стили для элемента 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;
}

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

18 272

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

18 272

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

18 272

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

18 272

🤔 Как изменить стили кнопок с атрибутом 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;
}

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

18 272

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

18 272

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

18 272

🤔 Что такое селектор атрибутов? Позволяют выбирать элементы 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;
}

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

18 272

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

18 272

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

18 272

🤔 Как стилизовать инпут для загрузки файлов? Элемент <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 на имя выбранного файла. Ставь 👍 и забирай 📚 Базу знаний

18 272

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

18 272

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

18 272

🤔 Для чего рекомендуется использовать атрибуты 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- валидны и не нарушают спецификацию. Ставь 👍 и забирай 📚 Базу знаний

18 272

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