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

Open in Telegram

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

Network:easyoffer Russia36 941 Technologies & Applications7 354...

📈 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 275 subscribers, ranking 7 354 in the Technologies & Applications category and 36 941 in the Russia region.

📊 Audience metrics and dynamics

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

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

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 9.62%. Within the first 24 hours after publication, content typically collects 5.70% reactions from the total number of subscribers.
Post reach: On average, each post receives 1 759 views. Within the first day, a publication typically gains 1 042 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 15 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 275

Subscribers

-624 hours

-467 days

-12430 days

1 759

Post views

~ 1 04224 hours

~ 1 23848 hours

9.62%

Engagement rate

~ 1

Posts per day

Ads index

beta

Posts Archive

18 275

🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние? Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Увеличение при наведении</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            transition: transform 0.3s;
        }
        .item:hover {
            transform: scale(1.2); /* Увеличение размера при наведении */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

🚩Почему это важно? 🟠Эффективность пользовательского интерфейса Увеличение элементов при наведении может служить для привлечения внимания пользователя или для улучшения взаимодействия, например, при работе с интерактивными элементами. 🟠Стабильность макета Применение трансформации с transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов. 🟠Плавные анимации Использование transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса. Ставь 👍 и забирай 📚 Базу знаний

18 275

Курс по мотивации сотрудников, которые ничего не хотят Сегодня в Школе Гендира открыт бесплатный трехдневный доступ к онлайн-курсу Ежедневная мотивация. Основа курса – практика руководителей российских компаний. После обучения вы сможете: 👍 распознавать конфликты в коллективе на начальной стадии и вовремя принимать меры 👍 определить точки роста своего лидерского потенциала 👍 построить систему грейдов в компании 👍 внедрить метод OKR для мотивации ключевых сотрудников 👍 адаптировать для себя один из алгоритмов постановки задач Оставьте заявку на бесплатный доступ на странице курса. Подать заявку #реклама 16+ gd.ru О рекламодателе

18 275

🤔 Как отрисовывать сайт для пользователя? Отрисовка сайта включает разметку (HTML), стилизацию (CSS) и логику (JavaScript). Браузер парсит код, загружает ресурсы, выполняет скрипты и рендерит страницу на основе DOM и CSSOM. Важно минимизировать блокирующие ресурсы для быстрой загрузки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

Как айтишнику быстро получить оффер Бесплатный воркшоп 20 марта Почему одному кандидату предлагают оффер после первого интервью, а другому говорят: «Мы вам перезвоним»? Причина в подаче своего опыта. Записывайся, чтобы узнать: — Как подготовиться к собеседованию — Как презентовать свой опыт так, чтобы тебя запомнили — Как проверяют hard skills и как к этому подготовиться — Как произвести хорошее впечатление, запомнится рекрутеру и сделать так, чтобы захотели работать именно с тобой Приходи на бесплатный воркшоп и узнай, как прокачать навык самопрезентации и получить работу мечты Зарегистрироваться #реклама 16+ my.mts-link.ru О рекламодателе

18 275

🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию? В Vue 2 и Vue 3 (Options API) методы жизненного цикла (mounted, created, beforeDestroy и др.) должны быть обычными функциями, а не стрелочными (() => {}). 🟠Как работает `this` в Vue? Когда Vue вызывает метод жизненного цикла, он автоматически привязывает this к экземпляру компонента.

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    console.log(this.message); // ✅ Работает, this = { message: "Привет!" }
  }
};

🟠Почему стрелочная функция не работает? Стрелочные функции не создают свой собственный this, а берут this из внешнего контекста (того, что было при их создании).

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted: () => {
    console.log(this.message); // ❌ Ошибка: this === undefined
  }
};

🟠Как стрелочные функции всё-таки можно использовать? Хотя стрелочные функции нельзя использовать для методов жизненного цикла, их можно применять внутри обычных методов:

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    setTimeout(() => {
      console.log(this.message); // ✅ Работает, this берётся из `mounted()`
    }, 1000);
  }
};

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

18 275

Пройдите тест из вселенной Назад в будущее Проверьте себя: попробуйте спасти мир и стать DevOps всех времён. 7 вопросов для инженеров и девопс инженеров. 🚀 Пройти тест в боте Всем участникам скидка на курсы Слёрма.

18 275

Почему вы не используете Битрикс24 CRM с AI-помощником? 1- не знал 2- забыл Рассказываем и напоминаем! ✅Битрикс24 CRM с AI помогает увеличивать продажи, работать с постоянными клиентами и сохранять все важные данные. AI-помощник CoPilot внутри сервиса расшифрует телефонные разговоры и автоматически заполнит карточки клиента в CRM. Битрикс24 можно использовать бесплатно для всех команд, независимо от их размера. ⚡Не тратьте время на рутину. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

18 275

🤔 Что такое доступность интерфейсов? Это принципы разработки, обеспечивающие удобство использования интерфейса людьми с ограниченными возможностями. Это включает: - Поддержку экранных читалок (ARIA-атрибуты). - Клавиатурную навигацию. - Контрастность и читаемость текста. - Альтернативный текст для изображений. - Упрощение форм и интерактивных элементов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Открытые школы — это возможность за месяц прокачать свои навыки и получить оффер в ИТ-холдинг Т1. С тебя — год опыта работы в ИТ, с нас — бесплатный онлайн-интенсив и топовые преподаватели. Что ты получишь? ✅ Уникальный рыночный опыт. Наши проекты ежегодно получают награды на ИТ-конкурсах: Global CIO, Национальной банковской премии и др. ✅ Быстрый рост в ИТ при экспертной поддержке. ✅ Материалы от HR, которые помогут прокачать резюме и подготовиться к интервью в Т1. ✅ Поддержка опытных преподавателей и уникальный карьерный фаст-трек до мидла в Т1 для выпускников интенсива. ✅ Реальный шанс получить оффер в Т1. Подавай заявку до 14 марта и приходи учиться! Старт ИТ-интенсива уже 17 марта. Подать заявку #реклама 16+ t1.ru О рекламодателе

