Непривычно работать по субботам, да?

Сегодня тот самый день, когда 70% делают вид, что работают, а остальные 30% даже не открывали ноутбук😁

В любом случае, лучше это время потратить на прокачку своих навыков, поэтому параллельно с контентом готовлю вам жоский роадмап по тому, как пройти путь Middle → Middle+ → Senior 💪

Сам знаю и понимаю, как неприятно топтаться на одном месте и как порой тяжело пробить этот потолок, поэтому надеюсь, что данный roadmap сильно поможет вам

⚛️ Что будут спрашивать на собесах про React в 2025/2026?

❄️ До нового года осталось всего ничего, а это значит, что пробиться на перегретом рынке frontend вакансий будет ещё чуть тяжелее. Поэтому чтобы не тратить кучу времени перед собесами и не учить всё подряд, собрал небольшой список актуальных тем.

ЧТО ТОЧНО СПРОСЯТ:

Основы и философия React
- Virtual DOM и reconciliation
- Что вызывает ререндер компонента
- Что такое key и зачем нужен при рендере списков
- Контролируемые и неконтролируемые компоненты
- Порталы
- Синтетические события в React
- Архитектура Fiber и роль render/commit фаз

Хуки🪝
- useState и batching: почему несколько setState могут объединяться
- useEffect: зависимости, очистка, как избежать бесконечных циклов
- useLayoutEffect: когда использовать
- useMemo и useCallback
- useRef: хранение между рендерами, доступ к DOM
- Про React.memo и useMemo спрашивают почти в каждой второй компании
- Как сделать свой useDebounce

Работа с состоянием и данными ♻️
- Когда хватает локального стейта, когда нужен глобальный
- Context: когда уместен, когда нет
- Как избежать prop drilling
- Redux Toolkit / Zustand / MobX: ключевые различия
- Оптимизация ререндеров при работе с глобальным стейтом

Производительность и структура 🏭
- Suspense и lazy: как реально использовать
- Error boundaries: зачем нужны
- Почему нельзя делать тяжелые вычисления прямо в компоненте
- Что такое React Server Components и зачем они нужны (попадался только 1 раз)
- Как работает concurrent rendering и чем он полезен

❌ ЧТО МОЖНО ПРОПУСТИТЬ:
Классовые компоненты, lifecycle-методы, connect() и всё из эпохи pre-hooks

Ваш браузер сдаёт вас с потрохами

✈️ Решил я значит зайти, посмотреть билеты на сайте Аэрофлота. Захожу на сайт, а там: “Проверка браузера...”
Сижу, жду. Перезахожу. И снова жду. И так каждый раз!

А что именно они там проверяют и как это вообще работает?

💅 Browser Fingerprinting
При загрузке страницы выполняется скрипт, который собирает целый “портрет” вашего браузера: userAgent, язык, платформа, разрешение экрана, часовой пояс, список плагинов, поддержка WebGL и Canvas
По сути, браузеру присваивают уникальный отпечаток, по которому потом можно вас узнать даже без cookies 😎

📊 Анализ поведения
Боты двигают мышь идеально ровно, кликают с одинаковыми интервалами.
Реальный человек двигает хаотично, печатает неровно.
Поэтому сайт отслеживает события mousemove, scroll, keydown, даже тайминги между кликами.

Если всё идёт “слишком идеально”, то система подозревает автоматизацию 🤖

🔍Проверка окружения
Также проверяют, не запускается ли браузер в headless-режиме, например, через Selenium.

if (navigator.webdriver) {
  console.log('Обнаружен WebDriver!');
  // Блокируем или показываем капчу
}

Зачем всё это?
- Защита от автоматических бронирований и фрода
- Проверка, что вы не робот, скупающий билеты пачками

😏 Полезные посты/видео

Так как на канал постепенно приходят новые люди, то пора бы сделать пост-закреп с ссылками на все полезные посты/видео.
Данный закреп будет постоянно обновляться.

📱 Мои видео на YouTube:
- FRONTEND SYSTEM DESIGN СОБЕСЕДОВАНИЕ В ЯНДЕКС ❤️
- Разбираем FRONTEND АРХИТЕКТУРУ новостной ленты ВК 📱
- FRONTEND АРХИТЕКТУРА ПОИСКА
- AI инструменты в frontend разработке 🤖

