Frontend | Вопросы собесов
Open in Telegram
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv
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 887 subscribers, ranking 7 165 in the Technologies & Applications category and 37 010 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 17 887 subscribers.
According to the latest data from 25 August, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -149 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 6.98%. Within the first 24 hours after publication, content typically collects 4.62% reactions from the total number of subscribers.
- Post reach: On average, each post receives 1 249 views. Within the first day, a publication typically gains 827 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 5.
- 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
Контакт для рекламы: @easyoffer_adv”
Thanks to the high frequency of updates (latest data received on 26 August, 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 887
Subscribers
-624 hours
-457 days
-14930 days
Data loading in progress...
Similar Channels
Tags Cloud
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
August '26
August '26
+26
in 0 channels
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 | |
| 26 August | 0 | |||
| 25 August | 0 | |||
| 24 August | 0 | |||
| 23 August | 0 | |||
| 22 August | +1 | |||
| 21 August | +2 | |||
| 20 August | 0 | |||
| 19 August | +1 | |||
| 18 August | 0 | |||
| 17 August | 0 | |||
| 16 August | +2 | |||
| 15 August | +1 | |||
| 14 August | +3 | |||
| 13 August | +2 | |||
| 12 August | 0 | |||
| 11 August | +3 | |||
| 10 August | 0 | |||
| 09 August | 0 | |||
| 08 August | +6 | |||
| 07 August | +1 | |||
| 06 August | 0 | |||
| 05 August | 0 | |||
| 04 August | +4 | |||
| 03 August | 0 | |||
| 02 August | 0 | |||
| 01 August | 0 |
Channel Posts
🤔 Как решить проблему несовместимости некоторых CSS-свойств в браузере?
- Использовать vendor-префиксы (-webkit-, -moz-, -ms-, -o-);
- Проверять поддержку на сайте caniuse.com;
- Писать fallback-стили;
- Использовать полифиллы или normalize.css для приведения к общему стилю.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
| 2 |  deep tech night
⚡ 5 сентября в онлайн-трансляции — доклады экспертов из Яндекса и международных IT-компаний. В фокусе системы: NPU под LLM, RL-инфраструктура, Physical AI, YDB, большие базы данных и agentic systems.
Разберём, что уже работает, где появляются инженерные компромиссы и как команды справляются с новыми требованиями к архитектуре, инфраструктуре и продакшену.
🗒 В прямом эфире можно будет задать вопросы спикерам. Запись отправим зарегистрированным участникам после события.
Зарегистрироваться
#реклама 16+
deeptechnight.ru
О рекламодателе | 718 |
| 3 | 🤔 Основные причины отказа от классовых компонентов в 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) рассчитаны на хуки
Ставь 👍 и забирай 📚 Базу знаний | 566 |
| 4 |  Хочешь карьеру в ИТ? Начни с программы «Мини-СЕО»
⚡Попади в команду топ-менеджера Т-Банка и работай над стратегическими проектами компании.
В зависимости от трека ты сможешь:
— разрабатывать эффективные методологии для оценки влияния продукта на экосистему с Владимиром Любимовым;
— исследовать экосистемы и находить наиболее перспективные точки роста с Максимом Безруковым;
— развивать сегмент автолюбителей и заниматься региональной экспансией Т-Банка с Жорой Сукасяном;
— вести стратегический план развития 3P, развивать AI-продукты и искать, где AI может упростить работу команды, c Денисом Коротовым;
— участвовать в создании B2B-маркетплейса c Владимиром Абазовым.
Программа подойдет студентам и джуниор-специалистам, которые сильны в математике, аналитике и программировании. Успей подать заявку до 25 сентября!
Зарегистрироваться
#реклама 16+
t-miniceo.ru
О рекламодателе | 748 |
| 5 | Пожизненный PRO доступ на easyoffer — по цене одного года!
До 2 сентября вы можете купить PRO навсегда.
Покупаешь один раз — пользуешься всю жизнь.
– База вопросов и задач из собеседований
– Примеры видео-ответов на вопросы
– Записи реальных собеседований
– Тренажеры "Проработка вопросов" и "Реальное собеседование"
– Аналитика требований из вакансий
– Автоотклики на вакансии
– Агрегатор вакансий (скоро)
👉 Купить PRO со скидкой 70%: https://easyoffer.ru/pro | 788 |
| 6 | 🤔 С помощью чего можно создать асинхронные callback?
Асинхронные callback можно создать через:
1. Промисы — основной способ в современных браузерах:
2. fetch('/api').then(response => callback(response));
3. async/await — оборачиваем функцию в async, а внутри можно использовать await:
4. const callback = async () => {
5. const result = await fetch(...);
6. // обработка
7. };
8. Таймеры и события — классические способы:
9. setTimeout(() => callback(), 1000);
10. element.addEventListener('click', () => callback());
Callback вызывается по завершении асинхронной операции, и важно учитывать задержку выполнения (event loop).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 806 |
| 7 |  Самое интересное в российском PostgreSQL этой осенью!
Регистрируйтесь на бесплатную конференцию по PostgreSQL и технологиям СУБД — Tantor JAM 2026. 10 сентября, Москва. 📅
Что будет на конференции:
✅ AI-first мониторинг СУБД: что уже сегодня можно передать ИИ-агентам и как меняется профессия DBA;
✅ аналитика и HTAP без внешней обвязки, внутри Postgres;
✅ как за два года изменился PostgreSQL для 1С;
✅ защита данных в Tantor Postgres.
Как всегда — технические доклады, живое общение с разработчиками и архитекторами, обмен опытом, а еще — вечерняя программа в честь пятилетия «Тантор Лабс».
Участие бесплатное.
10.09.2026, Москва
Зарегистрироваться
#реклама 16+
tantorlabs.ru
О рекламодателе | 823 |
| 8 | 🤔 Какие есть альтернативы у redux?
Redux – мощный инструмент, но не всегда он необходим. Существует множество альтернатив, каждая из которых подходит для разных сценариев.
🚩React Context API + useReducer
Подходит для небольших и средних приложений
Встроено в React (не требует установки дополнительных библиотек)
useContext` позволяет передавать данные по дереву компонентов без "прокидывания" через props
useReducer работает как Redux, но проще
const AuthContext = createContext();
function authReducer(state, action) {
switch (action.type) {
case "LOGIN":
return { ...state, isAuthenticated: true, user: action.payload };
case "LOGOUT":
return { ...state, isAuthenticated: false, user: null };
default:
return state;
}
}
function AuthProvider({ children }) {
const [state, dispatch] = useReducer(authReducer, {
isAuthenticated: false,
user: null,
});
return (
<AuthContext.Provider value={{ state, dispatch }}>
{children}
</AuthContext.Provider>
);
}
function LoginButton() {
const { dispatch } = useContext(AuthContext);
return (
<button onClick={() => dispatch({ type: "LOGIN", payload: "Иван" })}>
Войти
</button>
);
}
🚩Zustand
Проще Redux, но с теми же возможностями
Нет лишних actions и reducers, только функции
import { create } from "zustand";
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
function Counter() {
const { count, increment } = useStore();
return <button onClick={increment}>Счетчик: {count}</button>;
}
🚩Recoil
Идеален для React-приложений
Гибче, чем Redux, с концепцией "атомов" (раздельные состояния)
import { atom, useRecoilState } from "recoil";
const countState = atom({
key: "count",
default: 0,
});
function Counter() {
const [count, setCount] = useRecoilState(countState);
return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}
🚩Jotai
Напоминает Recoil, но без сложных концепций
Поддерживает React Suspense и асинхронные состояния
import { atom, useAtom } from "jotai";
const countAtom = atom(0);
function Counter() {
const [count, setCount] = useAtom(countAtom);
return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}
🚩MobX
Автоматически отслеживает изменения состояния
Удобен для сложных приложений
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";
class CounterStore {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count++;
}
}
const store = new CounterStore();
const Counter = observer(() => (
<button onClick={() => store.increment()}>Счетчик: {store.count}</button>
));
🚩XState
Подходит для сложных логик (например, UI-анимаций, состояний формы)
Удобно описывать последовательности действий
import { createMachine, interpret } from "xstate";
const toggleMachine = createMachine({
id: "toggle",
initial: "inactive",
states: {
inactive: { on: { TOGGLE: "active" } },
active: { on: { TOGGLE: "inactive" } },
},
});
const service = interpret(toggleMachine).start();
service.send("TOGGLE"); // Меняет состояние
Ставь 👍 и забирай 📚 Базу знаний | 712 |
| 9 |  +3Международная выставка освещения в Гучжэне, Китай 2026
Дата: 2026. 20-25 октября
⚡Люстры, LED, smart lighting, интерьерный, коммерческий свет напрямую от фабрик Китая!
✨Посетите крупнейшую выставку света в Китае.
Официальный сайт выставки!
Пройти регистрацию и получить бесплатный билет:
Зарегистрироваться
#реклама
reg.denggle.com
О рекламодателе | 913 |
| 10 | 🤔 Что известно про последнюю интересную вещь которую узнал про CSS?
Например: свойство :has() стало поддерживаться в современных браузерах. Оно позволяет писать селекторы на основе потомков или соседей, что открывает новые возможности без JS.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 936 |
| 11 |  Купить пластиковые окна РЕХАУ от производителя
Улучшенная теплоизоляция. 30+ лет службы. Современные дизайнерские решения
Узнать больше
#реклама
rhsolutions.ru
О рекламодателе | 951 |
| 12 | 🤔 Какими способами мы можем получить картинку с сервера?
В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.).
<img> – самый простой способ (браузер сам загружает)
<img src="https://example.com/image.jpg" alt="Картинка">
CSS (background-image) – если нужно фоновое изображение
.element {
background-image: url("https://example.com/image.jpg");
background-size: cover;
}
🟠`fetch()` – если нужно обработать картинку в JS
Можно загрузить изображение как Blob и создать временный URL.
fetch("https://example.com/image.jpg")
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
document.getElementById("img").src = url;
});
XMLHttpRequest – старый метод (устарел, но работает)
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";
xhr.onload = function () {
const url = URL.createObjectURL(xhr.response);
document.getElementById("img").src = url;
};
xhr.send();
🟠`<canvas>` – если нужно редактировать изображение
Можно загрузить картинку и нарисовать её на <canvas>.
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
};
img.src = "https://example.com/image.jpg";
WebSocket – если изображение передаётся в реальном времени
const socket = new WebSocket("wss://example.com/socket");
socket.onmessage = function (event) {
const url = URL.createObjectURL(event.data);
document.getElementById("img").src = url;
};
data URL (Base64) – если нужно хранить изображение в тексте
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
Ставь 👍 и забирай 📚 Базу знаний | 914 |
| 13 |  Яндекс Музыка до 360 дней бесплатно
Яндекс Музыка для вас и 3-х ваших близких.
Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс.
Попробуйте бесплатно❤️
Слушать
#реклама 18+
music.yandex.ru
О рекламодателе | 917 |
| 14 | 🤔 Что такое GraphQL?
GraphQL — это язык запросов к API, разработанный Facebook. Позволяет клиенту точно указать, какие данные ему нужны. Это альтернатива REST, с преимуществами:
- меньше перегрузки;
- один запрос на множество сущностей;
- гибкость на стороне клиента.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 1 006 |
| 15 |  Услуги дата-центра в Москве
Размещение и аренда серверного оборудования в дата-центре.
👍 4 современных дата-центра в Москве.
👍 Лицензированный оператор связи.
👍 Индивидуальные конфигурации выделенных серверов под задачи клиента.
👍 Круглосуточная техническая поддержка в Телеграм, без ботов.
Узнать цену
#реклама 16+
itsoft.ru
О рекламодателе | 901 |
| 16 | 🤔 Какие знаешь подходы по написанию css?
Существует несколько методологий и подходов к написанию CSS, которые помогают структурировать код, сделать его более читаемым, масштабируемым и поддерживаемым. Рассмотрим основные.
🟠Классический (обычный) CSS
Стандартное написание CSS без структурных ограничений.
.button {
background-color: blue;
color: white;
padding: 10px;
}
🟠BEM (Block Element Modifier)
BEM — один из самых популярных методологий. Он помогает избежать конфликтов классов и улучшает читаемость кода.
- Block (Блок) — независимый компонент (.button).
- Element (Элемент) — часть блока (.button__icon).
- Modifier (Модификатор) — изменение блока (.button--primary).
<button class="button button--primary">
<span class="button__icon"></span> Нажми меня
</button>
.button {
background-color: gray;
color: white;
padding: 10px;
}
.button--primary {
background-color: blue;
}
.button__icon {
margin-right: 5px;
}
🟠OOCSS (Object-Oriented CSS)
OOCSS (Объектно-ориентированный CSS) предлагает разбивать стили на структуру и внешний вид, чтобы повторно использовать код.
.card {
border: 1px solid #ccc;
padding: 10px;
}
.card--dark {
background-color: black;
color: white;
}
🟠CSS-in-JS (Styled Components, Emotion)
Этот подход популярен в React и других фреймворках, где стили пишутся внутри JavaScript.
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px;
`;
export default function App() {
return <Button>Нажми меня</Button>;
}
🟠Utility-First (Tailwind CSS)
В этом подходе используются готовые утилитарные классы для быстрого стилизации.
<button class="bg-blue-500 text-white p-2 rounded">Кнопка</button>
Ставь 👍 и забирай 📚 Базу знаний | 898 |
| 17 |  +5Регистрируйтесь на Yandex Scale 2026
Главная конференция Yandex Cloud.
Узнайте о сервисах, которые меняют ваш бизнес.
4 офлайн-трека (AI, Infra + DevTools, Data, Security), онлайн-трек Deep Tech, воркшопы по ИИ и интерактивы. Подробнее о программе читайте в карточках🗒
📅24 сентября
🚗Москва + 💻онлайн
Участие бесплатное!
Зарегистрироваться
#реклама 16+
scale.yandex.cloud
О рекламодателе | 830 |
| 18 | 🤔 Как предотвратить рекурсию?
Чтобы избежать бесконечной рекурсии:
- Всегда нужно базовое условие выхода, которое не вызывает рекурсивный вызов.
- Использовать ограничения по глубине вызова.
- Проверять входные параметры.
- Можно заменить рекурсию на итеративный подход (цикл), если глубина вызовов слишком большая.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 1 009 |
| 19 | 🤔 Какие типы данных существуют?
Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты.
🚩Примитивные типы:
🟠Number
представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14.
🟠String
представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!".
🟠Boolean
имеет два значения, true и false, и используется для работы с логическими операциями.
🟠Undefined
переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения.
🟠Null
специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript.
🟠Symbol
уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах.
🟠BigInt
тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number.
🚩Объекты
могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов.
Ставь 👍 и забирай 📚 Базу знаний | 1 112 |
| 20 | 🤔 Что такое SVG?
SVG (Scalable Vector Graphics) — это векторный графический формат, основанный на XML. Он позволяет отображать графику (фигуры, линии, текст) с возможностью масштабирования без потери качества.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 1 118 |
