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

🤔 Что можешь рассказать об version? version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API. Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими. 🟠Семантическое версионирование (SemVer) Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат

MAJOR.MINOR.PATCH

Пример в package.json (Node.js-проекты):

{
  "name": "my-app",
  "version": "1.2.3"
}

Команда для обновления версии в package.json

npm version major   # 2.0.0
npm version minor   # 1.3.0
npm version patch   # 1.2.4

🟠Версионирование API При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты.

https://api.example.com/v1/users
https://api.example.com/v2/users

🟠Версионирование в Git В Git версиями называют теги (tags), привязанные к коммитам.

git tag v1.0.0
git push origin v1.0.0

Чтобы посмотреть все версии

git tag

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

18 275

🤔 Как можно работать с датами в JS? - Нативный класс Date. - Библиотеки: moment.js, date-fns, luxon. - Методы: getFullYear(), toISOString(), getTimezoneOffset(). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Почему flow может плохо влиять на перформанс страницы? Любое вмешательство в поток (например, добавление/удаление элементов, float, position: absolute) может привести к пересчёту стилей и ре-рендеру, что ухудшает производительность при больших объёмах DOM. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

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

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

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

18 275

🤔 Что такое нотация О-большое? Это математическая нотация, обозначающая оценку сложности алгоритма по времени или памяти. Например, O(n) означает, что сложность линейна, O(1) — константная, O(n²) — квадратичная. Используется для анализа производительности кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

🤔 Как защитить Cookie от JavaScript? Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting). 🟠Используем флаг `HttpOnly` (основная защита) HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠Используем `Secure`, чтобы cookie передавались только по HTTPS Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠Используем `SameSite`, чтобы защититься от CSRF-атак SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠Не храним токены в cookie (если можно) Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

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

18 275

🤔 Что передаётся вторым аргументом методам call, apply, bind? Вторым аргументом передаются аргументы вызываемой функции: - call — перечисленные через запятую; - apply — массив; - bind — сохраняет this и передаёт аргументы для будущего вызова. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

Как заработать больше в 2026 году Т-Инвестиции запускают онлайн-интенсив «ТОЛК», чтобы прокачать финансовую грамотность. Эксперты научат: — формировать пассивный доход; — вкладываться в нужные бумаги; — накопить на мечты и безбедную старость; — профессионально зарабатывать на инвестициях. Программа длится три недели. Вы получите практические кейсы и советы ведущих российских трейдеров. Старт уже 1 апреля, успейте зарегистрироваться Зарегистрироваться #реклама 16+ t-tolk.ru О рекламодателе

18 275

🤔 Что известно про систему сборки проектов? Система сборки отвечает за автоматизацию подготовки проекта к запуску, включая: - компиляцию и минификацию; - сборку модулей; - транспиляцию кода (например, Babel); - упаковку стилей и скриптов; - копирование ассетов; - запуск тестов. Примеры: Webpack, Vite, Parcel, Rollup. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

🤔 Что такое webgl? WebGL (Web Graphics Library) — это JavaScript API для рендеринга 2D и 3D-графики в браузере без необходимости установки дополнительных плагинов. Он основан на OpenGL ES и работает внутри HTML5-элемента <canvas>. WebGL позволяет использовать мощность графического процессора (GPU) для отрисовки сложных сцен, анимаций и интерактивных приложений прямо в браузере. 🚩Зачем нужен WebGL? 🟠Рендеринг 3D-графики в браузере Без WebGL для создания сложных 3D-сцен в вебе приходилось использовать Flash, Java-апплеты или другие технологии. WebGL делает это нативно в браузере. 🟠Использование аппаратного ускорения WebGL использует мощность видеокарты (GPU), а не только центрального процессора (CPU), что значительно ускоряет обработку графики. 🟠Работа в разных браузерах и на разных устройствах WebGL работает на большинстве современных браузеров (Chrome, Firefox, Edge, Safari) и поддерживается на Windows, macOS, Linux, iOS и Android. 🟠Поддержка интерактивных приложений Используется в играх, 3D-графике, симуляциях, картографических сервисах (например, Google Maps, Cesium.js), визуализациях данных. 🟠🚩ак использовать WebGL? WebGL управляет графикой через шейдеры — небольшие программы, которые выполняются на видеокарте. Для работы с WebGL обычно используются библиотеки, упрощающие разработку, например: - Three.js — высокоуровневая библиотека для удобной работы с WebGL. - Babylon.js — мощный движок для создания 3D-приложений. - PixiJS — библиотека для 2D-графики с поддержкой WebGL.

<canvas id="webgl-canvas"></canvas>
<script>
  // Получаем WebGL-контекст
  const canvas = document.getElementById("webgl-canvas");
  const gl = canvas.getContext("webgl");

  if (!gl) {
    console.error("WebGL не поддерживается");
  }

  // Устанавливаем цвет фона и очищаем экран
  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Черный фон
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>

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

18 275