📱 Полезные посты в Телеграм:
- Небольшая сводка с рынка frontend вакансий
- Про tailwind
- Когда стоит делать тестовое? + Когда не стоит?
- Вопросы на React собесах в 2026

🧭 Roadmap для Middle React Frontend разработчиков

Вроде не джун, но всё ещё непонятно куда двигаться дальше? 😫

Расти после middle уровня зачастую трудно, потому что нет понятной структуры, поэтому я решил собрать roadmap для развития Middle Frontend разработчиков до уровней Middle+ и Senior.

🧭 Что внутри:

👨‍💻 Инженерное мышление: декомпозиция задач, чтение чужого кода, error-driven подход, UX

🏗️ Архитектура фронтенда: FSD, state model, состояние сервера, error, logging

🌐 Сеть и сервер: REST, WebSockets, JWT, аутентификация

🧪 Тестирование: Unit, UI, E2E, mocking, культура тестов

⚙️ DX: CI/CD, монорепо, Storybook, bundle insight

💬 Софт скилы: коммуникация, ownership, code review, документация

Для Senior там ещё продвинутые штуки: system design, state machines, advanced TS, перфоманс и безопасность.

Собрал roadmap так, чтобы каждый пункт можно было изучить через понятные объяснения и ссылки на реальные материалы, скорее открывай roadmap по ссылке ниже 👇

👋 Привет! Я Эмиль, frontend ментор

Коротко обо мне
- Действующий senior разработчик. Также как и ты: хожу на созвоны, пилю таски, фикшу баги, ревьюю код 💻
- Работал в стартапах, финтехе, бигтехе, AI проектах как фронтом, так и фулстеком
- Максимальный оффер в РФ: 460 000₽
- Сейчас в основном пишу на React и Go 😀😩

👮‍♂️ Был по обе стороны найма
- Сам проходил сотни собесов
- Сам нанимал разработчиков в команду
- Знаю, что реально ищут рекрутеры и тех.лиды
- Понимаю, как торговаться за лучшие офферы

🏎 На этом канале помогаю Middle Frontend разработчикам вырасти до Senior
- Какие навыки нужны senior инженеру
- Как выжить на тяжелом рынке труда в 2025
- Как фронтендеру правильно проходить собесы и продавать свой опыт
- Почему софт скиллы решают всё
- Как проходить frontend system design интервью

💻 Мои услуги
Мое личное менторство для Middle Frontend разработчиков:
- новое резюме, поиск работы на мертвом рынке 2025
- база по frontend техничке, мок собесы
- поведенческие собесы для frontend
- база по frontend system design
- выход на рынок, поддержка на испыталке

📔 Также есть другие мини форматы:
- личная консультация
- технический frontend мок собес
- frontend system design мок собес
- поведенческий мок собес для frontend

По всем вопросам пиши в личку
Подробнее об услугах и отзывы: frontend-mentor.com

🧭 Roadmap для Middle Frontend разработчиков
Узнай, что должен знать senior frontend разработчик прямо сейчас

🎮 Хобби
Иногда разрабатываю мини SaaS для души.
Например, месяц назад выпустил Google Chrome расширение с уже 300+ активными пользователями

🪓 Полезные посты и видео на канале
Собрал всё в одном месте специально для тебя здесь

🍸 Подписывайся, если
- Хочешь качать и доход и знания
- Понимаешь, что быть мидлом - не предел мечтаний и можно больше: стать senior, свитч в другую область
- Хочется дорасти до зарплатного потолка
- Хочешь понять, как вести себя на современном турбулентом рынке труда 2025

Погнали ломать потолок вместе! 🚀

📱 Новое видео на канале

Понедельник, 11 утра, а это значит, что самое время для работы просмотра нового видоса

В этом небольшом видео разберем, что такое виртуализация во фронтенде (не путать с виртуализацией в ОС). Зачем она нужна и как работают виртуальные списки на самом деле.

Рассмотрим, как под капотом просходит логика отрисовки элементов с применением виртуализации, чтобы понимать, как устроены virtualized библиотеки изнутри, и чтобы дать понять на собеседовании, что вы крепкий орешек и шарите, что это не магия, а понятный механизм.

