Endi mavjud! Telegram Tadqiqoti 2025 — yilning asosiy insaytlari 
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.telemetr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dl&w=256&q=75)
Frontender's notes [ru]
Kanalga Telegram’da o‘tish
Ведущий канал о современном фронтенде: статьи, новости, практики, вайбкодинг и автоматизация фронта ИИ-агентами. Личный блог автора - @just_genych По вопросам рекламы или разработки - @g_abashkin
Ko'proq ko'rsatish![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.telemetr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=256&q=75)
Tarmoq:📈 Telegram kanali Frontender's notes [ru] analitikasi
Frontender's notes [ru] (@frontendnoteschannel_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 32 187 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 4 194-o'rinni va Rossiya mintaqasida 20 058-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 32 187 obunachiga ega bo‘ldi.
06 Iyul, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -344 ga, so‘nggi 24 soatda esa -16 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 7.18% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.53% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 2 313 marta ko‘riladi; birinchi sutkada odatda 1 457 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 9 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent браузер, api, css, интерфейс, загрузка kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Ведущий канал о современном фронтенде: статьи, новости, практики, вайбкодинг и автоматизация фронта ИИ-агентами.
Личный блог автора - @just_genych
По вопросам рекламы или разработки - @g_abashkin”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 07 Iyul, 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.
32 187
Obunachilar
-1624 soatlar
-947 kunlar
-34430 kunlar
Ma'lumot yuklanmoqda...
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Iyul '26
Iyul '26
+13
0 kanalda
Iyun '26
+111
0 kanalda
Get PRO
May '26
+239
22 kanalda
Get PRO
Aprel '26
+300
0 kanalda
Get PRO
Mart '26
+136
1 kanalda
Get PRO
Fevral '26
+156
1 kanalda
Get PRO
Yanvar '26
+250
60 kanalda
Get PRO
Dekabr '25
+319
28 kanalda
Get PRO
Noyabr '25
+379
69 kanalda
Get PRO
Oktabr '25
+210
32 kanalda
Get PRO
Sentabr '25
+265
90 kanalda
Get PRO
Avgust '25
+111
6 kanalda
Get PRO
Iyul '25
+223
2 kanalda
Get PRO
Iyun '25
+247
9 kanalda
Get PRO
May '25
+255
4 kanalda
Get PRO
Aprel '25
+266
1 kanalda
Get PRO
Mart '25
+285
24 kanalda
Get PRO
Fevral '25
+449
27 kanalda
Get PRO
Yanvar '25
+380
36 kanalda
Get PRO
Dekabr '24
+612
53 kanalda
Get PRO
Noyabr '24
+576
40 kanalda
Get PRO
Oktabr '24
+439
27 kanalda
Get PRO
Sentabr '24
+470
34 kanalda
Get PRO
Avgust '24
+466
24 kanalda
Get PRO
Iyul '24
+458
34 kanalda
Get PRO
Iyun '24
+431
33 kanalda
Get PRO
May '24
+442
30 kanalda
Get PRO
Aprel '24
+371
26 kanalda
Get PRO
Mart '24
+374
13 kanalda
Get PRO
Fevral '24
+846
4 kanalda
Get PRO
Yanvar '24
+590
22 kanalda
Get PRO
Dekabr '23
+786
34 kanalda
Get PRO
Noyabr '23
+431
8 kanalda
Get PRO
Oktabr '23
+522
1 kanalda
Get PRO
Sentabr '23
+842
0 kanalda
Get PRO
Avgust '23
+1 001
0 kanalda
Get PRO
Iyul '23
+1 476
0 kanalda
Get PRO
Iyun '23
+1 096
0 kanalda
Get PRO
May '23
+916
0 kanalda
Get PRO
Aprel '23
+908
0 kanalda
Get PRO
Mart '23
+878
0 kanalda
Get PRO
Fevral '23
+584
0 kanalda
Get PRO
Yanvar '23
+1 454
0 kanalda
Get PRO
Dekabr '22
+638
0 kanalda
Get PRO
Noyabr '22
+1 656
0 kanalda
Get PRO
Oktabr '22
+536
0 kanalda
Get PRO
Sentabr '22
+537
0 kanalda
Get PRO
Avgust '22
+857
0 kanalda
Get PRO
Iyul '22
+1 735
0 kanalda
Get PRO
Iyun '22
+523
0 kanalda
Get PRO
May '22
+218
0 kanalda
Get PRO
Aprel '22
+268
0 kanalda
Get PRO
Mart '22
+186
0 kanalda
Get PRO
Fevral '22
+424
0 kanalda
Get PRO
Yanvar '22
+734
0 kanalda
Get PRO
Dekabr '21
+816
0 kanalda
Get PRO
Noyabr '21
+663
0 kanalda
Get PRO
Oktabr '21
+1 410
0 kanalda
Get PRO
Sentabr '21
+565
0 kanalda
Get PRO
Avgust '21
+1 525
0 kanalda
Get PRO
Iyul '21
+1 531
0 kanalda
Get PRO
Iyun '21
+1 533
0 kanalda
Get PRO
May '21
+2 084
0 kanalda
Get PRO
Aprel '21
+1 811
0 kanalda
Get PRO
Mart '21
+8 672
0 kanalda
Get PRO
Fevral '21
+1 828
0 kanalda
Get PRO
Yanvar '21
+1 309
0 kanalda
Get PRO
Dekabr '20
+12 495
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 07 Iyul | +2 | |||
| 06 Iyul | +2 | |||
| 05 Iyul | +2 | |||
| 04 Iyul | +3 | |||
| 03 Iyul | +4 | |||
| 02 Iyul | 0 | |||
| 01 Iyul | 0 |
Kanal postlari
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>HydrationError:
type HydrationError = {
type: 'HYDRATION_MISMATCH' | 'CHUNK_LOAD_FAILURE';
message: string;
chunkName?: string;
};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 });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 |