🤔 Как организовать код (Module Pattern, наследование)? - Module Pattern: используется для инкапсуляции кода, скрытия деталей реализации и создания чистых API. Обычно основан на IIFE и возвращает объект с публичными методами. - Наследование: в JS можно использовать прототипное наследование (через Object.create или классы), чтобы передавать поведение от одного объекта к другому. Это упрощает переиспользование кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

🤔 Как достигается изоляция при использовании бэм? БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым. 🚩Как БЭМ предотвращает конфликты? 🟠Все стили зависят только от конкретного блока В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте.

<div class="button">Кнопка</div>

.button {
  background: blue;
  color: white;
}

Плохой пример без БЭМ

.container .button {
  background: blue;
}

🟠Элементы (`__`) зависят только от своего блока Стили элемента никогда не зависят от родителя — только от блока.

<div class="card">
  <h2 class="card__title">Заголовок</h2>
  <p class="card__text">Текст карточки</p>
</div>

.card__title {
  font-size: 20px;
}

.card__text {
  color: gray;
}

🟠Модификаторы (`--`) изменяют только нужные стили Модификаторы позволяют изменять внешний вид без переписывания базовых стилей.

<button class="button button--red">Кнопка</button>
<button class="button button--blue">Кнопка</button>

.button {
  padding: 10px;
  border-radius: 5px;
}

.button--red {
  background: red;
}

.button--blue {
  background: blue;
}

🟠Имена классов уникальны, нет глобальных стилей В БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей.

h1 {
  color: red;
}

БЭМ-версия

.card__title {
  color: red;
}

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

18 275

Битва кейсов ИБ: 6 сценариев киберкошмара 7 апреля в поединке сойдутся эксперты «Солара». По одну сторону — кейсы тестирований на проникновение, по другую — реальные атаки. Чьи сценарии окажутся страшнее и критичнее — покажет битва. Кому будет полезно: Руководителям ИБ и ИБ-специалистам — получить данные, чтобы обосновать бюджет и построить стратегию защиты. ИТ-руководителям и менеджерам — узнать о текущих рисках и понять, как спланировать ИБ-бюджет. Руководителям компаний и риск-менеджерам — снизить цифровые и финансовые риски, защитить репутацию. Приходите, чтобы на чужих ошибках закрыть пробелы в своей защите. Зарегистрироваться #реклама 16+ rt-solar.ru О рекламодателе

18 275

🤔 Как принудительно обновить компонент во Vue? Иногда Vue может не понять, что данные изменились. В таком случае можно заставить компонент перерисоваться. Один способ — изменить значение key у компонента, это заставит его перерисоваться заново. Также можно использовать локальное реактивное состояние, которое сбрасывается и снова включает компонент. В крайнем случае используют forceUpdate, но это плохая практика. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Какие есть способы модификации цвета? Можно изменить прозрачность, использовать фильтры, градиенты, наложения и тени. Также можно программно управлять цветом, меняя его тон, насыщенность, яркость через функции препроцессоров или CSS-функции. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 275

🤔 Зачем нам разбивать приложение отдельно на backend и frontend? Разделение на Frontend (клиент) и Backend (сервер) – это стандартный подход в современной веб-разработке. Это делает приложение гибче, масштабируемее и удобнее в разработке. 🚩Почему лучше разделять? 🟠Гибкость и масштабируемость Можно менять Frontend и Backend независимо. Можно использовать разные технологии (например, Vue.js + Django). Можно легко разделить команды разработчиков. 🟠Повышенная безопасность Frontend не имеет доступа к базе данных. Все важные вычисления, авторизация, хранение данных происходят на сервере. API можно защитить токенами (JWT, OAuth). 🟠Уменьшение нагрузки на клиент Логика обработки данных выполняется на сервере. Клиент получает уже готовые данные, а не загружает огромные файлы. 🟠Легче разрабатывать и тестировать Можно разрабатывать Frontend и Backend независимо. Можно подменять сервер на mock-данные во время разработки. 🚩Как они общаются? (REST API & GraphQL) Разделённые приложения общаются через API: REST API (GET, POST, PUT, DELETE) GraphQL API (запросы только нужных данных) WebSockets (реальное время, чаты, онлайн-игры)

GET https://api.example.com/users

Ответ от Backend

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

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

18 275

Нейросеть проверит 100% закупок на стройке за минуты! 👍Контроль закупок за 15 минут в день. Нейросеть "Тринити" экономит ваше время и миллионы рублей Вы - генеральный директор строительной компании, и у вас катастрофически не хватает времени? Работаете 12+ часов в день и не можете контролировать каждую закупку? 💰Тратите миллионы на закупки, но не уверены, что получаете лучшие цены и качество? Хотите спать спокойно, зная, что ваши деньги под защитой? Просто загрузите счет или тендерный протокол в Telegram-бот Получите детальный анализ по 18 параметрам за 1 минуту Экономьте до 10% на каждой закупке без дополнительных усилий В 3-5 раз дешевле, чем содержать штат контролеров! Работает 24/7 без выходных и отпусков. 👌Узнайте про наш телеграм-бот и тестируйте бесплатно 7 дней! Экономия в первый же день. Перейти на сайт #реклама 16+ trinitysafe.ru О рекламодателе