👉 Смотреть тут: клик
Лайк, подписка, комментарий 👍

✉️ И чтобы разобраться с виртуализацией ещё более подробно, создал специально для тебя материал в письменном виде по этой теме, где ты сможешь найти:

1. причины появления такого феномена как виртуализация
2. какие есть подходы к её реализации (спойлер их несколько)
3. как обрабатывать корнер кейсы
4. настоящие примеры кода
5. как измерять эфективность виртуализации по метрикам (полезно для резюме)
6. какие ошибки чаще всего допускают при работе с виртуальными списками
7. вопросы на собеседованиях по виртуализации

👉 Материалы доступны по этой ссылке

🤔 Почему даже с 6+ годами опыта тяжело найти работу?

Решил провести эксперимент и создать резюме с 8 годами опыта. Зарплату в резюме не указывал. Откликался на всё подряд: на вакансии без опыта, с 1-3 годами, 3-6 годами и 6+

💪 Казалось бы, у тебя резюме с 8 годами опыта, тебя должны отрывать с руками и ногами, но не тут то было. Это может показаться очевидным, но больше всего ответов и приглашений пришло как раз с вакансий, где требуют 6+ лет. То есть с вакансий, где требуют до 6 лет опыта, приходило больше реджектов нежели с 6+

И тут на самом деле может быть несколько причин:

- Самое простое: HR банально нажал на "фильтр по 3-6 годам" и твое резюме с 8 годами улетело

- Overqualified. Рекрутеры боятся, что ты быстро устанешь от роли обычного разработчика. Они думают, что тебе нужны постоянные вызовы и сложные задачи 💻

- Слишком высокие ожидания по зп. Так как я не указал желаемую зп, то может показаться, что с 8 годами я ожидаю не меньше 500к 💸

- Может показаться, что такой опытный разраб просто ищет временную компанию, например, после увольнения, чтобы потом параллельно искать более высокооплачеваемое место и уйти 🔍

- Да и вообще, все любят искать странности и несостыковки. И странно видеть разработчика с 8 годами, который откликается на вакансию 1-3 года. Это все равно что продавать новую машину с салона за четверть от ее стоимости. Странно, не правда ли?

Поэтому и возникает такой парадокс, как накрутка скрутка опыта, когда люди с 10+ годами создают несколько резюме: с реальным опытом и со скрученным. Чтобы просто пройти на те вакансии, где с настоящим опытом они получают отказы.

😎 Ну а если ты не счастливчик с 10 годами опыта, который уже может скручивать опыт, а наоборот middle разработчик, который хочет дорасти до senior, то забирай roadmap для развитию middle frontend разработчиков

Стоит ли перекатываться из Frontend в Go? 💪

💻 Go Go Go Go Go - в последние годы все больше можно услышать про то, что пора перекатываться из Java, JS, C# или из любого другого X в Go

А так ли все гладко и просто при переходе на другой язык? Потому что одно дело, когда ты последние 2-3 года занимался бекендом и просто меняшь свой стек на Go и другое дело, когда ты всё время работал в роле фронта.

Но по-любому хоть один раз и вы задумывались, а стоит ли перекатываться из JS в Go. У каждого могут быть свои причины на это:

💻 Кто-то думает, что на фронте он/она занимается ненастоящим программированием и вот при переходе на бек на Go всё заиграет новыми красками и жизнь станет ярче (спойлер: скорее всего нет)

🤖 Одни могут думать, что AI заменит именно работу фронтов, а работа для бекендеров на Go будет существовать всегда

🤑 Кто-то сравнивает вакансии и зарплаты и делает выводы, что нужно срочно уволняться и менять направление

😢 А другие наоборот могут бояться, что придется заново много учиться, делать пет проекты, готовиться к алгосам и system design сессиям. А затем снова конкурировать на не менее перегретом рынке Go разработчиков, ведь Go сегодня - это Python 5 лет назад, и многие новички поголовно выбирают его

В общем может показаться, что все очень непонятно и запутанно, поэтому на этой неделе будет видос на канале
📱 Стоит ли перекатываться из фронтенда в Go

