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

Kanalga Telegram’da o‘tish

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

Ko'proq ko'rsatish

Tarmoq:easyoffer Rossiya36 941 Texnologiyalar & Aralashmalar7 354...

📈 Telegram kanali Frontend | Вопросы собесов analitikasi

Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 18 279 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 354-o'rinni va Rossiya mintaqasida 36 941-o'rinni egallagan.

📊 Auditoriya ko‘rsatkichlari va dinamika

невідомо sanasidan buyon loyiha tez o‘sib, 18 279 obunachiga ega bo‘ldi.

14 Iyun, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -124 ga, so‘nggi 24 soatda esa -6 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.

Tasdiqlash holati: Tasdiqlanmagan
Jalb etish (ER): Auditoriya o‘rtacha 9.62% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 5.70% ini tashkil etuvchi reaksiyalarni to‘playdi.
Post qamrovi: Har bir post o‘rtacha 1 759 marta ko‘riladi; birinchi sutkada odatda 1 042 ta ko‘rish yig‘iladi.
Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 8 ta reaksiya keladi.
Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.

📝 Tavsif va kontent siyosati

Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky”

Yuqori yangilanish chastotasi (oxirgi ma’lumot 15 Iyun, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.

18 279

Obunachilar

-624 soatlar

-467 kunlar

-12430 kunlar

1 759

Post ko'rishlar

~ 1 04224 soatlar

~ 1 23848 soatlar

9.62%

Muloqot nisbati

~ 1

Kuniga postlar

Ads index

beta

Postlar arxiv

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 О рекламодателе