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

Open in Telegram

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

Network:easyoffer Russia36 931 Technologies & Applications7 342...

📈 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 293 subscribers, ranking 7 342 in the Technologies & Applications category and 36 931 in the Russia region.

📊 Audience metrics and dynamics

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

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

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 9.40%. 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 720 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 8.
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 13 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 293

Subscribers

-524 hours

-557 days

-11530 days

1 720

Post views

~ 1 04624 hours

~ 1 24548 hours

9.40%

Engagement rate

~ 1

Posts per day

Ads index

beta

Posts Archive

18 293

🤔 Для чего используется тег <link>? Тег <link> используется для подключения внешних ресурсов: - CSS-стилей; - фавиконок; - шрифтов; - предзагрузки и приоритезации (preload, dns-prefetch). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 293

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

Концерт «ХЛЕБа», Финал Блиц Поинта и миллионы призовых! Проведи киберспортивные выходные с саундтреком от «ХЛЕБа», Oligarkh'а и FANKIN’а — скачай Tanks Blitz в RuStore, чтобы узнать больше о Финальном турнире Лиги Блиц Поинт, Часть 3 в Москве! ⚡ Узнать больше #реклама 16+ apps.rustore.ru О рекламодателе

18 293

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

18 293

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

18 293

🤔 Как отменить обтекание картинки текстом? Когда мы добавляем картинку в HTML, текст по умолчанию может обтекать её, если используется float. 🚩Отмена обтекания с `clear: both;` Если изображение обтекается текстом из-за float, нужно очистить обтекание с помощью clear: both;.

<img src="image.jpg" class="float-img">
<p class="clear-text">Этот текст не будет обтекать картинку.</p>

.float-img {
  float: left; /* Изображение обтекается текстом */
  margin-right: 10px;
}

.clear-text {
  clear: both; /* Останавливает обтекание */
}

🚩Сделать изображение блочным (`display: block;`) По умолчанию img – inline-block элемент, поэтому текст может располагаться рядом. Если сделать его display: block;, текст уйдёт вниз.

img {
  display: block;
  margin: 10px auto; /* Центрирование */
}

🚩Использовать `overflow: hidden;` для предотвращения наложений Если у родителя есть float, можно использовать overflow: hidden; для очистки потока.

.container {
  overflow: hidden; /* Очищает обтекание */
}

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

18 293

AI VK & Pro — камерный ивент о RecSys Привет, на связи VK! 27 августа мы собираем крутых ML-инженеров, исследователей и разработчиков. Адженда тусовки — развитие и будущее ML-систем, которые двигают контент в продуктах VK. Основная часть — доклады от ML-лидов VK. А дальше — афтепати: ответы на вопросы, нетворкинг, покер, сигары, винил и вино. Офлайн, без трансляций и галстуков. Москва 📅 27 августа Участие бесплатное, по регистрации Подать заявку #реклама 16+ team.vk.company О рекламодателе

18 293

🤔 Что такое HTML entities? HTML entities — это специальные символы, которые используются для отображения зарезервированных или неотображаемых символов. Например, < — это <, & — это &. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 293

Авито Путешествия: скидка 10% на жилье для отпуска Бронируйте уютные квартиры и дома через Авито Путешествия. 🏠 Отдыхайте с комфортом! 💰 Авито Путешествия предлагает скидку 10% на посуточную аренду. ⚡ Промокод действует до 31.08 — бронируйте сейчас и экономьте! Получите скидку 10% по промокоду ZABUKAL! Забронировать #реклама 12+ avito.ru О рекламодателе

18 293

🤔 Зачем нужен eslint? ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода. 🚩Почему ESLint полезен? Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить. 🚩Проблемы без ESLint Разные стили написания кода Пропущенные точки с запятой или лишние пробелы Неиспользуемые переменные Ошибки, которые не выявляются во время компиляции (например, undefined переменные) 🚩Решение с ESLint: Автоматически находит ошибки и предупреждения Подсказывает лучшие практики Поддерживает кастомные правила Работает в IDE и CI/CD (автоматическая проверка) 🟠Как ESLint работает? ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

Пример исправленного кода (ESLint fix)

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

🟠Как установить и настроить ESLint? Установка

npm install eslint --save-dev

Создание конфига

npx eslint --init

Пример .eslintrc.js (настройки ESLint)

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended", // Базовые рекомендации
    "plugin:vue/vue3-recommended" // Рекомендации для Vue
  ],
  rules: {
    "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных
    "semi": ["error", "always"], // Обязательные точки с запятой
    "quotes": ["error", "double"], // Только двойные кавычки
  },
};

Запуск проверки кода

npx eslint myfile.js

Автоматическое исправление ошибок

npx eslint myfile.js --fix

🟠ESLint в IDE (VS Code, WebStorm) Чтобы ESLint работал в VS Code, установите расширение ESLint и включите "editor.codeActionsOnSave"

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

🟠ESLint в CI/CD (автоматическая проверка на сервере) В проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку.

"scripts": {
  "lint": "eslint src --fix"
}

Теперь перед коммитом можно запускать:

npm run lint

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

18 293

Скидки до 25% на технику для сада Преобразите свой участок с нашей техникой! Купить #реклама market.yandex.ru О рекламодателе

18 293

Repost from easyoffer

