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

Відкрити в Telegram

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

Сітка:easyoffer Росія36 931 Технології та додатки7 342...

📈 Аналітичний огляд Telegram-каналу Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 18 295 підписників, посідаючи 7 342 місце в категорії Технології та додатки та 36 931 місце у регіоні Росія.

📊 Показники аудиторії та динаміка

З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 18 295 підписників.

За останніми даними від 12 червня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -115, а за останні 24 години на -5, загальне охоплення залишається високим.

Статус верифікації: Не верифікований
Рівень залученості (ER): Середній показник залученості аудиторії становить 9.40%. Протягом перших 24 годин після публікації контент зазвичай збирає 5.72% реакцій від загальної кількості підписників.
Охоплення публікацій: В середньому кожен допис отримує 1 720 переглядів. Протягом першої доби публікація в середньому набирає 1 046 переглядів.
Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 8.
Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як ставь, браузер, html, border, flex.

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

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

Завдяки високій частоті оновлень (останні дані отримано 13 червня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.

18 295

Підписники

-524 години

-557 днів

-11530 день

1 720

Перегляди допису

~ 1 04624 години

~ 1 24548 годин

9.40%

Коефіцієнт залучення

~ 1

Дописів на день

Ads index

beta

Архів дописів

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

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