Frontender's notes [ru]

Open in Telegram

Ведущий канал о современном фронтенде: статьи, новости, практики, вайбкодинг и автоматизация фронта ИИ-агентами. Личный блог автора - @just_genych По вопросам рекламы или разработки - @g_abashkin

Network:Frontender's notes [ru]Russia20 058 Technologies & Applications4 194...

📈 Analytical overview of Telegram channel Frontender's notes [ru]

Channel Frontender's notes [ru] (@frontendnoteschannel_ru) in the Russian language segment is an active participant. Currently, the community unites 32 187 subscribers, ranking 4 194 in the Technologies & Applications category and 20 058 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 32 187 subscribers.

According to the latest data from 06 July, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -344 over the last 30 days and by -16 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 7.18%. Within the first 24 hours after publication, content typically collects 4.53% reactions from the total number of subscribers.
Post reach: On average, each post receives 2 313 views. Within the first day, a publication typically gains 1 457 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 9.
Thematic interests: Content is focused on key topics such as браузер, api, css, интерфейс, загрузка.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Ведущий канал о современном фронтенде: статьи, новости, практики, вайбкодинг и автоматизация фронта ИИ-агентами. Личный блог автора - @just_genych По вопросам рекламы или разработки - @g_abashkin”

Thanks to the high frequency of updates (latest data received on 07 July, 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.

32 187

Subscribers

-1624 hours

-947 days

-34430 days

2 313

Post views

~ 1 45724 hours

~ 1 67748 hours

7.18%

Engagement rate

~ 2

Posts per day

Ads index

beta

Data loading in progress...

Similar Channels

57.4K

NOP::Nuances of Programming

39.4K

Владилен: IT в эпоху AI

21.3K

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

9.7K

HTML Academy

2.9K

Библиотека верстальщика

More channels

Incoming and Outgoing Mentions

---

Attracting Subscribers

July '26

+13

in 0 channels

June '26

+111

in 0 channels

Get PRO

May '26

+239

in 22 channels

Get PRO

April '26

+300

in 0 channels

Get PRO

March '26

+136

in 1 channels

Get PRO

February '26

+156

in 1 channels

Get PRO

January '26

+250

in 60 channels

Get PRO

December '25

+319

in 28 channels

Get PRO

November '25

+379

in 69 channels

Get PRO

October '25

+210

in 32 channels

Get PRO

September '25

+265

in 90 channels

Get PRO

August '25

+111

in 6 channels

Get PRO

July '25

+223

in 2 channels

Get PRO

June '25

+247

in 9 channels

Get PRO

May '25

+255

in 4 channels

Get PRO

April '25

+266

in 1 channels

Get PRO

March '25

+285

in 24 channels

Get PRO

February '25

+449

in 27 channels

Get PRO

January '25

+380

in 36 channels

Get PRO

December '24

+612

in 53 channels

Get PRO

November '24

+576

in 40 channels

Get PRO

October '24

+439

in 27 channels

Get PRO

September '24

+470

in 34 channels

Get PRO

August '24

+466

in 24 channels

Get PRO

July '24

+458

in 34 channels

Get PRO

June '24

+431

in 33 channels

Get PRO

May '24

+442

in 30 channels

Get PRO

April '24

+371

in 26 channels

Get PRO

March '24

+374

in 13 channels

Get PRO

February '24

+846

in 4 channels

Get PRO

January '24

+590

in 22 channels

Get PRO

December '23

+786

in 34 channels

Get PRO

November '23

+431

in 8 channels

Get PRO

October '23

+522

in 1 channels

Get PRO

September '23

+842

in 0 channels

Get PRO

August '23

+1 001

in 0 channels

Get PRO

July '23

+1 476

in 0 channels

Get PRO

June '23

+1 096

in 0 channels

Get PRO

May '23

+916

in 0 channels

Get PRO

April '23

+908

in 0 channels

Get PRO

March '23

+878

in 0 channels

Get PRO

February '23

+584

in 0 channels

Get PRO

January '23

+1 454

in 0 channels

Get PRO

December '22

+638

in 0 channels

Get PRO

November '22

+1 656

in 0 channels

Get PRO

October '22

+536

in 0 channels

Get PRO

September '22

+537

in 0 channels

Get PRO

August '22

+857

in 0 channels

Get PRO

July '22

+1 735

in 0 channels

Get PRO

June '22

+523

in 0 channels

Get PRO

May '22

+218

in 0 channels

Get PRO

April '22

+268

in 0 channels

Get PRO

March '22

+186

in 0 channels

Get PRO

February '22

+424

in 0 channels

Get PRO

January '22

+734

in 0 channels

Get PRO

December '21

+816

in 0 channels

Get PRO

November '21

+663

in 0 channels

Get PRO

October '21

+1 410

in 0 channels

Get PRO

September '21

+565

in 0 channels

Get PRO

August '21

+1 525

in 0 channels

Get PRO

July '21

+1 531

in 0 channels

Get PRO

June '21

+1 533

in 0 channels

Get PRO

May '21

+2 084

in 0 channels

Get PRO

April '21

+1 811

in 0 channels

Get PRO

March '21

+8 672

in 0 channels

Get PRO

February '21

+1 828

in 0 channels

Get PRO

January '21

+1 309

in 0 channels

Get PRO

December '20

+12 495

in 0 channels

Date	Subscriber Growth	Mentions	Channels
07 July	+2
06 July	+2
05 July	+2
04 July	+3
03 July	+4
02 July	0
01 July	0

Channel Posts

⁣Subtree Suspense и типизация ошибок гидратации в React 19: как не потерять контроль над SSR React 19 меняет правила игры для SSR-приложений: Subtree Suspense разрывает блокирующую гидратацию, а строгая типизация ошибок упрощает дебаг production-крашей. Частая ошибка — думать, что Suspense по-прежнему ждёт всё дерево целиком. Subtree Suspense: гидратация без ожидания Раньше Suspense блокировал гидратацию всего дерева, пока не будет готов самый медленный дочерний компонент. В React 19 гидратируются только готовые ветки. Пример — боковая панель с формой и тяжелый график:

<main>
  <InteractiveSidebar data={data.sidebar} />
  <Suspense fallback={<Spinner />}>
    <HeavyGraph data={data.graph} />
  </Suspense>
</main>

InteractiveSidebar гидратируется мгновенно после загрузки своих данных, не дожидаясь чанка с графиком. На медленных каналах это даёт прирост в воспринимаемой производительности до 30-40%. Ошибка: типизация ошибок гидратации В production ErrorBoundary часто ловит неизвестные ошибки. React 19 добавил тип HydrationError:

type HydrationError = {
  type: 'HYDRATION_MISMATCH' | 'CHUNK_LOAD_FAILURE';
  message: string;
  chunkName?: string;
};

Кастомный ErrorBoundary фильтрует только эти ошибки:

class StrictErrorBoundary extends React.Component<{
  children: React.ReactNode;
  fallback: (error: HydrationError) => React.ReactNode;
}> {
  state = { error: null as HydrationError | null };
  static getDerivedStateFromError(error: unknown) {
    return isHydrationError(error) ? { error } : (() => { throw error; })();
  }
  render() {
    return this.state.error ? this.props.fallback(this.state.error) : this.props.children;
  }
}

Типичная ошибка — игнорировать CHUNK_LOAD_FAILURE. Если не обработать, пользователь увидит сломанный интерфейс без части функционала. Дебаг гидратации: enableHydrationDebug В React 19 добавлен хелпер для dev-стенда:

import { enableHydrationDebug } from 'react-dom';
enableHydrationDebug({ logLevel: 'verbose', includeDiff: true });

Он выводит diff, где серверный и клиентский DOM расходятся. Но есть нюанс: сторонние компоненты, мутирующие DOM после загрузки (например, аналитические скрипты), генерируют много шума. На production не включать — verbose-логи могут замедлить рендер. Практический совет Используйте Subtree Suspense только для критичных интерактивных элементов: формы, поиск, навигация. Для неинтерактивных блоков (статический контент) разницы нет, но код усложняется. Типизация ошибок гидратации через кастомный ErrorBoundary обязательна для мульти-чанков. Вывод: Subtree Suspense ускоряет гидратацию, но требует явного деления кода через lazy + Suspense и фильтрации ошибок гидратации через HydrationError, чтобы production оставался стабильным без побочных эффектов от шумных логов.

2	Как я хакнул рынок труда: пишем свой ИИ-комбайн для автооткликов на HH.ru Автор статьи рассказывает о создании бесплатного и автономного ИИ-агента для автоматизации откликов на вакансии. В условиях жесткого рынка труда в IT, где новичкам приходится откликаться на сотни вакансий и часто получать отказы от роботов, уникальное сопроводительное письмо под каждую вакансию становится необходимостью. Разработанный агент самостоятельно ищет вакансии, фильтрует мусор с помощью локальной нейросети без использования платных API, пишет персонализированные письма и отправляет отчеты в Telegram. Скрипт создавался с требованием быть полностью бесплатным и автономным, без необходимости настройки платных сервисов. Читать далее на Habr	1 633
3	Дополнительный интерес к вашим объявлениям бесплатно Теперь в Бортжурнале под каждым вашим постом автоматически закрепляется ваше объявление. Вы делитесь опытом, а параллельно продвигаете автомобиль. Пишите в Бортжурнал, собирайте охваты и увеличивайте просмотры объявлений. Подпишитесь, чтобы быть в курсе обновлений Подписаться #реклама 16+ О рекламодателе	1 551
4	⁣Типизация WebSocket и SSE в React 19: безопасные каналы и граничные состояния Работа с real-time данными — зона повышенного риска. Ошибки типов здесь приводят к падениям, а хаотичные переподключения — к деградации UX. React 19 не изменил API для WebSocket/SSE, но TypeScript с discriminated unions позволяет строить надёжные сокеты, которые не рассыпаются в production. Type-safe каналы через discriminated unions Вместо сырого onmessage: (msg: string) => void используйте Union типы: type WSMessage = \| { type: 'user_joined'; payload: { userId: string; name: string } } \| { type: 'message'; payload: { text: string; from: string } } \| { type: 'error'; payload: { code: number; reason: string } }; function handleMessage(msg: WSMessage) { switch (msg.type) { case 'user_joined': console.log(msg.payload.name); break; case 'error': handleError(msg.payload.code); break; // default не нужен — если добавишь новый тип, TS подскажет } } Switch сужает тип на каждом кейсе — никаких runtime-проверок вручную. Если добавишь presence_update, TypeScript заставит обработать его везде. Это даёт compile-time гарантии, а не надежду на тесты. Reconnection strategy: exponential backoff с jitter Классический паттерн, но с типизированным состоянием: type ReconnectState = \| { status: 'idle' } \| { status: 'connecting'; attempt: number }; class ReconnectingSocket { private attempt = 0; private maxDelay = 30000; reconnect() { const base = Math.min(1000 * 2 ** this.attempt, this.maxDelay); const jitter = base + Math.random() * 1000; setTimeout(() => this.connect(), jitter); this.attempt++; } } Экспонента без jitter — все клиенты переподключаются синхронно. Случайный сдвиг размазывает нагрузку на сервер и снижает риск «thundering herd». Типичный production-косяк: многие игнорируют jitter, а зря — при 10K клиентов это критично. Граничные состояния через discriminated unions Состояние соединения — идеальный кандидат для Union: type ConnectionState = \| { status: 'connecting' } \| { status: 'open' } \| { status: 'closing'; reason: string } \| { status: 'closed'; code: number; wasClean: boolean } \| { status: 'reconnecting'; attempt: number }; С таким типом невозможно случайно прочитать wasClean во время connecting — TS выдаст ошибку. Это спасает на code review: видел баги, где из-за отсутствия discriminated union в React компоненте читали wasClean при connecting, что вело к undefined и падению рендера. Пример компонента в React 19 Я бы не смешивал бизнес-логику с управлением соединением. Используйте reducer для состояния и Command pattern для исходящих сообщений — типизируйте их отдельно: type OutgoingCommand = \| { action: 'send_message'; payload: string } \| { action: 'ping'; timestamp: number }; function RealtimeComponent() { const [state, dispatch] = useReducer(socketReducer, initialConnectionState); useEffect(() => { const ws = new WebSocket('ws://...'); ws.onopen = () => dispatch({ type: 'open' }); ws.onclose = (ev) => dispatch({ type: 'closed', code: ev.code, wasClean: ev.wasClean }); return () => ws.close(); }, []); } Типизируйте команды отдельно, чтобы не протащить в send() случайный null или невалидный объект. Осторожно с типовой ошибкой: не пытайтесь парсить сообщения как any и затем проверять typeof — это убивает всю статику. Лучше используйте библиотеку-валидатор (например, Zod) на границе socket → приложение. Так вы сохраняете type narrowing и получаете runtime-безопасность. Вывод: Discriminated unions для сообщений и состояний соединения дают compile-time гарантии и исключают целые классы багов, что напрямую повышает надёжность real-time интерфейсов в production.	1 332
5	Как фронтендеру из РФ самому оплачивать Cursor, Claude, ChatGPT, Vercel и другие зарубежные сервисы без посредников? У многих рабочий стек до сих пор держится на чужих картах, знакомых или серых ботах. Это неудобно: • переплата на каждой оплате • зависимость от посредника, если нужно срочно продлить сервис • риск светить аккаунты и данные там, где не хочется Картон позволяет выпустить виртуальную карту прямо в Telegram, пополнить её через СБП или USDT и самому оплачивать нужные сервисы. Подходит для: • Cursor, Claude, ChatGPT • Vercel, SaaS и dev-инструментов • зарубежных подписок и онлайн-оплат Без передачи логинов. Без посредников. Карта ваша — платите сами. 👉 Kartonpay_bot Запустите бота и откройте мини-апп внутри Telegram.	1 750
6	Нужен ли здесь useEffect? 12 сценариев из React-код-ревью На code review регулярно встречается один и тот же вопрос, только записанный разным кодом: «Как правильно синхронизировать эти значения через useEffect?». Со временем стало понятно, что чаще полезнее спросить иначе: а эффект здесь вообще нужен? В статье разбираются 12 типичных сценариев из React-код-ревью: производное состояние, события, цепочки эффектов, внешний store, useEffectEvent, загрузку данных и современные подходы React 19.2. Для каждого случая приведен пример «плохо → хорошо» и практический фильтр, который помогает выбрать между рендером, обработчиком события, Action, useEffect или query-библиотекой. Читать далее	1
7	Аренда VPS/VDS-сервера. Виртуальные выделенные серверы в дата-центрах уровня Tier III — 7 готовых конфигураций от 200 ₽/мес. Преимущества аренды: - Выделенные ресурсы без переплаты; - KVM-виртуализация; - Быстрые NVMe SSD; - Соответствие 152-ФЗ, PCI DSS; - Бесплатная защита от DDoS; - Управление через панель, API и Terraform; - Техподдержка 24/7. Запустите сервер за несколько минут! Попробовать #реклама 16+ selectel.ru О рекламодателе	1 776
8	Паттерны React: Кодекс омерты для вашего компонента Вы когда-нибудь бывали в городе Лост-Хэвен? Это город, что никогда не спит, где неоновые вывески офисных зданий отражаются в лужах после дождя, а в тёмном переулке стреляют из автомата «Томпсона». Этим городом правят криминальные семьи, где у каждой свои интересы, и когда эти интересы пересекаются… город погружается в хаос. Этот город растёт и развивается как и… приложения, которые мы пишем на React. И очень хорошо, если разработчик, закладывая фундамент, думает о будущем: строит системы, которые можно переиспользовать, тестировать и расширять. Когда о будущем подумать забываем, получаем технический долг, который в итоге придется разгребать всей команде. Как в большом городе: за архитектурные ошибки платят все. В этой статье разберем, какие паттерны еще держат оборону, какие канули в лету, а какие переродились во что-то новое. Покажу опасные районы и расскажу, как не угробить проект. Читать далее	1 960
9	Оптимизация next.js monorepo приложения Автор статьи рассказывает, как ускорил работу с тулингом на своем проекте, заменив JS-инструменты на нативные. В результате скорость работы с инструментами выросла в среднем более чем в 10 раз. В качестве примера приводится настройка TypeScript, ESLint, Prettier и тестов в monorepo на базе Next.js. Для ускорения автор перенес проверку типов с tsc на нативный TypeScript через tsconfig с использованием project references и incremental builds. Настройка ESLint была заменена на @eslint/config-inspector с проверкой только измененных файлов. Вместо Jest начали использовать Vitest, который быстрее обрабатывает модули. Для форматирования кода оставили Prettier, но добавили запуск только для измененных файлов через lint-staged с фильтрацией по git diff. Автор также оптимизировал работу с пакетами в monorepo, переключившись с npm workspaces на pnpm, что сократило время установки зависимостей с 3-4 минут до 15 секунд. Для хранения кэша при сборке использовал Turborepo и Next.js cache. В результате полный цикл работы с тулингом на проекте (TypeScript, ESLint, тесты и сборка) стал занимать около 30 секунд вместо 5-7 минут ранее. Источник	1 956
10	🤣 Типичные обновления в AppStore ✖️ xCode Journal	2 041
11	Кешбэк 10% за рекламу в МАКС и Telegram через Директ Инвестируйте в продвижение в Telegram, МАКС или на обеих площадках 100 000 ₽ и больше через Директ — вернём часть бюджета на следующие кампании. Для участия заполните форму: укажите, что продвигаете, на каком логине и куда прислать условия. Акция действует с 1 июня по 31 августа. Получить предложение #реклама yandex.ru О рекламодателе	1 877
12	⁣CSP nonce в React 19 — защита от инъекций без костылей SSR с Content-Security-Policy и nonce — классический сценарий, где слабая типизация и неправильная генерация приводят к уязвимостям или багам в production. Частая ошибка: используют обычную строку для nonce, забывая, что её повторное использование или случайная передача ломают всю безопасность. Branded тип для nonce TypeScript с branded-типами — это не магия, а контракт. Компилятор не даст скормить обычную строку туда, где ожидается nonce. type Nonce = string & { readonly brand: unique symbol }; function generateNonce(): Nonce { return crypto.randomUUID() as Nonce; } Практический совет: вызывай generateNonce один раз на SSR-запрос и храни в рефе — это гарантирует уникальность без лишних аллокаций. Интеграция через useServerInsertedHTML React 19 вводит useServerInsertedHTML для безопасной вставки элементов в head до рендера страницы. Без него nonce может не успеть примениться к стилям и скриптам. function useCSPNonce(): Nonce { const nonce = useRef(generateNonce()); useServerInsertedHTML(() => ( <meta httpEquiv="Content-Security-Policy" content={script-src 'nonce-${nonce.current}'; style-src 'nonce-${nonce.current}'} /> )); return nonce.current; } Предупреждение: если nonce передавать как обычный string, легко случайно использовать старый или чужой nonce. Branded тип отсекает этот класс ошибок на этапе компиляции — не трать время на дебаг runtime-багов. Trade-off: между удобством и безопасностью Стили через style атрибут в React 19 уже используют тот же nonce — ничего не нужно дублировать. Но не злоупотребляй: динамические стили с nonce решают проблемы с CSP, но увеличивают payload. Оптимизируй: для статичных стилей используй className и CSS-модули, а nonce оставь только для инлайновых скриптов и критических стилей. Вывод: Branded типы + useServerInsertedHTML — это минималистичный и надёжный паттерн, который защищает от инъекций и багов генерации, оставляя код читаемым и поддерживаемым.	1 738
13	Получи грант до 3,48 млн на обучение дизайну Поступай на дизайн в Центральный университет с грантом. Для учеников 10–11-х классов и СПО. Освой графический, UI/UX и продуктовый дизайн. Создавай визуальные концепты будущего. На программе студенты получают фундаментальную базу, развивают прикладные навыки, приобретают опыт работы над реальными проектами, собирают портфолио и строят связи внутри дизайн-сообщества Подать заявку #реклама 16+ cu.ru О рекламодателе	1 446
14	⁣Типизация data-атрибутов и Dataset API — type-safe селекторы без рантайм-багов Data-атрибуты — мощный инструмент для связывания разметки, JS и CSS. Но без типов легко опечататься в data-modal-id или забыть синхронизировать CSS-селектор с JS. В большом проекте это приводит к багам, которые невозможно поймать до тестирования. Как это выглядит в production Опишите контракт через TypeScript template literal types: type DataAttributes = { 'modal-id': 'header' \| 'footer'; 'theme': 'light' \| 'dark'; 'row-index': number; }; Затем генерируйте type-safe селекторы: type DataSelector<T extends keyof DataAttributes> = [data-${T}=&quot;${DataAttributes[T]}&quot;]; const headerSelector: DataSelector<'modal-id'> = '[data-modal-id="header"]'; // OK Dataset API с маппингом Создайте функцию, которая приводит к camelCase и проверяет типы: function getDataset<K extends keyof DataAttributes>(el: HTMLElement, attr: K): DataAttributes[K] { const key = attr.replace(/[A-Z]/g, m => -${m.toLowerCase()}); return el.dataset[key] as DataAttributes[K]; } Ошибка: забыть, что data-modal-id в dataset становится modalId. Теперь IDE подсветит невалидные ключи. CSS-переменные из типов Соберите CSS custom properties автоматически: const cssVar = --${headerSelector.replace(/[\[\]=&quot;]/g, '').replace(/\s/g, '-')}; // получите --data-modal-id-header Практические советы - Добавьте eslint-правило, запрещающее querySelector('[data-*]') без типов. Это ловится статическим анализом. - Для больших проектов используйте генерацию схемы из единого источника (например, JSON Schema) и экспорт типов — это защитит от рассинхронизации с дизайном. Вывод: Типизация data-атрибутов через template literal types превращает runtime-ошибки в compile-time, синхронизирует CSS и JS, и снижает когнитивную нагрузку при разработке.	1 636
15	ИИ поможет написать за тебя код, и в то же время помешает найти тебе работу? Ирония судьбы. Мы уже доверили нейросетям генерацию компонентов, написание целых функций и даже тестов. Но когда дело доходит до твоего резюме — тот же самый ИИ безжалостно отправляет его в корзину. До 90% откликов отсеиваются алгоритмами ещё до того, как их увидит человек. В 2026 году ты соревнуешься не только с другими разработчиками, но и с машиной, которая оценивает твоё резюме по десяткам критериев за доли секунды. Время играть по новым правилам. 📅 8 июля в 19:00 МСК на бесплатном вебинаре «Как пробить AI-фильтры и получать приглашения на интервью» мы расскажем, как обойти эту систему. На эфире разберем: 🔹 Как AI и ATS отбирают кандидатов прямо сейчас 🔹 Как найти работу в США и Европе 🔹 Что такое «теневой рынок» труда и как использовать его возможности Спикер — Ангелина Волкова, карьерный эксперт AgileFluent. Ангелина знает, как обмануть AI-фильтры: ✔️ Сама придумывает стратегии, которые ведут к офферу ✔️ Обладает большой экспертизой по рынку Северной Америки ✔️ За плечами — более 200 кейсов с международными офферами За время работы AgileFluent уже помогли 800+ специалистам из IT и Digital найти работу в России и за рубежом. Оставляй заявку на вебинар и бронируй место 👉 [ссылка] 👈 Реклама. ООО «Эджайл», ИНН 7810964334, erid: 2Vtzqvs9fcV	1 396
16	⁣CSS в микрофронтендах: почему Layers и Mixins лучше CSS-in-JS Микрофронтенды в монорепе — штука удобная, пока не касаешься CSS. Каждый микросервис тащит свои стили, потом они накладываются друг на друга, кто-то где-то вставляет !important, начинается хаос. Знакомо. Попробовал связку: CSS Modules + CSS Layers + PostCSS Mixins. Дает типизацию, изоляцию и контроль над каскадом. Не идеально, но жить можно. Проблема 1: порядок подключения ломает стили Решается CSS Layers. Явно задаешь приоритет через @layer. Например, слой base (общие компоненты) всегда ниже слоя components (конкретный микрофронт). Делаешь файл layers.css: @layer reset, base, components, utilities; В каждом микрофронте подключаешь: @import '@company/styles/layers.css' layer(components); @layer components { .button { background: var(--color-primary); } } Порядок гарантирован, даже если импорты разбросаны. Типичная ошибка — мешать @import в разные слои в одном файле. Используй одну точку входа для всех слоев. Проблема 2: опечатки в styles.myButton TypeScript тут не поможет — это же CSS. Выход — typed-css-modules. Генерирует .d.ts для всех .module.css. Добавляешь скрипт: "type-check": "typed-css-modules 'packages//src//.module.css' --outDir ." Получаешь: // Button.module.css.d.ts export const button: string; IDE подсказывает имена, ошибки ловятся на CI. Practical совет: генерируй типы на pre-commit хуке, чтобы не забывать. Проблема 3: копипаста flex-center, text-truncate по всем модулям Тут помогает postcss-mixins. Заводишь общий файл: /* @company/styles/mixins.css / @define-mixin flex-center { display: flex; align-items: center; justify-content: center; } В модуле: @import '@company/styles/mixins.css'; .card-header { @mixin flex-center; gap: 0.5rem; } Кода меньше на 30-40%. И стили синхронизированы по всему монорепу. Важно: в продакшене убедись, что postcss-import обрабатывается до postcss-mixins, иначе миксины не раскроются. Архитектура в Nx/Turborepo: - packages/shared/styles — базовые слои + миксины - packages/shared/ui-kit — компоненты с typed-css-modules - apps/mfe- — каждый микрофронт подключает общие стили, но со своими слоями Ключевые trade-offs: меньше рантайма, чем CSS-in-JS, безопаснее голого CSS. Надежность растет за счет типизации и изоляции каскада. Поддержка масштабируется на сотни компонентов. Ссылки по теме: CSS Layers спецификация typed-css-modules postcss-mixins Вывод: Явное управление каскадом через CSS Layers, типизация через typed-css-modules и переиспользование через PostCSS Mixins превращают CSS Modules из опасного зверя в предсказуемый инструмент для микрофронтендов в монорепе.	1 631
17	Онлайн-магистратура для IT: ИТМО, МИФИ + Яндекс Программы онлайн-магистратуры ИТМО и МИФИ в партнёрстве с Яндексом. Актуальные знания, практическое обучение и гибкий график. Учитесь, совмещая с работой. Доступна господдержка оплаты, отсрочка от армии Перейти на сайт #реклама 16+ practicum.yandex.ru О рекламодателе	1 665
18	Как мы ускорили разработку Frontend в 10х: TSGO, Oxlint, Rsbuild, React Compiler & CodeGen В статье разбираются пять направлений, в которых получен измеримый эффект. Первое направление — type checking: сравнение TSCheck и TSGO. Второе — linting: сравнение ESLint, Biome и Oxlint. Третье — bundling: переход от Webpack к Vite, затем к Rsbuild. Четвертое — API-контракты: кодогенерация без AI. Пятое — React-оптимизации: использование React Compiler в production. Читать на Habr	1 965
19	Yandex Ecom Open Air — летнее событие про онлайн-продажи Yandex Ecom Open Air 2026 объединяет деловую программу, живое общение и атмосферу фестиваля в одном потоке. Здесь обсуждают технологии, которые становятся частью среды. Исследуют силы, которые влияют на весь рынок. Находят новые связи, идеи и точки роста. В течение дня пространство фестиваля наполняют выступления, дискуссии, встречи, специальные форматы, музыка и активности партнёров. Присоединиться к происходящему можно из любой точки — на площадке фестиваля или через онлайн-трансляцию. Зарегистрироваться #реклама 18+ ecomfest.ru О рекламодателе	1 614
20	Конец бесплатного PrimeNG, PrimeReact и PrimeVue? Разбираемся, что задумала PrimeTek PrimeTek, бывшая PrimeFaces, запустила PrimeUI — новую лицензионную модель для экосистемы PrimeNG, PrimeReact и PrimeVue. Это подаётся как унификация бренда, но по сути компания собирает свои ключевые продукты под одной коммерческой оболочкой. Раньше они существовали как набор отдельных библиотек, которые монетизировались через дополнительные продукты и сервисы. Теперь вся экосистема превращается в единый лицензируемый актив. В статье разберёмся, что именно изменилось, что останется бесплатным, в чем сильные стороны новой схемы и какие риски она несёт для команд и компаний. Читать далее	2 042

View all posts