18 275

🤔 Как считается вес селектора? Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.

( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент )

Пример

/* Специфичность: (0, 1, 0, 0) */
#header { color: red; }

/* Специфичность: (0, 0, 1, 0) */
.header { color: blue; }

/* Специфичность: (0, 0, 0, 1) */
h1 { color: green; }

🟠Примеры сравнения специфичности Пример 1

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */

Пример 2

h1 { color: red; } /* (0,0,0,1) */
#main { color: blue; } /* (0,1,0,0) */

Пример 3 (комбинированные селекторы)

h1.title { color: red; } /* (0,0,1,1) */
#main h1 { color: blue; } /* (0,1,0,1) */

Пример 4 (инлайн-стиль всегда сильнее)

<h1 style="color: green;">Заголовок</h1>

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
#main { color: purple; } /* (0,1,0,0) */

🟠Как повысить вес селектора? Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!).

h1 { color: red !important; } /* Всегда будет красным */

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

18 275

Узнайте, какая профессия в IT вам подходит. Бесплатно! Пройдите тест на профессию и забирайте: ✅ Бесплатную карьерную консультацию с экспертом ✅ Доступ к чат-боту с гайдами по профессиям и заданиями для самопроверки ✅ Мини-курсы для погружения в IT и дизайн, чтобы точнее выбрать направление ✨130 000 человек уже прошли профтестирование и выбрали перспективную профессию в IT или дизайне Пройдите тест за 5 минут! Начать #реклама 16+ free.skillfactory.ru О рекламодателе

18 275

🤔 Как браузер обрабатывает ссылки? При клике на ссылку браузер: 1. Отправляет HTTP-запрос на сервер. 2. Получает HTTP-ответ, содержащий HTML, CSS, JS. 3. Парсит HTML и загружает ресурсы (CSS, JS, шрифты, изображения). 4. Рендерит страницу, выполняя скрипты и стили. 5. Обновляет историю (pushState, replaceState в SPA). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

🤔 Чем em отличается от rem? 🟠Как работает `em`? em зависит от размера шрифта родителя (font-size).

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

.grandchild {
  font-size: 2em; /* 2 * 30px = 60px */
}

🟠Как работает `rem`? rem всегда зависит от font-size у <html>.

html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}

🟠Когда использовать `em`, а когда `rem`? Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте em, если хотите, чтобы элементы зависели от родителя Ставь 👍 и забирай 📚 Базу знаний

18 275

Альфазокс знает как решать проблему частой изжоги Частая причина изжоги — эрозивные дефекты слизистой оболочки пищевода. Большинство средств от изжоги работают в желудке, хотя изжога может возникать из-за повреждения пищевода забросами кислоты или желчи. При изжоге важно не только снижать кислотность в желудке, но и действовать на причину изжоги - заживлять воспаленную слизистую пищевода. Альфазокс знает как решать проблему частой изжоги. Он защищает эпителий пищевода от агрессивного действия желудочного содержимого, помогает восстановить поврежденную слизистую и способствует заживлению пищевода. Длительность терапии определяется лечащим врачом, в среднем, составляет 4-5 недели. Компоненты не всасываются, а выводятся естественным путем, что означает минимальный риск побочных эффектов. Узнать больше Есть противопоказания. Посоветуйтесь с врачом. #реклама izzogavu.alfasoxx.ru О рекламодателе

18 275

🤔 Как часто происходит рендер? Ререндер компонента в React происходит при: - Изменении состояния (state). - Изменении пропсов (props). - Вызове forceUpdate() (редко используется). - Изменении контекста (context API). Используется React.memo() и useCallback/useMemo для оптимизации. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

Импортозамещение в деле: Depo, Yadro, Гравитон и другие! Пора обновлять инфраструктуру? Тогда делайте это без привязки к зарубежным вендорам. Мы поставляем отечественные серверы, СХД и коммутаторы из реестра Минпромторга: Depo, Yadro, Гравитон, GAGARIN, UTINET, Аквариус, Рико, Норси-Транс, OpenYard, Нерпа и ДатаРу. Это производительная и отказоустойчивая альтернатива зарубежным аналогам, проверенная крупными компаниями и ЦОДами. Подходит для импортозамещения КИИ. Сервер Молл предлагает: ✅ Оборудование от ведущих российских производителей: в наличии на складах Готовые решения для ЦОДов любой сложности Гарантию до 5 лет и постпродажное обслуживание Бесплатную доставку в любую точку России. Не обещаем, а делаем! Если вам нужно российское оборудование для обновления инфраструктуры, пишите в чат или звоните — 8 800 755-25-51 📞 Перейти на сайт #реклама servermall.ru О рекламодателе

18 275

🤔 Зачем нужен 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 275

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

18 275

🤔 Какие минусы у React? 1. Высокий порог входа – нужно изучать JSX, state-менеджеры, хуки. 2. Частые обновления – быстро меняется API и появляются новые подходы. 3. Большой размер бандла – требует оптимизации и разделения кода. 4. Проблемы SEO – без SSR поисковики могут не индексировать страницы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

Прокачаем ваш frontend скилл с junior до middle Научим писать код, который не стыдно показать Первые 7 дней бесплатно. Попробуй! Узнать больше #реклама 16+ ykul.ru О рекламодателе