Ну а если ты не посмотрел прошлый видос на канале, то welcome по ссылочке

📱 Из фронтенда в Go, а стоит ли?

Новое видео на канале! И так совпало, что сегодня четверг, а как мы знаем, четверг - это небольшая пятница. Это значит, что можно немного расслабиться и посмотреть новый видос о том, стоит ли перекатываться из фронтенда в Go или нет?

Разберем плюсы и минусы переката в Go и с чем придется столкнуться, если ты всё-таки решишь это сделать. Спойлер: всё не так однозначно.

👉 Смотреть тут: клик
Лайк, подписка, комментарий 👍

🤔 А стоит ли конкретно тебе перекатываться в Go или нет?

Мы все разные: у нас у всех разные возможности, интересы, желания и конечные цели.

🤔 Так что делать то? В сегодняшнем видео я показал тест, который поможет тебе определиться, что делать конкретно в твоей ситуации. Тест учитывает не только технические навыки, но и твою мотивацию, интересы и возможности.

👾 ПРОЙТИ ТЕСТ
👾 ПРОЙТИ ТЕСТ
👾 ПРОЙТИ ТЕСТ

📚 Обновлял недавно модуль с поведенческими и HR вопросами в рамках своей менторской программы.
Это про то, что обычно спрашивают на HR скринингах, ну или в переписках на HH (сегодня в 99% случаев это боты).

В общем у каждой компании свои вопросы и желаемые ответы на них: у стартапов одно, у бигтехов второе, у каких-нибудь web3 вообще может быть десятое.

Но попадаются и такие вопросы, как на скрине. И чё, как отвечать на такие вопросы, чтобы показать себя с лучшей стороны? 😁

🔵 База данных в браузере?

На одном system design собеседовании в желтом банке попросили спроектировать веб-клон телеграма. Один из нюансов был таким: пользователь должен уметь писать и редактировать сообщения без сети, ставить реакции, а все эти действия отправляются на сервер уже потом, когда интернет появится. То есть нужен полноценный оффлайн режим.

Как такое устроить на клиенте?

🤔 Первое, что приходит в голову, это service worker. Но у мессенджера десятки сущностей: чаты, каналы, пользователи, сообщения. Много разных операций: создать, отредактировать, удалить. Сообщений может быть тысячи, и складывать всю эту логику в сервис воркер быстро превращается в хаос. Можно потерять данные или запороть порядок операций.

Так что нужен другой подход.

Почему бы не сделать небольшой локальный снимок базы на клиенте? Локальная БД, в которой лежит история, статусы сообщений, черновики и очередь pending изменений. Если сети нет, мы просто продолжаем писать в эту БД. Сеть появилась синхронизируем изменения с сервером.

Пример:
💬 Пользователь написал сообщение. Оно улетает в локальную базу и помечается как pending. Сеть пропала. Пользователь его же отредактировал. В БД появляется новая локальная операция. Интернет вернулся. Клиент отправляет обе операции на сервер в правильном порядке.

Для такого сценария можно использовать ElectricSQL это sync-engine, который делает локальный слепок нужных таблиц, позволяет работать оффлайн и синхронизирует состояние с бекендом, включая разбор конфликтов. Но бек тоже нужно под это готовить.

💪 Можно и свое решение. Например, SQL.js. По сути ты получишь SQLite файлик, который можно хранить в IndexedDB. Дальше остается лишь загружать туда нужные таблицы, писать туда pending операции и синхронизировать их при появлении сети.

Снять разбор такого собеса на примере мессенджера?
Да 🔥
Нет 🐳

ВОПРОС С ДЕКАБРЬСКОГО СОБЕСА НА 360К 🤑

Есть проект на React и TypeScript. Сборка через Webpack, при этом в tsconfig указан "target": "es6".
Вопрос: достаточно ли этого, чтобы код, написанный с использованием фич уровня примерно ES2024, был корректно преобразован в ES6?

Ответ: NO! 👎

TypeScript понижает только часть синтаксиса. Он сумеет разобрать и трансформировать конструкции вроде опциональной цепочки или async/await, наверняка вы видели что-то такое:

