Frontend | Вопросы собесов
Open in Telegram
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads
Show more
Network:📈 Analytical overview of Telegram channel Frontend | Вопросы собесов
Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 17 451 subscribers, ranking 7 464 in the Technologies & Applications category and 37 711 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 17 451 subscribers.
According to the latest data from 27 October, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -217 over the last 30 days and by -18 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 6.71%. Within the first 24 hours after publication, content typically collects 4.29% reactions from the total number of subscribers.
- Post reach: On average, each post receives 1 171 views. Within the first day, a publication typically gains 748 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
- 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:
“Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy
Контакт для рекламы: @sendme_ads”
Thanks to the high frequency of updates (latest data received on 28 October, 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.
17 451
Subscribers
-1824 hours
-707 days
-21730 days
Loading data
Similar Channels
Tags Cloud
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
October '26Oct '26
October '26
+9
in 0 channels
September '26
+10
in 0 channels
Get PRO
August '26
+28
in 0 channels
Get PRO
July '26
+29
in 0 channels
Get PRO
June '26
+26
in 2 channels
Get PRO
May '26
+41
in 0 channels
Get PRO
April '26
+28
in 0 channels
Get PRO
March '26
+28
in 0 channels
Get PRO
February '26
+42
in 0 channels
Get PRO
January '26
+97
in 1 channels
Get PRO
December '25
+15
in 2 channels
Get PRO
November '25
+120
in 0 channels
Get PRO
October '25
+89
in 0 channels
Get PRO
September '25
+55
in 0 channels
Get PRO
August '25
+65
in 0 channels
Get PRO
July '25
+98
in 0 channels
Get PRO
June '25
+103
in 2 channels
Get PRO
May '25
+121
in 2 channels
Get PRO
April '25
+171
in 0 channels
Get PRO
March '25
+162
in 5 channels
Get PRO
February '25
+359
in 5 channels
Get PRO
January '25
+531
in 53 channels
Get PRO
December '24
+285
in 1 channels
Get PRO
November '24
+539
in 0 channels
Get PRO
October '24
+1 456
in 46 channels
Get PRO
September '24
+2 372
in 275 channels
Get PRO
August '24
+742
in 0 channels
Get PRO
July '24
+855
in 54 channels
Get PRO
June '24
+3 780
in 245 channels
Get PRO
May '24
+3 174
in 224 channels
Get PRO
April '24
+2 890
in 69 channels
Get PRO
March '24
+2 687
in 48 channels
Get PRO
February '24
+3 294
in 32 channels
| Date | Subscriber Growth | Mentions | Channels | |
| 28 October | 0 | |||
| 27 October | 0 | |||
| 26 October | 0 | |||
| 25 October | 0 | |||
| 24 October | 0 | |||
| 23 October | +1 | |||
| 22 October | 0 | |||
| 21 October | 0 | |||
| 20 October | +1 | |||
| 19 October | 0 | |||
| 18 October | 0 | |||
| 17 October | 0 | |||
| 16 October | 0 | |||
| 15 October | +1 | |||
| 14 October | 0 | |||
| 13 October | 0 | |||
| 12 October | +3 | |||
| 11 October | 0 | |||
| 10 October | 0 | |||
| 09 October | +2 | |||
| 08 October | 0 | |||
| 07 October | 0 | |||
| 06 October | 0 | |||
| 05 October | 0 | |||
| 04 October | 0 | |||
| 03 October | 0 | |||
| 02 October | 0 | |||
| 01 October | +1 |
Channel Posts
Всё для уверенной улыбки от Oral-B
✅ Совершенная технология Oral-B iO в ассортименте Oral-B
✅ Беспощадна к налёту, нежная к дёснам
Купить
#реклама
market.yandex.ru
О рекламодателе
| 2 | 🤔 Чем spa отличается от классического сайта?
SPA (Single Page Application) и классический сайт (MPA – Multi Page Application) — это два разных подхода к созданию веб-приложений. Они отличаются по способу загрузки данных, навигации и производительности.
🚩Классический сайт (MPA – Multi Page Application)
Каждый раз при переходе на новую страницу браузер запрашивает HTML с сервера. Сервер формирует страницу и отправляет готовый HTML.
<?php
echo "<h1>Добро пожаловать!</h1>";
?>
<a href="/about">О нас</a>
🚩SPA (Single Page Application)
При первом заходе загружается одна HTML-страница и весь JavaScript. Дальше контент подгружается динамически через AJAX или Fetch API.
import React, { useState, useEffect } from "react";
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("/api/products")
.then(res => res.json())
.then(data => setData(data));
}, []);
return <div>{data ? JSON.stringify(data) : "Загрузка..."}</div>;
}
export default App;
Ставь 👍 и забирай 📚 Базу знаний | 632 |
| 3 |  Как зарабатывать на мобильной игре
Как привлекать пользователей, работать с монетизацией и развивать мобильную игру в 2026 году?
Обсудим вместе с экспертами игровой индустрии России на RuStore Mobile GameDev Conf. 2 ноября, Москва + онлайн.
Участие бесплатное, по регистрации
Зарегистрироваться
#реклама 16+
rustore.ru
О рекламодателе | 727 |
| 4 | 🤔 Почему нельзя использовать контекст в качестве хранилища состояния?
Контекст (React Context) не предназначен для частых обновлений. Он хорош для неизменяемых или редко меняемых данных (например, тема, язык). При каждом изменении контекста перерендериваются все потребители, что может вызвать проблемы с производительностью.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 871 |
| 5 | 🤔 Расскажи про области видимости
В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.
🚩Глобальная область видимости
Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.
var globalVar = 'Я глобальная переменная';
function testFunction() {
console.log(globalVar); // Доступно
}
testFunction();
console.log(globalVar); // Доступно
🚩Функциональная область видимости
Переменные, объявленные с помощью var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.
function testFunction() {
var functionVar = 'Я внутри функции';
console.log(functionVar); // Доступно
}
testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна
🚩Блочная область видимости
Переменные, объявленные с помощью let и const, имеют область видимости, ограниченную ближайшим блоком {}.
if (true) {
let blockVar = 'Я внутри блока';
console.log(blockVar); // Доступно
}
console.log(blockVar); // Ошибка: переменная blockVar недоступна
🚩Область видимости модуля (Module Scope)
При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.
export const myVar = 'Я переменная из модуля';
import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"
Ставь 👍 и забирай 📚 Базу знаний | 905 |
| 6 |  🎃 Хеллоуинская акция на easyoffer
В честь Хеллоуина до 31 октября можно забрать PRO навсегда. Покупаешь один раз и пользуешься всю жизнь
🍬Что внутри мешка с угощениями:
– База вопросов и задач из собеседований
– Примеры видео-ответов на вопросы
– Записи реальных собеседований
– Тренажёры «Проработка вопросов» и «Реальное собеседование»
– Аналитика требований из вакансий
– Автоотклики на вакансии
👉 Забрать PRO со скидкой 70%: https://easyoffer.ru/pro | 861 |
| 7 |  Капсульная коллекция в Т-Шопе
Повод порадовать себя и разнообразить гардероб. Смотри, какие вещи созданы для плавного перехода из будней в выходные.
Посмотреть каталог
#реклама
tbank-online.com
О рекламодателе | 933 |
| 8 | 🤔 Зачем нужна система контроля версий?
Она отслеживает изменения в коде, позволяет откатываться, работать в команде, создавать ветки для разных задач, решать конфликты, сохранять историю и документировать прогресс.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 971 |
| 9 |  Монолит vs микросервисы: битва за ваши нервы
💻 Монолит или микросервисы? Кажется, что ответ очевиден, но почему-то одни проекты летают, а другие тонут в хаосе?
Присоединяйтесь к открытому уроку Сергея Прощаева и получите пошаговое руководство по выбору архитектуры.
📅 9 ноября в 20:00. Разберём:
- Как не попасть в ловушку «модных» микросервисов.
- Признаки, что пора выходить из монолита.
- Архитектурные паттерны перехода: Strangler Fig, BFF, Self-contained systems.
- Организационные и технические риски — что пойдёт не так.
- Роль DevOps, CI/CD и мониторинга.
Вы научитесь оценивать реальные риски и стоимость микросервисов, внедрять изменения без сбоев и хаоса и принимать взвешенные решения, сохраняя технический контроль и производительность команды.
✅ Запишитесь сейчас!
Узнать больше
#реклама 16+
otus.ru
О рекламодателе | 973 |
| 10 | 🤔 Что такое async и await?
Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).
🚩Ключевое слово async
Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.
async function fetchData() {
return 'данные';
}
fetchData().then(data => console.log(data)); // выводит "данные"
🚩Ключевое слово await
Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.
async function fetchData() {
let data = await fetch('https://api.example.com/data');
let json = await data.json();
return json;
}
🚩Плюсы
➕Улучшение читаемости кода
Асинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание
➕Упрощение обработки ошибок
В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее.
➕Избегание "callback hell"
Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.
Ставь 👍 и забирай 📚 Базу знаний | 930 |
| 11 |  Теорию по Python знаешь, а проекта нет?
Знакомая ситуация: конспекты есть, основы понятны, а применить язык негде. Без небольшого живого проекта знания так и остаются на уровне записей.
Отус зовет на открытый урок «Telegram-бот с нуля на Python: от теории к практике». Он для тех, кто знает основы и ищет практическую задачу: разберем, как маленький проект превращает теорию в навык.
На уроке:
- как бот получает сообщения
- как он обрабатывает команды
- как отвечает пользователю
Урок пройдет 10.11 в 20:00. Приходи, если хочешь применить Python на деле.
Зарегистрироваться
#реклама 16+
otus.ru
О рекламодателе | 920 |
| 12 | 🤔 Чем 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, если хотите, чтобы элементы зависели от родителя
Ставь 👍 и забирай 📚 Базу знаний | 969 |
| 13 | 🤔 Как бы повернул блок на 45 градусов?
Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.
🚩Пример использования
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
🚩Объяснение
Основной синтаксис
🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).
transform: rotate(угол);
🟠Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="rotated-box"></div>
</body>
</html>
🚩Пояснение
🟠Свойство `transform`
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
🟠Функция rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.
🚩Использование в реальных проектах
🟠Вращение элементов
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
🟠Анимация
В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.
Ставь 👍 и забирай 📚 Базу знаний | 968 |
| 14 |  Техника Braun для красоты и ухода
✅ Оригинальные бритвы, триммеры и эпиляторы
✅ Точность, комфорт и стиль — вместе с Braun
Купить
#реклама
market.yandex.ru
О рекламодателе | 760 |
| 15 | 🤔 Основные причины отказа от классовых компонентов в react?
С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему.
🟠Меньше кода → чище и понятнее
Функциональные компоненты короче, читаются легче, а код становится чище.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<button onClick={this.increment}>
Счетчик: {this.state.count}
</button>
);
}
}
Функциональный компонент (хуки делают код проще)
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Счетчик: {count}
</button>
);
}
🟠Легче управлять жизненным циклом (useEffect vs componentDidMount)
В классах жизненный цикл* компонента состоит из нескольких методов (componentDidMount, componentDidUpdate, componentWillUnmount).
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { time: 0 };
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({ time: this.state.time + 1 });
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return <p>Время: {this.state.time} секунд</p>;
}
}
Функциональный компонент (хуки делают все проще)
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const timer = setInterval(() => setTime(t => t + 1), 1000);
return () => clearInterval(timer);
}, []);
return <p>Время: {time} секунд</p>;
}
🟠Лучшая производительность (меньше потребления памяти)
Классовые компоненты используют экземпляры классов, а функциональные компоненты – просто функции.
Создают экземпляры this
Обрабатывают setState
Хранят лишние связи и контексты
Не создают this
Используют только нужные данные
Оптимизируются через React.memo
const Button = React.memo(({ onClick }) => {
console.log("Ререндер кнопки");
return <button onClick={onClick}>Нажми</button>;
});
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(c => c + 1), []);
return (
<div>
<p>Счетчик: {count}</p>
<Button onClick={increment} />
</div>
);
}
🟠Легче переиспользовать логику (React Hooks vs HOC/Render Props)
Раньше в классах код переиспользовали через HOC и Render Props, но это делало код сложным.
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log("Компонент монтирован");
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
Хуки (useEffect) делают код чище
function useLogger() {
useEffect(() => console.log("Компонент монтирован"), []);
}
function MyComponent() {
useLogger();
return <p>Привет, мир!</p>;
}
🟠Функциональные компоненты – будущее React
React официально рекомендует использовать функциональные компоненты
Dan Abramov (разработчик React)
Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов
Классы не работают в React Server Components
Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки
Ставь 👍 и забирай 📚 Базу знаний | 925 |
| 16 |  🚀 Мок-собеседование с Senior Frontend из бигтеха за 2000 ₽ вместо 7900 ₽
Да, это не просто еще один созвон, где тебе задают вопросы. Это возможность проверить себя до реального собеса и понять, что мешает выйти на следующий грейд 😎
Мок пригодится, если ты ищешь работу, хочешь вырасти в грейде или проверить свои знания перед техническим интервью
Что внутри:
📂 60 минут технических вопросов и задач, которые встречаются на собеседованиях
📂 Подробный фидбек: что получилось хорошо, где потерял баллы и что стоит подтянуть
После мока сможешь самостоятельно разобрать обратную связь или проработать слабые места с ментором. Так будет проще закрыть пробелы и подготовиться к следующему грейду и росту зарплаты.
Мок проходит в рамках менторской программы Шортката. У нас 150+ менторов из Авито, Сбера, VK, WB, Uber и Booking, а наши менти получили уже 500+ офферов
🔥 Открыли всего 50 мест по специальной цене 2000 ₽ вместо 7900 ₽
Для записи переходи в бота → @shortcut_front_bot
Реклама.
О рекламодателе. | 763 |
| 17 |  ОСАГО помесячно — цены без комиссий от страховых!
Оформите ОСАГО один раз и забудьте о продлении. Кешбэк 100% за первый месяц
Заказать
Финансовые услуги оказывает: ПАО СК «Росгосстрах»,СПАО «Ингосстрах» и др..
#реклама
care.yandex.ru
О рекламодателе | 835 |
| 18 | 🤔 Как достигается изоляция при использовании бэм?
БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым.
🚩Как БЭМ предотвращает конфликты?
🟠Все стили зависят только от конкретного блока
В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте.
<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;
}
Ставь 👍 и забирай 📚 Базу знаний | 1 056 |
| 19 |  Услуги дата-центра в Москве
Размещение и аренда серверного оборудования в дата-центре.
👍 4 современных дата-центра в Москве.
👍 Лицензированный оператор связи.
👍 Индивидуальные конфигурации выделенных серверов под задачи клиента.
👍 Круглосуточная техническая поддержка в Телеграм, без ботов.
Узнать цену
#реклама 16+
itsoft.ru
О рекламодателе | 878 |
| 20 | 🤔 В чем отличие атрибутов от свойств в html тегах?
Атрибуты — это то, что записано в HTML.
Свойства — это то, что появляется в JavaScript-объекте element.
Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают!
🟠Атрибуты (`attributes`)
Хранятся в HTML.
Всегда являются строками.
Их можно получить с помощью .getAttribute() и изменить через .setAttribute().
Они не меняются динамически при изменении свойства элемента в JS.
<input id="myInput" type="text" value="Hello">
const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"
🟠Свойства (`properties`)
Хранятся в объекте элемента (HTMLElement).
Имеют разные типы данных (строки, числа, булевые и т. д.).
Меняются динамически при взаимодействии с DOM.
console.log(input.value); // "Hello"
input.value = "New text"; // Меняем свойство
console.log(input.getAttribute("value")); // "Hello" (атрибут НЕ поменялся)
console.log(input.value); // "New text" (свойство изменилось)
Пример с checked у чекбокса
<input type="checkbox" id="myCheckbox" checked>
const checkbox = document.getElementById("myCheckbox");
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут есть, значит включен)
console.log(checkbox.checked); // true (свойство JS - boolean)
checkbox.checked = false; // Меняем состояние чекбокса
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут не поменялся!)
console.log(checkbox.checked); // false (свойство изменилось)
🟠Как правильно работать с атрибутами и свойствами?
Если хотите работать с DOM → используйте свойства (element.value, element.checked и т. д.).
Если хотите работать с атрибутами в HTML → используйте .getAttribute() и .setAttribute().
const img = document.querySelector("img");
// Меняем атрибут src
img.setAttribute("src", "new-image.jpg");
// Меняем свойство width
img.width = 300;
Ставь 👍 и забирай 📚 Базу знаний | 1 238 |