Ура, друзья! Изиоффер переходит в публичное бета-тестирование! 🎉 Что нового: 🟢Анализ IT собеседований на основе 4500+ реальных интервью 🟢Вопросы из собеседований с вероятностью встречи 🟢Видео-примеры ответов на вопросы от Senior, Middle, Junior грейдов 🟢Пример лучшего ответа 🟢Задачи из собеседований 🟢Тестовые задания 🟢Примеры собеседований 🟢Фильтрация всего контента по грейдам, компаниям 🟢Тренажер подготовки к собеседованию на основе интервальных повторений и флеш карточек 🟡Тренажер "Реальное собеседование" с сценарием вопросов из реальных собеседований (скоро) 🟢Автоотклики на HeadHunter 🟢Закрытое сообщество easyoffer 💎 Акция в честь открытия для первых 500 покупателей: 🚀 Скидка 50% на PRO тариф на 1 год (~~15000₽~~ → 7500₽) 🔥 Акция уже стартовала! 👉 https://easyoffer.ru/pro

18 293

🤔 Какой метод мы вызываем в контроллере? В контроллере вызывается метод, соответствующий действию: - generateCsvReport - generateHtmlReport - generatePdfReport Метод отвечает за получение данных, их обработку и передачу в модуль, формирующий нужный формат отчёта. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 293

🤔 Что такое делегирование? Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков. 🚩Как работает делегирование? Обычный способ (без делегирования) Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую

document.querySelectorAll("button").forEach((btn) => {
  btn.addEventListener("click", () => {
    console.log("Кнопка нажата");
  });
});

Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно. Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает. 🟠Делегирование событий (оптимальный способ) Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {
    console.log("Кнопка нажата:", event.target.textContent);
  }
});

🟠Пример с динамическими элементами Если мы добавляем кнопки динамически, обработчик все равно будет работать

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.classList.contains("btn")) {
    console.log("Нажата кнопка:", event.target.textContent);
  }
});

// Добавляем новую кнопку динамически
setTimeout(() => {
  const newButton = document.createElement("button");
  newButton.classList.add("btn");
  newButton.textContent = "Новая кнопка";
  document.getElementById("container").appendChild(newButton);
}, 2000);

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

18 293

В Битрикс24 теперь можно сделать сайт за 30 секунд Серьёзно. Пишешь, что нужно, и AI сам всё собирает: тексты, картинки, оформление. ✨Никакой магии, просто умный помощник. Попробуйте — закайфуете от скорости! Попробовать #реклама 16+ sites-24.bitrix24.ru О рекламодателе

18 293

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

18 293

🤔 Что такое inline стили, и какой они имеют приоритет? Inline стили — это способ применения CSS-правил непосредственно к HTML-элементу через атрибут style. Этот метод позволяет задать стили индивидуально для конкретного элемента, напрямую внутри его тега, без использования внешних или внутренних стилевых листов.

<p style="color: red; font-size: 20px;">Этот текст будет красного цвета и с размером шрифта 20px.</p>

🚩Приоритетность inline стилей Они имеют более высокий приоритет, чем стили, заданные через внешние или внутренние стилевые листы. Это означает, что если для одного и того же элемента заданы стили через CSS-классы или идентификаторы и через inline атрибут style, то они будут применены. 🚩Порядок приоритетов CSS Inline стили (наивысший приоритет) ID селекторы Классы, псевдоклассы и атрибуты Элементы и псевдоэлементы (наименьший приоритет) Стоит отметить, что существует способ переопределить даже их с помощью правила !important в CSS, однако его использование следует минимизировать, поскольку это может усложнить дальнейшее управление и обслуживание стилей. Ставь 👍 и забирай 📚 Базу знаний

18 293

Собираемся в школу вместе с MAAG Познакомьтесь с новой детской коллекцией одежды и аксессуаров для школьных будней, встреч с друзьями и выходных. Классические модели из натуральных тканей, а для первых прохладных дней — модные тренчи, бомберы и пальто. Модные образы ищите в ближайшем магазине MAAG и на официальном сайте maag-fashion.com. Приятных покупок!✨ Купить #реклама maag-fashion.com О рекламодателе

18 293

🤔 Что такое DOM дерево - DOM (Document Object Model) — это программный интерфейс для HTML-документов, представляющий структуру страницы в виде дерева узлов. - DOM позволяет программам читать и изменять документ структурно, стилистически и содержательно, реагируя на пользовательские взаимодействия. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 293

🤔 Что такое функциональное программирование? Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов. 🚩Основные принципы функционального программирования 🟠Чистые функции (Pure Functions) Функция называется чистой, если: При одинаковых входных данных всегда возвращает одинаковый результат. Не изменяет внешние переменные (нет побочных эффектов). Нечистая функция (изменяет внешнюю переменную)

let count = 0;
function increment() {
    count += 1; // изменяет внешнюю переменную
    return count;
}

Чистая функция (зависит только от аргументов)

function increment(num) {
    return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)

🟠Иммутабельность (Immutable Data) Данные не изменяются, а создаются новые версии объектов. Изменение объекта (нефункциональный подход)

const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объект

Создание нового объекта (функциональный подход)

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объект

🟠Функции высшего порядка (Higher-Order Functions) Функция, которая принимает другую функцию в аргумент или возвращает функцию.

const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]

Пример: Функция, возвращающая другую функцию

const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10

🟠Функциональные методы массивов (map, filter, reduce) Функциональные методы позволяют не мутировать массив, а создавать новый. Используем map() для изменения элементов

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

Используем filter() для фильтрации

const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]

Используем reduce() для вычислений

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

🟠Каррирование (Currying) Разделение функции на несколько функций, каждая принимает по одному аргументу.

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

Пример: Каррированная функция

const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5

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