Frontend | Вопросы собесов
Kanalga Telegram’da o‘tish
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Frontend | Вопросы собесов analitikasi
Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 17 887 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 165-o'rinni va Rossiya mintaqasida 37 010-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 17 887 obunachiga ega bo‘ldi.
25 Avgust, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -149 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 6.98% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.62% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 249 marta ko‘riladi; birinchi sutkada odatda 827 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 5 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:
“Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy
Контакт для рекламы: @easyoffer_adv”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 26 Avgust, 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.
17 887
Obunachilar
-624 soatlar
-457 kunlar
-14930 kunlar
Ma'lumot yuklanmoqda...
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Avgust '26
Avgust '26
+26
0 kanalda
Iyul '26
+29
0 kanalda
Get PRO
Iyun '26
+26
2 kanalda
Get PRO
May '26
+41
0 kanalda
Get PRO
Aprel '26
+28
0 kanalda
Get PRO
Mart '26
+28
0 kanalda
Get PRO
Fevral '26
+42
0 kanalda
Get PRO
Yanvar '26
+97
1 kanalda
Get PRO
Dekabr '25
+15
2 kanalda
Get PRO
Noyabr '25
+120
0 kanalda
Get PRO
Oktabr '25
+89
0 kanalda
Get PRO
Sentabr '25
+55
0 kanalda
Get PRO
Avgust '25
+65
0 kanalda
Get PRO
Iyul '25
+98
0 kanalda
Get PRO
Iyun '25
+103
2 kanalda
Get PRO
May '25
+121
2 kanalda
Get PRO
Aprel '25
+171
0 kanalda
Get PRO
Mart '25
+162
5 kanalda
Get PRO
Fevral '25
+359
5 kanalda
Get PRO
Yanvar '25
+531
53 kanalda
Get PRO
Dekabr '24
+285
1 kanalda
Get PRO
Noyabr '24
+539
0 kanalda
Get PRO
Oktabr '24
+1 456
46 kanalda
Get PRO
Sentabr '24
+2 372
275 kanalda
Get PRO
Avgust '24
+742
0 kanalda
Get PRO
Iyul '24
+855
54 kanalda
Get PRO
Iyun '24
+3 780
245 kanalda
Get PRO
May '24
+3 174
224 kanalda
Get PRO
Aprel '24
+2 890
69 kanalda
Get PRO
Mart '24
+2 687
48 kanalda
Get PRO
Fevral '24
+3 294
32 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 26 Avgust | 0 | |||
| 25 Avgust | 0 | |||
| 24 Avgust | 0 | |||
| 23 Avgust | 0 | |||
| 22 Avgust | +1 | |||
| 21 Avgust | +2 | |||
| 20 Avgust | 0 | |||
| 19 Avgust | +1 | |||
| 18 Avgust | 0 | |||
| 17 Avgust | 0 | |||
| 16 Avgust | +2 | |||
| 15 Avgust | +1 | |||
| 14 Avgust | +3 | |||
| 13 Avgust | +2 | |||
| 12 Avgust | 0 | |||
| 11 Avgust | +3 | |||
| 10 Avgust | 0 | |||
| 09 Avgust | 0 | |||
| 08 Avgust | +6 | |||
| 07 Avgust | +1 | |||
| 06 Avgust | 0 | |||
| 05 Avgust | 0 | |||
| 04 Avgust | +4 | |||
| 03 Avgust | 0 | |||
| 02 Avgust | 0 | |||
| 01 Avgust | 0 |
Kanal postlari
🤔 Как решить проблему несовместимости некоторых 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 |