const a = obj?.x ?? 1; // было

var a = (obj == null ? void 0 : obj.x) ?? 1; // стало

Но современные возможности языка, которые требуют специальных полифилов или которые TS просто не способен превратить в старый синтаксис, останутся нетронутыми. Webpack этот код тоже не изменит, если вы специально не добавите Babel.

Если ты используешь в коде Array.fromAsync, Promise.withResolvers, новые методы Map, Set, то TS их не перепишет под ES6. Он просто оставит их в итоговом бандле. В старых браузерах у пользователей они вызовут ошибку.

Поэтому для реального снижения уровня JavaScript под старые окружения одной записи "target": "es6" в tsconfig недостаточно. Нужен Babel с preset-env и набором полифилов вроде core-js, который сможет действительно преобразовать весь современный код и обеспечить совместимость с выбранными таргетами.

Кстати, в одном из моих видео затрагивалась тема поддержки старых браузеров и полифилов: таймкод.

👉 Записаться на менторство | Мои услуги

Спроектируй фильтрацию по квартирам или ещё одна задача с предновогодних собесов на ведущего frontend разработчика 🩰

Если вы хоть раз пользовались площадками по типу Авито, Циан и прочих, то наверняка видели такие RangeFilter, в которых можно выбрать не только нужный диапазон, например, по стоимости, но еще и увидеть объем (те самые серые столбики - гистограмма) доступных предложений. Такой фильтр сразу показывает, где вообще есть варианты, а где ползунок тянуть бессмысленно.

🤔 Как это реализовать?

Бекенд 🔵
У нас есть БД, например Postgres, и таблица apartments: floor, square, price. Хранить отдельно гистограммы не нужно. Они считаются на лету из реальных данных. Для этого используются бины (это диапазон значений, например: цена от 20 до 40 млн, от 40 до 60 млн и тд). В каждом бине мы считаем количество квартир.

Пример SQL для цены: width_bucket разбивает диапазон min_price → max_price на 20 равных бинов и кладет каждую квартиру в свой сегмент

SELECT
  width_bucket(price, :min_price, :max_price, 20) AS bin,
  COUNT(*) AS count
FROM apartments
WHERE
  floor BETWEEN :floor_from AND :floor_to
  AND square BETWEEN :square_from AND :square_to
GROUP BY bin
ORDER BY bin;

Очень важно считать гистограммы с учетом остальных активных фильтров. То есть, если меняем цену, значит нужно пересчитать этаж и площадь. Иначе столбики будут показывать ложную картину.

По итогу наша ручка с фильтрами будет возвращать что-то типо такого:

{
  "price": {
    "min": 100k,
    "max": 80m,
    "bins": [
      { "from": 100k, "to": 5m, "count": 124 },
      { "from": 5m, "to": 9m, "count": 98 }, ...
    ]
  }
}

Фронт 💅
По сути это обычный input type="range" (чаще два: от и до). Также важно переписать стили для track и thumb через CSS. track и thumb это как раз сам ползунок и дорожка, по которой перемещается ползунок. Не забываем отрисовать гистограмму отдельным слоем с помощью position: absolute и набора div для столбиков (высота столбика пропорциональна maxCount/count).
Лейблы "от 20,93 млн" и "до 8,09 млрд" внутри инпута тоже реализуем через абсолютное позиционирование.

Ещё при перемещении ползунка считаем его же относительное положение относительно ширины инпута, далее зная min/max значения переводим из относительных значений в конкретные from и to. При каждом изменении любого фильтра: обновляем локальный state, с debounce дергаем ручку, перерисовываем все остальные фильтры, чтобы обновить гистограммы

👉 Записаться на менторство | Мои услуги

📱 Новое видео на канале

Собеседование на frontend разработчика в М.Видео - Эльдорадо на 330к 🤑

Поговорили немного про FSD, обсудили его плюсы и минусы. Также поболтали о работе браузера, о работе сетей, о том, как браузер отрисовывает страницы.

Помучали React, пошатали его внутренности, прошлись по теории: JavaScript, CSS, HTML. Успели пописать код, решили алгоритмическую задачу и две задачи на JS.

🩰 Помощь с трудоустройством | Написать в лс